/* ============================================================
   CASE STUDY LAYER — work/<slug>.html. §6.2 structure:
   cs-hero → cs-shot → article.cs-body → cs-nav. Tokens only.
   ============================================================ */

/* Header + footer (shared with index) */
.site-header__bar{min-height:calc(var(--s)*20)}
.wordmark__badge{width:calc(var(--s)*11);height:calc(var(--s)*11);border-radius:var(--radius-sm)}
.wordmark__name{font-size:var(--text-body)}
.nav-panel .btn{white-space:nowrap}
.icon-close{display:none}
.nav-toggle[aria-expanded="true"] .icon-menu{display:none}
.nav-toggle[aria-expanded="true"] .icon-close{display:block}
.site-footer__grid{align-items:start}
.social a{width:auto;padding-inline:calc(var(--s)*3);gap:calc(var(--s)*2);font-size:var(--text-sm);text-decoration:none}
.site-footer__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:calc(var(--s)*3)}
.site-footer__motto{color:var(--color-brand-100)}

/* Reading progress — non-text, brand-500, scroll-linked (no animation) */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;background:var(--color-brand-500);transform:scaleX(0);transform-origin:left;pointer-events:none}

/* Shared column — hero, shot and body align on one measure */
.cs-col{max-width:calc(var(--container-measure) + var(--spacing-gutter) * 2)}
.cs-wide{max-width:calc(var(--container-measure) * 1.25 + var(--spacing-gutter) * 2)}

/* cs-hero (Section tint) */
.cs-hero{padding-block:calc(var(--s)*12) calc(var(--s)*16)}
@media (min-width:64rem){.cs-hero{padding-block:calc(var(--s)*16) calc(var(--s)*20)}}
.cs-back{display:inline-flex;align-items:center;gap:calc(var(--s)*2);min-height:var(--target-min);font-size:var(--text-sm);font-weight:var(--weight-medium);text-decoration:none;color:var(--text-link-hover)}
.cs-back:hover{text-decoration:underline;text-underline-offset:3px}
.cs-back svg{width:16px;height:16px}
.cs-hero .eyebrow{display:block;margin-top:calc(var(--s)*6)}
.cs-title{font-size:var(--text-display);font-weight:var(--text-display--weight);line-height:var(--text-display--line-height);letter-spacing:var(--text-display--letter-spacing);margin-top:calc(var(--s)*3);max-width:20ch}
.cs-sub{margin-top:calc(var(--s)*5)}
.cs-hero .tags{margin-top:calc(var(--s)*6)}

/* Meta table — Meta row, canonical order Org · Product · Role · Year, laid out as a grid */
.cs-meta{display:grid;grid-template-columns:1fr 1fr;margin:calc(var(--s)*10) 0 0;background:var(--surface-card);border:1px solid var(--border-card);border-radius:var(--radius);overflow:hidden}
@media (min-width:48rem){.cs-meta{grid-template-columns:repeat(4,1fr)}}
.cs-meta > div{padding:calc(var(--s)*4) calc(var(--s)*5);border-color:var(--border-card);border-style:solid;border-width:0}
.cs-meta > div:nth-child(odd){border-right-width:1px}
.cs-meta > div:nth-child(-n+2){border-bottom-width:1px}
@media (min-width:48rem){
  .cs-meta > div{border-width:0}
  .cs-meta > div:not(:last-child){border-right-width:1px}
}
.cs-meta dt{font-size:var(--text-meta);font-weight:var(--weight-medium);text-transform:uppercase;letter-spacing:var(--text-meta--letter-spacing);color:var(--text-meta-color)}
.cs-meta dd{margin:calc(var(--s)*1) 0 0;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-primary)}

/* Outcome strip — Callout outcome, compact, sits under the meta table */
.cs-hero .callout{margin-top:calc(var(--s)*4);display:flex;flex-wrap:wrap;align-items:baseline;gap:calc(var(--s)*2) calc(var(--s)*5);background:var(--surface-card);padding:calc(var(--s)*4) calc(var(--s)*5)}
.cs-hero .callout .eyebrow{margin:0}
.cs-hero .callout__num{font-size:var(--text-h3);font-weight:var(--weight-black);font-variant-numeric:tabular-nums;color:var(--text-primary)}
.cs-hero .callout p{font-weight:var(--weight-medium);color:var(--text-primary)}

/* cs-shot — lead Figure, pulled up over the hero edge */
.cs-shot{padding-block:0}
.cs-shot .figure{margin-top:calc(var(--s)*12)}
.cs-shot .placeholder{aspect-ratio:16/10}

/* article.cs-body — Prose block, h2 sections split by internal rules */
.cs-body{padding-block:calc(var(--s)*16) var(--spacing-section)}
.cs-body .prose{max-width:none}
.cs-sec{scroll-margin-top:calc(var(--s)*24)}
.cs-sec + .cs-sec{margin-top:calc(var(--s)*12);padding-top:calc(var(--s)*12);border-top:1px solid var(--border-rule)}
.cs-sec h2{margin-top:0}
.cs-sec > * + *{margin-top:calc(var(--s)*5)}
.cs-sec h3{display:flex;gap:calc(var(--s)*3);align-items:baseline;margin-top:calc(var(--s)*10)}
.cs-sec h3 .num{font-size:var(--text-meta);font-weight:var(--weight-medium);letter-spacing:var(--text-meta--letter-spacing);color:var(--text-meta-color)}
.cs-sec .figure,.cs-sec .figure-grid-2{margin-top:calc(var(--s)*8)}
.cs-sec .callout{margin-top:calc(var(--s)*8)}

/* Pending slot — visible gap where content/work/<slug>.md has not supplied copy */
.pending{border:1px dashed var(--color-brand-100);border-radius:var(--radius);background:var(--surface-section-tint);padding:calc(var(--s)*5)}
.pending .eyebrow{display:block;color:var(--text-muted)}
.pending p{margin-top:calc(var(--s)*1);font-size:var(--text-sm);color:var(--text-muted)}
.pending code,.cs-hero code{white-space:normal;overflow-wrap:anywhere}

/* Section rail — fixed, xl only, so it never crowds the 68ch column */
.cs-rail{display:none}
@media (min-width:80rem){
  .cs-rail{display:block;position:fixed;right:var(--spacing-gutter);top:50%;transform:translateY(-50%);z-index:40;background:var(--surface-card);border:1px solid var(--border-card);border-radius:var(--radius);box-shadow:var(--shadow-1);padding:calc(var(--s)*3) calc(var(--s)*2)}
}
.cs-rail h2{font-size:var(--text-meta);font-weight:var(--weight-medium);text-transform:uppercase;letter-spacing:var(--text-meta--letter-spacing);color:var(--text-meta-color);padding-inline:calc(var(--s)*2);margin-bottom:calc(var(--s)*1)}
.cs-rail ol{list-style:none;margin:0;padding:0}
.cs-rail a{display:flex;align-items:center;justify-content:flex-end;gap:calc(var(--s)*3);min-height:var(--target-min);padding-inline:calc(var(--s)*2);text-decoration:none;color:var(--text-muted);font-size:var(--text-meta);font-weight:var(--weight-medium);border-radius:var(--radius-sm);transition:color var(--duration-fast) var(--ease-brand)}
.cs-rail a::after{content:"";flex:none;width:calc(var(--s)*3);height:2px;background:var(--border-card);transition:width var(--duration-fast) var(--ease-brand),background-color var(--duration-fast) var(--ease-brand)}
.cs-rail__label{white-space:nowrap}
.cs-rail a:hover,.cs-rail a[aria-current="location"]{color:var(--text-link-hover)}
.cs-rail a:hover::after{background:var(--interactive)}
.cs-rail a[aria-current="location"]::after{width:calc(var(--s)*6);background:var(--interactive)}

/* cs-nav — next/previous, full-width tap targets */
.cs-nav .cards{margin-top:calc(var(--s)*6)}
.cs-nav .card{padding:calc(var(--s)*6)}
.cs-nav .card--prev{align-items:flex-start}
.cs-nav .card--next{align-items:flex-end;text-align:right}
.cs-nav .card--next .card__title{justify-content:flex-end}
.cs-nav .card__arrow--back{transform:rotate(180deg)}
.cs-nav .card:hover .card__arrow--back,.cs-nav .card:focus-visible .card__arrow--back{transform:rotate(180deg) translateX(4px)}
.cs-nav__all{display:flex;flex-wrap:wrap;gap:calc(var(--s)*3);margin-top:calc(var(--s)*8)}

/* Links and ghost buttons on alt/tint surfaces use brand-700 (approved pair) */
.section--alt .btn--ghost,.section--tint .btn--ghost{color:var(--interactive-hover)}