/* ============================================================
   KRS drawing-set hero (2026 redesign) · krs-dh-*
   Light = drafting white (default) · [data-theme=dark] = cyanotype blueprint
   Worker-compatible selectors preserved: .hero .eyebrow / .hero h1 /
   .hero .lede / .hero a.btn-primary  (krs-personalize edge worker)
   ============================================================ */
.hero.krs-dh{
  --dhPaper:#ffffff; --dhPaper2:#f6f7fa;
  --dhInk:#182238; --dhInk2:#323f59; --dhFaint:#5c6a82;
  --dhRule:#c9d0dc; --dhRule2:#e2e6ee; --dhGrid:#edf0f5; --dhCgrid:#d9e0ec;
  --dhRed:#c2361f; --dhBlue:#1868db; --dhBlueDark:#0f56c0;
  --dhShadow:0 20px 48px rgba(24,34,56,.12),0 5px 14px rgba(24,34,56,.07);
  --dhSerif:"Instrument Serif",Georgia,serif;
  --dhMono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --dhSans:"Figtree",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  background:var(--dhPaper);
  padding-top:96px;position:relative;overflow:hidden;
  border-bottom:1px solid var(--dhRule2);
  display:block;min-height:0;
}
:root[data-theme="dark"] .hero.krs-dh{
  --dhPaper:#16355f; --dhPaper2:#122e54;
  --dhInk:#e9f0fb; --dhInk2:#c4d2e8; --dhFaint:#8ba1c2;
  --dhRule:rgba(233,240,251,.30); --dhRule2:rgba(233,240,251,.12);
  --dhGrid:rgba(233,240,251,.09); --dhCgrid:rgba(233,240,251,.16);
  --dhRed:#ffd166; --dhBlue:#8fb8ff; --dhBlueDark:#a8c8ff;
  --dhShadow:0 20px 48px rgba(0,0,0,.38);
}
.krs-dh-inner{position:relative;z-index:1;width:100%;padding:clamp(28px,4.5vw,60px) 0 clamp(48px,6vw,80px);text-align:center}
.hero.krs-dh.krs-dh .wrap{margin-left:auto;margin-right:auto}

/* cursor-following grid reveal */
.krs-dh-cursor{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .4s ease;
  background:
    repeating-linear-gradient(90deg,var(--dhCgrid) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(0deg,var(--dhCgrid) 0 1px,transparent 1px 46px);
  -webkit-mask-image:radial-gradient(circle 320px at var(--gx,50%) var(--gy,40%),#000 0%,rgba(0,0,0,.75) 48%,transparent 74%);
  mask-image:radial-gradient(circle 320px at var(--gx,50%) var(--gy,40%),#000 0%,rgba(0,0,0,.75) 48%,transparent 74%)}
.krs-dh-cursor.is-on{opacity:1}

/* type — override the legacy dark-hero rules in this scope */
.hero.krs-dh.krs-dh .eyebrow{display:inline-flex;align-items:center;gap:14px;border:0;background:none;border-radius:0;padding:0;
  font-family:var(--dhMono);font-size:11.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--dhInk2);
  margin-bottom:28px;text-shadow:none}
.hero.krs-dh.krs-dh .eyebrow:before{content:"";width:38px;height:2px;background:var(--dhRed);flex:none;border-radius:2px}
.hero.krs-dh.krs-dh .eyebrow .dot{display:none}
.hero.krs-dh.krs-dh .eyebrow .dot::before,.hero.krs-dh.krs-dh .eyebrow .dot::after{display:none;content:none}
.hero.krs-dh.krs-dh h1{text-shadow:none;font-family:var(--dhSans);font-weight:800;font-size:clamp(30px,3.9vw,50px);line-height:1.05;letter-spacing:-.03em;margin:0 auto;max-width:none;white-space:nowrap;color:var(--dhInk)}
.hero.krs-dh.krs-dh h1 .krs-dh-accent{font-family:var(--dhSerif);font-style:italic;font-weight:400;color:var(--dhRed);letter-spacing:0;position:relative;white-space:nowrap}
.hero.krs-dh.krs-dh h1 .krs-dh-accent svg{position:absolute;left:2%;right:2%;bottom:-.1em;width:96%;height:.2em;overflow:visible}
.hero.krs-dh.krs-dh h1 .krs-dh-accent svg path{fill:none;stroke:var(--dhRed);stroke-width:3.4;stroke-linecap:round;
  stroke-dasharray:620;stroke-dashoffset:620;animation:krsDhUline .7s .55s cubic-bezier(.3,.6,.3,1) forwards}
@keyframes krsDhUline{to{stroke-dashoffset:0}}
.hero.krs-dh.krs-dh p.lede{text-shadow:none;font-size:clamp(17.5px,1.75vw,21px);color:var(--dhInk2);max-width:640px;margin:22px auto 0;line-height:1.62}
.hero.krs-dh.krs-dh .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;justify-content:center;position:relative;z-index:3}
.hero.krs-dh.krs-dh .btn{text-shadow:none;font-family:var(--dhSans);font-size:15.5px;font-weight:700;border-radius:5px;padding:13px 24px;transition:all .15s ease}
.hero.krs-dh.krs-dh .btn.btn-primary{background:var(--dhBlue);border:1.5px solid var(--dhBlue);color:#fff;transform:none}
.hero.krs-dh.krs-dh .btn.btn-primary:hover{background:var(--dhBlueDark);border-color:var(--dhBlueDark);transform:translateY(-1px)}
:root[data-theme="dark"] .hero.krs-dh.krs-dh .btn.btn-primary{background:#1868db;border-color:#1868db;color:#fff}
:root[data-theme="dark"] .hero.krs-dh.krs-dh .btn.btn-primary:hover{background:#2f7ae8;border-color:#2f7ae8}
.hero.krs-dh.krs-dh .btn.btn-soft{backdrop-filter:none;background:var(--dhPaper);border:1.5px solid var(--dhRule);color:var(--dhInk);backdrop-filter:none}
.hero.krs-dh.krs-dh .btn.btn-soft:hover{border-color:var(--dhInk2);color:var(--dhInk);background:var(--dhPaper);transform:translateY(-1px)}

/* ---------- the drawing board ---------- */
.krs-dh-board{position:relative;max-width:940px;margin:clamp(42px,5vw,66px) auto 0;text-align:left}
.krs-dh-boardgrid{position:absolute;inset:-36px -130px -44px;z-index:0;pointer-events:none;background:
  repeating-linear-gradient(90deg,var(--dhGrid) 0 1px,transparent 1px 46px),
  repeating-linear-gradient(0deg,var(--dhGrid) 0 1px,transparent 1px 46px);
  -webkit-mask-image:radial-gradient(74% 84% at 50% 46%,#000 42%,transparent 84%);
  mask-image:radial-gradient(74% 84% at 50% 46%,#000 42%,transparent 84%)}
.krs-dh-stack{position:relative;display:grid}
.krs-dh-sheet{grid-area:1/1;background:var(--dhPaper);border:2px solid var(--dhInk);border-radius:10px 10px 0 0;position:relative;overflow:hidden;
  box-shadow:var(--dhShadow);
  opacity:0;transform:translateX(52px) rotate(.4deg);pointer-events:none;
  transition:opacity .5s cubic-bezier(.2,.8,.2,1),transform .5s cubic-bezier(.2,.8,.2,1)}
.krs-dh-sheet.is-in{opacity:1;transform:none;pointer-events:auto;z-index:2}
.krs-dh-sheet.is-out{opacity:0;transform:translateX(-46px) rotate(-.3deg);z-index:1}
.krs-dh-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-bottom:2px solid var(--dhInk);padding:12px 18px;font-family:var(--dhMono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;background:var(--dhPaper2);color:var(--dhInk)}
.krs-dh-head b{font-weight:600}
.krs-dh-head span{color:var(--dhFaint)}
.krs-dh-body{padding:10px 8px 8px}
.krs-dh-sheet svg{width:100%;height:auto;display:block}

/* svg drafting language */
.krs-dh-sv text{font-family:"IBM Plex Mono",monospace;fill:var(--dhInk)}
.krs-dh-sv .lbl{font-size:12.5px;font-weight:500}
.krs-dh-sv .sm{font-size:11px;fill:var(--dhFaint);font-weight:500}
.krs-dh-sv .cap{font-size:10.8px;letter-spacing:.06em;fill:var(--dhInk2);font-weight:600}
.krs-dh-sv .rl{stroke:var(--dhRule);stroke-width:1.2}
.krs-dh-sv .ink{stroke:var(--dhInk);stroke-width:1.8;fill:none}
.krs-dh-sv .ink2{stroke:var(--dhInk2);stroke-width:1.4;fill:none}
.krs-dh-sv .hatchline{stroke:#44506a;stroke-width:1.2;opacity:.55}
:root[data-theme="dark"] .krs-dh-sv .hatchline{stroke:rgba(233,240,251,.6)}
.krs-dh-sv .chip{fill:var(--dhPaper)}
.krs-dh-sv .nodebox{fill:var(--dhPaper);stroke:var(--dhInk);stroke-width:1.8}
.krs-dh-sv .nodebox.done{stroke-width:3}
.krs-dh-sv .okmk{font-size:13px;fill:var(--dhInk);font-weight:600}
.krs-dh-sv .mk{stroke:var(--dhRed);fill:none;stroke-width:2.6;stroke-linecap:round}
.krs-dh-sv text.mkt{fill:var(--dhRed);font-size:11.5px;font-weight:600}
.krs-dh-sv .mkfill{fill:var(--dhRed)}
.krs-dh-sheet.is-in .mk{stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);animation:krsDhDraw .8s .45s cubic-bezier(.3,.6,.3,1) forwards}
@keyframes krsDhDraw{to{stroke-dashoffset:0}}
.krs-dh-sheet.is-in .mkt,.krs-dh-sheet.is-in .mkfill{opacity:0;animation:krsDhMkfade .4s .95s forwards}
@keyframes krsDhMkfade{to{opacity:1}}
.krs-dh-sv .stamp rect{fill:none;stroke:var(--dhRed);stroke-width:2.4}
.krs-dh-sv .stamp text{fill:var(--dhRed);font-weight:600}
.krs-dh-sheet.is-in .stamp{opacity:0;transform-origin:center;animation:krsDhStamp .3s 1.15s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes krsDhStamp{0%{opacity:0;transform:scale(1.5) rotate(-7deg)}100%{opacity:1;transform:scale(1) rotate(-4deg)}}

/* title block */
.krs-dh-tblock{display:grid;grid-template-columns:auto 1fr auto;border:2px solid var(--dhInk);border-top:0;border-radius:0 0 10px 10px;background:var(--dhPaper);
  font-family:var(--dhMono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;position:relative;z-index:2;color:var(--dhInk)}
.krs-dh-tblock>div{padding:10px 15px;border-right:1px solid var(--dhRule)}
.krs-dh-tblock>div:last-child{border-right:0}
.krs-dh-tblock small{display:block;font-size:9px;color:var(--dhFaint);letter-spacing:.12em;margin-bottom:2px;font-weight:600}
.krs-dh-tblock b{font-weight:600}
.krs-dh-photo{display:flex;align-items:center;gap:11px;padding:7px 15px!important}
.krs-dh-photo img{width:36px;height:36px;object-fit:cover;filter:grayscale(1) contrast(1.06);border:1.5px solid var(--dhInk);border-radius:4px}
.krs-dh-sheetno b{color:var(--dhRed)}

/* drawing-set index */
.krs-dh-index{display:flex;margin-top:14px;border:1.5px solid var(--dhRule);border-radius:8px;background:var(--dhPaper);overflow:hidden;position:relative;z-index:2}
.krs-dh-idx{flex:1;padding:12px 13px 14px;font-family:var(--dhMono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--dhFaint);
  background:none;border:0;border-right:1px solid var(--dhRule);cursor:pointer;position:relative;text-align:left}
.krs-dh-idx:last-child{border-right:0}
.krs-dh-idx b{display:block;color:var(--dhInk2);font-weight:600;margin-bottom:1px;font-size:11.5px}
.krs-dh-idx:hover{background:var(--dhPaper2)}
.krs-dh-idx:hover b{color:var(--dhRed)}
.krs-dh-idx .bar{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--dhRed)}
.krs-dh-idx.on b{color:var(--dhRed)}
.krs-dh-idx.on .bar{animation:krsDhBar var(--dur,6s) linear forwards}
.krs-dh-board.paused .krs-dh-idx.on .bar{animation-play-state:paused}
@keyframes krsDhBar{to{width:100%}}

/* caption */
.krs-dh-note{display:flex;gap:10px;justify-content:center;margin-top:28px;font-family:var(--dhMono);font-size:12px;line-height:1.7;color:var(--dhFaint);text-align:left;max-width:580px;margin-left:auto;margin-right:auto}
.krs-dh-note b{color:var(--dhRed);font-weight:600}

@media(max-width:900px){
  /* headline can't hold one line on narrow screens — let it wrap cleanly */
  .hero.krs-dh.krs-dh h1{white-space:normal;max-width:18ch}
}
@media(max-width:720px){
  .hero.krs-dh.krs-dh h1{text-shadow:none;font-size:clamp(34px,9vw,46px)}
  .krs-dh-idx{padding:10px 9px 13px}
  .krs-dh-idx small{display:none}
  .krs-dh-tblock{grid-template-columns:auto 1fr}
  .krs-dh-sheetno{display:none}
  .krs-dh-sv .lbl{font-size:14px}
}
@media (prefers-reduced-motion: reduce){
  .krs-dh-cursor{display:none}
  .krs-dh-sheet{transition:none}
  .krs-dh-sheet.is-in .mk{animation:none;stroke-dashoffset:0}
  .krs-dh-sheet.is-in .mkt,.krs-dh-sheet.is-in .mkfill{animation:none;opacity:1}
  .krs-dh-sheet.is-in .stamp{animation:none;opacity:1;transform:rotate(-4deg)}
  .hero.krs-dh.krs-dh h1 .krs-dh-accent svg path{animation:none;stroke-dashoffset:0}
  .krs-dh-idx.on .bar{animation:none;width:100%}
}