/* =========================================================================
   Okkar Soe Oo — translator site
   Palette, type and layout. Light + dark, mobile first.
   ========================================================================= */

:root{
  --paper:#fbf8f4;
  --surface:#ffffff;
  --surface-2:#f4efe8;
  --ink:#1c1a17;
  --ink-soft:#57514a;
  --ink-faint:#8b8279;
  --line:#e6ded3;
  --brand:#2f5d62;
  --brand-ink:#24484c;
  --accent:#b9643a;
  --ok:#3f7d4e;

  --clay:#b9643a; --teal:#2f5d62; --plum:#6d4664;
  --indigo:#3f4f80; --moss:#4e6b45; --sand:#9a7b3f;

  --radius:18px;
  --radius-lg:26px;
  --shadow:0 1px 2px rgba(28,26,23,.05), 0 8px 24px -12px rgba(28,26,23,.18);
  --shadow-lg:0 2px 4px rgba(28,26,23,.06), 0 28px 60px -28px rgba(28,26,23,.32);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --wrap:1120px;
}

html[data-theme="dark"]{
  --paper:#14130f;
  --surface:#1c1a16;
  --surface-2:#232019;
  --ink:#f2ece3;
  --ink-soft:#bdb4a8;
  --ink-faint:#8d8478;
  --line:#322d25;
  --brand:#7fb3b0;
  --brand-ink:#9ec8c4;
  --accent:#d98a5f;
  --ok:#6faa7c;
  --clay:#d98a5f; --teal:#7fb3b0; --plum:#b28aa8;
  --indigo:#8d9bd0; --moss:#8fb183; --sand:#cdaa6c;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 26px -14px rgba(0,0,0,.7);
  --shadow-lg:0 2px 6px rgba(0,0,0,.45), 0 30px 64px -30px rgba(0,0,0,.85);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(60rem 40rem at 82% -12%, color-mix(in srgb,var(--brand) 13%, transparent), transparent 70%),
    radial-gradient(48rem 34rem at -8% 8%, color-mix(in srgb,var(--accent) 10%, transparent), transparent 72%);
}
main,.site-head,.site-foot{position:relative; z-index:1}

img{max-width:100%}
h1,h2,h3{font-family:var(--serif); font-weight:600; line-height:1.15; letter-spacing:-.015em; margin:0}
a{color:inherit}
.wrap{width:min(100% - 2.2rem, var(--wrap)); margin-inline:auto}

.skip{position:absolute; left:-9999px; top:0; background:var(--brand); color:#fff;
  padding:.7rem 1.1rem; border-radius:0 0 12px 0; z-index:99}
.skip:focus{left:0}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2.5px solid var(--brand); outline-offset:3px; border-radius:6px;
}

/* ---------------------------------------------------------------- header */
.site-head{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s, background .25s;
}
.site-head.stuck{border-bottom-color:var(--line)}
.head-inner{display:flex; align-items:center; gap:1rem; min-height:64px}

.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none; margin-right:auto}
.brand-mark{
  width:36px; height:36px; flex:none; display:grid; place-items:center;
  border-radius:11px; background:var(--brand); color:#fff;
  font-family:var(--serif); font-size:.82rem; letter-spacing:.02em;
}
.brand-text{display:flex; flex-direction:column; line-height:1.15}
.brand-text strong{font-family:var(--serif); font-weight:600; font-size:1rem}
.brand-text em{font-style:normal; font-size:.76rem; color:var(--ink-faint); letter-spacing:.06em; text-transform:uppercase}

.nav{display:none; gap:.25rem}
.nav a{
  text-decoration:none; font-size:.9rem; color:var(--ink-soft);
  padding:.45rem .7rem; border-radius:10px; transition:color .2s, background .2s;
}
.nav a:hover{color:var(--ink); background:var(--surface-2)}
@media (min-width:820px){ .nav{display:flex} }

.icon-btn{
  appearance:none; border:1px solid var(--line); background:var(--surface);
  color:var(--ink-soft); width:38px; height:38px; flex:none; border-radius:11px;
  display:grid; place-items:center; cursor:pointer;
  transition:color .2s, border-color .2s, transform .15s, background .2s;
}
.icon-btn:hover{color:var(--ink); border-color:var(--ink-faint)}
.icon-btn:active{transform:scale(.94)}
.icon-btn svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round}
.icon-btn.round{border-radius:50%; font:600 .82rem/1 var(--sans); gap:1px}
.icon-btn .minus,.icon-btn .plus{font-size:.68em; vertical-align:super}

.i-moon{display:none}
html[data-theme="dark"] .i-sun{display:none}
html[data-theme="dark"] .i-moon{display:block}

/* ----------------------------------------------------------------- hero */
.hero{padding:10px 1.1rem 0}
@media (min-width:820px){ .hero{padding:14px clamp(20px,5vw,64px) 0} }

.hero-box{
  position:relative; width:100%; max-width:var(--wrap); margin-inline:auto;
  min-height:min(84vh,860px);
  display:flex; align-items:center; justify-content:flex-end;
  padding:clamp(20px,4vw,52px);
  border-radius:clamp(24px,3vw,40px);
  overflow:hidden; isolation:isolate;
  box-shadow:var(--shadow-lg);
}
.hero-img{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover; object-position:30% center;
}
/* keeps the card legible whatever photo goes behind it */
.hero-box::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg,
    rgba(28,24,20,.38) 0%, rgba(28,24,20,.12) 38%, rgba(28,24,20,.34) 100%);
}

.hero-card{
  width:clamp(300px,44%,480px);
  padding:clamp(22px,2.6vw,38px);
  border-radius:clamp(18px,2vw,26px);
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:var(--shadow-md,0 14px 40px rgba(28,24,20,.18));
  color:#1c1a17;
}
html[data-theme="dark"] .hero-card{
  background:rgba(24,22,19,.58);
  border-color:rgba(255,255,255,.14);
  color:var(--ink);
}

.eyebrow{
  margin:0 0 .6rem; display:inline-flex; align-items:center; gap:.45rem;
  font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; font-weight:600;
  color:#2d6b45;
}
html[data-theme="dark"] .eyebrow{color:var(--ok)}
.eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%; background:currentColor;
  box-shadow:0 0 0 3px color-mix(in srgb,currentColor 20%, transparent);
}

#heroName{
  font-size:clamp(2.1rem,4.6vw,3.5rem); line-height:1.04;
  font-variation-settings:"opsz" 144; text-wrap:balance;
}
.role{
  margin:.5rem 0 0; font-size:.68rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--accent); font-weight:600;
}
.hero-intro{
  margin:1.05rem 0 0; font-family:var(--serif); font-weight:400;
  font-size:clamp(1rem,1.15vw,1.12rem); line-height:1.5;
  color:color-mix(in srgb,#1c1a17 78%, transparent);
}
html[data-theme="dark"] .hero-intro{color:var(--ink-soft)}

.chips{display:flex; flex-wrap:wrap; gap:.38rem; list-style:none; padding:0; margin:1.1rem 0 0}
.chips li{
  font-size:.72rem; padding:.28rem .62rem; border-radius:999px;
  background:rgba(255,255,255,.55); color:#4b443c;
  border:1px solid rgba(28,24,20,.12);
}
html[data-theme="dark"] .chips li{
  background:rgba(255,255,255,.07); color:var(--ink-soft); border-color:rgba(255,255,255,.14);
}

.hero-actions{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem}
.hero-actions .btn{flex:1 1 auto}
html[data-theme="light"] .hero-actions .btn-ghost,
:root:not([data-theme="dark"]) .hero-actions .btn-ghost{
  color:#1c1a17; border-color:rgba(28,24,20,.22); background:rgba(255,255,255,.4);
}
.hero-meta{
  margin:1.1rem 0 0; font-size:.75rem; letter-spacing:.02em;
  color:color-mix(in srgb,#1c1a17 55%, transparent);
}
html[data-theme="dark"] .hero-meta{color:var(--ink-faint)}

.hero-scroll{
  position:absolute; left:clamp(20px,4vw,52px); bottom:clamp(20px,4vw,52px);
  display:none; align-items:center; gap:.75rem; color:#fff; text-decoration:none;
  font:600 .66rem/1 var(--sans); letter-spacing:.16em; text-transform:uppercase;
  text-shadow:0 1px 12px rgba(0,0,0,.45);
}
@media (min-width:900px){ .hero-scroll{display:inline-flex} }
.hero-scroll::before{
  content:""; width:44px; height:1px; background:rgba(255,255,255,.75);
  transform-origin:left; animation:pull 2.6s cubic-bezier(.22,.61,.36,1) infinite;
}
@keyframes pull{ 0%,100%{transform:scaleX(.5); opacity:.6} 50%{transform:scaleX(1); opacity:1} }
@media (prefers-reduced-motion:reduce){ .hero-scroll::before{animation:none} }

/* On phones the photo stays the card — it just gets taller, and the info
   panel sits inside it along the bottom rather than hanging off the end. */
@media (max-width:719px){
  .hero-box{
    align-items:flex-end;
    min-height:min(86vh,720px);
    padding:13px;
  }
  .hero-img{object-position:center 26%}
  .hero-box::after{
    background:linear-gradient(to top,
      rgba(26,22,18,.58) 0%, rgba(26,22,18,.20) 44%, rgba(26,22,18,.26) 100%);
  }
  .hero-card{
    width:100%;
    padding:1.1rem 1.05rem 1.15rem;
    border-radius:18px;
    background:rgba(255,255,255,.72);
  }
  html[data-theme="dark"] .hero-card{background:rgba(22,20,17,.7)}

  #heroName{font-size:clamp(1.7rem,8vw,2.3rem)}
  .role{margin-top:.35rem; font-size:.62rem; letter-spacing:.18em}
  .eyebrow{font-size:.62rem; margin-bottom:.45rem}
  .hero-intro{margin-top:.75rem; font-size:.95rem; line-height:1.45}
  .chips{margin-top:.8rem; gap:.32rem}
  .chips li{font-size:.67rem; padding:.22rem .55rem}
  .hero-actions{margin-top:1.05rem; gap:.45rem}
  .hero-actions .btn{flex:1 1 100%; padding:.74rem 1rem; font-size:.86rem}
  .hero-meta{margin-top:.8rem; font-size:.69rem}
}

/* ------------------------------------------------------------ about page */
.page-hero{padding:2.2rem 0 0}
@media (min-width:820px){ .page-hero{padding:3.6rem 0 0} }

.page-hero-grid{display:grid; gap:1.8rem; align-items:center}
@media (min-width:860px){
  .page-hero-grid{grid-template-columns:1.1fr .9fr; gap:clamp(24px,4vw,64px)}
}

.crumbs{
  display:flex; gap:.6rem; align-items:center;
  font-size:.78rem; color:var(--ink-faint); margin-bottom:1.1rem;
}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--brand)}

.kicker{
  margin:0 0 .6rem; font:600 .68rem/1 var(--sans);
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
}
#aboutName{font-size:clamp(2.1rem,5.2vw,3.6rem); text-wrap:balance}
.page-lede{
  margin:1.1rem 0 0; font-family:var(--serif); font-weight:400;
  font-size:clamp(1.05rem,1.6vw,1.3rem); line-height:1.5;
  color:var(--ink-soft); max-width:46ch;
}
.page-hero-actions{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.8rem}

/* the arched portrait — the shape the site's icon and covers already use */
.page-hero-media{
  margin:0; overflow:hidden; aspect-ratio:4/5;
  border-radius:999px 999px var(--radius) var(--radius);
  box-shadow:var(--shadow-lg); background:var(--surface-2);
  max-width:420px; justify-self:center; width:100%;
}
@media (max-width:859px){
  .page-hero-media{aspect-ratio:4/3.2; border-radius:var(--radius-lg); max-width:none; order:-1}
}
.page-hero-media img{width:100%; height:100%; object-fit:cover; display:block}

.stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem;
  margin:2.4rem 0 0; padding:1.3rem 0; border-block:1px solid var(--line);
}
.stats div{margin:0}
.stats dt{font-family:var(--serif); font-size:clamp(1.4rem,3.4vw,1.9rem); color:var(--ink); line-height:1}
.stats dd{margin:.25rem 0 0; font-size:.74rem; color:var(--ink-faint); line-height:1.35}

.prose{max-width:66ch; display:grid; gap:1rem}
.prose p{margin:0; color:var(--ink-soft)}
.prose p:first-child{
  font-family:var(--serif); font-size:clamp(1.08rem,1.5vw,1.25rem);
  line-height:1.55; color:var(--ink);
}

.bg-layout{display:grid; gap:1.6rem}
@media (min-width:880px){ .bg-layout{grid-template-columns:1.25fr .75fr; gap:2.6rem; align-items:start} }

.timeline{list-style:none; margin:0; padding:0; display:grid; gap:0}
.timeline li{
  display:flex; gap:1.1rem; align-items:baseline;
  padding:.85rem 0; border-bottom:1px solid var(--line); font-size:.92rem;
}
.timeline li:first-child{border-top:1px solid var(--line)}
.timeline b{flex:none; width:3.2rem; font:600 .72rem/1.6 var(--sans);
  letter-spacing:.07em; color:var(--ink-faint)}
.timeline span{color:var(--ink-soft)}

.now-card{
  background:linear-gradient(160deg,var(--surface),var(--surface-2));
  border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:1.5rem; box-shadow:var(--shadow);
}
.currently{margin:0; display:grid; gap:1rem}
.currently div{display:grid; gap:.15rem}
.currently dt{font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint)}
.currently dd{margin:0; font-family:var(--serif); font-size:1.02rem; color:var(--ink); line-height:1.4}

/* ---------------------------------------------------------------- buttons */
.btn{
  appearance:none; cursor:pointer; border:1px solid transparent;
  font:600 .92rem/1 var(--sans); padding:.85rem 1.25rem; border-radius:13px;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  text-decoration:none; transition:transform .15s, box-shadow .2s, background .2s, border-color .2s, color .2s;
}
.btn svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round}
.btn-primary{background:var(--brand); color:#fff; box-shadow:0 10px 22px -14px var(--brand)}
.btn-primary:hover{background:var(--brand-ink); transform:translateY(-1px)}
html[data-theme="dark"] .btn-primary{color:#11201f}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink-faint); background:var(--surface-2)}
.btn:active{transform:translateY(0) scale(.985)}
.btn.full{width:100%}
.btn-small{padding:.5rem .8rem; font-size:.8rem; border-radius:10px;
  background:var(--surface-2); color:var(--ink); border-color:var(--line)}

/* --------------------------------------------------------------- sections */
.section{padding:3.2rem 0}
@media (min-width:820px){ .section{padding:4.6rem 0} }
.section.alt{position:relative}

.sec-head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:.5rem 1.4rem; margin-bottom:1.6rem}
/* a standalone sub-line sits beside the heading when there is room, under it when not */
.sec-head > .sec-sub{flex:1 1 26ch; min-width:0}
.sec-head h2{font-size:clamp(1.5rem,4vw,2.15rem)}
.sec-sub{margin:.4rem 0 0; color:var(--ink-faint); font-size:.95rem; max-width:48ch}
.rail-nav{display:none; gap:.5rem}
@media (min-width:720px){ .rail-nav{display:flex} }

/* --------------------------------------------------------------- services */
.service-grid{display:grid; gap:.9rem; grid-template-columns:1fr}
@media (min-width:640px){ .service-grid{grid-template-columns:1fr 1fr} }
@media (min-width:1000px){ .service-grid{grid-template-columns:repeat(4,1fr)} }
.service{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.25rem; box-shadow:var(--shadow); transition:transform .2s, box-shadow .2s;
}
.service:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.service h3{font-size:1.05rem; margin-bottom:.4rem}
.service p{margin:0; font-size:.88rem; color:var(--ink-soft)}
.service .num{
  font:600 .72rem/1 var(--sans); color:var(--accent); letter-spacing:.1em; display:block; margin-bottom:.7rem;
}

/* ------------------------------------------------------------------ rail */
.rail-shell{position:relative; margin-inline:calc(-1 * max(1.1rem, (100vw - var(--wrap)) / 2))}
.rail{
  list-style:none; margin:0; display:flex; gap:1rem;
  padding:.5rem max(1.1rem,(100vw - var(--wrap)) / 2) 1.4rem;
  overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-padding-inline:max(1.1rem,(100vw - var(--wrap)) / 2);
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.rail::-webkit-scrollbar{display:none}
.rail.dragging{cursor:grabbing; scroll-snap-type:none}
.rail.dragging *{pointer-events:none}

.work{
  flex:0 0 min(86vw, 392px); scroll-snap-align:center;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); box-shadow:var(--shadow);
  display:flex; flex-direction:column; overflow:hidden;
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
@media (min-width:720px){ .work{scroll-snap-align:start} }
.work:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}

.work-cover{
  position:relative; padding:1.3rem 1.4rem 1.2rem; color:#fff; aspect-ratio:4/3;
  background:linear-gradient(145deg, var(--c), color-mix(in srgb, var(--c) 62%, #12100d));
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden; isolation:isolate;
}
/* the oversized quote mark is the fallback when there is no photo */
.work-cover::before{
  content:"”"; position:absolute; top:-1.6rem; right:.6rem;
  font-family:var(--serif); font-size:7rem; opacity:.17; line-height:1;
}
.work-cover.has-photo::before{display:none}

/* the photo, framed by the x / y / zoom values set in the editor */
.work-photo{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover; display:block;
  object-position:var(--px,50%) var(--py,50%);
  transform:scale(var(--pz,1));
  transition:transform .9s cubic-bezier(.22,.61,.36,1);
}
.work:hover .work-photo{transform:scale(calc(var(--pz,1) * 1.04))}
.work-cover.has-photo::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top,
    rgba(18,15,12,.82) 0%, rgba(18,15,12,.34) 46%, rgba(18,15,12,.08) 100%);
}
.work-kind{
  font-size:.68rem; letter-spacing:.13em; text-transform:uppercase;
  font-weight:600; opacity:.9; margin:0 0 .5rem;
}
.work-cover h3{font-size:1.3rem; color:#fff; text-wrap:balance;
  text-shadow:0 1px 14px rgba(0,0,0,.35)}
.work-author{margin:.35rem 0 0; font-size:.82rem; opacity:.86}

.work-body{padding:1.2rem 1.4rem 1.4rem; display:flex; flex-direction:column; flex:1; gap:.9rem}
.work-summary{margin:0; font-size:.9rem; color:var(--ink-soft); flex:1}
.work-facts{
  display:flex; flex-wrap:wrap; gap:.4rem .55rem; font-size:.74rem; color:var(--ink-faint);
  list-style:none; padding:0; margin:0;
}
.work-facts li{display:flex; align-items:center; gap:.4rem}
.work-facts li+li::before{content:"·"; color:var(--line)}
.work-actions{display:flex; gap:.55rem}
.work-actions .btn{flex:1; padding:.7rem .8rem; font-size:.85rem}

.rail-dots{display:flex; justify-content:center; gap:.4rem; margin-top:.2rem}
.rail-dots span{
  width:6px; height:6px; border-radius:50%; background:var(--line); transition:.25s;
}
.rail-dots span.on{background:var(--brand); width:20px; border-radius:3px}
.rail-hint{text-align:center; margin:.85rem 0 0; font-size:.76rem; color:var(--ink-faint)}
@media (min-width:720px){ .rail-hint{display:none} }

/* -------------------------------------------------------------------- wip */
.wip-grid{display:grid; gap:.9rem}
@media (min-width:900px){ .wip-grid{grid-template-columns:repeat(3,1fr)} }
.wip{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.3rem; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:.75rem;
}
.wip-top{display:flex; justify-content:space-between; gap:.8rem; align-items:baseline}
.wip h3{font-size:1.08rem}
.wip-kind{font-size:.7rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--accent); font-weight:600; white-space:nowrap}
.wip-author{margin:0; font-size:.83rem; color:var(--ink-faint)}
.wip-note{margin:0; font-size:.88rem; color:var(--ink-soft)}
.bar{height:7px; border-radius:99px; background:var(--surface-2); overflow:hidden; border:1px solid var(--line)}
.bar i{display:block; height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg,var(--brand),var(--accent));
  transition:width 1.1s cubic-bezier(.2,.8,.25,1)}
.wip-foot{display:flex; justify-content:space-between; font-size:.76rem; color:var(--ink-faint)}
.wip-pct{font-weight:600; color:var(--ink)}

/* ----------------------------------------------------------------- future */
.future-layout{display:grid; gap:1.4rem}
@media (min-width:960px){ .future-layout{grid-template-columns:1.35fr .85fr; align-items:start} }

.pipeline{list-style:none; margin:0; padding:0; counter-reset:p}
.pipeline li{
  position:relative; padding:0 0 1.5rem 2.3rem; counter-increment:p;
}
.pipeline li::before{
  content:counter(p,decimal-leading-zero);
  position:absolute; left:0; top:.05rem; font:600 .74rem/1 var(--sans);
  color:var(--brand); background:var(--surface); border:1px solid var(--line);
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
}
.pipeline li::after{
  content:""; position:absolute; left:13.5px; top:32px; bottom:.2rem; width:1px;
  background:linear-gradient(var(--line), transparent);
}
.pipeline li:last-child{padding-bottom:0}
.pipeline li:last-child::after{display:none}
.pipeline h3{font-size:1.05rem; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap}
.pipeline p{margin:.35rem 0 0; font-size:.89rem; color:var(--ink-soft); max-width:56ch}
.tag{
  font:600 .68rem/1 var(--sans); letter-spacing:.07em; text-transform:uppercase;
  padding:.3rem .55rem; border-radius:7px; background:var(--surface-2);
  color:var(--ink-faint); border:1px solid var(--line); white-space:nowrap;
}
.tag.open{color:var(--ok); border-color:color-mix(in srgb,var(--ok) 35%, var(--line))}

.ask-card{
  background:linear-gradient(160deg, var(--surface), var(--surface-2));
  border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:1.6rem; box-shadow:var(--shadow-lg); position:sticky; top:84px;
}
.ask-kicker{margin:0 0 .5rem; font:600 .7rem/1 var(--sans); letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent)}
.ask-card h3{font-size:1.3rem; margin-bottom:.6rem; text-wrap:balance}
.ask-card p{margin:0 0 1.1rem; font-size:.9rem; color:var(--ink-soft)}
.ask-foot{margin:.8rem 0 0 !important; font-size:.78rem; color:var(--ink-faint); text-align:center}

/* ---------------------------------------------------------------- contact */
.contact-band{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); padding:1.8rem;
  display:grid; gap:1.4rem; align-items:center;
}
@media (min-width:860px){
  .contact-band{grid-template-columns:1.3fr auto; padding:2.4rem 2.6rem}
}
.link-list{list-style:none; margin:1rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.6rem}
.link-list a{
  text-decoration:none; font-size:.86rem; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:999px; padding:.42rem .9rem;
  background:var(--surface-2); transition:.2s;
}
.link-list a:hover{color:var(--ink); border-color:var(--ink-faint)}
.contact-actions{display:flex; flex-wrap:wrap; gap:.7rem}

/* ----------------------------------------------------------------- footer */
.site-foot{border-top:1px solid var(--line); padding:1.8rem 0; margin-top:1rem}
.foot-inner{display:flex; flex-wrap:wrap; gap:.6rem; justify-content:space-between;
  font-size:.8rem; color:var(--ink-faint)}
.foot-inner p{margin:0}

/* ----------------------------------------------------------------- modals */
.modal{position:fixed; inset:0; z-index:60; display:grid; place-items:end center}
@media (min-width:720px){ .modal{place-items:center} }
.modal[hidden]{display:none}
.modal-scrim{position:absolute; inset:0; background:rgba(20,18,15,.55); backdrop-filter:blur(3px);
  animation:fade .25s ease}
.modal-panel{
  position:relative; width:min(100%, 560px); max-height:92dvh; overflow-y:auto;
  background:var(--surface); border:1px solid var(--line);
  border-radius:24px 24px 0 0; padding:1.6rem 1.3rem 1.8rem;
  box-shadow:var(--shadow-lg); animation:slide .3s cubic-bezier(.2,.8,.25,1);
}
@media (min-width:720px){
  .modal-panel{border-radius:24px; padding:2.1rem; animation:pop .25s cubic-bezier(.2,.8,.25,1)}
  .modal-panel.wide{width:min(100%,680px)}
}
.modal-panel::before{
  content:""; display:block; width:40px; height:4px; border-radius:99px;
  background:var(--line); margin:-.6rem auto 1.1rem;
}
@media (min-width:720px){ .modal-panel::before{display:none} }
@keyframes fade{from{opacity:0}}
@keyframes slide{from{transform:translateY(24px); opacity:0}}
@keyframes pop{from{transform:scale(.97); opacity:0}}
@media (prefers-reduced-motion:reduce){
  .modal-scrim,.modal-panel{animation:none}
}
.modal-x{position:absolute; top:1rem; right:1rem; z-index:2}
.modal-kicker{margin:0 0 .35rem; font:600 .7rem/1 var(--sans); letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent)}
.modal-panel h2{font-size:clamp(1.4rem,4vw,1.8rem)}
.modal-sub{margin:.5rem 0 1.4rem; color:var(--ink-faint); font-size:.9rem}

/* ------------------------------------------------------------------ forms */
.form{display:flex; flex-direction:column; gap:.95rem}
.row{display:grid; gap:.95rem}
@media (min-width:560px){ .row{grid-template-columns:1fr 1fr} }
.field{display:flex; flex-direction:column; gap:.35rem}
.field label{font-size:.82rem; font-weight:600; color:var(--ink-soft)}
.opt{font-weight:400; color:var(--ink-faint)}
.field input,.field select,.field textarea{
  font:400 .94rem/1.5 var(--sans); color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  padding:.72rem .85rem; width:100%; transition:border-color .2s, box-shadow .2s;
}
.field textarea{resize:vertical; min-height:96px}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-faint)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%, transparent);
}
.field select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-faint) 50%),
                   linear-gradient(135deg,var(--ink-faint) 50%,transparent 50%);
  background-position:calc(100% - 18px) 52%, calc(100% - 13px) 52%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:2.2rem}
.err{font-size:.76rem; color:var(--accent); min-height:0; display:none}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--accent)}
.field.invalid .err,.err.show{display:block}

.check{display:flex; gap:.6rem; align-items:flex-start; font-size:.85rem; color:var(--ink-soft)}
.check input{width:18px; height:18px; margin-top:.15rem; accent-color:var(--brand); flex:none}
.hint{margin:0; font-size:.8rem; color:var(--ink-faint);
  background:var(--surface-2); border:1px dashed var(--line);
  border-radius:12px; padding:.75rem .9rem}
.form-note{margin:.2rem 0 0; font-size:.8rem; color:var(--ink-faint); text-align:center; min-height:1em}
.form-note.error{color:var(--accent)}

.form-done{text-align:center; padding:1.5rem 0 .5rem; display:flex; flex-direction:column;
  align-items:center; gap:.7rem}
.done-tick{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in srgb,var(--ok) 15%, transparent); color:var(--ok);
  font-size:1.6rem; border:1px solid color-mix(in srgb,var(--ok) 35%, transparent);
}
.form-done p{margin:0; color:var(--ink-soft); font-size:.9rem; max-width:40ch}

/* ----------------------------------------------------------------- reader */
.reader .modal-panel{width:min(100%,760px); padding:0; display:flex; flex-direction:column;
  max-height:94dvh; overflow:hidden}
.reader .modal-panel::before{display:none}
.reader-bar{
  display:flex; gap:1rem; align-items:flex-start; justify-content:space-between;
  padding:1.2rem 1.2rem .9rem; border-bottom:1px solid var(--line);
  background:var(--surface); position:sticky; top:0; z-index:2;
}
@media (min-width:720px){ .reader-bar{padding:1.4rem 1.7rem 1rem} }
.reader-meta h2{font-size:1.15rem; text-wrap:balance}
.reader-meta p{margin:.3rem 0 0; font-size:.78rem; color:var(--ink-faint)}
.reader-tools{display:flex; gap:.4rem; align-items:center; flex:none}
.reader-progress{height:2px; background:var(--line)}
.reader-progress span{display:block; height:100%; width:0; background:var(--brand); transition:width .1s linear}
.reader-body{
  overflow-y:auto; padding:1.6rem 1.3rem 3rem; font-size:var(--rsize,1.02rem);
  line-height:1.78; font-family:var(--serif); font-weight:400; color:var(--ink);
}
@media (min-width:720px){ .reader-body{padding:2.2rem 3rem 4rem} }
.reader-body p{margin:0 0 1.15em; max-width:64ch}
.reader-body p.drop::first-letter{
  float:left; font-size:3.1em; line-height:.82; padding:.08em .1em 0 0; color:var(--brand);
  font-weight:600;
}
.reader-body h3{font-size:1.15em; margin:2em 0 .6em}
.reader-body blockquote{margin:1.4em 0; padding-left:1.1em; border-left:2px solid var(--brand);
  color:var(--ink-soft); font-style:italic}
.reader-body .note{
  font-family:var(--sans); font-size:.82rem; color:var(--ink-faint);
  background:var(--surface-2); border-radius:10px; padding:.8rem 1rem; max-width:none;
}
.reader-empty{font-family:var(--sans); color:var(--ink-faint); font-size:.9rem}

/* ----------------------------------------------------------------- reveal */
.reveal{opacity:0; transform:translateY(14px)}
.reveal.in{opacity:1; transform:none; transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.25,1)}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none}
}

/* =========================================================================
   THE READING PAGE  (read.html)
   ========================================================================= */
body.reading{background:var(--paper)}
body.reading::before{display:none}          /* no tinted wash while reading */

.read-bar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:1rem;
  padding:.65rem clamp(.9rem,3vw,1.6rem);
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .25s;
}
.read-bar.stuck{border-bottom-color:var(--line)}

.read-back{
  display:inline-flex; align-items:center; gap:.4rem; flex:none;
  text-decoration:none; color:var(--ink-soft); font-size:.84rem;
  padding:.4rem .6rem .4rem .35rem; border-radius:10px; transition:color .2s, background .2s;
}
.read-back:hover{color:var(--ink); background:var(--surface-2)}
.read-back svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round}
@media (max-width:620px){ .read-back span{display:none} }

.read-id{min-width:0; flex:1; text-align:center}
.read-title{
  margin:0; font-family:var(--serif); font-size:.98rem; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.read-sub{margin:.1rem 0 0; font-size:.72rem; color:var(--ink-faint);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.read-tools{display:flex; align-items:center; gap:.4rem; flex:none}
@media (max-width:520px){ #fontDown, #fontUp{display:none} }

.read-progress{position:sticky; top:0; z-index:39; height:2px; background:var(--line)}
.read-progress span{display:block; height:100%; width:0; background:var(--brand)}

/* --- shell: contents beside the text on wide screens -------------------- */
.read-shell{
  display:grid; grid-template-columns:1fr;
  max-width:1180px; margin-inline:auto;
  padding:0 clamp(.9rem,3vw,1.6rem);
}
@media (min-width:1080px){
  .read-shell{grid-template-columns:250px minmax(0,1fr); gap:2.5rem; align-items:start}
}

.toc{
  position:fixed; inset:0 auto 0 0; z-index:60; width:min(84vw,310px);
  background:var(--surface); border-right:1px solid var(--line);
  transform:translateX(-102%); transition:transform .32s cubic-bezier(.22,.8,.26,1);
  overflow-y:auto; box-shadow:var(--shadow-lg);
}
body.toc-open .toc{transform:none}
.toc-scrim{position:fixed; inset:0; z-index:59; background:rgba(20,18,15,.45)}
@media (min-width:1080px){
  .toc{
    position:sticky; top:86px; inset:auto; width:auto; transform:none;
    background:none; border:0; box-shadow:none; max-height:calc(100vh - 110px);
  }
  .toc-scrim{display:none !important}
  #tocBtn{display:none}
}
.toc-inner{padding:1.4rem 1.2rem}
@media (min-width:1080px){ .toc-inner{padding:2.6rem 0 1rem} }
.toc-head{
  margin:0 0 .9rem; font:600 .66rem/1 var(--sans); letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent);
}
.toc-list{list-style:none; margin:0; padding:0; display:grid; gap:.1rem; counter-reset:c}
.toc-list button{
  display:flex; gap:.7rem; align-items:baseline; width:100%; text-align:left;
  background:none; border:0; cursor:pointer; padding:.5rem .6rem;
  border-radius:9px; color:var(--ink-soft); font:400 .88rem/1.4 var(--sans);
  transition:background .2s, color .2s;
}
.toc-list button:hover{background:var(--surface-2); color:var(--ink)}
.toc-list button.on{background:var(--surface-2); color:var(--ink); font-weight:600}
.toc-n{flex:none; font:600 .68rem/1.5 var(--sans); color:var(--ink-faint);
  letter-spacing:.06em}
.toc-list button.on .toc-n{color:var(--accent)}

/* --- the text ------------------------------------------------------------ */
.read-main{min-width:0; padding-bottom:5rem}
.read-doc{max-width:40rem; margin-inline:auto; padding-top:clamp(2rem,5vw,3.6rem)}

.read-head{margin-bottom:2.6rem; padding-bottom:1.6rem; border-bottom:1px solid var(--line)}
.read-head h1{font-size:clamp(1.9rem,5vw,3rem); text-wrap:balance; margin-top:.3rem}
.read-meta{margin:.9rem 0 0; font-size:.82rem; color:var(--ink-faint)}

.chap-title{
  font-size:clamp(1.25rem,3vw,1.6rem); margin:0 0 1.6rem; color:var(--ink);
  text-wrap:balance;
}

.read-body{
  font-family:var(--serif); font-weight:400;
  font-size:var(--rsize,1.06rem); line-height:1.8; color:var(--ink);
}
.read-body p{margin:0 0 1.15em}
.read-body p.drop::first-letter{
  float:left; font-size:3.2em; line-height:.82; padding:.08em .1em 0 0;
  color:var(--brand); font-weight:600;
}
.read-body h2,.read-body h3{margin:2em 0 .7em; font-size:1.18em}
.read-body blockquote{
  margin:1.5em 0; padding-left:1.2em; border-left:2px solid var(--brand);
  color:var(--ink-soft); font-style:italic;
}
.read-body ul,.read-body ol{margin:0 0 1.15em; padding-left:1.3em}
.read-body li{margin-bottom:.4em}
.read-body hr{border:0; border-top:1px solid var(--line); margin:2.4em auto; width:40%}
.read-body code{
  font-family:ui-monospace,Menlo,monospace; font-size:.86em;
  background:var(--surface-2); padding:.12em .35em; border-radius:5px;
}
.read-body img{border-radius:12px; margin:1.4em 0}
.read-missing{font-family:var(--sans); font-size:.95rem; color:var(--ink-faint)}

.chap-nav{
  display:flex; gap:.7rem; justify-content:space-between;
  margin-top:3.5rem; padding-top:1.6rem; border-top:1px solid var(--line);
}
.chap-nav .btn:disabled{opacity:.35; cursor:default; transform:none}
.read-end{
  margin-top:3rem; padding-top:1.6rem; border-top:1px solid var(--line);
  font-size:.88rem; color:var(--ink-faint); text-align:center;
}