@import url('/static/css/tokens.css');

  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--sukon-paper);color:var(--sukon-ink);-webkit-font-smoothing:antialiased}
  body{
    font-family:var(--sukon-font-serif);
    font-size:19px;line-height:1.55;letter-spacing:-0.005em;
    font-weight:400;
    font-optical-sizing:auto;
  }
  a{color:inherit;text-decoration:none}
  .sans{font-family:var(--sukon-font-sans);font-feature-settings:"ss01","cv11";letter-spacing:-0.005em}
  .mono{font-family:var(--sukon-font-mono);font-feature-settings:"zero"}

  /* =========================
     Layout grid — editorial
     Two columns with generous gutters, max 1120px
  ========================= */
  .wrap{max-width:1120px;margin:0 auto;padding:0 32px}
  .wrap-wide{max-width:1280px;margin:0 auto;padding:0 32px}
  .wrap-tight{max-width:720px;margin:0 auto;padding:0 32px}

  /* ========== MASTHEAD ========== */
  .masthead{
    padding:20px 0;border-bottom:1px solid var(--sukon-rule);
    position:sticky;top:0;z-index:40;background:color-mix(in oklab, var(--sukon-paper) 94%, transparent);
    backdrop-filter:saturate(140%) blur(8px);
  }
  .masthead .row{display:flex;align-items:center;justify-content:space-between;gap:32px}
  .wordmark{
    display:inline-flex;align-items:baseline;gap:10px;
    font-family:var(--sukon-font-serif);font-weight:500;font-size:30px;letter-spacing:-0.04em;line-height:1;
    position:relative;padding-top:10px;
  }
  .wordmark .ring{
    position:absolute;top:-2px;left:50%;transform:translateX(-50%);
    width:11px;height:11px;border-radius:50%;border:1.4px solid currentColor;
  }
  .wordmark .name{position:relative}
  .masthead .meta{
    display:flex;align-items:center;gap:32px;font-family:var(--sukon-font-sans);
    font-size:12px;color:var(--sukon-muted);letter-spacing:0.02em;
  }
  .masthead .meta .nav a{border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .25s, color .25s}
  .masthead .meta .nav a:hover{border-bottom-color:var(--sukon-ink);color:var(--sukon-ink)}
  .masthead .meta .nav{display:flex;gap:22px}
  .issue{
    font-family:var(--sukon-font-mono);font-size:10px;text-transform:uppercase;letter-spacing:0.18em;color:var(--sukon-muted);
  }

  /* ========== KICKER / DEK ========== */
  .hero{
    padding:96px 0 48px;position:relative;
  }
  .date-line{
    font-family:var(--sukon-font-mono);font-size:11px;letter-spacing:0.16em;
    text-transform:uppercase;color:var(--sukon-muted);
    display:flex;gap:24px;margin-bottom:48px;flex-wrap:wrap;
  }
  .date-line span{display:inline-flex;align-items:center;gap:10px}
  .date-line span::after{content:"";width:4px;height:4px;background:var(--sukon-line-2);border-radius:50%;margin-left:24px}
  .date-line span:last-child::after{display:none}

  h1.masthead-h{
    font-family:var(--sukon-font-serif);
    font-weight:400;
    font-size:clamp(52px, 9vw, 128px);
    line-height:0.94;letter-spacing:-0.035em;
    margin:0;
    max-width:14ch;
    text-wrap:balance;
  }
  h1.masthead-h em{
    font-style:italic;font-weight:300;color:var(--sukon-ink-2);
  }
  h1.masthead-h .qt{color:var(--sukon-accent);font-style:italic}

  .byline{
    margin-top:56px;display:grid;grid-template-columns:2fr 1fr;gap:72px;align-items:start;
  }
  @media (max-width:780px){.byline{grid-template-columns:1fr;gap:32px}}
  .dek{
    font-size:23px;line-height:1.45;letter-spacing:-0.01em;color:var(--sukon-ink-2);
    font-family:var(--sukon-font-serif);font-weight:300;
    max-width:38ch;
  }
  .dek em{font-style:italic}

  .byline-meta{
    font-family:var(--sukon-font-sans);
    font-size:13px;color:var(--sukon-muted);line-height:1.65;
    padding-top:10px;border-top:1px solid var(--sukon-line);
  }
  .byline-meta dt{font-family:var(--sukon-font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--sukon-muted);margin-top:14px}
  .byline-meta dd{margin:2px 0 0;color:var(--sukon-ink-2)}

  /* Decorative drop-cap on first graf */
  .lede{
    margin-top:88px;
    column-count:2;column-gap:56px;column-rule:1px solid var(--sukon-line);
    font-size:18px;line-height:1.65;
    color:var(--sukon-ink-2);
    max-width:900px;
  }
  @media (max-width:860px){.lede{column-count:1}}
  .lede p{margin:0 0 1em;break-inside:avoid-column}
  .lede p:first-child::first-letter{
    font-family:var(--sukon-font-serif);
    font-weight:500;
    font-size:5.8em;line-height:0.85;
    float:left;margin:0.05em 0.08em -0.08em -0.02em;
    color:var(--sukon-ink);
    font-feature-settings:"ss01";
  }

  /* ========== DIVIDER ORNAMENT ========== */
  .divider{
    display:flex;align-items:center;gap:18px;justify-content:center;
    margin:96px 0 96px;color:var(--sukon-line-2);
  }
  .divider::before,.divider::after{content:"";flex:0 0 80px;height:1px;background:currentColor}
  .divider .o{width:8px;height:8px;border:1px solid currentColor;border-radius:50%}

  /* ========== SECTION HEADER (ed-style) ========== */
  .sec{padding:56px 0}
  .sec-kicker{
    font-family:var(--sukon-font-mono);font-size:10px;letter-spacing:0.18em;
    text-transform:uppercase;color:var(--sukon-muted);
    display:flex;gap:14px;align-items:center;margin-bottom:22px;
  }
  .sec-kicker::before{content:"";width:40px;height:1px;background:var(--sukon-ink)}
  .sec-h{
    font-family:var(--sukon-font-serif);font-weight:400;
    font-size:clamp(36px, 5.6vw, 64px);line-height:1;letter-spacing:-0.025em;
    margin:0 0 18px;max-width:22ch;text-wrap:balance;
  }
  .sec-h em{font-style:italic;color:var(--sukon-ink-2);font-weight:300}
  .sec-standfirst{
    font-size:20px;line-height:1.5;color:var(--sukon-ink-2);max-width:52ch;font-weight:300;
    margin:0 0 48px;
  }

  /* ========== THE THREE TRACKS ========== */
  .tracks{display:grid;grid-template-columns:1fr 1fr 1fr;gap:56px;align-items:start}
  @media (max-width:900px){.tracks{grid-template-columns:1fr;gap:48px}}
  .track{position:relative;padding-top:28px;border-top:2px solid var(--sukon-ink)}
  .track .roman{
    font-family:var(--sukon-font-serif);font-style:italic;font-weight:400;
    font-size:15px;color:var(--sukon-accent);letter-spacing:0.04em;margin-bottom:8px;
  }
  .track h3{
    font-family:var(--sukon-font-serif);font-weight:400;
    font-size:40px;line-height:1;letter-spacing:-0.02em;margin:0 0 18px;
  }
  .track .body{color:var(--sukon-ink-2);font-size:17px;line-height:1.55;margin-bottom:24px}
  .track .body em{font-style:italic;color:var(--sukon-ink)}
  .track dl{
    margin:0;padding:18px 0 0;border-top:1px solid var(--sukon-line);
    display:grid;grid-template-columns:1fr;gap:10px;font-size:13px;font-family:var(--sukon-font-sans);
  }
  .track dl > div{display:grid;grid-template-columns:110px 1fr;gap:16px}
  .track dt{font-family:var(--sukon-font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--sukon-muted)}
  .track dd{margin:0;color:var(--sukon-ink-2)}

  /* ========== PULL QUOTE ========== */
  .pullquote{
    margin:120px auto;max-width:880px;text-align:center;
    position:relative;padding:0 40px;
  }
  .pullquote p{
    font-family:var(--sukon-font-serif);font-weight:300;font-style:italic;
    font-size:clamp(28px, 4.2vw, 48px);line-height:1.15;letter-spacing:-0.018em;
    color:var(--sukon-ink);margin:0;text-wrap:balance;
  }
  .pullquote .mark{
    position:absolute;top:-0.6em;left:50%;transform:translateX(-50%);
    font-family:var(--sukon-font-serif);font-size:120px;color:var(--sukon-line-2);line-height:1;
    pointer-events:none;user-select:none;
  }
  .pullquote cite{
    display:block;margin-top:32px;font-family:var(--sukon-font-mono);
    font-style:normal;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--sukon-muted);
  }

  /* Featured pull-quote: full-bleed cream background, grotere type,
     accent-kleur op de em (de inhoudelijke pointe). Voor DE signature-zin. */
  .pullquote-feature{
    background:var(--sukon-paper-2);
    padding:140px 0 120px;margin:80px 0;
    border-top:1px solid var(--sukon-line);border-bottom:1px solid var(--sukon-line);
  }
  .pullquote--featured{margin:0 auto}
  .pullquote--featured p{font-size:clamp(32px, 5.2vw, 60px);font-weight:400}
  .pullquote--featured p em{color:var(--sukon-accent);font-style:italic}
  .pullquote--featured .mark{font-size:160px;top:-0.55em;color:var(--sukon-line)}

  /* Colofon-regel voor advocaten-hint op homepage — expliciet ingetogen,
     B2B-inhoud leeft op /advocaten. */
  .partner-colophon{padding:48px 0 24px;border-top:1px solid var(--sukon-line)}
  .partner-colophon .colophon-line{
    font-family:var(--sukon-font-mono);font-size:12px;letter-spacing:0.12em;
    text-transform:uppercase;color:var(--sukon-muted);margin:0;text-align:center;
  }
  .partner-colophon .colophon-line .k{margin-right:12px}
  .partner-colophon .colophon-line a{
    color:var(--sukon-ink);border-bottom:1px solid var(--sukon-line-2);
    transition:border-color .25s,color .25s;
  }
  .partner-colophon .colophon-line a:hover{border-bottom-color:var(--sukon-ink);color:var(--sukon-accent)}

  /* ========== LONGFORM: How it works ========== */
  .longform{
    display:grid;grid-template-columns:200px 1fr;gap:48px;
    border-top:1px solid var(--sukon-ink);padding-top:8px;
  }
  @media (max-width:860px){.longform{grid-template-columns:1fr;gap:18px}}
  .longform .folio{
    font-family:var(--sukon-font-mono);font-size:10px;letter-spacing:0.14em;
    text-transform:uppercase;color:var(--sukon-muted);padding-top:12px;
  }
  .longform .chapter{padding-top:4px}
  .longform h4{
    font-family:var(--sukon-font-serif);font-weight:400;
    font-size:34px;line-height:1;letter-spacing:-0.02em;margin:0 0 18px;
  }
  .longform h4 em{font-style:italic;color:var(--sukon-ink-2);font-weight:300}
  .longform p{font-size:18px;line-height:1.65;color:var(--sukon-ink-2);margin:0 0 1em;max-width:60ch}
  .longform p em{font-style:italic;color:var(--sukon-ink)}
  .longform + .longform{margin-top:64px;border-top:1px solid var(--sukon-line)}

  /* figure inside longform */
  figure.visual{
    margin:28px 0 0;padding:24px 24px 22px;
    border:1px solid var(--sukon-line);background:var(--sukon-paper-2);
    font-family:var(--sukon-font-sans);font-size:13px;color:var(--sukon-ink-2);
  }
  figure.visual .row{display:grid;grid-template-columns:1fr auto;gap:12px;padding:8px 0;align-items:baseline}
  figure.visual .row + .row{border-top:1px solid var(--sukon-line)}
  figure.visual .label{font-family:var(--sukon-font-mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--sukon-muted)}
  figure.visual .bar{height:2px;background:var(--sukon-line);margin-top:6px;position:relative;grid-column:1/-1}
  figure.visual .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--sukon-ink);width:0;transition:width 1.4s cubic-bezier(.2,.7,.2,1)}
  figure.visual .bar.on i{width:var(--w,60%)}
  figure.visual figcaption{margin-top:16px;padding-top:14px;border-top:1px solid var(--sukon-line);font-size:12px;font-style:italic;color:var(--sukon-muted);font-family:var(--sukon-font-serif)}

  /* ========== CASE NARRATIVE ========== */
  .case{
    margin:120px 0 0;padding:80px 0;
    background:var(--sukon-ink);color:var(--sukon-paper);
    border-top:1px solid var(--sukon-ink);border-bottom:1px solid var(--sukon-ink);
  }
  .case .sec-kicker{color:#a39d89}
  .case .sec-kicker::before{background:var(--sukon-paper)}
  .case .sec-h{color:var(--sukon-paper)}
  .case .sec-h em{color:#a39d89}
  .case .sec-standfirst{color:#c9c3ae}
  .case .narrative{
    font-family:var(--sukon-font-serif);font-size:20px;line-height:1.7;color:#e4dfcb;
    max-width:58ch;margin-top:48px;
  }
  .case .narrative p{margin:0 0 1em}
  .case .narrative p em{font-style:italic;color:var(--sukon-paper)}
  .case .narrative p:first-child::first-letter{
    font-family:var(--sukon-font-serif);font-weight:500;
    font-size:5.4em;line-height:0.85;float:left;margin:0.05em 0.08em -0.08em -0.02em;color:var(--sukon-paper);
  }

  .case .file{
    margin-top:80px;display:grid;grid-template-columns:1fr 1fr;gap:64px;
    border-top:1px solid #2a2920;padding-top:40px;
  }
  @media (max-width:900px){.case .file{grid-template-columns:1fr;gap:32px}}
  .case .file h5{
    font-family:var(--sukon-font-mono);font-size:10px;letter-spacing:0.16em;
    text-transform:uppercase;color:#a39d89;margin:0 0 18px;font-weight:400;
  }
  .case .file dl{margin:0}
  .case .file dl > div{
    display:grid;grid-template-columns:120px 1fr;gap:20px;padding:12px 0;
    border-bottom:1px solid #2a2920;align-items:baseline;
  }
  .case .file dl > div:first-child{border-top:1px solid #2a2920}
  .case .file dt{font-family:var(--sukon-font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:#a39d89}
  .case .file dd{margin:0;color:#e4dfcb;font-family:var(--sukon-font-serif);font-size:16px;line-height:1.5}
  .case .file dd b{color:var(--sukon-paper);font-weight:500}

  .kelderluik{
    padding:28px;border:1px solid #2a2920;background:#1d1c17;
  }
  .kelderluik h6{
    font-family:var(--sukon-font-mono);font-size:10px;letter-spacing:0.16em;
    text-transform:uppercase;color:#a39d89;margin:0 0 18px;font-weight:400;
  }
  .kelderluik .k{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0;border-top:1px solid #2a2920;gap:16px}
  .kelderluik .k:first-of-type{border-top:none;padding-top:0}
  .kelderluik .k-label{font-family:var(--sukon-font-serif);font-size:15px;color:#e4dfcb;line-height:1.4;flex:1}
  .kelderluik .k-score{font-family:var(--sukon-font-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:#c9c3ae;white-space:nowrap}
  .kelderluik .k-score i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#8aaf96;margin-right:8px;vertical-align:middle;transform:scale(0);transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
  .kelderluik .k-score.mid i{background:#c79a52}
  .kelderluik.in .k-score i{transform:scale(1)}
  .kelderluik .conclusion{
    margin-top:24px;padding-top:20px;border-top:1px solid #2a2920;
    font-family:var(--sukon-font-serif);font-style:italic;font-size:15px;color:#c9c3ae;line-height:1.55;
  }

  .case .foot{
    margin-top:48px;padding-top:28px;border-top:1px solid #2a2920;
    display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;
    font-family:var(--sukon-font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:#a39d89;
  }

  /* ========== PRIJS — receipt style ========== */
  .receipt{
    max-width:720px;margin:0 auto;padding:56px 64px;
    background:var(--sukon-paper-2);border:1px solid var(--sukon-line);
    font-family:var(--sukon-font-serif);position:relative;
  }
  @media (max-width:680px){.receipt{padding:40px 28px}}
  .receipt::before,.receipt::after{
    content:"";position:absolute;left:0;right:0;height:16px;
    background-image:radial-gradient(circle at 8px 8px, var(--sukon-paper) 6px, transparent 6.5px);
    background-size:16px 16px;
  }
  .receipt::before{top:-16px}
  .receipt::after{bottom:-16px}
  .receipt h4{
    font-family:var(--sukon-font-mono);font-size:10px;letter-spacing:0.18em;
    text-transform:uppercase;color:var(--sukon-muted);margin:0 0 28px;font-weight:400;text-align:center;
  }
  .receipt .line{
    display:grid;grid-template-columns:1fr auto;gap:16px;padding:14px 0;
    border-bottom:1px dashed var(--sukon-line-2);align-items:baseline;
  }
  .receipt .line .desc{font-size:17px;color:var(--sukon-ink-2)}
  .receipt .line .desc small{display:block;font-size:13px;color:var(--sukon-muted);font-style:italic;margin-top:2px}
  .receipt .line .amt{font-family:var(--sukon-font-serif);font-size:22px;letter-spacing:-0.02em;color:var(--sukon-ink);font-variant-numeric:tabular-nums}
  .receipt .total{
    margin-top:16px;padding-top:20px;border-top:2px solid var(--sukon-ink);
    display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline;
  }
  .receipt .total .t-label{font-family:var(--sukon-font-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--sukon-ink)}
  .receipt .total .t-amt{font-family:var(--sukon-font-serif);font-size:36px;letter-spacing:-0.03em;color:var(--sukon-accent);font-variant-numeric:tabular-nums}
  .receipt .note{
    margin-top:28px;padding-top:20px;border-top:1px solid var(--sukon-line);
    font-size:14px;color:var(--sukon-muted);font-style:italic;line-height:1.6;text-align:center;
  }

  /* ========== MISSIE — colofon ========== */
  .colofon{
    padding:96px 0;
    display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:start;
  }
  @media (max-width:900px){.colofon{grid-template-columns:1fr;gap:48px}}
  .colofon .manifest{
    font-family:var(--sukon-font-serif);font-size:26px;line-height:1.4;letter-spacing:-0.015em;
    color:var(--sukon-ink);font-weight:300;
  }
  .colofon .manifest p{margin:0 0 1em}
  .colofon .manifest em{font-style:italic;color:var(--sukon-accent)}
  .colofon .signed{
    margin-top:32px;padding-top:24px;border-top:1px solid var(--sukon-line);
    font-family:var(--sukon-font-serif);font-style:italic;font-size:17px;color:var(--sukon-muted);
  }
  .colofon .signed b{color:var(--sukon-ink);font-weight:500}

  .colofon .figures{
    border-left:1px solid var(--sukon-line);padding-left:40px;display:grid;gap:36px;
  }
  @media (max-width:900px){.colofon .figures{border-left:none;padding-left:0;border-top:1px solid var(--sukon-line);padding-top:32px}}
  .figure{
    display:flex;flex-direction:column;gap:4px;
  }
  .figure .num{
    font-family:var(--sukon-font-serif);font-weight:400;
    font-size:56px;line-height:1;letter-spacing:-0.03em;
    font-variant-numeric:tabular-nums;
  }
  .figure .num em{font-style:italic;color:var(--sukon-muted);font-size:0.5em;font-weight:300;margin-left:4px}
  .figure .cap{
    font-family:var(--sukon-font-sans);font-size:13px;color:var(--sukon-muted);line-height:1.5;
    margin-top:6px;max-width:36ch;
  }

  /* ========== AFBAKENING (FAQ as glossary) ========== */
  .glossary{
    max-width:900px;margin:0 auto;
    border-top:1px solid var(--sukon-ink);
  }
  .entry{padding:32px 0;border-bottom:1px solid var(--sukon-line);display:grid;grid-template-columns:200px 1fr;gap:48px}
  @media (max-width:780px){.entry{grid-template-columns:1fr;gap:10px}}
  .entry .term{
    font-family:var(--sukon-font-serif);font-style:italic;font-size:19px;color:var(--sukon-ink);font-weight:500;line-height:1.3;
    padding-top:2px;
  }
  .entry .term::before{
    content:"";display:inline-block;width:24px;height:1px;background:var(--sukon-accent);vertical-align:middle;
    margin-right:12px;margin-top:-3px;
  }
  .entry .def{
    font-family:var(--sukon-font-serif);font-size:18px;color:var(--sukon-ink-2);line-height:1.6;
  }
  .entry .def em{font-style:italic;color:var(--sukon-ink)}

  /* ========== PARTNER — ingezonden-stijl ========== */
  .partner{
    padding:96px 0;background:var(--sukon-paper-2);
    border-top:1px solid var(--sukon-line);border-bottom:1px solid var(--sukon-line);margin-top:96px;
  }
  .partner .kicker{
    font-family:var(--sukon-font-mono);font-size:10px;letter-spacing:0.18em;
    text-transform:uppercase;color:var(--sukon-muted);margin-bottom:22px;
    display:flex;align-items:center;gap:14px;
  }
  .partner .kicker::before{content:"";width:40px;height:1px;background:var(--sukon-accent)}
  .partner h3{
    font-family:var(--sukon-font-serif);font-weight:400;
    font-size:clamp(32px, 4.8vw, 52px);line-height:1.05;letter-spacing:-0.025em;
    margin:0 0 16px;max-width:18ch;text-wrap:balance;
  }
  .partner h3 em{font-style:italic;color:var(--sukon-accent);font-weight:300}
  .partner .lead{
    font-size:20px;line-height:1.5;color:var(--sukon-ink-2);max-width:52ch;font-weight:300;margin:0 0 48px;
  }
  .partner .twocol{display:grid;grid-template-columns:1fr 1fr;gap:64px}
  @media (max-width:860px){.partner .twocol{grid-template-columns:1fr;gap:32px}}
  .partner .twocol h4{
    font-family:var(--sukon-font-serif);font-style:italic;font-weight:400;
    font-size:22px;margin:0 0 14px;color:var(--sukon-ink);
  }
  .partner .twocol p{font-size:17px;line-height:1.6;color:var(--sukon-ink-2);margin:0 0 14px}
  .partner .twocol ul{list-style:none;padding:0;margin:20px 0 0;font-size:15px;font-family:var(--sukon-font-sans)}
  .partner .twocol li{padding:12px 0;border-top:1px solid var(--sukon-line);display:grid;grid-template-columns:100px 1fr;gap:16px;color:var(--sukon-ink-2)}
  .partner .twocol li .k{font-family:var(--sukon-font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--sukon-muted)}

  /* ========== END MATTER ========== */
  .endmatter{
    padding:72px 0 40px;border-top:1px solid var(--sukon-ink);margin-top:96px;
  }
  .endmatter .cta-big{
    display:grid;grid-template-columns:1fr auto;gap:40px;align-items:baseline;padding:48px 0;
    border-bottom:1px solid var(--sukon-line);
  }
  @media (max-width:780px){.endmatter .cta-big{grid-template-columns:1fr}}
  .endmatter .cta-big h2{
    font-family:var(--sukon-font-serif);font-weight:400;
    font-size:clamp(36px, 6vw, 72px);line-height:0.95;letter-spacing:-0.03em;
    margin:0;max-width:18ch;text-wrap:balance;
  }
  .endmatter .cta-big h2 em{font-style:italic;color:var(--sukon-accent);font-weight:300}
  .endmatter .start{
    font-family:var(--sukon-font-serif);font-size:22px;font-style:italic;
    color:var(--sukon-ink);white-space:nowrap;border-bottom:1px solid var(--sukon-ink);padding-bottom:4px;
    transition:color .25s;
  }
  .endmatter .start:hover{color:var(--sukon-accent);border-bottom-color:var(--sukon-accent)}
  .endmatter .start::after{content:" →"}

  .colofon-foot{
    display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding:56px 0;
    font-family:var(--sukon-font-sans);font-size:13px;color:var(--sukon-muted);
  }
  @media (max-width:780px){.colofon-foot{grid-template-columns:1fr 1fr}}
  .colofon-foot h5{
    font-family:var(--sukon-font-mono);font-size:10px;letter-spacing:0.16em;
    text-transform:uppercase;color:var(--sukon-ink);margin:0 0 14px;font-weight:400;
  }
  .colofon-foot a{display:block;padding:4px 0;color:var(--sukon-ink-2)}
  .colofon-foot a:hover{color:var(--sukon-ink)}
  .colofon-foot .about{font-family:var(--sukon-font-serif);font-size:16px;line-height:1.5;color:var(--sukon-ink-2);font-style:italic;max-width:32ch}

  .tail{
    padding:28px 0;border-top:1px solid var(--sukon-line);
    display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
    font-family:var(--sukon-font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--sukon-muted);
  }
  .tail .def{
    font-family:var(--sukon-font-serif);font-style:italic;font-size:13px;color:var(--sukon-muted);
    letter-spacing:0;text-transform:none;
  }

  /* Entrance animations — calm, slow */
  .reveal{opacity:0;transform:translateY(12px);transition:opacity 1.2s ease, transform 1.2s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1 !important;transform:none !important}

  /* word-by-word on hero — slower, no rotation */
  .w{display:inline-block;opacity:0;transform:translateY(24px);transition:opacity 1.3s cubic-bezier(.2,.7,.2,1), transform 1.4s cubic-bezier(.2,.7,.2,1)}
  .w.in{opacity:1 !important;transform:none !important}

  /* Subtle page rule that grows as you scroll (side-line, not a loud bar) */
  .side-rule{position:fixed;left:8px;top:0;bottom:0;width:1px;background:var(--sukon-line);z-index:30;pointer-events:none;display:none}
  @media (min-width:1280px){.side-rule{display:block}}
  .side-rule b{display:block;width:1px;background:var(--sukon-ink);height:0%;transition:height .15s linear}

  /* Underline on sec-h */
  .sec-h{position:relative;display:inline-block}

  /* sukūn ring breath on wordmark */
  @keyframes calmBreath{
    0%,100%{transform:translateX(-50%) scale(1);opacity:0.9}
    50%{transform:translateX(-50%) scale(1.12);opacity:0.6}
  }
  .wordmark .ring{animation:calmBreath 4.5s ease-in-out infinite}

  /* prefers reduced motion */
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}
  }

  /* =========================
     TRANSCRIPT DEMO — editorial
  ========================= */
  .transcript-sec{
    padding:40px 0 72px;
    border-top:1px solid var(--sukon-line);
    background:
      linear-gradient(var(--sukon-paper),var(--sukon-paper));
  }
  .transcript-grid{
    display:grid;grid-template-columns:340px 1fr;gap:72px;align-items:start;
  }
  @media (max-width:960px){.transcript-grid{grid-template-columns:1fr;gap:40px}}

  .tx-intro .kicker{
    font-family:var(--sukon-font-mono);font-size:10px;letter-spacing:0.18em;
    text-transform:uppercase;color:var(--sukon-muted);margin-bottom:22px;
    display:flex;align-items:center;gap:14px;
  }
  .tx-intro .kicker::before{content:"";width:40px;height:1px;background:var(--sukon-accent)}
  .tx-intro h3{
    font-family:var(--sukon-font-serif);font-weight:400;
    font-size:34px;line-height:1.1;letter-spacing:-0.02em;
    margin:0 0 18px;text-wrap:balance;
  }
  .tx-intro h3 em{font-style:italic;color:var(--sukon-accent);font-weight:300}
  .tx-intro p.stand{
    font-size:17px;line-height:1.55;color:var(--sukon-ink-2);margin:0 0 28px;font-weight:300;
  }
  .tx-intro ol.watch{
    list-style:none;padding:0;margin:0 0 32px;counter-reset:watch;
    border-top:1px solid var(--sukon-line);
  }
  .tx-intro ol.watch li{
    counter-increment:watch;
    padding:14px 0 14px 36px;border-bottom:1px solid var(--sukon-line);
    position:relative;font-size:14px;line-height:1.5;color:var(--sukon-ink-2);
    font-family:var(--sukon-font-sans);font-weight:400;
    transition:color .4s ease;
  }
  .tx-intro ol.watch li::before{
    content:counter(watch, decimal-leading-zero);
    position:absolute;left:0;top:14px;
    font-family:var(--sukon-font-mono);font-size:11px;
    color:var(--sukon-muted);letter-spacing:0.04em;
    transition:color .4s ease;
  }
  .tx-intro ol.watch li b{
    font-weight:500;color:var(--sukon-ink);
    font-family:var(--sukon-font-serif);font-style:italic;font-size:15px;
  }
  .tx-intro ol.watch li.active{color:var(--sukon-ink)}
  .tx-intro ol.watch li.active::before{color:var(--sukon-accent)}
  .tx-intro ol.watch li.active b{color:var(--sukon-accent)}
  .tx-intro ol.watch li.done{opacity:0.6}
  .tx-intro ol.watch li.done::before{color:var(--sukon-ink)}

  .tx-controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
  .tx-btn{
    font-family:var(--sukon-font-mono);font-size:10px;letter-spacing:0.14em;
    text-transform:uppercase;color:var(--sukon-ink);
    border:1px solid var(--sukon-ink);background:transparent;
    padding:10px 16px;cursor:pointer;transition:all .2s;
  }
  .tx-btn:hover{background:var(--sukon-ink);color:var(--sukon-paper)}
  .tx-btn[disabled]{opacity:0.35;cursor:not-allowed}
  .tx-btn.ghost{border-color:var(--sukon-line-2);color:var(--sukon-muted)}
  .tx-btn.ghost:hover{background:transparent;color:var(--sukon-ink);border-color:var(--sukon-ink)}

  /* The transcript itself — printed-page feel */
  .tx-paper{
    position:relative;
    background:var(--sukon-paper-2);
    border:1px solid var(--sukon-line);
    padding:0;
    font-family:var(--sukon-font-serif);
    min-height:560px;
  }
  .tx-paper .head{
    display:flex;justify-content:space-between;align-items:baseline;
    padding:16px 28px;border-bottom:1px solid var(--sukon-line);
    font-family:var(--sukon-font-mono);font-size:10px;
    letter-spacing:0.16em;text-transform:uppercase;color:var(--sukon-muted);
    gap:16px;flex-wrap:wrap;
  }
  .tx-paper .head .title{color:var(--sukon-ink)}
  .tx-paper .head .title em{font-family:var(--sukon-font-serif);font-style:italic;letter-spacing:0;text-transform:none;color:var(--sukon-muted);margin-left:6px;font-size:13px}
  .tx-paper .head .dot{
    display:inline-block;width:6px;height:6px;border-radius:50%;
    background:var(--sukon-accent);margin-right:6px;vertical-align:middle;
    animation:txPulse 1.6s ease-in-out infinite;
  }
  .tx-paper .head .dot.done{background:var(--sukon-muted);animation:none}
  @keyframes txPulse{
    0%,100%{opacity:1;transform:scale(1)}
    50%{opacity:0.35;transform:scale(0.85)}
  }
  .tx-body{
    padding:32px 40px 40px;
    max-height:640px;overflow-y:auto;
    scroll-behavior:smooth;
    position:relative;
  }
  @media (max-width:600px){.tx-body{padding:24px 22px 28px}}
  .tx-body::-webkit-scrollbar{width:6px}
  .tx-body::-webkit-scrollbar-track{background:transparent}
  .tx-body::-webkit-scrollbar-thumb{background:var(--sukon-line-2);border-radius:3px}

  .turn{
    display:grid;grid-template-columns:88px 1fr;gap:20px;
    padding:14px 0;
    opacity:0;transform:translateY(6px);
    transition:opacity .7s ease, transform .7s ease;
  }
  .turn.in{opacity:1;transform:none}
  @media (max-width:600px){.turn{grid-template-columns:1fr;gap:4px}}

  .turn .who{
    font-family:var(--sukon-font-serif);font-style:italic;font-size:13px;
    color:var(--sukon-muted);letter-spacing:0.02em;
    text-align:right;padding-top:4px;
    border-right:1px solid var(--sukon-line);padding-right:20px;
  }
  @media (max-width:600px){.turn .who{text-align:left;border-right:none;padding-right:0;padding-top:0;font-size:12px}}
  .turn.sukon .who{color:var(--sukon-accent);font-weight:500}
  .turn .who small{
    display:block;font-family:var(--sukon-font-mono);font-size:9px;
    letter-spacing:0.12em;color:var(--sukon-muted);font-style:normal;margin-top:2px;
  }
  @media (max-width:600px){.turn .who small{display:inline-block;margin-left:8px;margin-top:0}}

  .turn .said{
    font-family:var(--sukon-font-serif);font-size:18px;line-height:1.55;
    color:var(--sukon-ink);letter-spacing:-0.005em;
    font-weight:400;
  }
  .turn.burger .said{color:var(--sukon-ink-2);font-weight:300}
  .turn .said em{font-style:italic}
  .turn .said .euro{font-variant-numeric:tabular-nums}

  /* annotation badge — flags what's happening in this turn */
  .turn .said .annot{
    display:inline-block;margin-left:6px;
    font-family:var(--sukon-font-mono);font-size:9px;
    letter-spacing:0.14em;text-transform:uppercase;
    color:var(--sukon-accent);vertical-align:middle;
    padding:2px 6px;border:1px solid var(--sukon-accent);
    position:relative;top:-2px;
  }

  /* Typing indicator */
  .typing{
    display:inline-flex;align-items:center;gap:4px;
    font-family:var(--sukon-font-serif);font-style:italic;
    color:var(--sukon-muted);font-size:16px;
  }
  .typing i{
    width:4px;height:4px;border-radius:50%;background:var(--sukon-muted);
    animation:typingDot 1.2s ease-in-out infinite;
  }
  .typing i:nth-child(2){animation-delay:.15s}
  .typing i:nth-child(3){animation-delay:.3s}
  @keyframes typingDot{
    0%,60%,100%{opacity:0.2;transform:translateY(0)}
    30%{opacity:1;transform:translateY(-2px)}
  }

  /* cursor while typing */
  .cursor{
    display:inline-block;width:2px;height:1em;
    background:var(--sukon-accent);vertical-align:text-bottom;
    margin-left:1px;animation:caret 1s step-end infinite;
  }
  @keyframes caret{50%{opacity:0}}

  /* Verdict card at end */
  .tx-verdict{
    margin-top:24px;padding:24px 28px;
    border:1px solid var(--sukon-accent);
    background:color-mix(in oklab, var(--sukon-paper) 70%, var(--sukon-accent) 4%);
    font-family:var(--sukon-font-serif);
    opacity:0;transform:translateY(8px);transition:opacity .8s ease, transform .8s ease;
  }
  .tx-verdict.in{opacity:1;transform:none}
  .tx-verdict .vh{
    font-family:var(--sukon-font-mono);font-size:10px;
    letter-spacing:0.18em;text-transform:uppercase;color:var(--sukon-accent);
    margin-bottom:12px;display:flex;align-items:center;gap:10px;
  }
  .tx-verdict .vh::before{content:"§";font-family:var(--sukon-font-serif);font-style:italic;font-size:20px;letter-spacing:0;text-transform:none}
  .tx-verdict p{margin:0 0 10px;font-size:17px;line-height:1.55;color:var(--sukon-ink);font-weight:300}
  .tx-verdict p em{font-style:italic;color:var(--sukon-accent)}
  .tx-verdict .row{
    display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:18px;
    padding-top:16px;border-top:1px dashed var(--sukon-line-2);
    font-size:13px;color:var(--sukon-ink-2);
  }
  @media (max-width:600px){.tx-verdict .row{grid-template-columns:1fr}}
  .tx-verdict .row div{padding-right:12px}
  .tx-verdict .row dt{
    font-family:var(--sukon-font-mono);font-size:9px;
    letter-spacing:0.14em;text-transform:uppercase;color:var(--sukon-muted);margin-bottom:4px;
  }
  .tx-verdict .row dd{margin:0;font-family:var(--sukon-font-serif);font-size:15px;color:var(--sukon-ink)}
  .tx-verdict .row dd em{font-style:italic}

  /* running marginalia */
  .margin-note{
    position:relative;
  }
  .margin-note::before{
    content:attr(data-note);
    position:absolute;left:calc(100% + 32px);top:-4px;
    width:180px;font-family:var(--sukon-font-serif);font-style:italic;
    font-size:13px;line-height:1.45;color:var(--sukon-muted);
    border-left:2px solid var(--sukon-line-2);padding-left:12px;
  }
  @media (max-width:1200px){.margin-note::before{display:none}}

  /* ========== MASTHEAD NAV CTA ========== */
  .masthead .meta .cta{
    font-family:var(--sukon-font-sans);font-size:12px;
    color:var(--sukon-paper);background:var(--sukon-ink);
    padding:6px 14px;letter-spacing:0.02em;
    transition:background .2s, color .2s;
  }
  .masthead .meta .cta:hover{background:var(--sukon-accent)}
  .masthead .meta .link{
    border-bottom:1px solid transparent;padding-bottom:2px;
    transition:border-color .25s, color .25s;
  }
  .masthead .meta .link:hover{border-bottom-color:var(--sukon-ink);color:var(--sukon-ink)}
  .masthead .meta .linkish{
    all:unset;cursor:pointer;font-family:var(--sukon-font-sans);font-size:12px;
    color:var(--sukon-muted);letter-spacing:0.02em;
    border-bottom:1px solid transparent;padding-bottom:2px;
    transition:border-color .25s, color .25s;
  }
  .masthead .meta .linkish:hover{border-bottom-color:var(--sukon-ink);color:var(--sukon-ink)}
  .masthead .meta .greeting{
    font-family:var(--sukon-font-sans);font-size:12px;color:var(--sukon-muted);
  }
  .masthead .meta .inline{display:inline}
  .masthead .meta .auth-meta{
    display:flex;align-items:center;gap:18px;
    padding-left:24px;border-left:1px solid var(--sukon-line);
  }
  .masthead .meta .auth-meta a.cta{
    font-family:var(--sukon-font-sans);font-size:12px;letter-spacing:0.04em;
    text-transform:uppercase;padding:6px 14px;
    background:var(--sukon-ink);color:var(--sukon-paper);
    transition:background .25s;
  }
  .masthead .meta .auth-meta a.cta:hover{background:var(--sukon-ink-2)}