/* =====================================================================
   Polina Arkhipova — Portfolio design system
   Onest · clean light · deep green in buttons & accents
   ===================================================================== */
:root{
  --paper:#fbfbfa;
  --paper-2:#f1f1ef;
  --ink:#18181a;
  --ink-2:#3a3a3c;
  --soft:#76767a;
  --line:#e6e6e3;
  --line-2:#efefec;
  --green:#1d4d33;
  --green-2:#16402a;
  --green-bright:#37b865;
  --green-tint:#eef3ee;
  --green-line:#c4d6c8;
  /* Onest is the single typeface for both Latin and Cyrillic — one
     consistent look across EN and RU, no per-glyph font switching.
     Russian glyphs run a touch wider, but the family is identical. */
  --sans:'Onest', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* accents/labels share the base sans now — kept as a var so existing
     rules just inherit the clean type instead of a separate mono face */
  --mono:'Onest', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --maxw:1140px;
  --pad:clamp(20px,5vw,64px);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit;}
img{max-width:100%;display:block;}
::selection{background:var(--green);color:#fff;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}
.mono{font-family:var(--mono);}

/* eyebrow / section label */
.eyebrow{
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--green);display:inline-flex;align-items:center;gap:9px;
}
.eyebrow::before{content:"";width:24px;height:1.5px;background:var(--green);}
.eyebrow.plain::before{display:none;}

.section{padding:clamp(64px,9vw,118px) 0;}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(34px,5vw,58px);flex-wrap:wrap;}
.section-head h2{
  font-size:clamp(28px,4.4vw,46px);font-weight:800;letter-spacing:-.03em;line-height:1.02;margin:14px 0 0;
}
.section-head .aside{font-family:var(--mono);font-size:12px;color:var(--soft);letter-spacing:.04em;}
.writing-intro{max-width:740px;margin:18px 0 0;font-size:clamp(16px,1.9vw,19px);line-height:1.55;color:var(--ink-2);letter-spacing:-.005em;text-wrap:pretty;}
hr.rule{border:0;border-top:1px solid var(--line);margin:0;}

/* buttons — deep green is the primary fill */
.btn{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:13px;font-weight:600;
  letter-spacing:.01em;padding:13px 21px;border-radius:2px;text-decoration:none;cursor:pointer;
  border:1.5px solid var(--green);background:var(--green);color:#fff;transition:.22s ease;
}
.btn:hover{background:var(--green-2);border-color:var(--green-2);transform:translateY(-1px);}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn.ghost:hover{background:var(--ink);color:var(--paper);}
.btn .ar{transition:transform .22s ease;}
.btn:hover .ar{transform:translateX(3px);}

/* image slots */
image-slot{background:var(--paper-2);}
.slot-frame{border:1px solid var(--line);}

/* ---------------- NAV ---------------- */
.nav{
  position:sticky;top:0;z-index:60;background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:64px;}
.nav .brand{font-weight:800;letter-spacing:.02em;font-size:15px;text-transform:uppercase;text-decoration:none;display:inline-flex;align-items:center;color:var(--ink);transition:color .18s;}
.nav .brand:hover{color:var(--green);}
.nav .brand-sig{height:30px;width:auto;display:block;}
.nav .brand b{color:var(--green);}
.nav-links{display:flex;align-items:center;gap:30px;}
.nav-links a{font-family:var(--sans);font-size:13.5px;font-weight:600;letter-spacing:.01em;color:var(--soft);text-decoration:none;transition:color .18s;white-space:nowrap;}
.nav-links a:hover{color:var(--ink);}
.nav .btn{padding:9px 15px;}
.nav-right{display:flex;align-items:center;gap:18px;}
.lang-switch{display:inline-flex;border:1px solid var(--line);border-radius:20px;overflow:hidden;flex:0 0 auto;}
.lang-switch button{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.03em;padding:6px 12px;background:transparent;border:0;color:var(--soft);cursor:pointer;line-height:1;}
.lang-switch button:hover{color:var(--ink);}
.lang-switch button.on{background:var(--green);color:#fff;}
.nav-burger{display:none;}

/* ---------------- HERO + ABOUT ---------------- */
.hero{padding-top:clamp(36px,5vw,64px);}
.hero-status{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink-2);display:inline-flex;align-items:center;gap:9px;margin-bottom:30px;}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green-bright);box-shadow:0 0 0 0 rgba(55,184,101,.5);animation:pulse 2.4s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(55,184,101,.5);}70%{box-shadow:0 0 0 9px rgba(55,184,101,0);}100%{box-shadow:0 0 0 0 rgba(55,184,101,0);}}
.hero-grid{display:grid;grid-template-columns:1fr 300px;gap:clamp(28px,5vw,64px);align-items:start;}
.hero-name{font-size:clamp(44px,8vw,104px);font-weight:800;letter-spacing:-.04em;line-height:.93;margin:0;}
.hero-role{font-size:clamp(17px,2vw,21px);font-weight:600;margin:18px 0 6px;letter-spacing:-.01em;}
.hero-tag{font-family:var(--sans);font-size:13.5px;color:var(--soft);letter-spacing:.01em;margin:0;}
.hero-portrait{width:300px;}
.hero-meta{display:none;}
.facts{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;}
.facts li{font-size:14px;color:var(--ink-2);display:flex;align-items:center;gap:9px 3px;}
.facts li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--green);}
.bio{max-width:560px;margin:clamp(28px,3.5vw,44px) 0 0;}
.bio p{font-size:clamp(18px,2.1vw,21px);line-height:1.62;color:var(--ink-2);margin:0 0 18px;letter-spacing:-.01em;}
.bio p:first-child{color:var(--ink);}
.hero-actions{display:flex;gap:12px;margin-top:30px;}
.hero-actions .btn{font-size:15px;padding:16px 26px;flex:1;justify-content:center;}

/* ---------------- TIMELINE ---------------- */
.timeline{position:relative;margin-left:6px;}
.timeline::before{content:"";position:absolute;left:8px;transform:translateX(-50%);top:12px;bottom:12px;width:2px;background:linear-gradient(var(--green-line),var(--line));}
.tl-item{position:relative;padding:0 0 clamp(34px,4vw,52px) 42px;}
.tl-item:last-child{padding-bottom:0;}
.tl-node{position:absolute;left:8px;transform:translateX(-50%);top:4px;width:16px;height:16px;border-radius:50%;background:var(--paper);border:2px solid var(--green);display:flex;align-items:center;justify-content:center;}
.tl-dot{width:7px;height:7px;border-radius:50%;background:var(--green);}
.tl-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.tl-when{font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--green);letter-spacing:.01em;border:1px solid var(--line);border-radius:20px;padding:3px 12px;white-space:nowrap;}
.tl-co{font-size:clamp(20px,2.6vw,27px);font-weight:700;letter-spacing:-.02em;line-height:1.15;}
.tl-kind{font-family:var(--mono);font-size:12.5px;color:var(--soft);margin:5px 0 14px;letter-spacing:.02em;}
.tl-desc{font-size:16.5px;color:var(--ink-2);max-width:680px;margin:0 0 12px;}
.tl-learned{font-size:15px;color:var(--soft);max-width:680px;margin:0;}
.tl-learned b{color:var(--green);font-weight:700;}

/* ---------------- SELECTED WORK ---------------- */
.work-controls{display:flex;gap:10px;}
.arrow{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);background:var(--paper);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;color:var(--ink);}
.arrow:hover{border-color:var(--ink);background:var(--ink);color:var(--paper);}
.arrow:disabled{opacity:.3;cursor:default;}
.scroller{display:flex;align-items:flex-start;gap:clamp(18px,2.5vw,30px);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:6px var(--pad) 30px;padding-left:calc(max(0px, (100% - var(--maxw)) / 2) + var(--pad));padding-right:calc(max(0px, (100% - var(--maxw)) / 2) + var(--pad));scroll-padding-left:calc(max(0px, (100% - var(--maxw)) / 2) + var(--pad));margin:0;scrollbar-width:none;cursor:grab;}
.scroller:active{cursor:grabbing;}
.year-sep{flex:0 0 auto;align-self:center;height:clamp(200px,26vw,320px);display:flex;flex-direction:column;align-items:center;gap:14px;padding:0 8px;}
.ys-year{font-size:14px;font-weight:700;color:var(--green);letter-spacing:.02em;}
.ys-line{flex:1;width:1px;background:var(--line);}
.scroller::-webkit-scrollbar{display:none;}
.case{flex:0 0 clamp(300px,42vw,500px);scroll-snap-align:start;text-decoration:none;color:inherit;display:block;}
.case-img{width:100%;height:clamp(290px,33vw,430px);overflow:hidden;border:0;position:relative;background:var(--shot-bg,#1d4d33);display:flex;align-items:center;justify-content:center;padding:clamp(20px,6%,44px);}
.browser{width:100%;max-height:100%;display:flex;flex-direction:column;background:#fff;border-radius:9px;overflow:hidden;box-shadow:0 24px 50px -22px rgba(0,0,0,.45),0 6px 16px -8px rgba(0,0,0,.24);transition:transform .25s ease, box-shadow .25s ease;}
.browser-bar{flex:0 0 auto;height:34px;background:#f1f3f0;border-bottom:1px solid #e5e7e2;display:flex;align-items:center;gap:7px;padding:0 13px;}
.browser-bar .bdot{width:9px;height:9px;border-radius:50%;background:#d3d4cc;flex:0 0 auto;}
.browser-url{margin-left:9px;flex:1 1 auto;min-width:0;height:19px;background:#fff;border:1px solid #e3e4df;border-radius:10px;display:flex;align-items:center;gap:6px;padding:0 11px;font-family:var(--mono);font-size:10.5px;color:#9b9c94;letter-spacing:.01em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.browser-url::before{content:"";width:7px;height:7px;border:1.4px solid #b9bab2;border-radius:50%;flex:0 0 auto;}
.case-img image-slot{display:block;width:100%;height:auto;border-radius:0;}
.case-img image-slot::part(frame){background:#fff;}
.case:hover .browser{transform:translateY(-4px);box-shadow:0 32px 62px -24px rgba(0,0,0,.5),0 8px 18px -8px rgba(0,0,0,.28);}
.case-meta{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-top:18px;}
.case h3{font-size:clamp(19px,2.3vw,24px);font-weight:700;letter-spacing:-.02em;margin:0;transition:color .2s;}
.case:hover h3{color:var(--green);}
.case .num{font-family:var(--mono);font-size:12px;color:var(--soft);}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px;}
.tag{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.01em;color:var(--soft);border:1px solid var(--line);border-radius:20px;padding:4px 11px;}
.case .open{font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--green);margin-top:15px;display:inline-flex;gap:7px;align-items:center;opacity:0;transform:translateY(4px);transition:.25s;}
.case:hover .open{opacity:1;transform:none;}

/* ---------------- SKILLS ---------------- */
.skills-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,6vw,90px);}
.skill-col h3{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin:0 0 8px;}
.skill-col ul{list-style:none;margin:0;padding:0;}
.skill-col li{font-size:16.5px;color:var(--ink-2);padding:14px 0;border-bottom:1px solid var(--line);display:flex;gap:14px;align-items:baseline;}
.skill-col li:last-child{border-bottom:0;}
.skill-col li .i{font-family:var(--mono);font-size:11px;color:var(--green);min-width:24px;}

/* ---------------- WRITING ---------------- */
.essays{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);}
.essay{border:1px solid var(--line);text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:.22s ease;background:var(--paper);overflow:hidden;}
.essay:hover{border-color:var(--ink);transform:translateY(-3px);}
.essay-cover{aspect-ratio:16/10;overflow:hidden;background:var(--green-tint);border-bottom:1px solid var(--line);}
.essay-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease;}
.essay:hover .essay-cover img{transform:scale(1.045);}
.essay-body{padding:18px 22px 18px;display:flex;flex-direction:column;flex:1;}
.essay .src{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--green);}
.essay h3{font-size:18px;font-weight:700;letter-spacing:-.01em;line-height:1.27;margin:12px 0 0;text-wrap:pretty;}
.essay .foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--soft);padding-top:18px;}
.essay:hover .foot .ar{color:var(--green);transform:translateX(3px);}
.essay .foot .ar{transition:.2s;}
.writing-all{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--green);text-decoration:none;display:inline-flex;align-items:center;gap:7px;transition:.2s;}
.writing-all:hover{color:var(--ink);}
.writing-all .ar{transition:.2s;}
.writing-all:hover .ar{transform:translateX(3px);}

/* ---------------- LAST BUT NOT LEAST ---------------- */
.closing{background:#fff;border:1px solid var(--line);border-radius:4px;padding:clamp(34px,5vw,60px);}
.closing .eyebrow{color:var(--green);}
.closing .eyebrow::before{background:var(--green);}
.closing-h{font-size:clamp(22px,3vw,30px);font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:18px 0 0;}
.closing-cols{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:34px;}
.cl-col{padding:0 clamp(22px,3vw,44px);}
.cl-col.yes{padding-left:0;}
.cl-col.no{border-left:1px solid var(--line);}
.cl-head{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700;letter-spacing:-.01em;text-transform:none;margin:0 0 22px;padding-bottom:16px;border-bottom:1px solid var(--line);}
.cl-col.yes .cl-head{color:var(--green);}
.cl-col.no .cl-head{color:var(--ink);}
.cl-col.no .cl-head{border-bottom-color:var(--line);}
.cl-ic{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;font-size:13px;font-weight:700;flex:0 0 auto;}
.cl-col.yes .cl-ic{background:rgba(29,77,51,.1);color:var(--green);}
.cl-col.no .cl-ic{background:var(--paper-2);color:var(--soft);}
.cl-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
.cl-list li{position:relative;padding-left:28px;font-size:16px;line-height:1.45;color:var(--ink);}
.cl-list li::before{position:absolute;left:0;top:0;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;font-size:11px;font-weight:700;}
.cl-col.yes .cl-list li::before{content:"✓";background:rgba(29,77,51,.1);color:var(--green);}
.cl-col.no .cl-list li{color:var(--ink-2);}
.cl-col.no .cl-list li::before{content:"–";background:var(--paper-2);color:var(--soft);top:1px;}

/* ---------------- LET'S TALK ---------------- */
.talk{background:var(--ink);color:var(--paper);padding:clamp(70px,11vw,150px) 0 clamp(40px,5vw,60px);}
.talk-lead{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#8fae97;}
.talk-top{display:flex;align-items:center;gap:clamp(36px,6vw,72px);flex-wrap:wrap;}
.talk-intro{flex:1 1 380px;}
.talk-h{font-size:clamp(30px,4.4vw,56px);font-weight:700;letter-spacing:-.035em;line-height:1.04;color:var(--paper);margin:0;max-width:15ch;}
.talk-sub2{font-size:clamp(17px,1.9vw,22px);font-weight:400;line-height:1.5;color:#9a9b94;margin:18px 0 0;max-width:30ch;}
.talk-meme{flex:1 1 380px;max-width:520px;margin:0;}
.talk-meme image-slot{display:block;width:100%;border-radius:38%;overflow:hidden;border:0;}
.talk-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(28px,3.5vw,44px);}
.talk-msg{font-size:15px;line-height:24px;padding:16px 26px;border-color:rgba(255,255,255,.4);background:transparent;color:#fff;cursor:pointer;width:100%;justify-content:center;}
.talk-msg:hover{border-color:#fff;background:rgba(255,255,255,.08);}
.talk-contact{position:relative;}
.talk-menu{position:absolute;left:0;bottom:calc(100% + 12px);min-width:240px;background:#20201f;border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:6px;display:flex;flex-direction:column;box-shadow:0 18px 44px -16px rgba(0,0,0,.6);z-index:5;}
.talk-menu[hidden]{display:none;}
.talk-menu::after{content:"";position:absolute;top:100%;left:30px;border:7px solid transparent;border-top-color:#20201f;}
.talk-menu a{display:flex;flex-direction:column;gap:2px;padding:11px 14px;border-radius:7px;text-decoration:none;color:#fff;font-family:var(--sans);font-size:15px;font-weight:600;transition:background .15s;}
.talk-menu a:hover{background:rgba(255,255,255,.08);}
.talk-menu .tm-note{font-family:var(--mono);font-size:11px;font-weight:400;color:#8fae97;letter-spacing:.01em;}
.talk-cv{font-size:15px;padding:16px 26px;border-color:#fff;background:#fff;color:var(--ink);flex:1;justify-content:center;}
.talk-contact{flex:1;}
.talk-cv:hover{background:var(--green);border-color:var(--green);color:#fff;}
.talk-mail{font-family:var(--sans);font-size:clamp(18px,3vw,30px);color:#fff;text-decoration:none;border-bottom:2px solid #3c5a44;padding-bottom:6px;transition:.2s;}
.talk-mail:hover{border-color:#7fae8c;}
.talk-links{display:flex;gap:clamp(20px,3vw,40px);flex-wrap:wrap;}
.talk-links a{font-family:var(--mono);font-size:13px;color:#cfe0d4;text-decoration:none;display:inline-flex;gap:7px;align-items:center;transition:color .2s;}
.talk-links a:hover{color:#fff;}
.colophon{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:clamp(50px,8vw,100px);padding-top:24px;border-top:1px solid rgba(255,255,255,.14);font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:#7c7d75;}

/* ---------------- CASE STUDY PAGE ---------------- */
.cs-back{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--soft);text-decoration:none;display:inline-flex;gap:8px;align-items:center;transition:color .2s;}
.cs-back:hover{color:var(--green);}
.cs-back .ar{transition:transform .2s;}
.cs-back:hover .ar{transform:translateX(-3px);}
.cs-hero{padding-top:clamp(34px,5vw,64px);}
.cs-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--green);margin:34px 0 0;}
.cs-title{font-size:clamp(34px,6vw,68px);font-weight:800;letter-spacing:-.035em;line-height:1.0;margin:16px 0 0;max-width:880px;}
.cs-meta{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,56px);margin:clamp(30px,4vw,46px) 0 0;padding:24px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line);}
.cs-meta .k{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);}
.cs-meta .v{font-size:15px;font-weight:600;margin-top:5px;}
.cs-figure{width:100%;margin:clamp(40px,6vw,72px) 0 clamp(28px,4vw,40px);}
.cs-figure image-slot{width:100%;display:block;border:0;}
.cs-figure figcaption{font-family:var(--mono);font-size:11px;color:var(--soft);margin-top:12px;letter-spacing:.03em;}
/* before/after tabbed comparison */
.ba{width:100%;}
.ba-tabs{display:inline-flex;gap:4px;padding:4px;background:var(--paper-2);border-radius:999px;margin-bottom:16px;}
.ba-tab{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--soft);border:0;background:transparent;padding:8px 20px;border-radius:999px;cursor:pointer;transition:.18s;}
.ba-tab:hover{color:var(--ink);}
.ba-tab.on{background:var(--ink);color:var(--paper);}
.ba-stage{position:relative;}
.ba-panel{display:none;}
.ba-panel.on{display:block;}
.ba-carousel{position:relative;}
.ba-viewport{position:relative;width:100%;}
.ba-track{position:relative;width:100%;}
.ba-slide{position:absolute;top:0;left:0;width:100%;opacity:0;visibility:hidden;transition:opacity .3s ease;}
.ba-slide.on{position:relative;opacity:1;visibility:visible;}
.ba .browser{width:100%;}
.ba image-slot{display:block;width:100%;height:auto;}
.ba-arrow{position:absolute;top:calc(50% + 17px);transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.92);color:var(--ink);font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.18s;box-shadow:0 6px 18px -8px rgba(0,0,0,.3);z-index:2;}
.ba-arrow:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.ba-arrow.prev{left:14px;}
.ba-arrow.next{right:14px;}
.ba-dots{display:flex;justify-content:center;gap:8px;margin-top:16px;}
.ba-dot{width:7px;height:7px;border-radius:50%;border:0;background:var(--line);cursor:pointer;padding:0;transition:.18s;}
.ba-dot.on{background:var(--green);transform:scale(1.25);}
/* a figure screenshot framed in browser chrome (hero) */
.cs-figure .browser{width:100%;margin:0;}
.cs-figure .browser image-slot{border:0;background:#fff;}
.cs-block{display:grid;grid-template-columns:200px 1fr;gap:clamp(20px,4vw,56px);padding:clamp(48px,7vw,86px) 0;border-bottom:1px solid var(--line);}
.cs-block .lab{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--green);}
.cs-block .lab small{display:block;color:var(--soft);margin-top:6px;letter-spacing:.04em;}
.cs-block .body{font-size:clamp(16px,1.15vw,17.5px);line-height:1.72;color:var(--ink-2);}
.cs-block .body p{font-size:inherit;line-height:inherit;color:inherit;margin:0 0 18px;max-width:680px;}
.cs-block .body p:first-child{margin-top:0;}
.cs-block .body p b,.cs-block .body p strong{color:var(--ink);font-weight:700;}
.cs-block .body p.cs-lead{color:var(--ink);}
/* bold sub-heading on its own line — same size, just bold + breathing room */
.cs-block .body p.cs-sub{font-size:inherit;line-height:inherit;font-weight:700;color:var(--ink);margin:34px 0 2px;}
.cs-block .body p.cs-sub.first{margin-top:0;}
/* one list style: tight dot bullets, no dividers */
.cs-list{list-style:none;margin:2px 0 20px;padding:0;max-width:680px;}
/* an intro sentence directly before a list should hug it, not float away */
.cs-block .body p:has(+ .cs-list){margin-bottom:6px;}
.cs-list li{font-size:inherit;line-height:inherit;color:var(--ink-2);position:relative;padding:4px 0 4px 22px;}
.cs-list li::before{content:"";position:absolute;left:3px;top:.8em;width:5px;height:5px;border-radius:50%;background:var(--green);}
.cs-list li b,.cs-list li strong{color:var(--ink);font-weight:700;}
/* a thought set on its own line — same body size, subtle rule, never sticks */
.cs-block .body p.cs-note{font-size:inherit;line-height:inherit;color:var(--ink-2);border-left:2px solid var(--green-line);padding:2px 0 2px 18px;margin:28px 0;max-width:680px;}
/* pull-quotes from interviews */
.cs-quotes{display:flex;flex-direction:column;gap:14px;margin:8px 0 22px;max-width:680px;}
.cs-quote{margin:0;font-size:inherit;line-height:inherit;color:var(--ink-2);border-left:2px solid var(--green-line);padding:2px 0 2px 18px;}
.cs-stat .num.sm{font-size:30px;}
.cs-twofig{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px);margin-top:8px;}
.cs-twofig figure{margin:0;}
.cs-twofig figcaption{font-family:var(--mono);font-size:11px;color:var(--soft);margin-top:10px;letter-spacing:.03em;}
.cs-stat .num.mark{color:var(--green-bright);}
.cs-twofig image-slot{width:100%;border:0;}
.cs-stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#fff;margin:8px 0 24px;max-width:680px;}
.cs-stat{padding:26px 24px;border-left:1px solid var(--line);}
.cs-stat:first-child{border-left:0;}
.cs-stat .num{font-size:40px;font-weight:800;letter-spacing:-.03em;color:var(--green);line-height:1;}
.cs-stat .lbl{font-size:13px;color:var(--soft);margin-top:8px;}
.cs-pager{display:flex;justify-content:space-between;gap:20px;padding:clamp(40px,6vw,70px) 0;}
.cs-pager a{text-decoration:none;color:inherit;font-family:var(--mono);}
.cs-pager .lbl{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);}
.cs-pager .t{display:block;font-family:var(--sans);font-size:clamp(18px,2.4vw,24px);font-weight:700;letter-spacing:-.02em;margin-top:6px;transition:color .2s;}
.cs-pager a:hover .t{color:var(--green);}
@media(max-width:760px){
  .cs-block{grid-template-columns:1fr;gap:14px;}
  .cs-stats{grid-template-columns:1fr;}
  .cs-stat{border-left:0;border-top:1px solid var(--line);}
  .cs-stat:first-child{border-top:0;}
  .cs-twofig{display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:12px;padding-bottom:8px;}
  .cs-twofig::-webkit-scrollbar{display:none;}
  .cs-twofig>figure{flex:0 0 82%;scroll-snap-align:start;}
}

/* ---------------- REVEAL ----------------
   Kept always-visible: this preview/webview throttles CSS transitions,
   which can freeze an opacity:0 start frame and blank the page.
   Content must never depend on an animation completing to be seen. */
.reveal,.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.dot{animation:none;}}

/* ---------------- INTRO LOADER (signature self-writes) ---------------- */
.intro-seen #intro{display:none !important;}
#intro{position:fixed;inset:0;z-index:9999;background:var(--paper);
  display:flex;align-items:center;justify-content:center;
  animation:introOut 2.7s ease forwards;}
#intro .intro-sig{position:relative;width:min(74vw,560px);color:var(--ink);line-height:0;}
#intro .intro-sig svg{width:100%;height:auto;display:block;
  clip-path:inset(0 100% 0 0);
  animation:introDraw 1.55s cubic-bezier(.66,.03,.31,1) .18s forwards;}
#intro .intro-nib{position:absolute;top:48%;left:0;width:8px;height:8px;border-radius:50%;
  background:var(--ink);opacity:0;transform:translate(-50%,-50%);
  animation:introNib 1.55s cubic-bezier(.66,.03,.31,1) .18s forwards;}
@keyframes introDraw{to{clip-path:inset(0 0 0 0);}}
@keyframes introNib{0%{left:0;opacity:0;}9%{opacity:1;}90%{opacity:1;}100%{left:100%;opacity:0;}}
@keyframes introOut{0%,76%{opacity:1;}100%{opacity:0;visibility:hidden;pointer-events:none;}}
@media(prefers-reduced-motion:reduce){
  #intro .intro-sig svg{clip-path:none !important;animation:none !important;}
  #intro .intro-nib{display:none;}
}

/* ---------------- PAGE TRANSITIONS ---------------- */
@media(prefers-reduced-motion:no-preference){
  .t-anim main{animation:pageIn .5s cubic-bezier(.22,.61,.36,1) both;}
  .t-anim.t-leave main{animation:pageOut .26s ease forwards;}
}
@keyframes pageIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
@keyframes pageOut{from{opacity:1;transform:none;}to{opacity:0;transform:translateY(-7px);}}

/* ---------------- RESPONSIVE ---------------- */
@media(max-width:860px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-portrait{width:220px;order:-1;}
  .bio{max-width:660px;}
  .skills-grid{grid-template-columns:1fr;gap:34px;}
  .essays{grid-template-columns:1fr;}
  .closing-cols{grid-template-columns:1fr;gap:30px;}
  .cl-col{padding:0;}
  .cl-col.no{border-left:0;border-top:1px solid var(--line);padding-top:28px;}
}
@media(max-width:680px){
  .essays .essay:nth-child(n+4){display:none;}

  .hero-meta{display:block;}
  /* Hero: name → meta → photo+chips → bio */
  .hero-grid{display:flex;flex-direction:column;gap:0;}
  .hero-left{display:contents;}
  .hero-name{order:1;margin-bottom:14px;}
  .hero-meta{order:2;margin-bottom:20px;}
  .hero-meta .hero-role{font-size:17px;font-weight:600;margin:0 0 4px;letter-spacing:-.01em;}
  .hero-meta .hero-tag{font-size:13px;color:var(--soft);margin:0;}
  .hero-portrait{
    order:3;
    width:calc(100% + 2 * var(--pad));
    margin-left:calc(-1 * var(--pad));
    position:relative;
    overflow:hidden;
    border-radius:0;
  }
  .hero-portrait image-slot{height:calc(76vw + 50px) !important;width:100%;display:block;}
  .hero-portrait>.hero-role,.hero-portrait>.hero-tag{display:none;}
  .bio{order:4;margin-top:28px;}
  .facts{
    position:absolute;bottom:0;left:0;right:0;
    flex-direction:row;flex-wrap:wrap;gap:6px;
    padding:12px var(--pad) 14px;margin:0;
    background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-top:none;
    justify-content:flex-start;
  }
  .facts li{
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    border-radius:20px;padding:4px 12px;font-size:12px;color:var(--ink);gap:3px;
  }
  .facts li::before{display:none;}


  .nav-in{height:56px;}
  .nav .brand-sig{height:26px;}
  .nav-right{gap:12px;}
  .nav-links{display:none;}
  .nav-links.open{display:flex;position:absolute;top:56px;left:0;right:0;flex-direction:column;gap:18px;background:var(--paper);padding:24px var(--pad);border-bottom:1px solid var(--line);}
  .nav-burger{display:flex;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px;}
  .nav-burger span{width:22px;height:2px;background:var(--ink);}
}
@media(max-width:400px){
  .nav .brand-sig{height:23px;}
  .nav-right{gap:9px;}
  .lang-switch button{padding:6px 9px;}
}
@media(max-width:680px){
  .talk-msg{display:flex;width:100%;box-sizing:border-box;}
  .talk-menu{display:none!important;}
  .colophon{flex-direction:column;gap:6px;align-items:center;text-align:center;}
}

/* ── Bottom sheet ─────────────────────────────────────────────── */
.msg-sheet{display:none;}
@media(max-width:680px){
  .msg-sheet{
    display:block;position:fixed;inset:0;z-index:300;
    pointer-events:none;
  }
  .msg-sheet.is-open{pointer-events:auto;}
  .msg-sheet-bd{
    position:absolute;inset:0;
    background:rgba(0,0,0,0);
    transition:background .28s ease;
  }
  .msg-sheet.is-open .msg-sheet-bd{background:rgba(0,0,0,.5);}
  .msg-sheet-panel{
    position:absolute;bottom:0;left:0;right:0;
    background:#20201f;
    border-radius:20px 20px 0 0;
    padding:12px 20px calc(env(safe-area-inset-bottom,0px) + 24px);
    transform:translateY(100%);
    transition:transform .32s cubic-bezier(.32,0,.67,0);
  }
  .msg-sheet.is-open .msg-sheet-panel{
    transform:translateY(0);
    transition:transform .32s cubic-bezier(.33,1,.68,1);
  }
  .msg-sheet-notch{
    width:36px;height:4px;border-radius:2px;
    background:rgba(255,255,255,.2);
    margin:0 auto 24px;
  }
  .msg-sheet-link{
    display:flex;flex-direction:column;gap:3px;
    padding:16px 0;
    text-decoration:none;color:#fff;
    font-family:var(--sans);font-size:17px;font-weight:600;
    border-bottom:1px solid rgba(255,255,255,.1);
  }
  .msg-sheet-link:last-child{border-bottom:none;}
  .msg-sheet-link .tm-note{font-family:var(--mono);font-size:12px;font-weight:400;color:#8fae97;letter-spacing:.01em;}
}