/* =============================================================
   Angelika Dobrieva — portfolio
   Design tokens derived from the Sam Stoof branding template:
   accent #FF5500 · paper #F4F4F2 · ink #342D24 / #0E0E0E
   Type roles: display grotesk · body grotesk · mono labels · serif accent
   ============================================================= */

/* ---------- tokens: light ---------- */
:root{
  --paper:#F4F4F2;
  --paper-warm:#F7F5F1;
  --surface:#FFFFFF;

  --ink:#0E0E0E;
  --ink-head:#342D24;
  --ink-soft:#57514A;
  --ink-mono:#6B6155;

  --accent:#FF5500;
  --accent-ink:#FFFFFF;
  --accent-soft:#FFF0E7;

  --line:#DCD8D0;
  --line-soft:#E6E2DA;

  --tint-stone:#EAE7E0;
  --tint-warm:#FBEADF;

  --shadow:0 10px 30px rgba(52,45,36,.07);
  --shadow-lift:0 18px 44px rgba(52,45,36,.12);

  --f-display:"Fraunces",Georgia,"Times New Roman",serif;
  --f-body:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-serif:"Fraunces",Georgia,"Times New Roman",serif;
  --f-mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --measure:64ch;
  --wide:1200px;
  --shell:1560px;
}

/* ---------- tokens: dark ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#141311;
    --paper-warm:#191714;
    --surface:#1E1B18;

    --ink:#EDE9E1;
    --ink-head:#F5F1E9;
    --ink-soft:#BDB5AA;
    --ink-mono:#9A9086;

    --accent:#FF6A1F;
    --accent-ink:#141311;
    --accent-soft:#2C1B10;

    --line:#332E28;
    --line-soft:#2A2622;

    --tint-stone:#221F1B;
    --tint-warm:#2C1B10;

    --shadow:0 10px 30px rgba(0,0,0,.35);
    --shadow-lift:0 18px 44px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --paper:#141311;
  --paper-warm:#191714;
  --surface:#1E1B18;
  --ink:#EDE9E1;
  --ink-head:#F5F1E9;
  --ink-soft:#BDB5AA;
  --ink-mono:#9A9086;
  --accent:#FF6A1F;
  --accent-ink:#141311;
  --accent-soft:#2C1B10;
  --line:#332E28;
  --line-soft:#2A2622;
  --tint-stone:#221F1B;
  --tint-warm:#2C1B10;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --shadow-lift:0 18px 44px rgba(0,0,0,.5);
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.6;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--accent);color:var(--accent-ink)}
a{color:inherit}
img,video{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--accent);color:var(--accent-ink);
  font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  padding:12px 18px;z-index:100;
}
.skip:focus{left:0}

/* ---------- typography ---------- */
.eyebrow{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-mono);margin:0 0 18px;
}
.eyebrow.accent{color:var(--accent)}

h1{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(35px,5.4vw,64px);line-height:1.08;letter-spacing:-.012em;
  color:var(--accent);margin:0 0 28px;max-width:18ch;text-wrap:balance;
}
h1.ink{color:var(--ink-head)}
h2{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(25px,3.3vw,39px);line-height:1.18;letter-spacing:-.009em;
  color:var(--ink-head);margin:0 0 22px;max-width:22ch;text-wrap:balance;
}
h3{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(20px,2.2vw,26px);line-height:1.26;letter-spacing:-.007em;
  color:var(--ink-head);margin:0 0 14px;text-wrap:balance;
}
h4{
  font-family:var(--f-display);font-weight:500;font-size:19px;
  letter-spacing:-.004em;color:var(--ink-head);margin:0 0 10px;
}
p{margin:0 0 20px;color:var(--ink-soft);max-width:var(--measure)}
p.lede{font-size:clamp(18px,2vw,22px);line-height:1.5;color:var(--ink);max-width:52ch}
strong{color:var(--ink);font-weight:600}
.serif{font-family:var(--f-serif);font-optical-sizing:auto}

.dot{display:inline-block;width:13px;height:13px;border-radius:50%;background:var(--accent);vertical-align:middle}
h1 .dot{width:.17em;height:.17em;margin-left:.14em;transform:translateY(-.45em)}

/* ---------- layout ---------- */
.shell{max-width:var(--shell);margin:0 auto;padding:0 24px}
@media (min-width:1120px){.shell{padding:0 40px}}
.wrap{max-width:var(--wide)}
.measure{max-width:var(--measure)}
.band{padding:clamp(64px,9vw,120px) 0 0}
.rule{border:0;border-top:1px solid var(--line-soft);margin:clamp(64px,9vw,110px) 0 0}
main{padding-bottom:clamp(80px,10vw,130px)}
section{scroll-margin-top:110px}

/* ---------- topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:30;
  border-bottom:1px solid var(--line-soft);
  background:color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter:blur(10px);
}
.topbar-in{
  max-width:var(--shell);margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
@media (min-width:1120px){.topbar-in{padding:14px 40px}}
.wordmark{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-head);font-weight:700;text-decoration:none;white-space:nowrap;
}
.wordmark span{font-weight:400;color:var(--ink-mono);margin-left:10px;display:none}
@media (min-width:700px){.wordmark span{display:inline}}
.topnav{display:flex;gap:22px;align-items:center}
.topnav a{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-mono);text-decoration:none;transition:color .18s ease;
}
.topnav a:hover{color:var(--ink)}
.topnav a[aria-current="page"]{color:var(--accent)}

/* ---------- home: hero ---------- */
.home-hero{padding:clamp(120px,23vw,340px) 0 0}
.home-hero + .band{padding-top:clamp(28px,3vw,44px)}
.home-hero{display:grid;grid-template-columns:1fr;gap:clamp(30px,4vw,52px);align-items:start}
@media (min-width:1280px){
  .home-hero{grid-template-columns:minmax(0,1fr) 480px;gap:clamp(48px,5vw,80px);align-items:end}
  /* the list sits on the headline’s last baseline rather than its box edge */
  .hero-credits{padding-top:0;margin-bottom:10px}
}
.home-hero h1{
  font-family:var(--f-serif);font-optical-sizing:auto;font-weight:400;
  font-size:clamp(31px,4.3vw,53px);line-height:1.16;letter-spacing:-.012em;
  max-width:25ch;margin:0;text-wrap:pretty;
}
.home-hero h1 em{font-style:italic;font-weight:400}

.hero-credits{padding-top:clamp(4px,1.4vw,18px)}
.hero-credits ol{list-style:none;margin:0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:10px}
.hero-credits li{
  display:grid;grid-template-columns:64px minmax(0,150px) minmax(0,1fr);
  column-gap:20px;row-gap:1px;align-items:baseline;
}
.hero-credits .y{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;
  color:var(--ink-mono);position:relative;white-space:nowrap;
}
.hero-credits .is-now .y{color:var(--accent);text-transform:uppercase;letter-spacing:.14em}
.hero-credits .is-now .y::before{
  content:"";position:absolute;left:-16px;top:.4em;
  width:6px;height:6px;border-radius:50%;background:var(--accent);
}
@media (max-width:640px){
  .hero-credits ol{gap:16px}
  .hero-credits li{grid-template-columns:64px minmax(0,1fr)}
  .hero-credits .r{grid-column:2}
}
.hero-credits .o{font-family:var(--f-body);font-weight:500;font-size:15px;line-height:1.45;color:var(--ink);white-space:nowrap}
.hero-credits a.o{
  text-decoration:none;border-bottom:1px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
.hero-credits a.o:hover,
.hero-credits a.o:focus-visible{color:var(--accent);border-bottom-color:currentColor}
.hero-credits .r{font-size:14.5px;line-height:1.45;color:var(--ink-soft)}

/* ---------- work grid (project cards) ----------
   Every card is a 16:9 media slot plus meta. Record source clips at
   1920×1080; the slot crops with object-fit:cover, so anything that is
   not 16:9 loses its edges.                                          */
.workgrid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:clamp(36px,4.5vw,60px);
}
@media (min-width:900px){.workgrid{grid-template-columns:repeat(2,1fr)}}

.pcard{margin:0;min-width:0}
.pcard-link{display:block;text-decoration:none;color:inherit}

.pmedia{
  position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;
  background:var(--tint-stone);border:1px solid var(--line-soft);
  transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease;
}
.pmedia video,.pmedia img{width:100%;height:100%;object-fit:cover;display:block}
a.pcard-link:hover .pmedia{transform:translateY(-5px);box-shadow:var(--shadow-lift)}
a.pcard-link:hover .pt{color:var(--accent)}
a.pcard-link:focus-visible .pmedia{transform:translateY(-5px);box-shadow:var(--shadow-lift)}

.pmeta{display:flex;flex-direction:column;gap:11px;padding-top:20px}
.pkicker{
  display:flex;gap:16px;align-items:baseline;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-mono);
}
.pkicker .chip{color:var(--accent)}
.pt{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(22px,2.4vw,30px);line-height:1.2;letter-spacing:-.008em;
  color:var(--ink-head);transition:color .18s ease;margin:0;max-width:none;
}
.pd{color:var(--ink-soft);font-size:15.5px;line-height:1.55;margin:0;max-width:46ch}
.pcard.soon .pt{color:var(--ink-soft)}

.playmark{
  position:absolute;left:14px;bottom:14px;width:26px;height:26px;border-radius:50%;
  background:var(--accent);opacity:.95;transition:opacity .25s ease;pointer-events:none;
}
.playmark::after{
  content:"";position:absolute;left:10px;top:7px;
  border-style:solid;border-width:6px 0 6px 8px;
  border-color:transparent transparent transparent var(--accent-ink);
}
.pmedia.playing .playmark{opacity:0}
/* clips on the home page run by themselves, so the play badge is off
   from the first frame — it comes back only for reduced motion,
   where the card stays on its poster. */
.pmedia video[autoplay] ~ .playmark{opacity:0}
@media (prefers-reduced-motion: reduce){
  .pmedia video[autoplay] ~ .playmark{opacity:.95}
}

/* placeholder shown inside a card while its file is missing.
   It sits OVER the video rather than replacing it, so a clip that
   loads late can still take the card back. */
.pmedia .slot{
  position:absolute;inset:0;z-index:2;
  height:100%;min-height:0;border:0;border-radius:0;
  background:var(--tint-stone);padding:24px;
}
.pmedia .slot .v{font-size:14px;max-width:38ch}
.pmedia .slot .f{font-size:11px}

/* ---------- capability strip ---------- */
.threeup{display:grid;gap:26px;grid-template-columns:1fr;margin-top:34px}
@media (min-width:820px){.threeup{grid-template-columns:repeat(3,1fr)}}
.card{
  background:var(--surface);border:1px solid var(--line-soft);
  border-radius:10px;padding:28px 26px;box-shadow:var(--shadow);
}
.card .k{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:12px;
}
.card p{margin:0;font-size:15.5px;line-height:1.55}

/* ---------- case study rail ---------- */
.caselayout{display:grid;grid-template-columns:1fr;gap:0}
/* a grid item defaults to min-width:auto, which lets a wide table stretch
   the whole page; 0 keeps the scroll inside the element that owns it */
.caselayout > main{min-width:0}
@media (min-width:1120px){.caselayout{grid-template-columns:230px minmax(0,1fr);gap:64px}}
.rail{display:none}
@media (min-width:1120px){
  .rail{display:block;position:sticky;top:96px;align-self:start;padding-top:96px;height:max-content}
}
.rail ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.rail a{
  display:grid;grid-template-columns:26px 1fr;gap:8px;align-items:baseline;
  text-decoration:none;padding:7px 0;color:var(--ink-mono);transition:color .2s ease;
}
.rail a .n{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em}
.rail a .t{font-size:14.5px;line-height:1.3}
.rail a:hover{color:var(--ink)}
.rail a[aria-current="true"]{color:var(--accent)}
.rail a[aria-current="true"] .t{font-weight:600}

/* ---------- meta grid ---------- */
.metagrid{
  display:grid;gap:28px 32px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  border-top:1px solid var(--line);padding-top:26px;margin-top:44px;
}
.metagrid dt{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-mono);margin-bottom:9px;
}
.metagrid dd{margin:0;font-size:15.5px;line-height:1.45;color:var(--ink)}

/* ---------- media figures ---------- */
figure{margin:36px 0 0;max-width:var(--wide)}
.panel{
  background:var(--tint-stone);border-radius:10px;
  padding:38px 14px 14px;position:relative;overflow:hidden;
}
@media (min-width:700px){.panel{padding:40px 18px 18px}}
.panel.warm{background:var(--tint-warm)}
.panel .plabel{
  position:absolute;top:16px;left:20px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-mono);
}
.panel .media{border-radius:5px;overflow:hidden;background:var(--surface)}
.panel .media video,
.panel .media img{width:100%;display:block}
.slot{
  border:1px dashed var(--line);border-radius:6px;
  min-height:clamp(190px,28vw,360px);
  display:grid;place-items:center;text-align:center;padding:28px;
  background:color-mix(in srgb, var(--surface) 45%, transparent);
}
.slot .k{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:10px;
}
.slot .v{font-size:15px;color:var(--ink);max-width:46ch;line-height:1.5}
.slot .f{font-family:var(--f-mono);font-size:12px;color:var(--ink-mono);margin-top:12px;word-break:break-all}
.figpair{display:grid;grid-template-columns:1fr;gap:20px;margin:36px 0 0;max-width:var(--wide)}
.figpair figure{margin:0;max-width:none}
/* ---------- flow documents: the reader's scroll is the path ---------- */
.flane{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-mono);margin:0 0 12px;
}
.flowdoc{margin:26px 0 clamp(40px,5vw,64px);max-width:var(--wide)}
.flowsteps{list-style:none;margin:0;padding:0;position:relative}
.flowsteps::before,
.flowsteps::after{content:"";position:absolute;left:12px;top:16px;width:2px}
.flowsteps::before{bottom:28px;background:var(--line)}
.flowsteps::after{height:var(--rail,0px);background:var(--accent);transition:height .5s cubic-bezier(.4,0,.2,1)}
.fstep{
  position:relative;padding:0 0 clamp(36px,4.5vw,58px) 46px;
  opacity:.4;transition:opacity .45s ease;
}
.fstep.is-on{opacity:1}
.fstep:last-child{padding-bottom:0}
.fstep .fnum{
  position:absolute;left:0;top:2px;width:26px;height:26px;border-radius:50%;
  border:2px solid var(--line);background:var(--paper);
  display:grid;place-items:center;
  font-family:var(--f-mono);font-size:12px;color:var(--ink-mono);
  transition:border-color .45s ease,color .45s ease;
}
.fstep.is-on .fnum{border-color:var(--accent);color:var(--accent)}
.fstep .flane{margin:0 0 6px}
.fstep h4{margin:0 0 8px;font-size:clamp(19px,1.9vw,22px)}
.fstep p{margin:0;font-size:16px;line-height:1.55;color:var(--ink-soft);max-width:62ch}
.fstep p b{color:var(--ink);font-weight:600}
.fstep .fshot{
  margin-top:20px;border-radius:8px;overflow:hidden;
  background:#000;
}
.fstep .fshot img{width:100%;display:block}
.fstep .fcap{margin-top:12px;font-size:14.5px;color:var(--ink-mono)}
@media (prefers-reduced-motion:reduce){
  .fstep{opacity:1}
  .flowsteps::after{transition:none}
}
.trio{display:grid;gap:20px;grid-template-columns:1fr}
@media (min-width:760px){.trio{grid-template-columns:repeat(3,1fr)}}
.trio .slot{min-height:190px}
figcaption{font-size:14.5px;color:var(--ink-mono);margin-top:14px;max-width:var(--measure);line-height:1.5}

/* ---------- decision pairs ---------- */
.pairs{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:26px;max-width:var(--measure)}
.pairs li{border-left:2px solid var(--line);padding-left:20px}
.pairs .d{
  font-family:var(--f-body);font-weight:600;font-size:19px;line-height:1.3;
  color:var(--ink-head);letter-spacing:-.012em;
}
.pairs .o{margin:7px 0 0;color:var(--accent);font-size:16px;line-height:1.45}

/* ---------- pull quote ---------- */
.pull{
  font-family:var(--f-serif);font-optical-sizing:auto;font-weight:400;
  font-size:clamp(24px,3.4vw,38px);line-height:1.22;color:var(--accent);
  max-width:20ch;margin:clamp(44px,6vw,72px) 0;letter-spacing:-.01em;
}

/* ---------- note ---------- */
.note{border-left:2px solid var(--accent);padding:2px 0 2px 18px;margin:34px 0 0;max-width:var(--measure)}
.note .k{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:8px;
}
.note p{font-size:15px;margin:0;color:var(--ink-soft)}

/* ---------- unit demo ---------- */
.demo{
  margin:36px 0 0;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;max-width:var(--wide);
}
.demo-head{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  padding:16px 24px;border-bottom:1px solid var(--line-soft);background:var(--paper-warm);
}
.demo-head .k{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mono);
}
.toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--surface);gap:2px}
.toggle button{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  border:0;border-radius:999px;padding:8px 18px;cursor:pointer;background:transparent;color:var(--ink-mono);
  transition:background .18s ease,color .18s ease;
}
.toggle button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.demo-body{display:grid;grid-template-columns:1fr}
@media (min-width:780px){.demo-body{grid-template-columns:1fr 1fr}}
.demo-in{padding:26px 24px}
.demo-out{padding:26px 24px;background:var(--paper-warm);border-top:1px solid var(--line-soft)}
@media (min-width:780px){.demo-out{border-top:0;border-left:1px solid var(--line-soft)}}
.fieldrow{
  display:grid;grid-template-columns:1fr auto;gap:10px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--line-soft);
}
.fieldrow:last-child{border-bottom:0}
.fieldrow .lbl{font-size:14.5px;color:var(--ink-soft)}
.fieldrow .val{font-family:var(--f-mono);font-size:14.5px;color:var(--ink);font-variant-numeric:tabular-nums}
.readout{display:flex;flex-direction:column;gap:20px}
.stat .k{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-mono);margin-bottom:6px;
}
.stat .n{
  font-family:var(--f-body);font-weight:700;font-size:clamp(30px,4.6vw,44px);
  line-height:1;letter-spacing:-.03em;color:var(--ink-head);font-variant-numeric:tabular-nums;
}
.stat.danger .n{color:var(--accent)}
.stat .sub{font-size:13.5px;color:var(--ink-mono);margin-top:7px}
.demo-foot{
  padding:14px 24px;border-top:1px solid var(--line-soft);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mono);
}

/* ---------- about ---------- */
.about-grid{display:grid;gap:44px;grid-template-columns:1fr;margin-top:44px}
@media (min-width:900px){.about-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:72px}}
.deflist{border-top:1px solid var(--line)}
.deflist > div{padding:20px 0;border-bottom:1px solid var(--line-soft)}
.deflist dt{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-mono);margin-bottom:8px;
}
.deflist dd{margin:0;font-size:15.5px;line-height:1.5;color:var(--ink)}

/* ---------- footer ---------- */
.pagefoot{
  border-top:1px solid var(--line);margin-top:clamp(72px,10vw,130px);padding:34px 0 0;
  display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mono);
}
.pagefoot a{text-decoration:none;transition:color .18s ease}
.pagefoot a:hover{color:var(--accent)}

/* ---------- next-project link ---------- */
.nextlink{
  display:block;text-decoration:none;border-top:1px solid var(--line);
  margin-top:clamp(64px,9vw,110px);padding-top:30px;
}
.nextlink .k{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-mono);margin-bottom:10px;
}
.nextlink .t{
  font-family:var(--f-display);font-weight:500;font-size:clamp(24px,3vw,34px);
  letter-spacing:-.008em;color:var(--ink-head);transition:color .18s ease;
}
.nextlink:hover .t{color:var(--accent)}

/* =============================================================
   SCHEMATICS
   Flows drawn in markup instead of exported as pictures. They stay
   readable at any width, follow the theme, and can be corrected in a
   text editor when the product changes — which a PNG cannot.
   ============================================================= */

/* a labelled step */
.node{
  display:inline-block;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  line-height:1.3;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:6px;
  padding:10px 15px;
}
.node.is-end{border-color:var(--accent);color:var(--accent)}
.node.is-muted{background:transparent;border-style:dashed;color:var(--ink-mono)}

/* block wrapper: a mono lane label above a diagram */
.dgm{margin:clamp(30px,4vw,48px) 0 0;max-width:var(--wide)}
.dgm .flane{margin:0}

/* ---- chain: a linear path ----
   Vertical while narrow, horizontal as soon as there is room. */
.chain{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;align-items:flex-start}
.chain li{display:flex;flex-direction:column;align-items:flex-start;min-width:0;max-width:100%}
.chain li + li::before{
  content:"\2193";
  font-family:var(--f-mono);font-size:15px;line-height:1;color:var(--accent);
  padding:9px 0 9px 21px;
}
.chain.is-before li + li::before{color:var(--ink-mono)}
.chain.is-before .node{background:transparent;border-style:dashed;color:var(--ink-mono)}
@media (min-width:820px){
  .chain{flex-direction:row;flex-wrap:wrap;align-items:center;row-gap:10px}
  .chain li{flex-direction:row;align-items:center}
  .chain li + li::before{content:"\2192";padding:0 13px}
}

/* ---- arrow: a connector that turns with the layout ---- */
.arrow{
  display:block;font-family:var(--f-mono);font-size:15px;line-height:1;
  color:var(--accent);padding:9px 0 9px 21px;
}
.arrow::before{content:"\2193"}
@media (min-width:820px){
  .arrow{display:inline-block;padding:0 13px}
  .arrow::before{content:"\2192"}
}

/* ---- tree: one thing containing others ---- */
.tree,.tree ul{list-style:none;margin:0;padding:0}
.tree{margin:16px 0 0}
.tree ul{margin:10px 0 0 13px;padding-left:20px;border-left:1px solid var(--line)}
.tree ul > li{position:relative;padding:9px 0 0 18px}
.tree ul > li::before{
  content:"";position:absolute;left:-20px;top:18px;width:16px;height:1px;background:var(--line);
}
/* the trunk stops at the last branch rather than running past it */
.tree ul > li:last-child::after{
  content:"";position:absolute;left:-21px;top:19px;bottom:0;width:1px;background:var(--paper);
}
.tnode{
  display:inline-block;font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;line-height:1.5;color:var(--ink);
}
.tree ul ul .tnode{color:var(--ink-mono)}

/* ---- rows: repeated one-to-one pairs ---- */
.fanlist{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
/* the pair stays on one line; the long half wraps inside its own box,
   so the arrow never ends up dangling at the end of a line */
.fanlist li{display:flex;align-items:center;flex-wrap:nowrap}
.fanlist .node{min-width:0}
.fanlist .arrow{display:inline-block;padding:0 13px}
.fanlist .arrow::before{content:"\2192"}

/* ---- merge: many things becoming one ---- */
.merge{margin:16px 0 0;display:grid;grid-template-columns:1fr;gap:0}
.merge-in{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.merge-in li{display:flex;align-items:center}
.merge-in .arrow{display:inline-block;padding:0 13px}
.merge-in .arrow::before{content:"\2192"}
.merge-join{
  position:relative;padding:9px 0 9px 21px;
  font-family:var(--f-mono);font-size:15px;line-height:1;color:var(--accent);
}
.merge-join::before{content:"\2193"}
.merge-out{display:flex;flex-direction:column;align-items:flex-start}
/* narrow: the join already draws the arrow into the cart */
.merge-out .arrow:first-child{display:none}
@media (min-width:820px){
  .merge{grid-template-columns:auto 64px minmax(0,1fr);align-items:center}
  .merge-in li{justify-content:flex-end}
  .merge-in li::after{content:"";width:18px;height:1px;background:var(--line)}
  .merge-join{align-self:stretch;padding:0;font-size:0}
  .merge-join::before{content:"";position:absolute;left:0;top:19px;bottom:19px;width:1px;background:var(--line)}
  .merge-join::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line)}
  .merge-out{flex-direction:row;align-items:center}
  .merge-out .arrow:first-child{display:inline-block;padding-left:0}
}

/* ---- sum: parts adding up to a state ---- */
.sum{list-style:none;margin:16px 0 0;padding:0}
.sum li{display:block}
.sum li + li::before{
  content:"+";display:block;font-family:var(--f-mono);font-size:15px;line-height:1;
  color:var(--ink-mono);padding:9px 0 9px 21px;
}
.sum-out::before{
  content:"\2193";display:block;font-family:var(--f-mono);font-size:15px;line-height:1;
  color:var(--accent);padding:10px 0 10px 21px;
}

/* ---- equation: parts adding up on one line ---- */
.eq{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;row-gap:10px}
.eq li{display:flex;align-items:center}
.eq li[data-op]::before{
  content:attr(data-op);font-family:var(--f-mono);font-size:15px;line-height:1;
  color:var(--ink-mono);padding:0 13px;
}

/* ---- grid figure: a table read in two directions ---- */
.gridfig{margin:16px 0 0;max-width:var(--wide)}
.gridwrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  /* the two radial gradients scroll with the content, so a shadow appears
     only on the side that still has table left to read */
  background:
    linear-gradient(to right, var(--paper) 40%, transparent) left/22px 100% no-repeat local,
    linear-gradient(to left, var(--paper) 40%, transparent) right/22px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(52,45,36,.16), transparent) left/12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(52,45,36,.16), transparent) right/12px 100% no-repeat scroll;
}
.gridtab{
  border-collapse:collapse;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
}
.gridtab th,.gridtab td{border:1px solid var(--line);padding:11px 18px;white-space:nowrap}
.gridtab thead th{color:var(--ink);background:var(--paper-warm);text-align:center}
.gridtab tbody th{color:var(--ink);background:var(--paper-warm);text-align:left;font-weight:400}
.gridtab td{color:var(--ink-mono);text-align:center}
.gridtab thead th:first-child{border:0;background:transparent}
.gridread{
  display:flex;gap:12px;align-items:baseline;margin:12px 0 0;max-width:none;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-mono);
}
.gridread:first-of-type{margin-top:16px}
.gridread b{color:var(--accent);font-weight:400;font-size:14px}
@media (max-width:560px){
  .gridtab{font-size:10px;letter-spacing:.08em}
  .gridtab th,.gridtab td{padding:8px}
}

/* ---- tags: a scope stated as a row ---- */
.tags{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tags li{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);border:1px solid var(--line);border-radius:999px;padding:7px 14px;
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
  html{scroll-behavior:auto}
}