/* =====================================================================
   workshop.css — saurinchoksi.com "Workshop" design system (HQ-15, 2026 refresh)
   ---------------------------------------------------------------------
   Tactile Tech made physical: layered cream/kraft paper surfaces, brand
   maroon as stamped ink, punched manila tags, Bricolage Grotesque display
   over DM Sans body with IBM Plex Mono technical labels.

   SCOPE: loaded by EVERY page of the site (rollout complete 2026-07-14;
   styles.css retired). The two TMS pages additionally load
   tell-me-a-story.css (pipeline instrument + changelog styling), fed by
   the body.tms token shim below; m9b-improvised-names-consistency.html
   is standalone-styled by choice. Where a component's scale
   diverges between pages, the page values are scoped under the page's body
   class (body.projects → ".projects …"); shared components stay unscoped.
   Fonts are loaded via each page's <link> (Google Fonts — already
   CSP-whitelisted in netlify.toml).
   ===================================================================== */

/* ============ TOKENS ============ */
:root {
    /* materials */
    --paper: #F5EFE3;          /* workbench cream stock */
    --paper-bright: #FCF8EF;   /* card stock */
    --kraft: #E4D5B4;          /* manila tag */
    --kraft-lite: #EFE5CC;     /* logo board */
    --kraft-deep: #C9B383;     /* kraft shadowline */
    --bench: #2E241C;          /* dark workbench */
    --ink: #6A3843;            /* brand maroon = stamp ink */
    --ink-deep: #552C36;
    --gold: #BFA265;
    --text-dark: #372E2A;
    --text-body: #4C423C;
    --line: rgba(55, 46, 42, .16);
    --line-strong: rgba(55, 46, 42, .34);

    /* type */
    --display: 'Bricolage Grotesque', 'DM Sans', sans-serif;
    --body: 'DM Sans', sans-serif;
    --mono: 'IBM Plex Mono', monospace;

    /* paper grain (multiplied over everything, very low) */
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
    /* stamped-ink patchiness (alpha floor 0.6 so text stays readable) */
    --ink-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.45 0.6'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23r)'/%3E%3C/svg%3E");
}

/* ============ BASE ============ */
*, *::before, *::after { box-sizing: border-box; }

html {
    overflow-x: clip;               /* iOS Safari: clip on html, not just body */
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    overflow-x: clip;
    font: 400 1rem/1.65 var(--body);
    color: var(--text-body);
    background:
        radial-gradient(1200px 800px at 85% -10%, #FBF6EA, transparent 60%),
        radial-gradient(1000px 700px at -10% 110%, #EDE3CC, transparent 55%),
        var(--paper);
}

/* one sheet of grain over the whole bench */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: var(--grain);
    background-size: 180px 180px;
    mix-blend-mode: multiply;
    opacity: .22;
    pointer-events: none;
    z-index: 70;
}

img { max-width: 100%; height: auto; }

::selection { background: var(--ink); color: #FBF3E9; }

:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 3px;
}
.bench--dark :focus-visible,
footer :focus-visible,
.contact-plate :focus-visible {
    outline-color: var(--gold);
}

.container {
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: clamp(1.1rem, 4.5vw, 3rem);
}

.no-wrap { white-space: nowrap; }
.mobile-break { display: none; }

/* ============ SCREEN-READER-ONLY TEXT ============
   Lived in styles.css; the TMAS page's "(opens in new tab)" spans rendered
   visibly after the HQ-22 port until this was restored here. */
.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;
}

/* ============ SKIP LINK ============ */
.skip-link {
    position: absolute;
    left: 1rem;
    top: -100%;
    z-index: 200;
    background: var(--ink);
    color: #FBF3E9;
    font: 600 .78rem/1 var(--mono);
    text-transform: uppercase;
    letter-spacing: .14em;
    padding: .85rem 1.1rem;
    text-decoration: none;
    box-shadow: 4px 4px 0 rgba(55, 46, 42, .25);
}
.skip-link:focus { top: 1rem; }

/* ============ RULER + HEADER ============ */
.ruler {
    height: 9px;
    background: repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 9px);
    opacity: .3;
}

header {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem 2rem;
    align-items: baseline;
    justify-content: space-between;
    padding: 1.1rem clamp(1.1rem, 4.5vw, 3rem) .95rem;
    border-bottom: 1px dashed var(--line-strong);
}

.site-title a {
    font: 700 1.2rem var(--display);
    letter-spacing: -.01em;
    color: var(--text-dark);
    text-decoration: none;
}
.site-title a::before {
    content: '';
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ink);
    margin-right: .55rem;
    transform: translateY(-1px);
}
.site-title a:hover { color: var(--ink); }

.nav {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.5rem;
}
.nav a {
    font: 500 .73rem var(--mono);
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--text-body);
    text-decoration: none;
    padding: .35rem .05rem;
    border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--kraft-deep); }
.nav a.active { color: var(--ink); border-bottom-color: var(--ink); }

/* ============ CUT MARKS (restrained margin decoration) ============ */
.cuts { position: relative; }
.cuts::before, .cuts::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border: 0 solid rgba(106, 56, 67, .45);
    pointer-events: none;
}
.cuts::before { top: 14px; left: 4px; border-top-width: 1px; border-left-width: 1px; }
.cuts::after { bottom: 14px; right: 4px; border-bottom-width: 1px; border-right-width: 1px; }
.cuts--light::before, .cuts--light::after { border-color: rgba(234, 220, 194, .45); }

/* ============ SHARED MATERIALS (HQ-23 consolidation) ============
   The recurring physical motifs, each stated once. Component blocks
   below keep only their own geometry/typography. */

/* manila kraft sheet + shadowline */
.hero-image::before,
.card-stack::before,
.tray::before,
.order-stack::before,
.doc-mount::before,
.project-stat,
.index-card,
.case-kicker,
.text-comparison-label {
    background: var(--kraft);
    border: 1px solid var(--kraft-deep);
}

/* bolted machine plate: dark iron face, four bolt heads */
.tech-stack,
.contact-plate {
    border: 1px solid #1F1812;
    box-shadow: 5px 6px 0 rgba(55, 46, 42, .18);
    background-image:
        radial-gradient(circle at 11px 11px, #8A7A5C 0 2.2px, #1F1812 2.6px 3.4px, transparent 3.8px),
        radial-gradient(circle at calc(100% - 11px) 11px, #8A7A5C 0 2.2px, #1F1812 2.6px 3.4px, transparent 3.8px),
        radial-gradient(circle at 11px calc(100% - 11px), #8A7A5C 0 2.2px, #1F1812 2.6px 3.4px, transparent 3.8px),
        radial-gradient(circle at calc(100% - 11px) calc(100% - 11px), #8A7A5C 0 2.2px, #1F1812 2.6px 3.4px, transparent 3.8px),
        linear-gradient(180deg, #3A2E23, #2C231B);
}

/* punched hole */
.index-card::before,
.punch {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--paper);
    box-shadow: inset 0 1px 1px rgba(85, 44, 54, .4), 0 0 0 1.5px rgba(85, 44, 54, .3);
}

/* ink sidebar (credential grammar) */
.hero-credential,
.contact-intro,
.about-hook {
    padding-left: 1.1rem;
    border-left: 3px solid var(--ink);
}

/* stamped CTA chip (link + button variants) */
.stamp-link,
.stamp-btn {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--ink);
    border: 2px solid var(--ink);
    box-shadow: 3px 3px 0 var(--kraft-deep);
}

/* ============ HERO ============ */
.hero {
    display: grid;
    grid-template-areas: 'content' 'photo';
    gap: 3rem;
    padding-block: 2.6rem 3.6rem;
}

.hero-content { grid-area: content; }
.hero-image { grid-area: photo; }

/* the rubber stamp — .hero-label is the homepage h1, .stamp the projects-page
   variant (projects overrides only the bottom margin, in its own section) */
.hero-label,
.stamp {
    display: inline-block;
    --rot: -1.6deg;
    transform: rotate(var(--rot));
    font: 600 .76rem var(--mono);
    text-transform: uppercase;
    letter-spacing: .22em;
    color: var(--ink);
    border: 2px solid currentColor;
    padding: .62rem .85rem .56rem 1.05rem;
    margin: .4rem 0 1.7rem .15rem;
    -webkit-mask-image: var(--ink-mask);
    mask-image: var(--ink-mask);
    -webkit-mask-size: 240px 240px;
    mask-size: 240px 240px;
}

.hero-value-prop {
    font: 800 clamp(2.25rem, 8.4vw, 5.75rem)/1.04 var(--display);
    letter-spacing: -.022em;
    color: var(--text-dark);
    text-wrap: balance;
    max-width: 21ch;
    margin: 0 0 1.7rem;
}
/* a strip of masking tape behind the promise */
.tape-mark {
    background: linear-gradient(184deg, transparent 6%, rgba(201, 179, 131, .5) 8% 90%, transparent 92%);
    padding: 0 .1em;
    white-space: nowrap;              /* keep "cut friction" welded as one taped gesture */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.hero-credential {
    max-width: 54ch;
    font-size: 1.04rem;
    margin: 0 0 2.1rem;
}

/* tech stack as a bolted spec plate */
.tech-stack {
    display: inline-block;
    font: 500 .78rem/1.9 var(--mono);
    letter-spacing: .14em;
    color: #EADCC2;
    padding: 1rem 2.3rem;
    margin: 0;
}
.tech-stack .separator { color: var(--gold); padding: 0 .45em; }

/* portrait, taped to a kraft backing sheet */
.hero-image {
    position: relative;
    --rot: 1.4deg;
    transform: rotate(var(--rot));
    max-width: 340px;
    justify-self: center;
    margin-top: .6rem;
}
.hero-image::before {
    /* kraft sheet pinned behind the print */
    content: '';
    position: absolute;
    inset: 16px -16px -18px 20px;
    transform: rotate(-2.4deg);
    z-index: -1;
}
.hero-image::after {
    /* masking tape */
    content: '';
    position: absolute;
    top: -13px;
    left: 50%;
    width: 118px;
    height: 30px;
    transform: translateX(-50%) rotate(-4deg);
    background: linear-gradient(100deg, rgba(226, 206, 158, .88), rgba(233, 216, 175, .72));
    box-shadow: 0 1px 2px rgba(55, 46, 42, .18);
    clip-path: polygon(2% 0, 98% 5%, 100% 32%, 97% 100%, 3% 95%, 0 58%);
}
.hero-image img {
    display: block;
    width: 100%;
    height: auto;
    border: 10px solid #FFFDF7;
    outline: 1px solid var(--line);
    box-shadow: 12px 14px 0 rgba(55, 46, 42, .14);
}

/* ============ LOGO BOARD ============ */
.logo-bar {
    background: var(--kraft-lite);
    border-top: 1px dashed var(--line-strong);
    border-bottom: 1px dashed var(--line-strong);
    padding-block: 2.4rem 2.8rem;
}

.label {
    font: 600 .72rem var(--mono);
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--ink);
    margin: 0;
}
.logo-bar .label {
    display: flex;
    align-items: center;
    gap: 1.1rem;
}
.logo-bar .label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line-strong);
}

.logo-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.7rem 2.1rem;
    margin-top: 2rem;
}
/* monochrome: the whole row reads as one stamped-ink credentials strip */
.logo-grid img {
    width: auto;
    filter: grayscale(1) contrast(.9) brightness(1.02);
}
/* per-logo optical heights — equal visual mass, not equal bounding box (mobile) */
.logo-grid .logo-netflix { height: 23px; }
.logo-grid .logo-apple   { height: 31px; }
.logo-grid .logo-pbs     { height: 39px; margin-top: 3px; }
.logo-grid .logo-sesame  { height: 41px; }
.logo-grid .logo-nick    { height: 53px; }
.logo-grid .logo-spin    { height: 48px; }
.logo-grid .logo-mo      { height: 48px; }

/* ============ BENCH SECTIONS + PAPER CARDS ============ */
.bench { padding-block: 4.2rem 3.6rem; }
.bench--dark {
    background: linear-gradient(180deg, #342920 0%, #2B211A 60%, #251C15 100%);
    padding-block: 4.6rem 5rem;
}
section[id] { scroll-margin-top: 1.2rem; }
/* the section label as a punched manila tag, overlapping the card */
.label-row { margin: 0; position: relative; z-index: 2; }
.tag {
    display: inline-block;
    --rot: -2.2deg;
    transform: rotate(var(--rot));
    font: 600 .72rem var(--mono);
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--ink-deep);
    background-color: var(--kraft);
    background-image: radial-gradient(circle at 12px 50%, transparent 0 3.2px, rgba(85, 44, 54, .35) 3.6px 4.2px, transparent 4.6px);
    padding: .6rem 1rem .55rem 1.7rem;
    margin: 0 0 -.8rem 1.1rem;
    clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%);
    -webkit-mask-image: radial-gradient(circle at 12px 50%, transparent 0 3.2px, #000 3.8px);
    mask-image: radial-gradient(circle at 12px 50%, transparent 0 3.2px, #000 3.8px);
}
.tag-ix { color: rgba(85, 44, 54, .55); margin-right: .55em; }

.card-stack { position: relative; }
.card-stack::before {
    /* second sheet in the stack */
    content: '';
    position: absolute;
    inset: 16px -10px -14px 14px;
    transform: rotate(.9deg);
}
.stack--tmas { max-width: 960px; margin-left: auto; }
.stack--seq { max-width: 980px; margin-right: auto; }

.paper-card {
    position: relative;
    display: grid;
    gap: 1.8rem;
    background: var(--paper-bright);
    border: 1px solid var(--line-strong);
    box-shadow: 10px 12px 0 rgba(55, 46, 42, .10);
    padding: 1.7rem 1.3rem 2rem;
    transform: rotate(var(--rot, 0deg));
    transition: transform .3s ease, box-shadow .3s ease;
}
.paper-card:hover {
    transform: translateY(-2px) rotate(var(--rot, 0deg));
    box-shadow: 12px 16px 0 rgba(55, 46, 42, .14);
    transition: transform .22s ease, box-shadow .22s ease;
}
.card--tmas { --rot: -.5deg; }
.card--seq { --rot: .55deg; }
.bench--dark .paper-card { box-shadow: 10px 12px 0 rgba(0, 0, 0, .35); }
.bench--dark .paper-card:hover { box-shadow: 12px 16px 0 rgba(0, 0, 0, .42); }

.paper-card h3 {
    font: 700 clamp(1.55rem, 3vw, 2.05rem)/1.12 var(--display);
    letter-spacing: -.015em;
    color: var(--text-dark);
    margin: 0 0 .9rem;
}
.paper-card h3::before {
    content: '';
    display: block;
    width: 34px;
    height: 4px;
    background: var(--ink);
    margin-bottom: .95rem;
}
.project-description {
    max-width: 46ch;
    margin: 0 0 1.5rem;
    font-size: 1.02rem;
}

/* stamped-button link (the chip stays compact; a transparent halo keeps
   the tap target ≥48px tall — deferred from HQ-17) */
.stamp-link {
    position: relative;
    font: 600 .74rem var(--mono);
    text-decoration: none;
    padding: .62rem .95rem .58rem;
}
.stamp-link::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 48px;
    transform: translateY(-50%);
}
.stamp-link::after, .stamp-btn::after { content: ' →' / ''; }
.stamp-link:hover, .stamp-btn:hover { background: var(--ink); color: #FBF3E9; box-shadow: 4px 4px 0 var(--kraft-deep); }
.stamp-link:active, .stamp-btn:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--kraft-deep); }

/* TMAS illustration on a manila mat */
.card-visual--svg {
    --rot: .8deg;
    transform: rotate(var(--rot));
    background: #F1E8D2;
    border: 1px solid var(--kraft-deep);
    padding: 1.1rem;
    align-self: center;
}
.card-visual--svg img, .card-visual--svg svg { display: block; width: 100%; height: auto; }

/* the 5→1 stat as a die-cut kraft strip */
.project-stat {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: .65rem 1.3rem .85rem;
    margin: .2rem 0 1.9rem;
    transform: rotate(-.8deg);
    box-shadow: 4px 5px 0 rgba(55, 46, 42, .14);
}
.stat-number {
    font: 800 clamp(2.15rem, 8.4vw, 4.1rem)/1 var(--display);
    letter-spacing: -.02em;
    color: var(--ink);
    text-shadow: 3px 3px 0 rgba(252, 248, 239, .85), 4px 4px 0 rgba(85, 44, 54, .28);
}
.stat-arrow {
    font: 600 1.5rem var(--mono);
    color: var(--ink-deep);
}

/* demo screenshot as a mounted print with photo corners */
.mount {
    position: relative;
    --rot: 1.5deg;
    transform: rotate(var(--rot));
    background: #FFFDF7;
    padding: 12px;
    border: 1px solid var(--line);
    box-shadow: 9px 10px 0 rgba(0, 0, 0, .28);
    align-self: start;
}
.mount a { display: block; }
.mount img { display: block; width: 100%; height: auto; }
.pc {
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--kraft);
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .18));
    pointer-events: none;
}
.pc--tl { top: 7px; left: 7px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.pc--tr { top: 7px; right: 7px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.pc--bl { bottom: 7px; left: 7px; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.pc--br { bottom: 7px; right: 7px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }

/* =====================================================================
   PROJECTS PAGE — the workshop's catalog (HQ-16)
   The page as an indexed record of what got built: stamped h1 + kraft
   index card up top; the current project taped to the bench; case files
   on one kraft tray; the writing credits typeset as a formal broadside —
   the one square, unrotated document in the room.
   ===================================================================== */

/* -- work header: stamp + intro + index card -- */
/* .stamp's stamp treatment is shared with .hero-label (hero section);
   per-page margins/scale live under each page's body class */
.projects .stamp { margin-bottom: 1.6rem; }

.work-header { display: grid; }
.projects .work-header {
    gap: 2.4rem;
    padding-block: 2.6rem 3.2rem;
}

.work-intro {
    letter-spacing: -.022em;
    color: var(--text-dark);
    text-wrap: balance;
    margin: 0;
}
.projects .work-intro {
    font: 750 clamp(1.9rem, 5.2vw, 3.8rem)/1.08 var(--display);
    max-width: 17ch;
}

/* the catalog's index card: punched kraft, mono contents list */
.index-card {
    justify-self: start;
    align-self: end;
    --rot: 1.6deg;
    transform: rotate(var(--rot));
    position: relative;
    box-shadow: 6px 7px 0 rgba(55, 46, 42, .14);
    padding: 1.15rem 1.5rem 1.2rem 1.35rem;
    min-width: 240px;
}
.index-card::before {
    /* punched hole, tied with nothing — an index card waiting for its ring */
    content: '';
    top: 12px;
    right: 12px;
}
.index-card ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .35rem;
}
.index-card a {
    display: flex;
    align-items: baseline;
    gap: .8rem;
    font: 500 .74rem var(--mono);
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--ink-deep);
    text-decoration: none;
    padding: .18rem 0;
}
.index-card a .ix {
    font-weight: 600;
    color: rgba(85, 44, 54, .55);
}
.index-card a:hover { color: var(--ink); }
.index-card a:hover .ix { color: var(--ink); }

/* card index number — pencilled in the corner of the sheet */
.card-ix {
    position: absolute;
    top: .85rem;
    right: 1.05rem;
    font: 500 .68rem var(--mono);
    letter-spacing: .14em;
    color: rgba(55, 46, 42, .38);
}

/* masking tape across the current project — still on the bench */
.tape {
    position: absolute;
    top: -15px;
    left: 7%;
    width: 128px;
    height: 32px;
    transform: rotate(-4.2deg);
    background: linear-gradient(100deg, rgba(219, 195, 138, .95), rgba(228, 208, 160, .8));
    box-shadow: 0 2px 3px rgba(55, 46, 42, .22);
    clip-path: polygon(2% 0, 98% 5%, 100% 32%, 97% 100%, 3% 95%, 0 58%);
    pointer-events: none;
    z-index: 2;
}

/* -- catalog tray: three case files on one kraft sheet -- */
.tray { position: relative; }
.tray::before {
    content: '';
    position: absolute;
    inset: 18px -12px -16px 12px;
    transform: rotate(.5deg);
}
.catalog-row {
    position: relative;
    display: grid;
    gap: 1.6rem;
}
.catalog-row .paper-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 1.35rem 1.25rem 1.6rem;
}
.catalog-row .card-visual--svg,
.catalog-row .mount { margin-bottom: 1.35rem; }
.catalog-row .stamp-link { margin-top: auto; align-self: flex-start; }
.card--nde { --rot: -.45deg; }
.card--file-seq { --rot: .4deg; }   /* catalog file card — .card--seq is the homepage's 2-col grid card */
.card--cv { --rot: -.3deg; }

/* -- interactive sample: soro wide card -- */
.stack--soro { max-width: 960px; margin-left: auto; }
.card--soro { --rot: .55deg; }

/* -- writing credits: the typeset broadside -- */
/* the one square, unrotated document in the room */
.broadside {
    position: relative;
    max-width: 58rem;
    margin-inline: auto;
    background: var(--paper-bright);
    border: 1px solid var(--line-strong);
    box-shadow: 12px 14px 0 rgba(0, 0, 0, .32);
    padding: clamp(1.7rem, 5vw, 3.4rem) clamp(1.2rem, 5.5vw, 3.8rem) clamp(2rem, 5vw, 3.6rem);
}
/* printer's crop marks in the corners */
.broadside::before, .broadside::after {
    content: '';
    position: absolute;
    width: 13px;
    height: 13px;
    border: 0 solid rgba(106, 56, 67, .5);
}
.broadside::before { top: 11px; left: 11px; border-top-width: 1px; border-left-width: 1px; }
.broadside::after { bottom: 11px; right: 11px; border-bottom-width: 1px; border-right-width: 1px; }

.credits-group + .credits-group { margin-top: 2.7rem; }

.credits-group-label {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    font: 600 .72rem var(--mono);
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--ink);
    margin: 0 0 1.35rem;
}
.credits-group-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line-strong);
}

.credit-list { list-style: none; margin: 0; padding: 0; }
.credit-item {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    padding: .42rem 0;
}
.credit-title {
    font: 600 clamp(1.08rem, 1.7vw, 1.3rem)/1.25 var(--display);
    letter-spacing: -.01em;
    color: var(--text-dark);
}
.credit-item .leader {
    flex: 1;
    min-width: 1.6rem;
    border-bottom: 2px dotted rgba(55, 46, 42, .35);
    align-self: flex-end;
    margin-bottom: .42em;
}
.credit-meta {
    font: 500 .7rem var(--mono);
    text-transform: uppercase;
    letter-spacing: .13em;
    color: var(--ink-deep);
    text-align: right;
    max-width: 44%;
}

/* -- projects-page scale: the catalog sets its specimens smaller than the
      homepage's showpieces; scoped to body.projects so the homepage
      doesn't move -- */
.projects .bench { padding-block: 3.9rem 3.6rem; }
.projects .bench--dark { padding-block: 4.4rem 4.8rem; }

.projects .paper-card h3 {
    font: 700 clamp(1.4rem, 2.6vw, 1.8rem)/1.12 var(--display);
    margin: 0 0 .85rem;
}
.projects .paper-card h3::before { margin-bottom: .9rem; }
.projects .project-description { margin: 0 0 1.4rem; font-size: 1rem; }

.projects .project-stat {
    flex-wrap: wrap;    /* holds by <1px at 150% text-zoom — let it break instead of clip */
    gap: .7rem;
    padding: .5rem 1rem .6rem;
    margin: 0 0 1.5rem;
    box-shadow: 3px 4px 0 rgba(55, 46, 42, .14);
}
.projects .stat-number {
    font: 800 clamp(1.25rem, 2vw, 1.6rem)/1 var(--display);
    letter-spacing: -.01em;
    text-shadow: none;    /* the homepage giant carries a paper-offset shadow */
    white-space: nowrap;
}
.projects .stat-arrow { font: 600 1rem var(--mono); }

.projects .mount {
    --rot: 1.2deg;
    padding: 10px;
    box-shadow: 7px 8px 0 rgba(0, 0, 0, .22);
}
.projects .bench--dark .mount { box-shadow: 7px 8px 0 rgba(0, 0, 0, .3); }
.projects .pc { width: 18px; height: 18px; }
.projects .pc--tl { top: 6px; left: 6px; }
.projects .pc--tr { top: 6px; right: 6px; }
.projects .pc--bl { bottom: 6px; left: 6px; }
.projects .pc--br { bottom: 6px; right: 6px; }

/* the homepage sets margin-left: auto — zero it or the card centers */
.projects .stack--tmas { max-width: 980px; margin-left: 0; margin-right: auto; }

/* =====================================================================
   CONTACT PAGE — the workshop's counter (HQ-17)
   You've seen the work; now you leave a work order. One bright bench
   scene: the maker's photo as a mounted print, contact methods on a
   bolted machine plate (the one square, fixed thing in a room where
   every sheet of paper leans), and the form as an order slip taped
   over its kraft carbon copy — writing-line fields, a ruled message
   pad, and a stamp to press.
   ===================================================================== */

/* -- work header: contact runs its stamp+headline tighter and bigger -- */
.contact .stamp { margin-bottom: .6rem; }
.contact .work-header {
    gap: 1rem;
    padding-block: 2.4rem 1.6rem;
}
.contact .work-intro { font: 750 clamp(2.2rem, 7.4vw, 4.8rem)/1.06 var(--display); }

/* -- the desk: one scene — maker left, order slip right on desktop -- */
.bench--desk { padding-block: 1.6rem 4.4rem; }

.desk {
    display: grid;
    gap: 3.4rem;
    align-items: start;
}

.maker { display: grid; gap: 1.9rem; justify-items: start; }

/* contact's mounted print: paper-offset shadow, capped width */
.contact .mount {
    --rot: 1.4deg;
    box-shadow: 9px 10px 0 rgba(55, 46, 42, .16);
    max-width: 400px;
    margin-top: .4rem;
}

/* the "open to" line carries the ink sidebar (credential grammar) */
.contact-intro {
    max-width: 42ch;
    font-size: 1.04rem;
    margin: 0;
}

/* contact methods: the bolted machine plate — everything paper leans;
   this doesn't */
.contact-plate {
    display: grid;
    margin: .3rem 0 0;
    padding: 1.1rem 1.9rem;
}
.contact-method {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .62rem .2rem;
}
.contact-method + .contact-method {
    border-top: 1px solid rgba(234, 220, 194, .16);
}
.contact-method svg {
    width: 17px;
    height: 17px;
    flex: none;
    color: var(--gold);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}
.contact-method svg.icon-fill { fill: currentColor; stroke: none; }
.contact-method a {
    font: 500 .8rem var(--mono);
    letter-spacing: .1em;
    color: #EADCC2;
    text-decoration: none;
}
.contact-method a:hover { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

/* -- the work order: paper slip taped over its kraft carbon copy -- */
.order-stack { position: relative; }
.order-stack::before {
    content: '';
    position: absolute;
    inset: 16px -12px -14px 14px;
    transform: rotate(.8deg);
}

/* the projects tape sits at 7%; the slip's tape a hair further in */
.contact .tape { left: 9%; }

.order-card {
    position: relative;
    --rot: -.4deg;
    transform: rotate(var(--rot));
    background: var(--paper-bright);
    border: 1px solid var(--line-strong);
    box-shadow: 10px 12px 0 rgba(55, 46, 42, .10);
    padding: 1.9rem 1.4rem 2.1rem;
    margin: 0;
}

/* punched hole in the slip's corner (echoes the projects index card) */
.punch {
    top: 13px;
    right: 13px;
}

/* honeypot stays in the DOM, never on the bench */
.honeypot {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    margin: 0;
}

/* fields: mono caps labels over writing lines */
.form-row { display: grid; gap: 1.5rem; }
.form-group { display: grid; gap: .3rem; align-content: start; }
/* vertical rhythm only between the card's stacked rows — not the in-row halves */
.order-card > .form-group + .form-group,
.order-card > .form-row + .form-group,
.order-card > .form-group + .form-row { margin-top: 1.5rem; }

.form-group label {
    font: 600 .7rem var(--mono);
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--ink-deep);
}
.form-group label span {
    text-transform: none;
    letter-spacing: .04em;
    font-weight: 500;
    color: rgba(55, 46, 42, .48);
}

.form-group input,
.form-group textarea {
    width: 100%;
    font: 500 1.02rem/1.5 var(--body);
    color: var(--text-dark);
    background: transparent;
    border: 0;
    border-bottom: 2px solid var(--line-strong);
    border-radius: 0;
    padding: .42rem .1rem .4rem;
}
.form-group input:focus-visible,
.form-group textarea:focus-visible {
    outline: none;
    border-bottom-color: var(--ink);
    box-shadow: 0 2px 0 0 var(--ink);
    background: linear-gradient(180deg, transparent 72%, rgba(201, 179, 131, .16));
}

/* the message pad: ruled lines that scroll with the writing */
.form-group textarea {
    resize: vertical;
    min-height: 9.5em;
    line-height: 1.9;
    padding-top: .3rem;
    background-image: repeating-linear-gradient(180deg,
        transparent 0 calc(1.9em - 1px),
        var(--line) calc(1.9em - 1px) 1.9em);
    background-attachment: local;
}

/* send = press the stamp; min-height keeps the tap target honest (the old
   page enforced 48px — the one interactive element the form exists for) */
.stamp-btn {
    cursor: pointer;
    min-height: 48px;
    margin-top: 1.9rem;
    font: 600 .78rem var(--mono);
    background: transparent;
    padding: .72rem 1.15rem .66rem;
}

/* =====================================================================
   404 — MISFILED (HQ-18)
   The stamp slipped: a giant double-struck "404" — one crisp impression,
   one faint ghost where the hand moved. A manila tag names the mishap,
   and the projects index card returns as the map of shelves that DO
   exist. Light and characterful; the route home is never in doubt.
   ===================================================================== */

/* short page: keep the footer on the floor */
.notfound { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.notfound main { flex: 1; display: grid; align-items: center; }

.misfile {
    display: grid;
    gap: 2.4rem;
    padding-block: 2.6rem 4rem;
}

/* the double strike */
.strike {
    position: relative;
    margin: 0;
    font: 800 clamp(6.5rem, 30vw, 14rem)/.9 var(--display);
    letter-spacing: -.04em;
    justify-self: start;
}
.strike span {
    display: inline-block;
    color: var(--ink);
    -webkit-mask-image: var(--ink-mask);
    mask-image: var(--ink-mask);
    -webkit-mask-size: 240px 240px;
    mask-size: 240px 240px;
}
.strike-face { position: relative; transform: rotate(-2deg); }
.strike-ghost {
    position: absolute;
    top: .07em;
    left: .09em;
    transform: rotate(1.8deg);
    opacity: .16;
}

/* the note beside it */
.notfound .tag { margin: 0 0 1.3rem; }
.notfound .work-intro {
    font: 750 clamp(1.9rem, 6.4vw, 3.4rem)/1.08 var(--display);
    max-width: 16ch;
    margin: 0 0 1.1rem;
}
.misfile-copy {
    max-width: 44ch;
    font-size: 1.04rem;
    margin: 0 0 2rem;
}
.notfound .index-card { margin-top: 2.6rem; }

/* =====================================================================
   CASE FILES (HQ-19) — sequence-expert.html + cv-debugging.html
   Opening a case study means pulling its job file off the projects
   tray: a kraft kicker strip, evidence prints mounted with photo
   corners, testimonials as taped slips, story beats stamped in ink,
   and the technical teardown on the dark bench. The red pen on the
   evidence (scribbles, Caveat labels) is diegetic — a marker in the
   shop's hand — and deliberately stays red.
   ===================================================================== */

/* -- file header: back slip, kicker strip, headline, spec line -- */
.back-link {
    display: inline-block;
    font: 500 .73rem var(--mono);
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--ink-deep);
    text-decoration: none;
    margin: 1.4rem 0 0;
    padding: .3rem 0;
    border-bottom: 2px solid transparent;
}
.back-link:hover { color: var(--ink); border-bottom-color: var(--kraft-deep); }

.case-header {
    display: grid;
    justify-items: start;
    gap: 1.1rem;
    padding-block: 1.6rem 2.4rem;
}
.case-kicker {
    display: inline-block;
    --rot: -1.2deg;
    transform: rotate(var(--rot));
    font: 700 clamp(1.05rem, 2.4vw, 1.45rem)/1.1 var(--display);
    letter-spacing: -.01em;
    color: var(--ink);
    box-shadow: 4px 5px 0 rgba(55, 46, 42, .14);
    padding: .55rem 1.05rem .6rem;
    margin: .4rem 0 0;
}
.case-kicker .arrow { color: var(--ink-deep); padding: 0 .18em; }
.case .work-intro { font: 750 clamp(2rem, 5.5vw, 3.6rem)/1.08 var(--display); max-width: 20ch; }
.case-dek {
    max-width: 52ch;
    font-size: 1.06rem;
    margin: 0;
}
.case-spec {
    font: 500 .73rem var(--mono);
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--ink-deep);
    margin: .2rem 0 0;
    padding: .45rem .8rem;
    border: 1px dashed var(--line-strong);
}
.case-spec strong { font-weight: 600; color: var(--ink); }

/* -- prose spine -- */
.case-body { max-width: 46rem; margin-inline: auto; }
.case-body > p { max-width: 62ch; }
.case-body a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--kraft-deep);
    text-underline-offset: 3px;
}
.case-body a:hover { text-decoration-color: var(--ink); }
.case h2 {
    font: 700 clamp(1.5rem, 3vw, 2.05rem)/1.12 var(--display);
    letter-spacing: -.015em;
    color: var(--text-dark);
    margin: 0 0 1.2rem;
}
.case h2::before {
    content: '';
    display: block;
    width: 34px;
    height: 4px;
    background: var(--ink);
    margin-bottom: .95rem;
}
.section-divider {
    height: 0;
    border-top: 1px dashed var(--line-strong);
    margin: 3.2rem 0;
}

/* -- testimonial: a note taped to the bench -- */
.testimonial {
    position: relative;
    --rot: -.5deg;
    transform: rotate(var(--rot));
    background: var(--paper-bright);
    border: 1px solid var(--line-strong);
    box-shadow: 8px 9px 0 rgba(55, 46, 42, .1);
    padding: 1.9rem 1.6rem 1.5rem;
    margin: 2.6rem 0;
}
.testimonial::before {
    /* masking tape holding the note */
    content: '';
    position: absolute;
    top: -14px;
    left: 8%;
    width: 118px;
    height: 30px;
    transform: rotate(-3.6deg);
    background: linear-gradient(100deg, rgba(219, 195, 138, .95), rgba(228, 208, 160, .8));
    box-shadow: 0 2px 3px rgba(55, 46, 42, .22);
    clip-path: polygon(2% 0, 98% 5%, 100% 32%, 97% 100%, 3% 95%, 0 58%);
}
.testimonial blockquote {
    margin: 0 0 1.1rem;
    font-size: 1.06rem;
    font-style: italic;
    color: var(--text-dark);
}
.testimonial cite {
    display: block;
    font: 500 .72rem var(--mono);
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--ink-deep);
}
.testimonial cite .name { font-weight: 600; color: var(--ink); }

/* -- narrative beats -- */
.scene-setter {
    font-size: 1.13rem;
    font-style: italic;
    color: var(--text-dark);
    max-width: 54ch;
    padding-left: 1.1rem;
    border-left: 3px solid var(--kraft-deep);
}
.story-beat {
    --rot: -1deg;
    transform: rotate(var(--rot));
    font: 750 clamp(1.3rem, 2.6vw, 1.7rem)/1.2 var(--display);
    color: var(--ink);
    text-align: center;
    margin: 2.2rem 0;
    -webkit-mask-image: var(--ink-mask);
    mask-image: var(--ink-mask);
    -webkit-mask-size: 240px 240px;
    mask-size: 240px 240px;
}

/* -- tickets: the job travels with its tag -- */
.ticket-section { margin-block: 3rem; }
.ticket-section h2 .ticket-label {
    display: inline-block;
    --rot: -2deg;
    transform: rotate(var(--rot));
    font: 600 .72rem var(--mono);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-deep);
    background-color: var(--kraft);
    background-image: radial-gradient(circle at 12px 50%, transparent 0 3.2px, rgba(85, 44, 54, .35) 3.6px 4.2px, transparent 4.6px);
    padding: .6rem 1rem .55rem 1.7rem;
    margin: 0 0 1.05rem;
    clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%);
    -webkit-mask-image: radial-gradient(circle at 12px 50%, transparent 0 3.2px, #000 3.8px);
    mask-image: radial-gradient(circle at 12px 50%, transparent 0 3.2px, #000 3.8px);
}
.ticket-section h2 { display: grid; justify-items: start; }

/* -- evidence: figures, mounted prints, red-pen annotations -- */
.system-diagram {
    margin: 2.4rem auto;
    text-align: center;
}
.system-diagram > svg { max-width: 640px; width: 100%; height: auto; }
.system-diagram > img {
    display: block;
    margin-inline: auto;
    background: #FFFDF7;
    padding: 10px;
    border: 1px solid var(--line);
    box-shadow: 8px 9px 0 rgba(55, 46, 42, .14);
    transform: rotate(.6deg);
}
.diagram-caption {
    font: 500 .72rem var(--mono);
    letter-spacing: .08em;
    color: var(--ink-deep);
    max-width: 52ch;
    margin: 1.1rem auto 0;
}

/* the print mat is a BORDER, not padding: the red-pen overlays position
   by % of the image box, and borders stay outside that coordinate space */
.annotated-image {
    position: relative;
    display: block;
    margin-inline: auto;
    max-width: 720px;
    border: 10px solid #FFFDF7;
    outline: 1px solid var(--line);
    box-shadow: 8px 9px 0 rgba(55, 46, 42, .14);
    transform: rotate(-.5deg);
}
.annotated-image img { display: block; width: 100%; height: auto; }
.annotated-image--portrait { max-width: 400px; }
.annotation-scribble {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.annotation-label {
    position: absolute;
    font: 700 clamp(1.05rem, 2vw, 1.3rem)/1.15 'Caveat', cursive;
    color: #b91c1c;
    transform: rotate(-2deg);
    text-shadow: 0 0 6px rgba(255, 253, 247, .9);
    max-width: 200px;
}

.text-comparison {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    align-items: start;
}
.text-comparison-item { position: relative; }
/* comparison crops stay frameless — same overlay-alignment constraint */
.text-comparison-item img {
    display: block;
    width: 100%;
    height: auto;
    outline: 1px solid var(--line);
    box-shadow: 6px 7px 0 rgba(55, 46, 42, .12);
}
.text-comparison-item:first-child { transform: rotate(-.7deg); }
.text-comparison-item:last-child { transform: rotate(.6deg); }
.text-comparison-label {
    display: inline-block;
    font: 600 .68rem var(--mono);
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--ink-deep);
    padding: .3rem .6rem;
    margin-top: .6rem;
}

.inline-code {
    font: 500 .85em var(--mono);
    color: var(--ink);
    background: var(--kraft-lite);
    border: 1px solid var(--kraft-deep);
    padding: .08em .35em;
}

/* -- friction: what the hunt cost, on one kraft slip -- */
.friction-list {
    background: var(--kraft-lite);
    border: 1px dashed var(--line-strong);
    padding: 1.4rem 1.5rem 1.5rem;
    margin: 2.4rem 0;
}
.friction-list .label { margin-bottom: .9rem; }
.friction-item {
    padding: .5rem 0;
    max-width: 60ch;
}
.friction-item + .friction-item { border-top: 1px solid var(--line); }
.friction-item .role-name {
    font: 600 .72rem var(--mono);
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--ink);
    margin-right: .35rem;
}

/* -- the solution: one taped headline -- */
.solution-hero {
    text-align: center;
    border: 1px solid var(--line-strong);
    background: var(--paper-bright);
    box-shadow: 8px 9px 0 rgba(55, 46, 42, .1);
    transform: rotate(-.4deg);
    padding: 2.1rem 1.4rem 1.8rem;
    margin: 2rem 0 2.4rem;
}
.solution-hero h3 {
    font: 750 clamp(1.7rem, 4vw, 2.5rem)/1.1 var(--display);
    color: var(--ink);
    margin: 0 0 .5rem;
}
.solution-hero p {
    font: 500 .78rem var(--mono);
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--ink-deep);
    margin: 0;
}

/* -- demo: the working tool as a mounted print -- */
.demo-card { margin: 2.4rem 0; }
.demo-card .label { margin-bottom: 1rem; }
.demo-video-wrapper {
    position: relative;
    background: #FFFDF7;
    padding: 10px;
    border: 1px solid var(--line);
    box-shadow: 9px 10px 0 rgba(55, 46, 42, .16);
    transform: rotate(.5deg);
}
.demo-video { display: block; width: 100%; height: auto; }
.demo-sound-badge {
    position: absolute;
    top: 22px;
    right: 22px;
    font: 600 .7rem var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #FBF3E9;
    background: var(--ink);
    padding: .45rem .7rem;
    box-shadow: 2px 2px 0 rgba(55, 46, 42, .3);
}
.demo-sound-badge.hidden { display: none; }
.demo-caption {
    font-size: .95rem;
    color: var(--text-body);
    margin: 1.1rem 0 0;
}
.video-transcript { margin-top: 1rem; }
.video-transcript summary {
    cursor: pointer;
    font: 600 .72rem var(--mono);
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--ink);
}
.video-transcript p {
    font-size: .95rem;
    margin: .8rem 0 0;
    padding-left: 1.1rem;
    border-left: 3px solid var(--kraft-deep);
}

/* -- under the hood: the dark bench teardown -- */
.case .bench--dark { padding-block: 3.6rem 4rem; margin-top: 3rem; }
.case .bench--dark h2 { color: #F3E8D9; }
.case .bench--dark h2::before { background: var(--gold); }
/* the h2 stamp bar is ink-dark: give it clearance after a dark bench so it
   reads as the heading's mark, not debris off the bench above (HQ-19 verdict) */
.case .bench--dark + .case-body { padding-top: 3rem; }
.case .bench--dark p { color: #D9CDB9; max-width: 62ch; }
.case .bench--dark p strong { color: #F3E8D9; }
.label--gold { color: var(--gold); }
.case .bench--dark .label {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-bottom: .6rem;
}
.case .bench--dark .label::after { content: ''; flex: 1; height: 1px; background: rgba(234, 220, 194, .25); }

.pipeline-header {
    font: 700 1.1rem var(--display);
    color: #F3E8D9;
    text-align: center;
    margin: 2.2rem 0 1rem;
}
.pipeline-flow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .9rem;
    margin-bottom: 1rem;
}
.pipeline-step {
    display: grid;
    justify-items: center;
    gap: .15rem;
    background: var(--paper-bright);
    border: 1px solid var(--line-strong);
    box-shadow: 5px 6px 0 rgba(0, 0, 0, .32);
    padding: .8rem .75rem .7rem;
}
.pipeline-step:nth-child(odd) { transform: rotate(-.8deg); }
.pipeline-step:nth-child(3) { transform: rotate(.7deg); }
.pipeline-step:nth-child(7) { transform: rotate(-.5deg); }
.pipeline-step .icon svg { width: 22px; height: 22px; color: var(--ink); }
.pipeline-step .name {
    font: 700 .95rem var(--display);
    color: var(--text-dark);
}
.pipeline-step .desc {
    font: 500 .6rem var(--mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-deep);
}
.pipeline-arrow { font: 600 1.2rem var(--mono); color: var(--gold); }
.pipeline-caption {
    font: 500 .72rem var(--mono);
    letter-spacing: .08em;
    color: rgba(234, 220, 194, .75) !important;
    text-align: center;
    margin: 0 auto 1.6rem;
}

.code-block {
    background: linear-gradient(180deg, #3A2E23, #2C231B);
    border: 1px solid #1F1812;
    box-shadow: 5px 6px 0 rgba(0, 0, 0, .35);
    padding: 1.4rem 1.5rem 1.2rem;
    margin: 2rem 0;
    overflow-x: auto;
}
.code-block .label { margin-bottom: 1rem; }
.code-content {
    display: block;
    font: 400 .78rem/1.7 var(--mono);
    color: #E8DCC6;
    white-space: pre;
}
.code-keyword { color: var(--gold); }
.code-function { color: #F3E8D9; font-weight: 600; }
.code-const { color: #EADCC2; }
.code-string { color: #C9B383; }
.code-comment { color: rgba(234, 220, 194, .45); }
.code-note {
    font: 500 .68rem var(--mono);
    letter-spacing: .08em;
    color: rgba(234, 220, 194, .6) !important;
    margin: .9rem 0 0;
}

/* -- impact: three stamped tallies -- */
.impact-grid {
    display: grid;
    gap: 1.4rem;
    margin: 2rem 0;
}
.impact-card {
    background: var(--paper-bright);
    border: 1px solid var(--line-strong);
    box-shadow: 7px 8px 0 rgba(55, 46, 42, .1);
    padding: 1.5rem 1.3rem 1.4rem;
    text-align: center;
}
.impact-card:nth-child(1) { transform: rotate(-.6deg); }
.impact-card:nth-child(2) { transform: rotate(.5deg); }
.impact-card:nth-child(3) { transform: rotate(-.4deg); }
.impact-number {
    font: 800 clamp(1.9rem, 4vw, 2.6rem)/1 var(--display);
    letter-spacing: -.02em;
    color: var(--ink);
    -webkit-mask-image: var(--ink-mask);
    mask-image: var(--ink-mask);
    -webkit-mask-size: 240px 240px;
    mask-size: 240px 240px;
    margin-bottom: .55rem;
}
.impact-label {
    font: 600 .72rem var(--mono);
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--ink-deep);
    margin-bottom: .45rem;
}
.impact-desc { font-size: .92rem; color: var(--text-body); }

/* -- closing margin note -- */
.closing-reflection {
    background: var(--kraft-lite);
    border: 1px dashed var(--line-strong);
    padding: 1.3rem 1.5rem;
    margin: 2.6rem 0 1rem;
    max-width: 60ch;
}
.closing-reflection .label { display: block; margin-bottom: .5rem; }

/* -- THE EASTER EGG HUNT: the ORIGINAL diagram, restored verbatim as a
      period artifact (HQ-19 verdict). It keeps its own legacy palette —
      the scoped tokens below plus the literal window-chrome/syntax hexes
      inside the block are all part of the frozen artifact; don't retune
      them with the shop. One deviation from verbatim: the stack
      breakpoint was raised 600→700px (radial collides at ≤620, measured
      hub×repeat and xml×thought overlaps; clean from 700 up). -- */
.old-way-diagram {
    --cream: #FDFCFA;
    --gold: #BFA265;
    --maroon: #6A3843;
    --text-dark: #3D3335;
    --code-bg: #1e1e1e;
    --gray-ui: #e8e8e8;
    --gray-ui-dark: #d8d8d8;
    --highlight-yellow: #fff3cd;
    --highlight-border: #ffc107;
    --system-red: #ff5f56;
    --system-yellow: #ffbd2e;
    --system-green: #27ca3f;
}
.old-way-diagram {
    background: var(--cream);
    padding: 2rem 1rem;
    margin: 2rem 0;
    text-align: center;
}

.old-way-diagram .label {
    margin-bottom: 0.5rem;
}

.old-way-diagram h3 {
    font-family: 'Fraunces', serif;
    color: var(--maroon);
    font-size: 2rem;
    margin-bottom: 1rem;
}

/* Radial Container */
.old-way-radial {
    position: relative;
    width: 100%;
    max-width: 800px;
    height: 650px;
    margin: 1rem auto;
}

/* Dashed gold orbit circle */
.old-way-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 520px;
    height: 520px;
    border: 3px dashed var(--gold);
    border-radius: 50%;
    z-index: 1;
    opacity: 0.7;
}

/* Center Hub */
.old-way-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: 180px;
    background: var(--maroon);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    z-index: 10;
    box-shadow: 0 15px 50px rgba(106, 56, 67, 0.4);
}

.old-way-hub .question {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.3;
    padding: 0 12px;
}

/* Thought Bubbles */
.old-way-thought {
    position: absolute;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(191, 162, 101, 0.3);
    border-radius: 50% 40% 45% 35% / 35% 45% 40% 50%;
    padding: 12px 16px;
    font-size: 12px;
    font-style: italic;
    max-width: 150px;
    z-index: 15;
    box-shadow: 0 4px 20px rgba(106, 56, 67, 0.12);
    color: var(--maroon);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.old-way-thought--1 {
    top: 145px;
    left: 260px;
    transform: rotate(-2.5deg);
}

.old-way-thought--2 {
    top: 295px;
    right: -40px;
    transform: rotate(2deg);
}

.old-way-thought--3 {
    bottom: 15px;
    right: 5px;
    transform: rotate(-2deg);
    max-width: 170px;
}

.old-way-thought--4 {
    bottom: -55px;
    left: 250px;
    transform: rotate(0.5deg);
}

.old-way-thought--5 {
    bottom: 65px;
    left: -50px;
    transform: rotate(-3deg);
    max-width: 175px;
}

/* App Node Windows */
.old-way-node {
    position: absolute;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    z-index: 5;
}

.old-way-node__header {
    background: linear-gradient(180deg, var(--gray-ui) 0%, var(--gray-ui-dark) 100%);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid #c0c0c0;
    border-radius: 12px 12px 0 0;
}

.old-way-node__header--dark {
    background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%);
    border-bottom-color: #222;
}

.old-way-node__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.old-way-node__dot--red {
    background: var(--system-red);
}

.old-way-node__dot--yellow {
    background: var(--system-yellow);
}

.old-way-node__dot--green {
    background: var(--system-green);
}

.old-way-node__title {
    flex: 1;
    font-size: 10px;
    color: #555;
    font-weight: 500;
}

.old-way-node__header--dark .old-way-node__title {
    color: #aaa;
}

.old-way-node__content {
    padding: 10px;
    font-size: 10px;
}

.old-way-node__badge {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 28px;
    height: 28px;
    background: var(--gold);
    color: var(--text-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    z-index: 20;
}

/* Node 1: Script */
.old-way-node--script {
    width: 160px;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
}

.old-way-node--script .old-way-node__content {
    font-family: 'Times New Roman', serif;
    line-height: 1.5;
    text-align: left;
}

.old-way-highlight {
    background: var(--highlight-yellow);
    padding: 1px 4px;
    border: 1px solid var(--highlight-border);
    font-weight: 600;
}

/* Node 2: XML */
.old-way-node--xml {
    width: 200px;
    top: 150px;
    right: -25px;
}

.old-way-node--xml .old-way-node__content {
    background: var(--code-bg);
    color: #d4d4d4;
    font-family: 'Monaco', 'Consolas', monospace;
    font-size: 9px;
    line-height: 1.4;
    text-align: left;
}

.old-way-xml-tag {
    color: #569cd6;
}

.old-way-xml-attr {
    color: #9cdcfe;
}

.old-way-xml-string {
    color: #ce9178;
}

.old-way-xml-id {
    background: var(--highlight-border);
    color: #000;
    padding: 0 3px;
    font-weight: bold;
}

.old-way-xml-comment {
    color: #6a9955;
    font-style: italic;
}

/* Node 3: Manifest */
.old-way-node--manifest {
    width: 260px;
    bottom: 90px;
    right: -40px;
    text-align: left;
}

.old-way-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 9px;
}

.old-way-table th {
    background: #f0f0f0;
    padding: 4px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.old-way-table td {
    padding: 4px;
    border-bottom: 1px solid #eee;
}

.old-way-table tr.highlight td {
    background: var(--highlight-yellow);
    font-weight: 600;
}

/* Node 4: Finder */
.old-way-node--finder {
    width: 150px;
    bottom: 0px;
    left: calc(50% - 30px);
    transform: translateX(-50%);
}

.old-way-finder-list {
    font-size: 10px;
    text-align: left;
}

.old-way-finder-item {
    padding: 4px 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 4px;
}

.old-way-finder-item svg {
    width: 14px;
    height: 14px;
    color: #79b8ff;
}

.old-way-finder-item.highlight {
    background: #d4edda;
    border: 1px solid #28a745;
}

/* Node 5: DAW */
.old-way-node--daw {
    width: 155px;
    bottom: 160px;
    left: -20px;
}

.old-way-node--daw .old-way-node__content {
    background: #252525;
    padding: 8px;
}

.old-way-daw-controls {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

.old-way-daw-btn {
    background: #3a3a3a;
    border: 1px solid #555;
    border-radius: 3px;
    color: #ccc;
    padding: 3px 8px;
    font-size: 9px;
}

.old-way-daw-btn--play {
    background: #2d5016;
    border-color: #4a8523;
    color: #8bc34a;
}

.old-way-waveform {
    height: 40px;
    background: #1a1a1a;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0 10px;
}

.old-way-wave-bar {
    width: 3px;
    background: #4fc3f7;
    border-radius: 1px;
}

/* Repeat Callout */
.old-way-repeat {
    position: absolute;
    top: 175px;
    left: 0;
    background: white;
    border-left: 4px solid var(--gold);
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--maroon);
    font-weight: 500;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    z-index: 20;
}

.old-way-repeat__icon {
    font-size: 15px;
    margin-right: 4px;
}

.old-way-repeat__time {
    display: block;
    margin-top: 2px;
    font-weight: 600;
}

/* ============================================
   OLD WAY — Mobile Vertical Stack
   ============================================ */
@media (max-width: 700px) {
    .old-way-radial {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        height: auto;
        padding: 1rem;
    }

    .old-way-orbit {
        display: none;
    }

    .old-way-hub {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 90%;
        max-width: 280px;
        height: auto;
        padding: 1.25rem;
        border-radius: 16px;
        order: 1;
    }

    .old-way-node {
        position: relative;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 90%;
        max-width: 300px;
    }

    .old-way-node--script {
        order: 2;
    }

    .old-way-node--xml {
        order: 4;
    }

    .old-way-node--manifest {
        order: 6;
    }

    .old-way-node--finder {
        order: 8;
    }

    .old-way-node--daw {
        order: 10;
    }

    .old-way-thought {
        position: relative;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        max-width: 85%;
        text-align: center;
        margin: -0.5rem 0 0.5rem 0;
    }

    .old-way-thought--1 {
        order: 3;
    }

    .old-way-thought--2 {
        order: 5;
    }

    .old-way-thought--3 {
        order: 7;
    }

    .old-way-thought--4 {
        order: 9;
    }

    .old-way-thought--5 {
        order: 11;
    }

    .old-way-repeat {
        position: relative;
        top: auto;
        left: auto;
        order: 12;
        width: 90%;
        max-width: 300px;
        text-align: center;
        margin-top: 0.5rem;
    }

    .old-way-node__badge {
        top: -8px;
        left: -8px;
        width: 24px;
        height: 24px;
        font-size: 12px;
    }
}
/* the restored diagram's one Workshop addition: a mono exhibit caption.
   Desktop margin clears the thought bubbles that hang below the radial. */
.old-way-caption {
    margin: 5rem auto 0;
    text-align: center;
    font: 500 .78rem/1.6 var(--mono);
    color: var(--text-body);
}
@media (max-width: 700px) {
    .old-way-caption { margin-top: 2rem; }
}

/* =====================================================================
   SORO BORO (HQ-20) — the pilot's two documents, mounted on the bench
   The living documents (Sheets workbook, PDF script) sit square and
   unrotated — working things sit straight in this shop — on kraft
   backing sheets that lean instead. Replaces the old page's inline
   style block and its full-bleed viewport hack.
   ===================================================================== */

.embed-intro { margin: 2.6rem 0 0; }
.embed-intro p { max-width: 62ch; margin: 0; }

.doc-mount { position: relative; margin: 1.8rem 0 3.6rem; }
.doc-mount::before {
    /* the kraft sheet leans; the document doesn't */
    content: '';
    position: absolute;
    inset: 18px -12px -16px 12px;
    transform: rotate(.6deg);
}
.doc-frame {
    position: relative;
    background: var(--paper-bright);
    border: 1px solid var(--line-strong);
    box-shadow: 10px 12px 0 rgba(55, 46, 42, .1);
    padding: 12px;
}
.doc-frame iframe {
    display: block;
    width: 100%;
    height: min(1000px, 90vh);
    min-height: 600px;
    border: 1px solid var(--line);
    background: #FFFDF7;
}
/* the script reads best at page width — cap the whole mount so the
   kraft backing sheet caps with the frame */
.script-embed.doc-mount { max-width: 824px; margin-inline: auto; }

/* the workbook opens INSIDE "Making the Jetpack" (gid deep-link on the
   iframe src) and, from 1120px up, breaks out of the prose column and
   zooms down in steps so the whole row — through the AUDIO field, the
   sample's actual performance — reads without a sideways drag (HQ-20
   verdict). The sheet needs ~1580px through the audio column; each step
   is sized to fit its range's minimum viewport. Below 1120px the frame
   keeps the original pan-inside behavior. */
@media (min-width: 1120px) {
    .workbook-embed {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: fit-content;
        max-width: calc(100vw - 2rem);
    }
    .workbook-embed .doc-frame iframe {
        width: 1580px;
        height: 1300px;
        min-height: 0;
        zoom: 0.67;
    }
}
@media (min-width: 1240px) {
    .workbook-embed .doc-frame iframe { zoom: 0.74; }
}
@media (min-width: 1440px) {
    .workbook-embed .doc-frame iframe { zoom: 0.87; }
}
@media (min-width: 1680px) {
    .workbook-embed .doc-frame iframe { zoom: 1; }
}
.doc-fallback {
    font: 500 .73rem var(--mono);
    letter-spacing: .08em;
    text-align: center;
    color: var(--ink-deep);
    margin: 1rem 0 0;
}
.doc-fallback a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--kraft-deep); text-underline-offset: 3px; }
.doc-fallback a:hover { text-decoration-color: var(--ink); }

/* =====================================================================
   ABOUT (HQ-21) — the maker's own story, told at the bench
   Stamped page name, the portrait as a mounted print beside the Arti
   test (the thesis, in the ink-sidebar grammar), prose as an organic
   spine with the "Then I had a kid" hinge marked in kraft, the five
   photos as a wall of taped prints (the carousel and its JS retired,
   per ruling), and the Daniel Tiger episode mounted square like the
   shop's other working documents.
   ===================================================================== */

.about .work-header { padding-block: 2.4rem .2rem; }

.about-opener { padding-block: 1.2rem 1rem; }
.about-arti-box {
    display: grid;
    gap: 2.2rem;
    align-items: center;
    margin-bottom: 2.4rem;
}
.about .mount {
    --rot: -1.4deg;
    box-shadow: 9px 10px 0 rgba(55, 46, 42, .16);
    max-width: 380px;
}
.about-hook {
    font-size: 1.16rem;
    line-height: 1.62;
    color: var(--text-dark);
    max-width: 44ch;
    margin: 0;
}

.about-flow { max-width: 46rem; margin-inline: auto; }
.about-flow > p { max-width: 62ch; }
.about-intro { font-size: 1.06rem; color: var(--text-dark); }
.about-hinge {
    font-size: 1.1rem;
    color: var(--text-dark);
    padding-left: 1.1rem;
    border-left: 3px solid var(--kraft-deep);
}
.about-link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--kraft-deep); text-underline-offset: 3px; }
.about-link:hover { text-decoration-color: var(--ink); }

.about-divider {
    height: 0;
    border-top: 1px dashed var(--line-strong);
    margin: 3rem 0;
}

/* -- the photo wall: five prints taped up, no machinery -- */
.about-wall { padding-block: 2.2rem .6rem; }
.about-wall-inner { columns: 1; max-width: 54rem; margin-inline: auto; }
.print {
    position: relative;
    break-inside: avoid;
    margin: 0 0 2rem;
    background: #FFFDF7;
    padding: 10px 10px 8px;
    border: 1px solid var(--line);
    box-shadow: 7px 8px 0 rgba(55, 46, 42, .13);
    transform: rotate(var(--rot, 0deg));
}
.print:nth-child(1) { --rot: -1.1deg; }
.print:nth-child(2) { --rot: .9deg; }
.print:nth-child(3) { --rot: -.6deg; }
.print:nth-child(4) { --rot: 1.2deg; }
.print:nth-child(5) { --rot: -.9deg; }
/* tape sits INSIDE the print (holding photo to mat): a negative top
   offset would overflow the column box and multicol paints that
   overflow at the previous column's end — a stray-tape artifact */
.print .tape { top: 4px; left: 32%; }
.print img { display: block; width: 100%; height: auto; }
.print figcaption {
    font: 500 .66rem var(--mono);
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--ink-deep);
    padding-top: .6rem;
}

/* -- the episode, mounted square like the shop's working documents -- */
.about-embed { margin: 2.6rem 0; }
.about-embed .doc-frame iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    min-height: 0;
}
.about-embed figcaption {
    font: 500 .7rem var(--mono);
    letter-spacing: .08em;
    color: var(--ink-deep);
    text-align: center;
    margin-top: 1.05rem;
}

/* -- affiliations: the quiet closing stamp -- */
.about-affiliations { text-align: center; padding: 2.2rem 1rem 3.6rem; }
.about-affiliations p {
    display: inline-block;
    font: 500 .72rem var(--mono);
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--ink-deep);
    border: 1px dashed var(--line-strong);
    padding: .65rem 1.2rem;
    margin: 0;
}

/* =====================================================================
   TELL ME A STORY (HQ-22) — the flagship, restructured to scan
   The Workshop layer carries the page (hero, the four-beat "what it
   does" strip, section headings); the interactive pipeline INSTRUMENT
   keeps its own stylesheet (tell-me-a-story.css) and its own internal
   typography — Fraunces is the human voice inside it, deliberately.
   The shim below re-tints the instrument: tell-me-a-story.css consumes
   these styles.css-era tokens, redefined here in Workshop materials.
   ===================================================================== */

.tms {
    --maroon: var(--ink);
    --dusty-rose: var(--kraft-lite);   /* pink tint → kraft: the instrument warms to the shop */
    --warm-white: var(--paper-bright);
    --pure-white: #FFFDF7;
    --text-dark: #372E2A;
    --text-read: var(--text-body);
    --text-light: #7A6E67;
}

/* Workshop wayfinding: section headings get the shop's h2 (must outrank
   tell-me-a-story.css's same-specificity h2 rules, which load later) */
.tms .container > h2,
.tms .md-wrap > h2 {
    font: 700 clamp(1.5rem, 3vw, 2.05rem)/1.12 var(--display);
    letter-spacing: -.015em;
    color: var(--text-dark);
    margin: 0 0 1.2rem;
}
.tms .container > h2::before,
.tms .md-wrap > h2::before {
    content: '';
    display: block;
    width: 34px;
    height: 4px;
    background: var(--ink);
    margin-bottom: .95rem;
}

.tms .work-intro { font: 750 clamp(2.3rem, 6.4vw, 4.2rem)/1.05 var(--display); }
.tms-promise {
    font: 750 clamp(1.3rem, 3vw, 1.9rem)/1.3 var(--display);
    letter-spacing: -.015em;
    color: var(--text-dark);
    margin: 0;
    max-width: 30ch;
}
.tms .case-header { padding-block: 1.6rem 2.2rem; gap: 1rem; }
.tms .case-dek { max-width: 56ch; }

/* -- the four beats: the whole system at a glance -- */
.tms-beats { padding-block: .6rem 2.6rem; }
/* the old .tms-hero wrapper is gone, so tell-me-a-story.css's
   ".tms-hero + .tms-origin" 4rem rhythm rule no longer matches —
   restate the gap here */
.tms .tms-beats + .tms-origin { margin-top: 4rem; }
.tms .beats {
    display: grid;
    gap: 1.4rem;
    margin-top: 1.7rem;
}
.tms .beat {
    background: var(--paper-bright);
    border: 1px solid var(--line-strong);
    box-shadow: 6px 7px 0 rgba(55, 46, 42, .1);
    padding: 1.2rem 1.2rem 1.3rem;
    transform: rotate(var(--rot, 0deg));
}
.tms .beat:nth-child(1) { --rot: -.7deg; }
.tms .beat:nth-child(2) { --rot: .5deg; }
.tms .beat:nth-child(3) { --rot: -.4deg; }
.tms .beat:nth-child(4) { --rot: .7deg; }
.tms .beat-k {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    font: 600 .7rem var(--mono);
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--ink);
    margin-bottom: .6rem;
}
.tms .beat-k .ix { font-weight: 600; color: rgba(85, 44, 54, .55); }
.tms .beat p { font-size: .95rem; line-height: 1.6; margin: 0; color: var(--text-body); }

.tms .tms-build-intro { max-width: 62ch; margin: 0 0 1.6rem; }

/* the old page's storybook pastel bands are chrome, not content —
   they join the shop's paper/kraft rhythm (must outrank the section
   rules in tell-me-a-story.css, which loads later) */
.tms .tms-origin,
.tms .tms-ai-kids {
    background: var(--kraft-lite);
    border-top: 1px dashed var(--line-strong);
    border-bottom: 1px dashed var(--line-strong);
}
.tms .tms-system,
.tms .tms-learning,
.tms .tms-principles {
    background: transparent;
}
.tms .principle-grid .principle-card {
    background: var(--paper-bright);
    border: 1px solid var(--line-strong);
    box-shadow: 6px 7px 0 rgba(55, 46, 42, .1);
    border-radius: 0;
    min-height: 0;
    aspect-ratio: auto; /* kill the sheet's forced square — cards hug their text */
    padding: 1.4rem 1.5rem 1.3rem;
}
/* slips hug their own text: no stretched heights, no bottom-pinned quotes */
.tms .principle-grid { align-items: start; }
.tms .principle-grid .principle-quote { margin-top: 1.1rem; }

/* ============ FOOTER ============ */
footer {
    background: linear-gradient(180deg, #6A3843, #5C303A);
    color: #F3E3DA;
    text-align: center;
    font: 500 .8rem var(--mono);
    letter-spacing: .08em;
    padding: 2.2rem 1rem;
}
footer a { color: #FBF3E9; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
footer a:hover { color: var(--gold); }
.footer-inner::before { content: '+' / ''; color: var(--gold); opacity: .7; margin-right: 1.2rem; }
.footer-inner::after { content: '+' / ''; color: var(--gold); opacity: .7; margin-left: 1.2rem; }

/* ============ MOTION (gated: JS present + motion OK) ============ */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }

    /* load-in: workbench items settle into place */
    html.js .settle {
        animation: settle .8s cubic-bezier(.22, 1, .32, 1.04) both;
        animation-delay: var(--d, 0s);
    }
    @keyframes settle {
        from {
            opacity: 0;
            transform: translateY(16px) rotate(calc(var(--rot, 0deg) + 2deg));
        }
        to {
            opacity: 1;
            transform: translateY(0) rotate(var(--rot, 0deg));
        }
    }

    /* scroll reveals: items placed on the bench */
    html.js .reveal {
        opacity: 0;
        transform: translateY(22px) rotate(.4deg);
    }
    html.js .reveal.placed {
        opacity: 1;
        transform: none;
        transition: opacity .55s ease, transform .75s cubic-bezier(.2, .9, .25, 1.05);
        transition-delay: var(--d, 0s);
    }

    /* logo board: pieces pinned one by one */
    html.js .logo-bar .reveal .logo-grid img {
        opacity: 0;
        transform: translateY(10px);
    }
    html.js .logo-bar .reveal.placed .logo-grid img {
        opacity: 1;
        transform: none;
        transition: opacity .5s ease, transform .55s cubic-bezier(.2, .9, .25, 1.05);
        transition-delay: calc(var(--i, 0) * 60ms + .1s);
    }

    /* projects: case files land on the tray one at a time */
    html.js .reveal .catalog-row .paper-card {
        opacity: 0;
        transform: translateY(14px) rotate(var(--rot, 0deg));
    }
    html.js .reveal.placed .catalog-row .paper-card {
        opacity: 1;
        transform: rotate(var(--rot, 0deg));
        transition: opacity .5s ease, transform .6s cubic-bezier(.2, .9, .25, 1.05);
        transition-delay: calc(var(--i, 0) * 110ms + .08s);
    }

    /* projects: the credit roll — rows set themselves in type order */
    html.js .reveal .credit-item {
        opacity: 0;
        transform: translateY(9px);
    }
    html.js .reveal.placed .credit-item {
        opacity: 1;
        transform: none;
        transition: opacity .45s ease, transform .5s cubic-bezier(.2, .9, .25, 1.05);
        transition-delay: calc(var(--i, 0) * 45ms + .12s);
    }

    /* contact: the order slip prints one field at a time */
    html.js .reveal .form-row,
    html.js .reveal .form-group,
    html.js .reveal .stamp-btn {
        opacity: 0;
        transform: translateY(9px);
    }
    html.js .reveal.placed .form-row,
    html.js .reveal.placed .form-group,
    html.js .reveal.placed .stamp-btn {
        opacity: 1;
        transform: none;
        transition: opacity .45s ease, transform .5s cubic-bezier(.2, .9, .25, 1.05);
        transition-delay: calc(var(--i, 0) * 70ms + .15s);
    }
    /* in-row halves ride their row's stagger, not their own */
    html.js .reveal .form-row .form-group { opacity: 1; transform: none; }

    /* 404: the ghost strike lands a beat after the real one */
    html.js .strike-ghost { animation: ghost-strike .45s ease-out .8s both; }
    @keyframes ghost-strike {
        from { opacity: 0; transform: translate(-7px, -9px) rotate(1.8deg); }
        to { opacity: .16; transform: translate(0, 0) rotate(1.8deg); }
    }

    /* about: prints go up on the wall one at a time */
    html.js .reveal .print {
        opacity: 0;
        transform: translateY(14px) rotate(var(--rot, 0deg));
    }
    html.js .reveal.placed .print {
        opacity: 1;
        transform: rotate(var(--rot, 0deg));
        transition: opacity .5s ease, transform .6s cubic-bezier(.2, .9, .25, 1.05);
        transition-delay: calc(var(--i, 0) * 110ms + .08s);
    }
}

/* reduced motion: everything rests, instantly */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============ DESKTOP ≥768px ============ */
@media (min-width: 768px) {
    .hero {
        grid-template-areas: 'content photo';
        grid-template-columns: 7fr 5fr;
        gap: 4rem;
        align-items: center;
        padding-block: 4.4rem 5.6rem;
    }
    .hero-image { max-width: 420px; justify-self: end; margin-top: 0; }

    .logo-grid { gap: 2.2rem 3.1rem; }
    .logo-grid .logo-netflix { height: 28px; }
    .logo-grid .logo-apple   { height: 38px; }
    .logo-grid .logo-pbs     { height: 48px; margin-top: 4px; }
    .logo-grid .logo-sesame  { height: 50px; }
    .logo-grid .logo-nick    { height: 66px; }
    .logo-grid .logo-spin    { height: 60px; }
    .logo-grid .logo-mo      { height: 60px; }

    .bench { padding-block: 5rem 4.4rem; }
    .bench--dark { padding-block: 5.4rem 6rem; }

    .paper-card { padding: 2.6rem 2.8rem; gap: 2.6rem; }
    .card--tmas { grid-template-columns: 1.15fr .85fr; align-items: center; }
    .card--seq { grid-template-columns: .95fr 1.05fr; align-items: center; }
    .card--seq .card-visual { order: -1; }
    .card--seq .mount { margin-left: -4.4rem; }

    .tag { margin-left: 2rem; }

    /* projects page */
    .projects .work-header {
        grid-template-columns: 1fr auto;
        align-items: end;
        gap: 3rem;
        padding-block: 4rem 4.6rem;
    }

    .projects .bench { padding-block: 4.6rem 4.2rem; }
    .projects .bench--dark { padding-block: 5.2rem 5.6rem; }

    .projects .paper-card { padding: 2.3rem 2.5rem; gap: 2.4rem; }
    .card--soro { grid-template-columns: .95fr 1.05fr; align-items: center; }
    .card--soro .card-visual--svg { order: -1; --rot: -.7deg; }

    .catalog-row { grid-template-columns: repeat(3, 1fr); }
    /* must outrank .projects .paper-card above: files keep tight padding + zero flex gap */
    .projects .catalog-row .paper-card { gap: 0; padding: 1.5rem 1.4rem 1.75rem; }
    .catalog-row .paper-card:nth-child(2) { margin-top: .8rem; }

    /* 404 page */
    .misfile {
        grid-template-columns: 1.08fr .92fr;
        align-items: center;
        gap: 4rem;
        padding-block: 3.5rem 5.5rem;
    }
    .misfile-note { order: -1; }

    /* case files */
    .case-header { padding-block: 2.6rem 3.2rem; gap: 1.3rem; }
    .impact-grid { grid-template-columns: repeat(3, 1fr); }
    .case .bench--dark { padding-block: 4.4rem 4.8rem; }
    .testimonial { padding: 2.2rem 2.2rem 1.7rem; }

    /* about */
    .about-arti-box {
        grid-template-columns: .85fr 1.15fr;
        gap: 3.4rem;
    }
    .about-wall-inner { columns: 3; column-gap: 1.7rem; }
    .about-opener { padding-block: 2rem 1.6rem; }

    /* tell me a story */
    .tms .beats { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
    .tms .case-header { padding-block: 2.8rem 2.6rem; }
    /* principle slips lean only on the desktop bench — rotated corners
       poke ~1px past a phone viewport (clipped, but why leave it) */
    .tms .principle-grid .principle-card:nth-child(odd) { transform: rotate(-.35deg); }
    .tms .principle-grid .principle-card:nth-child(even) { transform: rotate(.3deg); }

    /* contact page */
    .contact .work-header { padding-block: 3.6rem 2.2rem; }
    .bench--desk { padding-block: 2rem 5.4rem; }
    .desk {
        grid-template-columns: .92fr 1.08fr;
        gap: 4.2rem;
    }
    .maker { gap: 2.1rem; }
    .order-card { padding: 2.5rem 2.4rem 2.7rem; }
    .form-row { grid-template-columns: 1fr 1fr; gap: 1.7rem; }
}

/* ============ SMALL PHONES <480px ============ */
@media (max-width: 479px) {
    .mobile-break { display: inline; }

    .hero { gap: 2.5rem; padding-block: 2.2rem 3rem; }
    .hero-value-prop { font-size: clamp(1.95rem, 8.8vw, 2.3rem); }
    .hero-credential { font-size: .98rem; }
    .tech-stack { display: block; padding: .9rem 1.5rem; font-size: .7rem; }
    .hero-image { max-width: 86%; }

    .nav { gap: .3rem 1rem; }
    .nav a { font-size: .67rem; letter-spacing: .13em; }

    .paper-card { padding: 1.4rem 1.1rem 1.7rem; }
    .stat-number { font-size: clamp(1.9rem, 9.4vw, 2.4rem); }
    .project-stat { gap: .75rem; padding: .55rem 1rem .7rem; }

    .cuts::before, .cuts::after { display: none; }

    /* projects page */
    .projects .work-header { padding-block: 2.2rem 2.8rem; }
    .projects .work-intro { font-size: clamp(1.55rem, 7.4vw, 1.9rem); }
    .index-card { min-width: 0; width: 100%; max-width: 300px; }

    .catalog-row .paper-card { padding: 1.35rem 1.1rem 1.6rem; }
    .projects .stat-number { font-size: clamp(1.15rem, 5.4vw, 1.4rem); }
    .projects .project-stat { gap: .55rem; padding: .45rem .85rem .55rem; }

    .credit-item { padding: .5rem 0; }
    .credit-title { font-size: 1.02rem; }
    .credit-meta { font-size: .62rem; letter-spacing: .1em; }
    .credit-item .leader { min-width: 1.1rem; margin-bottom: .38em; }

    /* contact page */
    .contact .work-header { padding-block: 2rem 1.2rem; }
    .contact .work-intro { font-size: clamp(2rem, 9.4vw, 2.4rem); }
    .contact .mount { max-width: 320px; }
    .contact-intro { font-size: .98rem; }
    .contact-plate { padding: .95rem 1.3rem; justify-self: stretch; }
    .contact-method a { font-size: .72rem; letter-spacing: .06em; }
    .order-card { padding: 1.6rem 1.15rem 1.8rem; }
    .contact .tape { left: 6%; width: 110px; }

    /* case files */
    .case .work-intro { font-size: clamp(1.7rem, 8vw, 2.1rem); }
    .case-kicker { font-size: 1rem; }
    .text-comparison { grid-template-columns: 1fr; }
    .scene-setter { font-size: 1.05rem; }
    .code-content { font-size: .68rem; }

    /* soro boro */
    .doc-frame { padding: 8px; }
    .doc-frame iframe { height: 600px; min-height: 0; }
}

/* ============ WIDE BENCH ≥1120px ============ */
@media (min-width: 1120px) {
    /* tell me a story: the four principles as one compact row of cards */
    .tms .principle-grid { grid-template-columns: repeat(4, 1fr); gap: 1.3rem; }
}