styles.css

    :root {
      --paper: #eee9df;
      --paper-deep: #e2dbcf;
      --ink: #18181a;
      --quiet: #6c6964;
      --line: rgba(24,24,26,.25);
      --line-soft: rgba(24,24,26,.14);
      --signal: #ee4c35;
      --blue: #2147d9;
      --gutter: clamp(1.5rem, 6.5vw, 8rem);
      --max: 1320px;
      --serif: "Bodoni Moda", Georgia, serif;
      --sans: "DM Sans", Arial, sans-serif;
      --ease: cubic-bezier(.16, 1, .3, 1);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; overflow-x: clip; scrollbar-width: thin; scrollbar-color: transparent transparent; }
    html.is-scrolling { scrollbar-color: rgba(24,24,26,.55) transparent; }
    html.is-scrolling.on-dark { scrollbar-color: rgba(238,233,223,.55) transparent; }
    html.lenis, html.lenis body { height: auto; }
    .lenis.lenis-smooth { scroll-behavior: auto !important; }
    ::-webkit-scrollbar { width: 5px; height: 5px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: transparent; border-radius: 0; }
    html.is-scrolling::-webkit-scrollbar-thumb { background: rgba(24,24,26,.55); }
    html.is-scrolling.on-dark::-webkit-scrollbar-thumb { background: rgba(238,233,223,.55); }
    body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); line-height: 1.45; overflow-x: hidden; }
    body::before { content: ""; position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='.5'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
    a { color: inherit; }
    a:focus-visible, button:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
    button { font: inherit; }
    .wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
    .sans { font-family: var(--sans); }
    .serif { font-family: var(--serif); }
    .eyebrow { font: 600 .68rem/1.2 var(--sans); letter-spacing: .13em; text-transform: uppercase; }
    .quiet { color: var(--quiet); }
    .signal { color: var(--signal); }
    .blue { color: var(--blue); }

    .intro-curtain { position: fixed; inset: 0; z-index: 60; background: var(--paper); pointer-events: none; animation: curtain-lift .8s var(--ease) .12s forwards; }
    @keyframes curtain-lift { to { transform: translateY(-101%); visibility: hidden; } }
    .scroll-rule { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 25; pointer-events: none; }
    .scroll-rule span { display: block; height: 100%; background: var(--signal); transform: scaleX(0); transform-origin: left; }

    .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 15; background: rgba(238,233,223,.92); border-bottom: 1px solid var(--line-soft); backdrop-filter: blur(12px); }
    .nav { min-height: 4.8rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
    .brand { display: inline-flex; align-items: center; gap: .65rem; font: 700 .78rem var(--sans); letter-spacing: .06em; text-decoration: none; }
    .avatar { width: 2rem; height: 2rem; object-fit: cover; border-radius: 50%; filter: grayscale(1) contrast(1.15); }
    .nav-links { display: flex; align-items: center; gap: clamp(1rem, 3vw, 3rem); }
    .nav-links a { font: 600 .68rem var(--sans); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; transition: color .2s ease, transform .3s var(--ease); }
    .nav-links a:not(.resume-link) { position: relative; }
    .nav-links a:not(.resume-link)::after { content: ""; position: absolute; right: 0; bottom: -.35rem; left: 0; height: 1px; background: var(--signal); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
    .nav-links a:not(.resume-link):hover::after { transform: scaleX(1); transform-origin: left; }
    .resume-link { padding-bottom: .2rem; border-bottom: 1px solid var(--ink); }
    .resume-link:hover { color: var(--signal); border-color: var(--signal); }
    .menu-toggle { display: none; border: 0; padding: .35rem 0; background: transparent; font: 600 .68rem var(--sans); letter-spacing: .12em; text-transform: uppercase; }

    .hero { min-height: 100svh; padding-top: 9rem; padding-bottom: 2rem; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(15rem, .55fr); gap: clamp(2rem, 7vw, 8rem); align-items: end; }
    .hero-kicker { display: flex; align-items: center; gap: .7rem; margin-bottom: 2.4rem; }
    .hero-kicker::before { content: none; }
    .intro-dash { display: block; width: 2.8rem; height: 1px; flex: 0 0 auto; background: var(--signal); transform-origin: left center; }
    .hero h1 { max-width: 9.5ch; margin: 0; font: 500 clamp(4.7rem, 12.6vw, 14rem)/.84 var(--serif); letter-spacing: -.09em; }
    .hero h1 em { color: var(--signal); font-style: italic; }
    .hero-sub { max-width: 30rem; margin: 3rem 0 0; font-size: clamp(1.05rem, 1.5vw, 1.24rem); letter-spacing: -.03em; }
    .hero-side { align-self: end; padding-bottom: .3rem; }
    .hero-side p { max-width: 18rem; margin: 0; font: 500 clamp(1.25rem, 2.1vw, 1.8rem)/1.08 var(--serif); letter-spacing: -.045em; }
    .hero-side .side-note { margin-top: 2.4rem; padding-top: .7rem; border-top: 1px solid var(--line); font: 600 .67rem/1.35 var(--sans); letter-spacing: .11em; text-transform: uppercase; }
    .hero-bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 2rem; align-items: end; padding-top: 1rem; border-top: 1px solid var(--line); }
    .hero-bottom .eyebrow { max-width: 25rem; }
    .hero-bottom .page-mark { font: 400 clamp(2.4rem, 5vw, 5rem)/.84 var(--serif); letter-spacing: -.08em; }

    .section { padding-block: clamp(6rem, 12vw, 13rem); }
    .section-head { display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); gap: 2rem; align-items: start; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
    .section-title { margin: 0; font: 500 clamp(3rem, 7vw, 7.5rem)/.88 var(--serif); letter-spacing: -.08em; }
    .section-note { max-width: 28rem; margin: .35rem 0 0; font-size: .98rem; }
    .section-note strong { font-weight: 600; }
    .section-number { margin-bottom: .7rem; color: var(--signal); }

    .projects { border-bottom: 1px solid var(--line); }
    .project-entry { position: relative; display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 3.6rem); padding: clamp(2.8rem, 6vw, 6.8rem) 0; border-bottom: 1px solid var(--line-soft); transition: box-shadow .45s ease; }
    .project-entry:hover { box-shadow: inset 0 0 0 999px rgba(226,219,207,.45); }
    .project-entry:last-child { border-bottom: 0; }
    .project-index { align-self: start; font: 500 clamp(2.5rem, 5vw, 5rem)/.88 var(--serif); letter-spacing: -.08em; }
    .project-index span { display: block; margin-top: .7rem; font: 600 .66rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
    .project-copy h3 { margin: 0; font: 500 clamp(3.3rem, 7vw, 8rem)/.84 var(--serif); letter-spacing: -.095em; }
    .project-copy h3 em { color: var(--signal); font-style: italic; }
    .project-description { max-width: 29rem; margin: 1.7rem 0 0; font-size: clamp(1rem, 1.4vw, 1.18rem); letter-spacing: -.025em; }
    .project-evidence { align-self: end; min-width: 0; }
    .evidence-list { margin: 0; padding: .65rem 0 0; border-top: 1px solid var(--line); list-style: none; }
    .evidence-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--line-soft); font-size: .78rem; }
    .evidence-list li strong { font-weight: 700; }
    .project-meta { margin-top: 1.5rem; font: 600 .67rem/1.4 var(--sans); letter-spacing: .09em; text-transform: uppercase; overflow-wrap: anywhere; }
    .project-meta span + span::before { content: " · "; color: var(--signal); }
    .project-link { display: inline-block; margin-top: 1.5rem; color: var(--ink); font: 700 .7rem var(--sans); letter-spacing: .12em; text-decoration: none; text-transform: uppercase; transition: color .2s ease, transform .3s var(--ease); }
    .project-link span { display: inline-block; margin-left: .35rem; color: var(--signal); transition: transform .35s var(--ease); }
    .project-link:hover { color: var(--signal); }
    .project-link:hover span { transform: translateX(.35rem); }
    .project-note { max-width: 22rem; margin: .7rem 0 0; color: var(--quiet); font-size: .76rem; }

    .statement { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 8vw, 9rem); align-items: start; }
    .statement h2 { max-width: 8ch; margin: 0; font: 500 clamp(3.5rem, 8vw, 9rem)/.84 var(--serif); letter-spacing: -.09em; }
    .statement-copy p { max-width: 38rem; margin: 0; font: 500 clamp(1.35rem, 2.4vw, 2rem)/1.05 var(--serif); letter-spacing: -.045em; }
    .statement-copy p + p { margin-top: 2rem; color: var(--quiet); font: 400 1rem/1.5 var(--sans); letter-spacing: 0; }

    .experience { border-top: 1px solid var(--line); }
    .experience-row { display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); gap: clamp(2rem, 7vw, 8rem); padding: clamp(2.5rem, 5vw, 5rem) 0; border-bottom: 1px solid var(--line-soft); }
    .role-date { font: 600 .68rem/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
    .role h3 { max-width: 25rem; margin: 0; font: 500 clamp(2rem, 4vw, 4.5rem)/.92 var(--serif); letter-spacing: -.08em; }
    .role h3 span { color: var(--quiet); font-size: .52em; letter-spacing: -.04em; }
    .role p { max-width: 44rem; margin: 1.4rem 0 0; color: var(--quiet); }

    .skills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
    .skill { min-height: 11rem; padding: 1rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .skill h3 { margin: 0 0 1.4rem; font: 600 .68rem var(--sans); letter-spacing: .12em; text-transform: uppercase; }
    .skill p { margin: 0; color: var(--quiet); font-size: .92rem; line-height: 1.75; }

    .education { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 8vw, 9rem); }
    .education-lead { max-width: 20rem; margin: 0; font: 500 clamp(1.5rem, 2.6vw, 2.3rem)/1.02 var(--serif); letter-spacing: -.05em; }
    .education-lead small { display: block; margin-top: 1.4rem; color: var(--quiet); font: 400 .87rem/1.5 var(--sans); letter-spacing: 0; }
    .education-item { padding: 1.2rem 0; border-top: 1px solid var(--line); }
    .education-item:last-child { border-bottom: 1px solid var(--line); }
    .education-item h3 { margin: 0; font: 500 clamp(1.7rem, 3.3vw, 3.3rem)/.94 var(--serif); letter-spacing: -.07em; }
    .education-item p { margin: .85rem 0 0; color: var(--quiet); font-size: .9rem; }

    .contact { padding: clamp(6rem, 12vw, 13rem) 0 1.5rem; background: var(--ink); color: var(--paper); }
    .contact .section-number, .contact .signal { color: #ff705d; }
    .contact-top { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .8rem; border-bottom: 1px solid rgba(238,233,223,.28); }
    .contact h2 { max-width: 10ch; margin: 4rem 0 clamp(5rem, 10vw, 10rem); font: 500 clamp(4rem, 11vw, 12rem)/.84 var(--serif); letter-spacing: -.09em; }
    .contact h2 a { text-decoration: none; }
    .contact h2 a:hover { color: #ff705d; }
    .contact-grid { display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); gap: 1rem; padding-top: 1rem; border-top: 1px solid rgba(238,233,223,.28); }
    .contact-grid p { margin: 0; }
    .contact-grid a { text-decoration-thickness: 1px; text-underline-offset: .25em; }
    .contact-grid a:hover { color: #ff705d; }
    .footer-meta { display: flex; justify-content: space-between; gap: 1rem; margin-top: clamp(5rem, 10vw, 10rem); padding-top: .9rem; border-top: 1px solid rgba(238,233,223,.28); color: rgba(238,233,223,.6); font: 600 .66rem var(--sans); letter-spacing: .1em; text-transform: uppercase; }

    .reveal { opacity: 1; clip-path: none; transform: none; transition: opacity .8s var(--ease), clip-path .9s var(--ease), transform .9s var(--ease); }
    .js .reveal { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(1.2rem); }
    .reveal.visible { opacity: 1; clip-path: none; transform: translateY(0); }
    .gsap-title { opacity: 1; }
    .gsap-title .line { display: block; overflow: visible; padding: .16em .1em .28em; margin: -.08em -.06em -.16em; will-change: transform, opacity; }
    .anime-rule-host { position: relative; }
    .anime-rule-host > svg { position: absolute; top: -1px; left: 0; width: 100%; height: 2px; pointer-events: none; overflow: visible; }
    .anime-rule-host.section-head > svg, .anime-rule-host.contact-top > svg { top: auto; bottom: -1px; }
    .delay-1 { transition-delay: .1s; }
    .delay-2 { transition-delay: .2s; }
    .delay-3 { transition-delay: .3s; }
    .rule-draw { transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease); }
    .rule-draw.visible { transform: scaleX(1); }

    @media (max-width: 820px) {
      .nav { min-height: 4.2rem; }
      .nav-links { position: absolute; top: 100%; left: 0; right: 0; display: grid; gap: 0; padding: 0 var(--gutter); background: var(--paper); border-bottom: 1px solid var(--line); opacity: 0; pointer-events: none; transform: translateY(-.7rem); transition: opacity .2s ease, transform .25s var(--ease); }
      .nav-links.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
      .nav-links a { padding: 1rem 0; border-bottom: 1px solid var(--line-soft); }
      .nav-links .resume-link { margin: 1rem 0; padding: .5rem 0; text-align: left; }
      .menu-toggle { display: block; }
      .hero { grid-template-columns: minmax(0, 1fr); padding-top: 7.4rem; align-items: start; }
      .hero h1 { max-width: 8ch; font-size: clamp(4.5rem, 20vw, 9rem); }
      .hero-side { max-width: 24rem; }
      .hero-bottom { display: block; }
      .hero-bottom .page-mark { display: block; margin-top: 1.5rem; }
      .section-head, .statement, .experience-row, .education, .contact-grid { grid-template-columns: minmax(0, 1fr); }
      .project-entry { grid-template-columns: minmax(0, 5rem) minmax(0, 1fr); gap: 1.2rem; }
      .project-index { font-size: 3rem; }
      .project-copy { grid-column: 2; }
      .project-evidence { grid-column: 2; }
      .skills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 520px) {
      .avatar { width: 1.8rem; height: 1.8rem; }
      .brand { font-size: .7rem; }
      .project-entry { grid-template-columns: minmax(0, 1fr); gap: 1.3rem; }
      .project-copy, .project-evidence { grid-column: 1; }
      .project-index { display: flex; justify-content: space-between; align-items: baseline; font-size: 2.6rem; }
      .project-index span { margin: 0; }
      .skills { grid-template-columns: minmax(0, 1fr); }
      .role-date { margin-bottom: 1rem; }
      .footer-meta { display: block; }
      .footer-meta span + span { display: block; margin-top: .5rem; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
      .js .reveal, .reveal, .rule-draw { opacity: 1; clip-path: none; transform: none; }
      .intro-curtain { display: none; }
    }

/* Barba shell additions: shared, static, and fail-open by design. */
.skip-link { position: fixed; top: .8rem; left: var(--gutter); z-index: 80; padding: .65rem .85rem; background: var(--ink); color: var(--paper); font: 600 .7rem var(--sans); letter-spacing: .08em; text-decoration: none; text-transform: uppercase; transform: translateY(-180%); transition: transform .2s var(--ease); }
.skip-link:focus { transform: translateY(0); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.transition-wash { position: fixed; inset: 0; z-index: 55; display: grid; place-items: center; background: var(--signal); color: var(--paper); pointer-events: none; opacity: 0; visibility: hidden; clip-path: inset(0 100% 0 0); }
.transition-wash::after { content: ""; width: 28vw; max-width: 14rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; }
.transition-wash.is-active { opacity: 1; visibility: visible; }
.transition-wash.is-active::after { transform: scaleX(1); }
.transition-index { position: absolute; bottom: 1.25rem; right: var(--gutter); font: 500 clamp(3rem, 8vw, 7rem)/.8 var(--serif); letter-spacing: -.08em; }
html.is-transitioning, html.is-transitioning body { cursor: progress; }
html.is-transitioning .transition-wash { pointer-events: auto; }
.barba-container { min-height: 100vh; }
.case-link { display: block; color: inherit; text-decoration: none; }
.case-link h3 { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: .12em; transition: text-decoration-color .25s ease, color .25s ease; }
.case-link:hover h3, .case-link:focus-visible h3 { color: var(--signal); text-decoration-color: currentColor; }
.case-hero { min-height: 76svh; padding-top: 9rem; padding-bottom: clamp(4rem, 9vw, 9rem); display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(14rem, .45fr); gap: clamp(2rem, 8vw, 9rem); align-items: end; border-bottom: 1px solid var(--line); }
.case-kicker { display: flex; align-items: center; gap: .7rem; margin-bottom: 2rem; color: var(--signal); }
.case-kicker::before { content: ""; display: block; width: 2.8rem; height: 1px; background: currentColor; }
.case-hero h1 { max-width: 9ch; margin: 0; font: 500 clamp(4rem, 12vw, 13rem)/.84 var(--serif); letter-spacing: -.095em; }
.case-hero h1 em { color: var(--signal); font-style: italic; }
.case-hero .case-intro { max-width: 31rem; margin: 2rem 0 0; font: 500 clamp(1.15rem, 2vw, 1.6rem)/1.08 var(--serif); letter-spacing: -.045em; }
.case-side { align-self: end; }
.case-side .eyebrow { margin: 0; }
.case-side p { max-width: 18rem; margin: 1rem 0 0; color: var(--quiet); font-size: .9rem; }
.case-body { display: grid; grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr); gap: clamp(2rem, 8vw, 9rem); }
.case-body + .case-body { border-top: 1px solid var(--line); }
.case-block { padding-block: clamp(4rem, 9vw, 9rem); }
.case-block h2 { max-width: 9ch; margin: 0; font: 500 clamp(2.8rem, 6vw, 6.8rem)/.86 var(--serif); letter-spacing: -.08em; }
.case-copy { max-width: 42rem; }
.case-copy > p { margin: 0; font: 500 clamp(1.3rem, 2.4vw, 2rem)/1.08 var(--serif); letter-spacing: -.045em; }
.case-copy > p + p { margin-top: 2rem; color: var(--quiet); font: 400 1rem/1.55 var(--sans); letter-spacing: 0; }
.case-ledger { margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.case-ledger li { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line-soft); font-size: .82rem; }
.case-ledger strong { font-weight: 700; text-align: right; }
.case-stack { display: flex; flex-wrap: wrap; gap: .5rem .8rem; margin-top: 1.8rem; color: var(--quiet); font: 600 .68rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.case-stack span { padding-bottom: .35rem; border-bottom: 1px solid var(--line-soft); }
.case-actions { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; margin-top: 2rem; }
.case-actions .project-link { margin-top: 0; }
.case-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding-top: 1rem; border-top: 1px solid rgba(238,233,223,.3); }
.case-nav a { display: block; color: var(--paper); text-decoration: none; }
.case-nav a:last-child { text-align: right; }
.case-nav .eyebrow { color: rgba(238,233,223,.58); }
.case-nav strong { display: block; margin-top: .65rem; font: 500 clamp(1.8rem, 3vw, 3.2rem)/.9 var(--serif); letter-spacing: -.06em; }
.case-footer { padding-top: clamp(5rem, 10vw, 10rem); }
.case-footer h2 { margin: 0 0 clamp(4rem, 8vw, 8rem); font: 500 clamp(3.6rem, 10vw, 11rem)/.84 var(--serif); letter-spacing: -.09em; }
.case-footer h2 a { color: var(--paper); text-decoration: none; }
.case-footer h2 a:hover { color: #ff705d; }
body.case-page .contact { padding-top: 2rem; }
body.case-page .contact-top { display: none; }
@media (max-width: 820px) {
  .case-hero { grid-template-columns: minmax(0, 1fr); min-height: auto; padding-top: 7.4rem; }
  .case-side { max-width: 24rem; }
  .case-body { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .case-block { padding-block: 4.5rem; }
}
@media (max-width: 520px) {
  .case-hero h1 { font-size: clamp(3.8rem, 19vw, 8rem); }
  .case-nav strong { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .transition-wash { opacity: 0 !important; visibility: hidden !important; clip-path: none !important; }
  .transition-wash::after { transform: none !important; }
}


/* Pakka flagship case study: transaction-ledger meets editorial architecture document. */
.pakka-page { --pakka-dark: #222326; --pakka-dark-soft: #2c2d30; --pakka-rule: rgba(238,233,223,.27); --pakka-muted: #a9a39b; }
.pakka-page h1, .pakka-page h2, .pakka-page h3, .pakka-page p { text-wrap: balance; }
.pakka-page .signal { color: var(--signal); }
.pakka-hero { min-height: 92svh; padding-top: 9rem; padding-bottom: 2rem; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(15rem, .45fr); gap: clamp(2rem, 7vw, 8rem); align-items: end; border-bottom: 1px solid var(--line); }
.pakka-hero-main { min-width: 0; }
.pakka-hero .case-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin-bottom: 2rem; color: var(--signal); }
.pakka-hero .case-kicker::before { content: none; }
.pakka-hero .case-index { display: inline-block; padding-right: .65rem; border-right: 1px solid currentColor; }
.pakka-slash { color: var(--quiet); }
.pakka-hero h1 { max-width: 8.5ch; margin: 0; font: 500 clamp(5rem, 13vw, 15rem)/.78 var(--serif); letter-spacing: -.105em; }
.pakka-position { max-width: 43rem; margin: 2.6rem 0 0; font: 500 clamp(1.7rem, 3.1vw, 3.35rem)/.94 var(--serif); letter-spacing: -.06em; }
.pakka-hero-note { max-width: 34rem; margin: 1.5rem 0 0; color: var(--quiet); font-size: clamp(.98rem, 1.2vw, 1.1rem); line-height: 1.5; }
.pakka-hero-rail { align-self: end; min-width: 0; padding-top: .8rem; border-top: 1px solid var(--line); }
.pakka-rail-mark { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; }
.pakka-status { display: inline-flex; align-items: center; gap: .4rem; color: var(--quiet); font: 600 .63rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; text-align: right; }
.pakka-status i { width: .42rem; height: .42rem; display: inline-block; border-radius: 50%; background: var(--signal); }
.pakka-facts { margin: 2rem 0 0; }
.pakka-facts > div { display: grid; grid-template-columns: minmax(4rem, .55fr) minmax(0, 1.45fr); gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line-soft); }
.pakka-facts dt { color: var(--quiet); font: 600 .64rem/1.35 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.pakka-facts dd { margin: 0; font-size: .78rem; line-height: 1.4; }
.pakka-live-link { margin-top: 1.7rem; }
.pakka-hero-bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 2rem; align-items: end; padding-top: 1rem; border-top: 1px solid var(--line); }
.pakka-hero-bottom .eyebrow { max-width: 29rem; }
.pakka-hero-bottom .page-mark { font: 400 clamp(2.4rem, 5vw, 5rem)/.84 var(--serif); letter-spacing: -.08em; }
.pakka-proof, .pakka-hard-problem, .pakka-architecture-section, .pakka-state-section, .pakka-ledger-section, .pakka-failure-section, .pakka-decisions-section, .pakka-readiness-section { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); gap: clamp(2rem, 8vw, 9rem); align-items: start; padding-block: clamp(6rem, 12vw, 13rem); border-bottom: 1px solid var(--line); }
.pakka-section-intro { min-width: 0; }
.pakka-section-intro h2 { max-width: 8.5ch; margin: 0; font: 500 clamp(3.3rem, 7vw, 7.8rem)/.84 var(--serif); letter-spacing: -.09em; }
.pakka-section-intro h2 em { color: var(--signal); font-style: italic; }
.pakka-proof-ledger, .pakka-hard-copy, .pakka-architecture-wrap, .pakka-state-content, .pakka-ledger-content, .pakka-failure-content, .pakka-readiness-content { min-width: 0; }
.pakka-evidence-head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: .7rem 0 .85rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line-soft); }
.pakka-evidence-head .eyebrow:last-child { text-align: right; }
.pakka-evidence-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pakka-evidence { min-height: 15rem; padding: 1.2rem 1.2rem 1.4rem; border-right: 1px solid var(--line); border-top: 1px solid var(--line); }
.pakka-evidence-number { display: block; font: 500 clamp(3.8rem, 7vw, 7.4rem)/.78 var(--serif); letter-spacing: -.1em; }
.pakka-evidence-symbol { display: block; min-height: 5.5rem; font: 400 clamp(4rem, 7vw, 7.4rem)/.78 var(--serif); letter-spacing: -.12em; }
.pakka-evidence h3 { margin: 1.25rem 0 0; font: 600 .71rem/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.pakka-evidence p { max-width: 19rem; margin: .8rem 0 0; color: var(--quiet); font-size: .86rem; line-height: 1.5; }
.pakka-footnote { margin: 1rem 0 0; font-size: .61rem; line-height: 1.45; }
.pakka-lede { max-width: 43rem; margin: 0; font: 500 clamp(1.5rem, 2.7vw, 2.55rem)/1 var(--serif); letter-spacing: -.055em; }
.pakka-hard-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin-top: clamp(3rem, 6vw, 5.5rem); }
.pakka-hard-notes p { margin: 0; padding-top: .8rem; border-top: 1px solid var(--line); font-size: .92rem; line-height: 1.55; }
.pakka-hard-notes .eyebrow { display: block; margin-bottom: .8rem; }
.pakka-architecture-section { background: var(--paper-deep); }
.pakka-architecture-wrap { padding-top: .5rem; }
.pakka-architecture { margin: 0; padding: 1rem; background: var(--pakka-dark); color: var(--paper); }
.pakka-architecture-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pakka-architecture-svg text { fill: var(--paper); font: 600 14px/1 var(--sans); letter-spacing: 1.7px; }
.pakka-architecture-svg .node-sub, .pakka-architecture-svg .group-sub { fill: var(--pakka-muted); font-size: 11px; letter-spacing: .4px; font-weight: 400; }
.pakka-architecture-svg .pakka-svg-node rect { fill: transparent; stroke: rgba(238,233,223,.42); stroke-width: 1; }
.pakka-architecture-svg .pakka-svg-node-red rect { stroke: #ff705d; }
.pakka-architecture-svg .pakka-flow-path { fill: none; stroke: var(--paper); stroke-width: 1; stroke-dasharray: 1 0; }
.pakka-architecture-svg .pakka-flow-auth, .pakka-architecture-svg .pakka-flow-money { stroke: #ff705d; }
.pakka-architecture-svg .pakka-flow-measure { stroke: #aaa29a; stroke-dasharray: 6 5; }
.pakka-architecture-svg .pakka-svg-group-label text:first-child { fill: #ff705d; font-size: 12px; }
.pakka-architecture-svg .pakka-svg-group-muted text:first-child { fill: #aaa29a; }
.pakka-architecture figcaption { margin: 1rem 0 .2rem; color: rgba(238,233,223,.68); font-size: .78rem; line-height: 1.5; }
.pakka-diagram-fallback { display: none; margin-top: 1rem; padding: 1rem; border-top: 1px solid var(--line); background: rgba(24,24,26,.06); }
.pakka-diagram-fallback summary { cursor: pointer; font: 600 .68rem var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.pakka-diagram-fallback p { margin: .9rem 0 0; font-size: .9rem; line-height: 1.55; }
.pakka-state-content > .pakka-lede { margin-bottom: 3.2rem; }
.pakka-state-rail { position: relative; margin: 0; padding: 0 0 0 1.25rem; list-style: none; border-left: 1px solid var(--line); }
.pakka-state-node { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(12rem, .75fr); gap: 2rem; padding: 1.6rem 0 1.7rem 1.75rem; border-bottom: 1px solid var(--line-soft); }
.pakka-state-node:first-child { padding-top: 0; }
.pakka-state-node:last-child { border-bottom: 0; }
.state-dot { position: absolute; top: 1.85rem; left: -.32rem; width: .58rem; height: .58rem; border: 1px solid var(--ink); border-radius: 50%; background: var(--paper); }
.pakka-state-node:first-child .state-dot { top: .2rem; }
.state-dot-signal { border-color: var(--signal); background: var(--signal); }
.state-main .eyebrow { color: var(--quiet); }
.state-main h3 { max-width: 22rem; margin: .6rem 0 0; font: 500 clamp(1.7rem, 3.4vw, 3.5rem)/.9 var(--serif); letter-spacing: -.07em; }
.state-main p { max-width: 24rem; margin: .8rem 0 0; color: var(--quiet); font-size: .88rem; line-height: 1.5; }
.pakka-state-node dl { margin: 0; }
.pakka-state-node dl div { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: .7rem; padding: .45rem 0; border-bottom: 1px solid var(--line-soft); }
.pakka-state-node dt { color: var(--quiet); font: 600 .6rem/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.pakka-state-node dd { margin: 0; font-size: .76rem; line-height: 1.4; }
.pakka-state-dispute { margin-top: .5rem; border-top: 1px dashed var(--signal); }
.pakka-core-section { padding-block: clamp(6rem, 12vw, 13rem); background: var(--pakka-dark); color: var(--paper); }
.pakka-dark-intro { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); gap: clamp(2rem, 8vw, 9rem); padding-bottom: clamp(4rem, 8vw, 8rem); border-bottom: 1px solid var(--pakka-rule); }
.pakka-dark-intro .section-number { color: #ff705d; }
.pakka-dark-intro h2 { grid-column: 2; max-width: 12ch; }
.pakka-core-grid { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); gap: clamp(2rem, 8vw, 9rem); padding-top: clamp(4rem, 8vw, 8rem); }
.pakka-core-lede p { max-width: 24rem; margin: 0; font: 500 clamp(1.7rem, 3vw, 3rem)/.97 var(--serif); letter-spacing: -.055em; }
.pakka-core-lede .quiet-dark { margin-top: 2rem; color: var(--pakka-muted); font: 400 .92rem/1.55 var(--sans); letter-spacing: 0; }
.pakka-core-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 1px solid var(--pakka-rule); border-top: 1px solid var(--pakka-rule); }
.pakka-core-rule { min-height: 15rem; padding: 1.2rem 1.2rem 1.6rem; border-right: 1px solid var(--pakka-rule); border-bottom: 1px solid var(--pakka-rule); }
.pakka-core-rule .eyebrow { color: #ff705d; }
.pakka-core-rule h3 { margin: 1.6rem 0 0; font: 500 clamp(1.5rem, 2.5vw, 2.4rem)/.95 var(--serif); letter-spacing: -.06em; }
.pakka-core-rule p { margin: 1rem 0 0; color: var(--pakka-muted); font-size: .86rem; line-height: 1.5; }
.pakka-core-foot { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); gap: clamp(2rem, 8vw, 9rem); margin-top: clamp(4rem, 8vw, 8rem); padding-top: 1rem; border-top: 1px solid var(--pakka-rule); }
.pakka-core-foot .eyebrow { color: #ff705d; }
.pakka-core-foot p { max-width: 42rem; margin: 0; color: var(--pakka-muted); font-size: .9rem; line-height: 1.55; }
.pakka-ledger-content > .pakka-lede { max-width: 35rem; }
.pakka-example-label { margin: 2.3rem 0 1rem; }
.pakka-ledger-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.pakka-ledger-card { min-width: 0; padding: 1.3rem 1.3rem 1.5rem; border: 1px solid var(--line); }
.ledger-card-top { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding-bottom: .8rem; border-bottom: 1px solid var(--line-soft); }
.ledger-arrow { font: 400 1.7rem/1 var(--serif); }
.pakka-ledger-card h3 { margin: 1.8rem 0 2rem; font: 500 clamp(1.8rem, 3vw, 3.2rem)/.9 var(--serif); letter-spacing: -.07em; }
.pakka-ledger-card dl { margin: 0; }
.pakka-ledger-card dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--line-soft); font-size: .84rem; }
.pakka-ledger-card dt { color: var(--quiet); }
.pakka-ledger-card dd { margin: 0; font-weight: 700; }
.pakka-ledger-card .ledger-net { border-bottom: 0; color: var(--signal); }
.pakka-ledger-card .ledger-net dt { color: inherit; }
.pakka-ledger-card p { margin: 1.3rem 0 0; color: var(--quiet); font-size: .84rem; line-height: 1.5; }
.pakka-failure-content > .pakka-lede { max-width: 34rem; }
.pakka-failure-table-wrap { margin-top: 3.5rem; border-top: 1px solid var(--line); }
.pakka-failure-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .78rem; }
.pakka-failure-table th, .pakka-failure-table td { padding: .9rem .7rem .9rem 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; text-align: left; overflow-wrap: anywhere; }
.pakka-failure-table thead th { color: var(--quiet); font: 600 .62rem/1.3 var(--sans); letter-spacing: .11em; text-transform: uppercase; }
.pakka-failure-table tbody th { width: 23%; font-weight: 700; }
.pakka-failure-table tbody td:nth-child(2) { width: 39%; }
.pakka-failure-table tbody td:nth-child(3) { width: 38%; color: var(--quiet); }
.pakka-decisions-list { min-width: 0; border-top: 1px solid var(--line); }
.pakka-decision { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 1.2rem; padding: 1.2rem 0 2.2rem; border-bottom: 1px solid var(--line-soft); }
.decision-number { font-size: 3.3rem; line-height: .8; letter-spacing: -.08em; }
.pakka-decision h3 { margin: 0; font: 500 clamp(1.8rem, 3vw, 3.4rem)/.9 var(--serif); letter-spacing: -.07em; }
.pakka-decision dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; margin: 1.7rem 0 0; }
.pakka-decision dl div { padding-top: .55rem; border-top: 1px solid var(--line-soft); }
.pakka-decision dt { color: var(--signal); font: 600 .61rem/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.pakka-decision dd { margin: .45rem 0 0; color: var(--quiet); font-size: .82rem; line-height: 1.5; }
.pakka-measurement { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); gap: clamp(2rem, 8vw, 9rem); padding-block: clamp(4rem, 8vw, 8rem); border-bottom: 1px solid var(--line); }
.pakka-measurement-mark { color: var(--signal); font: 400 clamp(4rem, 8vw, 8rem)/.75 var(--serif); letter-spacing: -.12em; }
.pakka-measurement h2 { margin: .8rem 0 1rem; font: 500 clamp(2.8rem, 6vw, 6.3rem)/.85 var(--serif); letter-spacing: -.08em; }
.pakka-measurement p { max-width: 43rem; margin: 0; color: var(--quiet); font-size: .96rem; line-height: 1.6; }
.pakka-readiness-content > .pakka-lede { max-width: 36rem; }
.pakka-readiness-list { margin: 3.5rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.pakka-readiness-list li { display: grid; grid-template-columns: 2rem minmax(8rem, .55fr) minmax(0, 1.45fr); gap: 1rem; align-items: baseline; padding: .9rem 0; border-bottom: 1px solid var(--line-soft); }
.pakka-readiness-list li > span { color: var(--signal); font: 600 .65rem var(--sans); letter-spacing: .1em; }
.pakka-readiness-list strong { font: 600 .7rem/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.pakka-readiness-list p { margin: 0; color: var(--quiet); font-size: .86rem; line-height: 1.45; }
.pakka-close { max-width: 35rem; margin: -3rem 0 0; color: rgba(238,233,223,.7); font: 400 1rem/1.55 var(--sans); }
.pakka-page .case-footer .case-actions { margin-top: 1.5rem; }
.pakka-page .case-footer .case-actions .project-link { color: var(--paper); }
.pakka-page .case-footer .case-actions .project-link:hover { color: #ff705d; }
@media (max-width: 820px) {
  .pakka-hero, .pakka-proof, .pakka-hard-problem, .pakka-architecture-section, .pakka-state-section, .pakka-ledger-section, .pakka-failure-section, .pakka-decisions-section, .pakka-readiness-section, .pakka-measurement { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .pakka-hero { min-height: auto; padding-top: 7.4rem; }
  .pakka-hero-rail { max-width: 32rem; }
  .pakka-hero-bottom { grid-column: 1; }
  .pakka-section-intro h2 { max-width: 11ch; }
  .pakka-hard-notes { max-width: 36rem; }
  .pakka-dark-intro, .pakka-core-grid, .pakka-core-foot { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .pakka-dark-intro h2 { grid-column: 1; }
  .pakka-core-lede p { max-width: 32rem; }
  .pakka-core-foot p { max-width: 36rem; }
  .pakka-architecture { padding: .7rem; }
}
@media (max-width: 640px) {
  .pakka-hero h1 { font-size: clamp(4.4rem, 22vw, 8rem); }
  .pakka-position { font-size: clamp(1.6rem, 7vw, 2.3rem); }
  .pakka-rail-mark { display: block; }
  .pakka-status { display: flex; margin-top: .8rem; text-align: left; }
  .pakka-evidence-grid, .pakka-hard-notes, .pakka-core-rules, .pakka-ledger-grid { grid-template-columns: minmax(0, 1fr); }
  .pakka-evidence { min-height: auto; }
  .pakka-evidence-symbol { min-height: auto; }
  .pakka-architecture { background: transparent; padding: 0; }
  .pakka-architecture-svg { display: none; }
  .pakka-architecture figcaption { display: none; }
  .pakka-diagram-fallback { display: block; margin-top: 0; background: var(--pakka-dark); color: var(--paper); border-top: 0; }
  .pakka-diagram-fallback summary { display: none; }
  .pakka-diagram-fallback p { display: block !important; }
  .pakka-state-rail { padding-left: .95rem; }
  .pakka-state-node { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; padding-left: 1.25rem; }
  .state-dot { left: -.28rem; }
  .pakka-state-node dl { max-width: 30rem; }
  .pakka-decision { grid-template-columns: 2.8rem minmax(0, 1fr); gap: .8rem; }
  .decision-number { font-size: 2.5rem; }
  .pakka-decision dl { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
  .pakka-failure-table { font-size: .7rem; }
  .pakka-failure-table th, .pakka-failure-table td { padding-right: .45rem; }
  .pakka-readiness-list li { grid-template-columns: 1.8rem minmax(0, 1fr); gap: .4rem .7rem; }
  .pakka-readiness-list p { grid-column: 2; }
  .pakka-close { margin-top: -2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pakka-page .pakka-architecture-svg .pakka-flow-path { stroke-dasharray: none; }
  .pakka-page .pakka-evidence-number, .pakka-page .pakka-evidence-symbol { transform: none; }
}


/* Klar flagship case study: market signal architecture in the existing editorial system. */
.klar-case-page { --klar-muted: #77736d; --klar-red-soft: #ff705d; }
.klar-case-page h1, .klar-case-page h2, .klar-case-page h3, .klar-case-page p { text-wrap: balance; }
.klar-case-page .signal { color: var(--signal); }
.klar-hero { min-height: 92svh; padding-top: 9rem; padding-bottom: 2rem; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(15rem, .5fr); gap: clamp(2rem, 7vw, 8rem); align-items: end; border-bottom: 1px solid var(--line); }
.klar-hero-copy { min-width: 0; }
.klar-hero .case-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin-bottom: 2rem; color: var(--signal); }
.klar-hero .case-kicker::before { content: none; }
.klar-hero .case-index { display: inline-block; padding-right: .65rem; border-right: 1px solid currentColor; }
.klar-hero h1 { max-width: 7.5ch; margin: 0; font: 500 clamp(5rem, 13vw, 15rem)/.78 var(--serif); letter-spacing: -.105em; }
.klar-hero .case-intro { max-width: 43rem; margin: 2.6rem 0 0; font: 500 clamp(1.7rem, 3.1vw, 3.35rem)/.94 var(--serif); letter-spacing: -.06em; }
.klar-hero .case-actions { margin-top: 2rem; }
.klar-hero-side { align-self: end; min-width: 0; padding-top: .8rem; border-top: 1px solid var(--line); }
.klar-side-title { max-width: 16rem; margin: 1.3rem 0 0; font: 500 clamp(1.4rem, 2.4vw, 2.45rem)/.94 var(--serif); letter-spacing: -.055em; }
.case-facts { margin: 2rem 0 0; }
.case-facts > div { display: grid; grid-template-columns: minmax(4rem, .55fr) minmax(0, 1.45fr); gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line-soft); }
.case-facts dt { color: var(--quiet); font: 600 .64rem/1.35 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.case-facts dd { margin: 0; font-size: .78rem; line-height: 1.4; }
.klar-snapshot { padding-block: clamp(5rem, 10vw, 10rem); border-bottom: 1px solid var(--line); }
.section-rule { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.klar-snapshot-heading { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(10rem, .7fr); gap: 2rem; align-items: end; padding-block: clamp(2rem, 5vw, 4.5rem); }
.klar-snapshot-heading h2 { max-width: 8ch; margin: 0; font: 500 clamp(3.7rem, 8vw, 9rem)/.82 var(--serif); letter-spacing: -.1em; }
.klar-snapshot-asof { margin: 0; color: var(--quiet); font: 600 .68rem/1.55 var(--sans); letter-spacing: .11em; text-transform: uppercase; }
.klar-snapshot-asof strong { display: inline-block; margin-top: .55rem; color: var(--ink); font: 500 clamp(1.3rem, 2vw, 2rem)/.92 var(--serif); letter-spacing: -.04em; text-transform: none; }
.klar-ledger { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.klar-ledger-item { min-height: 13rem; padding: 1.15rem 1.15rem 1.4rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.klar-ledger-item strong { display: block; color: var(--signal); font: 500 clamp(3rem, 6vw, 6.3rem)/.8 var(--serif); letter-spacing: -.1em; }
.klar-ledger-item span { display: block; margin-top: 1.7rem; font: 600 .69rem/1.35 var(--sans); letter-spacing: .09em; text-transform: uppercase; }
.klar-footnote { margin: 1rem 0 0; color: var(--quiet); font-size: .64rem; line-height: 1.45; }
.klar-architecture, .klar-data-model, .klar-failure-section, .klar-freshness, .klar-boundary, .klar-next { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); gap: clamp(2rem, 8vw, 9rem); align-items: start; padding-block: clamp(6rem, 12vw, 13rem); border-bottom: 1px solid var(--line); }
.klar-architecture .case-block, .klar-data-model .case-block, .klar-failure-section .case-block, .klar-freshness .case-block, .klar-boundary .case-block, .klar-next .case-block { min-width: 0; }
.klar-architecture h2, .klar-data-model h2, .klar-failure-section h2, .klar-freshness h2, .klar-boundary h2, .klar-next h2 { max-width: 8.5ch; margin: 0; font: 500 clamp(3.3rem, 7vw, 7.8rem)/.84 var(--serif); letter-spacing: -.09em; }
.section-dek { max-width: 18rem; margin: 2rem 0 0; color: var(--quiet); font-size: .91rem; line-height: 1.55; }
.klar-pipeline { padding: 1rem; background: var(--ink); color: var(--paper); }
.klar-pipeline-svg { display: block; width: 100%; height: auto; overflow: visible; }
.klar-pipeline-svg text { fill: var(--paper); font: 600 11px/1 var(--sans); letter-spacing: 1.25px; }
.klar-pipeline-svg .pipeline-caption { fill: rgba(238,233,223,.62); font-size: 9px; font-weight: 400; letter-spacing: .35px; }
.klar-pipeline-svg .pipeline-line { fill: none; stroke: var(--paper); stroke-width: 1; marker-end: url(#klar-arrow); }
.klar-pipeline-svg .pipeline-node { fill: transparent; stroke: rgba(238,233,223,.62); stroke-width: 1; }
.klar-pipeline-svg .pipeline-node-box { fill: transparent; stroke: rgba(238,233,223,.45); stroke-width: 1; }
.klar-pipeline-svg .accent-node { stroke: var(--klar-red-soft); }
.klar-diagram-fallback { display: none; margin: 0; padding: 1rem; color: var(--paper); font-size: .82rem; line-height: 1.55; }
.klar-prose-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin-top: 2.3rem; }
.klar-prose-grid p { margin: 0; padding-top: .8rem; border-top: 1px solid var(--line); font-size: .92rem; line-height: 1.55; }
.klar-prose-grid strong { display: block; margin-bottom: .65rem; font: 600 .7rem/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.klar-model-card { padding: 1.2rem; background: var(--ink); color: var(--paper); }
.klar-model-top { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding-bottom: .8rem; border-bottom: 1px solid rgba(238,233,223,.28); }
.klar-model-top .eyebrow { color: rgba(238,233,223,.66); }
.klar-model-top .signal { color: var(--klar-red-soft); }
.klar-field-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 1.1rem; border-left: 1px solid rgba(238,233,223,.3); border-top: 1px solid rgba(238,233,223,.3); }
.klar-field-grid span { min-height: 5.1rem; padding: .8rem; border-right: 1px solid rgba(238,233,223,.3); border-bottom: 1px solid rgba(238,233,223,.3); color: rgba(238,233,223,.8); font: 600 .63rem/1.35 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.klar-model-index { display: grid; grid-template-columns: 3.3rem minmax(0, 1fr); gap: .8rem; align-items: start; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid rgba(238,233,223,.28); }
.index-mark { color: var(--klar-red-soft); font: 400 3.2rem/.7 var(--serif); }
.klar-model-index p { margin: 0; color: rgba(238,233,223,.68); font-size: .82rem; line-height: 1.5; }
.klar-model-index strong { color: var(--paper); }
.model-note { max-width: 37rem; margin: 1.2rem 0 0; color: var(--quiet); font-size: .78rem; line-height: 1.5; }
.klar-failure-table { border-top: 1px solid var(--line); }
.klar-table-row { display: grid; grid-template-columns: minmax(7rem, .72fr) minmax(9rem, 1fr) minmax(11rem, 1.2fr); gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--line-soft); font-size: .78rem; line-height: 1.45; }
.klar-table-head { color: var(--quiet); font: 600 .62rem/1.3 var(--sans); letter-spacing: .11em; text-transform: uppercase; }
.klar-table-row strong { font-weight: 700; }
.klar-status-strip { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: .8rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line-soft); font: 600 .68rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.klar-status-strip strong { color: var(--quiet); font-size: .62rem; font-weight: 600; }
.status-dot { width: .45rem; height: .45rem; flex: 0 0 auto; margin-right: auto; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 .18rem rgba(238,76,53,.12); }
.klar-quote { max-width: 38rem; margin: 2.5rem 0 0; font: 500 clamp(1.7rem, 3vw, 3rem)/.95 var(--serif); letter-spacing: -.06em; }
.klar-freshness .case-copy > p:not(.klar-quote) { max-width: 39rem; margin: 2rem 0 0; color: var(--quiet); font-size: .9rem; line-height: 1.55; }
.klar-boundary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.klar-boundary-grid > div { min-height: 13rem; padding: 1.15rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.klar-boundary-grid p { max-width: 18rem; margin: 1.5rem 0 0; font-size: .9rem; line-height: 1.55; }
.klar-boundary .case-copy > p:not(.klar-quote) { max-width: 39rem; margin: 2rem 0 0; color: var(--quiet); font-size: .9rem; line-height: 1.55; }
.klar-next-note { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.klar-next-note p { max-width: 38rem; margin: 0; font: 500 clamp(1.5rem, 2.7vw, 2.55rem)/1 var(--serif); letter-spacing: -.055em; }
.next-mark { color: var(--signal); font: 400 clamp(3rem, 5vw, 5.5rem)/.7 var(--serif); }
.klar-next .case-actions { margin-top: 3rem; }
@media (max-width: 820px) {
  .klar-hero, .klar-architecture, .klar-data-model, .klar-failure-section, .klar-freshness, .klar-boundary, .klar-next { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .klar-hero { min-height: auto; padding-top: 7.4rem; }
  .klar-hero-side { max-width: 32rem; }
  .klar-snapshot-heading { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .klar-snapshot-asof { justify-self: start; }
  .klar-architecture h2, .klar-data-model h2, .klar-failure-section h2, .klar-freshness h2, .klar-boundary h2, .klar-next h2 { max-width: 11ch; }
}
@media (max-width: 640px) {
  .klar-hero h1 { font-size: clamp(4.4rem, 22vw, 8rem); }
  .klar-hero .case-intro { font-size: clamp(1.6rem, 7vw, 2.3rem); }
  .section-rule { display: block; }
  .section-rule .eyebrow:last-child { display: block; margin-top: .5rem; }
  .klar-ledger, .klar-prose-grid, .klar-field-grid, .klar-boundary-grid { grid-template-columns: minmax(0, 1fr); }
  .klar-ledger-item { min-height: auto; }
  .klar-ledger-item strong { font-size: clamp(3.6rem, 17vw, 6rem); }
  .klar-field-grid span { min-height: auto; }
  .klar-pipeline { padding: 0; background: transparent; }
  .klar-pipeline-svg { display: none; }
  .klar-diagram-fallback { display: block; background: var(--ink); }
  .klar-table-row { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: .55rem .8rem; }
  .klar-table-head { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .klar-table-row span:nth-child(3), .klar-table-row strong { grid-column: 2; }
  .klar-status-strip { display: grid; grid-template-columns: .5rem minmax(0, 1fr); gap: .45rem .65rem; }
  .status-dot { margin: .2rem 0 0; }
  .klar-status-strip strong { grid-column: 2; }
  .klar-next-note { grid-template-columns: 2.8rem minmax(0, 1fr); }
  .next-mark { font-size: 2.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .klar-case-page .klar-pipeline-svg .pipeline-line { marker-end: none; }
  .klar-case-page .klar-ledger-item strong, .klar-case-page .klar-quote { transform: none; }
}

/* Route handoff layers: fixed, temporary, and removed after every transition. */
.route-title-clone,
.route-index-clone {
  position: fixed;
  z-index: 58;
  pointer-events: none;
  opacity: 1;
}
.route-title-clone {
  margin: 0;
  color: var(--ink);
  text-align: left;
  transform-origin: left top;
  white-space: normal;
}
.route-title-clone .signal { color: var(--signal); }
.home-project-title-clone {
  font: 500 clamp(3.3rem, 7vw, 8rem)/.84 var(--serif);
  letter-spacing: -.095em;
}
.case-project-title-clone {
  font: 500 clamp(4rem, 12vw, 13rem)/.84 var(--serif);
  letter-spacing: -.095em;
}
.route-index-clone {
  z-index: 59;
  color: var(--paper);
  font: 500 clamp(3rem, 8vw, 7rem)/.8 var(--serif);
  letter-spacing: -.08em;
}
@media (prefers-reduced-motion: reduce) {
  .route-title-clone, .route-index-clone { display: none; }
}