/* =================================================================
   1112 ARCHIVE — stylesheet
   A fan preservation site for Agharta Studio's "1112" (fka Fade)
   ================================================================= */

@font-face{
  font-family:'DS Marker Felt';
  src:url('../fonts/DSMarkerFelt.ttf') format('truetype');
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}

@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Archivo:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Archivo+Narrow:wght@500;600;700&display=swap');

:root{
  /* --- palette --- */
  --ink:        #170F0A;
  --ink-2:      #241a11;
  --ink-3:      #2f2216;
  --board-felt: #232c1f;
  --board-felt-2:#2b3624;
  --parchment:  #ece0c3;
  --parchment-2:#f6efdc;
  --parchment-line: rgba(45,30,15,.14);
  --brass:      #b8863a;
  --brass-light:#e4bd74;
  --brass-dark: #6f4e1f;
  --rust:       #8a2f26;
  --rust-light: #c1584a;
  --verdigris:  #4f6f5c;
  --verdigris-light:#7ea08c;
  --text-dark:  #2a1c10;
  --text-dim:   #5a4a37;
  --text-light: #f3e9d2;
  --text-light-dim: rgba(243,233,210,.68);

  --font-display: 'Marker Felt', 'DS Marker Felt', 'Permanent Marker', 'Bradley Hand', cursive;
  --font-body: 'Archivo', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'Archivo Narrow', 'Archivo', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  --frame-radius: 6px;
  --wrap: 1180px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="100%25" height="100%25" filter="url(%23n)" opacity="0.035"/></svg>');
  color:var(--text-light);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;letter-spacing:.01em;margin:0 0 .5em;color:var(--brass-light);}
p{margin:0 0 1em;}
ul{margin:0;padding:0;}
button{font-family:inherit;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

::selection{background:var(--rust);color:var(--text-light);}

site-header, site-footer{display:contents;}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;}

/* ---------- eyebrow / labels ---------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--rust-light);
  display:inline-flex;
  align-items:center;
  gap:.6em;
  margin-bottom:.9em;
}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--rust-light);display:inline-block;}

/* ==================================================================
   HEADER
   ================================================================== */
.site-header{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 45%),
    linear-gradient(180deg, #241a10, #170f0a 88%);
  border-bottom:3px solid var(--brass-dark);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 3px 0 #0e0804,
    0 10px 22px rgba(0,0,0,.5);
}
.site-header::after{
  content:'';
  position:absolute; left:0; right:0; bottom:-3px; height:3px;
  background:repeating-linear-gradient(90deg, #e4bd74 0 2px, transparent 2px 30px);
  opacity:.55;
  pointer-events:none;
}
.wordmark{
  display:flex; align-items:baseline; gap:10px;
  text-decoration:none;
}
.wordmark-num{
  font-family:var(--font-display);
  font-weight:400;
  font-size:1.7rem;
  letter-spacing:.02em;
  background:linear-gradient(180deg,var(--brass-light),var(--brass) 60%,var(--brass-dark));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 1px 0 rgba(0,0,0,.4);
}
.wordmark-sub{
  font-family:var(--font-mono);
  font-size:.62rem;
  letter-spacing:.06em;
  color:var(--text-light-dim);
  display:none;
}
@media(min-width:560px){.wordmark-sub{display:inline;}}

.board-toggle{
  width:46px;height:46px;border-radius:50%;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s ease, filter .2s ease;
  flex:none;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));
}
.board-toggle:hover{transform:translateY(-1px) rotate(8deg); filter:drop-shadow(0 4px 9px rgba(0,0,0,.6));}
.board-toggle:active{transform:translateY(1px);}
.board-toggle svg{width:100%;height:100%;display:block;}

/* ==================================================================
   EVIDENCE BOARD (full-screen nav overlay)
   ================================================================== */
.board-overlay{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  padding:28px 16px;
  background:rgba(10,7,4,.88);
  opacity:0; pointer-events:none;
  transition:opacity .3s ease;
}
.board-overlay.is-open{opacity:1; pointer-events:auto;}

.board-panel{
  width:min(960px,100%);
  max-height:92vh;
  overflow:auto;
  position:relative;
  background:
    radial-gradient(ellipse at top left, rgba(255,255,255,.03), transparent 60%),
    var(--board-felt);
  border:10px solid var(--brass-dark);
  border-image:linear-gradient(135deg,var(--brass-light),var(--brass) 40%,var(--brass-dark) 100%) 1;
  border-radius:10px;
  box-shadow:0 30px 70px rgba(0,0,0,.6), inset 0 0 40px rgba(0,0,0,.5);
  padding:26px 22px 30px;
  transform:scale(.97) translateY(10px);
  transition:transform .3s ease;
}
.board-overlay.is-open .board-panel{transform:scale(1) translateY(0);}

.board-head{
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px dashed rgba(232,213,160,.3);
  padding-bottom:14px; margin-bottom:20px;
}
.board-head h2{margin:0; font-size:1.1rem; color:var(--brass-light);}
.board-close{
  width:42px;height:42px;border-radius:50%;
  background:none;border:none;padding:0;cursor:pointer;
  flex:none;
  transition:transform .2s ease, filter .2s ease;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));
}
.board-close svg{width:100%;height:100%;display:block;}
.board-close:hover{transform:rotate(90deg); filter:drop-shadow(0 4px 9px rgba(0,0,0,.6));}

.board-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:16px;
}
@media(min-width:640px){.board-grid{grid-template-columns:repeat(3,1fr);}}

.tile{
  position:relative;
  background:var(--parchment-2);
  color:var(--text-dark);
  text-decoration:none;
  border-radius:2px;
  padding:16px 14px 14px;
  box-shadow:0 8px 18px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.15);
  transform:rotate(var(--r,0deg));
  transition:transform .18s ease, box-shadow .18s ease;
  display:flex; flex-direction:column; gap:6px; min-height:118px;
}
.tile:nth-child(1){--r:-1.4deg;}
.tile:nth-child(2){--r:1deg;}
.tile:nth-child(3){--r:-.6deg;}
.tile:nth-child(4){--r:1.6deg;}
.tile:nth-child(5){--r:-1deg;}
.tile:nth-child(6){--r:.7deg;}
.tile:hover{transform:rotate(0deg) translateY(-4px) scale(1.02); box-shadow:0 14px 26px rgba(0,0,0,.4);}
.tile::before{
  content:'';position:absolute; top:-7px; left:50%; transform:translateX(-50%);
  width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--brass-light), var(--brass-dark));
  box-shadow:0 2px 3px rgba(0,0,0,.5);
}
.tile-tag{font-family:var(--font-mono); font-size:.65rem; letter-spacing:.1em; color:var(--rust);}
.tile-title{font-family:var(--font-display); font-weight:400; font-size:1.1rem; line-height:1.25;}
.tile-desc{font-family:var(--font-body); font-size:.84rem; color:var(--text-dim); line-height:1.35;}
.tile.is-current{outline:2px solid var(--rust); outline-offset:2px;}

/* ==================================================================
   VIEWFINDER (ornate frame used around hero art / screenshots)
   ================================================================== */
.viewfinder{
  position:relative;
  padding:16px;
  background:linear-gradient(160deg,#1d140d,#0f0a06);
  border-radius:4px;
  box-shadow:
    0 0 0 2px var(--brass-dark),
    0 0 0 4px rgba(0,0,0,.4),
    0 25px 60px rgba(0,0,0,.55);
}
.viewfinder-inner{
  position:relative;
  overflow:hidden;
  border-radius:2px;
  background:#000;
  box-shadow:inset 0 0 40px rgba(0,0,0,.6), inset 0 0 0 1px rgba(232,213,160,.15);
}
.viewfinder-inner img{width:100%;height:100%;object-fit:cover;display:block;}
.corner{
  position:absolute; width:38px; height:38px; z-index:2;
  background-image:url('../img/ui/corner.svg');
  background-size:contain; background-repeat:no-repeat;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.6));
  pointer-events:none;
}
.corner.tl{top:2px;left:2px;}
.corner.tr{top:2px;right:2px;transform:scaleX(-1);}
.corner.bl{bottom:2px;left:2px;transform:scaleY(-1);}
.corner.br{bottom:2px;right:2px;transform:scale(-1,-1);}

.viewfinder-caption{
  font-family:var(--font-mono);
  font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-light-dim);
  padding:10px 4px 2px;
  display:flex; justify-content:space-between; gap:12px;
}

/* ==================================================================
   HERO
   ================================================================== */
.hero{
  padding:56px 0 40px;
  position:relative;
}
.hero-grid{
  display:grid; gap:34px;
  grid-template-columns:1fr;
  align-items:center;
}
@media(min-width:860px){
  .hero-grid{grid-template-columns:1.05fr .95fr;}
}

/* ==================================================================
   CINEMATIC HERO (homepage only) — one large framed scene with the
   title treatment overlaid, a museum-style brass plaque beneath it.
   ================================================================== */
.hero-cinematic{max-width:980px; margin:0 auto;}
.hero-cinematic .viewfinder{display:block;}
.hero-cinematic .viewfinder-inner{min-height:520px;}
.hero-cinematic .viewfinder-inner img{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; object-position:50% 30%;
  display:block;
}
@media(max-width:600px){
  .hero-cinematic .viewfinder-inner{min-height:580px;}
}
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(8,5,2,.15) 0%, rgba(8,5,2,.2) 40%, rgba(6,4,2,.88) 82%, rgba(4,3,1,.96) 100%),
    linear-gradient(90deg, rgba(4,3,1,.5) 0%, transparent 22%, transparent 78%, rgba(4,3,1,.5) 100%);
  pointer-events:none;
}
.hero-overlay{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:38px 34px 30px;
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.hero-overlay .eyebrow{justify-content:center;}
.hero-overlay h1{
  font-size:clamp(1.9rem,5.4vw,3rem);
  line-height:1.05;
  margin-bottom:.3em;
  text-shadow:0 3px 14px rgba(0,0,0,.85), 0 1px 0 rgba(0,0,0,.6);
}
.hero-overlay .dek{
  font-size:1.05rem;
  color:var(--text-light-dim);
  max-width:52ch;
  margin:0 auto 1.5em;
  text-shadow:0 2px 8px rgba(0,0,0,.9);
}
.hero-overlay .hero-actions{justify-content:center;}

.hero-plaque-wrap{display:flex; justify-content:center;}
.hero-plaque{
  margin-top:-1px;
  position:relative; z-index:3;
  background:linear-gradient(180deg,var(--brass-light),var(--brass) 55%,var(--brass-dark) 100%);
  border:1px solid #1a0f06;
  border-top:none;
  padding:9px 34px;
  border-radius:0 0 5px 5px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -3px 5px rgba(0,0,0,.35),
    0 8px 16px rgba(0,0,0,.45);
  font-family:var(--font-mono);
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:#2a1c10;
}
.hero-plaque::before,
.hero-plaque::after{
  content:''; position:absolute; top:50%; width:5px; height:5px; border-radius:50%;
  background:radial-gradient(circle at 32% 30%, #fff, #6b431c 75%);
  box-shadow:0 0 0 1px #2c1a0a;
  transform:translateY(-50%);
}
.hero-plaque::before{left:10px;}
.hero-plaque::after{right:10px;}

.stroke-text{
  text-shadow:
    -1.5px -1.5px 0 #000,
    1.5px -1.5px 0 #000,
    -1.5px 1.5px 0 #000,
    1.5px 1.5px 0 #000,
    0 3px 4px rgba(0,0,0,.5);
}
.hero h1{
  font-size:clamp(2.2rem,6vw,3.4rem);
  line-height:1.05;
  margin-bottom:.3em;
}
.hero .dek{
  font-size:1.12rem;
  color:var(--text-light-dim);
  max-width:46ch;
  margin-bottom:1.6em;
}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px;}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display);
  font-size:1rem; letter-spacing:.02em;
  padding:12px 26px;
  border-radius:3px;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  position:relative;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary{
  background-image:
    radial-gradient(circle at 32% 30%, #f6d596, #7a5220 60%, #3a2410 100%),
    radial-gradient(circle at 32% 30%, #f6d596, #7a5220 60%, #3a2410 100%),
    linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 55%),
    linear-gradient(180deg,var(--brass-light),var(--brass) 70%);
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat;
  background-size:7px 7px, 7px 7px, 100% 100%, 100% 100%;
  background-position:12px 50%, calc(100% - 12px) 50%, 0 0, 0 0;
  color:var(--ink);
  box-shadow:
    0 4px 0 var(--brass-dark),
    0 10px 18px rgba(0,0,0,.4),
    inset 0 -5px 8px rgba(0,0,0,.12);
}
.btn-primary:hover{transform:translateY(-2px);}
.btn-ghost{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.18));
  border-color:var(--brass);
  color:var(--brass-light);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 -3px 6px rgba(0,0,0,.4),
    0 4px 10px rgba(0,0,0,.3);
}
.btn-ghost:hover{background:rgba(184,134,58,.16);}

/* ==================================================================
   SECTIONS / CARDS (case-file parchment)
   ================================================================== */
.section{padding:54px 0;}
.section-tight{padding:30px 0;}
.section-head{max-width:64ch; margin-bottom:34px;}
.section-head h2{font-size:clamp(1.5rem,3.4vw,2.1rem);}
.section-head p{color:var(--text-light-dim); font-size:1.02rem;}

/* ==================================================================
   RIVETS — small screw-head studs at the corners of "bolted" panels,
   echoing the brass hardware used throughout the game's own UI.
   ================================================================== */
.riveted{
  background-image:
    radial-gradient(circle at 32% 30%, #f0c987, #7a5220 55%, #3a2410 100%),
    radial-gradient(circle at 32% 30%, #f0c987, #7a5220 55%, #3a2410 100%),
    radial-gradient(circle at 32% 30%, #f0c987, #7a5220 55%, #3a2410 100%),
    radial-gradient(circle at 32% 30%, #f0c987, #7a5220 55%, #3a2410 100%);
  background-repeat:no-repeat;
  background-size:10px 10px, 10px 10px, 10px 10px, 10px 10px;
  background-position:
    13px 13px,
    calc(100% - 13px) 13px,
    13px calc(100% - 13px),
    calc(100% - 13px) calc(100% - 13px);
}
.riveted::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(circle at 40% 35%, rgba(255,255,255,.55), transparent 40%),
    radial-gradient(circle at 40% 35%, rgba(255,255,255,.55), transparent 40%),
    radial-gradient(circle at 40% 35%, rgba(255,255,255,.55), transparent 40%),
    radial-gradient(circle at 40% 35%, rgba(255,255,255,.55), transparent 40%);
  background-repeat:no-repeat;
  background-size:4px 4px, 4px 4px, 4px 4px, 4px 4px;
  background-position:
    15px 15px,
    calc(100% - 17px) 15px,
    15px calc(100% - 17px),
    calc(100% - 17px) calc(100% - 17px);
}

/* ==================================================================
   DISPATCHES (news)
   ================================================================== */
.dispatch-card{
  display:block; text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease;
}
.dispatch-card:hover{transform:translateY(-3px); box-shadow:0 18px 32px rgba(0,0,0,.4);}
.dispatch-date{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--rust); display:block; margin-bottom:.5em;
}
.dispatch-card h3{margin-bottom:.3em;}
.dispatch-card-wide{max-width:74ch;}

.post-card{max-width:74ch; margin:0 auto;}
.post-card h1{color:var(--text-dark); font-size:1.7rem; margin-bottom:.2em;}
.post-body{margin-top:18px; color:var(--text-dim); font-size:1rem; line-height:1.7;}
.post-body h2,.post-body h3,.post-body h4{color:var(--text-dark); margin-top:1.2em;}
.post-body p{margin-bottom:1em;}
.post-body ul{margin:0 0 1em 1.3em; padding:0;}
.post-body li{margin-bottom:.4em;}
.post-body a{color:var(--rust); text-decoration:underline; text-decoration-color:rgba(138,47,38,.4);}
.post-body blockquote{
  margin:0 0 1em; padding:2px 0 2px 16px;
  border-left:3px solid var(--brass-dark);
  color:var(--text-dim); font-style:italic;
}
.post-body code{
  background:rgba(0,0,0,.06); padding:.15em .4em; border-radius:3px;
  font-family:var(--font-mono); font-size:.9em;
}
.card{
  background:var(--parchment-2);
  color:var(--text-dark);
  border-radius:3px;
  padding:26px 24px;
  box-shadow:0 12px 26px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.06);
  position:relative;
}
.card::after{
  content:''; position:absolute; inset:6px; border:1px solid var(--parchment-line);
  pointer-events:none; border-radius:2px;
}
.card h3{color:var(--text-dark); font-size:1.15rem;}
.card p{color:var(--text-dim); font-size:.98rem;}
.card p:last-child{margin-bottom:0;}

.grid{display:grid; gap:22px;}
.grid-2{grid-template-columns:1fr;}
.grid-3{grid-template-columns:1fr;}
@media(min-width:700px){
  .grid-2{grid-template-columns:1fr 1fr;}
  .grid-3{grid-template-columns:repeat(3,1fr);}
}

/* nav cards on homepage */
.navcard{
  display:block; text-decoration:none;
  background:var(--ink-2);
  border:1px solid var(--brass-dark);
  border-radius:4px;
  padding:22px 20px;
  position:relative;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.navcard:hover{transform:translateY(-3px); border-color:var(--brass); background:var(--ink-3);}
.navcard .tile-tag{color:var(--rust-light);}
.navcard h3{color:var(--brass-light); font-size:1.08rem; margin:.3em 0 .35em;}
.navcard p{color:var(--text-light-dim); font-size:.92rem; margin:0;}

/* ==================================================================
   TIMELINE
   ================================================================== */
.timeline{
  position:relative;
  padding-left:28px;
  border-left:2px solid var(--brass-dark);
}
.timeline-item{position:relative; padding-bottom:38px;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-item::before{
  content:'';
  position:absolute; left:-35px; top:4px;
  width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,var(--brass-light),var(--brass-dark));
  box-shadow:0 0 0 4px var(--ink), 0 0 0 5px var(--brass-dark);
}
.timeline-item.is-void::before{background:radial-gradient(circle at 32% 28%,#6a6a6a,#2a2a2a);}
.timeline-year{
  font-family:var(--font-mono); color:var(--rust-light);
  font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  margin-bottom:.4em; display:block;
}
.timeline-item h3{font-size:1.2rem; margin-bottom:.3em;}
.stat-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px;}
.stat-chip{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.04em;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.2)), rgba(184,134,58,.12);
  color:var(--brass-light);
  border:1px solid var(--brass-dark);
  padding:5px 10px; border-radius:20px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 -2px 4px rgba(0,0,0,.3);
}

/* ==================================================================
   DOSSIER (characters)
   ================================================================== */
.dossier{
  background:var(--parchment-2); color:var(--text-dark);
  border-radius:3px; padding:24px; display:flex; gap:18px;
  box-shadow:0 12px 26px rgba(0,0,0,.35);
  position:relative;
}
.dossier::after{content:''; position:absolute; inset:6px; border:1px solid var(--parchment-line); border-radius:2px; pointer-events:none;}
.locket{
  flex:none; width:74px; height:74px; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, var(--brass-light), var(--brass) 55%, var(--brass-dark));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:400; font-size:1.6rem; color:var(--ink);
  box-shadow:0 0 0 3px var(--parchment-2), 0 0 0 5px var(--brass-dark), 0 6px 14px rgba(0,0,0,.4);
}
.dossier-body h3{margin-bottom:.15em; font-size:1.15rem;}
.dossier-role{font-family:var(--font-mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--rust); margin-bottom:.6em; display:block;}
.dossier-fields{list-style:none; margin:10px 0 0; padding:0; font-size:.86rem; color:var(--text-dim);}
.dossier-fields li{padding:3px 0; border-top:1px dashed var(--parchment-line);}
.dossier-fields li:first-child{border-top:none;}
.dossier-fields b{color:var(--text-dark); font-weight:600;}

/* ==================================================================
   DOWNLOADS / preservation cards
   ================================================================== */
.stamp{
  display:inline-block; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em;
  text-transform:uppercase; padding:4px 10px; border-radius:2px; border:1.5px solid currentColor;
  transform:rotate(-3deg);
}
.stamp-ok{color:var(--verdigris-light);}
.stamp-partial{color:var(--brass-light);}
.stamp-missing{color:var(--rust-light);}

.dl-card{background:var(--ink-2); border:1px solid var(--brass-dark); border-radius:4px; padding:22px; position:relative;}
.dl-card h3{font-size:1.1rem; margin-bottom:.2em;}
.dl-meta{font-family:var(--font-mono); font-size:.72rem; color:var(--text-light-dim); margin-bottom:.8em; letter-spacing:.03em;}
.dl-card p{color:var(--text-light-dim); font-size:.93rem;}
.dl-link{
  display:inline-flex; align-items:center; gap:6px; margin-top:10px;
  font-family:var(--font-mono); font-size:.76rem; color:var(--brass-light);
  text-decoration:none; border-bottom:1px solid var(--brass-dark); padding-bottom:2px;
}
.dl-link:hover{color:var(--brass-light); border-color:var(--brass-light);}

/* ==================================================================
   PULLQUOTE / callout
   ================================================================== */
.callout{
  border-left:3px solid var(--rust);
  background:rgba(138,47,38,.1);
  padding:18px 20px; border-radius:0 3px 3px 0;
  font-size:.96rem; color:var(--text-light-dim);
}
.callout b{color:var(--text-light);}

/* ==================================================================
   FOOTER
   ================================================================== */
.site-footer{
  border-top:1px solid var(--brass-dark);
  padding:34px 0 40px;
  margin-top:40px;
  background:var(--ink-2);
}
.footer-inner{display:flex; flex-direction:column; gap:10px;}
.footer-disclaimer{font-size:.86rem; color:var(--text-light-dim); max-width:70ch;}
.footer-meta{font-family:var(--font-mono); font-size:.68rem; letter-spacing:.05em; color:var(--text-dim); text-transform:uppercase;}
.footer-links{display:flex; gap:16px; flex-wrap:wrap; margin-top:6px;}
.footer-links a{font-family:var(--font-mono); font-size:.72rem; color:var(--brass-light); text-decoration:none; border-bottom:1px solid var(--brass-dark);}
.footer-links a:hover{border-color:var(--brass-light);}

/* ==================================================================
   REVEAL ON SCROLL
   ================================================================== */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
.reveal.is-visible{opacity:1; transform:translateY(0);}

/* ==================================================================
   MISC utilities
   ================================================================== */
.mt-0{margin-top:0;}
.text-dim{color:var(--text-light-dim);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
hr.hairline{border:none; border-top:1px dashed var(--parchment-line); margin:22px 0;}