/* andrewrozhok.com — drafting table design system — REV A */
:root{
  --bg:#FBFAF6; --panel:#FFFFFF;
  --grid:rgba(106,158,191,.085); --grid-major:rgba(106,158,191,.16);
  --ink:#15181B; --graphite:#6E6E68; --markup:#D43D2A;
  --safari-edge:rgba(0,0,0,.28); --safari-chrome:#E8E6E0; --safari-body:#FFFFFF; --safari-addr:#FFFFFF; --safari-addr-text:#888; --device-edge:#1A1A1C;
  color-scheme:light;
}
[data-theme="dark"]{--safari-edge:rgba(255,255,255,.18);--safari-chrome:#1C1C1E;--safari-body:#0A0A0B;--safari-addr:#2C2C2E;--safari-addr-text:#BBB;--device-edge:#0A0A0B;
  --bg:#0F2B47; --panel:#143352;
  --grid:rgba(186,219,243,.06); --grid-major:rgba(186,219,243,.13);
  --ink:#E9F2FA; --graphite:#8FA9BE; --markup:#FF7A52;
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  [data-theme="auto"]{
    --bg:#0F2B47; --panel:#143352;
    --grid:rgba(186,219,243,.06); --grid-major:rgba(186,219,243,.13);
    --ink:#E9F2FA; --graphite:#8FA9BE; --markup:#FF7A52;
    --safari-edge:rgba(255,255,255,.18); --safari-chrome:#1C1C1E; --safari-body:#0A0A0B; --safari-addr:#2C2C2E; --safari-addr-text:#BBB; --device-edge:#0A0A0B;
    color-scheme:dark;
  }
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  font-family:'Montserrat',sans-serif;color:var(--ink);
  background-color:var(--bg);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:64pt 64pt,64pt 64pt,8pt 8pt,8pt 8pt;
  line-height:1.55;padding-bottom:24pt;
  transition:background-color .35s ease,color .35s ease;
}
.mono{font-family:'IBM Plex Mono',monospace}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2pt solid var(--markup);outline-offset:3pt}

/* ---------- file bar ---------- */
.filebar{
  display:flex;justify-content:space-between;align-items:center;gap:16pt;flex-wrap:wrap;
  padding:8pt 24pt;border-bottom:1px solid var(--ink);
  font-family:'IBM Plex Mono',monospace;font-size:8.5pt;letter-spacing:.04em;
  background:var(--bg);position:sticky;top:0;z-index:50;transition:background-color .35s ease;
}
.filebar .dot{color:var(--markup)}
.filebar .right{display:flex;align-items:center;gap:18pt;flex-wrap:wrap}
.filebar nav{display:flex;gap:24pt}
.filebar nav a{text-decoration:none;position:relative}
.filebar nav a::before{content:"[ ";color:var(--markup);opacity:0;transition:opacity .15s}
.filebar nav a::after{content:" ]";color:var(--markup);opacity:0;transition:opacity .15s}
.filebar nav a:hover::before,.filebar nav a:hover::after{opacity:1}

.switch{display:flex;border:1px solid var(--ink);font-family:'IBM Plex Mono',monospace;font-size:7.5pt;background:var(--panel);transition:background-color .35s ease}
.switch button{appearance:none;border:none;background:transparent;cursor:pointer;color:var(--graphite);font:inherit;letter-spacing:inherit;padding:4pt 8pt;position:relative;transition:color .2s}
.switch button + button{border-left:1px solid var(--ink)}
.switch button:hover{color:var(--ink)}
.switch button[aria-pressed="true"]{color:var(--ink);font-weight:500}
.switch button[aria-pressed="true"]::after{content:"";position:absolute;left:6pt;right:6pt;bottom:2pt;border-bottom:2pt solid var(--markup)}
.switch .glyph{margin-right:3pt;color:var(--markup)}

/* ---------- hero (home) ---------- */
.hero{min-height:86vh;display:flex;flex-direction:column;justify-content:center;padding:48pt 24pt;position:relative;overflow:hidden}
.sig-wrap{position:relative;width:fit-content;margin:0 auto}
.sig-svg{width:min(86vw,620pt);height:auto;display:block;color:var(--ink)}
.sig-svg .st{stroke-dasharray:1 2;stroke-dashoffset:1.02;animation-name:sigdraw;animation-timing-function:ease-out;animation-fill-mode:forwards}
@keyframes sigdraw{to{stroke-dashoffset:0}}
.sig-svg .settle{animation-name:sigsettle;animation-duration:.5s;animation-fill-mode:forwards}
@keyframes sigsettle{to{opacity:1}}
@media (prefers-reduced-motion: reduce){
  .sig-svg .st{animation:none;stroke-dashoffset:0}
  .sig-svg .settle{animation:none;opacity:1}
}
.dim{position:absolute;font-family:'IBM Plex Mono',monospace;font-size:8pt;color:var(--markup);opacity:0;animation:fadein .6s ease 2.5s forwards}
@keyframes fadein{to{opacity:1}}
.dim-baseline{left:-4%;right:-4%;bottom:22%;border-bottom:1px solid var(--markup)}
.dim-baseline span{position:absolute;right:0;bottom:0;top:auto;transform:translateY(calc(100% + 3pt))}
.dim-cap{left:-4%;right:-4%;top:14%;border-top:1px dashed var(--markup)}
.dim-cap span{position:absolute;left:0;top:0;bottom:auto;transform:translateY(calc(-100% - 3pt))}
.dim-height{top:14%;bottom:22%;left:-9%;border-left:1px solid var(--markup);width:1px}
.dim-height::before,.dim-height::after{content:"";position:absolute;left:-3pt;width:7pt;border-top:1px solid var(--markup)}
.dim-height::before{top:0}.dim-height::after{bottom:0}
.dim-height span{position:absolute;top:50%;left:-8pt;transform:rotate(-90deg) translateX(-50%);transform-origin:left;white-space:nowrap}
.hero-sub{text-align:center;margin-top:40pt;font-size:10.5pt;letter-spacing:.32em;text-transform:uppercase;font-weight:600}
.hero-meta{text-align:center;margin-top:10pt;color:var(--graphite);font-family:'IBM Plex Mono',monospace;font-size:8.5pt}
.hero-note{position:absolute;right:24pt;bottom:24pt;max-width:180pt;font-family:'IBM Plex Mono',monospace;font-size:8pt;color:var(--markup);border-left:1px solid var(--markup);padding-left:8pt}

/* ---------- sections ---------- */
section{padding:32pt 24pt;max-width:900pt;margin:0 auto}
.sec-label{font-family:'IBM Plex Mono',monospace;font-size:8.5pt;color:var(--markup);letter-spacing:.08em;margin-bottom:28pt;display:flex;align-items:center;gap:8pt}
.sec-label::after{content:"";flex:1;border-top:1px solid var(--markup);opacity:.4}

/* ---------- plates ---------- */
.plates{display:grid;grid-template-columns:repeat(auto-fill,minmax(220pt,1fr));gap:40pt}
.plate{position:relative;background:var(--panel);border:1px solid var(--ink);display:block;text-decoration:none;transition:transform .2s ease,background-color .35s ease;cursor:crosshair}
.plate:hover{transform:translateY(-3pt)}
.plate::before,.plate::after,.plate .cm::before,.plate .cm::after{content:"";position:absolute;width:12pt;height:12pt;pointer-events:none}
.plate::before{top:-13pt;left:-13pt;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.plate::after{top:-13pt;right:-13pt;border-left:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.plate .cm::before{bottom:-13pt;left:-13pt;border-right:1px solid var(--ink);border-top:1px solid var(--ink)}
.plate .cm::after{bottom:-13pt;right:-13pt;border-left:1px solid var(--ink);border-top:1px solid var(--ink)}
.plate-head{display:flex;justify-content:space-between;align-items:baseline;padding:8pt 12pt;border-bottom:1px solid var(--ink);font-family:'IBM Plex Mono',monospace;font-size:7.5pt}
.plate-head .no{color:var(--markup);font-weight:500}
.plate-head .kind{color:var(--graphite);letter-spacing:.06em;text-transform:uppercase}
.plate-art{height:170pt;position:relative;overflow:hidden}
.plate-art .tag{position:absolute;right:6pt;bottom:6pt;font-family:'IBM Plex Mono',monospace;font-size:6.5pt;color:#fff;opacity:1;z-index:3;background:rgba(15,18,20,.62);padding:1.5pt 4.5pt;border-radius:3pt;letter-spacing:.02em;line-height:1.2}
.plate-cap{padding:10pt 12pt;border-top:1px solid var(--ink)}
.plate-cap h3{font-size:11pt;font-weight:600}
.plate-cap .scope{font-family:'IBM Plex Mono',monospace;font-size:7.5pt;color:var(--graphite);margin-top:2pt}
.swatches{display:flex;border-top:1px solid var(--ink);height:10pt}
.swatches span{flex:1}
.swatches span + span{border-left:1px solid var(--ink)}

/* artifact treatments */
.browser{position:absolute;inset:14pt 14pt 0 14pt;background:#fff;border:1px solid rgba(0,0,0,.35);border-bottom:none;box-shadow:0 4pt 14pt rgba(0,0,0,.18)}
.browser .bar{height:10pt;display:flex;align-items:center;gap:3pt;padding:0 5pt;border-bottom:1px solid rgba(0,0,0,.18);background:#F2F0EA}
.browser .bar i{width:4pt;height:4pt;border-radius:50%;background:rgba(0,0,0,.25)}
.browser .page{position:absolute;inset:10pt 0 0 0}
.logo-field{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.film{position:absolute;inset:0;background:#0C0C0E;display:flex;align-items:center}
.film .sprockets{position:absolute;left:0;right:0;height:10pt;display:flex;justify-content:space-around;align-items:center}
.film .sprockets.top{top:0}.film .sprockets.bottom{bottom:0}
.film .sprockets i{width:7pt;height:5pt;background:var(--panel);border-radius:1pt;transition:background-color .35s ease}
.film .frame{position:absolute;inset:13pt 14pt;overflow:hidden}
.film .exif{position:absolute;left:14pt;bottom:15pt;font-family:'IBM Plex Mono',monospace;font-size:6.5pt;color:#FFB000;letter-spacing:.08em;z-index:3}
.vid .tc{position:absolute;left:14pt;top:15pt;font-family:'IBM Plex Mono',monospace;font-size:6.5pt;color:#fff;letter-spacing:.1em;z-index:3;display:flex;gap:6pt;align-items:center}
.vid .tc .rec{width:5pt;height:5pt;border-radius:50%;background:var(--markup);animation:blink 1.4s steps(1) infinite}
@keyframes blink{50%{opacity:.2}}
.vid .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:0;height:0;z-index:3;border-left:14pt solid rgba(255,255,255,.9);border-top:9pt solid transparent;border-bottom:9pt solid transparent;filter:drop-shadow(0 2pt 6pt rgba(0,0,0,.4))}

/* placeholder artwork (replaced by real assets) */
.pg-kapela{background:linear-gradient(180deg,#1A2A44 0 28%,#B8924A 28% 30%,#1A2A44 30%)}
.pg-kapela .lines{position:absolute;left:10%;top:44%;width:46%;display:grid;gap:4pt}
.pg-kapela .lines i{height:2pt;background:rgba(255,255,255,.55)}
.pg-kapela .lines i:nth-child(2){width:80%}.pg-kapela .lines i:nth-child(3){width:60%}
.pg-christy{background:linear-gradient(180deg,#F4EDE4 0 34%,#CBB7A4 34% 36%,#F4EDE4 36%)}
.pg-christy .blocks{position:absolute;left:8%;right:8%;top:46%;display:grid;grid-template-columns:1fr 1fr 1fr;gap:6pt}
.pg-christy .blocks i{height:34pt;background:#D9C9B8}
.pg-hiic{background:linear-gradient(180deg,#EAF3EF 0 30%,#0E3B33 30%)}
.pg-hiic .hero-line{position:absolute;left:10%;top:40%;width:50%;height:8pt;background:#1C6E5C}
.pg-pgc{background:linear-gradient(180deg,#FBF6EE 0 32%,#9A2B2B 32% 34%,#FBF6EE 34%)}
.pg-pgc .blocks{position:absolute;left:8%;right:8%;top:44%;display:grid;grid-template-columns:1fr 1fr;gap:6pt}
.pg-pgc .blocks i{height:30pt;background:#E8D9C2}
.kolea-mark{width:64pt;height:64pt;border:2pt solid #E8DFC9;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#E8DFC9;font-family:'IBM Plex Mono',monospace;font-size:7pt;letter-spacing:.1em}
.ph-dusk{background:linear-gradient(180deg,#2E2A5E 0%,#B14A6B 55%,#E89B5A 100%)}
.ph-ocean{background:linear-gradient(165deg,#04222B 0%,#0A4D57 45%,#15808A 75%,#7FCBC4 100%)}

/* ---------- about / contact ---------- */
.about-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:48pt;align-items:start}
.about-grid h2{font-size:22pt;font-weight:700;line-height:1.25;margin-bottom:16pt}
.about-grid h2 em{font-style:normal;border-bottom:2pt solid var(--markup)}
.about-grid p{font-size:10.5pt;max-width:46ch;margin-bottom:10pt}
/* About: heading + body share the left column; portrait/info on the right starts at the heading row */
.about-section{max-width:900pt;margin:0 auto;padding:48pt 24pt 32pt}
.about-left .kicker{font-family:'IBM Plex Mono',monospace;font-size:8.5pt;color:var(--markup);letter-spacing:.08em;margin-bottom:10pt}
.about-left h1{font-size:30pt;font-weight:700;line-height:1.1;margin-bottom:12pt}
.about-left .lede{color:var(--graphite);margin-bottom:24pt}
.about-left p+p{margin-top:0}
.spec{border:1px solid var(--ink);background:var(--panel);padding:16pt;font-family:'IBM Plex Mono',monospace;font-size:8.5pt;line-height:2;transition:background-color .35s ease}
.spec b{color:var(--markup);font-weight:500}
.contact{text-align:center;padding-bottom:80pt}
.contact .sig-small{font-family:'Great Vibes',cursive;font-size:34pt;margin-bottom:8pt}
.contact a.mail{display:inline-block;font-size:15pt;font-weight:600;margin-top:8pt}
.contact .mono{color:var(--graphite);font-size:8.5pt;margin-top:20pt}
.ink-link{text-decoration:none;background-image:linear-gradient(var(--markup),var(--markup));background-repeat:no-repeat;background-position:0 100%;background-size:0% 2pt;transition:background-size .35s cubic-bezier(.6,.05,.4,.95);padding-bottom:2pt}
.ink-link:hover{background-size:100% 2pt}

/* ---------- case study sheet ---------- */
.sheet{max-width:900pt;margin:0 auto;padding:48pt 24pt 32pt}
.sheet-head{display:grid;grid-template-columns:1.4fr 1fr;gap:40pt;align-items:end;margin-bottom:48pt}
.sheet-head h1{font-size:30pt;font-weight:700;line-height:1.1}
.sheet-head .kicker{font-family:'IBM Plex Mono',monospace;font-size:8.5pt;color:var(--markup);margin-bottom:10pt;letter-spacing:.08em}
.titleblock{border:1.5pt solid var(--ink);font-family:'IBM Plex Mono',monospace;font-size:8pt;background:var(--panel);transition:background-color .35s ease}
.titleblock .row{display:flex;border-top:1px solid var(--ink)}
.titleblock .row:first-child{border-top:none}
.titleblock .cell{padding:5pt 8pt;border-left:1px solid var(--ink);flex:1;min-width:0}
.titleblock .cell:first-child{border-left:none}
.titleblock .lbl{display:block;font-size:6pt;color:var(--graphite);letter-spacing:.1em}
.titleblock .sigcell{font-family:'Great Vibes',cursive;font-size:14pt;line-height:1.1}
.sheet .plate{max-width:520pt;margin:0 auto 56pt}
.sheet .plate .plate-art{height:220pt}
.sheet h2.sub{font-size:14pt;font-weight:600;margin-bottom:10pt}
.sheet .prose{max-width:62ch;font-size:10.5pt;margin-bottom:14pt}
.fill{color:var(--graphite);background:color-mix(in srgb, var(--markup) 8%, transparent);border:1px dashed var(--markup);padding:1pt 5pt;font-family:'IBM Plex Mono',monospace;font-size:9pt}
.artifact-slot{border:1px dashed var(--markup);background:var(--panel);min-height:200pt;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6pt;margin:20pt 0;font-family:'IBM Plex Mono',monospace;font-size:8pt;color:var(--markup);transition:background-color .35s ease}
.artifact-slot .big{font-size:11pt}
.palette-row{display:flex;gap:0;border:1px solid var(--ink);height:48pt;margin:14pt 0 28pt;max-width:480pt}
.palette-row span{flex:1;position:relative}
.palette-row span + span{border-left:1px solid var(--ink)}
.palette-row span i{position:absolute;left:0;right:0;bottom:0;padding:3pt 4pt;font-family:'IBM Plex Mono',monospace;font-size:7.5pt;font-style:normal;letter-spacing:.02em;color:#fff;background:rgba(0,0,0,.42);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheet-nav{display:flex;justify-content:space-between;border-top:1px solid var(--ink);padding:16pt 0 0;font-family:'IBM Plex Mono',monospace;font-size:8.5pt}
.sheet-nav a{text-decoration:none}
.sheet-nav a:hover{color:var(--markup)}

/* ---------- rev / footer ---------- */
.rev{max-width:900pt;margin:0 auto;padding:0 24pt 32pt}
.rev table{border-collapse:collapse;font-family:'IBM Plex Mono',monospace;font-size:7.5pt;color:var(--graphite);margin-left:auto}
.rev th,.rev td{border:1px solid var(--ink);padding:3pt 10pt;text-align:left;font-weight:400}
.rev th{color:var(--markup);letter-spacing:.08em}
footer{border-top:1px solid var(--ink);padding:10pt 24pt;display:flex;justify-content:space-between;gap:12pt;flex-wrap:wrap;font-family:'IBM Plex Mono',monospace;font-size:8pt;color:var(--graphite);background:var(--bg);transition:background-color .35s ease}

/* ---------- status bar ---------- */
.statusbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;gap:18pt;padding:4pt 24pt;border-top:1px solid var(--ink);background:var(--bg);font-family:'IBM Plex Mono',monospace;font-size:7.5pt;letter-spacing:.05em;color:var(--graphite);transition:background-color .35s ease}
.statusbar .coords{color:var(--ink);min-width:120pt}
.statusbar button{appearance:none;border:none;background:transparent;cursor:pointer;font:inherit;letter-spacing:inherit;color:var(--graphite);padding:1pt 2pt}
.statusbar button[data-on="true"]{color:var(--markup);font-weight:500}
.statusbar .spacer{flex:1}

/* ---------- scroll ruler ---------- */
.scroll-ruler{position:fixed;top:0;right:0;bottom:0;width:16pt;z-index:55;pointer-events:none;border-left:1px solid var(--grid-major);
  background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 63px,var(--grid-major) 63px,var(--grid-major) 64px),
  repeating-linear-gradient(to bottom,transparent 0,transparent 15px,var(--grid) 15px,var(--grid) 16px)}
.scroll-ruler .mark{position:absolute;left:0;right:0;height:1px;background:var(--markup)}
.scroll-ruler .mark::after{content:attr(data-pt);position:absolute;right:2pt;bottom:2pt;font-family:'IBM Plex Mono',monospace;font-size:6pt;color:var(--markup);writing-mode:vertical-rl}

/* ---------- measure mode ---------- */
body.measuring,body.measuring *{cursor:crosshair!important}
.m-overlay{position:fixed;z-index:90;pointer-events:none;display:none;border:1px solid var(--markup);box-shadow:0 0 0 1px color-mix(in srgb,var(--markup) 25%,transparent)}
.m-overlay .mw,.m-overlay .mh,.m-overlay .mt{position:absolute;font-family:'IBM Plex Mono',monospace;font-size:7pt;color:var(--bg);background:var(--markup);padding:0 3pt;white-space:nowrap}
.m-overlay .mw{top:-12pt;left:50%;transform:translateX(-50%)}
.m-overlay .mh{right:-12pt;top:50%;transform:translateY(-50%) rotate(90deg)}
.m-overlay .mt{bottom:-12pt;left:0}

/* ---------- 404 ---------- */
.lost{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24pt}
.lost .code{font-family:'IBM Plex Mono',monospace;font-size:8.5pt;color:var(--markup);letter-spacing:.1em;margin-bottom:14pt}
.lost h1{font-size:26pt;font-weight:700;margin-bottom:10pt}
.lost p{color:var(--graphite);font-size:10.5pt;max-width:44ch;margin-bottom:24pt}
.lost .torn{width:220pt;height:1px;border-top:2pt dashed var(--markup);margin-bottom:24pt;transform:rotate(-1.2deg)}

/* ---------- print: drawing sheet ---------- */
.print-titleblock{display:none}
@media print{
  :root{--bg:#fff;--panel:#fff;--ink:#000;--graphite:#444;--markup:#C0341F;--grid:rgba(0,0,0,.05);--grid-major:rgba(0,0,0,.10)}
  .filebar,.statusbar,.scroll-ruler,.m-overlay,.switch{display:none!important}
  body{padding-bottom:0;background-image:none}
  .hero{min-height:auto;padding:24pt}
  .sig-svg .st{animation:none;stroke-dashoffset:0}
  .sig-svg .settle{animation:none;opacity:1}
  .dim{animation:none;opacity:1}
  .print-titleblock{display:block;margin:24pt;border:1.5pt solid #000;font-family:'IBM Plex Mono',monospace;font-size:8pt;page-break-inside:avoid}
  .print-titleblock .row{display:flex;border-top:1px solid #000}
  .print-titleblock .row:first-child{border-top:none}
  .print-titleblock .cell{padding:4pt 8pt;border-left:1px solid #000;flex:1}
  .print-titleblock .cell:first-child{border-left:none}
  .print-titleblock .lbl{display:block;font-size:6pt;color:#666;letter-spacing:.1em}
  .print-titleblock .sig-print{font-family:'Great Vibes',cursive;font-size:16pt}
}

@media (max-width:640px){
  .about-grid,.sheet-head{grid-template-columns:1fr}
  .hero-note,.dim-height,.scroll-ruler{display:none}
  .statusbar .coords,.statusbar .snap-btn{display:none}
  .self-portrait{--sp-w:min(78vw,360px)}
  .sp-frame{display:flex;justify-content:center;padding:14pt 0}
  .sp-cap{justify-content:flex-start}
  
}

/* ============ REV B: pages ============ */
/* featured strip on home */
.more-link{display:inline-block;margin-top:28pt;font-family:'IBM Plex Mono',monospace;font-size:8.5pt;text-decoration:none;color:var(--markup)}
.more-link:hover{font-weight:500}
.page-head{max-width:900pt;margin:0 auto;padding:48pt 24pt 0}
.page-head .kicker{font-family:'IBM Plex Mono',monospace;font-size:8.5pt;color:var(--markup);letter-spacing:.08em;margin-bottom:10pt}
.page-head h1{font-size:30pt;font-weight:700;line-height:1.1;max-width:18em}
.page-head .lede{color:var(--graphite);font-size:10.5pt;max-width:58ch;margin-top:12pt}

/* process steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(160pt,1fr));gap:24pt}
.step{border:1px solid var(--ink);background:var(--panel);padding:14pt;transition:background-color .35s ease}
.step .n{font-family:'IBM Plex Mono',monospace;font-size:8pt;color:var(--markup);display:block;margin-bottom:6pt}
.step h3{font-size:11pt;font-weight:600;margin-bottom:4pt}
.step p{font-size:9pt;color:var(--graphite)}

/* instruments table */
.instruments{border:1px solid var(--ink);background:var(--panel);font-family:'IBM Plex Mono',monospace;font-size:8.5pt;transition:background-color .35s ease}
.instruments .irow{display:grid;grid-template-columns:120pt 1fr;border-top:1px solid var(--ink)}
.instruments .irow:first-child{border-top:none}
.instruments .irow > span{padding:7pt 12pt}
.instruments .irow > span:first-child{color:var(--markup);border-right:1px solid var(--ink)}

/* sketchpad */
.padwrap{border:1px solid var(--ink);background:var(--panel);position:relative;transition:background-color .35s ease}
.padbar{display:flex;align-items:center;gap:14pt;padding:6pt 12pt;border-bottom:1px solid var(--ink);font-family:'IBM Plex Mono',monospace;font-size:7.5pt;flex-wrap:wrap}
.padbar button{appearance:none;border:none;background:transparent;cursor:pointer;font:inherit;color:var(--graphite);padding:2pt 4pt}
.padbar button[data-on="true"]{color:var(--markup);font-weight:500}
#sketch{display:block;width:100%;height:340pt;cursor:crosshair;touch-action:none;
  background-image:linear-gradient(var(--grid-major) 1px,transparent 1px),linear-gradient(90deg,var(--grid-major) 1px,transparent 1px),linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:64pt 64pt,64pt 64pt,8pt 8pt,8pt 8pt}
.pad-note{font-family:'IBM Plex Mono',monospace;font-size:7.5pt;color:var(--graphite);margin-top:8pt}

/* pinboard */
.pins{display:grid;grid-template-columns:repeat(auto-fill,minmax(180pt,1fr));gap:28pt}
.pin{position:relative;border:1px solid var(--ink);background:var(--panel);padding:14pt;transform:rotate(var(--tilt,0deg));transition:transform .2s ease,background-color .35s ease}
.pin:hover{transform:rotate(0) translateY(-2pt)}
.pin::before{content:"";position:absolute;top:-6pt;left:50%;transform:translateX(-50%);width:9pt;height:9pt;border-radius:50%;background:var(--markup);box-shadow:0 2pt 4pt rgba(0,0,0,.25)}
.pin .tagline{font-family:'IBM Plex Mono',monospace;font-size:7pt;color:var(--markup);letter-spacing:.08em;margin-bottom:6pt}
.pin p{font-size:9.5pt}

/* work-order form */
.order{width:100%;margin:0;border:1.5pt solid var(--ink);background:var(--panel);position:relative;transition:background-color .35s ease}
.order .ohead{display:flex;justify-content:space-between;padding:10pt 14pt;border-bottom:1px solid var(--ink);font-family:'IBM Plex Mono',monospace;font-size:8pt}
.order .ohead .no{color:var(--markup);font-weight:500}
.order .obody{padding:18pt 14pt}
.field{margin-bottom:16pt}
.field label{display:block;font-family:'IBM Plex Mono',monospace;font-size:7.5pt;color:var(--markup);letter-spacing:.08em;margin-bottom:5pt}
.field input[type=text],.field input[type=email],.field select,.field textarea{
  width:100%;border:1px solid var(--ink);background:var(--bg);color:var(--ink);
  font-family:'Montserrat',sans-serif;font-size:10pt;padding:7pt 9pt;border-radius:0;transition:background-color .35s ease}
.field textarea{min-height:90pt;resize:vertical}
.chips{display:flex;gap:8pt;flex-wrap:wrap}
.chips label{display:flex;align-items:center;gap:5pt;border:1px solid var(--ink);padding:5pt 9pt;cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:8pt;color:var(--ink);margin:0;letter-spacing:0}
.chips input{accent-color:var(--markup)}
.chips label:has(input:checked){border-color:var(--markup);color:var(--markup);font-weight:500}
.chips .hi-only{font-size:6.5pt;font-weight:400;color:var(--graphite);letter-spacing:.03em;text-transform:none;white-space:nowrap}
.order .submit{appearance:none;border:1.5pt solid var(--markup);background:transparent;color:var(--markup);
  font-family:'IBM Plex Mono',monospace;font-size:9pt;letter-spacing:.1em;padding:9pt 18pt;cursor:pointer}
.order .submit:hover{background:var(--markup);color:var(--bg)}
.stamp{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:color-mix(in srgb,var(--bg) 82%,transparent);z-index:5}
.stamp.show{display:flex}
.stamp .box{border:3pt solid var(--markup);color:var(--markup);padding:12pt 22pt;
  font-family:'IBM Plex Mono',monospace;font-size:14pt;font-weight:500;letter-spacing:.12em;
  transform:rotate(-8deg);animation:stampin .35s cubic-bezier(.2,1.6,.4,1) forwards}
.stamp .box small{display:block;font-size:8pt;letter-spacing:.08em;margin-top:4pt;text-align:center}
@keyframes stampin{from{transform:rotate(-8deg) scale(2.4);opacity:0}to{transform:rotate(-8deg) scale(1);opacity:1}}


/* ============ REV D: endless paper ============ */
/* The grid lives on the canvas (html) itself, so rubber-band
   overscroll above the header and below the footer reveals
   more of the same sheet — endless paper, both directions. */
html{
  background-color:var(--bg);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:64pt 64pt,64pt 64pt,8pt 8pt,8pt 8pt;
  transition:background-color .35s ease;
}
/* homepage opening: hide the endless-paper (html) grid until the draw settles */
html[data-grid="off"]{background-image:none !important}

body{background-color:transparent;background-image:none}
/* GRID OFF must now clear the html canvas, not the body (handled in JS) */
html.nogrid,html.nogrid body{background-image:none !important}

/* ============ REV F: touch ============ */
/* tap feedback where hover can't exist */
.plate:active{transform:translateY(-2pt)}
@media (hover:none){
  .ink-link{background-size:100% 2pt}            /* underline always drawn on touch */
  .filebar nav a::before,.filebar nav a::after{display:none}
  .padbar button{padding:6pt 8pt;font-size:8.5pt} /* bigger sketchpad targets */
  .switch button{padding:6pt 9pt}
}

/* ============ REV I: phone optical scale ============ */
@media (max-width:640px){
  body{overflow-x:hidden}
  
  
  .switch{font-size:9.5pt}
  .switch button{padding:6pt 8pt}
  .hero-sub{font-size:12pt;letter-spacing:.26em}
  .hero-meta{font-size:10pt}
  .sig-svg{width:92vw}
  .sec-label{font-size:10pt}
  .plate-head{font-size:9pt}
  .plate-cap h3{font-size:13pt}
  .plate-cap .scope{font-size:9pt}
  .plate-art .tag{font-size:8pt}
  .about-grid h2{font-size:18pt}
  .about-grid p{font-size:12pt}
  .spec{font-size:10pt}
  .contact a.mail{font-size:14pt}
  .contact .mono{font-size:10pt}
  .page-head h1{font-size:22pt}
  .page-head .kicker{font-size:10pt}
  .page-head .lede{font-size:12pt}
  .sheet-head h1{font-size:22pt}
  .titleblock{font-size:9.5pt}
  .titleblock .lbl{font-size:7pt}
  .sheet .prose{font-size:12pt}
  .fill{font-size:10pt}
  .artifact-slot{font-size:9.5pt}
  .sheet-nav{font-size:9.5pt;gap:10pt;flex-wrap:wrap}
  .steps .step h3{font-size:12.5pt}
  .steps .step p{font-size:10.5pt}
  .step .n{font-size:9.5pt}
  .instruments{font-size:10pt}
  .pins .pin p{font-size:11pt}
  .pin .tagline{font-size:8.5pt}
  .padbar{font-size:9.5pt}
  .pad-note{font-size:9pt;line-height:1.7}
  .field label{font-size:9pt}
  .chips label{font-size:9.5pt;padding:7pt 11pt}
  .order .submit{font-size:10.5pt;padding:11pt 18pt}
  .rev table{font-size:9pt}
  footer{font-size:9pt;padding:12pt 14pt}
  .m-overlay .mw,.m-overlay .mh,.m-overlay .mt{font-size:8.5pt}
}

/* ============ REV L: real content + features ============ */
.status{font-family:'IBM Plex Mono',monospace;font-size:6.5pt;letter-spacing:.08em;margin-top:6pt;display:inline-block;padding:1pt 5pt;border:1px solid currentColor;border-radius:1pt}
.status-live{color:#1C6E5C}
[data-theme="dark"] .status-live{color:#5FC9A8}
@media (prefers-color-scheme:dark){[data-theme="auto"] .status-live{color:#5FC9A8}}
.status-complete{color:#1C6E5C}
[data-theme="dark"] .status-complete{color:#5FC9A8}
@media (prefers-color-scheme:dark){[data-theme="auto"] .status-complete{color:#5FC9A8}}
.status-wip{color:var(--graphite)}
.status-inprod{color:var(--markup)}

/* in-production artifact state */
.inprod{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6pt;background:repeating-linear-gradient(45deg,transparent 0 10pt,color-mix(in srgb,var(--markup) 5%,transparent) 10pt 20pt);font-family:'IBM Plex Mono',monospace;font-size:8pt;color:var(--markup);text-align:center;padding:14pt}
.inprod .ip-mark{font-size:20pt;opacity:.6}
.inprod .ip-sub{color:var(--graphite);font-size:6.5pt}

/* lytvyn placeholder art */
.pg-lytvyn{background:linear-gradient(180deg,#1C1C20 0 30%,#C8A24A 30% 32%,#1C1C20 32%)}
.pg-lytvyn .lines{position:absolute;left:10%;top:44%;width:46%;display:grid;gap:4pt}
.pg-lytvyn .lines i{height:2pt;background:rgba(237,232,222,.55)}
.pg-lytvyn .lines i:nth-child(2){width:78%}.pg-lytvyn .lines i:nth-child(3){width:55%}

/* what-happens-next strip */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--ink);background:var(--panel);margin:0 auto 32pt;max-width:880pt;font-family:'IBM Plex Mono',monospace;transition:background-color .35s ease}
.flow .step{padding:20pt 18pt;border-left:1px solid var(--ink)}
.flow .step:first-child{border-left:none}
.flow .step .n{font-size:9pt;color:var(--markup);display:block;margin-bottom:8pt}
.flow .step .t{font-size:11pt;color:var(--ink)}

/* compose-a-plate */
.composer{border:1px solid var(--ink);background:var(--panel);transition:background-color .35s ease}
.composer-bar{display:flex;align-items:center;gap:14pt;padding:6pt 12pt;border-bottom:1px solid var(--ink);font-family:'IBM Plex Mono',monospace;font-size:7.5pt;flex-wrap:wrap}
.composer-bar button{appearance:none;border:none;background:transparent;cursor:pointer;font:inherit;color:var(--graphite);padding:2pt 4pt}
.composer-bar button:hover{color:var(--ink)}
.composer-bar .spacer{flex:1}
#composeStage{position:relative;height:300pt;overflow:hidden;
  background-image:linear-gradient(var(--grid-major) 1px,transparent 1px),linear-gradient(90deg,var(--grid-major) 1px,transparent 1px),linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:64pt 64pt,64pt 64pt,8pt 8pt,8pt 8pt}
.cpiece{position:absolute;cursor:grab;user-select:none;touch-action:none}
.cpiece:active{cursor:grabbing}
.cpiece.sq{width:28pt;height:28pt;background:var(--markup)}
.cpiece.cm-tl,.cpiece.cm-tr,.cpiece.cm-bl,.cpiece.cm-br{width:22pt;height:22pt}
.cpiece.cm-tl{border-left:2pt solid var(--ink);border-top:2pt solid var(--ink)}
.cpiece.cm-tr{border-right:2pt solid var(--ink);border-top:2pt solid var(--ink)}
.cpiece.cm-bl{border-left:2pt solid var(--ink);border-bottom:2pt solid var(--ink)}
.cpiece.cm-br{border-right:2pt solid var(--ink);border-bottom:2pt solid var(--ink)}
.cpiece.lbl{font-family:'IBM Plex Mono',monospace;font-size:8pt;color:var(--markup);white-space:nowrap}
.compose-note{font-family:'IBM Plex Mono',monospace;font-size:7.5pt;color:var(--graphite);margin-top:8pt}

@media (max-width:640px){
  .status{font-size:7.5pt}
  .flow{font-size:9pt}
  .flow .step .t{font-size:9.5pt}
  #composeStage{height:260pt}
  .composer-bar{font-size:9.5pt}
}

/* ================= REV M: motion + interaction ================= */
/* --- homepage hero: grid draws itself --- */
#webGrid{position:fixed;inset:0;z-index:0;pointer-events:none}
#webGrid line{stroke:var(--grid-major);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;animation:drawLine .55s ease forwards}
#webGrid line.minor{stroke:var(--grid);stroke-width:1}
@keyframes drawLine{to{stroke-dashoffset:0}}
body.grid-settled #webGrid{display:none}

/* mark assembles */
.hero-mark{width:96pt;height:96pt;margin:0 auto 22pt;display:block;overflow:visible}
.hero-mark .br{stroke:var(--ink);stroke-width:5;fill:none;stroke-linecap:square;stroke-dasharray:60;stroke-dashoffset:60;animation:drawBr .5s ease forwards}
.hero-mark .b-tl{animation-delay:.15s}
.hero-mark .b-tr{animation-delay:.35s}
.hero-mark .b-br{animation-delay:.55s}
.hero-mark .b-bl{animation-delay:.75s}
@keyframes drawBr{to{stroke-dashoffset:0}}
.hero-mark .sq{fill:var(--markup);transform-box:fill-box;transform-origin:center;opacity:0;animation:dropSq .5s cubic-bezier(.3,1.5,.5,1) 1.0s forwards}
@keyframes dropSq{from{opacity:0;transform:scale(2.4)}to{opacity:1;transform:scale(1)}}

/* typewriter tagline cursor (own keyframe — must not collide with .vid rec "blink") */
.hero-sub .cursor{display:inline-block;width:.55em;background:var(--markup);color:transparent;margin-left:2px;animation:caretblink 1s steps(1) infinite}
@keyframes caretblink{50%{opacity:0}}

/* --- works: scroll reveal + crop-mark draw --- */
.plate{opacity:0;transform:translateY(20pt);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.3,1),background-color .35s ease}
.plate.in{opacity:1;transform:none}
.plate .cm-fx::before,.plate .cm-fx::after,.plate .cm-fx2::before,.plate .cm-fx2::after{content:"";position:absolute;width:0;height:0;pointer-events:none;transition:width .3s ease .2s,height .3s ease .2s;z-index:2}
.plate.in .cm-fx::before,.plate.in .cm-fx::after,.plate.in .cm-fx2::before,.plate.in .cm-fx2::after{width:11pt;height:11pt}
.plate .cm-fx::before{top:-12pt;left:-12pt;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.plate .cm-fx::after{top:-12pt;right:-12pt;border-left:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.plate .cm-fx2::before{bottom:-12pt;left:-12pt;border-right:1px solid var(--ink);border-top:1px solid var(--ink)}
.plate .cm-fx2::after{bottom:-12pt;right:-12pt;border-left:1px solid var(--ink);border-top:1px solid var(--ink)}

/* --- works: hover blueprint peek --- */
.plate-art{position:relative}
/* blueprint-peek removed — real screenshots are the star. subtle lift on hover instead. */
.plate-art .peek-tag,.plate-art .wire{display:none}


/* --- about: process lights up --- */
.steps .step{opacity:.35;transition:opacity .5s ease,background-color .4s ease}
.steps .step.lit{opacity:1;background:color-mix(in srgb,var(--markup) 6%,transparent)}
.steps .step .tick{color:var(--markup);opacity:0;transition:opacity .3s;margin-left:5pt}
.steps .step.lit .tick{opacity:1}

/* --- contact: live form preview --- */
.contact-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:20pt;align-items:stretch;max-width:880pt;margin:0 auto}
.live-preview{border:1px solid var(--ink);background:var(--panel);transition:background-color .35s ease;flex:1;display:flex;flex-direction:column}
.live-preview .ph{padding:8pt 12pt;border-bottom:1px solid var(--ink);font-family:'IBM Plex Mono',monospace;font-size:8.5pt;color:var(--graphite);display:flex;justify-content:space-between;gap:10pt}
.live-preview .ph .no{color:var(--markup)}
.live-preview .pb{padding:18pt 16pt;position:relative;flex:1 1 auto;min-height:240pt;overflow:auto}
.pv-name{font-size:14pt;font-weight:600;margin-bottom:10pt;min-height:1.3em}
.pv-empty{color:var(--graphite);opacity:.5;font-style:italic;font-size:11pt}
.pv-scope{display:flex;gap:5pt;flex-wrap:wrap;margin-bottom:12pt}
.pv-scope span{font-family:'IBM Plex Mono',monospace;font-size:7pt;color:var(--markup);border:1px solid var(--markup);padding:1pt 5pt}
.pv-line{font-family:'IBM Plex Mono',monospace;font-size:9.5pt;color:var(--graphite);margin-bottom:5pt}
.pv-sq{position:absolute;right:12pt;bottom:12pt;width:16pt;height:16pt;background:var(--markup);opacity:0;transition:opacity .3s}
.pv-sq.on{opacity:1}

@media (max-width:760px){.contact-grid{grid-template-columns:1fr}.live-preview{position:relative;top:0;margin-top:24pt}}
@media (max-width:640px){.hero-mark{width:74pt;height:74pt}}

@media (prefers-reduced-motion: reduce){
  #webGrid{display:none}
  .hero-mark .br,.hero-mark .sq{animation:none!important;stroke-dashoffset:0!important;opacity:1!important;transform:none!important}
  .hero-sub .cursor{display:none}
  .plate{opacity:1;transform:none}
  .plate.in .cm-fx::before,.plate .cm-fx::before,.plate .cm-fx::after,.plate .cm-fx2::before,.plate .cm-fx2::after{width:11pt;height:11pt}
  .steps .step{opacity:1}
}

/* ---- homepage opening: body grid OFF while drawing, ON when settled ---- */
html body.home[data-grid="off"]{background-image:none !important;}
#webGrid{z-index:0}

/* ================= REV N: header behavior + back-to-top + alignment ================= */
.filebar{will-change:transform;transition:transform .3s ease,background-color .35s ease}
.filebar.hide{transform:translateY(-110%)}

/* back-to-top button (mobile) */
.to-top{
  position:fixed;right:14pt;z-index:60;
  bottom:calc(14pt + env(safe-area-inset-bottom));
  width:32pt;height:32pt;padding:0;
  border:1px solid var(--ink);background:var(--bg);
  color:var(--ink);font-family:'IBM Plex Mono',monospace;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  opacity:.85;pointer-events:auto;
  transition:opacity .3s ease,background-color .35s ease,transform .45s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
.to-top:hover{background:var(--markup);color:var(--bg)}
.to-top.scrolled{opacity:1}
.to-top .tt-mark,.to-top .tt-arrow{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  transition:opacity .35s ease,transform .45s cubic-bezier(.4,0,.2,1);
}
.to-top .tt-mark{width:60%;height:60%;margin:auto;color:var(--ink)}
.to-top .tt-arrow{font-size:14pt;opacity:0;transform:rotate(-180deg) scale(.4)}
/* once scrolled: spin the mark out, spin the arrow in */
.to-top.scrolled .tt-mark{opacity:0;transform:rotate(180deg) scale(.4)}
.to-top.scrolled .tt-arrow{opacity:1;transform:rotate(0) scale(1)}
.to-top:not(.scrolled){pointer-events:none}  /* at top: decorative, not clickable */
.to-top.show{opacity:1;pointer-events:auto}

/* contact alignment: tidy the grid + match block tops */
.flow{margin-bottom:36pt}

/* ---- broad mobile pass ---- */
@media (max-width:760px){
  .contact-grid{grid-template-columns:1fr;gap:24pt}
  .live-preview{position:relative;top:0}
}
@media (max-width:640px){
  /* header compact + hide-on-scroll active */
  
  
  
  /* hero scales down */
  .hero{min-height:78svh;padding:32pt 16pt}
  .hero-mark{width:64pt;height:64pt;margin-bottom:16pt}
  .sig-svg{width:92vw}
  .hero-sub{font-size:12pt}
  .hero-meta{font-size:9.5pt}
  /* plates single column with breathing room */
  .plates{grid-template-columns:1fr!important;gap:32pt}
  /* steps stack */
  .steps{grid-template-columns:1fr!important}
  .steps .step{border-left:none;border-top:1px solid var(--ink)}
  .steps .step:first-child{border-top:none}
  /* flow stacks 2x2 */
  .flow{grid-template-columns:1fr 1fr}
  .flow .step:nth-child(3),.flow .step:nth-child(4){border-top:1px solid var(--ink)}
  /* contact form fields full width, larger touch text */
  .field input,.field select,.field textarea{font-size:11pt}
  .page-head h1,.sheet-head h1{font-size:20pt}
  .page-head .lede{font-size:11.5pt}
  /* show back-to-top only on mobile */
  .to-top{display:flex}
  /* sheets / case pages */
  .titleblock{font-size:9pt}
  .sheet-nav{flex-wrap:wrap;gap:10pt}
}
@media (min-width:641px){ .to-top{display:none} }

/* ===== readability pass: larger type, softer grid ===== */
body{font-size:12pt;line-height:1.65}
.page-head .lede,.about-left .lede,.sheet .prose,.about-grid p,.statement{font-size:13pt;line-height:1.75}
.about-grid p{margin-bottom:14pt}
.sec-label{font-size:9.5pt}
.plate-cap h3{font-size:13pt}
.field input,.field select,.field textarea{font-size:12pt}
.steps .step h3{font-size:13.5pt}
.steps .step p{font-size:10.5pt}
.page-head h1{font-size:30pt}
.sheet-head h1{font-size:28pt}
.hero-sub{font-size:13pt}
.hero-meta{font-size:10pt}
:root{--grid:rgba(106,158,191,.085);--grid-major:rgba(106,158,191,.16)}
[data-theme="dark"]{--grid:rgba(186,219,243,.06);--grid-major:rgba(186,219,243,.13)}
@media (prefers-color-scheme:dark){[data-theme="auto"]{--grid:rgba(186,219,243,.06);--grid-major:rgba(186,219,243,.13)}}

/* ===== contact: clean column alignment ===== */
.order .obody{display:flex;flex-direction:column}
.order .field{width:100%;margin-bottom:16pt}
.order .field textarea{width:100%;min-height:90pt;resize:vertical;box-sizing:border-box;display:block}
.order .field input,.order .field select{box-sizing:border-box}

/* ================= REV O: authoritative mobile pass (last = wins) ================= */
@media (max-width:640px){
  

  /* --- hero --- */
  .hero{min-height:74svh;padding:28pt 18pt}
  .hero-mark{width:64pt;height:64pt;margin-bottom:18pt}
  .sig-svg{width:88vw}
  .hero-sub{font-size:13pt;letter-spacing:.16em}
  .hero-meta{font-size:10.5pt;text-align:center;padding:0 8pt}

  /* --- sections / type --- */
  section{padding:40pt 18pt}
  .page-head{padding:32pt 18pt 0}
  .page-head h1,.sheet-head h1{font-size:24pt;line-height:1.15}
  .page-head .lede{font-size:13pt}
  .sec-label{font-size:10pt}

  /* --- plates: one column --- */
  .plates{grid-template-columns:1fr !important;gap:28pt}
  .plate-art{height:180pt}

  /* --- about process: stack vertically --- */
  .steps{grid-template-columns:1fr !important}
  .steps .step{border-left:none;border-top:1px solid var(--ink);padding:16pt}
  .steps .step:first-child{border-top:none}

  /* --- contact: stack, full width, aligned --- */
  .contact-grid{grid-template-columns:1fr !important;gap:24pt}
  .flow{grid-template-columns:1fr 1fr}
  .flow .step:nth-child(3),.flow .step:nth-child(4){border-top:1px solid var(--ink)}
  .flow .step:nth-child(3){border-left:none}
  .live-preview{position:relative;top:0}

  /* --- case sheets --- */
  .sheet-head{flex-direction:column;gap:16pt}
  .titleblock{width:100%;font-size:9.5pt}
  .sheet-nav{flex-direction:column;gap:10pt}
  .sheet-nav a{text-align:center}

  /* --- footer / statusbar: centered, even --- */

  /* back-to-top only on mobile, comfortably placed */
  .to-top{display:flex}
}
@media (min-width:641px){ .to-top{display:none} }

/* ===== contact aside: preview + direct-email plate, evenly aligned ===== */
.contact-aside{display:flex;flex-direction:column;align-items:stretch;gap:20pt;min-width:0}
.email-plate{border:1px solid var(--ink);background:var(--panel);transition:background-color .35s ease;flex:1;display:flex;flex-direction:column}
.email-plate .ph{display:flex;justify-content:space-between;padding:8pt 12pt;border-bottom:1px solid var(--ink);font-family:'IBM Plex Mono',monospace;font-size:8.5pt;color:var(--graphite);gap:10pt}
.email-plate .ph .no{color:var(--markup)}
.email-plate .pb{padding:18pt 16pt;text-align:center;flex:1 1 auto;min-height:240pt;display:flex;flex-direction:column;justify-content:center;overflow:auto}
.email-plate .ep-lead{font-size:12pt;color:var(--ink);line-height:1.6;margin-bottom:18pt}
.email-plate .ep-btn{display:block;border:1.5pt solid var(--markup);color:var(--markup);text-decoration:none;
  font-family:'IBM Plex Mono',monospace;font-size:9.5pt;letter-spacing:.06em;padding:11pt 14pt;
  transition:background-color .2s ease,color .2s ease}
.email-plate .ep-btn:hover{background:var(--markup);color:var(--bg)}
.email-plate .ep-addr{font-size:8.5pt;color:var(--graphite);margin-top:12pt}

@media (max-width:760px){
  .contact-aside{position:relative;top:0}
  .live-preview .pb,.email-plate .pb{flex:0 0 auto;min-height:150pt}
}

/* ===== REV S: clean mobile header (compact, centered, stacked) ===== */
@media (max-width:640px){
  .filebar{
    flex-direction:column;align-items:center;gap:8pt;
    padding:9pt 12pt;
  }
  /* line 1: title (one line, ellipsis) */
  .filebar > span{
    width:100%;text-align:center;font-size:8pt;line-height:1.3;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  /* .right = flex row that WRAPS: switches share row 1, nav (100% wide) drops to row 2 */
  .filebar .right{
    width:100%;display:flex;flex-direction:row;flex-wrap:wrap;
    justify-content:center;align-items:center;gap:8pt;
  }
  .filebar .switch,.filebar .theme-switch{flex:0 0 auto}
  .filebar .switch button,.filebar .theme-switch button{padding:5pt 7pt;font-size:8pt}
  .filebar .switch .glyph,.filebar .theme-switch .glyph{margin-right:3pt}
  /* nav forced to its own row, centered */
  .filebar nav{
    flex:1 0 100%;justify-content:center;flex-wrap:wrap;gap:14pt;
    padding-top:8pt;margin-top:2pt;border-top:1px solid var(--grid-major);
    font-size:10pt;
  }
}

/* ===== mobile header: collapse to just the menu when scrolled; full header only at the very top ===== */
@media (max-width:640px){
  /* the whole bar eases its own padding/gap so the menu glides up as the top collapses */
  .filebar{transition:gap .42s cubic-bezier(.33,1,.68,1),padding .42s cubic-bezier(.33,1,.68,1),background-color .35s ease}
  .filebar > span,
  .filebar .switch,
  .filebar .theme-switch{
    overflow:hidden;
    transition:max-height .42s cubic-bezier(.33,1,.68,1),opacity .34s ease,margin .42s cubic-bezier(.33,1,.68,1),padding .42s cubic-bezier(.33,1,.68,1),transform .42s cubic-bezier(.33,1,.68,1);
  }
  /* max-heights sit just above real content (url ~10.4pt, switches ~24.7pt) so there's no dead-time before motion */
  .filebar > span{max-height:14pt}
  .filebar .switch,.filebar .theme-switch{max-height:28pt}
  .filebar.peek{gap:0;padding-top:7pt;padding-bottom:8pt}
  .filebar.peek > span,
  .filebar.peek .switch,
  .filebar.peek .theme-switch{
    max-height:0;opacity:0;margin-top:0;margin-bottom:0;
    padding-top:0;padding-bottom:0;transform:translateY(-4pt);pointer-events:none;
  }
  .filebar.peek .right{gap:0}
  /* the nav rides the same curve as the rest of the bar — nothing snaps */
  .filebar nav{transition:padding .42s cubic-bezier(.33,1,.68,1),margin .42s cubic-bezier(.33,1,.68,1),border-top-color .34s ease}
  .filebar.peek nav{padding-top:0;margin-top:0;border-top-color:transparent}
}


/* ===== REV T: ergonomic mobile footer ===== */
@media (max-width:640px){
  /* footer: copyright centered on top, tagline centered below, both small */
  footer{
    display:flex;flex-direction:column;align-items:center;gap:6pt;
    padding:14pt 18pt;text-align:center;border-top:1px solid var(--ink);
  }
  footer > span:first-child{font-size:9.5pt;color:var(--ink)}
  footer > span:last-child{font-size:8pt;line-height:1.5;color:var(--graphite);max-width:30ch}

  /* statusbar: tidy 2-column grid of labels, button vertically centered beside it */
  /* back-to-top stays fixed, sized small, comfortably above the home indicator */
  .to-top{
    position:fixed;right:14pt;bottom:calc(18pt + env(safe-area-inset-bottom));
    grid-column:auto;grid-row:auto;
  }
}

/* ===== mobile statusbar = compact fixed row (scale · grid · measure); swaps with the footer at the bottom ===== */
@media (max-width:640px){
  .statusbar{
    flex-direction:row;flex-wrap:nowrap;align-items:center;
    gap:18pt;padding:7pt 14pt calc(7pt + env(safe-area-inset-bottom));
    font-size:8.5pt;overflow:hidden;justify-content:center;
    transition:transform .3s ease,background-color .35s ease;
  }
  .statusbar .coords,.statusbar .snap-btn,.statusbar .spacer{display:none}
  .statusbar > span:last-child{display:none}   /* drop the "ANDREW ROZHOK — DWG …" overflow on mobile */
  .statusbar > span,.statusbar > button{white-space:nowrap;flex:0 0 auto}
  /* once the footer is reached the statusbar slides away and the footer takes its place */
  .statusbar.atbottom{transform:translateY(100%)}
  footer{margin-bottom:0}
  /* the global 24pt bottom clearance (for the fixed statusbar) isn't needed on mobile — the bar swaps out, so drop it to remove the gap under the footer */
  body{padding-bottom:0}
  .to-top{bottom:calc(48pt + env(safe-area-inset-bottom))}
}

/* brief preview: wrap long/unbroken text, never overflow the plate */
.pv-brief{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
  color:var(--ink);margin-top:8pt;
  font-family:'IBM Plex Mono',monospace;font-size:9.5pt;line-height:1.5;
}
.pv-line{overflow-wrap:anywhere;word-break:break-word}

/* ===== device frames: real Safari + iPhone mockups ===== */
/* Safari browser frame */
.device-safari{position:relative;background:var(--safari-body);border:1px solid var(--safari-edge);border-radius:7pt 7pt 0 0;overflow:hidden;box-shadow:0 6pt 20pt rgba(0,0,0,.22);transition:background-color .35s ease,border-color .35s ease}
.device-safari .chrome{height:20pt;display:flex;align-items:center;gap:5pt;padding:0 9pt;background:var(--safari-chrome);border-bottom:1px solid rgba(128,128,128,.15);transition:background-color .35s ease}
.device-safari .chrome i{width:7pt;height:7pt;border-radius:50%;background:#C7C4BC;flex:0 0 auto}
.device-safari .chrome i:nth-child(1){background:#FF5F57}
.device-safari .chrome i:nth-child(2){background:#FEBC2E}
.device-safari .chrome i:nth-child(3){background:#28C840}
.device-safari .chrome .addr{flex:1;height:11pt;margin-left:6pt;background:var(--safari-addr);border-radius:3pt;display:flex;align-items:center;padding:0 7pt;font-family:'IBM Plex Mono',monospace;font-size:6.5pt;color:var(--safari-addr-text);overflow:hidden;white-space:nowrap;transition:background-color .35s ease,color .35s ease}
.device-safari .shot{display:block;width:100%;height:auto}
/* in a plate: fixed viewport that crops the tall shot to the top */
.plate-art .device-safari{position:absolute;inset:12pt 12pt 0 12pt;border-radius:6pt 6pt 0 0}
.plate-art .device-safari .viewport{position:absolute;inset:20pt 0 0 0;overflow:hidden;background:var(--safari-body)}
.plate-art .device-safari .viewport .shot{position:absolute;top:0;left:0;width:100%;transition:transform .5s ease}
/* cover variant: wide single-screen captures (e.g. teaser) fill the frame at any aspect, centered — no letterbox/pad */
.plate-art .device-safari .viewport .shot.cover{top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center}
.plate:hover .plate-art .device-safari .viewport .shot{transform:scale(1.04)}

/* iPhone frame */
.device-iphone{position:relative;border:5pt solid #0A0A0B;border-radius:32pt;background:#0A0A0B;overflow:hidden;box-shadow:0 8pt 24pt rgba(0,0,0,.30);width:200pt;max-width:46vw;margin:0 auto}
.device-iphone .notch{display:none}
.device-iphone .screen{position:relative;border-radius:26pt;overflow:hidden;background:#000;display:block;line-height:0}
.device-iphone .screen .shot{position:relative;width:100%;display:block;vertical-align:top;border-radius:inherit}

/* project page: device frames sit in normal flow */
.shot-device{margin:0 0 8pt}
.shot-device.safari{max-width:100%}
.shot-device .device-safari{position:relative;inset:auto}
.shot-device .device-safari .viewport{position:static}
.shot-device .device-safari .viewport .shot{position:static;width:100%}

@media (max-width:640px){
  .device-iphone{width:150pt;max-width:44vw;border-width:4pt;border-radius:26pt}
  .plate-art .device-safari{inset:8pt 8pt 0 8pt}
}

/* placeholder page mockup inside safari frame (projects w/o real screenshot yet) */
.plate-art .device-safari .viewport-mock{position:absolute;inset:20pt 0 0 0;overflow:hidden;background:var(--safari-body)}
.plate-art .device-safari .viewport-mock .page{position:absolute;inset:0}

/* ===== LIVE tag: recording-style pulse, green ===== */
.status-live{position:relative;display:inline-flex;align-items:center;gap:6pt;
  color:#1FA84C;border:1px solid #1FA84C;padding:2pt 8pt 2pt 7pt;
  font-family:'IBM Plex Mono',monospace;font-size:8pt;letter-spacing:.08em}
.status-live::before{content:"";width:6pt;height:6pt;border-radius:50%;background:#1FA84C;
  box-shadow:0 0 0 0 rgba(31,168,76,.6);animation:recPulse 1.8s ease-out infinite}
@keyframes recPulse{
  0%{box-shadow:0 0 0 0 rgba(31,168,76,.55);opacity:1}
  70%{box-shadow:0 0 0 6pt rgba(31,168,76,0);opacity:.85}
  100%{box-shadow:0 0 0 0 rgba(31,168,76,0);opacity:1}
}
@media (prefers-reduced-motion: reduce){.status-live::before{animation:none}}

/* iPhone row — neat, aligned, never touching */
.iphone-row{display:flex;gap:24pt;justify-content:center;align-items:flex-start;flex-wrap:wrap;margin:8pt 0 28pt}
.iphone-row .device-iphone{flex:0 0 auto}
/* Cover split — phone left, copy right (web); stacked (mobile) */
.cover-split{display:grid;grid-template-columns:auto 1fr;gap:36pt;align-items:center;margin:14pt 0 28pt}
.cover-split .cover-phone{flex:0 0 auto}
.cover-split .cover-phone .device-iphone{width:200pt;max-width:200pt;margin:0}
.cover-split .cover-copy .prose{margin-bottom:0}
@media (max-width:640px){
  .iphone-row{gap:14pt}
  .device-iphone .screen{border-radius:20pt}
  .cover-split{grid-template-columns:1fr;gap:18pt;justify-items:center}
  .cover-split .cover-copy{text-align:left}
  .cover-split .cover-phone .device-iphone{width:150pt;max-width:44vw}
}

/* safari viewport always solid (no transparency) */
.device-safari .viewport{background:var(--safari-body)}
.device-safari .viewport .shot{display:block;width:100%}
.shot-device .device-safari{box-shadow:0 8pt 28pt rgba(0,0,0,.28)}

/* ============================================================
   About page self-portrait — recolors per mode via CSS masks
   PAPER: dark sketch on cream grid · BLUEPRINT: sketch on paper cutout
   Mapped to site data-theme (dark=blueprint) + grid cell (8pt minor)
   ============================================================ */
.self-portrait{
  --sp-w: clamp(220px, 38vw, 400px);
  --sp-cell: 10.6667px;              /* = 8pt site minor grid */
  --sp-draw:#15181B;                 /* sketch ink — DARK in both modes, never inverted */
  --sp-paper-bg:transparent;         /* cutout paper — blueprint only */
  --sp-paper-grid:none;              /* paper grid inside cutout — blueprint only */
  position:relative; width:var(--sp-w); aspect-ratio:1800 / 1586; margin:0;
}
.self-portrait > span{position:absolute; inset:0; display:block}
.sp-paper{
  background-color:var(--sp-paper-bg);
  background-image:var(--sp-paper-grid);
  background-size:var(--sp-cell) var(--sp-cell);
  background-position:var(--sp-grid-x,0px) var(--sp-grid-y,0px);
  -webkit-mask:url("/assets/portrait/silhouette-mask.png") center/contain no-repeat;
          mask:url("/assets/portrait/silhouette-mask.png") center/contain no-repeat;
}
.sp-sketch{
  background:var(--sp-draw);
  -webkit-mask:url("/assets/portrait/portrait-mask.png") center/contain no-repeat;
          mask:url("/assets/portrait/portrait-mask.png") center/contain no-repeat;
}
/* BLUEPRINT (data-theme=dark): reveal paper cutout + paper grid */
html[data-theme="dark"] .self-portrait{
  --sp-paper-bg:#FBFAF6;
  --sp-paper-grid:
    linear-gradient(rgba(15,43,71,.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,43,71,.11) 1px, transparent 1px);
}
/* AUTO + system dark: same as blueprint */
@media (prefers-color-scheme: dark){
  html[data-theme="auto"] .self-portrait{
    --sp-paper-bg:#FBFAF6;
    --sp-paper-grid:
      linear-gradient(rgba(15,43,71,.11) 1px, transparent 1px),
      linear-gradient(90deg, rgba(15,43,71,.11) 1px, transparent 1px);
  }
}
/* GRID OFF: drop the portrait cutout grid too, so it matches the board */
html.nogrid .self-portrait{--sp-paper-grid:none !important;}
.sp-cap{font-family:'IBM Plex Mono',monospace;font-size:8pt;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite);display:flex;gap:8pt;align-items:center;margin-bottom:10pt;flex-wrap:wrap}
.sp-cap .sp-tick{color:var(--markup)}
.sp-frame{position:relative;padding:16pt}
.sp-frame::before,.sp-frame::after{content:"";position:absolute;width:12pt;height:12pt;border:1.5px solid var(--markup);z-index:3}
.sp-frame::before{left:0;top:0;border-right:0;border-bottom:0}
.sp-frame::after{right:0;bottom:0;border-left:0;border-top:0}

/* ============================================================
   REV U: launch pass — nav buttons, work CTA, pinboard,
   composer objects, contact stamp, mobile + landscape fixes
   ============================================================ */

/* ---- project page: back-to-work button (top of every plate) ---- */
.back-to-work{max-width:900pt;margin:0 auto;padding:20pt 24pt 0}
.back-to-work a{display:inline-flex;align-items:center;gap:8pt;
  border:1px solid var(--ink);background:var(--panel);
  font-family:'IBM Plex Mono',monospace;font-size:8.5pt;letter-spacing:.06em;
  text-decoration:none;color:var(--ink);padding:7pt 13pt;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.back-to-work a:hover{background:var(--markup);color:var(--bg);border-color:var(--markup)}

/* ---- project page: prev/next as buttons ---- */
.sheet-nav .navbtn{display:inline-flex;align-items:center;gap:8pt;
  border:1px solid var(--ink);background:var(--panel);color:var(--ink);
  font-family:'IBM Plex Mono',monospace;font-size:8.5pt;letter-spacing:.04em;
  text-decoration:none;padding:10pt 15pt;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}
.sheet-nav .navbtn:hover{background:var(--markup);color:var(--bg);border-color:var(--markup)}
.sheet-nav .navbtn.next{margin-left:auto}
.sheet-nav .lbl-min{display:none}

/* ---- work index: closing call-to-action ---- */
.work-cta{max-width:900pt;margin:0 auto;padding:8pt 24pt 36pt}
.work-cta .cta-card{border:1.5pt solid var(--ink);background:var(--panel);
  padding:26pt 24pt;display:flex;flex-direction:column;align-items:center;gap:14pt;text-align:center;
  transition:background-color .35s ease}
.work-cta .cta-card p{font-size:12.5pt;max-width:52ch;color:var(--ink)}
.work-cta .cta-btn{display:inline-flex;align-items:center;gap:8pt;
  border:1.5pt solid var(--markup);color:var(--markup);background:transparent;text-decoration:none;
  font-family:'IBM Plex Mono',monospace;font-size:9.5pt;letter-spacing:.08em;padding:11pt 20pt;
  transition:background-color .2s ease,color .2s ease}
.work-cta .cta-btn:hover{background:var(--markup);color:var(--bg)}
.work-cta .cta-note{font-family:'IBM Plex Mono',monospace;font-size:8pt;color:var(--graphite);letter-spacing:.04em;margin-top:2pt}
.work-cta .cta-note b{color:var(--markup);font-weight:500}

/* ---- pinboard: two rows of three, room for visuals ---- */
.pins{grid-template-columns:repeat(3,1fr)}
.pin{display:flex;flex-direction:column}
.pin .pin-photo{width:100%;height:118pt;object-fit:cover;display:block;border:1px solid var(--ink);margin-bottom:10pt}
.pin-photo-wrap{position:relative;margin-bottom:10pt}
.pin-photo-wrap .ph-missing{display:none}
.pin-photo-wrap.missing{display:block;border:1px dashed var(--markup);background:color-mix(in srgb,var(--markup) 6%,transparent);
  height:118pt;align-items:center;justify-content:center}
.pin-photo-wrap.missing .ph-missing{display:flex;align-items:center;justify-content:center;height:100%;padding:10pt;
  font-family:'IBM Plex Mono',monospace;font-size:7pt;color:var(--markup);text-align:center;line-height:1.5}
.pin .pin-visual{width:100%;height:96pt;border:1px solid var(--ink);margin-bottom:10pt;display:block;background:var(--bg);transition:background-color .35s ease}
.pin .pin-credit{font-family:'IBM Plex Mono',monospace;font-size:7.5pt;color:var(--graphite);margin-top:8pt;letter-spacing:.02em}
.pin p strong{font-weight:600}
.pin .pin-photo-soon{position:relative}
.pin .pin-photo-soon .soon{position:absolute;left:0;right:0;bottom:0;background:rgba(15,18,20,.62);color:#fff;
  font-family:'IBM Plex Mono',monospace;font-size:6.5pt;letter-spacing:.04em;padding:2pt 5pt}

/* ---- composer: extra draggable objects ---- */
.cpiece.circle{width:34pt;height:34pt;border-radius:50%;background:var(--markup)}
.cpiece.ring{width:36pt;height:36pt;border-radius:50%;border:3pt solid var(--ink);background:transparent}
.cpiece.tri{width:0;height:0;border-left:18pt solid transparent;border-right:18pt solid transparent;border-bottom:32pt solid var(--ink)}
.cpiece.block{width:64pt;height:64pt;border:2pt solid var(--ink);background:color-mix(in srgb,var(--markup) 10%,transparent)}
.cpiece.bigsq{width:80pt;height:80pt;background:var(--markup)}
.cpiece.line{width:80pt;height:0;border-top:3pt solid var(--ink)}
.cpiece.diag{width:64pt;height:64pt;background:linear-gradient(to top right,transparent calc(50% - 1.5pt),var(--ink) calc(50% - 1.5pt),var(--ink) calc(50% + 1.5pt),transparent calc(50% + 1.5pt))}

/* ---- contact: submit stamp lives inside the order box, then fades away ---- */
.order .stamp{transition:opacity .55s ease}
.order .stamp.fade{opacity:0}

/* ---- contact: form validation states ---- */
.field .err{display:none;font-family:'IBM Plex Mono',monospace;font-size:8pt;
  color:var(--markup);letter-spacing:.02em;margin-top:6pt;line-height:1.4}
.field.invalid .err{display:block}
.field.invalid > label{color:var(--markup)}
.field.invalid input[type=text],
.field.invalid input[type=email],
.field.invalid select,
.field.invalid textarea{
  border-color:var(--markup);
  background:color-mix(in srgb,var(--markup) 7%,transparent);
}
.field.invalid .chips label{border-color:var(--markup);color:var(--markup)}
.req{color:var(--markup)}

/* ---- back-to-top: no sticky hover tint on touch (JS also blurs after tap) ---- */
@media (hover:none){
  .to-top:hover{background:var(--bg);color:var(--ink)}
  .to-top:active{background:var(--bg);color:var(--ink)}
}

/* ============ landscape phones: stay flexible when rotated ============ */
@media (orientation:landscape) and (max-height:520px){
  .hero{min-height:auto;padding:24pt 18pt}
  .scroll-ruler{display:none}
  .to-top{display:flex}
  /* keep the drawn intro grid from showing crooked after a rotate */
  #webGrid{display:none}
}

/* ============ REV U mobile tightening ============ */
@media (max-width:640px){
  /* prev/next sit side-by-side, compact labels */
  .sheet-nav{flex-direction:row;justify-content:space-between;gap:10pt}
  .sheet-nav .navbtn{flex:1 1 0;justify-content:center;padding:11pt 8pt;text-align:center}
  .sheet-nav .navbtn .lbl-full{display:none}
  .sheet-nav .navbtn .lbl-min{display:inline}
  /* single-nav pages: let the lone button breathe */
  .sheet-nav .navbtn.only{flex:1 1 100%}

  .back-to-work{padding:16pt 18pt 0}

  /* pinboard stacks one-up on phones */
  .pins{grid-template-columns:1fr}
  .pin .pin-photo{height:150pt}
  .pin .pin-visual{height:110pt}

  /* equal spacing between every contact box */
  .contact-grid{gap:20pt}
  .contact-aside{gap:20pt}

  /* home: signature sits centered above CORRESPONDENCE */
  section.contact{padding-top:40pt}
  .contact .sig-small{display:block;width:100%;text-align:center;margin:0 auto 14pt}

  .work-cta{padding:4pt 18pt 32pt}
  .work-cta .cta-card{padding:22pt 18pt}
}

/* ===== REV U.1: mobile nav stays on ONE row (no wrap) ===== */
@media (max-width:640px){
  .filebar nav{
    flex:1 0 100%;flex-wrap:nowrap;width:100%;
    justify-content:space-between;gap:6pt;
    padding-left:2pt;padding-right:2pt;
    font-size:9pt;
  }
  .filebar nav a{white-space:nowrap;letter-spacing:0}
}
/* very narrow phones: shrink a touch more so all five still fit one line */
@media (max-width:360px){
  .filebar nav{gap:4pt;font-size:8pt}
}

/* ============ REV V: launch pass — pinboard ink + type wrapping ============ */
/* pinboard: every pin is the same plate — tagline, one visual slot, caption.
   The drawings are ink masks straight on the sheet (same technique as the
   self-portrait): dark ink on PAPER, light linework on BLUEPRINT. */
.pins{grid-auto-rows:1fr}
/* two registered layers on one canvas: ::before = die-cut paper, ::after = the ink.
   Art and cut masks share identical canvas dimensions, so center/contain keeps them aligned. */
.pin .pin-ink{position:relative;display:block;width:100%;height:104pt;margin:2pt 0 10pt}
.pin .pin-ink::before{content:"";position:absolute;inset:0;opacity:0;background:#FBFAF6;
  -webkit-mask:var(--pin-cut) center/contain no-repeat;
          mask:var(--pin-cut) center/contain no-repeat;
  filter:drop-shadow(0 2pt 4pt rgba(0,0,0,.38));
  transition:opacity .35s ease}
.pin .pin-ink::after{content:"";position:absolute;inset:0;background:var(--pin-draw,var(--ink));
  -webkit-mask:var(--pin-mask) center/contain no-repeat;
          mask:var(--pin-mask) center/contain no-repeat;
  transition:background-color .35s ease}
.pin .pin-ink.lp{--pin-mask:url("/assets/inspiration/lp-art-v2.png");--pin-cut:url("/assets/inspiration/lp-cut-v4.png")}
.pin .pin-ink.rosette{--pin-mask:url("/assets/inspiration/rosette-art-v2.png");--pin-cut:url("/assets/inspiration/rosette-cut-v3.png")}
.pin .pin-ink.clapper{--pin-mask:url("/assets/inspiration/clapper-art-v7.png");--pin-cut:url("/assets/inspiration/clapper-cut-v8.png")}
.pin .pin-ink.circuit{--pin-mask:url("/assets/inspiration/circuit-art-v2.png");--pin-cut:url("/assets/inspiration/circuit-cut-v3.png")}
.pin .pin-ink.jobs{--pin-mask:url("/assets/inspiration/jobs-art-v2.png");--pin-cut:url("/assets/inspiration/jobs-cut-v3.png")}
.pin .pin-ink.ridge{--pin-mask:url("/assets/inspiration/ridge-art-v2.png");--pin-cut:url("/assets/inspiration/ridge-cut-v3.png")}
/* BLUEPRINT: same drawings as on paper, die-cut as stickers — the white strip
   follows each object's contour, ink stays dark, shadow hugs the cut */
html[data-theme="dark"] .pin .pin-ink{--pin-draw:#15181B}
html[data-theme="dark"] .pin .pin-ink::before{opacity:1}
@media (prefers-color-scheme:dark){
  html[data-theme="auto"] .pin .pin-ink{--pin-draw:#15181B}
  html[data-theme="auto"] .pin .pin-ink::before{opacity:1}
}
/* pin taglines carry a short topic, set like a plate head: № left, subject right */
.pin .tagline{display:flex;justify-content:space-between;align-items:baseline;gap:8pt}
.pin .tagline .topic{color:var(--graphite);letter-spacing:.1em;font-weight:500}
/* a photo pin would share the exact same slot */
.pin .pin-photo{height:104pt}
/* home: contact line — live links, IG icon instead of the @ */
.contact-line{display:flex;align-items:center;justify-content:center;gap:10pt;flex-wrap:wrap}
.contact-line .cl-link{display:inline-flex;align-items:center;gap:4pt;color:inherit;text-decoration:none;transition:color .2s ease}
.contact-line .cl-link:hover{color:var(--markup)}
.contact-line .ig{width:10pt;height:10pt;display:block}
/* credit hugs the bottom of the plate */
.pin .pin-credit{margin-top:auto;padding-top:8pt}
@media (max-width:640px){
  .pins{grid-auto-rows:auto}
  .pin .pin-ink{height:118pt}
  .pin .pin-photo{height:118pt}
}
/* type: balanced headings, no orphan last words in prose */
.page-head h1,.about-left h1,.sheet-head h1,.about-grid h2,.lost h1{text-wrap:balance}
p,.lede,.prose,.pin p,.step p{text-wrap:pretty}
/* contact: honeypot field — humans never see it, bots fill it */
.order .hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;margin:0;padding:0}

/* ============ REV W: readability floor — the smallest annotations step up ============ */
/* case sheets: handoff disclaimer — centered plate note, two measured lines */
.handoff-note{font-family:'IBM Plex Mono',monospace;font-size:9pt;line-height:1.7;color:var(--graphite);
  text-align:center;max-width:640pt;margin:28pt auto 6pt;padding-top:10pt;border-top:1px dotted var(--graphite)}
.handoff-note span{display:block;text-wrap:balance}
.handoff-note b{font-weight:500;color:var(--ink)}

/* desktop floor (mobile keeps its own larger optical scale from REV I/O) */
@media (min-width:641px){
  .filebar{font-size:9pt}
  .switch{font-size:8.5pt}
  .statusbar{font-size:8.5pt}
  .plate-head{font-size:8.5pt}
  .plate-cap .scope{font-size:8.5pt}
  .plate-art .tag{font-size:8pt}
  .titleblock{font-size:8.5pt}
  .titleblock .lbl{font-size:7pt}
  .padbar,.composer-bar{font-size:8.5pt}
  .pad-note,.compose-note{font-size:8.5pt}
  .pin .tagline{font-size:8pt}
  .field label{font-size:8.5pt}
  .rev table{font-size:8.5pt}
  footer{font-size:8.5pt}
  .m-overlay .mw,.m-overlay .mh,.m-overlay .mt{font-size:8pt}
  .pv-scope span{font-size:8pt}
  .hero-note,.dim{font-size:8.5pt}
  .sp-cap{font-size:8.5pt}
  .work-cta .cta-note{font-size:8.5pt}
}
/* both breakpoints */
.scroll-ruler .mark::after{font-size:7.5pt}
.chips .hi-only{font-size:8pt}
.pin .pin-credit{font-size:8.5pt}
.palette-row span i{font-size:8.5pt}
.film .exif,.vid .tc{font-size:8pt}
.inprod{font-size:8.5pt}
.inprod .ip-sub{font-size:7.5pt}
.pin .pin-photo-soon .soon{font-size:8pt}
.status{font-size:8pt}
.status-live{font-size:8.5pt}
.field .err{font-size:8.5pt}
.email-plate .ep-addr{font-size:9pt}
.lost .code{font-size:9pt}
.kolea-mark{font-size:8pt}
/* mobile floor for the few stragglers */
@media (max-width:640px){
  .handoff-note{font-size:9.5pt;padding:10pt 4pt 0}
  .titleblock .lbl{font-size:7.5pt}
  footer > span:last-child{font-size:8.5pt}
  .status{font-size:8.5pt}
}

/* footer type-credit: one line on desk · three clean rows on phones */
footer .ft-type .ft-dot{padding:0 2pt}
@media (max-width:640px){
  footer .ft-type{display:flex;flex-direction:column;align-items:center;gap:3pt;max-width:none}
  footer .ft-type .ft-dot{display:none}
}

/* phones: form controls at exactly 16px — iOS Safari stops auto-zooming on focus */
@media (max-width:640px){
  .field input[type=text],.field input[type=email],.field select,.field textarea{font-size:16px}
}

/* phones: WORK in the menu is one tap away — the back-to-work button is redundant there */
@media (max-width:640px){
  .back-to-work{display:none}
}

/* phones: process steps stand apart (24pt gap), so every phase keeps its full frame */
@media (max-width:640px){
  .steps .step{border:1px solid var(--ink)}
  .steps .step:first-child{border-top:1px solid var(--ink)}
}