/* ============================================================
   ATELIER NOIR — Issue N° 07
   Palette: cream paper / deep ink / oxblood accent
   Type: Playfair Display (Didone) · Archivo (grotesk) · Space Mono
   ============================================================ */
:root{
  --paper:#f2ede4;
  --paper-2:#e8e0d2;
  --ink:#0e0e0e;
  --ink-70:rgba(14,14,14,.72);
  --ink-50:rgba(14,14,14,.52);
  --ink-35:rgba(14,14,14,.35);
  --oxblood:#5c1a1a;
  --line:rgba(14,14,14,.18);
  --line-soft:rgba(14,14,14,.09);
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Archivo",system-ui,-apple-system,sans-serif;
  --mono:"Space Mono","SFMono-Regular",ui-monospace,monospace;
  --max:1360px;
  --ease:cubic-bezier(.22,1,.36,1);
  --pad:clamp(20px,5vw,72px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
em{font-style:italic}
h1,h2,h3{font-weight:400}
::selection{background:var(--oxblood);color:var(--paper)}

.mono{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:400;
}

/* ---- grain (editorial paper tooth) ---- */
.grain{
  position:fixed;inset:-50%;z-index:400;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(5) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-2%)}60%{transform:translate(-2%,3%)}80%{transform:translate(3%,1%)}
}

/* ---- custom cursor (reads "Drag" over the gallery) ---- */
/* hidden by default; JS reveals it and hides the native cursor only when it is live,
   so a JS/CDN failure never leaves the visitor without a pointer. */
.cursor{
  position:fixed;top:0;left:0;z-index:500;pointer-events:none;display:none;
  align-items:center;justify-content:center;
  transform:translate(-50%,-50%);will-change:transform;
}
.cursor-on .cursor{display:flex}
.cursor-on,
.cursor-on a,.cursor-on button,.cursor-on input,.cursor-on .gallery-viewport{cursor:none}
.cursor-dot{
  width:9px;height:9px;border-radius:50%;background:var(--ink);
  transition:transform .35s var(--ease),opacity .3s var(--ease);
}
.cursor-label{
  position:absolute;display:flex;align-items:center;justify-content:center;
  width:78px;height:78px;border-radius:50%;
  background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;
  opacity:0;transform:scale(.4);
  transition:opacity .3s var(--ease),transform .4s var(--ease);
}
.cursor.drag .cursor-dot{transform:scale(0);opacity:0}
.cursor.drag .cursor-label{opacity:1;transform:scale(1)}
.cursor.grabbing .cursor-label{transform:scale(.86)}
@media (pointer:coarse){.cursor{display:none}}

/* ---- nav ---- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px var(--pad);
  background:linear-gradient(180deg,var(--paper) 30%,rgba(242,237,228,0));
  transition:background .5s var(--ease),padding .5s var(--ease),border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(242,237,228,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);padding-top:15px;padding-bottom:15px;
}
.brand{
  font-family:var(--serif);font-weight:700;font-size:1.32rem;letter-spacing:.02em;
  font-style:italic;
}
.nav-links{display:flex;gap:clamp(16px,2.6vw,38px);font-family:var(--sans);
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.nav-links a{position:relative;color:var(--ink-70);transition:color .3s}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1px;
  background:var(--oxblood);transition:right .4s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{right:0}
.nav-issue{font-family:var(--mono);font-size:.72rem;letter-spacing:.24em;color:var(--oxblood)}
@media(max-width:760px){
  .nav-issue{display:none}
  .nav-links{gap:16px;font-size:.68rem}
  .nav-links a:nth-child(1),.nav-links a:nth-child(3){display:none} /* keep Editorial + Guide */
}

/* ============================================================
   COVER
   ============================================================ */
.cover{
  min-height:100svh;
  padding:clamp(96px,13vh,150px) var(--pad) clamp(28px,5vh,52px);
  display:flex;flex-direction:column;
  position:relative;
}
.cover-topbar{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding-bottom:16px;border-bottom:1px solid var(--ink);
  color:var(--ink);
}
.cover-topbar .mono:nth-child(2){color:var(--oxblood)}
.masthead{
  font-family:var(--serif);font-weight:800;
  font-size:clamp(3.4rem,15.5vw,13rem);
  line-height:.82;letter-spacing:-.02em;text-align:center;
  margin:clamp(18px,4vh,44px) 0 clamp(24px,5vh,52px);
}
.mh-line{display:block;overflow:hidden;padding:.02em 0}
.mh-word{display:inline-block;will-change:transform}
.mh-word.italic{font-style:italic;font-weight:500}
.cover-body{
  flex:1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(24px,5vw,72px);align-items:stretch;
}
/* cover plate (image-free duotone) */
.cover-plate{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:min(52vh,540px);
  border:1px solid var(--line);
}
.cp-bg{position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(120% 90% at 82% 8%,rgba(242,237,228,.5),transparent 50%),
    linear-gradient(152deg,#5c1a1a 0%,#7a3626 42%,#cbb79c 100%);
}
.cp-ghost{
  position:absolute;right:-.06em;bottom:-.22em;z-index:-1;
  font-family:var(--serif);font-weight:900;font-style:italic;
  font-size:clamp(9rem,22vw,20rem);line-height:.7;color:rgba(242,237,228,.16);
  pointer-events:none;
}
.cp-cap{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:16px 18px;color:var(--paper);
  background:linear-gradient(0deg,rgba(14,14,14,.42),transparent);
}
.cover-lines{display:flex;flex-direction:column;justify-content:center}
.cover-kicker{color:var(--oxblood);margin-bottom:1.4rem}
.cover-line{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.45rem,3vw,2.55rem);line-height:1.16;letter-spacing:-.01em;
  padding:.7em 0;border-bottom:1px solid var(--line-soft);
}
.cover-line:first-of-type{border-top:1px solid var(--line-soft)}
.cover-line em{color:var(--oxblood);font-weight:500}
.cover-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:1.8rem;flex-wrap:wrap}
.barcode{
  --bc:linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 8px,var(--ink) 8px 11px,transparent 11px 12px,var(--ink) 12px 13px,transparent 13px 16px,var(--ink) 16px 18px,transparent 18px 20px);
  width:76px;height:34px;background-image:var(--bc);background-repeat:repeat-x;background-size:20px 100%;opacity:.9;
}
.cover-enter{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
}
.cover-enter i{transition:transform .4s var(--ease)}
.cover-enter:hover i{transform:translateY(4px)}
.cover-enter span{border-bottom:1px solid var(--oxblood);padding-bottom:3px}
.cover-rule{display:none}
@media(max-width:820px){
  .cover-body{grid-template-columns:1fr;gap:clamp(20px,5vw,40px)}
  .cover-plate{min-height:44vh;order:2}
  .cover-lines{order:1}
}
@media(max-width:540px){
  .cover-topbar .mono:nth-child(2){display:none}
  .cover{padding-top:clamp(84px,12vh,120px)}
}

/* ============================================================
   THE LOOKS — horizontal drag gallery
   ============================================================ */
.gallery{
  position:relative;
  padding:clamp(40px,7vh,88px) 0 clamp(24px,4vh,44px);
  border-top:1px solid var(--ink);
  overflow:hidden;
}
.gallery-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:0 var(--pad) clamp(28px,4vh,44px);
}
.gallery-head .kicker{color:var(--oxblood)}
.gallery-title{
  font-family:var(--serif);font-weight:500;font-style:italic;
  font-size:clamp(2.6rem,7vw,5.6rem);line-height:.92;letter-spacing:-.015em;
}
.gallery-hint{color:var(--ink-50);display:flex;align-items:center;gap:10px}
.hint-arrow{font-size:1.1em;color:var(--oxblood)}

.gallery-viewport{
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
  cursor:grab;touch-action:pan-x;
  -webkit-overflow-scrolling:touch;
}
.gallery-viewport::-webkit-scrollbar{display:none}
.gallery-viewport.dragging{cursor:grabbing}
.gallery-viewport.dragging,.gallery-viewport.dragging *{user-select:none}
.gallery-viewport:focus-visible{outline:2px solid var(--oxblood);outline-offset:-4px}

.gallery-track{
  display:flex;gap:clamp(16px,2.4vw,34px);
  padding:0 var(--pad);
  height:min(74vh,720px);
  width:max-content;
}

.plate{
  position:relative;flex:0 0 auto;
  width:clamp(280px,72vw,760px);
  height:100%;
  overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;
  padding:clamp(24px,3.2vw,46px);
  color:var(--paper);
  border:1px solid rgba(14,14,14,.2);
}
.plate-bg{
  position:absolute;inset:-80px;z-index:-3;will-change:transform;
  background:
    radial-gradient(130% 80% at 78% 6%,rgba(242,237,228,.34),transparent 46%),
    linear-gradient(155deg,var(--a) 0%,var(--b) 118%);
}
.plate-scrim{
  position:absolute;inset:0;z-index:-2;
  background:linear-gradient(0deg,rgba(10,10,10,.5) 0%,rgba(10,10,10,.08) 42%,transparent 68%);
}
.plate-ghost{
  position:absolute;left:-.04em;top:-.16em;z-index:-1;
  font-family:var(--serif);font-weight:900;font-style:italic;
  font-size:clamp(14rem,40vw,34rem);line-height:.66;
  color:rgba(242,237,228,.12);pointer-events:none;user-select:none;
}
.plate-index{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  color:var(--paper);
}
.pi-no{letter-spacing:.24em}
.pi-of{opacity:.72}
.plate-fg{margin-top:auto;will-change:transform;max-width:34ch}
.plate-title{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(2.6rem,7vw,5.4rem);line-height:.94;letter-spacing:-.015em;
  text-shadow:0 2px 30px rgba(0,0,0,.28);
}
.plate-note{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.05rem,1.7vw,1.4rem);line-height:1.3;
  margin:.7rem 0 1.2rem;color:rgba(242,237,228,.94);max-width:26ch;
}
.plate-credits{
  font-size:.63rem;letter-spacing:.16em;line-height:1.7;color:rgba(242,237,228,.8);
  border-top:1px solid rgba(242,237,228,.28);padding-top:.9rem;
}

/* gallery progress */
.gallery-progress{
  display:flex;align-items:center;gap:16px;
  padding:clamp(22px,3vh,34px) var(--pad) 0;max-width:520px;
}
.gp-index,.gp-total{color:var(--ink-70);font-size:.74rem;letter-spacing:.18em}
.gp-rail{flex:1;height:1px;background:var(--line);position:relative;overflow:hidden}
.gp-fill{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--oxblood);
  transform:scaleX(.16);transform-origin:left;will-change:transform}

/* ============================================================
   EDITORIAL PULL-TEXT SPREAD
   ============================================================ */
.editorial{
  padding:clamp(90px,17vh,200px) var(--pad);
  text-align:center;border-top:1px solid var(--ink);
  max-width:var(--max);margin:0 auto;
}
.ed-folio{color:var(--oxblood);margin-bottom:clamp(28px,5vh,54px)}
.ed-quote{font-family:var(--serif);font-weight:400;
  font-size:clamp(1.7rem,5.2vw,4rem);line-height:1.14;letter-spacing:-.015em;}
.ed-quote p{margin:.04em 0}
.ed-quote em{font-style:italic;color:var(--oxblood)}
.ed-sign{color:var(--ink-50);margin-top:clamp(30px,5vh,56px)}

/* ============================================================
   CONTENTS / MASTHEAD FOOTER
   ============================================================ */
.contents{
  border-top:1px solid var(--ink);
  padding:clamp(56px,9vh,110px) var(--pad) clamp(28px,4vh,44px);
  background:var(--paper-2);
}
.contents-grid{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:1.1fr 1fr 1.1fr;gap:clamp(28px,5vw,72px);
}
.col-h{color:var(--oxblood);padding-bottom:16px;margin-bottom:20px;border-bottom:1px solid var(--ink)}
.toc{list-style:none}
.toc li{border-bottom:1px solid var(--line-soft)}
.toc a{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:14px;padding:14px 0}
.toc-n{color:var(--ink-50);font-size:.68rem}
.toc-t{font-family:var(--serif);font-size:clamp(1.15rem,2vw,1.6rem);transition:color .3s,transform .4s var(--ease)}
.toc-p{color:var(--ink-35);font-size:.66rem}
.toc a:hover .toc-t{color:var(--oxblood);transform:translateX(6px)}
.crew{list-style:none}
.crew li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:13px 0;border-bottom:1px solid var(--line-soft)}
.crew-role{color:var(--ink-50);font-size:.64rem}
.crew-name{font-family:var(--serif);font-size:1.08rem}
.colophon-text{color:var(--ink-70);font-size:.94rem;line-height:1.65;margin-bottom:1.8rem;max-width:40ch}
.subscribe label{display:block;color:var(--ink-50);margin-bottom:12px}
.sub-field{display:flex;align-items:center;border-bottom:1px solid var(--ink)}
.sub-field input{flex:1;background:none;border:0;color:var(--ink);font-family:var(--serif);
  font-size:1.05rem;padding:9px 0;outline:none}
.sub-field input::placeholder{color:var(--ink-35);font-style:italic}
.sub-field button{background:none;border:0;color:var(--oxblood);font-size:1.4rem;cursor:pointer;padding:4px 2px}
.contents-foot{
  max-width:var(--max);margin:clamp(48px,7vh,86px) auto 0;
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-top:28px;border-top:1px solid var(--ink);
}
.foot-brand{font-family:var(--serif);font-weight:800;font-style:italic;
  font-size:clamp(2rem,7vw,4.2rem);line-height:.9;letter-spacing:-.01em}
.foot-meta{display:flex;flex-direction:column;gap:8px;text-align:right}
.foot-meta .mono{color:var(--ink-50)}
.foot-meta a{color:var(--ink);border-bottom:1px solid var(--oxblood);padding-bottom:2px}
@media(max-width:820px){
  .contents-grid{grid-template-columns:1fr;gap:36px}
  .foot-meta{text-align:left}
}

/* ============================================================
   REVEALS (JS-gated so a CDN/JS failure never hides content)
   ============================================================ */
.js .reveal{opacity:0;transform:translateY(24px)}
.js .reveal.is-in{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1.1s var(--ease)}

/* cover intro — CSS/compositor driven via .loaded */
.js .cover .mh-word{transform:translateY(112%)}
.cover.loaded .mh-word{transform:translateY(0);transition:transform 1.2s var(--ease)}
.cover.loaded .reveal{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.cover .mh-line:nth-child(1) .mh-word{transition-delay:.14s}
.cover .mh-line:nth-child(2) .mh-word{transition-delay:.26s}
.cover .cover-plate{transition-delay:.34s}
.cover .cover-kicker{transition-delay:.42s}
.cover .cover-line:nth-of-type(1){transition-delay:.5s}
.cover .cover-line:nth-of-type(2){transition-delay:.58s}
.cover .cover-line:nth-of-type(3){transition-delay:.66s}
.cover .cover-foot{transition-delay:.76s}

/* ---- keyboard focus ---- */
a:focus-visible,button:focus-visible,input:focus-visible,.gallery-viewport:focus-visible{
  outline:2px solid var(--oxblood);outline-offset:3px;border-radius:1px;
}

/* ============================================================
   REDUCED MOTION — force content visible, gallery becomes a stack
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .reveal,.js .reveal,.js .reveal.is-in{opacity:1!important;transform:none!important;transition:none!important}
  .mh-word,.js .cover .mh-word{transform:none!important}
  .grain{animation:none}
  .cursor{display:none!important}
  body{cursor:auto}
  .plate-bg,.plate-fg{transform:none!important}

  .gallery{overflow:visible}
  .gallery-viewport{overflow:visible;cursor:auto}
  .gallery-track{flex-direction:column;height:auto;width:auto;gap:clamp(16px,3vw,28px)}
  .plate{width:100%;height:auto;min-height:66vh}
  .gallery-hint{display:none}
  .gallery-progress{display:none}
}