/* ── article chrome sits under the site header (76px) ── */
#pbar{position:fixed;top:0;left:0;height:2px;background:var(--gold);z-index:60;width:0}

/* ── cover ── */
.bcover-wrap{background:var(--ink);padding:0 24px 0}
@media(min-width:1024px){.bcover-wrap{padding:0 40px}}
.bcover{max-width:1180px;margin:0 auto;transform:translateY(56px);position:relative;z-index:2}
.bcover img{width:100%;height:auto;display:block;border-radius:16px;aspect-ratio:16/9;
  object-fit:cover;box-shadow:0 30px 70px -40px rgba(10,10,10,.7)}
.bbody{padding-top:112px!important}

/* ── inline figure ── */
.bfig{margin:36px 0 44px;max-width:none}
.bfig img{width:100%;height:auto;display:block;border-radius:12px;border:1px solid var(--line)}
.bfig figcaption{margin-top:14px;font-size:13.5px;line-height:1.6;color:var(--mute-2);
  padding-left:16px;border-left:2px solid var(--gold);max-width:56ch}

/* ── index thumbnails ── */
.bidx-thumb{margin:0;border-radius:12px;overflow:hidden;border:1px solid var(--line);
  background:var(--ink);aspect-ratio:16/9}
.bidx-thumb img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--ease)}
.bidx-row:hover .bidx-thumb img{transform:scale(1.04)}

/* contents rail active state */
.btoc a.on{color:var(--ink);border-left-color:var(--gold)!important;font-weight:500}

/* ══════════════════════════════════════════════════════════════
   Dcycle · GUIDES
   Editorial, long-form, quiet. Reading is the job: one column,
   generous measure, a sticky contents rail, ink hero, gold accents.
   Standalone — shares tokens with the rest of the site, no imports.
   ══════════════════════════════════════════════════════════════ */

:root{
  --ink:#0A0A0A; --ink-2:#141414;
  --paper:#FFFFFF; --bone:#F7F6F2; --smoke:#F1F0EB;
  --line:#E4E2DA; --line-2:#D6D3C8;
  --mute:#6E6B62; --mute-2:#8C8880;
  --gold:#EFC63F; --goldhi:#F6D65E; --golddeep:#B8871F;
  --wrap:1180px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
::selection{background:var(--gold);color:var(--ink)}
html{-webkit-text-size-adjust:100%}
body{font-family:Inter,system-ui,-apple-system,sans-serif;background:var(--paper);
  color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
@media(min-width:1024px){.wrap{padding:0 40px}}
.serif-i{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute-2)}

/* ── hero ── */
.bhero{background:var(--ink);color:#fff;padding:118px 0 60px;position:relative;overflow:hidden}
.bhero::after{content:'';position:absolute;top:-180px;right:-160px;width:540px;height:540px;
  background:radial-gradient(circle,rgba(239,198,63,.12),transparent 68%);pointer-events:none}
.bhero .wrap{position:relative;z-index:1;max-width:900px}
.bhero-idx{padding-bottom:66px}
.crumb{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;
  color:rgba(255,255,255,.38);margin-bottom:30px}
.crumb a{color:rgba(255,255,255,.6);transition:color .2s}
.crumb a:hover{color:var(--gold)}
.crumb span{margin:0 8px;opacity:.4}
.bkick{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.bh1{font-family:Archivo,sans-serif;font-weight:800;letter-spacing:-.042em;line-height:1.06;
  font-size:clamp(2rem,4.4vw,3.3rem);text-wrap:balance;color:#fff;max-width:20ch}
.blede{margin-top:22px;font-size:clamp(15.5px,1.6vw,17.5px);line-height:1.72;
  color:rgba(255,255,255,.7);max-width:58ch}
.bmeta{margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
  font-family:'JetBrains Mono',monospace;font-size:11.5px;color:rgba(255,255,255,.45)}

/* ── article body ── */
.bbody{padding:64px 0 20px}
@media(min-width:900px){.bbody{padding:82px 0 30px}}
.bcols{display:block}
@media(min-width:1000px){
  .bcols{display:grid;grid-template-columns:210px minmax(0,1fr);gap:70px;align-items:start}
}
.btoc{display:none}
@media(min-width:1000px){
  .btoc{display:block;position:sticky;top:104px}
  .btoc-h{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--mute-2);margin-bottom:16px}
  .btoc ol{list-style:none;counter-reset:t;border-left:1px solid var(--line)}
  .btoc li{counter-increment:t}
  .btoc a{display:block;padding:9px 0 9px 18px;margin-left:-1px;border-left:1px solid transparent;
    font-size:12.5px;line-height:1.5;color:var(--mute);transition:color .25s,border-color .25s}
  .btoc a:hover{color:var(--ink);border-left-color:var(--gold)}
  .btoc-cta{margin-top:26px;font-family:Archivo,sans-serif;font-weight:700;font-size:12.5px}
  .btoc-cta a{border-bottom:1px solid var(--gold);padding-bottom:2px}
}
.bsec{margin-bottom:52px;max-width:68ch}
.bsec h2{font-family:Archivo,sans-serif;font-weight:800;letter-spacing:-.032em;line-height:1.18;
  font-size:clamp(1.35rem,2.4vw,1.75rem);margin-bottom:20px;text-wrap:balance;scroll-margin-top:100px}
.bsec p{font-size:16px;line-height:1.82;color:#2C2A26;margin-bottom:18px}
.bsec p b{font-weight:600;color:var(--ink)}
.bsec ul{list-style:none;margin:6px 0 20px}
.bsec li{position:relative;padding:12px 0 12px 26px;border-bottom:1px solid var(--line);
  font-size:15.5px;line-height:1.72;color:#2C2A26}
.bsec li::before{content:'';position:absolute;left:2px;top:21px;width:7px;height:7px;
  background:var(--gold);transform:rotate(45deg)}
.bsec li b{font-weight:600;color:var(--ink)}
.bpull{margin:30px 0;padding:26px 0 26px 26px;border-left:3px solid var(--gold);
  font-family:'Instrument Serif',serif;font-size:clamp(19px,2.2vw,24px);line-height:1.42;
  color:var(--ink);max-width:52ch}

/* ── keep reading ── */
.brels{background:var(--bone);padding:60px 0;border-top:1px solid var(--line)}
.brels .eyebrow{display:block;margin-bottom:24px;color:var(--golddeep)}
.brel-grid{display:grid;gap:16px}
@media(min-width:760px){.brel-grid{grid-template-columns:repeat(2,1fr);gap:20px}}
.brel{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
  border-radius:12px;padding:24px 22px 26px;transition:border-color .3s,transform .3s var(--ease)}
.brel:hover{border-color:var(--line-2);transform:translateY(-3px)}
.brel-k{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--golddeep)}
.brel h3{font-family:Archivo,sans-serif;font-weight:700;font-size:17px;letter-spacing:-.026em;
  line-height:1.32;margin:11px 0 0;flex:1;text-wrap:balance}
.brel-go{display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-family:Archivo,sans-serif;font-weight:700;font-size:12.5px}
.brel-go svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.brel:hover .brel-go svg{transform:translateX(4px)}

/* ── index listing ── */
.bidx{padding:66px 0 74px}
.bidx-list{border-top:1px solid var(--line)}
.bidx-row{display:grid;grid-template-columns:1fr;gap:20px;padding:30px 0;
  border-bottom:1px solid var(--line)}
@media(min-width:820px){
  .bidx-row{grid-template-columns:330px minmax(0,1fr);gap:40px;align-items:center;padding:38px 0}
}
@media(min-width:1100px){.bidx-row{grid-template-columns:400px minmax(0,1fr);gap:52px}}
.bidx-n{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--golddeep);padding-top:5px}
.bidx-k{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute-2)}
.bidx-row h2{font-family:Archivo,sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1.22;
  font-size:clamp(1.2rem,2.2vw,1.6rem);margin:10px 0 10px;text-wrap:balance}
.bidx-row p{font-size:14.5px;line-height:1.72;color:var(--mute);max-width:64ch}
.bidx-go{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.06em;color:var(--mute-2);padding-top:5px}
@media(min-width:820px){.bidx-go{justify-content:flex-end}}
.bidx-go svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.bidx-row:hover .bidx-go{color:var(--ink)}
.bidx-go{margin-top:18px}
.bidx-row:hover .bidx-go svg{transform:translateX(4px)}
.bidx-note{margin-top:34px;font-size:13.5px;color:var(--mute-2)}

/* ── reveal + a11y ── */
.rv{opacity:0;transform:translateY(18px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in,html.reveal-all .rv{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  *{animation:none!important;transition:none!important}
}
@media(hover:none){.brel:hover{transform:none}.bidx-row:hover{padding-left:0}}
a:focus-visible,button:focus-visible{outline:2px solid var(--golddeep);outline-offset:3px;border-radius:3px}