/* ============================================================
   DINK · Tabletop Pickleball — licensing pitch site
   Concept: the patent's drafting room brought to life.
   Blueprint court-blue ground · optic ball-yellow annotation
   accent · kitchen teal secondary · Anton / Archivo / Plex Mono
   ============================================================ */

/* ---------- fonts ---------- */
@font-face { font-family: 'Anton'; src: url('fonts/anton-v27-latin-regular.woff2') format('woff2'), url('fonts/anton-v27-latin-regular.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('fonts/archivo-v25-latin-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('fonts/archivo-v25-latin-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('fonts/archivo-v25-latin-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('fonts/archivo-v25-latin-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/ibm-plex-mono-v20-latin-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/ibm-plex-mono-v20-latin-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/ibm-plex-mono-v20-latin-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }

/* ---------- tokens ---------- */
:root {
  --court: #0B2740;        /* deep court-blue ink ground */
  --court-deep: #071B2E;   /* darker panel */
  --panel: #103450;        /* raised panel */
  --bone: #E8EFEA;         /* cool, green-biased off-white */
  --bone-dim: #A9BCC6;     /* secondary text, blue-biased */
  --ball: #E9E43F;         /* optic ball yellow — the annotation color */
  --kitchen: #2E8C7A;      /* kitchen teal */
  --hairline: rgba(159, 186, 208, 0.22);
  --hairline-strong: rgba(159, 186, 208, 0.45);
  --display: 'Anton', 'Arial Narrow', sans-serif;
  --body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;
  --pad: clamp(20px, 5vw, 72px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--court);
  color: var(--bone);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* drafting grid ground */
  background-image:
    linear-gradient(var(--hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size: 72px 72px;
  background-attachment: fixed;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--ball); color: var(--court-deep); }

.mono { font-family: var(--mono); }

h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: 0.01em; }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--ball);
  outline-offset: 3px;
}

/* ---------- masthead ---------- */
.masthead {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 28px;
  padding: 14px var(--pad);
  background: color-mix(in srgb, var(--court-deep) 88%, transparent);
  backdrop-filter: none;
  border-bottom: 1px solid var(--hairline-strong);
}
.masthead-brand { display: flex; align-items: baseline; gap: 12px; }
.wordmark { font-family: var(--display); font-size: 28px; color: var(--ball); letter-spacing: 0.04em; }
.wordmark-sub { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; color: var(--bone-dim); }
.masthead-nav { display: flex; gap: 22px; margin-left: auto; }
.masthead-nav a {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none; color: var(--bone-dim);
  padding: 4px 0; border-bottom: 1px solid transparent;
}
.masthead-nav a:hover { color: var(--bone); border-bottom-color: var(--ball); }
.masthead-nav .nav-cta { color: var(--ball); }
.masthead-flag { font-size: 11px; letter-spacing: 0.14em; color: var(--bone-dim); border: 1px solid var(--hairline-strong); padding: 6px 10px; white-space: nowrap; }
@media (max-width: 980px) {
  .masthead-nav { display: none; }
  .masthead-flag { margin-left: auto; }
}
@media (max-width: 520px) {
  .wordmark-sub { display: none; }
  .masthead-flag { font-size: 10px; padding: 5px 8px; }
}

/* ---------- hero ---------- */
.hero { position: relative; min-height: 92vh; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; }
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--court) 4%, rgba(11, 39, 64, 0.55) 42%, rgba(11, 39, 64, 0.15) 75%),
    linear-gradient(100deg, rgba(7, 27, 46, 0.82) 0%, rgba(7, 27, 46, 0.25) 55%, transparent 80%);
}
.hero-marks .crosshair {
  position: absolute; width: 26px; height: 26px; opacity: 0.55;
  background:
    linear-gradient(var(--bone) 1px, transparent 1px) 50% 50% / 100% 1px no-repeat,
    linear-gradient(90deg, var(--bone) 1px, transparent 1px) 50% 50% / 1px 100% no-repeat;
}
.ch-tl { top: 84px; left: 26px; } .ch-tr { top: 84px; right: 26px; }
.ch-bl { bottom: 66px; left: 26px; } .ch-br { bottom: 66px; right: 26px; }
.hero-copy { position: relative; z-index: 2; padding: 120px var(--pad) 90px; max-width: 1080px; }
.eyebrow { font-size: 12px; letter-spacing: 0.22em; color: var(--ball); margin-bottom: 26px; }
.hero h1 { font-size: clamp(44px, 7vw, 118px); line-height: 0.96; text-transform: uppercase; }
.h1-line { display: block; }
.hero h1 em { font-style: normal; color: var(--ball); }
.hero-sub { max-width: 560px; margin: 30px 0 38px; font-size: 18px; color: var(--bone); }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

.btn {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em;
  text-decoration: none; padding: 16px 28px; border: 1px solid var(--ball);
  transition: background 0.15s ease, color 0.15s ease;
}
.btn-primary { background: var(--ball); color: var(--court-deep); font-weight: 600; }
.btn-primary:hover { background: transparent; color: var(--ball); }
.btn-ghost { color: var(--bone); border-color: var(--hairline-strong); }
.btn-ghost:hover { border-color: var(--ball); color: var(--ball); }
.btn-big { display: block; text-align: center; padding: 20px 28px; font-size: 15px; }

/* ticker */
.ticker { position: relative; z-index: 3; width: 100%; overflow: hidden; border-top: 1px solid var(--hairline-strong); background: var(--court-deep); }
.ticker-track { display: flex; white-space: nowrap; width: max-content; animation: tick 46s linear infinite; }
.ticker-track span { font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em; color: var(--ball); padding: 12px 0; }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- sections ---------- */
.section { padding: clamp(72px, 10vw, 130px) var(--pad); border-top: 1px solid var(--hairline-strong); position: relative; scroll-margin-top: 64px; }
.section-deep { background: color-mix(in srgb, var(--court-deep) 78%, transparent); }
.section-head { margin-bottom: clamp(36px, 5vw, 64px); max-width: 1000px; }
.section-tag {
  display: inline-block; font-size: 11px; letter-spacing: 0.24em; color: var(--kitchen);
  border: 1px solid color-mix(in srgb, var(--kitchen) 55%, transparent);
  padding: 6px 12px; margin-bottom: 22px;
  background: color-mix(in srgb, var(--kitchen) 10%, transparent);
}
.section-head h2 { font-size: clamp(36px, 5vw, 74px); line-height: 1.0; text-transform: uppercase; }
.section-head h2 em { font-style: normal; color: var(--ball); }
.section-note { margin-top: 18px; color: var(--bone-dim); max-width: 640px; }

.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.split-copy p { margin-bottom: 18px; max-width: 620px; }
.split-copy .lede { font-size: 21px; line-height: 1.5; font-weight: 500; color: var(--bone); }
.split-copy p:not(.lede) { color: var(--bone-dim); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* ---------- stats ledger ---------- */
.stat-ledger { border-top: 1px solid var(--hairline-strong); }
.stat { display: flex; flex-direction: column; gap: 6px; padding: 22px 0; border-bottom: 1px solid var(--hairline); }
.stat-num { font-family: var(--display); font-size: clamp(44px, 5vw, 68px); line-height: 1; color: var(--bone); }
.stat-unit { font-size: 0.45em; margin-left: 6px; color: var(--bone-dim); }
.stat-label { font-size: 11px; letter-spacing: 0.16em; color: var(--bone-dim); }
.stat-hot .stat-num { color: var(--ball); }
.stat-hot .stat-label { color: var(--ball); }

/* ---------- product ---------- */
.wide-plate { margin-bottom: clamp(40px, 5vw, 64px); border: 1px solid var(--hairline-strong); }
.wide-plate img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.wide-plate figcaption, .exhibit figcaption {
  font-size: 11px; letter-spacing: 0.14em; color: var(--bone-dim);
  padding: 12px 16px; border-top: 1px solid var(--hairline-strong);
  background: var(--court-deep);
}
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--hairline-strong); border-bottom: 1px solid var(--hairline-strong); }
.pillar { padding: 34px 28px 40px 0; }
.pillar + .pillar { border-left: 1px solid var(--hairline); padding-left: 28px; }
.pillar-ref { display: block; font-size: 11px; letter-spacing: 0.18em; color: var(--kitchen); margin-bottom: 16px; }
.pillar h3 { font-size: 26px; text-transform: uppercase; margin-bottom: 14px; letter-spacing: 0.02em; }
.pillar p { color: var(--bone-dim); font-size: 15.5px; }
@media (max-width: 900px) {
  .pillars { grid-template-columns: 1fr; }
  .pillar + .pillar { border-left: 0; border-top: 1px solid var(--hairline); padding-left: 0; }
}

/* ---------- drawings / FIG.2 ---------- */
.fig-wrap { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 1020px) { .fig-wrap { grid-template-columns: 1fr; } }

.fig-sheet { border: 1px solid var(--hairline-strong); background: var(--court-deep); position: relative; padding: clamp(10px, 2vw, 26px); }
#fig2 { width: 100%; height: auto; display: block; }

/* linework */
#fig2 .ln { fill: none; stroke: var(--bone); stroke-width: 2; vector-effect: non-scaling-stroke; }
#fig2 .ln-heavy { stroke-width: 3.5; }
#fig2 .ln-net { stroke-width: 4; stroke: var(--ball); }
#fig2 .post { fill: var(--court-deep); stroke: var(--ball); }
#fig2 .ld { fill: none; stroke: var(--bone-dim); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
#fig2 .zone { fill: var(--kitchen); opacity: 0; transition: opacity 0.9s ease 1.4s; }
#fig2 .ln-ghost { stroke: var(--bone-dim); stroke-dasharray: 10 8; stroke-width: 1.5; }
#fig2 .refnum { font-family: var(--mono); font-size: 26px; fill: var(--bone); text-anchor: middle; text-decoration: underline; text-underline-offset: 5px; }
#fig2 .ref-out { fill: var(--ball); }
#fig2 .ghost-label { font-family: var(--mono); font-size: 17px; fill: var(--bone-dim); text-anchor: middle; letter-spacing: 0.14em; }
#fig2 .dimtext { font-family: var(--mono); font-size: 19px; fill: var(--ball); text-anchor: middle; letter-spacing: 0.12em; }

/* draw-in animation: strokes use pathLength=1 (ghost excluded: it keeps a real dash pattern) */
#fig2 .ln:not(.ln-ghost), #fig2 .ld {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}
#fig2 .ln-ghost { opacity: 0; transition: opacity 0.9s ease 1.1s; }
#fig2 text { opacity: 0; transition: opacity 0.7s ease; }
.fig-drawn #fig2 .ln:not(.ln-ghost), .fig-drawn #fig2 .ld { stroke-dashoffset: 0; }
.fig-drawn #fig2 .ln-ghost { opacity: 0.75; }
.fig-drawn #fig2 .zone { opacity: 0.24; }
.fig-drawn #fig2 text { opacity: 1; }
/* stagger */
.fig-drawn #fig2 .part:nth-of-type(1) .ln { transition-delay: 0.05s; }
.fig-drawn #fig2 .part:nth-of-type(2) .ln { transition-delay: 0.3s; }
.fig-drawn #fig2 [data-part="p18"] .ln { transition-delay: 0.55s; }
.fig-drawn #fig2 [data-part="p14"] .ln { transition-delay: 0.75s; }
.fig-drawn #fig2 .ghost .ln { transition-delay: 1.0s; }
.fig-drawn #fig2 [data-part="p16"] .ln, .fig-drawn #fig2 [data-part="p28"] .ln { transition-delay: 1.2s; }
.fig-drawn #fig2 .callout .ld { transition-delay: 1.5s; }
.fig-drawn #fig2 .dim .ld { transition-delay: 1.7s; }
.fig-drawn #fig2 text { transition-delay: 1.7s; }
.fig-drawn #fig2 .ghost-label, .fig-drawn #fig2 .dimtext { transition-delay: 2.0s; }

/* hover sync highlight */
#fig2 .part.hot .ln, #fig2 .callout.hot .ld { stroke: var(--ball); }
#fig2 .part.hot .refnum, #fig2 .callout.hot .refnum { fill: var(--ball); }
#fig2 [data-part="p18"].hot .zone { opacity: 0.5; }

.film-frame { max-width: 1100px; }
.film-frame iframe, .film-frame video { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: var(--court-deep); }

.model-wrap { margin-top: clamp(28px, 4vw, 56px); }
.model-sheet canvas { display: block; width: 100%; aspect-ratio: 16 / 8; touch-action: pan-y; cursor: grab; }
.model-sheet canvas:active { cursor: grabbing; }
@media (max-width: 700px) { .model-sheet canvas { aspect-ratio: 4 / 3; } }

.titleblock {
  display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between;
  margin-top: 14px; padding: 12px 14px;
  border: 1px solid var(--hairline-strong);
  font-size: 10.5px; letter-spacing: 0.14em; color: var(--bone-dim);
}

/* parts schedule */
.schedule { position: sticky; top: 96px; }
.schedule-title { font-size: 12px; letter-spacing: 0.2em; color: var(--kitchen); margin-bottom: 14px; }
.schedule-list { list-style: none; border-top: 1px solid var(--hairline-strong); }
.schedule-list li {
  display: flex; align-items: baseline; gap: 14px;
  padding: 12px 8px; border-bottom: 1px solid var(--hairline);
  font-size: 15px; cursor: default;
}
.schedule-list li[data-part] { cursor: crosshair; }
.schedule-list li[data-part]:hover, .schedule-list li.hot { background: color-mix(in srgb, var(--ball) 9%, transparent); }
.schedule-list li[data-part]:hover .sched-ref, .schedule-list li.hot .sched-ref { color: var(--ball); }
.sched-ref { font-size: 13px; color: var(--kitchen); min-width: 26px; text-decoration: underline; text-underline-offset: 3px; }
.sched-static { color: var(--bone-dim); }
.dim-table { margin-top: 28px; }
.dim-table h4 { font-size: 12px; letter-spacing: 0.2em; color: var(--kitchen); margin-bottom: 10px; }
.dim-table table { width: 100%; border-collapse: collapse; font-size: 12.5px; letter-spacing: 0.06em; }
.dim-table td { padding: 9px 8px; border-bottom: 1px solid var(--hairline); color: var(--bone-dim); }
.dim-table td:last-child { text-align: right; color: var(--bone); }

/* ---------- exhibits ---------- */
.exhibit-strip {
  display: grid; grid-template-columns: repeat(4, minmax(300px, 1fr));
  gap: 20px; overflow-x: auto; padding-bottom: 12px;
  scroll-snap-type: x mandatory;
}
.exhibit { border: 1px solid var(--hairline-strong); scroll-snap-align: start; min-width: 0; }
.exhibit img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 1200px) { .exhibit-strip { grid-template-columns: repeat(4, minmax(320px, 82vw)); } }

/* ---------- method / rules ledger ---------- */
.rules-ledger { border-top: 1px solid var(--hairline-strong); max-width: 1100px; }
.rule { display: grid; grid-template-columns: 130px 1fr; gap: 10px 36px; padding: 30px 0; border-bottom: 1px solid var(--hairline); }
.rule-claim { font-size: 12px; letter-spacing: 0.16em; color: var(--ball); padding-top: 8px; grid-column: 1; grid-row: 1; }
.rule h3, .rule p { grid-column: 2; }
.rule h3 { font-size: 27px; text-transform: uppercase; margin-bottom: 10px; }
.rule p { color: var(--bone-dim); max-width: 640px; }
@media (max-width: 700px) { .rule { grid-template-columns: 1fr; gap: 6px; } }

/* ---------- claims ---------- */
.claims-ledger { border-top: 1px solid var(--hairline-strong); }
.claim-family { display: grid; grid-template-columns: 220px 1fr; gap: 24px 48px; padding: 36px 0; border-bottom: 1px solid var(--hairline); align-items: start; }
.cf-range { font-family: var(--display); font-size: clamp(56px, 7vw, 96px); line-height: 0.9; color: var(--kitchen); }
.claim-family:nth-child(3) .cf-range { color: var(--ball); }
.cf-body h3 { font-size: 28px; text-transform: uppercase; margin-bottom: 10px; }
.cf-body p { color: var(--bone-dim); max-width: 680px; }
@media (max-width: 700px) { .claim-family { grid-template-columns: 1fr; gap: 8px; } }
.ip-notes { margin-top: 36px; }
.ip-notes p { font-size: 11.5px; letter-spacing: 0.14em; color: var(--bone-dim); margin-bottom: 8px; }

/* ---------- licensing CTA ---------- */
.section-cta { background: var(--court-deep); }
.offer-list { list-style: none; margin: 22px 0 26px; border-top: 1px solid var(--hairline); max-width: 620px; }
.offer-list li { padding: 13px 0 13px 30px; border-bottom: 1px solid var(--hairline); position: relative; color: var(--bone); font-size: 16px; }
.offer-list li::before {
  content: ''; position: absolute; left: 4px; top: 21px;
  width: 12px; height: 1px; background: var(--ball);
}
.cta-panel { border: 1px solid var(--hairline-strong); padding: 34px 30px; background: color-mix(in srgb, var(--panel) 55%, transparent); }
.cta-label { font-size: 11px; letter-spacing: 0.24em; color: var(--kitchen); margin-bottom: 20px; }

/* inquiry form — ledger fields */
.inquiry-form .field { display: block; margin-bottom: 22px; }
.field-label { display: block; font-size: 10.5px; letter-spacing: 0.2em; color: var(--bone-dim); margin-bottom: 7px; }
.inquiry-form input, .inquiry-form textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--hairline-strong);
  color: var(--bone); font-family: var(--body); font-size: 16px; padding: 8px 2px 10px;
  border-radius: 0; resize: vertical;
}
.inquiry-form input:focus, .inquiry-form textarea:focus {
  outline: none; border-bottom-color: var(--ball);
}
.inquiry-form ::placeholder { color: color-mix(in srgb, var(--bone-dim) 65%, transparent); }
.inquiry-form .btn-big { width: 100%; border: 1px solid var(--ball); cursor: pointer; margin-top: 6px; }
.inquiry-form .btn-big[disabled] { opacity: 0.55; cursor: wait; }
.hp-wrap { position: absolute; left: -9999px; top: -9999px; }
.form-note { min-height: 18px; margin-top: 14px; font-size: 11.5px; letter-spacing: 0.12em; color: var(--kitchen); }
.form-note.err { color: var(--ball); }
#ts-slot { margin: 4px 0 10px; }
#ts-slot:empty { display: none; }

/* ---------- footer ---------- */
.footer { padding: 48px var(--pad) 60px; border-top: 1px solid var(--hairline-strong); background: var(--court-deep); }
.footer p { font-size: 12px; color: var(--bone-dim); max-width: 760px; margin-bottom: 10px; }
.footer .mono { letter-spacing: 0.14em; font-size: 11px; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker-track { animation: none; }
  #fig2 .ln, #fig2 .ld { stroke-dashoffset: 0 !important; transition: none !important; }
  #fig2 text { opacity: 1 !important; transition: none !important; }
  #fig2 .zone { opacity: 0.24 !important; transition: none !important; }
}