/* ═══════════════════════════════════════════════════════════════
   abdal.in — the UPSC years
   Same black / white / yellow language as the rest of the site.
   ═══════════════════════════════════════════════════════════════ */

:root{--stick:var(--bar)}
@media (max-width:980px){:root{--stick:calc(var(--bar) + 72px)}}

/* ── Masthead ───────────────────────────────────────────────── */
.um{
  background:var(--black);color:var(--white);
  padding:clamp(3.5rem,8vw,7rem) var(--pad) clamp(3rem,6vw,5rem);
}
.um__kicker{
  display:flex;align-items:center;gap:.85rem;
  font-family:var(--f-display);
  font-size:.74rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--yellow);margin-bottom:1.6rem;
}
.um__kicker::before{content:'';width:30px;height:3px;background:var(--yellow);flex:none}
.um__title{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(2.3rem,6.5vw,5rem);line-height:1.02;
  letter-spacing:.01em;text-transform:uppercase;
  max-width:18ch;margin-bottom:1.6rem;
}
.um__title em{font-style:normal;color:var(--yellow)}
.um__lede{
  font-size:clamp(1.05rem,1.7vw,1.3rem);
  line-height:1.7;color:#B4B4B4;max-width:56ch;
}

.um__stats{
  /* A grid, not flex-wrap: five stats with labels of very different lengths
     would otherwise sit at ragged widths. Fixed column counts (3 on desktop,
     2 on mobile) keep the rows even — 3+2 reads better than a cramped row of
     five with these longer labels. max-width stops it stretching thin on wide
     screens. */
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:2rem 2.2rem;align-items:start;max-width:820px;
  margin-top:3rem;padding-top:2rem;border-top:1px solid #1E1E1E;
}
@media (min-width:640px){
  .um__stats{grid-template-columns:repeat(3,1fr)}
}
.um__stat b{
  display:block;font-family:var(--f-display);
  font-size:clamp(1.7rem,2.4vw,2.2rem);font-weight:500;line-height:1.08;color:var(--white);
  /* No nowrap: a long value like "10 Departments" wraps rather than clip on a
     narrow column. Values that must stay whole (₹100 Cr+, 0 → 1) hold their
     shape with non-breaking spaces in the markup instead. */
}
.um__stat span{
  display:block;margin-top:.5rem;max-width:20ch;
  font-family:var(--f-display);font-size:.7rem;line-height:1.45;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grey);
}

/* ── A little face that watches your cursor (Books & Quotes) ──── */
.um--face{display:flex;align-items:center;gap:clamp(2rem,5vw,5rem);flex-wrap:wrap}
.um--face .um__wrap{flex:1 1 340px;min-width:0}
.face{flex:0 0 auto;width:clamp(150px,22vw,240px);margin-inline:auto}
.face svg{width:100%;height:auto;display:block;overflow:visible}
.face__head{fill:var(--yellow)}
.face__white{fill:#fff;stroke:rgba(0,0,0,.85);stroke-width:2}
.face__pupil{fill:var(--black);transition:transform .12s var(--ease)}
.face__mouth{fill:none;stroke:var(--black);stroke-width:5;stroke-linecap:round}
/* blink: squash each eye to a line for a beat */
.face__eye{transform-box:fill-box;transform-origin:center;transition:transform .18s var(--ease)}
.face.is-blinking .face__eye{transform:scaleY(.08)}
@media (prefers-reduced-motion:reduce){
  .face__pupil,.face__eye{transition:none}
  .face.is-blinking .face__eye{transform:none}
}
@media (max-width:640px){.face{width:clamp(150px,44vw,210px)}}

/* ── Quotes & Books: a numbered reading list ─────────────────── */
.qlist{max-width:840px;margin:0 auto;list-style:none}
.qlist li{display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,3vw,2.4rem);
  padding:clamp(1.6rem,3.6vw,2.8rem) 0;border-top:1px solid #1E1E1E;align-items:start}
.qlist li:first-child{border-top:0}
.qlist__n{font-family:var(--f-display);font-weight:600;color:var(--yellow);
  font-size:.95rem;letter-spacing:.08em;padding-top:.45rem}
.qlist__q{font-family:var(--f-display);font-weight:500;color:var(--white);
  font-size:clamp(1.4rem,3.2vw,2.35rem);line-height:1.16;letter-spacing:.005em;text-wrap:balance}
.qlist__q .l2{display:block;color:var(--yellow)}
.qlist__by{display:block;margin-top:.7rem;font-family:var(--f-display);font-size:.72rem;
  font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--grey)}

/* ── Books: the shelf (spines → pull one to spin out its cover) ── */
.bfilter{display:flex;flex-wrap:wrap;gap:.55rem;margin:0 0 clamp(2rem,4vw,3rem)}
.bfilter__btn{font-family:var(--f-display);font-size:.72rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grey);background:none;border:1px solid #2C2C2C;
  border-radius:100px;padding:.5rem 1.05rem;cursor:pointer;transition:color .25s,border-color .25s,background .25s}
.bfilter__btn:hover{color:#fff;border-color:#4A4A4A}
.bfilter__btn.is-on{background:var(--yellow);border-color:var(--yellow);color:var(--black)}

.shelf{list-style:none;display:flex;flex-wrap:wrap;align-items:flex-end;gap:.7rem;
  min-height:250px;padding:0 .4rem 1.1rem;border-bottom:4px solid #26261F;perspective:1500px}
.book{margin:0}
.book__spine{
  width:56px;height:var(--h,232px);padding:1.1rem .5rem;border:0;cursor:pointer;
  background:linear-gradient(90deg,rgba(0,0,0,.28),transparent 22% 78%,rgba(0,0,0,.35)),var(--c,#333);
  color:#fff;border-radius:3px 3px 0 0;box-shadow:2px 5px 14px rgba(0,0,0,.5);
  display:grid;place-items:center;writing-mode:vertical-rl;text-orientation:mixed;
  font-family:var(--f-display);font-weight:600;font-size:.82rem;letter-spacing:.05em;
  line-height:1.25;text-transform:uppercase;text-align:center;
  transition:transform .32s var(--ease),box-shadow .32s var(--ease)}
.book__spine:hover{transform:translateY(-18px);box-shadow:4px 10px 22px rgba(0,0,0,.6)}
.book.is-open .book__spine{transform:translateY(-18px);outline:2px solid var(--yellow);outline-offset:3px}
.shelf__hint{margin-top:1rem;font-family:var(--f-display);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey)}
.js .shelf__hint{display:block}

/* the pulled-out book */
.bdetail{margin-top:clamp(2rem,5vw,3.4rem);display:none;
  grid-template-columns:auto 1fr;gap:clamp(1.5rem,4vw,3.2rem);align-items:start;perspective:1400px}
.bdetail.is-open{display:grid}
.bdetail__cover{width:clamp(150px,20vw,208px);flex:none}
.bdetail__cover img{width:100%;height:auto;border-radius:2px;
  box-shadow:0 22px 46px rgba(0,0,0,.55);transform-origin:left center}
.bdetail.is-open .bdetail__cover img{animation:bookspin .75s var(--ease) both}
@keyframes bookspin{from{transform:rotateY(-86deg)}to{transform:rotateY(0)}}
.bdetail__title{font-family:var(--f-display);font-weight:600;text-transform:uppercase;
  font-size:clamp(1.7rem,3.6vw,2.6rem);line-height:1.04;letter-spacing:.01em}
.bdetail__author{margin-top:.6rem;font-family:var(--f-display);font-size:.8rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.bdetail__cat{display:inline-block;margin-top:1rem;font-family:var(--f-display);font-size:.64rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--yellow);border:1px solid #333;
  border-radius:100px;padding:.3rem .7rem}
.bdetail__stars{margin-top:1.1rem;color:var(--yellow);font-size:1.35rem;letter-spacing:.12em}
.bdetail__stars .off{color:#3A3A3A}
.bdetail__note{margin-top:1.2rem;max-width:54ch;line-height:1.75;color:#CFCFCF;font-size:1.02rem}
.bdetail__close{margin-top:1.6rem;display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--f-display);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey);background:none;border:0;cursor:pointer}
.bdetail__close:hover{color:var(--yellow)}
@media (prefers-reduced-motion:reduce){
  .bdetail.is-open .bdetail__cover img{animation:none}
  .book__spine,.book__spine:hover{transition:none}
}
@media (max-width:640px){
  .bdetail{grid-template-columns:1fr;justify-items:start}
  .book__spine{width:50px;font-size:.76rem}
}

/* ── Sections ───────────────────────────────────────────────── */
.us{padding:clamp(3.5rem,7vw,6rem) var(--pad);border-bottom:1px solid #ECECE8}
.us--dark{background:var(--black);color:var(--white);border-bottom-color:#1C1C1C}
.us--tint{background:var(--off)}
.us__in{max-width:960px;margin-inline:auto}

.us__num{
  font-family:var(--f-display);font-size:.72rem;
  letter-spacing:.24em;color:var(--grey);margin-bottom:.9rem;
}
.us--dark .us__num{color:var(--yellow)}
.us__head{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.8rem,4.2vw,3rem);line-height:1.08;
  letter-spacing:.01em;text-transform:uppercase;margin-bottom:1.2rem;
}
.us__body{max-width:62ch}
.us__body p{
  font-size:clamp(1rem,1.3vw,1.1rem);line-height:1.8;color:var(--grey-dark);
}
.us--dark .us__body p{color:#B4B4B4}
.us__body p + p{margin-top:1.2rem}
.us__body strong{color:var(--black);font-weight:600}
.us--dark .us__body strong{color:var(--white)}

/* ── Pull quote ─────────────────────────────────────────────── */
.pull{
  margin:2.6rem 0 0;padding-left:1.6rem;
  border-left:3px solid var(--yellow);
}
.pull p{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.2rem,2.4vw,1.75rem);line-height:1.35;
  letter-spacing:.01em;text-transform:uppercase;color:var(--black)!important;
}
.us--dark .pull p{color:var(--white)!important}

/* ── Subject grid ───────────────────────────────────────────── */
.subs{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
  gap:1px;background:#E4E4E0;border:1px solid #E4E4E0;margin-top:2.4rem;
}
.us--dark .subs{background:#1E1E1E;border-color:#1E1E1E}
.sub{
  background:var(--white);padding:1.35rem 1.4rem;
  transition:background .25s var(--ease);
}
.us--tint .sub{background:var(--off)}
.us--dark .sub{background:var(--black)}
.sub:hover{background:var(--yellow)}
.us--dark .sub:hover{background:#141414}
.sub__n{
  font-family:var(--f-display);font-size:.66rem;
  letter-spacing:.16em;color:var(--grey);
}
.sub__name{
  display:block;margin-top:.4rem;
  font-family:var(--f-display);font-weight:500;
  font-size:1.02rem;letter-spacing:.02em;text-transform:uppercase;
}
.us--dark .sub__name{color:var(--white)}
.sub__note{
  display:block;margin-top:.3rem;
  font-size:.82rem;color:var(--grey);line-height:1.5;
}

/* ── Quote strip ────────────────────────────────────────────── */
.mantras{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:1rem;margin-top:2.4rem;
}
.mantra{
  padding:1.5rem 1.6rem;background:var(--white);
  border-left:3px solid #E4E4E0;
  font-size:1rem;line-height:1.6;color:var(--grey-dark);
  transition:border-color .25s var(--ease);
}
.us--tint .mantra{background:var(--white)}
.mantra:hover{border-left-color:var(--yellow)}

/* ── Method / prompt cards ──────────────────────────────────── */
.method{display:grid;gap:1rem;margin-top:2.4rem}
.mcard{
  background:var(--white);border:1px solid #E4E4E0;
  padding:1.6rem 1.7rem;
}
.us--dark .mcard{background:#111;border-color:#1E1E1E}
.mcard h3{
  font-family:var(--f-display);font-weight:500;
  font-size:1.05rem;letter-spacing:.02em;text-transform:uppercase;
  margin-bottom:.6rem;
}
.us--dark .mcard h3{color:var(--white)}
.mcard p{font-size:.96rem;line-height:1.7;color:var(--grey-dark)}
.us--dark .mcard p{color:var(--grey)}

/* ── CTA ────────────────────────────────────────────────────── */
.ucta{
  display:inline-flex;align-items:center;gap:.7rem;margin-top:2rem;
  font-family:var(--f-display);
  font-size:.8rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  padding:1rem 2rem;background:var(--black);color:var(--white);
  transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
}
.us--dark .ucta{background:var(--yellow);color:var(--black)}
.ucta:hover{background:var(--yellow);color:var(--black);transform:translateY(-2px)}
.us--dark .ucta:hover{background:var(--white)}
.ucta svg{width:15px;height:15px}

/* ── Notes: breadcrumb ──────────────────────────────────────── */
.ncrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  font-family:var(--f-display);
  font-size:.72rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);margin-bottom:1.6rem;
}
.ncrumb a{color:var(--grey);border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.ncrumb a:hover{color:var(--black);border-bottom-color:var(--yellow)}
.ncrumb b{color:var(--black);font-weight:500}
.ncrumb span{opacity:.4}

/* ── Subject index ──────────────────────────────────────────── */
.ns{padding:clamp(2.5rem,5vw,4rem) var(--pad) clamp(3rem,6vw,5rem);max-width:900px;margin-inline:auto}
.ns__title{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(2rem,5vw,3.4rem);line-height:1.05;
  letter-spacing:.01em;text-transform:uppercase;
}
.ns__count{
  font-family:var(--f-display);font-size:.74rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--grey);
  margin-top:.7rem;
}
.ns__band{
  font-family:var(--f-display);font-size:.74rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--black);
  margin:2.6rem 0 .8rem;display:flex;align-items:center;gap:.9rem;
}
.ns__band::after{content:'';flex:1;height:1px;background:#E4E4E0}

/* the global reset only clears <ul>, and these lists are <ol> — without this
   the native markers double up with .nrow__n */
.nrows{margin-top:1.6rem;border-top:1px solid #ECECE8;list-style:none;padding-left:0}
.nrows li{border-bottom:1px solid #ECECE8}
.nrows a{
  display:grid;grid-template-columns:2.4rem minmax(0,1fr) auto;
  align-items:center;gap:1rem;padding:1.05rem .5rem;
  transition:background .22s var(--ease),padding-left .3s var(--ease);
}
.nrows a:hover{background:var(--off);padding-left:1.1rem}
.nrow__n{font-family:var(--f-display);font-size:.74rem;color:var(--grey)}
.nrow__t{font-size:1.02rem;line-height:1.5}
.nrows svg{width:17px;height:17px;color:var(--grey);transition:color .2s,transform .3s var(--ease)}
.nrows a:hover svg{color:var(--black);transform:translateX(4px)}
.nrows a:hover .nrow__n{color:var(--black)}

/* ── Library index ──────────────────────────────────────────── */
.nsearch{
  display:flex;align-items:center;position:relative;
  margin:2rem 0 .5rem;max-width:420px;
}
.nsearch input{
  font:inherit;font-size:.95rem;width:100%;
  padding:.8rem 2.6rem .8rem 1rem;
  border:1px solid #DCDCD8;background:var(--white);color:var(--black);
}
.nsearch input:focus{outline:2px solid var(--yellow);outline-offset:1px;border-color:var(--black)}
.nsearch svg{position:absolute;right:1rem;width:16px;height:16px;color:var(--grey);pointer-events:none}

.libs{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:1px;background:#E4E4E0;border:1px solid #E4E4E0;margin-top:1.8rem;
}
.lib{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:1rem;
  padding:1.4rem 1.4rem;background:var(--white);
  transition:background .22s var(--ease);
}
.lib:hover{background:var(--off)}
.lib__n{
  font-family:var(--f-display);font-weight:500;font-size:1.5rem;
  line-height:1;color:var(--yellow);min-width:2.2rem;
}
.lib__name{
  font-family:var(--f-display);font-weight:500;
  font-size:1rem;letter-spacing:.02em;text-transform:uppercase;line-height:1.3;
}
.lib__go svg{width:17px;height:17px;color:var(--grey);transition:transform .3s var(--ease),color .2s}
.lib:hover .lib__go svg{color:var(--black);transform:translateX(4px)}

.nrows--all a{grid-template-columns:minmax(0,1fr) auto auto}
.nrow__s{
  font-family:var(--f-display);font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grey);
  white-space:nowrap;
}
.nempty{
  padding:3rem 0;text-align:center;
  font-family:var(--f-display);font-size:.85rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grey);
}

/* ── Note page ──────────────────────────────────────────────── */
.note{padding:clamp(2.5rem,5vw,4rem) var(--pad) clamp(3rem,6vw,5rem);max-width:820px;margin-inline:auto}
.note__title{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.8rem,4.4vw,3rem);line-height:1.08;
  letter-spacing:.01em;text-transform:uppercase;
}
.note__sec{
  font-family:var(--f-display);font-size:.74rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--grey);margin-top:.7rem;
}

.ncontent{margin-top:2.2rem;font-size:1rem;line-height:1.75;color:var(--grey-dark)}
.ncontent h3,.ncontent h4,.ncontent h5,.ncontent h6{
  font-family:var(--f-display);font-weight:500;
  letter-spacing:.02em;text-transform:uppercase;color:var(--black);
  margin:2.2rem 0 .8rem;line-height:1.2;
}
.ncontent h3{font-size:1.3rem}
.ncontent h4{font-size:1.1rem}
.ncontent h5,.ncontent h6{font-size:.95rem}
.ncontent p{margin:.9rem 0}
.ncontent strong{color:var(--black);font-weight:600}
.ncontent code{
  font-family:ui-monospace,SFMono-Regular,monospace;font-size:.9em;
  background:var(--off);padding:.12em .4em;border:1px solid #E4E4E0;
}
.ncontent a{color:var(--black);border-bottom:1px solid var(--yellow)}
.ncontent hr{border:0;border-top:1px solid #E4E4E0;margin:2rem 0}

.ncontent ul,.ncontent ol{margin:.6rem 0 .6rem 0;padding-left:1.35rem}
.ncontent ul{list-style:disc}
.ncontent ol{list-style:decimal}
.ncontent li{margin:.35rem 0}
.ncontent li::marker{color:var(--grey)}
/* top-level bullets get a little more air than nested ones */
.ncontent > ul > li,.ncontent > ol > li{margin:.7rem 0}
.ncontent ul ul,.ncontent ol ol,.ncontent ul ol,.ncontent ol ul{margin:.3rem 0}

.ncall{
  background:var(--off);border-left:3px solid var(--yellow);
  padding:1.1rem 1.3rem;margin:1.4rem 0;
}
.ncall p:first-child{margin-top:0}
.ncall p:last-child{margin-bottom:0}

.nfig{margin:1.5rem 0}
.nfig img{
  width:100%;height:auto;display:block;
  border:1px solid #E4E4E0;background:var(--off);
}

.ntable{overflow-x:auto;margin:1.5rem 0;border:1px solid #E4E4E0}
.ntable table{border-collapse:collapse;width:100%;font-size:.93rem}
.ntable th,.ntable td{border:1px solid #E4E4E0;padding:.6rem .8rem;text-align:left;vertical-align:top}
.ntable th{
  background:var(--off);font-family:var(--f-display);font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;font-size:.76rem;color:var(--black);
}

/* ── Prev / next ────────────────────────────────────────────── */
.npager{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1px;background:#E4E4E0;border:1px solid #E4E4E0;margin-top:3rem;
}
.npager a{
  display:block;padding:1.2rem 1.3rem;background:var(--white);
  font-size:.98rem;line-height:1.45;
  transition:background .22s var(--ease);
}
.npager a:hover{background:var(--off)}
.npager span{
  display:block;font-family:var(--f-display);
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--grey);margin-bottom:.35rem;
}
.npager__next{text-align:right}

/* ── Back link ──────────────────────────────────────────────── */
.uback{padding:1.6rem var(--pad)}
.uback a{
  font-family:var(--f-display);
  font-size:.76rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.6rem;
  border-bottom:2px solid var(--yellow);padding-bottom:.2rem;
}
.uback svg{width:15px;height:15px}

@media (max-width:620px){
  .um__stats{gap:1.6rem}
  .subs{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}

/* ── The Studio: Instagram reels ────────────────────────────── */
/* Instagram's embed is a fixed header (51px) and footer (155px) around a
   media well that scales with the width — so its height is affine, not
   proportional, and no aspect-ratio can express it. Percentage padding IS
   resolved against the width, so this reproduces 1.247*W + 206 exactly:
   the box fits the content at any column width, with nothing clipped off
   the bottom and no dead white space under it. */
.reels{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.6rem);
  margin-top:2.4rem;
}
.reel{margin:0}
.reel__box{
  position:relative;height:0;
  padding-bottom:calc(124.7% + 206px);
  border:1px solid #E4E4E0;background:#fff;
}
.reel__box iframe{
  position:absolute;inset:0;
  width:100%;height:100%;border:0;display:block;
}
.reel figcaption{
  margin-top:.85rem;
  font-size:.86rem;line-height:1.55;color:var(--grey-dark);
}
.reel figcaption em{font-style:italic}

@media (max-width:900px){
  .reels{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reel:last-child{grid-column:1 / -1;max-width:calc(50% - .8rem)}
}
@media (max-width:600px){
  .reels{grid-template-columns:minmax(0,1fr);gap:2rem}
  .reel:last-child{grid-column:auto;max-width:none}
}

/* ── Beyond Work: the timeline ──────────────────────────────── */
.us__in--tl{max-width:1040px}
.tl{position:relative;margin-top:clamp(2rem,5vw,3rem);padding-bottom:.5rem}
/* A grey track with a yellow line that fills it as the page scrolls. */
.tl::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;
  background:#E4E4E0;transform:translateX(-50%)}
.tl__fill{position:absolute;left:50%;top:0;width:2px;height:100%;background:var(--yellow);
  transform:translateX(-50%) scaleY(0);transform-origin:50% 0;will-change:transform}
.tl__list{list-style:none;position:relative;margin:0;padding:0}

.tl__item{position:relative;width:50%;padding:0 3rem 2.6rem;box-sizing:border-box}
.tl__item:nth-child(odd){left:0;text-align:right}
.tl__item:nth-child(even){left:50%;text-align:left}
.tl__item::after{content:'';position:absolute;top:.5rem;width:14px;height:14px;border-radius:50%;
  background:var(--white);border:2px solid #D8D8D2;
  transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease)}
.tl__item:nth-child(odd)::after{right:-7px}
.tl__item:nth-child(even)::after{left:-7px}
.tl__item.in::after{background:var(--yellow);border-color:var(--yellow);transform:scale(1.15)}

.tl__yr{display:block;font-family:var(--f-display);font-weight:600;font-size:1.65rem;
  line-height:1;color:var(--black)}
.tl__place{display:block;margin-top:.4rem;font-family:var(--f-display);font-size:.66rem;
  font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--grey)}
.tl__title{font-family:var(--f-display);font-weight:500;font-size:1.1rem;letter-spacing:.01em;
  text-transform:uppercase;margin:.6rem 0 .4rem}
.tl__desc{display:inline-block;color:#5A5A5A;font-size:.94rem;line-height:1.65;max-width:44ch}
/* the school years, folded into one point and set deliberately quieter */
.tl__small{display:inline-block;color:#7A7A7A;font-size:.82rem;line-height:1.6;max-width:46ch}
.tl__badge{display:inline-block;margin-top:.75rem;text-align:left;
  font-family:var(--f-display);font-size:.63rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--black);
  background:var(--white);border:1px solid #E7E7E3;border-left:3px solid var(--yellow);
  padding:.4rem .75rem}

/* Optional media on a point — a pitch video or a document. */
.tl__media{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}
.tl__item:nth-child(odd) .tl__media{justify-content:flex-end}
.tl__play,.tl__doc,.tl__press{display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;
  font-family:var(--f-display);font-size:.66rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;padding:.5rem .9rem;color:var(--black);text-decoration:none;
  background:var(--off);border:1px solid #E7E7E3;border-left:3px solid var(--yellow);
  transition:background .2s var(--ease),color .2s var(--ease)}
.tl__play:hover,.tl__doc:hover,.tl__press:hover{background:var(--black);color:var(--white)}
.tl__play svg,.tl__doc svg,.tl__press svg{width:15px;height:15px;flex:none}

/* Reveal. JS adds .js, so with no JS nothing is ever hidden. */
.js .tl__item{opacity:0;transition:opacity .65s var(--ease),transform .65s var(--ease)}
.js .tl__item:nth-child(odd){transform:translateX(-26px)}
.js .tl__item:nth-child(even){transform:translateX(26px)}
.js .tl__item.in{opacity:1;transform:none}

@media (max-width:760px){
  /* Alternating cannot survive a phone's width: it becomes one left rail. */
  .tl::before,.tl__fill{left:7px}
  .tl__item{width:100%;left:0!important;text-align:left!important;padding:0 0 2.2rem 2.4rem}
  .tl__item::after{left:0!important;right:auto!important}
  .tl__item:nth-child(odd) .tl__media{justify-content:flex-start}
  .tl__desc,.tl__small{max-width:100%}
  .js .tl__item:nth-child(odd),.js .tl__item:nth-child(even){transform:translateY(16px)}
}
@media (prefers-reduced-motion:reduce){
  .js .tl__item{opacity:1!important;transform:none!important}
}

/* the final, current point: a solid node, and a primary door to the work */
.tl__item--now::after{background:var(--yellow);border-color:var(--yellow);transform:scale(1.15)}
.tl__doc--go{background:var(--black);color:var(--white);border-color:var(--black);border-left-color:var(--yellow)}
.tl__doc--go:hover{background:var(--yellow);color:var(--black);border-color:var(--yellow)}

/* "Read the essay" / press button in a section body (e.g. The Studio) */
.readpress{
  display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;margin-top:1.9rem;
  font-family:var(--f-display);font-size:.72rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;padding:.75rem 1.3rem;color:var(--black);
  background:var(--white);border:1px solid #E7E7E3;border-left:3px solid var(--yellow);
  transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.readpress:hover{background:var(--black);color:var(--white);transform:translateY(-2px)}
.readpress svg{width:15px;height:15px;flex:none}

/* ── Timeline: head row + sort toggle ───────────────────────── */
.tlhead{display:flex;align-items:flex-end;justify-content:space-between;gap:1.2rem;flex-wrap:wrap}
.tlsort{display:none;gap:.35rem}
.js .tlsort{display:inline-flex}
.tlsort__btn{
  font-family:var(--f-display);font-size:.68rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;padding:.5rem 1rem;color:var(--grey);
  border:1px solid #E4E4E0;border-radius:100px;background:var(--white);cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.tlsort__btn:hover{border-color:var(--black);color:var(--black)}
.tlsort__btn.is-on{background:var(--black);border-color:var(--black);color:var(--white)}
@media (max-width:560px){.tlsort{margin-top:1rem}}

/* ── Studio: categorised video grid ─────────────────────────── */
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.3rem;margin-top:2rem}
.vcard{display:block;width:100%;text-align:left;cursor:pointer;background:none;border:0;padding:0}
.vcard__media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--black)}
.vcard__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.18);
  transition:transform .6s var(--ease),filter .4s var(--ease)}
.vcard:hover .vcard__media img{transform:scale(1.05);filter:grayscale(0)}
.vplay{position:absolute;inset:0;display:grid;place-items:center}
.vplay i{width:54px;height:54px;border-radius:50%;background:rgba(11,11,11,.72);
  display:grid;place-items:center;transition:background .3s var(--ease),transform .3s var(--ease)}
.vcard:hover .vplay i{background:var(--yellow);transform:scale(1.08)}
.vplay svg{width:22px;height:22px;color:#fff;translate:2px 0;transition:color .3s var(--ease)}
.vcard:hover .vplay svg{color:var(--black)}
.vcard__t{display:block;margin-top:.75rem;font-family:var(--f-display);font-weight:500;
  font-size:.98rem;letter-spacing:.01em;color:var(--black)}
.vcard__sub{display:block;margin-top:.2rem;font-size:.82rem;color:var(--grey);line-height:1.5}
.us--dark .vcard__t{color:var(--white)}

/* ── Entrepreneurship: certification strip (on the black masthead) ── */
.um__certs{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;margin-top:1.9rem}
.um__certs__t{font-family:var(--f-display);font-size:.66rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--grey);margin-right:.2rem}
.um__cert{font-family:var(--f-display);font-size:.68rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:#EDEDED;
  padding:.42rem .85rem;background:#141414;border:1px solid #262626;border-left:2px solid var(--yellow)}

/* poetry → studio "hear it live" anchor clears the sticky bar */
#live{scroll-margin-top:calc(var(--stick) + 1.2rem)}

/* ── Timeline: a spanning "phase" band (e.g. the B.Tech years) ──
   Full width, centred over the spine, dashed to read as a stretch of
   time rather than a single point. It carries no node.
   Compound `.tl__item.tl__item--phase` so it outranks the alternating
   `.tl__item:nth-child()` rules that would otherwise pin it left/right. */
.tl__item.tl__item--phase{width:100%;left:0!important;text-align:center;padding:.4rem 0 2.6rem}
.tl__item.tl__item--phase::after{display:none}
.tl__phase{
  display:inline-block;max-width:min(90%,440px);
  padding:1rem 1.7rem;background:var(--off);
  border:1px dashed #C4C4BE;
}
.tl__phase__yr{display:block;font-family:var(--f-display);font-weight:600;
  font-size:1.15rem;letter-spacing:.06em;color:var(--black)}
.tl__phase__t{display:block;margin-top:.35rem;font-family:var(--f-display);
  font-size:.82rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-dark)}
.tl__phase__sub{display:block;margin-top:.4rem;font-size:.8rem;color:var(--grey);line-height:1.5}
/* reveal from below rather than the side (it isn't a left/right card);
   compound + .js beats `.js .tl__item:nth-child()` translateX (0,3,0). */
.js .tl__item.tl__item--phase{transform:translateY(16px)}
.js .tl__item.tl__item--phase.in{transform:none}
@media (max-width:760px){
  /* keep the left padding so the band clears the single-rail spine */
  .tl__item.tl__item--phase{padding:.4rem 0 2.2rem 2.4rem;text-align:left}
  .tl__phase{max-width:100%}
}

/* ── Studio: category filter (sticky) ───────────────────────── */
.sfilter{
  position:sticky;top:var(--stick);z-index:40;
  display:none;flex-wrap:wrap;gap:.4rem;align-items:center;
  padding:.85rem var(--pad);
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid #E4E4E0;
}
.js .sfilter{display:flex}
.sfilter__btn{
  font-family:var(--f-display);font-size:.68rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;padding:.5rem 1rem;color:var(--grey);
  border:1px solid #E4E4E0;border-radius:100px;background:var(--white);cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.sfilter__btn:hover{border-color:var(--black);color:var(--black)}
.sfilter__btn.is-on{background:var(--black);border-color:var(--black);color:var(--white)}

/* ═══════════════════════════════════════════════════════════════
   Writings — the index list + the gamified long-read
   ═══════════════════════════════════════════════════════════════ */

/* ── Index: theme filter + dated entries ────────────────────── */
.wfilter{display:flex;flex-wrap:wrap;gap:.55rem;margin:0 0 clamp(2rem,4vw,3rem)}
.wfilter[hidden]{display:none}   /* display:flex would otherwise beat [hidden] */
.wfilter__btn{font-family:var(--f-display);font-size:.72rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grey);background:none;border:1px solid #2C2C2C;
  border-radius:100px;padding:.5rem 1.05rem;cursor:pointer;
  transition:color .25s,border-color .25s,background .25s}
.wfilter__btn:hover{color:#fff;border-color:#4A4A4A}
.wfilter__btn.is-on{background:var(--yellow);border-color:var(--yellow);color:var(--black)}

.wlist{list-style:none;max-width:900px}
.wlist li{border-top:1px solid #1E1E1E}
.wlist li:first-child{border-top:0}
.wlist li[hidden]{display:none}
.wrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(1.4rem,3.5vw,3rem);
  align-items:start;padding:clamp(1.5rem,3.4vw,2.4rem) .2rem;
  transition:padding-left .3s var(--ease)}
.wrow:hover{padding-left:1rem}
.wend{display:flex;flex-direction:column;align-items:flex-end;gap:.9rem;padding-top:.45rem;text-align:right}
.wpub{font-family:var(--f-display);font-size:.85rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:#CFCFCF;white-space:nowrap}
.wrow:hover .wpub{color:#fff}
.wmain{min-width:0}
.wtitle{display:block;font-family:var(--f-display);font-weight:500;
  font-size:clamp(1.25rem,2.6vw,1.85rem);line-height:1.16;letter-spacing:.005em;
  color:#EDEDED;text-wrap:balance;transition:color .2s}
.wrow:hover .wtitle{color:var(--yellow)}
.wdek{display:block;margin-top:.6rem;max-width:56ch;font-size:.98rem;line-height:1.65;color:#9C9C9C}
.wmeta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .7rem;margin-top:1rem}
.wcat{font-family:var(--f-display);font-size:.6rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--yellow);border:1px solid #333;border-radius:100px;padding:.24rem .65rem}
.wtag,.wtime{font-family:var(--f-display);font-size:.66rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey)}
.wtag{color:#CFCFCF}
.wgo{align-self:flex-end;font-family:var(--f-display);font-size:1.4rem;color:var(--grey);
  transition:color .2s var(--ease),transform .3s var(--ease)}
.wrow:hover .wgo{color:var(--yellow);transform:translateX(5px)}
.wempty{font-family:var(--f-display);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grey);padding:2.4rem .2rem}
@media (max-width:600px){
  .wrow{grid-template-columns:1fr;gap:.5rem}
  .wend{flex-direction:row;align-items:baseline;gap:.6rem;order:-1;padding-top:0}
  .wpub{font-size:.76rem;color:var(--grey)}
  .wgo{display:none}
}

/* ── The reader: an immersive, dark long-read ───────────────── */
.reader{background:var(--black);color:#E6E6E6;padding-bottom:clamp(3.5rem,8vw,6rem)}

/* sticky progress head — only meaningful with JS, so hidden until gated */
.reader__hud{display:none}
.reader.is-gated .reader__hud{
  display:block;position:sticky;top:var(--stick);z-index:40;
  background:rgba(11,11,11,.85);backdrop-filter:blur(10px);border-bottom:1px solid #1C1C18}
.reader__hud__in{max-width:44rem;margin-inline:auto;padding:.7rem var(--pad);
  display:flex;align-items:center;gap:.9rem}
.reader__hud__home{font-family:var(--f-display);font-size:.68rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey);white-space:nowrap;transition:color .2s}
.reader__hud__home:hover{color:#fff}
.reader__track{flex:1;height:3px;min-width:50px;background:#26261F;border-radius:3px;overflow:hidden}
.reader__track__fill{display:block;width:9%;height:100%;background:var(--yellow);
  border-radius:3px;transition:width .55s var(--ease)}
.reader__hud__count{font-family:var(--f-display);font-size:.72rem;font-weight:500;letter-spacing:.12em;
  color:var(--grey);white-space:nowrap}
.reader__hud__count b{color:var(--yellow)}

/* hero */
.reader__hero{max-width:46rem;margin-inline:auto;
  padding:clamp(3rem,8vw,6rem) var(--pad) clamp(2rem,5vw,3rem)}
.reader__eyebrow{font-family:var(--f-display);font-size:.74rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--yellow);margin-bottom:1.4rem;
  display:flex;align-items:center;gap:.85rem}
.reader__eyebrow::before{content:'';width:30px;height:3px;background:var(--yellow);flex:none}
.reader__title{font-family:var(--f-display);font-weight:600;
  font-size:clamp(2.1rem,6vw,4rem);line-height:1.03;letter-spacing:.005em;text-transform:uppercase}
.reader__title em{display:block;font-style:normal;color:var(--yellow)}
.reader__dek{margin-top:1.5rem;font-size:clamp(1.05rem,1.7vw,1.28rem);line-height:1.7;
  color:#B4B4B4;max-width:52ch}
.reader__by{margin-top:1.6rem;font-family:var(--f-display);font-size:.72rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.reader__by__unlock{color:var(--yellow)}
.reader__begin{margin-top:2.6rem;font-family:var(--f-display);font-size:.7rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--grey)}
.reader__begin span{display:inline-block;margin-left:.3rem;animation:readerNudge 1.8s var(--ease) infinite}
@keyframes readerNudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* chapters */
.chapters{max-width:44rem;margin-inline:auto;padding:0 var(--pad)}
.ch{padding:clamp(1.6rem,4vw,2.6rem) 0;scroll-margin-top:calc(var(--stick) + 3.4rem)}
.ch + .ch{border-top:1px solid #17170F}
.ch__n{font-family:var(--f-display);font-weight:600;font-size:.8rem;letter-spacing:.2em;color:var(--yellow)}
.ch__h{font-family:var(--f-display);font-weight:600;text-transform:uppercase;
  font-size:clamp(1.55rem,3.6vw,2.3rem);line-height:1.1;letter-spacing:.01em;margin:.55rem 0 1.4rem}
.ch p{font-size:clamp(1.05rem,1.5vw,1.18rem);line-height:1.85;color:#C4C4C4;margin:0 0 1.15rem;max-width:40rem}
.ch p:last-of-type{margin-bottom:0}
.ch em{font-style:normal;color:var(--yellow)}
.ch strong{color:#fff;font-weight:600}
.ch b{color:#fff;font-weight:600}
.ch__big{font-family:var(--f-display);font-weight:500;font-size:clamp(1.4rem,2.9vw,2.05rem)!important;
  line-height:1.28!important;color:#fff!important;letter-spacing:.005em;
  margin:1.9rem 0!important;max-width:38rem!important;text-wrap:balance}
.ch__big em{color:var(--yellow)}
.ch__end{padding-left:1.4rem;border-left:3px solid var(--yellow)}

/* Drucker pull-quote */
.reader__pull{margin:2rem 0;padding:.2rem 0 .2rem 1.6rem;border-left:3px solid var(--yellow)}
.reader__pull p{font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.35rem,3vw,2.05rem)!important;line-height:1.3!important;color:#fff!important;
  letter-spacing:.005em;max-width:none!important;margin:0!important}
.reader__pull cite{display:block;margin-top:1rem;font-family:var(--f-display);font-style:normal;
  font-size:.72rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--yellow)}

/* the "four rules" list */
.rules{list-style:none;margin:1.9rem 0 .3rem;display:grid;gap:1px;
  background:#1A1A14;border:1px solid #1A1A14}
.rule{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.1rem;
  background:var(--black);padding:1.4rem 1.5rem}
.rule__n{font-family:var(--f-display);font-weight:600;font-size:1.15rem;letter-spacing:.05em;
  color:var(--yellow);line-height:1}
.rule__t{font-family:var(--f-display);font-weight:500;text-transform:uppercase;
  font-size:1.05rem;line-height:1.25;letter-spacing:.02em;color:#fff;margin-bottom:.55rem}
.rule__d{font-size:.98rem;line-height:1.7;color:#AEAEAE;margin:0}

/* revenue chart */
.rev{margin:2.4rem 0 .3rem}
.rev__plot{display:flex;align-items:flex-end;gap:clamp(.5rem,2.4vw,1.6rem);
  height:210px;padding-top:1.7rem;border-bottom:2px solid #26261F}
.rev__col{position:relative;flex:1;height:var(--h);border-radius:4px 4px 0 0;
  background:linear-gradient(180deg,#3C3C31,#191913)}
.rev__col--now{background:linear-gradient(180deg,var(--yellow),#C9A91E)}
.rev__col b{position:absolute;bottom:100%;left:-.4rem;right:-.4rem;padding-bottom:.4rem;
  text-align:center;font-family:var(--f-display);font-weight:600;letter-spacing:.02em;
  font-size:clamp(.6rem,1.6vw,.82rem);color:#CFCFCF;white-space:nowrap}
.rev__col--now b{color:var(--yellow)}
.rev__axis{display:flex;gap:clamp(.5rem,2.4vw,1.6rem);margin-top:.6rem}
.rev__axis span{flex:1;text-align:center;font-family:var(--f-display);font-size:.6rem;
  font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
.rev__cap{margin-top:1rem;font-size:.86rem;line-height:1.55;color:var(--grey)!important;max-width:44ch}
/* Bars rest at full height — so the no-JS fallback always shows the real chart.
   When the reader is JS-gated they start collapsed and grow (a transition to the
   full resting height) once JS marks the chart in view. The target is full, so
   even a throttled/interrupted tab can only ever settle on complete bars. */
.reader.is-gated .rev__col{height:0;transition:height 1s var(--ease)}
.reader.is-gated .rev--in .rev__col{height:var(--h)}

/* continue button + the gate */
.ch__foot{margin-top:1.9rem}
.ch__go{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--f-display);font-weight:500;
  font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;padding:.9rem 1.75rem;
  background:var(--yellow);color:var(--black);border-radius:2px;
  transition:transform .2s var(--ease),background .2s var(--ease)}
.ch__go:hover{transform:translateY(-2px);background:#fff}
.ch__go span{transition:transform .2s var(--ease)}
.ch__go:hover span{transform:translateX(4px)}
.ch__go--finish{background:none;color:var(--yellow);border:1px solid #3A3A2A}
.ch__go--finish:hover{background:var(--yellow);color:var(--black);border-color:var(--yellow)}
.ch--done .ch__foot{display:none}
/* no JS → every chapter is already shown, so the Continue prompts are noise */
.reader:not(.is-gated) .ch__foot{display:none}

/* progressive reveal: gate hidden chapters ONLY when JS marks the reader.
   Without JS (or if the script fails) nothing is gated — every chapter shows. */
.reader.is-gated .ch{display:none}
.reader.is-gated .ch.ch--on{display:block;animation:chIn .6s var(--ease) both}
@keyframes chIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* the "what's your take" note */
.ch--take{border-top:0!important}
.take{max-width:40rem;margin-top:1rem;padding:clamp(1.8rem,4vw,2.6rem);
  background:#111;border:1px solid #1E1E18;border-top:3px solid var(--yellow)}
.take__k{font-family:var(--f-display);font-size:.72rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--yellow);margin-bottom:.8rem}
.take__h{font-family:var(--f-display);font-weight:600;text-transform:uppercase;
  font-size:clamp(1.7rem,4vw,2.6rem);line-height:1.05;letter-spacing:.01em}
.take__p{margin-top:1rem;font-size:1.02rem;line-height:1.7;color:#B4B4B4;max-width:46ch}
.take__form{margin-top:1.8rem}
.take__f{display:block;margin-bottom:1.1rem}
.take__f > span{display:block;font-family:var(--f-display);font-size:.7rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin-bottom:.5rem}
.take__f > span i{font-style:normal;color:#5E5E5E;letter-spacing:.1em}
.take__f textarea,.take__f input{width:100%;font:inherit;font-size:1rem;color:#fff;
  background:#0B0B0B;border:1px solid #2A2A24;border-radius:2px;padding:.8rem .9rem;resize:vertical}
.take__f textarea:focus,.take__f input:focus{outline:2px solid var(--yellow);outline-offset:1px;border-color:var(--yellow)}
.take__f textarea::placeholder,.take__f input::placeholder{color:#5A5A5A}
.take__row{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.take__send{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--f-display);font-weight:500;
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;padding:.85rem 1.7rem;
  background:var(--yellow);color:var(--black);border-radius:2px;transition:transform .2s var(--ease),background .2s}
.take__send:hover{transform:translateY(-2px);background:#fff}
.take__send:disabled{opacity:.5;cursor:default;transform:none}
.take__status{font-size:.9rem;line-height:1.5;color:var(--grey)}
.take__status[data-state="ok"]{color:var(--yellow)}
.take__status[data-state="error"]{color:#E88}
.take__form.is-sent .take__f,.take__form.is-sent .take__send{display:none}
.take__more{margin-top:1.8rem}
.take__more a{font-family:var(--f-display);font-size:.74rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey);transition:color .2s}
.take__more a:hover{color:var(--yellow)}

@media (prefers-reduced-motion:reduce){
  .reader.is-gated .ch.ch--on{animation:none}
  .reader.is-gated .rev__col{transition:none}
  .reader__begin span{animation:none}
}

/* ── My Story: hero "jump to gallery" + collapsible gallery ──── */
.um__jump{margin-top:1.9rem}
.um__jump a{display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--f-display);font-size:.74rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--black);background:var(--yellow);padding:.8rem 1.4rem;
  transition:transform .2s var(--ease),background .2s var(--ease)}
.um__jump a:hover{transform:translateY(-2px);background:var(--white)}
.um__jump a span{transition:transform .2s var(--ease)}
.um__jump a:hover span{transform:translateY(3px)}

.galsec .us__in{padding:0}
.galwrap{border:1px solid #E4E4E0;background:var(--white);
  scroll-margin-top:calc(var(--stick) + 1rem)}
.galwrap__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:clamp(1.1rem,2.5vw,1.6rem) clamp(1.2rem,3vw,2rem);cursor:pointer;list-style:none;
  transition:background .2s var(--ease)}
.galwrap__bar::-webkit-details-marker{display:none}
.galwrap__bar:hover{background:var(--off)}
.galwrap__bar:focus-visible{outline:2px solid var(--yellow);outline-offset:-2px}
.galwrap__head{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.galwrap__head .us__num{margin:0}
.galwrap__title{font-family:var(--f-display);font-weight:600;text-transform:uppercase;
  font-size:clamp(1.3rem,3vw,2rem);line-height:1.04;letter-spacing:.01em;color:var(--black)}
.galwrap__toggle{display:inline-flex;align-items:center;gap:.9rem;white-space:nowrap}
.galwrap__cta{font-family:var(--f-display);font-size:.72rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--black);background:var(--off);
  border:1px solid #DCDCD8;border-left:3px solid var(--yellow);padding:.55rem .95rem;
  transition:background .2s var(--ease),color .2s var(--ease)}
.galwrap__bar:hover .galwrap__cta{background:var(--black);color:var(--white)}
.galwrap[open] .galwrap__cta--open{display:none}
.galwrap:not([open]) .galwrap__cta--close{display:none}
.galwrap__chev{width:20px;height:20px;color:var(--black);flex:none;transition:transform .3s var(--ease)}
.galwrap[open] .galwrap__chev{transform:rotate(180deg)}
.galwrap__in{padding:0 clamp(1.2rem,3vw,2rem) clamp(1.5rem,3vw,2.2rem)}
.galwrap__lede{max-width:60ch;margin-bottom:1.6rem;color:var(--grey-dark);line-height:1.7;
  font-size:clamp(1rem,1.3vw,1.1rem)}
.galwrap__in .gal{margin-top:0}
@media (prefers-reduced-motion:reduce){
  .galwrap__chev,.um__jump a,.um__jump a span{transition:none}
}
@media (max-width:560px){
  .galwrap__bar{gap:.8rem}
  .galwrap__toggle{gap:.6rem}
}