/* yury.digital — "Nested". Drawing sheet × terminal.
   Cyanotype ground, oat paper insets, brass as the only accent. */

:root{
  --ink:#08192A; --ink-2:#0C2438; --ink-3:#113048;
  --line:#1C4A6B; --line-soft:#143A57;
  --chalk:#D6E7F2; --chalk-2:#92B2C8; --chalk-3:#5E8099;
  --paper:#E9E0CB; --paper-2:#F4EEDE; --paper-ink:#1A2A33; --paper-ink-2:#4A5D68;
  --brass:#C8923A; --brass-hi:#E7BC6B;
  --live:#58C8A3;
  --grid:28px;
  --maxw:1180px;
  --rail:92px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--chalk);
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-variation-settings:"wdth" 100;
  font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* ── drafting grid substrate ── */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(46,124,166,.085) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(46,124,166,.085) 1px, transparent 1px);
  background-size:var(--grid) var(--grid);
  mask-image:radial-gradient(ellipse 120% 90% at 50% 0%, #000 35%, rgba(0,0,0,.35) 100%);
}
img{max-width:100%; display:block}
a{color:inherit}

/* ── type roles ── */
.mono{font-family:"Spline Sans Mono",ui-monospace,Menlo,monospace}
.lbl{
  font-family:"Spline Sans Mono",ui-monospace,Menlo,monospace;
  font-size:.705rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--chalk-3); font-weight:500;
}
h1,h2,h3{margin:0; text-wrap:balance; font-weight:800}
h1{font-variation-settings:"wdth" 112; letter-spacing:-.035em; line-height:.88}
h2{font-variation-settings:"wdth" 106; letter-spacing:-.025em; line-height:.96;
   font-size:clamp(1.85rem,4.2vw,3rem)}
h3{font-variation-settings:"wdth" 104; letter-spacing:-.015em; font-size:1.2rem; font-weight:700}

/* ── sheet frame ── */
.sheet{position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:0 clamp(16px,4vw,40px)}
.rule{height:1px; background:var(--line); border:0; margin:0}

/* dimension line: ├──── label ────┤ */
.dim{display:flex; align-items:center; gap:14px; margin:0}
.dim::before,.dim::after{content:""; height:1px; background:var(--line); flex:1}
.dim > span{flex:0 0 auto}
.dim.tick::before{box-shadow:0 -4px 0 -3px var(--brass), 0 4px 0 -3px var(--brass)}

/* ── header ── */
.top{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px clamp(16px,4vw,40px);
  background:linear-gradient(to bottom, rgba(8,25,42,.94), rgba(8,25,42,0));
  backdrop-filter:blur(3px);
}
.top .wm{font-weight:800; font-variation-settings:"wdth" 108; letter-spacing:-.02em; font-size:1.05rem}
.top .wm b{color:var(--brass)}
.topnav{display:flex; gap:18px; align-items:center}
.topnav a{text-decoration:none}
.topnav a:hover{color:var(--brass-hi)}
@media (max-width:760px){.topnav{display:none}}

/* ── hero ── */
.hero{padding:112px 0 40px; position:relative; z-index:1}
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:clamp(24px,5vw,56px); align-items:start}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
h1.mark{font-size:clamp(3.4rem,13vw,8.2rem)}
h1.mark .dot{color:var(--brass)}
.hero .thesis{
  font-family:"Newsreader",Georgia,serif; font-weight:300;
  font-size:clamp(1.25rem,2.4vw,1.6rem); line-height:1.38; color:var(--chalk);
  max-width:30ch; margin:26px 0 0;
}
.hero .turn{
  margin:18px 0 0; font-size:1rem; color:var(--brass-hi);
  font-variation-settings:"wdth" 98; font-weight:500;
  border-left:2px solid var(--brass); padding-left:14px;
}
.chips{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); margin:40px 0 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line-soft)}
@media (max-width:760px){.chips{grid-template-columns:repeat(2,minmax(0,1fr))}}
.chip{padding:16px 18px 14px 0; border-right:1px solid var(--line-soft)}
.chip:last-child{border-right:0}
.chip b{display:block; font-size:1.65rem; font-weight:800; font-variation-settings:"wdth" 108;
        letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums}
.chip span{display:block; margin-top:6px}

/* hero plate — cyanotype develop-in */
.plate{position:relative; border:1px solid var(--line)}
.plate img{width:100%; height:392px; object-fit:cover; object-position:50% 56%;
  filter:saturate(.18) contrast(1.12) brightness(.92) sepia(.35) hue-rotate(165deg)}
@media (max-width:900px){.plate img{height:300px}}
.plate.lit img{filter:none; transition:filter 2.6s cubic-bezier(.2,.7,.2,1)}
.plate figcaption{
  padding:9px 12px; border-top:1px solid var(--line); background:var(--ink-2);
  font-family:"Spline Sans Mono",monospace; font-size:.68rem; letter-spacing:.06em; color:var(--chalk-3);
}
.plate::after{
  content:""; position:absolute; inset:-7px; border:1px solid var(--line-soft); pointer-events:none;
}

/* ── section shell ── */
section{position:relative; z-index:1; padding:clamp(56px,8vw,104px) 0 0}
.sec-head{display:flex; align-items:baseline; gap:18px; margin-bottom:10px}
.sec-head .num{
  font-family:"Spline Sans Mono",monospace; font-size:.8rem; color:var(--brass);
  letter-spacing:.12em; flex:0 0 auto;
}
.sec-sub{color:var(--chalk-2); max-width:62ch; margin:14px 0 0}

/* ── index / contents table ── */
.toc{margin-top:30px; border-top:1px solid var(--line)}
.toc a{
  display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:16px; align-items:center;
  padding:15px 0; border-bottom:1px solid var(--line-soft); text-decoration:none;
  transition:background .18s, padding-left .18s;
}
.toc a:hover{background:rgba(46,124,166,.07); padding-left:10px}
.toc .n{font-family:"Spline Sans Mono",monospace; font-size:.78rem; color:var(--brass)}
.toc .g{font-weight:700; font-variation-settings:"wdth" 104}
.toc .c{font-family:"Spline Sans Mono",monospace; font-size:.74rem; color:var(--chalk-3); white-space:nowrap}

/* ── status marks: fill state = status, green dot = you can go there now ── */
.st{display:inline-flex; align-items:center; gap:7px; font-family:"Spline Sans Mono",monospace;
    font-size:.67rem; letter-spacing:.14em; text-transform:uppercase; color:var(--chalk-3)}
.st i{width:9px; height:9px; display:inline-block; border:1.5px solid var(--chalk-3); font-style:normal}
.st.live i{background:var(--live); border-color:var(--live)}
.st.live{color:var(--live)}
.st.wip i{background:linear-gradient(to right, var(--chalk-3) 50%, transparent 50%)}
.st.done i{background:transparent}

/* ── project card ── */
.proj{border-top:1px solid var(--line); padding:30px 0 34px}
.proj-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:12px 18px}
.proj-head h3{font-size:clamp(1.35rem,2.6vw,1.9rem); font-weight:800; font-variation-settings:"wdth" 108}
.proj .tag{color:var(--chalk-3); font-size:.88rem}
.proj p.body{color:var(--chalk-2); max-width:66ch; margin:14px 0 0}
.proj .link{
  display:inline-flex; gap:8px; align-items:center; margin-top:14px; text-decoration:none;
  font-family:"Spline Sans Mono",monospace; font-size:.78rem; color:var(--brass-hi);
  border-bottom:1px solid rgba(200,146,58,.45); padding-bottom:2px;
}
.proj .link:hover{border-bottom-color:var(--brass-hi)}

.metrics{display:flex; flex-wrap:wrap; gap:0; margin:20px 0 0}
.metrics span{
  font-family:"Spline Sans Mono",monospace; font-size:.78rem; color:var(--chalk);
  padding:6px 14px; border:1px solid var(--line); margin:0 -1px -1px 0; background:var(--ink-2);
}

.subs{margin:22px 0 0; padding:0 0 0 18px; border-left:1px solid var(--line); display:grid; gap:11px}
.subs .sub{display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:baseline}
.subs .sub::before{
  content:""; width:12px; height:1px; background:var(--brass); margin-left:-18px; align-self:center;
}
.subs b{font-weight:700; font-size:.95rem; font-variation-settings:"wdth" 100}
.subs em{font-style:normal; color:var(--chalk-3); font-size:.92rem}
.subs .sub > div{display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline}

.shots{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; margin:24px 0 0}
.shots.one{grid-template-columns:minmax(0,1fr); max-width:760px}
figure.shot{margin:0; border:1px solid var(--line); background:var(--ink-2)}
figure.shot img{width:100%}
figure.shot figcaption{
  padding:9px 12px; border-top:1px solid var(--line);
  font-family:"Spline Sans Mono",monospace; font-size:.68rem; line-height:1.5; color:var(--chalk-3);
}
.gate{
  margin:18px 0 0; padding:12px 16px; border:1px dashed var(--line);
  font-family:"Spline Sans Mono",monospace; font-size:.76rem; color:var(--chalk-2);
  display:flex; gap:10px; align-items:center;
}
.gate svg{flex:0 0 auto}

/* ── bench chart ── */
.bench{border:1px solid var(--line); background:var(--ink-2); padding:clamp(18px,3vw,30px); margin-top:26px}
.bench .rows{margin-top:22px; display:grid; gap:2px}
.brow{display:grid; grid-template-columns:168px minmax(0,1fr) 78px; gap:16px; align-items:center;
      padding:11px 0; border-bottom:1px solid var(--line-soft)}
.brow:last-child{border-bottom:0}
.brow .nm{font-weight:700; font-variation-settings:"wdth" 102; font-size:.98rem}
.brow .nm small{display:block; font-weight:400; color:var(--chalk-3); font-size:.74rem;
                font-family:"Spline Sans Mono",monospace; letter-spacing:.02em; margin-top:3px}
.brow .bar{height:12px; background:var(--ink-3); position:relative; border:1px solid var(--line-soft)}
.brow .bar i{position:absolute; left:0; top:0; bottom:0; width:0; background:var(--line);
             transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.brow.hot .bar i{background:linear-gradient(90deg,var(--brass),var(--brass-hi))}
.brow .rk{font-family:"Spline Sans Mono",monospace; font-size:.84rem; text-align:right; color:var(--chalk-2);
          font-variant-numeric:tabular-nums}
.brow.hot .rk{color:var(--brass-hi); font-weight:700}
.brow .pr{font-family:"Spline Sans Mono",monospace; font-size:.72rem; color:var(--chalk-3)}
@media (max-width:700px){.brow{grid-template-columns:1fr auto; gap:6px 12px}
  .brow .bar{grid-column:1/-1}}
.bench .foot{margin-top:18px; display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center}
.bench .foot a{font-family:"Spline Sans Mono",monospace; font-size:.76rem; color:var(--brass-hi); text-decoration:none;
               border-bottom:1px solid rgba(200,146,58,.45)}

/* ── timeline, on paper ── */
.paper{background:var(--paper); color:var(--paper-ink); position:relative}
.paper::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(26,42,51,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26,42,51,.055) 1px, transparent 1px);
  background-size:var(--grid) var(--grid);
}
.paper .lbl{color:var(--paper-ink-2)}
.paper h2{color:var(--paper-ink)}
.paper .rule,.paper .dim::before,.paper .dim::after{background:rgba(26,42,51,.22)}
.pwrap{padding:clamp(50px,7vw,88px) 0 clamp(50px,7vw,88px); margin-top:clamp(56px,8vw,104px)}
.tl{margin-top:34px; position:relative}
.tl::before{content:""; position:absolute; left:134px; top:6px; bottom:6px; width:1px; background:rgba(26,42,51,.25)}
@media (max-width:720px){.tl::before{left:0}}
.ev{display:grid; grid-template-columns:134px minmax(0,1fr); gap:0 28px; padding:0 0 30px; position:relative}
@media (max-width:720px){.ev{grid-template-columns:1fr; padding-left:20px}
  .ev .yr{margin-bottom:6px}}
.ev .yr{font-family:"Spline Sans Mono",monospace; font-size:.82rem; color:var(--paper-ink-2);
        text-align:right; padding:3px 18px 0 0; font-variant-numeric:tabular-nums;
        white-space:nowrap}
@media (max-width:720px){.ev .yr{text-align:left; padding-right:0}}
.ev::after{
  content:""; position:absolute; left:130px; top:9px; width:9px; height:9px;
  background:var(--paper); border:1.5px solid var(--paper-ink-2); border-radius:50%;
}
@media (max-width:720px){.ev::after{left:-4px}}
.ev.live::after{background:var(--brass); border-color:var(--brass)}
.ev.edu::after{border-style:dashed}
.ev .org{font-family:"Spline Sans Mono",monospace; font-size:.72rem; letter-spacing:.13em;
         text-transform:uppercase; color:var(--paper-ink-2)}
.ev h3{margin-top:4px; color:var(--paper-ink); font-size:1.12rem}
.ev p{margin:7px 0 0; font-family:"Newsreader",Georgia,serif; font-size:1.06rem; line-height:1.5;
      color:var(--paper-ink-2); max-width:58ch}
.ev .crew{display:inline-flex; align-items:center; gap:9px; margin-top:10px;
          font-family:"Spline Sans Mono",monospace; font-size:.7rem; color:var(--paper-ink-2)}
.ev .crew .b{height:7px; background:var(--paper-ink); opacity:.78; display:block}

/* ── stack ── */
.stack{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1px;
       margin-top:30px; background:var(--line); border:1px solid var(--line)}
.blk{background:var(--ink); padding:20px 22px 22px}
.blk.wide{grid-column:1/-1}
.blk h3{font-size:.98rem; margin-bottom:12px}
.blk .lvl{display:block; font-family:"Spline Sans Mono",monospace; font-size:.7rem;
          color:var(--brass-hi); margin:-6px 0 12px; letter-spacing:.04em}
.blk ul{margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:7px}
.blk li{font-family:"Spline Sans Mono",monospace; font-size:.74rem; color:var(--chalk-2);
        border:1px solid var(--line); padding:4px 9px; background:var(--ink-2)}

/* ── off work ── */
.off{display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(22px,4vw,46px); margin-top:30px; align-items:start}
@media (max-width:820px){.off{grid-template-columns:1fr}}
.king{border:1px solid var(--brass); padding:22px 24px 24px; background:linear-gradient(180deg,rgba(200,146,58,.07),transparent)}
.king b{display:block; font-size:2.1rem; font-weight:800; font-variation-settings:"wdth" 110; letter-spacing:-.03em}
.king p{margin:6px 0 0; color:var(--chalk-2)}
.offlist{display:grid; gap:14px}
.offrow{display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:baseline;
        border-bottom:1px solid var(--line-soft); padding-bottom:12px}
.offrow b{font-weight:700}
.offrow span{color:var(--chalk-3); font-size:.9rem}
.off .medit{margin-top:22px; font-family:"Newsreader",Georgia,serif; font-size:1.2rem; color:var(--chalk);
            border-left:2px solid var(--brass); padding-left:16px; grid-column:1/-1}

/* ── doors ── */
.doors{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:30px}
@media (max-width:980px){.doors{grid-template-columns:1fr}}
.dlinks{display:flex; flex-direction:column; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); margin-top:2px}
.dlink{display:flex; align-items:baseline; justify-content:space-between; gap:12px; background:var(--ink-2);
       padding:11px 14px; text-decoration:none; color:var(--chalk); font-weight:500; font-size:.92rem;
       transition:background .18s ease, color .18s ease}
.dlink span{font-family:"Spline Sans Mono",monospace; font-size:.74rem; color:var(--chalk-3)}
.dlink:hover{background:var(--ink-3); color:var(--brass-hi)}
.dlink:hover span{color:var(--chalk-2)}
.door{border:1px solid var(--line); background:var(--ink-2); padding:24px; display:flex; flex-direction:column; gap:12px}
.door h3{font-size:1.3rem}
.door p{margin:0; color:var(--chalk-2); font-size:.96rem}
.btn{
  align-self:flex-start; margin-top:4px; cursor:pointer; background:var(--brass); color:#15223B;
  border:0; padding:11px 20px; font-family:"Spline Sans Mono",monospace; font-size:.78rem;
  letter-spacing:.1em; text-transform:uppercase; font-weight:600; text-decoration:none; display:inline-block;
}
.btn:hover{background:var(--brass-hi)}
.btn.ghost{background:transparent; color:var(--brass-hi); border:1px solid var(--brass)}
.btn.ghost:hover{background:rgba(200,146,58,.12)}
.door .note{font-family:"Spline Sans Mono",monospace; font-size:.72rem; color:var(--chalk-3); line-height:1.6}

/* quiz */
.quiz{margin-top:16px; display:none}
.quiz.open{display:block}
.q{border-top:1px solid var(--line); padding:14px 0}
.q p{margin:0 0 10px; font-size:.95rem; color:var(--chalk)}
.q .opts{display:flex; flex-wrap:wrap; gap:8px}
.q button{
  cursor:pointer; background:transparent; border:1px solid var(--line); color:var(--chalk-2);
  padding:7px 13px; font-family:"Spline Sans Mono",monospace; font-size:.74rem;
}
.q button:hover{border-color:var(--brass); color:var(--brass-hi)}
.q button[aria-pressed="true"]{background:var(--brass); border-color:var(--brass); color:#15223B}
.qout{margin-top:14px; font-family:"Spline Sans Mono",monospace; font-size:.78rem; color:var(--chalk-2); line-height:1.7}

/* ── contacts: idle hint (A) → panel on click (C) ── */
.hint{
  position:fixed; right:18px; bottom:18px; z-index:60;
  display:flex; align-items:center; gap:9px; cursor:pointer;
  background:var(--ink-2); border:1px solid var(--brass); color:var(--chalk);
  padding:10px 15px; font-family:"Spline Sans Mono",monospace; font-size:.74rem; letter-spacing:.06em;
}
.hint:hover{background:var(--ink-3)}
.hint .pulse{width:7px; height:7px; background:var(--live); border-radius:50%}
.panel{
  position:fixed; right:18px; bottom:66px; z-index:61; width:min(300px,calc(100vw - 36px));
  background:var(--ink-2); border:1px solid var(--line); padding:16px; display:none;
}
.panel.open{display:block}
.panel a{display:flex; justify-content:space-between; gap:12px; padding:10px 0; text-decoration:none;
  border-bottom:1px solid var(--line-soft); font-size:.92rem}
.panel a:last-of-type{border-bottom:0}
.panel a span{font-family:"Spline Sans Mono",monospace; font-size:.74rem; color:var(--chalk-3)}
.panel a:hover span{color:var(--brass-hi)}

/* ── footer ── */
footer{position:relative; z-index:1; margin-top:clamp(56px,8vw,96px); padding:28px 0 40px;
       border-top:1px solid var(--line)}
.foot-in{display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:space-between; align-items:center}
footer a{text-decoration:none; color:var(--chalk-2)}
footer a:hover{color:var(--brass-hi)}

:focus-visible{outline:2px solid var(--brass-hi); outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .plate img{filter:none}
}