/* Suite 1920 — Newsstand. Dark maroon / cream serif / gold, same house as
   the mockup Jeff approved. Loaded after the shared page_head() styles. */
.ns{
  --maroon-950:#150507; --maroon-900:#20090d; --maroon-850:#2a0e13;
  --maroon-800:#35121a; --maroon-700:#4a1c26;
  --cream:#f2e7d2; --cream-dim:#cdbd9d; --cream-faint:#9d8b6d;
  --gold:#c6a15b; --gold-bright:#e8cb85; --gold-deep:#8f6f33;
  --paper:#ece1cb; --paper-dim:#ddd0b4; --ink:#221114;
  --wood-1:#40261a; --wood-2:#2c1a10;
}
.ns-intro{text-align:center;color:var(--cream-dim);max-width:640px;margin:6px auto 22px}
.ns-section{
  text-align:center;color:var(--gold);letter-spacing:.4em;font-weight:normal;
  font-size:1.35rem;margin:38px 0 18px;text-indent:.4em;
}
.ns-section::before,.ns-section::after{content:"";display:inline-block;vertical-align:middle;width:64px;height:1px;background:var(--gold-deep);margin:0 16px}

/* ------------------------------------------------------------------ rack */
.rack-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:26px 20px;margin:10px 0 6px}
.rack-item{text-decoration:none;color:var(--cream);display:block}
.rack-item .mag-cover{transition:transform .25s ease,box-shadow .25s ease}
.rack-item:hover .mag-cover{transform:translateY(-6px);box-shadow:0 18px 34px rgba(0,0,0,.55)}
.rack-cap{text-align:center;margin-top:10px}
.rack-title{display:block;font-size:1.02rem}
.rack-vol{display:block;color:var(--cream-faint);font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;margin-top:2px}
.rack-adults{display:inline-block;margin-top:6px;border:1px solid var(--gold);color:var(--gold-bright);border-radius:999px;padding:2px 10px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}

/* ---------------------------------------------------------------- covers */
.mag-cover{
  position:relative;aspect-ratio:1000/1393;overflow:hidden;border-radius:3px;
  background:radial-gradient(120% 90% at 50% 0%,var(--maroon-700),var(--maroon-850) 55%,var(--maroon-900));
  border:1px solid rgba(198,161,91,.45);
  box-shadow:0 10px 26px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.35);
  color:var(--cream);user-select:none;
}
.mag-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none}
.mag-cover .cover-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,3,5,.58) 0%,rgba(10,3,5,0) 26%,rgba(10,3,5,0) 62%,rgba(10,3,5,.62) 100%)}
.mag-cover.typo .cover-shade{background:radial-gradient(90% 60% at 50% 38%,rgba(198,161,91,.14),rgba(0,0,0,0) 70%)}
.cover-masthead{
  position:absolute;top:0;left:0;right:0;text-align:center;padding:9% 6% 0;
  font-size:clamp(.95rem,1.55cqw,1.5rem);letter-spacing:.32em;text-indent:.32em;color:var(--cream);
  border-bottom:1px solid rgba(198,161,91,.0);
}
.mag-cover{container-type:inline-size}
.cover-masthead::after{content:"";display:block;width:38%;height:1px;background:var(--gold);margin:8px auto 0;opacity:.85}
.cover-mid{position:absolute;left:8%;right:8%;top:34%;text-align:center}
.cover-title{font-size:clamp(1.3rem,7cqw,2.5rem);line-height:1.12;color:var(--cream);text-shadow:0 2px 14px rgba(0,0,0,.65)}
.mag-cover.typo .cover-title{color:var(--gold-bright)}
.cover-volume{margin-top:10px;color:var(--gold-bright);letter-spacing:.3em;text-indent:.3em;font-size:clamp(.62rem,2.6cqw,.85rem);text-transform:uppercase}
.cover-starlet{
  position:absolute;left:0;right:0;bottom:0;text-align:center;padding:0 6% 8%;
  color:var(--cream);
}
.cover-starlet .cs-label{display:block;letter-spacing:.34em;text-indent:.34em;font-size:clamp(.8rem,4.4cqw,1.35rem);color:var(--gold-bright)}
.cover-starlet .cs-no{display:block;font-size:clamp(2rem,13cqw,4.2rem);line-height:1.02;color:var(--cream);text-shadow:0 3px 16px rgba(0,0,0,.7)}
.cover-starlet .cs-name{font-size:clamp(1.25rem,8.2cqw,2.7rem);line-height:1.1;letter-spacing:.13em;text-transform:uppercase}

/* No long-press save callout on newsstand images (mobile right-click). */
.ns img{-webkit-touch-callout:none}

/* ------------------------------------------------------- sealed wrap */
/* A gated issue sits on the rack bagged, like the old nude mags: only the
   top quarter of the real cover shows (a server-cropped teaser slice —
   masthead, title, the top of the photo); the matte-black wrap covers the
   lower three-quarters and carries the 21+ CONTENT stamp. */
.mag-cover.sealed{background:#080809}
.mag-cover.sealed img.seal-tease{
  inset:auto;top:0;left:0;width:100%;height:25%;object-fit:cover;
}
.seal-wrap{
  position:absolute;left:0;right:0;top:25%;bottom:0;
  background:
    linear-gradient(115deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 42%),
    linear-gradient(168deg,#17171a 0%,#060607 58%,#101013 100%);
  border-top:1px solid rgba(198,161,91,.4);
  box-shadow:inset 0 16px 26px -18px rgba(255,255,255,.16), inset 0 -34px 54px -30px rgba(0,0,0,.9);
}
.mag-cover.sealed .cover-mid{top:31%;z-index:2}
.mag-cover.sealed .cover-starlet{z-index:2}
.seal-stamp{
  position:absolute;left:50%;top:57%;z-index:2;
  transform:translate(-50%,-50%) rotate(-6deg);
  border:2px solid #a8402c;
  box-shadow:inset 0 0 0 1px rgba(168,64,44,.55), 0 2px 10px rgba(0,0,0,.5);
  border-radius:3px;padding:.6em 1em .65em;
  color:var(--gold-bright);
  font-size:clamp(.72rem,4.6cqw,1.3rem);font-weight:bold;
  letter-spacing:.3em;text-transform:uppercase;white-space:nowrap;
  text-align:center;
  background:rgba(8,8,9,.55);
}
.seal-stamp .stamp-main{display:block;line-height:1.15;text-indent:.3em}
.seal-stamp .stamp-sub{
  display:block;
  margin-top:.55em;padding-top:.55em;
  border-top:1px solid rgba(198,161,91,.55);
  font-size:.54em;font-weight:normal;line-height:1.2;
  letter-spacing:.4em;text-indent:.4em;
  color:var(--cream);
}

/* ------------------------------------------------------------------ gate */
.gate-wrap{display:flex;justify-content:center;padding:12px 0 4px}
.gate-card{
  background:var(--maroon-900);border:1px solid rgba(198,161,91,.5);border-radius:12px;
  max-width:520px;width:100%;padding:30px 28px;text-align:center;
  box-shadow:0 18px 40px rgba(0,0,0,.5);
}
.gate-brand{letter-spacing:.35em;text-indent:.35em;color:var(--cream);font-size:1.05rem}
.gate-brand::after{content:"";display:block;width:110px;height:2px;background:var(--gold);margin:12px auto 0}
.gate-title{color:var(--gold-bright);font-weight:normal;letter-spacing:.14em;margin:18px 0 4px}
.gate-issue{color:var(--cream-dim);margin:0 0 8px}
.gate-copy{color:var(--cream-dim);max-width:420px;margin:10px auto}
.gate-fields{display:flex;gap:12px;justify-content:center;margin:16px 0 6px}
.gate-fields label{flex:0 1 110px;text-align:left}
.gate-fields input{max-width:none;text-align:center}
.gate-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.gold-btn{
  display:inline-block;background:var(--gold);color:#160a0e;border:1px solid var(--gold);
  border-radius:6px;padding:10px 20px;font-size:1rem;cursor:pointer;text-decoration:none;
  font-family:inherit;font-weight:bold;
}
.gold-btn.ghost{background:transparent;color:var(--gold-bright);font-weight:normal}

/* ---------------------------------------------------------------- reader */
.reader-top{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:12px;flex-wrap:wrap}
.reader-crumb{color:var(--gold-bright);text-decoration:none;letter-spacing:.08em}
.reader-name{color:var(--cream-faint);letter-spacing:.22em;text-transform:uppercase;font-size:.85rem}
.table-scene{
  border-radius:12px;padding:52px 16px 44px;text-align:center;
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.16) 0 2px,rgba(0,0,0,0) 2px 148px),
    linear-gradient(160deg,var(--wood-1),var(--wood-2) 70%);
  box-shadow:inset 0 0 90px rgba(0,0,0,.55);
}
.closed-mag{width:min(330px,76vw);margin:0 auto;cursor:pointer;transition:transform .25s ease}
.closed-mag:hover{transform:translateY(-6px) rotate(-.4deg)}
.open-prompt{margin-top:16px;color:var(--gold-bright);letter-spacing:.3em;text-indent:.3em;font-size:.85rem;text-transform:uppercase}
.book-zone{padding:8px 0 0;overflow-x:clip}
/* pan-y: vertical page scroll still starts on the book, but a horizontal
   swipe is never claimed by the browser as a scroll/overscroll gesture
   (which can swallow the turn or even navigate history) — it always
   reaches the reader's own swipe handlers. */
.book{position:relative;width:min(980px,94vw);margin:0 auto;aspect-ratio:2000/1393;perspective:2200px;touch-action:pan-y}

/* The static base spread: two half-page slots the leaves turn over. */
.spread{position:absolute;inset:0;display:flex;box-shadow:0 22px 48px rgba(0,0,0,.55);border-radius:4px}
.spread[hidden]{display:none}
.page-slot{
  width:50%;height:100%;position:relative;overflow:hidden;background:var(--paper);
  padding:14px;display:flex;min-width:0;
}
.page-slot.left{border-right:1px solid rgba(34,17,20,.14);border-radius:4px 0 0 4px;box-shadow:inset -26px 0 30px -22px rgba(34,17,20,.5)}
.page-slot.right{border-radius:0 4px 4px 0;box-shadow:inset 26px 0 30px -22px rgba(34,17,20,.5)}
.page-slot.endpaper{background:linear-gradient(120deg,var(--maroon-900),var(--maroon-950));box-shadow:inset -26px 0 30px -22px rgba(0,0,0,.55)}
.pg.coverpage{display:block}
.pg.coverpage .mag-cover{width:100%;height:100%;aspect-ratio:auto}

/* A landscape photograph across the spread: each half holds a stage the size
   of the full spread's photo box, offset so the halves meet seamlessly. */
.pg.wide-half{overflow:visible}
.wide-stage{position:absolute;top:0;bottom:0;width:calc(200% + 28px)}
.pg.wide-half.left .wide-stage{left:0}
.pg.wide-half.right .wide-stage{left:calc(-100% - 28px)}
.wide-stage img{width:100%;height:100%;object-fit:contain;display:block;user-select:none;-webkit-user-drag:none}

/* The turning leaf: half the book, hinged on the spine. */
.flip-sheet{
  position:absolute;top:0;left:50%;width:50%;height:100%;z-index:6;
  transform-origin:left center;transform-style:preserve-3d;pointer-events:none;
}
.flip-sheet .face{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  overflow:hidden;background:var(--paper);padding:14px;display:flex;min-width:0;
}
.flip-sheet .face.front{border-radius:0 4px 4px 0;box-shadow:inset 26px 0 30px -22px rgba(34,17,20,.5)}
.flip-sheet .face.back{transform:rotateY(180deg);border-radius:4px 0 0 4px;box-shadow:inset -26px 0 30px -22px rgba(34,17,20,.5)}

/* The cover leaf: the whole cover swings open on the spine. */
.cover-leaf{
  position:absolute;top:0;right:0;width:50%;height:100%;z-index:7;
  transform-origin:left center;transform-style:preserve-3d;
  transition:transform .85s cubic-bezier(.3,.65,.3,1);
}
.cover-leaf[hidden]{display:none}
.cover-leaf.noanim{transition:none !important}
.cover-leaf .face{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  overflow:hidden;background:var(--paper);padding:14px;display:flex;min-width:0;
}
.cover-leaf .face.front{border-radius:0 4px 4px 0;box-shadow:inset 26px 0 30px -22px rgba(34,17,20,.45)}
.cover-leaf .face.back{transform:rotateY(180deg);border-radius:4px 0 0 4px;box-shadow:inset -26px 0 30px -22px rgba(34,17,20,.45)}

/* Phones: one page at a time, turned on the single stage. The stage clips
   the turning leaf at the book's edge (the leaf folds over the spine and
   off the stage, exactly like the desktop sheet folds onto the left page)
   and carries the book's drop shadow itself, so the leaf can be clipped
   without clipping the shadow away. */
.single-stage{
  position:absolute;inset:0;perspective:1500px;overflow:hidden;border-radius:4px;
  box-shadow:0 22px 48px rgba(0,0,0,.55);
}
.single-stage[hidden]{display:none}
.single-base,.flip-inner{position:absolute;inset:0}
.single-base{
  background:var(--paper);border-radius:4px;overflow:hidden;
  padding:14px;display:flex;
  box-shadow:inset 0 0 0 1px rgba(120,90,40,.18);
}
/* The phone leaf hinges on the spine (left edge), like every other leaf in
   the book — without this it defaults to the centre and the page spins
   like a revolving door instead of turning like a book page. */
.flip-inner{transform-style:preserve-3d;transform-origin:left center;z-index:3}
.flip-inner.noanim{transition:none !important}
.sface{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  overflow:hidden;background:var(--paper);border-radius:4px;
  padding:14px;display:flex;min-width:0;
  box-shadow:inset 20px 0 26px -20px rgba(34,17,20,.4), inset 0 0 0 1px rgba(120,90,40,.18);
}
.sface.back{transform:rotateY(180deg)}
.pg{flex:1;display:flex;min-height:0;min-width:0;position:relative}
.pg.img img{width:100%;height:100%;object-fit:contain;display:block;-webkit-user-drag:none;user-select:none}
.pg.plate{
  flex-direction:column;align-items:center;justify-content:center;text-align:center;
  color:var(--ink);padding:26px 22px;
}
.plate-brand{letter-spacing:.32em;text-indent:.32em;font-size:.78rem;color:var(--gold-deep)}
.plate-brand::after{content:"";display:block;width:56px;height:1px;background:var(--gold);margin:10px auto 0}
.pg.plate h3{font-weight:normal;font-size:clamp(1.25rem,3.4vw,2rem);margin:16px 0 8px;color:var(--ink)}
.plate-line{color:#4a3638;max-width:34ch;line-height:1.65;white-space:pre-wrap}
.soc-rows{margin-top:14px;display:flex;flex-direction:column;gap:10px;width:min(340px,90%)}
.soc-row{
  display:flex;justify-content:space-between;gap:12px;border:1px solid var(--gold-deep);
  border-radius:8px;padding:10px 14px;text-decoration:none;color:var(--ink);background:rgba(198,161,91,.1);
}
.soc-label{letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;color:var(--gold-deep)}
.soc-url{font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--gold);
  background:rgba(21,5,7,.75);color:var(--gold-bright);font-size:1.6rem;line-height:1;cursor:pointer;
}
.nav-arrow.prev{left:-8px}.nav-arrow.next{right:-8px}
.nav-arrow:disabled{opacity:.3;cursor:default}
.reader-bar{display:flex;justify-content:space-between;align-items:center;gap:14px;width:min(980px,94vw);margin:16px auto 0;flex-wrap:wrap}
.page-indicator{color:var(--cream-dim);letter-spacing:.12em}
.reader-hint{text-align:center}

@media (max-width:760px){
  .book{aspect-ratio:1000/1393;width:min(520px,94vw)}
  .cover-leaf{width:100%}
  .rack-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .nav-arrow{width:40px;height:40px}
  .gate-fields{flex-wrap:wrap}
}

/* ------------------------------------------- consent clause (socials) */
.soc-consent{
  margin-top:18px;max-width:38ch;
  font-size:.78rem;line-height:1.6;font-style:italic;color:#6d5960;
}

/* ------------------------------------------- studio links page (closer) */
/* System-generated last page of starlet + client issues: deep maroon
   colophon, the approved logo on its ivory plate, tagline, five links,
   and the hello@ consultation line. */
.pg.plate.studio{
  background:linear-gradient(168deg,var(--maroon-850) 0%,var(--maroon-950) 62%,var(--maroon-900) 100%);
  color:var(--cream);
}
.studio-logo-wrap{
  background:#f4efe4;border:1px solid var(--gold-deep);border-radius:10px;
  padding:12px 18px;width:min(430px,94%);
  box-shadow:0 6px 24px rgba(0,0,0,.45);
}
.studio-logo{display:block;width:100%;height:auto}
.studio-tag{
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(1.35rem,3.6vw,2.1rem);color:var(--gold-bright);
  margin:18px 0 0;line-height:1.2;
}
.pg.plate.studio .plate-line{color:var(--cream);margin-top:6px}
.pg.plate.studio .soc-row{
  border-color:var(--gold-deep);color:var(--cream);
  background:rgba(198,161,91,.12);
}
.pg.plate.studio .soc-label{color:var(--gold-bright)}
.studio-mail{margin-top:18px;font-size:.92rem;color:var(--cream);max-width:40ch;line-height:1.55}
.studio-mail a{color:var(--gold-bright);text-decoration:none;border-bottom:1px solid var(--gold-deep)}

@media (prefers-reduced-motion: reduce){
  .cover-leaf,.flip-inner{transition-duration:.01ms !important}
}