/* ============================================================
   VOLUME — a hair salon, published quarterly
   Colonia Americana, Guadalajara
   ------------------------------------------------------------
   TYPE SWAP: drop PP Right Didone into /fonts and uncomment the
   @font-face below — --ff-display is the only line that changes.
   ============================================================ */

/* ── PP Right Didone (Pangram Pangram) ─────────────────────
   Two families off one superfamily: the standard cut carries
   the text, the Wide cut does the shouting. No second font
   needed — the width axis is the contrast.
   ───────────────────────────────────────────────────────── */

@font-face{
  font-family:"Right Didone";
  src:url("fonts/PP Right Didone - Light.otf") format("opentype");
  font-weight:300 450; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Right Didone";
  src:url("fonts/PP Right Didone - Medium.otf") format("opentype");
  font-weight:451 600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Right Didone";
  src:url("fonts/PP Right Didone - Light Italic.otf") format("opentype");
  font-weight:300 450; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Right Didone";
  src:url("fonts/PP Right Didone - Bold Italic.otf") format("opentype");
  font-weight:451 900; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Right Didone Wide";
  src:url("fonts/PP Right Didone - Wide Medium.otf") format("opentype");
  font-weight:400 600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Right Didone Wide";
  src:url("fonts/PP Right Didone - Wide Black.otf") format("opentype");
  font-weight:601 900; font-style:normal; font-display:swap;
}

:root{
  /* ── ink & paper ── */
  --paper:      #F1EFE9;
  --paper-hi:   #FBFAF7;
  --ink:        #0B0B0B;
  --ink-soft:   #2A2A28;
  --dim:        rgba(11,11,11,.52);
  --dimmer:     rgba(11,11,11,.30);
  --rule:       rgba(11,11,11,.22);
  --rule-hair:  rgba(11,11,11,.13);

  /* ── the two graphic hits ── */
  --red:        #E0230F;
  --blue:       #1B29FF;

  /* ── inverted ── */
  --night:      #0B0B0B;
  --night-2:    #141413;
  --on-night:   #F1EFE9;
  --dim-night:  rgba(241,239,233,.55);
  --rule-night: rgba(241,239,233,.20);

  /* ── type ── */
  --ff-display: "Right Didone", Didot, "Times New Roman", serif;
  --ff-mast:    "Right Didone Wide", "Right Didone", Didot, serif;
  --ff-sans:    "Archivo", "Helvetica Neue", Helvetica, sans-serif;

  /* ── measure ── */
  --gut:  clamp(18px, 3.2vw, 52px);
  --maxw: 1560px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ff-sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }
a{ color:inherit; }
h1,h2,h3,h4{ margin:0; font-weight:400; }
p{ margin:0; }
figure,blockquote{ margin:0; }   /* UA gives these 40px side margins */
ol,ul,dl,dd{ margin:0; padding:0; list-style:none; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--ink); color:var(--paper); padding:14px 20px;
  font:600 12px/1 var(--ff-sans); letter-spacing:.12em; text-transform:uppercase;
}
.skip:focus{ left:0; }

:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }

/* ── shared editorial atoms ─────────────────────────────── */

.rubric{
  font:600 10px/1 var(--ff-sans);
  letter-spacing:.30em; text-transform:uppercase;
  color:var(--red);
}

.meta{
  display:flex; flex-wrap:wrap; gap:0 14px;
  font:500 9.5px/1.4 var(--ff-sans);
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim);
}
.meta span{ position:relative; }
.meta span + span::before{
  content:"—"; position:absolute; left:-11px; color:var(--dimmer);
}
.meta--rule{
  border-top:1px solid var(--rule); padding-top:12px; margin-top:20px;
  gap:0 22px;
}
.meta--rule span + span::before{ left:-15px; }

.ulink{
  text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px; background-repeat:no-repeat; background-position:0 100%;
  padding-bottom:1px;
  transition:background-size .35s cubic-bezier(.2,.7,.3,1);
}
.ulink:hover{ background-size:0% 1px; background-position:100% 100%; }

.secthead{
  text-align:center;
  padding:clamp(64px,8vw,120px) var(--gut) clamp(28px,3.5vw,48px);
  max-width:900px; margin-inline:auto;
}
.secthead .rubric{ margin-bottom:18px; }
.secthead__h{
  font-family:var(--ff-display);
  font-size:clamp(38px,6.4vw,86px);
  line-height:.98; letter-spacing:-.015em; font-weight:500;
}
.secthead--inv .secthead__h{ color:var(--on-night); }
.secthead--inv .rubric{ color:#FF6A55; }

/* ── FPO picture boxes (until the real photos land) ─────── */

.fig{ position:relative; overflow:hidden; background:#E4E1D9; }
.fig--4x5{ aspect-ratio:4/5; }
.fig--1x1{ aspect-ratio:1/1; }
.fig--3x4{ aspect-ratio:3/4; }
.fig__img{ width:100%; height:100%; object-fit:cover; }

.is-fpo{
  background:
    repeating-linear-gradient(-45deg,
      rgba(11,11,11,.055) 0 1px, transparent 1px 9px),
    #E4E1D9;
  border:1px solid var(--rule-hair);
}
.is-fpo::after{
  content:attr(data-fpo);
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font:500 9px/1.7 var(--ff-sans);
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--dimmer); text-align:center; white-space:pre;
}
.contrib .is-fpo, .floor .is-fpo, .cover .is-fpo{
  background:
    repeating-linear-gradient(-45deg,
      rgba(241,239,233,.07) 0 1px, transparent 1px 9px),
    #1C1C1A;
  border-color:var(--rule-night);
}
.contrib .is-fpo::after, .floor .is-fpo::after, .cover .is-fpo::after{ color:rgba(241,239,233,.35); }

/* ══════════════ MASTHEAD BAR ══════════════ */

.bar{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:0 var(--gut); height:58px;
  color:var(--on-night);
  mix-blend-mode:difference;
  transition:color .4s;
}
.bar--solid{
  mix-blend-mode:normal;
  background:var(--paper);
  color:var(--ink);
  border-bottom:1px solid var(--rule);
}

.bar__menu{
  justify-self:start;
  display:inline-flex; align-items:center; gap:10px;
  background:none; border:0; padding:0; cursor:pointer; color:inherit;
  font:600 10px/1 var(--ff-sans); letter-spacing:.22em; text-transform:uppercase;
}
.bar__burger{ display:block; width:20px; }
.bar__burger i{
  display:block; height:1.5px; background:currentColor; margin:4px 0;
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.bar__menu[aria-expanded="true"] .bar__burger i:first-child{ transform:translateY(2.75px) rotate(13deg); }
.bar__menu[aria-expanded="true"] .bar__burger i:last-child{ transform:translateY(-2.75px) rotate(-13deg); }

.bar__mark{
  font-family:var(--ff-display); font-weight:500;
  font-size:19px; letter-spacing:.34em; text-transform:uppercase;
  text-decoration:none; padding-left:.34em;
}

.bar__cta{
  justify-self:end; text-decoration:none;
  font:600 10px/1 var(--ff-sans); letter-spacing:.22em; text-transform:uppercase;
  border:1px solid currentColor; border-radius:999px; padding:9px 16px;
  transition:background .3s, color .3s;
}
.bar--solid .bar__cta:hover{ background:var(--ink); color:var(--paper); }

/* drawer */
.drawer{
  position:fixed; inset:58px 0 auto 0; z-index:55;
  background:var(--paper); border-bottom:1px solid var(--rule);
  padding:clamp(28px,4vw,56px) var(--gut) clamp(36px,4vw,64px);
  display:grid; grid-template-columns:1fr auto; gap:40px; align-items:end;
  animation:drop .45s cubic-bezier(.2,.7,.3,1);
}
@keyframes drop{ from{ transform:translateY(-14px); opacity:0 } }
.drawer[hidden]{ display:none; }
.drawer__list{ display:grid; gap:2px; }
.drawer__list a{
  display:flex; align-items:baseline; gap:16px; text-decoration:none;
  font-family:var(--ff-display); font-size:clamp(26px,3.6vw,46px);
  line-height:1.18; font-weight:500;
  transition:color .25s, transform .35s cubic-bezier(.2,.7,.3,1);
}
.drawer__list a:hover{ color:var(--red); transform:translateX(10px); }
.drawer__list em{
  font:500 10px/1 var(--ff-sans); letter-spacing:.2em; font-style:normal;
  color:var(--dimmer); width:22px;
}
.drawer__addr{ font-size:12px; line-height:1.85; color:var(--dim); text-align:right; }

/* ── the strand: scroll progress as one hair ── */
.strand{
  position:fixed; left:0; top:0; z-index:50;
  width:34px; height:100vh; pointer-events:none;
  mix-blend-mode:difference;
}
.strand path{
  fill:none; stroke:#8A8A88; stroke-width:1.1; stroke-linecap:round;
  stroke-dasharray:var(--len,2400); stroke-dashoffset:var(--off,2400);
}
@media (max-width:900px){ .strand{ display:none; } }

/* ══════════════ THE COVER + PAGE TURN ══════════════ */

.turn{ height:265vh; position:relative; }
.turn__stage{
  position:sticky; top:0; height:100vh; overflow:hidden;
  perspective:2400px; perspective-origin:60% 50%;
  background:var(--paper);
}

/* inside front cover — the editor's letter */
/* the recto page — sits right of the spine so it is uncovered
   progressively as the cover swings open */
.inside{
  position:absolute; inset:0; z-index:1;
  display:grid; align-content:center; justify-content:end;
  padding:90px clamp(20px,5vw,96px) 60px var(--gut);
  background:var(--paper-hi);
}
.inside::after{ /* gutter shadow from the turning page */
  content:""; position:absolute; inset:0 auto 0 0; width:34vw;
  background:linear-gradient(90deg, rgba(11,11,11,.34), transparent);
  opacity:var(--gutter,1); transition:opacity .1s linear; pointer-events:none;
}
/* the verso — a full-bleed plate facing the letter, the way a real spread runs.
   Sits under the gutter shadow (::after, z-index 0 stacking) so the shadow reads as
   the fold falling across the photograph. */
.inside__art{
  position:absolute; inset:0 auto 0 0; width:46%;
  margin:0; overflow:hidden; background:var(--paper);
}
/* The verso is only slightly taller than the 3:4 plate, so this trims about 14% of the
   height and none of the width. Renata is full-length with her head at 18% of the
   plate; anchoring high keeps her head clear and spends the crop on floor instead. */
.inside__art .fig__img{ width:100%; height:100%; object-fit:cover; object-position:50% 28%; }
.inside__inner{ width:min(620px, 44vw); }
@media (max-width:820px){
  .inside{ justify-content:center; }
  .inside__inner{ width:auto; max-width:620px; }
  /* no room for a verso on one column — the letter takes the page */
  .inside__art{ display:none; }
}
.inside__h{
  font-family:var(--ff-display); font-weight:500;
  font-size:clamp(27px,3.9vw,52px); line-height:1.08; letter-spacing:-.015em;
  margin:20px 0 30px;
}
.inside__cols{
  columns:2; column-gap:38px;
  font-size:14.5px; line-height:1.72; color:var(--ink-soft);
  border-top:1px solid var(--rule); padding-top:22px;
}
.inside__cols p + p{ margin-top:1em; }
.inside__cols em{ font-family:var(--ff-display); font-size:1.08em; }
.inside__sign{
  margin-top:30px; font-family:var(--ff-display); font-size:20px; font-style:italic;
}
.inside__sign span{
  display:block; font:500 9.5px/1 var(--ff-sans);
  letter-spacing:.2em; text-transform:uppercase; color:var(--dim);
  margin-top:9px; font-style:normal;
}
.inside__folio{
  position:absolute; left:var(--gut); bottom:34px; z-index:2;
  font:500 10px/1 var(--ff-sans); letter-spacing:.24em; color:var(--dimmer);
}
/* once the verso carries a photograph the folio sits on it, so it flips to paper white */
.inside:has(.inside__art) .inside__folio{ color:rgba(241,239,233,.62); }
@media (max-width:820px){ .inside:has(.inside__art) .inside__folio{ color:var(--dimmer); } }
@media (max-width:720px){ .inside__cols{ columns:1; } }

/* the cover page itself */
.cover{
  position:absolute; inset:0; z-index:2;
  background:var(--night); color:var(--on-night);
  transform-origin:left center;
  transform:rotateY(calc(var(--turn,0) * -104deg));
  backface-visibility:hidden;
  will-change:transform;
  overflow:hidden;
  display:grid; grid-template-rows:auto 1fr auto;
  padding:74px var(--gut) 30px;
}
.cover__art{
  position:absolute; inset:0; z-index:0;
  filter:saturate(.82) contrast(1.06);
}
.cover__art .fig__img{ width:100%; height:100%; object-fit:cover; }
/* 01-cover.jpg is 16:9, so on a landscape hero it very nearly fits: only ~7% of its
   height is cropped and the anchor barely matters. Crown sits at 17% of the plate and
   the forehead at 40%, which lands the hair inside the VOLUME letters and the face
   clear below them. Portrait viewports are the hard case — see the note below.
   Re-measure with a percentage grid if the plate is ever swapped. */
@media (min-aspect-ratio:1/1){
  .cover__art .fig__img{ object-position:50% 12%; }
}
/* A 16:9 plate in a tall phone viewport keeps only ~26% of its width, so anchor on her
   face (x≈45%) rather than the centre of the frame. */
@media (max-aspect-ratio:1/1){
  .cover__art .fig__img{ object-position:46% 50%; }
}
.cover::before{ /* legibility wash */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(11,11,11,.66) 0%, rgba(11,11,11,.14) 30%, rgba(11,11,11,.16) 52%, rgba(11,11,11,.82) 100%),
    linear-gradient(90deg, rgba(11,11,11,.58) 0%, transparent 48%);
}
.cover__grain{
  position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

.cover__top{
  grid-row:1; position:relative; z-index:3;
  display:flex; flex-wrap:wrap; gap:0 26px; align-items:baseline;
  font:500 9.5px/1 var(--ff-sans); letter-spacing:.2em; text-transform:uppercase;
  color:rgba(241,239,233,.78);
  border-bottom:1px solid var(--rule-night); padding-bottom:14px;
}
.cover__price{ margin-left:auto; color:var(--on-night); }

.cover__mid{
  grid-row:2; position:relative; z-index:3;
  display:grid; grid-template-rows:auto 1fr;
  padding-top:clamp(18px,4.5vh,58px);
}

.cover__mast{
  display:flex; justify-content:space-between; align-items:flex-start;
  font-family:var(--ff-mast); font-weight:500;
  font-size:clamp(58px,16.4vw,246px);
  line-height:.8; letter-spacing:-.005em;
  color:var(--on-night);
  pointer-events:none;
}
.cover__mast span{ display:block; }

.cover__bottom{
  align-self:end;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(20px,4vw,70px);
  padding-bottom:clamp(12px,2.6vh,30px);
}

.cover__lines{
  max-width:min(40ch,32vw);
  display:grid; gap:13px;
  font-size:13.5px; line-height:1.45; color:rgba(241,239,233,.86);
}
.cover__lines b{
  font-family:var(--ff-display); font-weight:500; font-size:17px;
  display:block; color:var(--on-night);
}
.cover__lines li{ border-left:2px solid var(--red); padding-left:13px; }
.cover__lines-plus{
  border-left-color:transparent !important; padding-left:0 !important;
  font:600 10px/1 var(--ff-sans); letter-spacing:.24em; text-transform:uppercase;
  color:#FF6A55;
}

.cover__issue{
  flex:0 0 auto;
  font-family:var(--ff-display); font-style:italic; font-weight:400;
  font-size:clamp(22px,3.4vw,52px); line-height:.98;
  text-align:right; max-width:7ch;
}

.cover__foot{
  grid-row:3; position:relative; z-index:3;
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  border-top:1px solid var(--rule-night); padding-top:16px;
}
.barcode{ width:104px; height:38px; }
.barcode rect{ fill:var(--on-night); }
.cover__scroll{
  display:inline-flex; align-items:center; gap:11px; text-decoration:none;
  font:600 10px/1 var(--ff-sans); letter-spacing:.24em; text-transform:uppercase;
}
.cover__scroll svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.5; }
.cover__scroll:hover svg{ animation:nudge 1s infinite; }
@keyframes nudge{ 50%{ transform:translateY(5px) } }

@media (max-width:820px){
  .cover__bottom{ flex-direction:column; align-items:flex-start; }
  .cover__lines{ max-width:none; }
  .cover__issue{ display:none; }
}

/* ══════════════ CONTENTS — the spread ══════════════ */

.contents{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(60px,7.5vw,120px) var(--gut) clamp(56px,7vw,110px);
}
.spread{
  display:grid; grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
  gap:clamp(28px,4vw,80px); align-items:start;
}

.spread__h{
  font-family:var(--ff-display); font-weight:500;
  font-size:clamp(44px,7.2vw,104px); line-height:.92; letter-spacing:-.025em;
  margin:14px 0 12px;
}
.spread__meta{
  font:500 9.5px/1 var(--ff-sans); letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim); padding-bottom:clamp(20px,2.6vw,36px);
  border-bottom:1px solid var(--ink);
}

/* the index */
.idx{ display:grid; }
.idx li + li{ border-top:1px solid var(--rule-hair); }
.idx__i{
  width:100%; text-align:left; cursor:pointer;
  background:none; border:0; border-radius:0;
  font:inherit; color:inherit;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:baseline;
  column-gap:clamp(16px,2vw,34px);
  padding:clamp(13px,1.7vw,22px) 0;
  position:relative;
  transition:padding-left .5s cubic-bezier(.2,.7,.3,1);
}
.idx__i::before{ /* the rule that grows on the active row */
  content:""; position:absolute; left:0; bottom:-1px; height:2px; width:0;
  background:var(--red); transition:width .55s cubic-bezier(.2,.7,.3,1);
}
.idx__i.is-on{ padding-left:clamp(10px,1.4vw,22px); }
.idx__i.is-on::before{ width:100%; }

.idx__pg{
  font-family:var(--ff-display); font-weight:500;
  font-size:clamp(15px,1.35vw,20px); letter-spacing:.02em;
  color:var(--dimmer); font-variant-numeric:tabular-nums;
  transition:color .35s;
  align-self:start; padding-top:.5em;
}
.idx__i.is-on .idx__pg{ color:var(--red); }

.idx__ttl{
  font-family:var(--ff-display); font-weight:500;
  font-size:clamp(30px,4.6vw,66px); line-height:.98; letter-spacing:-.022em;
  transition:color .35s;
  display:block;
}
.idx__i.is-on .idx__ttl{ color:var(--red); }

.idx__sub{
  grid-column:2; display:block; margin-top:8px;
  font-size:12.5px; line-height:1.5; color:var(--dim);
  max-width:44ch;
  opacity:.55; transition:opacity .35s;
}
.idx__i.is-on .idx__sub{ opacity:1; }

/* the plate */
.plate{
  position:sticky; top:92px; margin:0;
  display:grid; grid-template-rows:1fr auto;
}
.plate__stack{
  position:relative; aspect-ratio:3/4; overflow:hidden; background:#E4E1D9;
}
.plate__stack .fig__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.05);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform 1.3s cubic-bezier(.2,.7,.3,1);
}
.plate__stack .fig__img.is-on{ opacity:1; transform:none; }
.plate__stack.is-fpo{ aspect-ratio:3/4; }
/* the folio, cropped by the plate edge the way a real one would be */
.plate__no{
  position:absolute; left:.04em; bottom:-.19em; z-index:3;
  font-family:var(--ff-mast); font-weight:800;
  font-size:clamp(58px,7.6vw,124px); line-height:.8;
  color:transparent; -webkit-text-stroke:1.4px rgba(241,239,233,.92);
  pointer-events:none; font-variant-numeric:tabular-nums;
}
.plate__cap{
  margin-top:14px; padding-top:12px; border-top:1px solid var(--ink);
  font:500 9.5px/1.5 var(--ff-sans); letter-spacing:.2em;
  text-transform:uppercase; color:var(--dim);
}

@media (max-width:900px){
  .spread{ grid-template-columns:1fr; }
  .plate{ position:relative; top:auto; order:-1; max-width:340px; }
  .idx__sub{ max-width:none; }
}

/* ══════════════ DEPARTMENTS ══════════════ */

.depts{ padding-bottom:clamp(56px,6vw,96px); }
.depts__grid{
  max-width:var(--maxw); margin-inline:auto; padding:0 var(--gut);
  display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(14px,1.7vw,26px);
  border-top:1px solid var(--ink); padding-top:clamp(22px,2.6vw,38px);
}
.dept{ display:grid; gap:0; }
.dept .fig{ margin-bottom:15px; }
.dept .fig__img{ transition:transform 1.1s cubic-bezier(.2,.7,.3,1), filter .6s; }
.dept:hover .fig__img{ transform:scale(1.05); filter:saturate(1.12); }
.dept__h{
  font-family:var(--ff-display); font-size:clamp(17px,1.55vw,25px);
  line-height:1.12; font-weight:500; margin:9px 0 8px; letter-spacing:-.01em;
}
.dept__by{ font-size:12px; line-height:1.5; color:var(--dim); }

.depts__note{
  max-width:var(--maxw); margin:clamp(28px,3.4vw,50px) auto 0; padding:0 var(--gut);
  font-size:12.5px; color:var(--dim); display:flex; flex-wrap:wrap; gap:8px 20px;
}

@media (max-width:1080px){ .depts__grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:620px){ .depts__grid{ grid-template-columns:repeat(2,1fr); } }

/* ══════════════ TICKER ══════════════ */

.ticker{
  overflow:hidden; background:var(--ink); color:var(--paper);
  padding:13px 0; border-block:1px solid var(--ink);
}
.ticker__track{
  display:flex; align-items:center; gap:0; width:max-content;
  animation:slide 42s linear infinite;
  font:600 11px/1 var(--ff-sans); letter-spacing:.26em; text-transform:uppercase;
}
.ticker__track span{ padding:0 26px; white-space:nowrap; }
.ticker__track i{ color:var(--red); font-style:normal; font-size:9px; }
@keyframes slide{ to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion:reduce){ .ticker__track{ animation:none } }

/* ══════════════ THE FEATURE ══════════════ */

.feature{
  max-width:var(--maxw); margin-inline:auto; padding:clamp(70px,8vw,130px) var(--gut);
}
.feature__head{ max-width:1040px; margin-inline:auto; text-align:center; }
.feature__h{
  font-family:var(--ff-display); font-weight:500;
  font-size:clamp(46px,9.4vw,150px); line-height:.86; letter-spacing:-.025em;
  margin:18px 0 24px;
}
.feature__dek{
  font-family:var(--ff-display); font-style:italic;
  font-size:clamp(16px,1.85vw,25px); line-height:1.42; color:var(--ink-soft);
  max-width:44ch; margin-inline:auto;
}
.feature__head .meta--rule{ justify-content:center; }

.feature__hero{ margin:clamp(38px,4.6vw,72px) 0 0; }
.feature__hero .fig__img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.feature__hero.is-fpo{ aspect-ratio:16/9; }
.feature__hero figcaption,
.feature__strip figcaption{
  margin-top:11px; font-size:11.5px; line-height:1.5;
  color:var(--dim); font-style:italic;
  font-family:var(--ff-display);
}

.feature__body{
  columns:3; column-gap:clamp(28px,3.4vw,58px);
  margin-top:clamp(38px,4.4vw,68px);
  font-size:15px; line-height:1.74; color:var(--ink-soft);
  text-align:justify; hyphens:auto;
}
.feature__body p{ margin:0 0 1.05em; break-inside:avoid-column; }
.feature__body em{ font-family:var(--ff-display); font-size:1.06em; }
.dropcap::first-letter{
  float:left; font-family:var(--ff-display); font-weight:500;
  font-size:4.85em; line-height:.76; margin:.06em .1em -.06em 0;
  color:var(--red);
}
.pull{
  break-inside:avoid-column; margin:6px 0 1.2em;
  border-block:2px solid var(--ink); padding:22px 0 18px;
}
.pull p{
  font-family:var(--ff-display); font-weight:500;
  font-size:clamp(22px,2.3vw,33px); line-height:1.06; letter-spacing:-.015em;
  color:var(--ink); text-align:left; margin:0 0 12px;
}
.pull span{
  font:500 9.5px/1.5 var(--ff-sans); letter-spacing:.18em;
  text-transform:uppercase; color:var(--dim);
}

.feature__strip{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.7vw,26px);
  margin-top:clamp(34px,4vw,60px);
}

@media (max-width:980px){ .feature__body{ columns:2; } }
@media (max-width:640px){
  .feature__body{ columns:1; text-align:left; }
  .feature__strip{ grid-template-columns:1fr; }
}

/* ══════════════ CONTRIBUTORS ══════════════ */

.contrib{ background:var(--night); color:var(--on-night); padding-bottom:clamp(64px,7.5vw,120px); }
.contrib__grid{
  max-width:var(--maxw); margin-inline:auto; padding:0 var(--gut);
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.28fr);
  gap:clamp(26px,3.4vw,62px);
  border-top:1px solid var(--rule-night); padding-top:clamp(24px,3vw,44px);
}
.contrib__lead .fig{ margin-bottom:18px; background:#1C1C1A; }
.contrib__lead .meta{ color:var(--dim-night); }
.contrib__lead .meta span + span::before{ color:rgba(241,239,233,.3); }
.contrib__h{
  font-family:var(--ff-display); font-weight:500;
  font-size:clamp(30px,3.6vw,54px); line-height:1; letter-spacing:-.015em;
  margin:12px 0 14px;
}
.contrib__bio{ font-size:14px; line-height:1.68; color:var(--dim-night); max-width:46ch; }
.contrib__tag{
  margin-top:16px; font:500 10px/1.6 var(--ff-sans);
  letter-spacing:.14em; text-transform:uppercase; color:#FF6A55;
}

.contrib__list{ display:grid; align-content:start; }
.crow{
  display:grid; grid-template-columns:104px 1fr auto; gap:clamp(16px,1.8vw,30px);
  align-items:center;
  padding:clamp(16px,2vw,30px) 0;
  border-bottom:1px solid var(--rule-night);
  transition:padding-left .45s cubic-bezier(.2,.7,.3,1);
}
.contrib__list .crow:first-child{ border-top:1px solid var(--rule-night); }
.crow:hover{ padding-left:16px; }
.crow .fig{ background:#1C1C1A; }
.crow .fig__img{ transition:transform 1s cubic-bezier(.2,.7,.3,1); }
.crow:hover .fig__img{ transform:scale(1.07); }
.crow .meta{ color:var(--dim-night); margin-bottom:9px; }
.crow .meta span + span::before{ color:rgba(241,239,233,.3); }
.crow h4{
  font-family:var(--ff-display); font-size:clamp(20px,2.1vw,30px);
  font-weight:500; line-height:1; margin-bottom:9px; letter-spacing:-.01em;
  transition:color .3s;
}
.crow:hover h4{ color:#FF6A55; }
.crow div p:last-child{ font-size:13px; line-height:1.6; color:var(--dim-night); max-width:52ch; }
.crow__no{
  font:500 10px/1 var(--ff-sans); letter-spacing:.2em; color:rgba(241,239,233,.35);
  align-self:start;
}

@media (max-width:960px){
  .contrib__grid{ grid-template-columns:1fr; }
  .crow{ grid-template-columns:76px 1fr auto; }
}

/* ══════════════ BACK ISSUES ══════════════ */

.issues{
  position:relative; overflow:hidden;
  padding:clamp(74px,9vw,140px) 0 clamp(50px,6vw,90px);
  background:var(--paper);
}
.issues__word{
  position:absolute; left:50%; top:clamp(52px,7.5vw,120px);
  transform:translateX(-50%);
  font-family:var(--ff-mast); font-weight:800;
  font-size:clamp(80px,16.5vw,268px); line-height:.72;
  letter-spacing:-.03em; white-space:nowrap;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(11,11,11,.30);
  pointer-events:none; user-select:none;
}
.issues__rubric{ text-align:center; position:relative; margin-bottom:clamp(26px,3.4vw,52px); }

.issues__rail{
  position:relative;
  display:flex; gap:clamp(16px,1.9vw,30px);
  overflow-x:auto; overscroll-behavior-x:contain;
  padding:0 var(--gut) 18px;
  scroll-snap-type:x proximity;
  scrollbar-width:none; cursor:grab;
}
.issues__rail::-webkit-scrollbar{ display:none; }
.issues__rail.is-drag{ cursor:grabbing; scroll-snap-type:none; }
.issue{
  flex:0 0 clamp(210px,20vw,300px); scroll-snap-align:center;
}
.issue .fig{ margin-bottom:14px; box-shadow:0 22px 44px -26px rgba(11,11,11,.55); }
.issue .fig__img{ transition:transform 1.1s cubic-bezier(.2,.7,.3,1); }
.issue:hover .fig__img{ transform:scale(1.05); }
.issue h3{
  font-family:var(--ff-display); font-size:clamp(17px,1.6vw,25px);
  font-weight:500; line-height:1.1; margin-top:8px; letter-spacing:-.01em;
}
.issues__hint{
  text-align:center; margin-top:14px;
  font:500 9.5px/1 var(--ff-sans); letter-spacing:.24em;
  text-transform:uppercase; color:var(--dimmer);
}

/* ══════════════ THE FLOOR ══════════════ */

.floor{ background:var(--night-2); color:var(--on-night); padding-bottom:clamp(20px,3vw,44px); }
.floor__dek{
  margin-top:20px; font-family:var(--ff-display); font-style:italic;
  font-size:clamp(15px,1.6vw,21px); color:var(--dim-night);
}

.collage{
  position:relative;
  max-width:var(--maxw); margin-inline:auto; padding:0 var(--gut);
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:clamp(30px,4.4vw,66px);
  gap:clamp(10px,1.3vw,20px);
}
.collage__i{ margin:0; overflow:hidden; background:#1C1C1A; }
.collage__i .fig__img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.2,.7,.3,1), filter .6s; }
.collage__i:hover .fig__img{ transform:scale(1.06); filter:saturate(1.15); }
.collage__i--a{ grid-column:1/5;  grid-row:1/6; }
.collage__i--b{ grid-column:5/8;  grid-row:1/4; }
.collage__i--c{ grid-column:8/13; grid-row:1/7; }
.collage__i--d{ grid-column:5/8;  grid-row:4/6; }
.collage__i--e{ grid-column:1/4;  grid-row:6/9; }
.collage__i--f{ grid-column:4/8;  grid-row:6/10; }

.collage__stamp{
  font-family:var(--ff-display); font-style:italic;
  font-size:clamp(15px,1.8vw,26px); line-height:1.12;
  align-self:center;
}
.collage__stamp--1{ grid-column:8/11; grid-row:7/9; color:#FF6A55; }
.collage__stamp--2{ grid-column:11/13; grid-row:7/9; color:var(--dim-night); }

@media (max-width:820px){
  .collage{ grid-template-columns:repeat(6,1fr); grid-auto-rows:clamp(34px,9vw,70px); }
  .collage__i--a{ grid-column:1/4; grid-row:1/5; }
  .collage__i--b{ grid-column:4/7; grid-row:1/3; }
  .collage__i--c{ grid-column:4/7; grid-row:3/7; }
  .collage__i--d{ grid-column:1/4; grid-row:5/7; }
  .collage__i--e{ grid-column:1/3; grid-row:7/10; }
  .collage__i--f{ grid-column:3/7; grid-row:7/11; }
  .collage__stamp{ display:none; }
}

.overheard{
  margin-top:clamp(40px,5vw,80px);
  border-top:1px solid var(--rule-night); padding-top:22px; overflow:hidden;
}
.overheard .rubric{ padding:0 var(--gut); color:#FF6A55; margin-bottom:16px; }
.overheard__track{
  display:flex; gap:0; width:max-content;
  animation:slide 46s linear infinite;
}
.overheard q{
  padding:0 clamp(22px,2.6vw,44px); white-space:nowrap; quotes:none;
  font-family:var(--ff-display); font-weight:500;
  font-size:clamp(22px,3.1vw,46px); line-height:1.25;
  color:var(--on-night);
}
.overheard q em{ color:#FF6A55; font-style:italic; }
@media (prefers-reduced-motion:reduce){ .overheard__track{ animation:none } }

/* ══════════════ LETTERS ══════════════ */

.letters{ padding-bottom:clamp(70px,8vw,130px); }
.letters__cols{
  max-width:var(--maxw); margin-inline:auto; padding:0 var(--gut);
  columns:3; column-gap:clamp(26px,3.2vw,54px); column-rule:1px solid var(--rule-hair);
  border-top:1px solid var(--ink); padding-top:clamp(24px,3vw,44px);
}
.letters blockquote{
  break-inside:avoid; margin:0 0 clamp(24px,2.8vw,42px);
}
.letters blockquote p{
  font-family:var(--ff-display); font-size:clamp(16px,1.55vw,22px);
  line-height:1.42; letter-spacing:-.005em; color:var(--ink-soft);
}
.letters blockquote p::before{ content:"“"; }
.letters blockquote p::after{ content:"”"; }
.letters blockquote em{ font-style:italic; color:var(--red); }
.letters cite{
  display:block; margin-top:12px; font-style:normal;
  font:500 9.5px/1 var(--ff-sans); letter-spacing:.2em;
  text-transform:uppercase; color:var(--dim);
}
@media (max-width:900px){ .letters__cols{ columns:2; } }
@media (max-width:600px){ .letters__cols{ columns:1; } }

/* ══════════════ SUBSCRIBE COUPON ══════════════ */

.sub{ padding:0 var(--gut) clamp(72px,8vw,130px); }
.coupon{
  max-width:1240px; margin-inline:auto;
  display:grid; grid-template-columns:1.12fr .88fr;
  background:var(--paper-hi);
  border:2px dashed var(--ink);
  position:relative;
}
.coupon::before,.coupon::after{ /* scissor marks */
  content:"✁"; position:absolute; top:-13px; font-size:19px;
  background:var(--paper); padding:0 8px; color:var(--dim);
}
.coupon::before{ left:26px; }
.coupon::after{ right:26px; transform:scaleX(-1); }

.coupon__l{ padding:clamp(30px,3.6vw,62px); }
.coupon__h{
  font-family:var(--ff-display); font-weight:500;
  font-size:clamp(38px,5.4vw,78px); line-height:.94; letter-spacing:-.02em;
  margin:16px 0 20px;
}
.coupon__h span{ font-family:var(--ff-mast); font-weight:800; font-size:.8em; letter-spacing:-.02em; }
.coupon__dek{ font-size:14.5px; line-height:1.68; color:var(--ink-soft); max-width:46ch; }

.coupon__rates{ margin-top:clamp(24px,2.8vw,42px); border-top:1px solid var(--ink); }
.coupon__rates > div{
  display:grid; grid-template-columns:auto 1fr auto; gap:8px 18px; align-items:baseline;
  padding:15px 0; border-bottom:1px solid var(--rule-hair);
}
.coupon__rates dt{
  font:600 10px/1 var(--ff-sans); letter-spacing:.2em; text-transform:uppercase;
}
.coupon__rates dd{ font-size:12.5px; color:var(--dim); }
.coupon__pr{
  font-family:var(--ff-display) !important; font-size:20px !important;
  color:var(--ink) !important; text-align:right;
}

.coupon__r{
  padding:clamp(30px,3.6vw,62px);
  border-left:2px dashed var(--ink);
  display:grid; align-content:start; gap:15px;
  position:relative;
}
.coupon__no{
  position:absolute; right:clamp(30px,3.6vw,62px); top:clamp(26px,3vw,50px);
  font:500 10px/1 var(--ff-sans); letter-spacing:.2em; color:var(--dimmer);
}
.coupon__no b{ font-family:var(--ff-display); font-size:15px; letter-spacing:0; color:var(--ink); }
.coupon__r label{ display:grid; gap:7px; }
.coupon__r label span{
  font:600 9.5px/1 var(--ff-sans); letter-spacing:.2em; text-transform:uppercase; color:var(--dim);
}
.coupon__r input,.coupon__r select{
  font:400 15px/1.4 var(--ff-sans); color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--ink);
  padding:8px 2px; border-radius:0; -webkit-appearance:none; appearance:none;
  transition:border-color .3s, background .3s;
}
.coupon__r select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230B0B0B' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 2px center; background-size:11px;
}
.coupon__r input:focus,.coupon__r select:focus{
  outline:none; border-color:var(--red); background:rgba(224,35,15,.04);
}
.coupon__btn{
  margin-top:10px; cursor:pointer;
  font:600 11px/1 var(--ff-sans); letter-spacing:.24em; text-transform:uppercase;
  background:var(--ink); color:var(--paper); border:1px solid var(--ink);
  padding:17px 22px;
  transition:background .35s, color .35s, letter-spacing .35s;
}
.coupon__btn:hover{ background:var(--red); border-color:var(--red); letter-spacing:.3em; }
.coupon__fine{ font-size:11.5px; line-height:1.6; color:var(--dim); }
.coupon__ok{
  font:600 10px/1.5 var(--ff-sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--red); border-top:1px solid var(--rule); padding-top:12px;
}

@media (max-width:880px){
  .coupon{ grid-template-columns:1fr; }
  .coupon__r{ border-left:0; border-top:2px dashed var(--ink); }
}

/* ══════════════ COLOPHON ══════════════ */

.colophon{
  background:var(--ink); color:var(--on-night);
  padding:clamp(50px,6vw,90px) var(--gut) 30px;
}
.colophon__mast{ max-width:var(--maxw); margin:0 auto clamp(34px,4vw,64px); text-align:center; }
.colophon__word{
  font-family:var(--ff-mast); font-weight:500;
  font-size:clamp(52px,11.4vw,168px); line-height:.86;
  letter-spacing:.02em;
}
.colophon__sub{
  font:500 10px/1 var(--ff-sans); letter-spacing:.28em; text-transform:uppercase;
  color:var(--dim-night); margin-top:16px;
}
.colophon__grid{
  max-width:var(--maxw); margin-inline:auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(22px,2.6vw,44px);
  border-top:1px solid var(--rule-night); padding-top:clamp(24px,3vw,42px);
  font-size:13px; line-height:1.8; color:var(--dim-night);
}
.colophon__grid .rubric{ color:#FF6A55; margin-bottom:14px; }
.colophon__grid p + p{ margin-top:14px; }
.colophon__grid i{ font-style:italic; color:rgba(241,239,233,.42); font-family:var(--ff-display); }
.colophon__dim{ color:rgba(241,239,233,.36); font-style:italic; }
.colophon__fine{
  max-width:var(--maxw); margin:clamp(38px,4.5vw,74px) auto 0;
  border-top:1px solid var(--rule-night); padding-top:18px;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px;
  font:500 9.5px/1.6 var(--ff-sans); letter-spacing:.18em; text-transform:uppercase;
  color:rgba(241,239,233,.42);
}
@media (max-width:820px){ .colophon__grid{ grid-template-columns:repeat(2,1fr); } }

/* ── reveal ── */
[data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1);
}
[data-reveal].is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; }
}