/* =====================================================================
   TG!X JOURNAL — SHARED STYLESHEET
   ---------------------------------------------------------------------
   This is the single design system for every Journal volume.
   It is extracted verbatim from Volume IV (the design standard), so every
   volume that links to this file looks and behaves identically.

   EDIT COLOURS / FONTS:  the :root block, just below.
   DO NOT rename class names unless you also update the volume HTML files.
   ===================================================================== */

:root{
  --bg:#0e2a22;
  --bg-2:#0c241d;
  --ink:#f4f1e9;
  --gold:#c9a96a;
  --sage:#a9b3aa;
  --line:rgba(244,241,233,0.14);
  --line-soft:rgba(244,241,233,0.08);
  --pad:80px;
  --maxw:1280px;
  --measure:62ch;
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter",-apple-system,system-ui,"Segoe UI",sans-serif;
  font-weight:300;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

::selection{background:var(--gold);color:var(--bg);}

a{color:inherit;text-decoration:none;}

/* generic gold-italic emphasis word (used in hero h1 + manifesto) */
.hl{font-style:italic;color:var(--gold);}

/* ---------- scroll loader bar ---------- */
.loader-bar{
  position:fixed;top:0;left:0;height:2px;width:100%;
  background:rgba(244,241,233,0.12);z-index:200;
}
.loader-bar span{
  display:block;height:100%;width:0%;
  background:var(--gold);transition:width .1s linear;
}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:120;
  display:flex;align-items:center;justify-content:space-between;
  padding:24px var(--pad);
  font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;font-weight:400;
  border-bottom:1px solid transparent;
  transition:background .6s ease,border-color .6s ease,backdrop-filter .6s ease;
}
.nav.scrolled{
  background:rgba(11,33,26,0.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.nav .brand{font-weight:500;letter-spacing:.22em;}
.nav .breadcrumb{color:var(--sage);font-size:10.5px;}
.nav .breadcrumb b{color:var(--ink);font-weight:500;}
@media(max-width:720px){ .nav .breadcrumb{display:none;} }

/* ---------- layout helpers ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}
section{position:relative;}

.sec-no{
  display:block;
  font-family:"Fraunces",Georgia,serif;
  font-weight:300;font-size:16px;letter-spacing:.02em;
  color:var(--gold);margin-bottom:34px;
}

h1,h2,h3,.display{
  font-family:"Fraunces",Georgia,"Times New Roman",serif;
  font-weight:300;
}

h2{
  font-size:clamp(1.9rem,4.4vw,2.6rem);
  line-height:1.3;letter-spacing:-0.01em;
  max-width:18ch;
}
h2.wide{max-width:24ch;}

.lead{
  font-family:"Fraunces",Georgia,serif;font-weight:300;
  font-size:clamp(1.3rem,2.3vw,1.6rem);
  line-height:1.55;color:var(--sage);
  max-width:46ch;margin-top:30px;
}

p.body{
  font-size:1.0625rem;line-height:1.78;
  color:rgba(244,241,233,0.82);
  max-width:var(--measure);margin-top:1.4em;
}
p.body.first{margin-top:40px;}
p.body em{color:var(--ink);font-style:italic;}
p.body strong{color:var(--ink);font-weight:500;}

/* ---------- reveal animation ---------- */
.reveal{
  opacity:0;transform:translateY(34px);
  transition:opacity 1.1s cubic-bezier(.22,1,.36,1),transform 1.1s cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform;
}
.reveal.in{opacity:1;transform:none;}
.d1{transition-delay:.08s;} .d2{transition-delay:.16s;}
.d3{transition-delay:.24s;} .d4{transition-delay:.32s;}
.d5{transition-delay:.40s;} .d6{transition-delay:.48s;}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* ---------- opening quote ---------- */
.opening{
  min-height:78vh;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:140px var(--pad) 90px;
  border-bottom:1px solid var(--line-soft);
}
.opening blockquote{
  font-family:"Fraunces",Georgia,serif;font-weight:300;font-style:italic;
  font-size:clamp(1.7rem,4.2vw,3rem);line-height:1.36;letter-spacing:-0.01em;
  max-width:20ch;
}
.opening cite{
  display:block;margin-top:38px;font-style:normal;
  font-family:"Inter",sans-serif;font-size:11.5px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold);
}

/* ---------- hero ---------- */
.hero{
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding:160px var(--pad) 80px;position:relative;overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(120% 90% at 78% 18%,rgba(201,169,106,0.16),transparent 60%),
    radial-gradient(100% 80% at 12% 100%,rgba(169,179,170,0.10),transparent 55%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);
}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 50% at 70% 30%,rgba(244,241,233,0.05),transparent 70%);
  mix-blend-mode:screen;
}
.hero-inner{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;width:100%;}
.hero-kicker{
  font-family:"Inter",sans-serif;font-size:11.5px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--gold);margin-bottom:8px;
}
.hero-kicker .vol{color:var(--sage);}
.hero-chapter{
  font-family:"Inter",sans-serif;font-size:11px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--sage);margin-bottom:48px;
}
.hero h1{
  font-size:clamp(2.5rem,7.4vw,6.6rem);
  line-height:0.99;letter-spacing:-0.025em;max-width:16ch;
}
.hero h1 .hl{font-style:italic;color:var(--gold);}
.hero-sub{
  font-family:"Fraunces",Georgia,serif;font-weight:300;
  font-size:clamp(1.25rem,2.3vw,1.6rem);line-height:1.5;
  color:var(--sage);max-width:30ch;margin-top:44px;
}
.hero-sub span{display:block;}
.hero-sub .accent{color:var(--ink);font-style:italic;}
.hero-meta{
  display:flex;gap:28px;align-items:center;flex-wrap:wrap;
  margin-top:64px;font-family:"Inter",sans-serif;font-size:11px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--sage);
}
.hero-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--gold);}
.scroll-hint{display:flex;align-items:center;gap:14px;}
.scroll-hint .ln{width:46px;height:1px;background:var(--line);position:relative;overflow:hidden;}
.scroll-hint .ln::after{content:"";position:absolute;inset:0;width:40%;background:var(--gold);animation:slide 2.4s ease-in-out infinite;}
@keyframes slide{0%{transform:translateX(-110%);}60%,100%{transform:translateX(280%);}}

/* ---------- generic section ---------- */
.chapter{padding:130px 0;border-top:1px solid var(--line-soft);}
.chapter.flush{border-top:none;}

/* ---------- figure / image placeholders ---------- */
figure.plate{margin:96px 0 0;}
figure.plate.full{margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad));}
.plate-box{
  position:relative;width:100%;aspect-ratio:16/7;
  background:
    radial-gradient(120% 140% at 75% 25%,rgba(201,169,106,0.14),transparent 60%),
    linear-gradient(135deg,rgba(244,241,233,0.05),rgba(12,36,29,0.4));
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;text-align:center;
  overflow:hidden;
}
.plate-box::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,rgba(244,241,233,0.018) 0 2px,transparent 2px 7px);
}
.plate-label{
  position:relative;z-index:1;font-family:"Inter",sans-serif;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--sage);padding:0 24px;max-width:34ch;line-height:1.9;
}
.plate-label .mk{color:var(--gold);display:block;margin-bottom:10px;font-size:10px;}
figcaption{
  margin-top:18px;font-family:"Fraunces",serif;font-style:italic;
  font-weight:300;color:var(--sage);font-size:1rem;
}
.plate.tall .plate-box{aspect-ratio:4/5;}

/* ---------- real photograph plate ---------- */
.plate-box.plate-photo{aspect-ratio:1131/1429;background:#05130e;}
.plate-box.plate-photo::before{display:none;}
.plate-box.plate-photo img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
.plate-box.plate-photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 120px 20px rgba(5,19,14,0.55);
}

/* ---------- bullet limitations row ---------- */
.tagrow{
  display:flex;flex-wrap:wrap;gap:14px 18px;margin-top:46px;max-width:64ch;
}
.tag{
  font-family:"Inter",sans-serif;font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sage);
  padding:9px 16px;border:1px solid var(--line);border-radius:40px;
}

/* ---------- pull statement ---------- */
.pull{
  padding:120px 0;text-align:center;border-top:1px solid var(--line-soft);
}
.pull p{
  font-family:"Fraunces",serif;font-weight:300;font-style:italic;
  font-size:clamp(1.6rem,4vw,2.7rem);line-height:1.4;letter-spacing:-0.01em;
  max-width:24ch;margin:0 auto;
}
.pull p .g{color:var(--gold);font-style:normal;}

/* ---------- experiments ---------- */
.exp-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:1px;margin-top:80px;background:var(--line-soft);
  border:1px solid var(--line-soft);
}
.exp{
  background:var(--bg);padding:54px 48px 60px;
  display:flex;flex-direction:column;gap:18px;
  transition:background .5s ease;
}
.exp:hover{background:#10302695;}
.exp .ix{
  font-family:"Fraunces",serif;font-size:13px;letter-spacing:.04em;
  color:var(--gold);
}
.exp .q{
  font-family:"Fraunces",serif;font-weight:300;font-style:italic;
  font-size:1.45rem;line-height:1.4;color:var(--ink);max-width:24ch;
}
.exp .name{
  font-family:"Inter",sans-serif;font-size:11px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--sage);
}
.exp .desc{
  font-size:1rem;line-height:1.72;color:rgba(244,241,233,0.74);max-width:38ch;
}
@media(max-width:860px){ .exp-grid{grid-template-columns:1fr;} }

/* ---------- numbered editorial list ---------- */
.reasons{margin-top:70px;max-width:72ch;}
.reason{
  display:flex;gap:30px;padding:28px 0;border-top:1px solid var(--line-soft);
  align-items:baseline;
}
.reason:first-child{border-top:none;}
.reason .rn{
  font-family:"Fraunces",serif;font-size:14px;color:var(--gold);
  min-width:34px;flex-shrink:0;
}
.reason p{font-size:1.0625rem;line-height:1.7;color:rgba(244,241,233,0.86);}
.reason p strong{color:var(--ink);font-weight:500;}

/* ---------- three-up matters ---------- */
.triad{
  display:grid;grid-template-columns:repeat(3,1fr);gap:60px;margin-top:74px;
}
.triad .col h3{font-size:1.4rem;line-height:1.3;margin-bottom:18px;}
.triad .col h3 .g{color:var(--gold);}
.triad .col p{font-size:1rem;line-height:1.72;color:rgba(244,241,233,0.76);}
@media(max-width:860px){ .triad{grid-template-columns:1fr;gap:42px;} }

/* ---------- closing manifesto ---------- */
.manifesto-sec{
  padding:150px 0 140px;border-top:1px solid var(--line-soft);text-align:center;
  background:
    radial-gradient(80% 60% at 50% 18%,rgba(201,169,106,0.10),transparent 60%);
}
.manifesto-sec .mline{
  font-family:"Fraunces",serif;font-weight:300;
  font-size:clamp(1.5rem,3.6vw,2.5rem);line-height:1.45;letter-spacing:-0.01em;
  max-width:22ch;margin:0 auto;
}
.manifesto-sec .mline.soft{color:var(--sage);}
.manifesto-sec .mspace{height:48px;}
.manifesto-sec .hl{font-style:italic;color:var(--gold);}
.manifesto-sec .credo{
  margin-top:70px;font-family:"Inter",sans-serif;font-size:12px;
  letter-spacing:.30em;text-transform:uppercase;color:var(--gold);line-height:2.4;
}

/* ---------- signoff / footer ---------- */
.signoff{padding:120px 0;border-top:1px solid var(--line-soft);}
.signoff .invite{
  font-family:"Fraunces",serif;font-weight:300;
  font-size:clamp(1.4rem,3vw,2rem);line-height:1.45;max-width:26ch;
}
.signoff .by{
  margin-top:54px;font-family:"Inter",sans-serif;font-size:11.5px;
  letter-spacing:.06em;text-transform:none;
}
.signoff .by .nm{font-family:"Fraunces",serif;font-size:1.25rem;color:var(--ink);display:block;margin-bottom:4px;letter-spacing:0;}
.signoff .by .rl{color:var(--sage);letter-spacing:.04em;}
.cta-line{
  display:inline-block;margin-top:50px;
  font-family:"Inter",sans-serif;font-size:11.5px;letter-spacing:.26em;
  text-transform:uppercase;font-weight:300;color:var(--ink);
  padding-bottom:8px;border-bottom:1px solid var(--gold);
  transition:color .4s ease,letter-spacing .4s ease;
}
.cta-line:hover{color:var(--gold);letter-spacing:.32em;}

footer.foot{
  padding:64px var(--pad);border-top:1px solid var(--line-soft);
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  font-family:"Inter",sans-serif;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sage);
}
footer.foot .r{text-align:right;}
footer.foot b{color:var(--ink);font-weight:500;}

/* ---------- responsive padding ---------- */
@media(max-width:900px){
  :root{--pad:32px;}
  .chapter{padding:96px 0;}
  figure.plate.full{margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad));}
  .triad{gap:40px;}
}
@media(max-width:520px){
  :root{--pad:22px;}
  .nav{padding:18px var(--pad);}
  .exp{padding:40px 30px 44px;}
  .plate-box{aspect-ratio:4/3;}
  footer.foot{flex-direction:column;}
  footer.foot .r{text-align:left;}
}