/* ============================================================
   Vikram Limsay - personal site, HOME (design mock, v2)
   Ledger editorial system tuned to a "columnist" personality:
   Libre Caslon display + Newsreader reading serif + system-sans labels.
   Single committed "paper" world; every colour + body ground painted
   explicitly from tokens so it holds on any host theme.
   ============================================================ */
:root{
  --paper:#F6F4EE;      /* ivory ground */
  --paper-2:#EFEADD;    /* warm panel */
  --paper-3:#E7E1D2;    /* deeper warm */
  --ink:#141C2B;        /* near-black, blue-biased */
  --ink-2:#39435A;      /* secondary text */
  --taupe:#837B6B;      /* warm grey meta */
  --line:rgba(20,28,43,.13);
  --line-2:rgba(20,28,43,.26);
  --ultra:#22409E;      /* ultramarine accent */
  --ultra-2:#182B66;
  --sans:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --caslon:"Libre Caslon Text", Georgia, "Times New Roman", serif;
  --news:"Newsreader", Georgia, serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--news);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background-image:
    radial-gradient(140% 90% at 88% -12%, rgba(34,64,158,.055), transparent 55%),
    linear-gradient(180deg, rgba(20,28,43,.02), transparent 18%);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(22px,5vw,60px)}

/* structural label with a leading hairline (folio device) */
.slabel{font-family:var(--sans);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.22em;color:var(--taupe)}
.kicker{font-family:var(--sans);font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:var(--ultra)}

/* ---------- masthead ---------- */
.mast{position:sticky;top:0;z-index:40;background:rgba(246,244,238,.86);backdrop-filter:blur(9px);border-bottom:1px solid var(--line)}
.mast .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;gap:20px}
.mast .name{font-family:var(--sans);font-weight:600;text-transform:uppercase;letter-spacing:.26em;font-size:.8rem}
.mast .name b{color:var(--ultra);font-weight:600}
.mast nav{display:flex;gap:30px;align-items:center}
.mast nav a{font-family:var(--sans);font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);position:relative;padding:4px 0;transition:color .25s}
.mast nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--ultra);transition:right .3s ease}
.mast nav a:hover{color:var(--ultra)}
.mast nav a:hover::after{right:0}
.mast nav .ext::after{display:none}

/* ---------- hero ---------- */
.hero{padding:clamp(56px,9vh,116px) 0 clamp(52px,7vh,88px);position:relative}
.hero .grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(36px,6vw,84px);align-items:center}
.eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:30px}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--ultra);flex:none;box-shadow:0 0 0 4px rgba(34,64,158,.12)}
.eyebrow .label{font-family:var(--sans);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:var(--taupe)}
.eyebrow a{color:var(--ink);border-bottom:1px solid var(--line-2);transition:color .25s,border-color .25s}
.eyebrow a:hover{color:var(--ultra);border-color:var(--ultra)}
h1.masthead{font-family:var(--caslon);font-weight:700;font-size:clamp(3.4rem,9vw,7rem);line-height:.9;letter-spacing:-.018em;color:var(--ink);text-wrap:balance}
.rule{height:1px;background:var(--line-2);margin:32px 0 28px;transform-origin:left}
.standfirst{font-family:var(--news);font-size:clamp(1.18rem,2vw,1.55rem);line-height:1.42;color:var(--ink-2);max-width:34ch;font-weight:400}
.standfirst b{color:var(--ink);font-weight:500}
.standfirst .em{font-style:italic}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:40px}
.cta{font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--paper);background:var(--ink);padding:15px 26px;border-radius:1px;display:inline-flex;align-items:center;gap:10px;transition:background .25s}
.cta .arw{transition:transform .3s}
.cta:hover{background:var(--ultra)}
.cta:hover .arw{transform:translateX(4px)}
.social{display:flex;gap:20px}
.social a{font-family:var(--sans);font-size:.77rem;letter-spacing:.03em;color:var(--ink-2);display:inline-flex;align-items:center;gap:7px;padding-bottom:3px;border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.social a:hover{color:var(--ultra);border-color:var(--ultra)}
.social svg{width:15px;height:15px;fill:currentColor;flex:none}

/* portrait, blended onto paper */
.portrait{position:relative;justify-self:end;width:100%;max-width:392px}
.portrait .frame{position:relative;padding:14px;background:var(--paper-2);border:1px solid var(--line);box-shadow:0 1px 0 rgba(255,255,255,.6) inset}
.portrait .imgwrap{position:relative;background:var(--paper-2);overflow:hidden}
.portrait img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;mix-blend-mode:multiply;filter:grayscale(.12) contrast(1.03)}
.portrait .tick{position:absolute;width:15px;height:15px;border:1px solid var(--ultra);opacity:.55}
.portrait .tick.tl{top:6px;left:6px;border-right:0;border-bottom:0}
.portrait .tick.br{bottom:6px;right:6px;border-left:0;border-top:0}
.portrait figcaption{font-family:var(--sans);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe);margin-top:15px;display:flex;justify-content:space-between}

/* ---------- section scaffolding ---------- */
section.band{border-top:1px solid var(--line);padding:clamp(52px,7vh,92px) 0}
.bandhead{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:14px}
.viewall{font-family:var(--sans);font-size:.75rem;letter-spacing:.06em;color:var(--ink);display:inline-flex;gap:8px;align-items:center;border-bottom:1px solid var(--line-2);padding-bottom:3px;transition:color .25s,border-color .25s;white-space:nowrap}
.viewall:hover{color:var(--ultra);border-color:var(--ultra)}
.viewall .g{transition:transform .3s}
.viewall:hover .g{transform:translateX(4px)}

/* ---------- writing (label-left / index-right) ---------- */
.writing .split{display:grid;grid-template-columns:.82fr 2fr;gap:clamp(30px,5vw,72px);margin-top:30px}
.writing .aside h2{font-family:var(--caslon);font-weight:700;font-size:clamp(1.7rem,2.6vw,2.3rem);line-height:1.05;letter-spacing:-.01em;margin-bottom:16px}
.writing .aside p{font-family:var(--news);font-size:1rem;color:var(--ink-2);max-width:30ch;margin-bottom:26px}
.pressrow{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:4px}
.press{font-family:var(--sans);font-size:.64rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--taupe);border:1px solid var(--line-2);border-radius:999px;padding:5px 11px}
.index{border-top:1px solid var(--line-2)}
.entry{display:grid;grid-template-columns:112px 1fr auto;gap:22px;align-items:baseline;padding:22px 4px 22px 0;border-bottom:1px solid var(--line);transition:padding-left .3s,background .3s}
.entry:hover{padding-left:14px;background:linear-gradient(90deg,rgba(34,64,158,.05),transparent 70%)}
.entry .date{font-family:var(--sans);font-size:.72rem;letter-spacing:.06em;color:var(--ultra);text-transform:uppercase;font-variant-numeric:tabular-nums;padding-top:6px}
.entry .ttl{font-family:var(--caslon);font-weight:700;font-size:clamp(1.28rem,2vw,1.62rem);line-height:1.16;letter-spacing:-.008em;color:var(--ink);text-wrap:balance;transition:color .25s}
.entry:hover .ttl{color:var(--ultra-2)}
.entry .src{font-family:var(--sans);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--taupe);white-space:nowrap;padding-top:7px}
.entry.lead{grid-template-columns:112px 1fr;padding-top:6px}
.entry.lead .ttl{font-size:clamp(1.9rem,3vw,2.55rem);line-height:1.06}
.entry.lead .dek{font-family:var(--news);font-style:italic;font-size:1.08rem;color:var(--ink-2);margin-top:12px;max-width:52ch}
.entry.lead .srcline{font-family:var(--sans);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--taupe);margin-top:14px;display:inline-flex;align-items:center;gap:10px}
.entry.lead .srcline .go{color:var(--ink);transition:transform .3s,color .25s}
.entry.lead:hover .srcline .go{color:var(--ultra);transform:translateX(3px)}

/* ---------- social feeds ---------- */
.feedhead{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.feedhead h2{font-family:var(--caslon);font-weight:700;font-size:clamp(1.5rem,2.3vw,2rem);letter-spacing:-.01em}
.feedhead .handle{font-family:var(--sans);font-size:.75rem;letter-spacing:.04em;color:var(--taupe);margin-left:auto;display:inline-flex;align-items:center;gap:7px;border-bottom:1px solid transparent;padding-bottom:2px;transition:color .25s,border-color .25s}
.feedhead .handle:hover{color:var(--ultra);border-color:var(--ultra)}
.feedhead svg{width:19px;height:19px;fill:var(--ink)}

.li-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.li-card{background:var(--paper-2);border:1px solid var(--line);padding:26px 24px;display:flex;flex-direction:column;min-height:230px;transition:transform .3s,box-shadow .3s,background .3s}
.li-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px -20px rgba(20,28,43,.5);background:var(--paper)}
.li-card .q{font-family:var(--news);font-size:1.06rem;line-height:1.5;color:var(--ink);flex:1}
.li-card .q b{font-weight:600}
.li-card .m{margin-top:20px;display:flex;align-items:center;gap:10px;font-family:var(--sans);font-size:.72rem;letter-spacing:.04em;color:var(--taupe)}
.li-card .m .tag{color:var(--ultra)}
.li-card .m .go{margin-left:auto;color:var(--ink);transition:transform .3s,color .25s}
.li-card:hover .m .go{color:var(--ultra);transform:translateX(3px)}

.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.reel{position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--line);display:block}
.reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.reel:hover img{transform:scale(1.045)}
.reel .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,15,26,.04) 0%,rgba(10,15,26,.14) 42%,rgba(10,15,26,.8) 100%)}
.reel .inner{position:absolute;inset:0;padding:22px;display:flex;flex-direction:column;color:#F6F4EE}
.reel .play{width:44px;height:44px;border-radius:50%;background:rgba(246,244,238,.15);backdrop-filter:blur(3px);border:1px solid rgba(246,244,238,.55);display:flex;align-items:center;justify-content:center;margin-bottom:auto;transition:background .25s}
.reel:hover .play{background:rgba(246,244,238,.28)}
.reel .play svg{width:15px;height:15px;fill:#fff;margin-left:2px}
.reel h3{font-family:var(--news);font-weight:500;font-size:1.08rem;line-height:1.26;color:#F6F4EE;text-wrap:balance}
.reel .m{margin-top:10px;font-family:var(--sans);font-size:.7rem;letter-spacing:.05em;color:rgba(246,244,238,.82);font-variant-numeric:tabular-nums}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line-2);padding:34px 0 46px;background:var(--paper-2)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:16px 26px;align-items:center;justify-content:space-between}
.foot .who{font-family:var(--caslon);font-size:1.1rem}
.foot .who span{color:var(--taupe);font-family:var(--sans);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;margin-left:12px}
.foot .fl{display:flex;gap:22px;font-family:var(--sans);font-size:.74rem;letter-spacing:.05em;color:var(--ink-2)}
.foot .fl a:hover{color:var(--ultra)}

/* mock ribbon */

/* reveal motion */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
body.in .reveal{opacity:1;transform:none}
body.in .reveal.d1{transition-delay:.06s}
body.in .reveal.d2{transition-delay:.16s}
body.in .reveal.d3{transition-delay:.28s}
.rule{transform:scaleX(0);transition:transform 1s cubic-bezier(.2,.7,.2,1) .3s}
body.in .rule{transform:scaleX(1)}

/* scroll-reveal for bands */
.sr{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.sr.vis{opacity:1;transform:none}

@media (max-width:900px){
  .hero .grid{grid-template-columns:1fr;gap:42px}
  .portrait{grid-row:1;justify-self:start;max-width:300px}
  .standfirst{max-width:54ch}
  .writing .split{grid-template-columns:1fr;gap:32px}
  .li-grid{grid-template-columns:1fr}
  .ig-grid{grid-template-columns:repeat(3,1fr);gap:12px}
}
@media (max-width:640px){
  .mast nav{gap:18px}.mast nav .hidesm{display:none}
  .entry{grid-template-columns:1fr;gap:6px;padding:18px 0}
  .entry .src,.entry .date{padding-top:0}
  .entry.lead{grid-template-columns:1fr}
  .ig-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .reveal,.rule,.sr{transition:none;opacity:1;transform:none}
  html{scroll-behavior:auto}
}
:focus-visible{outline:2px solid var(--ultra);outline-offset:3px}

/* ---- Helicon feed component tokens ---- */
:root{--ink-soft:#4E586C;--rule:#D9D3C4;--accent:#23409F;--sunken:#EFECE2}
.sans{font-family:var(--sans)}
.rev{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s cubic-bezier(.19,1,.22,1)}
.rev.on{opacity:1;transform:none}
.feed-glyph{width:20px;height:20px;fill:var(--ink);flex:none}
.feedhead h2{font-family:var(--caslon);font-weight:700}
.li-card,.media-card,.reel-card{font-family:var(--caslon)}
/* LinkedIn */
.li-feed{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2vw,26px);align-items:start}
.li-feed.teaser{grid-template-columns:repeat(3,1fr);align-items:stretch}
@media(max-width:960px){.li-feed.teaser{grid-template-columns:1fr}}
.li-card{background:#FFFEFA;border:1px solid var(--rule);border-radius:12px;padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;transition:box-shadow .38s ease,border-color .38s ease,opacity .9s ease,transform .9s cubic-bezier(.19,1,.22,1)}
.li-card:hover{box-shadow:0 18px 44px rgba(19,28,44,.10);border-color:color-mix(in srgb,var(--accent) 32%,var(--rule))}
.li-top{display:flex;align-items:flex-start;gap:13px}
.li-ava{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:top center;flex:none;border:1px solid var(--rule);background:#fff}
.li-id{display:flex;flex-direction:column;min-width:0;gap:2px;flex:1}
.li-name{font-weight:700;font-size:1.08rem;line-height:1.2;color:var(--ink)}
.li-head{font-size:11.5px;line-height:1.35;color:var(--ink-soft)}
.li-meta{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--ink-soft);letter-spacing:.02em;margin-top:1px}
.li-globe{width:12px;height:12px;opacity:.65}
.li-in{color:var(--accent);flex:none;opacity:.9;transition:transform .3s,opacity .3s}
.li-in:hover{transform:translateY(-1px);opacity:1}
.li-in .li-glyph{width:22px;height:22px;display:block}
.li-text{margin:16px 0 0;font-size:1rem;line-height:1.72;color:var(--ink);white-space:pre-line;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6}
.li-tag{color:var(--accent)}
.li-foot{display:flex;align-items:center;gap:16px;margin-top:auto;padding-top:16px;border-top:1px solid var(--rule)}
.li-react{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-soft);white-space:nowrap}
.li-view{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);white-space:nowrap;margin-left:auto;transition:transform .3s}
.li-view:hover{transform:translateX(4px)}
/* Media / In the Press */
.featured-in{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(18px,3.5vw,48px);padding:24px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:26px 0 clamp(34px,5vh,52px)}
.fi-label{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft);margin-right:6px}
.fi-name{font-family:var(--caslon);font-size:clamp(1rem,1.5vw,1.28rem);color:var(--ink);letter-spacing:.01em;white-space:nowrap}
.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,26px);align-items:stretch}
@media(max-width:900px){.media-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.media-grid{grid-template-columns:1fr}}
.media-card{display:flex;flex-direction:column;background:#FFFEFA;border:1px solid var(--rule);border-radius:10px;overflow:hidden;color:inherit;transition:box-shadow .38s ease,border-color .38s ease,opacity .9s ease,transform .9s cubic-bezier(.19,1,.22,1)}
.media-card:hover{box-shadow:0 20px 46px rgba(19,28,44,.11);border-color:color-mix(in srgb,var(--accent) 32%,var(--rule))}
.media-thumb{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--sunken);display:block;border-bottom:1px solid var(--rule)}
.media-body{padding:clamp(18px,1.9vw,24px);display:flex;flex-direction:column;gap:10px;flex:1}
.media-src{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.media-card h3{font-weight:400;font-size:clamp(1.12rem,1.5vw,1.38rem);line-height:1.32;margin:0;color:var(--ink);text-wrap:balance;transition:color .3s}
.media-card:hover h3{color:var(--accent)}
.media-ex{margin:0;color:var(--ink-soft);font-size:.95rem;line-height:1.62;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.media-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-top:14px}
.media-date{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.media-read{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);white-space:nowrap;transition:transform .3s}
.media-card:hover .media-read{transform:translateX(4px)}
/* Reels */
.reel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,26px);align-items:stretch}
@media(max-width:820px){.reel-grid{grid-template-columns:1fr}}
.reel-card{display:flex;flex-direction:column;background:#FFFEFA;border:1px solid var(--rule);border-radius:12px;padding:clamp(20px,2.2vw,26px);color:inherit;transition:box-shadow .38s ease,border-color .38s ease,opacity .9s ease,transform .9s cubic-bezier(.19,1,.22,1)}
.reel-card:hover{box-shadow:0 20px 46px rgba(19,28,44,.11);border-color:color-mix(in srgb,var(--accent) 32%,var(--rule))}
.reel-ig{color:var(--accent);flex:none;opacity:.9}
.reel-ig svg{width:22px;height:22px;display:block}
.reel-thumb{position:relative;display:block;margin-top:16px;border-radius:8px;overflow:hidden;border:1px solid var(--rule);aspect-ratio:9/16;background:#0b0f18}
.reel-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.reel-card:hover .reel-thumb img{transform:scale(1.03)}
.reel-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:color-mix(in srgb,var(--ink) 50%,transparent);display:flex;align-items:center;justify-content:center;z-index:2;transition:transform .3s,background .3s}
.reel-thumb:hover .reel-play{transform:translate(-50%,-50%) scale(1.08);background:var(--accent)}
.reel-play svg{width:22px;height:22px;fill:#fff;margin-left:3px}
.reel-cap{margin:14px 0 0;font-size:.96rem;line-height:1.6;color:var(--ink);white-space:pre-line;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.reel-card .li-foot{margin-top:auto}



/* ---- Media page specific ---- */
.page-head{padding:clamp(48px,8vh,96px) 0 clamp(24px,4vh,40px)}
.page-head .eyebrow{margin-bottom:22px}
.page-head h1{font-family:var(--caslon);font-weight:700;font-size:clamp(2.8rem,6.5vw,5rem);line-height:.94;letter-spacing:-.015em;color:var(--ink)}
.page-head .intro{font-family:var(--news);font-size:clamp(1.1rem,1.7vw,1.4rem);line-height:1.5;color:var(--ink-2);max-width:46ch;margin-top:22px}
.controls{position:sticky;top:66px;z-index:30;background:rgba(246,244,238,.9);backdrop-filter:blur(9px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:clamp(30px,4vh,46px)}
.controls .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:16px;padding-bottom:16px;flex-wrap:wrap}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-family:var(--sans);font-size:.74rem;letter-spacing:.06em;color:var(--ink-2);background:transparent;border:1px solid var(--line-2);border-radius:999px;padding:8px 15px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all .25s}
.chip .n{font-size:.66rem;color:var(--taupe);font-variant-numeric:tabular-nums;transition:color .25s}
.chip:hover{border-color:var(--ultra);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chip[aria-pressed="true"] .n{color:rgba(246,244,238,.7)}
.sortbtn{font-family:var(--sans);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);background:transparent;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:8px 0}
.sortbtn:hover{color:var(--ultra)}
.sortbtn svg{width:14px;height:14px;fill:currentColor;transition:transform .3s}
.sortbtn.asc svg{transform:rotate(180deg)}
/* masonry via CSS columns */
.mgrid{column-count:3;column-gap:clamp(18px,2vw,26px)}
@media(max-width:900px){.mgrid{column-count:2}}
@media(max-width:620px){.mgrid{column-count:1}}
.mgrid .item{break-inside:avoid;margin:0 0 clamp(18px,2vw,26px);width:100%}
.mgrid .item.hide{display:none}
.mcount{font-family:var(--sans);font-size:.72rem;letter-spacing:.08em;color:var(--taupe);margin-bottom:20px}
.pagefoot{padding:clamp(40px,6vh,72px) 0}
.pagefoot .wrap{text-align:center}
.pagefoot p{font-family:var(--news);font-style:italic;color:var(--ink-2);font-size:1.1rem}

/* ---- reel inline playback (Instagram embed swapped in on click) ---- */
.reel-thumb{cursor:pointer}
.reel-embed{position:absolute;inset:0;width:100%;height:100%;border:0;background:#0b0f18;z-index:3}
.reel-thumb.playing img,.reel-thumb.playing .reel-play{opacity:0;pointer-events:none}
.reel-thumb .reel-load{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#F6F4EE;opacity:0;transition:opacity .3s}
.reel-thumb.playing .reel-load{opacity:.85}