/* Self-hosted fonts (SIL Open Font License, from Google Fonts): Inter Tight, Geist, Geist Mono, Instrument Sans, Instrument Serif.
   Latin and Latin Extended subsets; the files are named family-subset.woff2. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/geist-latin-ext.woff2?v=824f485b5d) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/geist-latin.woff2?v=19f9c92546) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/geist-mono-latin-ext.woff2?v=84c2a01e0e) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/geist-mono-latin.woff2?v=72971bd490) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/instrument-sans-latin-ext.woff2?v=c4fcfea41f) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/instrument-sans-latin.woff2?v=2ee17598a9) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/instrument-serif-latin-ext.woff2?v=d001482125) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/instrument-serif-latin.woff2?v=5a51946dff) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(../fonts/inter-tight-latin-ext.woff2?v=fd9beddaae) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(../fonts/inter-tight-latin.woff2?v=77fefe8ca1) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Store tokens: light glass. The brand lives here; layout CSS only reads these.
   Grounds are near-white with a faint cool bias; frosted glass is kept for what floats (the nav, overlay cards on the
   film, drawers). Hairlines, soft long shadows and one faint cool accent taken from the hero film's beam.
   Dark mode is its own designed set (dark glass), not an inversion: the system setting picks it unless the visitor
   chose a theme (html[data-theme], set by site.js). */
:root {
  color-scheme: light;

  /* grounds and ink */
  --bg: #F6F7F9;
  --bg-soft: #EEF0F4;
  --surface: #FFFFFF;
  --ink: #0E1013;
  --text-2: #4A5059;
  --text-3: #5E646E;
  --line: rgb(14 16 19 / 0.08);
  --line-2: rgb(14 16 19 / 0.15);
  --on-ink: #FFFFFF;

  /* the one accent: the film's cool beam. --beam is an RGB triplet for glows; --accent is the readable ink of it */
  --beam: 111 147 214;
  --accent: #3D63B8;

  /* glass */
  --glass: rgb(255 255 255 / 0.66);
  --glass-strong: rgb(255 255 255 / 0.84);
  --glass-edge: rgb(255 255 255 / 0.8);
  --blur: blur(20px) saturate(1.5);

  /* deep panels (pricing highlight, code): ink, not a gradient */
  --dark: #0E1013;
  --on-dark: #EEF0F4;
  --on-dark-2: rgb(238 240 244 / 0.64);
  --dark-line: rgb(255 255 255 / 0.1);

  /* legacy names some page CSS still reads; all map to the one accent */
  --blue: var(--beam);
  --violet: var(--beam);
  --orchid: var(--beam);
  --grad: linear-gradient(180deg, rgb(var(--beam)), var(--accent));

  /* type: a confident display face, a quiet text face, one italic for the secondary word, a mono for small labels */
  --display: "Inter Tight", "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Instrument Serif", ui-serif, Georgia, serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;

  /* type scale (fluid, 1.25 below and wide above) */
  --t-xs: 13px;
  --t-sm: 15px;
  --t-md: 17px;
  --t-lg: clamp(19px, 1.5vw, 21px);
  --t-h3: clamp(21px, 1.8vw, 25px);
  --t-h2: clamp(34px, 4.4vw, 60px);
  --t-h1: clamp(44px, 6.4vw, 92px);

  /* spacing rhythm: 8px base; sections breathe at --sec */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px;
  --sec: clamp(88px, 10vw, 152px);

  /* layout */
  --max: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --r-sm: 10px;
  --r: 18px;
  --r-lg: 28px;
  --shadow: 0 1px 1px rgb(14 16 19 / 0.03), 0 12px 32px -18px rgb(24 34 60 / 0.22);
  --shadow-lg: 0 1px 2px rgb(14 16 19 / 0.04), 0 40px 80px -36px rgb(24 34 60 / 0.32);
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --slow: cubic-bezier(0.16, 1, 0.3, 1);
}

/* dark glass */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0A0C0F; --bg-soft: #111419; --surface: #15181D; --ink: #ECEEF2; --text-2: #A8AEB8; --text-3: #8A909B;
    --line: rgb(255 255 255 / 0.08); --line-2: rgb(255 255 255 / 0.16); --on-ink: #0A0C0F;
    --beam: 143 178 240; --accent: #9DBBF2;
    --glass: rgb(22 25 30 / 0.6); --glass-strong: rgb(22 25 30 / 0.82); --glass-edge: rgb(255 255 255 / 0.1);
    --dark: #15181D; --dark-line: rgb(255 255 255 / 0.1);
    --shadow: 0 1px 1px rgb(0 0 0 / 0.3), 0 16px 36px -18px rgb(0 0 0 / 0.7);
    --shadow-lg: 0 1px 2px rgb(0 0 0 / 0.3), 0 40px 80px -36px rgb(0 0 0 / 0.8);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0A0C0F; --bg-soft: #111419; --surface: #15181D; --ink: #ECEEF2; --text-2: #A8AEB8; --text-3: #8A909B;
  --line: rgb(255 255 255 / 0.08); --line-2: rgb(255 255 255 / 0.16); --on-ink: #0A0C0F;
  --beam: 143 178 240; --accent: #9DBBF2;
  --glass: rgb(22 25 30 / 0.6); --glass-strong: rgb(22 25 30 / 0.82); --glass-edge: rgb(255 255 255 / 0.1);
  --dark: #15181D; --dark-line: rgb(255 255 255 / 0.1);
  --shadow: 0 1px 1px rgb(0 0 0 / 0.3), 0 16px 36px -18px rgb(0 0 0 / 0.7);
  --shadow-lg: 0 1px 2px rgb(0 0 0 / 0.3), 0 40px 80px -36px rgb(0 0 0 / 0.8);
}

/* Shared layout: reset, type, buttons, the glass nav, footer, entrance. Reads tokens.css only. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { width: 18px; height: 18px; flex: none; }

/* smooth scrolling (assets/js/smooth.js, Lenis, every page): the library's own required rules */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* type: display face for headings, quiet text face for everything else */
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.022em; text-wrap: balance; }
h1 { letter-spacing: -0.025em; }
em.it { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
::selection { background: rgb(var(--beam) / 0.28); }

/* buttons: ink pill, glass pill */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border: 0; border-radius: 999px; font: 500 15px/1 var(--font); letter-spacing: -0.005em; white-space: nowrap; cursor: pointer; transition: background .3s var(--ease), color .3s, box-shadow .3s var(--ease), transform .3s var(--ease); }
.btn-primary { background: var(--ink); color: var(--on-ink); box-shadow: 0 1px 0 rgb(255 255 255 / 0.12) inset, 0 10px 24px -12px rgb(14 16 19 / 0.55); }
.btn-primary:hover { box-shadow: 0 1px 0 rgb(255 255 255 / 0.12) inset, 0 16px 32px -14px rgb(var(--beam) / 0.9); transform: translateY(-1px); }
.btn-secondary, .btn-glass { background: var(--glass); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.btn-secondary:hover, .btn-glass:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.btn .arrow { transition: transform .3s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn-sm { height: 40px; padding: 0 16px; font-size: 14px; }
.btn-light { background: var(--on-dark); color: #0E1013; }
.btn-light:hover { background: #fff; }

/* header: a floating glass bar */
.hd { position: sticky; top: 0; z-index: 30; padding: 12px var(--gutter) 0; pointer-events: none; }
.hd .wrap { pointer-events: auto; display: flex; align-items: center; gap: 20px; height: 60px; max-width: calc(var(--max) + 24px); padding: 0 8px 0 18px; border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: inset 0 0 0 1px var(--glass-edge), 0 0 0 1px var(--line), var(--shadow); }
.logo { display: inline-flex; align-items: center; gap: 8px; font: 600 21px/1 var(--display); letter-spacing: -0.025em; }
.logo svg { width: 24px; height: 24px; flex: none; }
.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav > a, .nav .dd > button { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; white-space: nowrap; border: 0; background: none; border-radius: 999px; font-size: 14.5px; font-weight: 500; color: var(--text-2); cursor: pointer; transition: color .2s, background .2s; }
.nav > a:hover, .nav .dd > button:hover, .nav .dd.open > button { color: var(--ink); background: rgb(var(--beam) / 0.1); }
.nav .chev { width: 14px; height: 14px; transition: transform .2s; }
.dd { position: relative; }
.dd.open .chev { transform: rotate(180deg); }
.dd-panel { position: absolute; top: calc(100% + 14px); left: -8px; width: 290px; padding: 8px; background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-radius: 18px; box-shadow: inset 0 0 0 1px var(--glass-edge), 0 0 0 1px var(--line), var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .2s, transform .2s var(--ease), visibility 0s .2s; }
.dd.open .dd-panel { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s var(--ease); }
.dd-panel a { display: block; padding: 10px 12px; border-radius: 11px; }
.dd-panel a:hover { background: rgb(var(--beam) / 0.1); }
.dd-panel b { display: block; font-size: 15px; font-weight: 550; }
.dd-panel small { display: block; font-size: 13px; color: var(--text-3); }
.hd .cta { margin-left: 8px; }
.menu-btn { display: none; margin-left: auto; height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--ink); color: var(--on-ink); font-size: 14px; font-weight: 500; cursor: pointer; }
.sheet, .sheet-bg { display: none; }
.hd-account:empty { display: none; }

/* the Products menu: always light, two columns of the manifest's groups and a small featured card (data/nav.json) */
.mega { --ink: #0E1013; --text-2: #4A5059; --text-3: #5E646E; --line: rgb(14 16 19 / 0.08); --surface: #FFFFFF; color-scheme: light; color: var(--ink); left: -12px; width: 640px; padding: 10px; background: rgb(255 255 255 / 0.96); box-shadow: 0 0 0 1px rgb(14 16 19 / 0.08), 0 1px 2px rgb(14 16 19 / 0.04), 0 40px 80px -36px rgb(24 34 60 / 0.32); }
.mega-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.mega-col { display: flex; flex-direction: column; gap: 6px; }
.mega-g p { margin: 10px 12px 6px; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.dd-panel .mega-i { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; transition: background .2s; }
.dd-panel .mega-i:hover, .dd-panel .mega-i:focus-visible { background: #F1F3F6; }
.mega-ic { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 9px; background: #F3F4F7; box-shadow: inset 0 0 0 1px rgb(14 16 19 / 0.06); color: var(--ink); transition: background .2s; }
.mega-ic svg { width: 16px; height: 16px; }
.dd-panel .mega-i:hover .mega-ic { background: #fff; }
.mega-t { min-width: 0; }
.dd-panel .mega-t b { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 550; }
.dd-panel .mega-t small { display: block; font-size: 13px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mega-n { font: 500 11.5px/1 var(--mono); color: var(--text-3); }
.mega-new { padding: 3px 7px; border-radius: 999px; background: rgb(var(--beam) / 0.14); font: 500 10.5px/1 var(--mono); letter-spacing: .04em; color: var(--accent); }
.dd-panel .mega-feat { position: relative; display: block; margin-top: auto; padding: 12px; border-radius: 14px; background: #F3F5F8; box-shadow: inset 0 0 0 1px rgb(14 16 19 / 0.06); transition: background .2s; }
.dd-panel .mega-feat:hover { background: #EDF0F5; }
.mega-art { position: relative; display: block; height: 64px; margin-bottom: 10px; border-radius: 9px; overflow: hidden; background: linear-gradient(160deg, #fff, #E6ECF7); box-shadow: inset 0 0 0 1px rgb(14 16 19 / 0.06); }
.mega-art i { position: absolute; left: 10px; right: 10px; height: 8px; border-radius: 3px; background: rgb(var(--beam) / 0.28); }
.mega-art i:nth-child(1) { top: 10px; right: 50%; background: rgb(14 16 19 / 0.7); }
.mega-art i:nth-child(2) { top: 24px; right: 30%; }
.mega-art i:nth-child(3) { top: 38px; height: 16px; background: rgb(var(--beam) / 0.16); }
.dd-panel .mega-feat b { font-size: 14.5px; font-weight: 550; }
.dd-panel .mega-feat small { font-size: 13px; color: var(--text-3); }
.mega-feat .arrow { position: absolute; right: 14px; bottom: 16px; width: 16px; height: 16px; color: var(--text-3); transition: color .2s; }
.mega-feat:hover .arrow { color: var(--ink); }

@media (max-width: 1180px) {
  .nav > a, .nav .dd > button { padding: 0 10px; }
}
@media (max-width: 1100px) { /* six header links and the CTA need 1100px */
  .nav, .hd .cta { display: none; }
  .menu-btn { display: inline-flex; align-items: center; }
  .hd { padding-top: 8px; }
  .hd .wrap { height: 56px; padding: 0 6px 0 16px; }
  /* off-canvas: a light panel from the right over a dimmed page; focus stays inside while it is open (site.js) */
  .sheet { pointer-events: auto; position: fixed; z-index: 2; top: 0; right: 0; bottom: 0; display: block; width: min(400px, 100%); overflow: auto; overscroll-behavior: contain; padding: 10px 14px 24px; background: var(--surface); box-shadow: -1px 0 0 var(--line), var(--shadow-lg); visibility: hidden; opacity: 0; transform: translateX(16px); transition: opacity .25s, transform .3s var(--ease), visibility 0s .3s; }
  .sheet.open { visibility: visible; opacity: 1; transform: none; transition: opacity .25s, transform .3s var(--ease); }
  .sheet-bg { pointer-events: auto; position: fixed; z-index: 1; inset: 0; background: rgb(10 12 15 / 0.32); opacity: 0; transition: opacity .25s; }
  .sheet-bg.open { opacity: 1; }
  .sheet-top { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 2px 0 8px; margin-bottom: 4px; }
  .sheet-x { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 999px; background: none; color: var(--text-2); cursor: pointer; transition: color .2s, background .2s; }
  .sheet-x:hover { color: var(--ink); background: rgb(var(--beam) / 0.1); }
  .sheet-x .ico { width: 20px; height: 20px; }
  .sheet p { margin: 18px 10px 6px; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
  .sheet a:not(.btn):not(.logo) { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 10px; border-radius: 11px; font-weight: 500; transition: background .2s; }
  .sheet a:not(.btn):not(.logo):hover { background: rgb(var(--beam) / 0.1); }
  .sheet-i .mega-ic { width: 30px; height: 30px; }
  .sheet-i .mega-n, .sheet-i .mega-new { margin-left: auto; }
  .sheet .btn { width: 100%; margin-top: 18px; }
  html.menu-open { overflow: hidden; }
}

/* footer: hairline columns on the ground, a giant quiet wordmark, the press-publish sign-off */
.ft { position: relative; overflow: hidden; margin-top: 0; border-top: 1px solid var(--line); background: var(--bg); }
.ft-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; padding-block: 80px 56px; }
.ft h2 { margin: 0 0 8px; font-size: clamp(26px, 2.6vw, 34px); }
.ft-lede { margin: 0; color: var(--text-2); }
.nl { display: flex; gap: 8px; max-width: 440px; margin-top: 24px; }
.nl input { flex: 1; min-width: 0; height: 48px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font: 400 15px var(--font); }
.nl input::placeholder { color: var(--text-3); }
.nl input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--accent); }
.nl .btn { background: var(--ink); color: var(--on-ink); }
.nl-note { min-height: 22px; margin: 10px 0 0 20px; font-size: 13px; color: var(--text-2); }
.ft-cols { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
.ft-cols h3 { margin: 6px 0 16px; font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.ft-cols ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ft-cols a { color: var(--text-2); transition: color .2s; }
.ft-cols a:hover { color: var(--ink); }
.ft-word { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 0; padding-top: 24px; border-top: 1px solid var(--line); }
.ft-word b { font: 600 clamp(88px, 21vw, 300px)/.8 var(--display); letter-spacing: -0.05em; margin: 0 0 -.06em -.05em; color: transparent; -webkit-text-stroke: 1px var(--line-2); }
.ft-word span { padding-bottom: 14px; font: italic 400 clamp(22px, 2.4vw, 32px)/1 var(--serif); color: var(--text-2); white-space: nowrap; }
.ft-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-block: 20px 32px; border-top: 1px solid var(--line); font-size: 14px; color: var(--text-3); }
.ft-bottom nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ft-legal span { color: var(--line-2); } .ft-legal .bar { margin-inline: 4px; }
.ft-bottom a:hover { color: var(--ink); }
.theme { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); }
.theme button { height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: none; font-size: 13px; color: var(--text-2); cursor: pointer; }
.theme button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
@media (max-width: 1100px) {
  .ft-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 36px; }
}
@media (max-width: 860px) {
  .ft-top { grid-template-columns: minmax(0, 1fr); padding-block: 64px 40px; }
  .ft-word { flex-direction: column; align-items: flex-start; gap: 4px; }
  .ft-word span { padding: 0 0 8px; }
}
@media (max-width: 520px) {
  .ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .nl { flex-direction: column; }
  .nl .btn { width: 100%; }
}

/* first-view entrance: each section rises in once as it enters (site.js adds .rv-on to <html> and .in to sections) */
.rv-on :is(main > section:not(.hc), main > div > section, .ft > .wrap) { opacity: 0; transform: translateY(32px); transition: opacity 1.2s var(--slow), transform 1.4s var(--slow); }
.rv-on :is(main > section, main > div > section, .ft > .wrap).in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; } html { scroll-behavior: auto; } }

/* skip link, current page in menus */
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--ink); color: var(--on-ink); font-weight: 550; transition: top .15s; }
.skip:focus { top: 12px; }
.nav > a[aria-current="page"], .dd-panel a[aria-current="page"] b, .sheet a[aria-current="page"] { color: var(--ink); }
.nav > a[aria-current="page"] { background: rgb(var(--beam) / 0.12); }

/* Sections library: the explore page (sections.html) and each section's page (sections/<id>.html). Quiet: soft
   grounds, thin rules, thumbnails do the talking; hovers fade, nothing jumps. Copy buttons share the dark pill of
   the template sections pages (sections.css rules repeated here so one bundle serves the page). */

.lb-top { padding-block: clamp(40px, 6vw, 88px) 8px; }
.lb-top h1 { max-width: 22ch; margin: 10px 0 0; font: 600 clamp(32px, 4.4vw, 58px)/1.04 var(--display); letter-spacing: -0.035em; text-wrap: balance; }
.lb-top h1 span { color: var(--text-3); }
.lb-search { position: relative; display: flex; align-items: center; max-width: 640px; margin-top: 30px; }
.lb-search .ico { position: absolute; left: 18px; width: 19px; height: 19px; color: var(--text-3); pointer-events: none; }
.lb-search input { width: 100%; height: 54px; padding: 0 52px 0 48px; border: 0; border-radius: 999px; background: var(--surface); color: var(--ink); font: 400 16px/1 var(--font); box-shadow: 0 0 0 1px var(--line-2), var(--shadow); transition: box-shadow .25s var(--ease); }
.lb-search input::placeholder { color: var(--text-3); }
.lb-search input:focus { outline: 0; box-shadow: 0 0 0 1px var(--ink), var(--shadow); }
.lb-search input::-webkit-search-cancel-button { display: none; }
.lb-search kbd { position: absolute; right: 16px; display: grid; place-items: center; min-width: 24px; height: 24px; border-radius: 6px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line-2); font: 500 12px/1 var(--mono); color: var(--text-3); }

.lb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; }
.lb-chips button, .lb-seg button { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font: 500 14px/1 var(--font); cursor: pointer; box-shadow: inset 0 0 0 1px var(--line-2); transition: background .25s, color .25s, box-shadow .25s; }
.lb-chips button span { font: 500 12px/1 var(--mono); color: var(--text-3); transition: color .25s; }
.lb-chips button:hover, .lb-seg button:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.lb-chips button[aria-pressed="true"], .lb-seg button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.lb-chips button[aria-pressed="true"] span { color: var(--on-ink); opacity: .65; }

.lb-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.lb-row-head h2 { margin: 0; font: 600 clamp(20px, 1.8vw, 24px)/1.2 var(--display); letter-spacing: -0.02em; }
.lb-row-head a { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 14px; text-decoration: none; transition: color .25s; }
.lb-row-head a:hover { color: var(--ink); }
.lb-row-head a .ico { width: 16px; height: 16px; }
.lb-hint { color: var(--text-3); font-size: 14px; }

/* collections: one card per template, a strip that scrolls sideways */
.lb-cols { padding-block: clamp(36px, 5vw, 64px) 0; }
.lb-col-list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 14px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: thin; }
.lb-col-list li { scroll-snap-align: start; }
.lb-col { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 12px 12px; height: 100%; padding: 14px; border-radius: 16px; background: var(--surface); color: inherit; text-decoration: none; box-shadow: 0 0 0 1px var(--line); transition: box-shadow .3s var(--ease), background .3s; }
.lb-col:hover, .lb-col[aria-current="true"] { box-shadow: 0 0 0 1px var(--line-2), var(--shadow); }
.lb-col[aria-current="true"] { box-shadow: 0 0 0 1.5px var(--ink); }
.lb-tile { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--tb); color: var(--tf); font: 600 18px/1 var(--display); overflow: hidden; }
.lb-tile svg { width: 60%; height: 60%; }
.lb-col-meta { display: grid; align-content: center; gap: 3px; min-width: 0; }
.lb-col-meta b { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.lb-col-meta small { color: var(--text-3); font-size: 13px; }
.lb-badges { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
.lb-badges i { padding: 3px 7px; border-radius: 6px; background: var(--bg-soft); color: var(--text-2); font: 500 11px/1.2 var(--mono); font-style: normal; }

/* cards */
.lb-default { padding-top: clamp(40px, 5vw, 72px); }
.lb-row + .lb-row { margin-top: clamp(40px, 5vw, 64px); }
.lb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 28px 20px; margin: 0; padding: 0; list-style: none; }
.lb-grid-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lb-card a { display: grid; gap: 12px; color: inherit; text-decoration: none; }
.lb-shot { position: relative; margin: 0; aspect-ratio: 16 / 10; border-radius: 14px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.lb-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: opacity .45s var(--ease); }
.lb-shot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; }
.lb-shot.is-short { display: grid; align-items: center; padding: 0 14px; }
.lb-shot.is-short img { height: auto; object-fit: contain; border-radius: 6px; box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.lb-card a:hover .lb-shot img { opacity: .82; }
.lb-free { position: absolute; top: 10px; left: 10px; padding: 4px 9px; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--line-2); font: 600 11px/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; font-style: normal; color: var(--ink); }
.lb-free.is-inline { position: static; display: inline-block; }
.lb-meta { display: grid; gap: 3px; min-width: 0; }
.lb-meta b, .lb-meta h3 { overflow: hidden; margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; transition: color .25s; }
.lb-meta small { overflow: hidden; color: var(--text-3); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }

/* the full grid and its filters */
.lb-all { padding-block: clamp(48px, 6vw, 88px) clamp(64px, 8vw, 120px); }
.lb-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.lb-tools h2 { margin: 0; font: 600 clamp(20px, 1.8vw, 24px)/1.2 var(--display); letter-spacing: -0.02em; }
.lb-tools h2 span:last-child { color: var(--text-3); }
.lb-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lb-filters select { height: 36px; padding: 0 30px 0 12px; border: 0; border-radius: 999px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%235E646E' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") right 10px center / 14px no-repeat; color: var(--ink); font: 500 14px/1 var(--font); box-shadow: inset 0 0 0 1px var(--line-2); appearance: none; cursor: pointer; }
.lb-filters select:focus-visible, .lb-check input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lb-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); }
.lb-seg button { height: 32px; padding: 0 12px; box-shadow: none; font-size: 13.5px; }
.lb-seg button:hover { box-shadow: none; }
.lb-seg .ico { width: 16px; height: 16px; }
.lb-check { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border-radius: 999px; color: var(--text-2); font-size: 14px; box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; transition: color .25s, box-shadow .25s; }
.lb-check:hover { color: var(--ink); }
.lb-check input { width: 15px; height: 15px; margin: 0; accent-color: var(--ink); }
.lb-check:has(input:checked) { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.lb-more { display: flex; justify-content: center; margin-top: 44px; }
.lb-more [hidden] { display: none; }
.lb-empty { margin: 40px 0; color: var(--text-2); text-align: center; }
main.is-filtered .lb-default { display: none; }

/* a section's page */
.ls-top { padding-block: clamp(32px, 4vw, 56px) 24px; }
.sx-back { margin: 0 0 14px; font-size: var(--t-xs); color: var(--text-3); }
.sx-back a { color: var(--text-2); text-decoration: none; transition: color .25s; }
.sx-back a:hover { color: var(--ink); }
.ls-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
.ls-head h1 { max-width: 26ch; margin: 0; font: 600 clamp(28px, 3.2vw, 44px)/1.08 var(--display); letter-spacing: -0.03em; text-wrap: balance; }
.ls-sub { max-width: 60ch; margin: 12px 0 0; color: var(--text-2); }
.ls-sub a { color: var(--ink); text-underline-offset: 3px; }
.ls-actions { display: grid; justify-items: end; gap: 10px; }
.ls-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.ls-locked { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); font-size: 13.5px; }
.ls-locked .ico, .ls-btns .btn .ico { width: 16px; height: 16px; }

.ls-preview { padding-block: 8px 0; }
.ls-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ls-open { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 14px; text-decoration: none; transition: color .25s; }
.ls-open:hover { color: var(--ink); }
.ls-open .ico { width: 15px; height: 15px; }
.ls-stage { position: relative; display: grid; justify-items: center; border-radius: 18px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.ls-stage.is-framed { padding: 18px; }
.ls-poster { display: block; width: 100%; height: auto; transition: opacity .4s var(--ease); }
.ls-stage.is-live .ls-poster { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.ls-frame { position: relative; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow); transition: width .4s var(--ease); }
.ls-stage:not(.is-framed) .ls-frame { border-radius: 0; box-shadow: none; }
.ls-frame iframe { display: block; border: 0; transform-origin: 0 0; }

.ls-info { padding-block: clamp(32px, 4vw, 56px) 0; }
.ls-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; }
.ls-facts { display: grid; margin: 0; }
.ls-facts > div { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 13px 0; border-top: 1px solid var(--line); font-size: 15px; }
.ls-facts > div:last-child { border-bottom: 1px solid var(--line); }
.ls-facts dt { color: var(--text-3); }
.ls-facts dd { margin: 0; text-transform: none; }
.ls-facts a { color: var(--ink); text-underline-offset: 3px; }
.ls-h2 { margin: 0 0 12px; font: 600 17px/1.3 var(--display); letter-spacing: -0.01em; }
.ls-formats { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ls-formats li { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; font-size: 13.5px; box-shadow: inset 0 0 0 1px var(--line-2); }
.ls-formats li .ico { width: 15px; height: 15px; }
.ls-note { margin: 16px 0 0; color: var(--text-2); font-size: 14px; line-height: 1.55; }
.ls-note a { color: var(--ink); text-underline-offset: 3px; }
.ls-note code { padding: 1px 5px; border-radius: 5px; background: var(--bg-soft); font: 500 12.5px/1.4 var(--mono); }
.ls-rel { padding-block: clamp(48px, 6vw, 88px) 0; }
.ls-rel:last-of-type { padding-bottom: clamp(64px, 8vw, 120px); }

/* copy buttons: the dark pill */
.wf-copy, .lb-copy { display: inline-flex; flex: none; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 13px; border: 0; border-radius: 999px; background: #141518; color: #fff; font: 500 14px/1 var(--font); letter-spacing: -0.005em; white-space: nowrap; text-decoration: none; cursor: pointer; box-shadow: 0 1px 0 rgb(255 255 255 / 0.1) inset, 0 6px 16px -10px rgb(14 16 19 / 0.7); transition: background .25s, box-shadow .25s; }
.lb-copy { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.wf-copy:hover { background: #2a2c31; }
.lb-copy:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.wf-copy:focus-visible, .lb-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wf-copy .wf-glyph { width: 18px; height: 13px; }
.wf-copy .ico, .lb-copy .ico { width: 16px; height: 16px; }
.wf-copy.is-done, .lb-copy.is-done { background: #1f6b47; color: #fff; box-shadow: none; }
.wf-copy[aria-busy="true"], .lb-copy[aria-busy="true"] { opacity: .7; cursor: progress; }
.sx-toast { position: fixed; left: 50%; bottom: 24px; z-index: 40; max-width: min(92vw, 520px); padding: 12px 18px; border-radius: 14px; background: #141518; color: #fff; font-size: 14px; line-height: 1.4; box-shadow: var(--shadow-lg); transform: translateX(-50%); }
.sx-toast[hidden] { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wf-copy { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14); } }
:root[data-theme="dark"] .wf-copy { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14); }

@media (max-width: 1080px) {
  .lb-grid-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ls-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .lb-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter); scrollbar-width: none; }
  .lb-chips button { flex: none; }
  .lb-tools { align-items: flex-start; flex-direction: column; }
  .lb-filters { flex-wrap: nowrap; width: calc(100% + 2 * var(--gutter)); margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter); overflow-x: auto; scrollbar-width: none; }
  .lb-filters > * { flex: none; }
  .lb-grid { gap: 22px 14px; }
  .lb-grid-row { gap: 22px 14px; }
  .ls-actions { justify-items: start; width: 100%; }
  .ls-btns { justify-content: flex-start; }
  .ls-bar .lb-seg span { display: none; }
  .ls-bar .lb-seg button { padding: 0 11px; }
  .ls-facts > div { grid-template-columns: 100px 1fr; }
}
@media (max-width: 480px) {
  .lb-grid:not(.lb-grid-row) { grid-template-columns: 1fr; }
  .lb-col-list { grid-auto-columns: 78%; }
  .ls-btns > * { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .lb-shot img, .ls-frame, .ls-poster { transition: none; } }
/* the frame stays out of sight until the demo page reports the section's height; the thumbnail shows meanwhile */
.ls-stage:not(.is-live) .ls-frame { position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; }
.ls-stage.is-live .ls-frame { animation: ls-in .5s var(--ease) both; }
@keyframes ls-in { from { opacity: 0; } to { opacity: 1; } }
/* gem pages: behaviour notes and the options table */
.gm-list { margin: 0 0 28px; padding-left: 1.1em; max-width: 72ch; line-height: 1.6; }
.gm-list li + li { margin-top: 6px; }
.gm-table { overflow-x: auto; margin-bottom: 8px; }
.gm-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.gm-table th, .gm-table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-2); }
.gm-table thead th { font-weight: 600; font-size: 13px; color: var(--muted, inherit); }
.gm-table code { font-size: 12.5px; white-space: nowrap; }
.gm-table td:last-child { min-width: 26ch; }

/* Wireframes library: the explore page (wireframes.html) and each wireframe's page (wireframes/<id>.html). The cards
   sit the wireframe on a dark tile marked with fine registration crosses, so the light skeletons read as drawings.
   Detail pages reuse the sections page styles (library.css). */

.wf-top { padding-block: clamp(40px, 6vw, 88px) 8px; }
.wf-top h1 { max-width: 24ch; margin: 10px 0 0; font: 600 clamp(32px, 4.4vw, 58px)/1.04 var(--display); letter-spacing: -0.035em; text-wrap: balance; }
.wf-top h1 span { color: var(--text-3); }
.wf-lede { max-width: 62ch; margin: 18px 0 0; color: var(--text-2); font-size: 16px; line-height: 1.55; }
.wf-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; }
.wf-pill select { height: 38px; padding: 0 34px 0 16px; border: 0; border-radius: 999px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%235E646E' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") right 12px center / 14px no-repeat; color: var(--ink); font: 500 14px/1 var(--font); box-shadow: inset 0 0 0 1px var(--line-2); appearance: none; cursor: pointer; transition: box-shadow .25s, background-color .25s, color .25s; }
.wf-pill select:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.wf-pill select.is-set { background-color: var(--ink); color: var(--on-ink); box-shadow: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.wf-pill select:focus-visible, .wf-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wf-clear { height: 38px; padding: 0 12px; border: 0; background: none; color: var(--text-2); font: 500 14px/1 var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.wf-clear:hover { color: var(--ink); }
.wf-clear[hidden] { display: none; }

.wf-all { padding-block: clamp(32px, 4vw, 56px) clamp(64px, 8vw, 120px); }
.wf-count { margin: 0 0 18px; color: var(--text-3); font-size: 14px; }
.wf-count span:first-child { color: var(--ink); font-weight: 600; }
.wf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 30px 20px; margin: 0; padding: 0; list-style: none; }
.wf-grid-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wf-card a { display: grid; gap: 12px; color: inherit; text-decoration: none; }
/* the tile: near-black, a cross every 24 px, a soft light from the top */
.wf-tile { position: relative; display: flex; align-items: flex-start; justify-content: center; margin: 0; aspect-ratio: 4 / 3; padding: 9% 9% 0; border-radius: 14px; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 0%, rgb(255 255 255 / .06), transparent 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 9.5v5M9.5 12h5' stroke='%23fff' stroke-opacity='.09' stroke-width='1'/%3E%3C/svg%3E") 0 0 / 24px 24px, #141416; }
.wf-tile img { display: block; flex: none; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 14px 34px -12px rgb(0 0 0 / .7); transition: transform .5s var(--ease); }
/* a tall wireframe runs off the bottom of its tile; a bar (a header) sits in the middle */
.wf-tile:not(.is-short)::after { content: ""; position: absolute; inset: auto 0 0; height: 18%; background: linear-gradient(transparent, rgb(20 20 22 / .55)); pointer-events: none; }
.wf-tile.is-short { align-items: center; padding: 0 9%; }
.wf-card a:hover .wf-tile img { transform: translateY(-3px); }
.wf-meta { display: grid; gap: 6px; min-width: 0; }
.wf-meta b, .wf-meta h3 { overflow: hidden; margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; }
.wf-tags { display: flex; gap: 6px; }
.wf-tags i { padding: 3px 8px; border-radius: 999px; background: var(--bg-soft); color: var(--text-2); font: 500 11.5px/1.3 var(--font); font-style: normal; }
.wf-tags i.is-free { background: var(--ink); color: var(--on-ink); }

.wf-stage { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 9.5v5M9.5 12h5' stroke='%23fff' stroke-opacity='.09' stroke-width='1'/%3E%3C/svg%3E") 0 0 / 24px 24px, #141416; }

@media (max-width: 1000px) { .wf-grid-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .wf-grid-row { grid-template-columns: minmax(0, 1fr); } .wf-pill, .wf-pill select { flex: 1 1 auto; } }
@media (prefers-reduced-motion: reduce) { .wf-tile img { transition: none; } .wf-card a:hover .wf-tile img { transform: none; } }