/* ═══════════════════════════════════════════════════════════
   supplement.css — shared styling for project supplement pages
   Inherits the design language of The Daily Portfolio.
   ═══════════════════════════════════════════════════════════ */

:root{
  --paper:#f2e6d0; --paper-dark:#e8d5b5; --paper-edge:#d4c4a0;
  --ink:#1a1207; --ink-light:#3d2e14; --ink-faded:#6b5a3e;
  --accent-red:#8b1a1a; --accent-red-light:#a52a2a;
  --rule-color:#2a1f0e; --shadow:rgba(26,18,7,.3);
  --page-width:min(1100px,94vw);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;height:100%}
body{
  font-family:'Libre Baskerville',Georgia,serif;
  background:#2a1f0e; color:var(--ink); min-height:100%;
}
body::before{
  content:''; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat:repeat; background-size:256px 256px;
}
.desk-surface{
  position:fixed; inset:0; z-index:0;
  background:radial-gradient(ellipse at 50% 30%,#3d2e14 0%,#2a1f0e 50%,#1a1207 100%);
}
.desk-surface::after{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg,transparent,transparent 3px,
             rgba(0,0,0,.03) 3px,rgba(0,0,0,.03) 4px);
}

/* ── Loading screen ── */
.loading-screen{
  position:fixed; inset:0; background:var(--ink); z-index:10000;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transition:opacity .6s ease, visibility .6s ease;
}
.loading-screen.hidden{opacity:0; visibility:hidden}
.loading-text{
  font-family:'UnifrakturMaguntia',cursive; font-size:2rem; color:var(--paper);
  margin-bottom:20px; animation:loadPulse 1.5s ease-in-out infinite; text-align:center;
  padding:0 20px;
}
.loading-bar{width:200px;height:3px;background:var(--ink-faded);border-radius:2px;overflow:hidden}
.loading-bar-inner{height:100%;background:var(--paper);animation:loadProgress 1.5s ease-in-out forwards}
@keyframes loadPulse{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes loadProgress{0%{width:0}100%{width:100%}}

/* ── The sheet ── */
.sheet{
  position:relative; z-index:1;
  width:var(--page-width); margin:28px auto 60px;
  background:var(--paper); padding:44px clamp(20px,4vw,60px) 60px;
  box-shadow:0 18px 50px var(--shadow);
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(212,196,160,.35), transparent 60%),
    radial-gradient(ellipse at 85% 85%, rgba(212,196,160,.3), transparent 55%);
}
.sheet::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 90px rgba(107,90,62,.28);
}

/* ── Navigation & rules ── */
.supp-nav{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap}
.backlink{
  font-family:'Special Elite',monospace; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faded); text-decoration:none;
  border-bottom:1px solid var(--paper-edge); padding-bottom:2px;
}
.backlink:hover{color:var(--accent-red)}
.top-rule{
  display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
  border-top:3px double var(--rule-color); border-bottom:1px solid var(--rule-color);
  padding:7px 0; margin:18px 0 26px;
  font-family:'Special Elite',monospace; font-size:.68rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faded);
}
.rule-double{border:none;border-top:3px double var(--rule-color);margin:26px 0}
.rule-ornamental{
  border:none; text-align:center; margin:30px 0 26px; height:14px; position:relative;
}
.rule-ornamental::after{
  content:'❦'; color:var(--accent-red); font-size:1.1rem;
  background:var(--paper); padding:0 14px; position:relative; top:-9px;
}
.rule-ornamental::before{
  content:''; position:absolute; left:0; right:0; top:6px;
  border-top:1px solid var(--paper-edge);
}

/* ── Headings ── */
.section-label{
  font-family:'Special Elite',monospace; font-size:.72rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--accent-red); text-align:center; margin-bottom:10px;
}
.headline{
  font-family:'Playfair Display',serif; font-weight:900; line-height:1.03;
  font-size:clamp(2.1rem,5.4vw,4rem); text-align:center; letter-spacing:-.01em;
}
.subheadline{
  font-family:'IM Fell English',serif; font-style:italic;
  font-size:clamp(1rem,2vw,1.3rem); text-align:center; color:var(--ink-light);
  margin:14px auto 6px; max-width:62ch; line-height:1.5;
}
.byline{
  font-family:'Special Elite',monospace; font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; text-align:center; color:var(--ink-faded); margin:14px 0 4px;
}
h2.sub{
  font-family:'Playfair Display',serif; font-weight:800;
  font-size:clamp(1.35rem,2.6vw,1.9rem); margin:8px 0 4px; text-align:center;
}
h3.kicker{
  font-family:'Playfair Display',serif; font-weight:700;
  font-size:1.12rem; margin:22px 0 6px;
}

/* ── Body copy ── */
.body-text{
  font-size:.95rem; line-height:1.72; margin-bottom:1em; text-align:justify;
  hyphens:auto; color:var(--ink);
}
.dropcap::first-letter{
  font-family:'Playfair Display',serif; font-size:3.4rem; font-weight:900;
  float:left; line-height:.82; padding:4px 8px 0 0; color:var(--accent-red);
}
.columns-2{column-count:2; column-gap:34px; column-rule:1px solid var(--paper-edge)}
@media(max-width:760px){.columns-2{column-count:1}}
.pull-quote{
  font-family:'IM Fell English',serif; font-style:italic; font-size:1.22rem;
  line-height:1.5; color:var(--accent-red); text-align:center;
  border-top:1px solid var(--paper-edge); border-bottom:1px solid var(--paper-edge);
  padding:18px 10px; margin:26px 0; break-inside:avoid;
}

/* ── Type blocks ── */
.type-blocks{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:18px 0 4px}
.type-block{
  font-family:'Special Elite',monospace; font-size:.72rem; letter-spacing:.08em;
  padding:5px 11px; border:1px solid var(--rule-color); background:var(--paper-dark);
  color:var(--ink-light); text-transform:uppercase;
}
.type-block.featured{background:var(--accent-red); color:var(--paper); border-color:var(--accent-red)}

/* ── Specification table ── */
.specs{width:100%; border-collapse:collapse; margin:14px 0 6px; font-size:.86rem}
.specs th{
  font-family:'Special Elite',monospace; font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; text-align:left; color:var(--accent-red);
  border-bottom:1px solid var(--rule-color); padding:7px 8px 6px;
}
.specs td{
  padding:7px 8px; border-bottom:1px dotted var(--paper-edge);
  vertical-align:top; line-height:1.5;
}
.specs td:first-child{
  font-family:'Special Elite',monospace; font-size:.76rem;
  white-space:nowrap; color:var(--ink-light);
}

/* ── Plate (figure frame) ── */
.plate{
  border:1px solid var(--rule-color); background:var(--paper-dark);
  padding:14px; margin:8px 0 6px; box-shadow:0 3px 0 var(--paper-edge);
}
.plate-cap{
  font-family:'Special Elite',monospace; font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-faded); text-align:center;
  margin-top:10px; line-height:1.5;
}

/* ── Companion link card ── */
.companion{
  display:block; text-decoration:none; color:inherit;
  border:1px solid var(--rule-color); background:var(--paper-dark);
  padding:16px 18px; margin-top:8px; transition:.18s;
}
.companion:hover{background:var(--paper); box-shadow:0 3px 0 var(--paper-edge)}
.companion .c-label{
  font-family:'Special Elite',monospace; font-size:.64rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent-red);
}
.companion .c-title{
  font-family:'Playfair Display',serif; font-weight:800; font-size:1.2rem; margin:4px 0 4px;
}
.companion .c-desc{font-size:.86rem; line-height:1.6; color:var(--ink-light)}

/* ── Footer ── */
.page-footer{
  display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
  border-top:3px double var(--rule-color); margin-top:36px; padding-top:12px;
  font-family:'Special Elite',monospace; font-size:.66rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faded);
}
.page-number{
  border:1px solid var(--rule-color); padding:2px 9px; background:var(--paper-dark);
}

/* ── Scroll reveal ── */
.fade-section{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease}
.fade-section.in-view{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  .fade-section{opacity:1;transform:none;transition:none}
}