/* 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 { display: none; }

@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; }
  .sheet { pointer-events: auto; position: absolute; top: 72px; left: var(--gutter); right: var(--gutter); max-height: calc(100svh - 88px); overflow: auto; padding: 12px; background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-radius: 22px; box-shadow: inset 0 0 0 1px var(--glass-edge), 0 0 0 1px var(--line), var(--shadow-lg); }
  .sheet.open { display: block; }
  .sheet p { margin: 14px 12px 4px; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
  .sheet a { display: block; padding: 11px 12px; border-radius: 11px; font-weight: 500; }
  .sheet a:hover { background: rgb(var(--beam) / 0.1); }
  .sheet .btn { width: 100%; margin-top: 10px; }
}

/* 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, 1.1fr) minmax(0, 1fr); gap: 48px; 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(3, 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: 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-formats li.is-off { color: var(--text-3); box-shadow: inset 0 0 0 1px var(--line); }
.ls-formats small { font: 500 11px/1 var(--mono); color: var(--text-3); }
.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; }

/* Sections page (templates/<slug>/sections.html): each section of a template with a thumbnail and a Copy to Webflow
   button, a dark pill in the manner of radianttemplates.com. Free sections copy here; the rest show a lock. */

.sx-top { padding-block: clamp(36px, 5vw, 72px) 8px; }
.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; }
.sx-back a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.sx-top h1 { max-width: 30ch; margin: 0; font-size: clamp(26px, 3vw, 40px); line-height: 1.15; font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; }
.sx-top h1 span { color: var(--text-3); }
.sx-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; counter-reset: sx; }
.sx-steps li { counter-increment: sx; position: relative; padding: 14px 16px 14px 46px; border-radius: var(--r-sm); background: var(--surface); box-shadow: 0 0 0 1px var(--line); font-size: 14.5px; line-height: 1.45; color: var(--text-2); }
.sx-steps li::before { content: counter(sx); position: absolute; left: 14px; top: 13px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--on-ink); font: 600 12px/1 var(--mono); }
.sx-steps b { color: var(--ink); font-weight: 600; }
.sx-steps kbd { display: inline-block; min-width: 20px; padding: 1px 5px; border-radius: 5px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line-2); font: 500 12px/1.4 var(--mono); text-align: center; color: var(--ink); }
.sx-note { max-width: 72ch; margin: 14px 0 0; font-size: var(--t-xs); line-height: 1.5; color: var(--text-3); }
.sx-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 26px; }
.sx-filter button { height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--bg-soft); color: var(--text-2); font: 500 13.5px/1 var(--font); cursor: pointer; transition: background .2s, color .2s; }
.sx-filter button:hover { color: var(--ink); }
.sx-filter button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }

.sx-list { padding-block: 22px clamp(48px, 7vw, 96px); }
.sx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.sx-card { display: flex; flex-direction: column; min-width: 0; border-radius: 16px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--shadow); overflow: hidden; }
.sx-card[hidden] { display: none; }
.sx-shot { position: relative; margin: 0; aspect-ratio: 16 / 10; background: var(--bg-soft); overflow: hidden; border-bottom: 1px solid var(--line); }
.sx-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.sx-noshot { display: grid; place-items: center; height: 100%; padding: 24px; font-size: 14px; color: var(--text-3); text-align: center; }
.sx-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); }
.sx-row { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; }
.sx-meta { display: grid; gap: 3px; min-width: 0; flex: 1; }
.sx-meta b { overflow: hidden; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; text-overflow: ellipsis; }
.sx-meta small { overflow: hidden; font-size: 12.5px; color: var(--text-3); white-space: nowrap; text-overflow: ellipsis; text-transform: capitalize; }

/* the button: a dark pill whatever the theme, glyph first */
.wf-copy { display: inline-flex; flex: none; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 12px; border: 0; border-radius: 999px; background: #141518; color: #fff; font: 500 13.5px/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 .2s, transform .2s var(--ease), box-shadow .2s; }
.wf-copy:hover { background: #26282d; transform: translateY(-1px); }
.wf-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wf-copy .wf-glyph { width: 18px; height: 13px; }
.wf-copy .ico { width: 16px; height: 16px; }
.wf-copy.is-done { background: #1f6b47; }
.wf-copy[aria-busy="true"] { opacity: .7; cursor: progress; }
.wf-copy.is-locked { background: var(--bg-soft); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.wf-copy.is-locked:hover { color: var(--ink); background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--ink); }

.sx-unlock { padding-block: 0 clamp(56px, 8vw, 110px); }
.sx-unlock-in { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.sx-unlock-in > div:first-child { padding: 28px 0; border-top: 1px solid var(--line); flex: 1; }
.sx-unlock h2 { margin: 0 0 8px; font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; letter-spacing: -0.02em; }
.sx-unlock p { max-width: 60ch; margin: 0; color: var(--text-2); }
.sx-unlock-btns { display: flex; flex-wrap: wrap; gap: 10px; }

.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:not(.is-locked) { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14); } }
:root[data-theme="dark"] .wf-copy:not(.is-locked) { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14); }

@media (max-width: 860px) {
  .sx-steps { grid-template-columns: 1fr; }
  .sx-unlock-in { flex-direction: column; align-items: stretch; }
}
@media (max-width: 480px) {
  .sx-row { flex-wrap: wrap; }
  .wf-copy { width: 100%; justify-content: center; height: 40px; }
  .sx-filter { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; }
  .sx-filter button { flex: none; }
  .sx-unlock-btns .btn { flex: 1; }
}
.wf-copy.is-framer { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.wf-copy.is-framer:hover { background: var(--bg-soft); }
/* a header or a slim band: shown whole, centred, not blown up to fill the card */
.sx-shot.is-short { display: grid; align-items: center; padding: 0 14px; }
.sx-shot.is-short img { height: auto; object-fit: contain; border-radius: 6px; box-shadow: 0 0 0 1px var(--line), var(--shadow); }
/* the thumbnail and the title open the section's own page in the library */
a.sx-shot { display: block; color: inherit; }
a.sx-shot img { transition: opacity .45s var(--ease); }
a.sx-shot:hover img { opacity: .82; }
.sx-meta b a { color: inherit; text-decoration: none; }
.sx-meta b a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sx-card .lb-copy { height: 36px; }