/* Deep Field — studio site
   Tokens are lifted verbatim from 01_Brand/Brand-Kit/deep-field-design-system.md.
   If anything here conflicts with that file, that file wins. */

:root{
  --bg:#F6F4EF; --surface:#FFFFFF; --text-primary:#0C1019; --text-secondary:#6B7280;
  --border:#E2DED5; --accent:#15BFAE; --accent-alt:#C7A14A;
  --font-display:"Inter",system-ui,-apple-system,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --radius-sm:6px; --radius-md:10px; --radius-lg:16px;
  --container-max:1200px; --gutter:24px;
  --motion-duration:500ms; --motion-ease:cubic-bezier(0.22,1,0.36,1);
}
/* Ink sections invert the palette rather than redefining components. */
.ink{
  --bg:#0C1019; --surface:#141A26; --text-primary:#F6F4EF; --text-secondary:#9AA3AF;
  --border:#222A36;
  background:#0C1019; color:#F6F4EF;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body); font-size:17px; line-height:1.6;
  color:var(--text-primary); background:var(--bg);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
::selection{background:var(--accent);color:#0C1019}

/* ---------- layout ---------- */
.wrap{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:760px}
section{padding:96px 0}
@media(max-width:720px){section{padding:64px 0}}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--font-display);font-weight:300;letter-spacing:-0.03em;line-height:1.08}
.display{font-size:clamp(38px,6.4vw,56px);line-height:1.02;font-weight:200;letter-spacing:-0.035em}
h1{font-size:clamp(32px,5vw,40px)}
h2{font-size:clamp(26px,3.6vw,34px);font-weight:300;line-height:1.14;letter-spacing:-0.025em}
h3{font-size:19px;font-weight:500;letter-spacing:-0.015em}
p{max-width:64ch}
.lede{font-size:clamp(18px,2.1vw,20px);color:var(--text-secondary)}
.small{font-size:14px;line-height:1.5}
.muted{color:var(--text-secondary)}
.eyebrow{
  font-size:12px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--text-secondary);font-weight:500;margin-bottom:20px;
}

/* ---------- header ---------- */
header.site{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:transparent;border-bottom:1px solid transparent;
  transition:background var(--motion-duration) var(--motion-ease),
             border-color var(--motion-duration) var(--motion-ease),
             backdrop-filter var(--motion-duration) var(--motion-ease);
}
/* Over the dark hero the chrome is light; once scrolled it becomes the bone bar. */
header.site .wordmark span,header.site nav.site a{color:#F6F4EF}
header.site .wordmark svg rect:first-of-type{opacity:.35}
header.site.stuck{
  background:rgba(246,244,239,.86);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--border);
}
header.site.stuck .wordmark span{color:var(--text-primary)}
header.site.stuck nav.site a{color:var(--text-secondary)}
header.site.stuck nav.site a:hover,
header.site.stuck nav.site a[aria-current="page"]{color:var(--text-primary)}
header.site.stuck .wordmark svg rect:first-of-type{opacity:1}
/* Pages without a dark hero start in the scrolled state. */
body.lightnav header.site{background:rgba(246,244,239,.86);backdrop-filter:saturate(180%) blur(14px);border-bottom-color:var(--border)}
body.lightnav header.site .wordmark span{color:var(--text-primary)}
body.lightnav header.site nav.site a{color:var(--text-secondary)}
body.lightnav header.site .wordmark svg rect:first-of-type{opacity:1}
header.site .inner{display:flex;align-items:center;justify-content:space-between;height:68px}
.wordmark{display:flex;align-items:center;gap:12px;text-decoration:none}
.wordmark svg{width:28px;height:28px;border-radius:5px;flex:none}
.wordmark span{
  font-family:var(--font-display);font-weight:400;font-size:14px;
  letter-spacing:0.18em;text-transform:uppercase;
}
nav.site{display:flex;align-items:center;gap:28px}
nav.site a{
  text-decoration:none;font-size:15px;color:var(--text-secondary);
  transition:color var(--motion-duration) var(--motion-ease);
}
nav.site a:hover,nav.site a[aria-current="page"]{color:var(--text-primary)}
@media(max-width:720px){
  nav.site{gap:18px}
  nav.site a.hide-sm{display:none}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:var(--font-body);font-size:16px;font-weight:500;
  padding:14px 24px;border-radius:var(--radius-md);text-decoration:none;border:1px solid transparent;
  cursor:pointer;transition:transform var(--motion-duration) var(--motion-ease),
    background var(--motion-duration) var(--motion-ease),
    border-color var(--motion-duration) var(--motion-ease);
}
.btn-primary{background:var(--text-primary);color:var(--bg)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-secondary{background:transparent;color:var(--text-primary);border-color:var(--border)}
.btn-secondary:hover{border-color:var(--text-primary);transform:translateY(-2px)}
.btn-block{display:block;width:100%;text-align:center}
.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.link{color:var(--accent);text-decoration:none}
.link:hover{text-decoration:underline}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:calc(var(--bar) + 68px) 0 104px}
.hero .starfield,.landing .starfield{
  position:absolute;inset:0;object-fit:cover;width:100%;height:100%;
  opacity:.62;pointer-events:none;
}
/* scrim: keeps the type column near-black so the words always win */
.hero::after,.landing::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(100deg,rgba(12,16,25,.96) 0%,rgba(12,16,25,.82) 30%,rgba(12,16,25,.42) 58%,rgba(12,16,25,.18) 100%);
}
.hero .inner,.landing .wrap{position:relative;z-index:1}
.hero .display{max-width:16ch}
.landing .xl{position:relative;z-index:3}
.hero .lede{margin-top:24px;max-width:52ch;color:#9AA3AF}
.landing .btn-primary{background:#F6F4EF;color:#0C1019}
.landing .btn-secondary{color:#F6F4EF;border-color:#222A36}
.landing .btn-secondary:hover{border-color:#F6F4EF}
.landing .microcopy{font-size:14px;color:#9AA3AF;margin-top:16px}
.hero .cta-row{margin-top:40px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero .btn-primary{background:#F6F4EF;color:#0C1019}
.hero .btn-secondary{color:#F6F4EF;border-color:#222A36}
.hero .btn-secondary:hover{border-color:#F6F4EF}
.microcopy{font-size:14px;color:#9AA3AF;margin-top:16px}
@media(max-width:720px){.hero{padding:calc(var(--bar) + 40px) 0 72px}}

/* the one focal point — the single teal element on the page */
.focal{
  display:inline-block;width:9px;height:9px;border-radius:50%;
  background:var(--accent);vertical-align:middle;margin-left:2px;
  animation:pulse 4.5s var(--motion-ease) infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.86)}}

/* ---------- grids & cards ---------- */
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:32px;transition:transform var(--motion-duration) var(--motion-ease),
    border-color var(--motion-duration) var(--motion-ease);
}
.card h3{margin-bottom:10px}
.card p{color:var(--text-secondary);font-size:16px}
a.card{text-decoration:none;display:block}
a.card:hover{transform:translateY(-3px);border-color:var(--accent)}

/* ---------- metrics ---------- */
.metric .n{
  font-family:var(--font-display);font-size:clamp(30px,4vw,42px);font-weight:200;
  line-height:1.1;letter-spacing:-0.035em;display:block;
}
.metric .l{font-size:14px;color:var(--text-secondary);margin-top:8px;display:block}
.metric .n em{font-style:normal;color:var(--accent)}

/* ---------- case study ---------- */
.case{padding:96px 0;border-top:1px solid var(--border)}
.case:first-of-type{border-top:0}
.case-head{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
@media(max-width:860px){.case-head{grid-template-columns:1fr;gap:24px}}
.case dl{display:grid;grid-template-columns:auto 1fr;gap:10px 20px;font-size:15px;margin-top:8px}
.case dt{color:var(--text-secondary)}
.stage{
  border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;
  background:var(--surface);margin-top:40px;
}
.stage .bar{
  display:flex;align-items:center;gap:7px;padding:12px 16px;
  border-bottom:1px solid var(--border);background:var(--bg);
}
.stage .dot{width:9px;height:9px;border-radius:50%;background:var(--border)}
.stage .url{
  margin-left:10px;font-family:var(--font-mono);font-size:12px;color:var(--text-secondary);
}
.stage .body{padding:0}
.stage img{width:100%;height:auto;display:block;background:var(--surface)}

/* problem → approach → result */
.par{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:48px}
@media(max-width:860px){.par{grid-template-columns:1fr;gap:24px}}
.par h4{
  font-family:var(--font-body);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-secondary);font-weight:500;margin-bottom:12px;
}
.par p{font-size:16px}

/* ---------- pricing ---------- */
.tier{display:flex;flex-direction:column;height:100%}
.tier .price{
  font-family:var(--font-display);font-size:38px;font-weight:200;letter-spacing:-0.035em;
  margin:16px 0 4px;
}
.tier .per{font-size:14px;color:var(--text-secondary)}
.tier ul{list-style:none;margin:24px 0 32px;flex:1}
.tier li{
  font-size:15px;color:var(--text-secondary);padding:8px 0 8px 26px;position:relative;
}
.tier li::before{
  content:"";position:absolute;left:6px;top:16px;width:5px;height:5px;border-radius:50%;
  background:var(--border);
}
.tier.featured{border-color:var(--text-primary)}
.tier.featured li::before{background:var(--accent)}
.badge{
  display:inline-block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 10px;border-radius:100px;border:1px solid var(--border);color:var(--text-secondary);
}
.tier.featured .badge{border-color:var(--accent);color:var(--accent)}

/* ---------- table ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px}
th,td{text-align:left;padding:16px 20px;border-bottom:1px solid var(--border);vertical-align:top}
th{font-weight:500;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary)}
td.num{font-family:var(--font-mono);white-space:nowrap}

/* ---------- notice ---------- */
.notice{
  border:1px dashed var(--accent);border-radius:var(--radius-md);
  padding:20px 24px;background:rgba(21,191,174,.05);font-size:15px;
}
.notice strong{font-weight:600}

/* ---------- footer ---------- */
footer.site{padding:64px 0 48px;border-top:1px solid var(--border)}
footer.site .cols{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap}
footer.site a{color:var(--text-secondary);text-decoration:none;font-size:15px}
footer.site a:hover{color:var(--text-primary)}
footer.site .fnav{display:flex;gap:28px;flex-wrap:wrap}
footer.site .legal{margin-top:40px;font-size:13px;color:var(--text-secondary)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(14px)}
.reveal.in{
  opacity:1;transform:none;
  transition:opacity var(--motion-duration) var(--motion-ease),
    transform var(--motion-duration) var(--motion-ease);
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gutter);top:12px;z-index:100;background:var(--surface);padding:10px 16px;border-radius:var(--radius-sm)}

/* ==========================================================================
   Presence layer — added 17 Sep 2026.
   Brief: eyecatching, minimal, effects that demonstrate craft, no gimmicks,
   and no cost to pace. Everything here is CSS; the only JS is a ~1KB fallback
   for browsers without scroll-driven animations.
   Type is Inter only, display at weight 200 — one voice, used well.
   ========================================================================== */

/* ---------- oversized display ---------- */
.xl{
  font-family:var(--font-display);font-weight:200;
  font-size:clamp(42px,8.2vw,124px);line-height:.98;letter-spacing:-0.042em;
  margin:0;
}
.xl .line{display:block;position:relative}
/* the focal object sits between the lines, so type occludes it and it occludes type */
.xl .line.over{z-index:3}
.xl .line.under{z-index:1}

/* ---------- the field: the logo idea at scale ---------- */
.stagewrap{position:relative;isolation:isolate}
.field{
  position:absolute;z-index:2;pointer-events:none;
  width:min(52vw,580px);aspect-ratio:1;
  right:10%;top:52%;transform:translateY(-50%);
}
.field svg{width:100%;height:100%;overflow:visible}
.field .frame{stroke:var(--text-primary);opacity:.22;fill:none;stroke-width:1}
.field .dot{fill:var(--text-primary)}
.field .focal{fill:var(--accent)}
.field .bloom{fill:var(--accent);opacity:.65}
.ink .field .dot{fill:#F6F4EF}
.ink .field .frame{fill:none;stroke:var(--accent);opacity:.5;stroke-width:1.25}

@media(prefers-reduced-motion:no-preference){
  .field .drift-a{animation:driftA 26s ease-in-out infinite alternate}
  .field .drift-b{animation:driftB 34s ease-in-out infinite alternate}
  .field .focalgrp{animation:breathe 6s var(--motion-ease) infinite}
}
@keyframes driftA{from{transform:translate(0,0)}to{transform:translate(6px,-8px)}}
@keyframes driftB{from{transform:translate(0,0)}to{transform:translate(-7px,6px)}}
@keyframes breathe{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.78;transform:scale(.94)}}

@media(max-width:1180px) and (min-width:821px){
  .field{width:min(40vw,400px);right:2%;opacity:.85}
}
@media(max-width:820px){
  .field{position:relative;right:auto;top:auto;transform:none;
    width:min(70vw,340px);margin:24px auto 0}
}

/* ---------- scroll-linked text fill ----------
   One statement per page resolves from slate to ink as it scrolls through.
   Native where supported; the JS fallback sets --p on a timer-free observer. */
.fill{
  font-family:var(--font-display);font-weight:200;
  font-size:clamp(26px,4.4vw,52px);line-height:1.16;letter-spacing:-0.035em;
  max-width:18ch;
  background:linear-gradient(90deg,var(--text-primary) 0 var(--p,0%),var(--text-secondary) var(--p,0%) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.fill.wide{max-width:24ch}
@supports (animation-timeline: view()){
  @media(prefers-reduced-motion:no-preference){
    .fill{
      animation:fillsweep linear both;
      animation-timeline:view();
      animation-range:entry 20% cover 62%;
    }
    @keyframes fillsweep{from{--p:0%}to{--p:100%}}
  }
}
@property --p{syntax:'<percentage>';inherits:false;initial-value:0%}

/* ---------- numbered section head with progress rule ---------- */
.sec-head{
  display:flex;align-items:baseline;gap:20px;
  padding-top:14px;border-top:1px solid var(--border);
  position:relative;margin-bottom:56px;
}
.sec-head::after{
  content:"";position:absolute;left:0;top:-1px;height:1px;
  width:var(--seen,0%);background:var(--accent);
}
@supports (animation-timeline: view()){
  @media(prefers-reduced-motion:no-preference){
    .sec-head::after{
      animation:rule linear both;animation-timeline:view();
      animation-range:entry 90% cover 80%;
    }
    @keyframes rule{from{width:0%}to{width:100%}}
  }
}
.sec-head .n{
  font-family:var(--font-mono);font-size:12px;color:var(--accent);
  letter-spacing:.08em;flex:none;
}
.sec-head .t{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-secondary);font-weight:500;
}
.sec-head .r{margin-left:auto;font-size:12px;color:var(--text-secondary)}

/* ---------- metric count-up ---------- */
.metric .n{font-variant-numeric:tabular-nums}
.metric[data-count] .n{will-change:contents}

/* ---------- card craft ---------- */
a.card{position:relative;overflow:hidden}
a.card::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:0 50%;
  transition:transform var(--motion-duration) var(--motion-ease);
}
a.card:hover::after{transform:scaleX(1)}
a.card .go{
  position:absolute;right:28px;bottom:28px;font-size:18px;color:var(--text-secondary);
  opacity:0;transform:translateX(-6px);
  transition:opacity var(--motion-duration) var(--motion-ease),
             transform var(--motion-duration) var(--motion-ease);
}
a.card:hover .go{opacity:1;transform:none}

/* work stage: lift the screenshot slightly on hover */
.stage img{transition:transform 700ms var(--motion-ease)}
.stage:hover img{transform:scale(1.015)}

/* ---------- marquee-free running strip (clients) ---------- */
.strip{
  display:flex;flex-wrap:wrap;gap:10px 40px;align-items:center;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-secondary);
}
.strip span{white-space:nowrap}
.strip .sep{color:var(--accent);opacity:.6}


/* ==========================================================================
   Carousel — scroll-snap, no library. Keyboard and touch both work because
   it is a real scroll container, not a transform trick.
   ========================================================================== */
.car{position:relative}
.car-track{position:relative}
.car-track{
  display:flex;align-items:flex-start;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding-bottom:4px;
}
.car-track::-webkit-scrollbar{display:none}
.car-slide{
  flex:0 0 100%;scroll-snap-align:center;
  border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;
  background:var(--surface);
}
.car-slide img{width:100%;height:auto;aspect-ratio:1456/839;object-fit:cover;object-position:top center;display:block}
.car-slide figcaption{
  font-size:13px;color:var(--text-secondary);padding:14px 18px;
  border-top:1px solid var(--border);
}
.car-ui{display:flex;align-items:center;gap:14px;margin-top:18px}
.car-btn{
  position:absolute;top:calc(50% - 34px);z-index:4;
  width:64px;height:64px;border-radius:50%;
  display:grid;place-items:center;
  font-size:22px;line-height:1;cursor:pointer;
  color:#0C1019;
  background:rgba(255,255,255,.52);
  -webkit-backdrop-filter:blur(18px) saturate(190%);
  backdrop-filter:blur(18px) saturate(190%);
  border:1px solid rgba(255,255,255,.66);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(12,16,25,.05),
    0 2px 6px rgba(12,16,25,.08),
    0 12px 32px rgba(12,16,25,.16);
  transition:transform 380ms var(--motion-ease),
             background 380ms var(--motion-ease),
             box-shadow 380ms var(--motion-ease),
             opacity 380ms var(--motion-ease);
}
.car-btn[data-car="prev"]{left:18px}
.car-btn[data-car="next"]{right:18px}
.car-btn:hover{
  background:rgba(255,255,255,.72);transform:scale(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 3px 8px rgba(12,16,25,.10),
    0 18px 44px rgba(12,16,25,.22);
}
.car-btn:active{transform:scale(.97)}
.car-btn[disabled]{opacity:0;pointer-events:none}
@media(max-width:720px){
  .car-btn{width:52px;height:52px;font-size:19px;top:calc(50% - 46px)}
  .car-btn[data-car="prev"]{left:10px}
  .car-btn[data-car="next"]{right:10px}
}
.car-dots{display:flex;gap:7px;margin-left:auto;align-items:center}
.car-dot{
  width:6px;height:6px;border-radius:50%;background:var(--border);
  border:0;padding:0;cursor:pointer;
  transition:background var(--motion-duration) var(--motion-ease),
             width var(--motion-duration) var(--motion-ease);
}
.car-dot[aria-current="true"]{background:var(--accent);width:18px;border-radius:3px}
.car-count{font-family:var(--font-mono);font-size:12px;color:var(--text-secondary)}

/* The bar is fixed, so every page that does not sit under a dark hero
   reserves its height on the body. Robust against inline padding. */
:root{--bar:70px}
body.lightnav{padding-top:var(--bar)}
html{scroll-padding-top:calc(var(--bar) + 12px)}
@media(max-width:720px){:root{--bar:62px}}


/* Data slide — the numbers behind each build, same frame as the screenshot. */
.data-slide{
  aspect-ratio:1456/839;display:grid;place-items:center;
  background:var(--text-primary);color:var(--bg);padding:32px;
}
.data-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(30px,6vh,64px) 64px;width:100%;max-width:760px;
}
.data-grid .v{
  font-family:var(--font-display);font-weight:200;letter-spacing:-0.035em;
  font-size:clamp(28px,4vw,52px);line-height:1;display:block;color:#F6F4EF;
}
.data-grid .v em{font-style:normal;color:var(--accent)}
.data-grid .k{
  display:block;margin-top:10px;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:#9AA3AF;
}
@media(max-width:620px){
  .data-grid{gap:22px 28px}
  .data-slide{padding:22px}
}


/* ==========================================================================
   Landing — a full screen that holds one idea, with the numbered index row
   lifted from the Yugen template in the ARKHE library.
   ========================================================================== */
.landing{
  position:relative;overflow:hidden;
  min-height:100svh;min-height:100vh;
  display:flex;flex-direction:column;
  padding:calc(var(--bar) + 40px) 0 34px;
}
.landing .wrap{width:100%}
.landing-inner{flex:1;display:flex;flex-direction:column;justify-content:center}
.landing-main{position:relative;z-index:3;max-width:52ch}
.landing .tagline{
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(20px,2.6vw,30px);letter-spacing:-0.03em;line-height:1.2;
  color:#F6F4EF;margin-top:14px;
}
.landing .para{margin-top:24px;color:#9AA3AF;max-width:46ch}
.landing .cta-row{margin-top:34px}

/* numbered index row, pinned to the foot of the screen */
.index-row{
  position:relative;z-index:3;
  border-top:1px solid rgba(246,244,239,.16);
  padding-top:18px;margin-top:48px;
  display:grid;grid-template-columns:repeat(4,1fr) auto;gap:20px 28px;align-items:start;
}
.idx .n{
  font-family:var(--font-mono);font-size:11px;color:var(--accent);
  letter-spacing:.1em;display:block;
}
.idx .t{
  display:block;margin-top:8px;font-size:14px;color:#F6F4EF;font-weight:400;
  letter-spacing:-0.01em;
}
.idx .d{display:block;margin-top:3px;font-size:12.5px;color:#7E8794;line-height:1.45}
.scrollcue{
  align-self:end;justify-self:end;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:#7E8794;white-space:nowrap;
}
@media(prefers-reduced-motion:no-preference){
  .scrollcue{animation:cue 3.4s var(--motion-ease) infinite}
}
@keyframes cue{0%,100%{opacity:.5}50%{opacity:1}}
@media(max-width:900px){
  .index-row{grid-template-columns:repeat(2,1fr);gap:22px 24px}
  .scrollcue{display:none}
}
@media(max-width:560px){
  .landing{min-height:0;padding:calc(var(--bar) + 28px) 0 40px}
  .index-row{grid-template-columns:1fr 1fr}
}
/* the field object sits behind the landing copy */
.landing .field{top:46%}


/* six-cell data panel */
.data-grid.six{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,5vh,44px) 44px;max-width:900px;
}
.data-grid.six .v{font-size:clamp(22px,2.9vw,38px)}
@media(max-width:820px){
  .data-grid.six{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 26px}
  .data-grid.six .v{font-size:clamp(20px,5vw,28px)}
}

/* slide screenshots link out to the live site */
.car-slide a{display:block;position:relative}
.car-slide a::after{
  content:"Visit ↗";position:absolute;right:16px;bottom:16px;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:#0C1019;background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);
  border:1px solid rgba(255,255,255,.7);border-radius:100px;padding:8px 14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 18px rgba(12,16,25,.14);
  opacity:0;transform:translateY(4px);
  transition:opacity 340ms var(--motion-ease),transform 340ms var(--motion-ease);
}
.car-slide a:hover::after,.car-slide a:focus-visible::after{opacity:1;transform:none}

/* every site, listed and linked */
.sitelist{
  display:flex;flex-wrap:wrap;gap:12px 28px;align-items:baseline;
  border-top:1px solid var(--border);padding-top:22px;margin-top:-40px;
}
.sitelist .sl-label{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary);
  margin-right:8px;
}
.sitelist a{
  font-family:var(--font-mono);font-size:13px;color:var(--text-primary);
  text-decoration:none;border-bottom:1px solid var(--border);padding-bottom:2px;
  transition:border-color var(--motion-duration) var(--motion-ease),color var(--motion-duration) var(--motion-ease);
}
.sitelist a:hover{color:var(--accent);border-bottom-color:var(--accent)}