:root{
    --paper:#F4EFE3;
    --paper2:#EBE4D2;
    --salmon:#F7E0CC;
    --ink:#1B1813;
    --ink-soft:#46413A;
    --muted:#8A8273;
    --red:#A8322A;
    --red-deep:#7E241E;
    --rule:rgba(27,24,19,.20);
    --rule-soft:rgba(27,24,19,.11);
    --rule-strong:rgba(27,24,19,.55);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth;background:var(--paper)}
  body{
    font-family:"Newsreader",Georgia,serif;
    background:transparent;
    color:var(--ink);
    line-height:1.5;
    font-weight:380;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    font-feature-settings:"liga","kern";
  }
  ::selection{background:var(--red);color:var(--paper)}
  a{color:inherit;text-decoration:none}
  /* paper grain */
  body::before{content:"";position:fixed;inset:0;z-index:99;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

  /* progress */
  .prog{position:fixed;top:0;left:0;height:3px;width:0;z-index:100;background:var(--red)}

  /* mono / labels */
  .mono{font-family:"IBM Plex Mono",monospace}
  .kick{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--red);font-weight:500}
  .num{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum","lnum"}

  /* layout */
  .wrap{max-width:1180px;margin:0 auto;padding:0 32px}
  section{padding:96px 0}
  .rule{height:1px;background:var(--rule)}
  .rule-x{transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
  .in .rule-x,.rule-x.in{transform:scaleX(1)}

  /* nav / folio */
  nav{position:sticky;top:0;z-index:80;background:var(--paper);border-bottom:1px solid var(--ink)}
  .nav-in{max-width:1180px;margin:0 auto;padding:13px 32px;display:flex;align-items:center;justify-content:space-between}
  .mark{font-family:"Libre Bodoni",serif;font-size:21px;font-weight:700;letter-spacing:.01em}
  .mark b{color:var(--red)}
  .nav-links{display:flex;gap:26px;align-items:center}
  .nav-links a{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);
    padding-bottom:2px;border-bottom:1px solid transparent;transition:.2s}
  .nav-links a:hover,.nav-links a.act{color:var(--ink);border-color:var(--red)}
  @media(max-width:760px){.nav-links a:not(:last-child){display:none}}

  /* ---------- masthead / lead ---------- */
  .mast{padding:30px 0 64px}
  .folio{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;
    font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
    padding:14px 0}
  .folio .c{color:var(--ink)}
  .drule{border-top:2px solid var(--ink);border-bottom:1px solid var(--ink);height:5px;margin-bottom:46px}

  .lead{display:grid;grid-template-columns:1.62fr .9fr;gap:56px;align-items:start}
  .lead-kick{margin-bottom:22px;display:inline-block}
  h1{font-family:"Libre Bodoni",serif;font-weight:600;font-size:clamp(2.9rem,6.6vw,5.6rem);line-height:.98;
    letter-spacing:-.01em;color:var(--ink)}
  h1 em{font-style:italic;color:var(--red-deep)}
  .redline-word{position:relative;white-space:nowrap}
  .redline-word svg{position:absolute;left:-2%;bottom:-.22em;width:104%;height:.5em;overflow:visible}
  .redline-word .rl-path{fill:none;stroke:var(--red);stroke-width:6;stroke-linecap:round;
    stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s cubic-bezier(.5,.05,.3,1)}
  #h1.drawn .redline-word .rl-path{stroke-dashoffset:0}
  .redline-word .nib{fill:var(--red);opacity:0;transition:opacity .3s}
  .redline-word .nib.on{opacity:1}
  .standfirst{font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.42;color:var(--ink-soft);margin-top:34px;max-width:40ch;font-weight:340}
  .standfirst em{font-style:italic;color:var(--ink)}
  .byline{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.06em;color:var(--muted);
    margin-top:30px;text-transform:uppercase;line-height:2}
  .byline b{color:var(--ink);font-weight:500}
  .lead-cta{display:flex;gap:30px;margin-top:34px;flex-wrap:wrap}
  .elink{font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.04em;color:var(--ink);
    border-bottom:2px solid var(--ink);padding-bottom:3px;transition:.22s}
  .elink:hover{color:var(--red);border-color:var(--red)}
  .elink.red{color:var(--red);border-color:var(--red)}
  .elink.red:hover{color:var(--red-deep);border-color:var(--red-deep)}

  /* contents index box */
  .contents{border:1px solid var(--ink);padding:0}
  .contents h4{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
    padding:14px 18px;border-bottom:1px solid var(--ink);color:var(--ink);background:var(--paper2)}
  .contents a{display:flex;align-items:baseline;gap:10px;padding:13px 18px;border-bottom:1px solid var(--rule-soft);transition:background .2s}
  .contents a:last-child{border-bottom:0}
  .contents a:hover{background:var(--salmon)}
  .contents .ci{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--red);width:22px}
  .contents .ct{font-family:"Libre Bodoni",serif;font-size:1.12rem;font-weight:500;flex:1}
  .contents .dot{flex:1;border-bottom:1.5px dotted var(--rule);transform:translateY(-3px);min-width:18px}
  .contents .pg{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted)}
  @media(max-width:860px){.lead{grid-template-columns:1fr;gap:42px}}

  /* ---------- ledger / figures ---------- */
  .ledger{background:var(--salmon);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
  .ledger-in{max-width:1180px;margin:0 auto;padding:34px 32px}
  .ledger h4{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--red-deep);margin-bottom:18px;display:flex;justify-content:space-between}
  .lrow{display:flex;align-items:baseline;gap:14px;padding:11px 0;border-bottom:1px solid rgba(126,36,30,.18)}
  .lrow:last-child{border-bottom:0}
  .lrow .ll{font-size:1.08rem;color:var(--ink)}
  .lrow .ld{flex:1;border-bottom:1.5px dotted rgba(126,36,30,.4);transform:translateY(-4px);min-width:30px}
  .lrow .lv{font-family:"Libre Bodoni",serif;font-weight:600;font-size:clamp(1.6rem,3vw,2.3rem);color:var(--red-deep);line-height:1}
  .lrow .lv .pre{font-size:.55em;vertical-align:super;color:var(--red)}

  /* ---------- section head ---------- */
  .shead{margin-bottom:46px}
  .shead .top{display:flex;align-items:baseline;gap:16px;margin-bottom:18px}
  .shead .sn{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--red)}
  .stitle{font-family:"Libre Bodoni",serif;font-size:clamp(2rem,4.4vw,3.2rem);font-weight:600;letter-spacing:-.01em;line-height:1}

  /* ---------- about ---------- */
  .about{display:grid;grid-template-columns:1.7fr 1fr;gap:60px;align-items:start}
  .prose{font-size:1.22rem;line-height:1.62;color:var(--ink-soft);column-gap:42px}
  .prose p{margin-bottom:22px}
  .prose p b{color:var(--ink);font-weight:500}
  .prose p:first-child::first-letter{font-family:"Libre Bodoni",serif;font-weight:700;float:left;font-size:4.4rem;
    line-height:.78;padding:6px 14px 0 0;color:var(--red);}
  .factbox{border:1px solid var(--ink);background:var(--paper2)}
  .factbox h4{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
    padding:14px 20px;border-bottom:1px solid var(--ink)}
  .factbox ul{list-style:none}
  .factbox li{display:flex;justify-content:space-between;align-items:center;padding:13px 20px;border-bottom:1px solid var(--rule-soft);font-size:1.02rem}
  .factbox li:last-child{border-bottom:0}
  .factbox li em{font-family:"IBM Plex Mono",monospace;font-style:normal;font-size:11.5px;color:var(--red-deep)}
  @media(max-width:860px){.about{grid-template-columns:1fr;gap:40px}.prose{columns:1}}

  /* ---------- capabilities / practice ---------- */
  .practice{border-top:1px solid var(--ink)}
  .pr{display:grid;grid-template-columns:1.05fr 2fr;gap:44px;align-items:baseline;
    padding:26px 0;border-bottom:1px solid var(--rule)}
  .pr .pt{font-family:"Libre Bodoni",serif;font-size:1.5rem;font-weight:600;line-height:1.08}
  .pr .pt .tg{display:block;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--muted);font-weight:400;margin-bottom:6px}
  .pr .pd{font-size:1.08rem;color:var(--ink-soft);line-height:1.5}
  .pr{transition:padding-left .3s,background .3s}
  .pr:hover{padding-left:14px;background:linear-gradient(90deg,var(--salmon),transparent)}
  @media(max-width:760px){.pr{grid-template-columns:1fr;gap:10px}}

  /* ---------- catalogue / dispatches ---------- */
  .cat-note{font-size:1.18rem;line-height:1.55;color:var(--ink-soft);max-width:62ch;margin:-26px 0 8px}
  .cat-note b{color:var(--ink);font-weight:500}
  .dispatches{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink);margin-top:42px}
  .disp{padding:34px 0;border-bottom:1px solid var(--rule);position:relative}
  .disp:nth-child(odd){padding-right:40px;border-right:1px solid var(--rule)}
  .disp:nth-child(even){padding-left:40px}
  .disp .dh{display:flex;align-items:baseline;gap:12px;margin-bottom:16px}
  .disp .dno{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--red)}
  .disp .dtag{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .disp h3{font-family:"Libre Bodoni",serif;font-size:1.74rem;font-weight:600;line-height:1.06;letter-spacing:-.01em;margin-bottom:14px}
  .disp .dek{font-size:1.08rem;line-height:1.5;color:var(--ink-soft);margin-bottom:18px}
  .disp .proves{font-size:.98rem;color:var(--ink);border-left:2px solid var(--red);padding-left:14px;margin-bottom:20px;font-style:italic}
  .disp .proves b{font-family:"IBM Plex Mono",monospace;font-style:normal;font-size:10px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--red);display:block;margin-bottom:5px}
  .disp .dlinks{display:flex;gap:22px}
  .disp h3 a:hover{color:var(--red)}
  @media(max-width:760px){.dispatches{grid-template-columns:1fr}.disp,.disp:nth-child(odd),.disp:nth-child(even){padding:30px 0;border-right:0}}

  /* ---------- editor's note ---------- */
  .note{background:var(--salmon);border:1px solid var(--ink);padding:52px;text-align:center}
  .note .kick{color:var(--red-deep)}
  .note h3{font-family:"Libre Bodoni",serif;font-size:clamp(1.6rem,3.2vw,2.5rem);font-weight:600;line-height:1.16;
    max-width:24ch;margin:18px auto 0;letter-spacing:-.005em}
  .note p{font-size:1.14rem;color:var(--ink-soft);max-width:56ch;margin:20px auto 0;font-style:italic}

  /* ---------- correspondence ---------- */
  .corr{text-align:center;border-top:2px solid var(--ink);border-bottom:1px solid var(--ink);padding-top:0}
  .corr-in{padding:80px 0}
  .corr h2{font-family:"Libre Bodoni",serif;font-size:clamp(2.3rem,5vw,4rem);font-weight:600;line-height:1.02;letter-spacing:-.01em}
  .corr h2 em{font-style:italic;color:var(--red-deep)}
  .corr .sub{font-size:1.2rem;color:var(--ink-soft);max-width:48ch;margin:24px auto 40px;font-style:italic}
  .corr-links{display:flex;gap:28px;justify-content:center;flex-wrap:wrap}

  /* colophon */
  .colophon{padding:34px 0 60px}
  .col-in{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:18px;
    font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.04em;color:var(--muted);line-height:1.9}
  .col-in b{color:var(--ink);font-weight:500}

  /* reveal */
  .rv{opacity:0;transform:translateY(22px);transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1)}
  .rv.in{opacity:1;transform:none}
  .stagger>*{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
  .stagger.in>*{opacity:1;transform:none}
  .stagger.in>*:nth-child(2){transition-delay:.07s}
  .stagger.in>*:nth-child(3){transition-delay:.14s}
  .stagger.in>*:nth-child(4){transition-delay:.21s}
  .stagger.in>*:nth-child(5){transition-delay:.28s}
  .stagger.in>*:nth-child(6){transition-delay:.35s}

  @media(prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
    .rv,.stagger>*{opacity:1!important;transform:none!important}
    .redline-word path{stroke-dashoffset:0!important}
    .rule-x{transform:none!important}
  }
  /* ===== v2 additions: cursor, hero net, word reveal, dispatch hover ===== */
  .mast{position:relative}
  #net{position:fixed;inset:0;width:100%;height:100%;z-index:-1;opacity:.8;pointer-events:none}
  .mast .wrap{position:relative;z-index:2}
  .contents{background:var(--paper)}

  .cur-dot,.cur-ring{position:fixed;left:0;top:0;border-radius:50%;pointer-events:none;z-index:120;
    transform:translate(-50%,-50%);opacity:0;transition:opacity .3s}
  .cur-dot{width:7px;height:7px;background:var(--red)}
  .cur-ring{width:30px;height:30px;border:1.5px solid var(--rule-strong);
    transition:opacity .3s,width .22s,height .22s,border-color .22s}
  .cur-ring.lg{width:56px;height:56px;border-color:var(--red)}
  body.cur-on{cursor:none}
  body.cur-on a{cursor:none}

  #h1 .wd{display:inline-block;opacity:0;transform:translateY(.55em);
    transition:opacity .7s ease,transform .85s cubic-bezier(.16,.84,.32,1)}
  #h1.lit .wd{opacity:1;transform:none}

  .disp{overflow:hidden;transition:transform .35s}
  .disp::before{content:"";position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .35s;pointer-events:none;
    background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),var(--salmon),transparent 62%)}
  .disp:hover::before{opacity:.95}
  .disp>*{position:relative;z-index:1}
  .disp:hover{transform:translateY(-3px)}
  .disp:hover h3{color:var(--red-deep)}

  @media(hover:none),(pointer:coarse){.cur-dot,.cur-ring{display:none}body.cur-on{cursor:auto}}
  @media(prefers-reduced-motion:reduce){
    #h1 .wd{opacity:1!important;transform:none!important}
    #net{display:none}
    .redline-word .rl-path{stroke-dashoffset:0!important}
  }

/* ============================================================
   ADDITIONS for deepakbuild.in (beyond the v3 mock)
   — cluster-grouped catalogue · About Me · case-page template
   Built on the same tokens; no overrides of mock rules above.
   ============================================================ */

/* ---------- About Me ("The Byline") ---------- */
.bio{display:grid;grid-template-columns:1fr 1.6fr;gap:60px;align-items:start}
.bio .portrait{border:1px solid var(--ink);background:var(--paper2);aspect-ratio:3/4;overflow:hidden}
.bio .portrait img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.15) contrast(1.02)}
.bio .portrait.empty{display:flex;align-items:center;justify-content:center;
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-align:center;padding:24px}
.bio .biotext{font-size:1.18rem;line-height:1.6;color:var(--ink-soft)}
.bio .biotext p{margin-bottom:20px}
.bio .biotext p b{color:var(--ink);font-weight:500}
.bio .biotext .sign{font-family:"Libre Bodoni",serif;font-size:1.3rem;color:var(--ink);font-style:italic;margin-top:6px}
@media(max-width:860px){.bio{grid-template-columns:1fr;gap:34px}.bio .portrait{max-width:280px}}

/* ---------- Catalogue: 6 clusters, cases nested ---------- */
.clusters{border-top:1px solid var(--ink);margin-top:42px}
.cluster{border-bottom:1px solid var(--rule)}
.cluster-head{display:flex;align-items:baseline;gap:16px;padding:30px 0 8px;flex-wrap:wrap}
.cluster-head .rn{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--red);letter-spacing:.1em}
.cluster-head .cn{font-family:"Libre Bodoni",serif;font-size:1.6rem;font-weight:600;letter-spacing:-.01em}
.cluster-head .tg{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cluster-head .ct{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted)}
.cluster-cards{display:grid;grid-template-columns:1fr 1fr;gap:0}
@media(max-width:760px){.cluster-cards{grid-template-columns:1fr}}

/* a dispatch card is now a full-card link to the case page */
a.disp{display:block;color:inherit}
.disp .dh .feat{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red);border:1px solid var(--red);padding:2px 7px;border-radius:2px}
.disp .dh{justify-content:flex-start}
.disp .read{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.06em;color:var(--red);
  border-bottom:1.5px solid var(--red);padding-bottom:2px;display:inline-block}
.disp:hover .read{color:var(--red-deep);border-color:var(--red-deep)}

/* ---------- Case page: lighter masthead ---------- */
.cmast{padding:24px 0 10px}
.cmast .back{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.cmast .back:hover{color:var(--red)}
.cmast .crumb{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px}
.cmast .crumb .tag{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ---------- Case page: article ---------- */
.article{max-width:760px;margin:0 auto;padding:18px 0 30px}
.art-head{padding:14px 0 30px;border-bottom:2px solid var(--ink);margin-bottom:36px}
.art-head .no{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--red);letter-spacing:.1em}
.art-head h1{font-family:"Libre Bodoni",serif;font-weight:600;font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.04;
  letter-spacing:-.01em;color:var(--ink);margin:14px 0 0}
.art-head .standfirst{font-family:"Newsreader",Georgia,serif;font-size:1.3rem;line-height:1.45;color:var(--ink-soft);
  margin-top:20px;font-weight:340;font-style:italic}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.chips span{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.04em;color:var(--ink-soft);
  background:var(--paper2);border:1px solid var(--rule);padding:5px 10px}

/* animation embed slot */
.anim{margin:0 0 38px;border:1px solid var(--ink);background:var(--paper2)}
.anim .cap{display:flex;justify-content:space-between;align-items:center;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red-deep);padding:11px 16px;border-bottom:1px solid var(--ink)}
.anim .frame{position:relative;aspect-ratio:16/9;background:var(--paper);overflow:hidden}
.anim .frame iframe,.anim .frame video,.anim .frame img{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;object-fit:cover}
.anim .frame.placeholder{display:flex;align-items:center;justify-content:center;text-align:center;padding:30px}
.anim .frame.placeholder .ph{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);line-height:1.9}
.anim .frame.placeholder .ph b{display:block;color:var(--red-deep);font-size:13px;margin-bottom:6px}

/* article prose */
.prose-art h2{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--red);margin:38px 0 14px;padding-top:24px;border-top:1px solid var(--rule-soft)}
.prose-art h2:first-child{border-top:0;padding-top:0;margin-top:0}
.prose-art p{font-size:1.18rem;line-height:1.62;color:var(--ink-soft);margin-bottom:18px}
.prose-art p b,.prose-art li b{color:var(--ink);font-weight:500}
.prose-art ul{list-style:none;margin:0 0 20px}
.prose-art li{position:relative;padding-left:24px;font-size:1.12rem;line-height:1.55;color:var(--ink-soft);margin-bottom:12px}
.prose-art li::before{content:"";position:absolute;left:4px;top:.62em;width:7px;height:7px;background:var(--red);transform:rotate(45deg)}
.prose-art blockquote{border-left:3px solid var(--red);padding:4px 0 4px 20px;margin:0 0 26px;
  font-family:"Libre Bodoni",serif;font-style:italic;font-size:1.3rem;line-height:1.4;color:var(--ink)}

/* "what this proves" pullout already styled by .proves in mock; add a standalone variant */
.proof-out{background:var(--salmon);border:1px solid var(--ink);padding:24px 28px;margin:34px 0}
.proof-out b{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red);display:block;margin-bottom:8px}
.proof-out p{font-family:"Libre Bodoni",serif;font-size:1.25rem;line-height:1.4;color:var(--ink);font-style:italic;margin:0}

/* screenshot figures */
.figure{margin:30px 0;border:1px solid var(--ink)}
.figure img{width:100%;display:block}
.figure figcaption{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.06em;color:var(--muted);
  padding:10px 14px;border-top:1px solid var(--rule)}

/* prev / next */
.casenav{display:grid;grid-template-columns:1fr 1fr;border-top:2px solid var(--ink);margin-top:10px}
.casenav a{padding:26px 0;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em;color:var(--ink-soft)}
.casenav a:hover{color:var(--red)}
.casenav a .lbl{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.casenav a .ttl{font-family:"Libre Bodoni",serif;font-size:1.2rem;color:var(--ink);font-style:normal;letter-spacing:0;text-transform:none}
.casenav .nx{text-align:right;border-left:1px solid var(--rule);padding-left:30px}
.casenav .pv{padding-right:30px}
.casenav .nx:hover .ttl,.casenav .pv:hover .ttl{color:var(--red)}
@media(max-width:600px){.casenav{grid-template-columns:1fr}.casenav .nx{text-align:left;border-left:0;border-top:1px solid var(--rule);padding-left:0}.casenav .pv{padding-right:0}}

/* ---------- mobile hero fix (mock's nowrap headline overflowed phones) ---------- */
@media(max-width:560px){
  h1{font-size:2.45rem;line-height:1.04}
  .redline-word{white-space:normal}
  .redline-word svg{display:none}      /* underline assumes a single line */
  .mast{padding:24px 0 48px}
  section{padding:68px 0}
  .standfirst{margin-top:24px}
}
/* tighten very-small screens (override) */
@media(max-width:560px){ h1{font-size:2.3rem;line-height:1.05;overflow-wrap:break-word} #h1 .wd{white-space:normal} }
@media(max-width:412px){ h1{font-size:1.95rem} }
/* root-cause mobile fix: grid 1fr track won't shrink below min-content -> hero overflow */
@media(max-width:860px){ .lead{grid-template-columns:minmax(0,1fr)} .lead>div{min-width:0} .about{grid-template-columns:minmax(0,1fr)} }
@media(max-width:760px){ .cluster-cards{grid-template-columns:minmax(0,1fr)} }
@media(max-width:560px){ .wrap{padding-left:20px;padding-right:20px} h1{overflow-wrap:anywhere} }

/* ============================================================
   Interaction additions (round 2)
   ============================================================ */

/* practice rows are now links to Selected Work */
a.pr{color:inherit}

/* featured cards: periodic diagonal "shine" sweep (dark glint) */
.disp.feat-card::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(27,24,19,.18) 47%,rgba(27,24,19,.06) 53%,transparent 62%);
  transform:translateX(-130%);
  animation:featShine 6.5s ease-in-out infinite;
}
@keyframes featShine{
  0%{transform:translateX(-130%)} 15%{transform:translateX(130%)} 100%{transform:translateX(130%)}
}

/* case-page animation: scroll-driven large→docked (JS sets width/margin) */
.anim-hero{will-change:width,margin}

/* email confirmation modal */
.modal-back{position:fixed;inset:0;z-index:200;background:rgba(27,24,19,.55);
  display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;
  visibility:hidden;transition:opacity .28s ease,visibility .28s}
.modal-back.on{opacity:1;visibility:visible}
.modal{background:var(--paper);border:1px solid var(--ink);max-width:440px;width:100%;
  padding:36px 34px 30px;text-align:center;transform:translateY(12px) scale(.98);
  transition:transform .28s cubic-bezier(.2,.7,.2,1);box-shadow:0 26px 70px rgba(27,24,19,.32);position:relative}
.modal-back.on .modal{transform:none}
.modal::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.modal .mk{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--red);font-weight:500}
.modal .mmsg{font-family:"Libre Bodoni",serif;font-size:clamp(1.25rem,2.4vw,1.6rem);line-height:1.3;
  color:var(--ink);margin:16px auto 0;max-width:24ch}
.modal .mrow{display:flex;gap:24px;justify-content:center;align-items:center;margin-top:26px;flex-wrap:wrap}
.modal .mclose{position:absolute;top:12px;right:16px;font-family:"IBM Plex Mono",monospace;font-size:18px;
  color:var(--muted);cursor:pointer;line-height:1;background:none;border:0}
.modal .mclose:hover{color:var(--red)}
.modal .mnote{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.04em;color:var(--muted);margin-top:18px}

/* ============================================================
   Round 3: deep-link offsets, keystone (Function design), home wordmark
   ============================================================ */

/* deep links should clear the sticky nav */
section[id]{scroll-margin-top:62px}
.cluster{scroll-margin-top:80px}

/* wordmark is now a link (landing scrolls to top) */
a.mark{cursor:pointer}

/* Function design — the capstone: a single full-width standout block */
.keystone-cards{grid-template-columns:1fr !important}
.disp.keystone{background:var(--salmon);border:1.5px solid var(--ink);padding:32px 38px;margin-top:8px}
.disp.keystone:nth-child(odd){padding-right:38px;border-right:1.5px solid var(--ink)}
.disp.keystone h3{font-size:clamp(1.9rem,3.4vw,2.6rem);margin-bottom:16px}
.disp.keystone .dek{font-size:1.2rem;max-width:66ch}
.disp.keystone .proves{font-size:1.05rem}
.disp.keystone .feat{color:var(--paper);background:var(--red-deep);border-color:var(--red-deep)}
.disp.keystone::before{display:none}

/* hide the hero constellation on phones / touch (no cursor to react to) */
@media (pointer:coarse), (max-width:760px){ #net{display:none !important} }