/* ==========================================================================
   Emberwright - the archive of the forge
   Direction: hot metal on cold steel.
   The ground is blued steel; incandescence is spent only where it means
   something. Brass, not gold, carries the marks.
   Committed single theme: a workshop at night. Every colour painted
   explicitly so the page never borrows a host background.
   No external requests - type comes from a deliberately chosen local stack.
   ========================================================================== */

:root{
  /* --- cold: blued steel, neutrals biased toward the accent's complement --- */
  --steel-900:#0a0c0f;
  --steel-800:#0e1116;
  --steel-700:#141820;
  --steel-600:#1a1f27;
  --steel-500:#232933;
  --steel-rule:rgba(163,184,205,.16);
  --steel-rule-soft:rgba(163,184,205,.08);

  /* --- hot: a real incandescence ramp, used sparingly --- */
  --heat-10:#5e1704;
  --heat-20:#9c2f08;
  --heat-30:#c8410c;
  --heat-40:#ff7a18;
  --heat-50:#ffa33a;
  --heat-60:#ffdf9a;
  --heat-70:#fff4d8;

  /* --- brass: marks, rules, small metal --- */
  --brass:#c9a227;
  --brass-hi:#e8cc6a;
  --brass-dim:#8a6f1e;

  /* --- ink --- */
  --chalk:#eceae4;
  --chalk-soft:#b9bec7;
  --chalk-dim:#7f8894;

  /* --- type: chosen local stacks, no web fonts --- */
  --display:Constantia,"Palatino Linotype","Iowan Old Style","Hoefler Text",Georgia,serif;
  --body:"Palatino Linotype","Iowan Old Style",Charter,"Bitstream Charter",Georgia,serif;
  --stamp:"Copperplate Gothic Light",Copperplate,"Franklin Gothic Medium","Arial Narrow",sans-serif;

  /* --- scale --- */
  --wrap:1200px;
  --measure:66ch;
  --s1:8px; --s2:14px; --s3:22px; --s4:34px; --s5:52px; --s6:80px; --s7:112px;
}

*,*::before,*::after{box-sizing:border-box}

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

body{
  margin:0;
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  color:var(--chalk-soft);
  background-color:var(--steel-900);
  background-image:
    radial-gradient(1100px 620px at 68% -6%, rgba(255,122,24,.13), transparent 66%),
    radial-gradient(760px 520px at 4% 30%, rgba(90,120,150,.07), transparent 62%),
    linear-gradient(180deg,#0d1015 0%,#0a0c0f 46%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* rolled-steel grain: cold, directional, almost subliminal */
body::before{
  content:"";
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85 0.16' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='400' height='400' filter='url(%23g)' opacity='0.22'/></svg>");
  mix-blend-mode:soft-light;
}
main,header,footer,.pre-footer{position:relative;z-index:1}

img,svg{max-width:100%;display:block}

a{color:var(--brass-hi);text-decoration:none}
a:hover{color:var(--heat-60)}

:focus-visible{outline:2px solid var(--heat-50);outline-offset:3px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--brass);color:#12140c;padding:12px 20px;
  font-family:var(--stamp);letter-spacing:.14em;
}
.skip:focus{left:0}

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

/* ---------- the heat rule: cold steel, white-hot at the centre ----------
   The recurring motif of the site. It is the temperature gradient along a
   bar lying in the fire, and it separates every major division.          */

.section{padding:var(--s7) 0;position:relative}
.section::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    var(--steel-rule) 12%,
    var(--heat-10) 34%,
    var(--heat-30) 46%,
    var(--heat-60) 50%,
    var(--heat-30) 54%,
    var(--heat-10) 66%,
    var(--steel-rule) 88%,
    transparent 100%);
  opacity:.55;
}
.section.no-rule::before{display:none}

/* ---------- type ---------- */

h1,h2,h3,h4{
  font-family:var(--display);
  color:var(--chalk);
  line-height:1.08;
  margin:0;
  font-weight:400;
  text-wrap:balance;
}

h1{font-size:clamp(38px,5.6vw,68px);letter-spacing:-.018em}
h2{font-size:clamp(27px,3.5vw,42px);letter-spacing:-.014em}
h3{font-size:21px;letter-spacing:-.008em}
h4{font-size:15px}

/* forged heading: quenched steel with heat still in the lower edge */
h1,.h-hot{
  background:linear-gradient(176deg,#fdfaf4 0%,#f4eee2 56%,#e0cda4 82%,#c9a15a 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.7));
}

p{margin:0 0 var(--s3)}
p:last-child{margin-bottom:0}
/* headings never butt against their first paragraph. Adjacent sibling
   margins collapse, so this cannot double up where a gap is already set. */
h2 + p,h3 + p{margin-top:var(--s3)}

.eyebrow{
  font-family:var(--stamp);
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--brass);margin:0 0 var(--s2);
}
.eyebrow .dot{color:var(--heat-30);margin:0 6px}

/* ---------- header: a trade plate ---------- */

.site-header{
  position:sticky;top:0;z-index:40;
  background:rgba(10,12,15,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--steel-rule);
}
.header-inner{display:flex;align-items:center;gap:30px;min-height:78px}

.brand{display:flex;align-items:center;gap:16px;color:var(--chalk)}
/* the brand mark is the same brass punch used on every list in the site,
   not an illustration - one mark, used consistently */
.brand-mark{
  width:13px;height:13px;flex:none;transform:rotate(45deg);
  background:linear-gradient(135deg,var(--brass-hi),var(--brass) 55%,var(--brass-dim));
  box-shadow:0 0 0 1px rgba(0,0,0,.55), 0 0 14px rgba(255,122,24,.35);
}
.brand:hover .brand-mark{
  background:linear-gradient(135deg,#fff2cf,var(--brass-hi) 55%,var(--brass));
}
.brand-text{display:flex;flex-direction:column;line-height:1.2}
.brand-text strong{
  font-family:var(--display);font-size:20px;font-weight:400;
  color:var(--chalk);letter-spacing:.005em;
}
.brand-text small{
  font-family:var(--stamp);font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--chalk-dim);
}

.nav{margin-left:auto;display:flex;gap:28px;align-items:center}
.nav a{
  font-family:var(--stamp);font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--chalk-soft);
  padding:8px 0;position:relative;
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;
  background:var(--heat-40);transition:right .22s ease;
}
.nav a:hover{color:var(--chalk)}
.nav a[aria-current]{color:var(--brass-hi)}
.nav a:hover::after,.nav a[aria-current]::after{right:0}

.nav-toggle{display:none}

/* ---------- buttons: stamped plates, not pills ---------- */

.btn{
  display:inline-block;font-family:var(--stamp);font-size:11.5px;
  letter-spacing:.2em;text-transform:uppercase;
  padding:15px 28px;border:1px solid transparent;cursor:pointer;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.btn-primary{
  color:#161206;
  background:linear-gradient(180deg,var(--brass-hi),var(--brass) 58%,#a8831a);
  border-color:#e5d08a;
}
.btn-primary:hover{
  color:#161206;
  background:linear-gradient(180deg,#f4e2a4,var(--brass-hi) 58%,var(--brass));
}
.btn-ghost{color:var(--chalk);border-color:var(--steel-rule);background:transparent}
.btn-ghost:hover{border-color:var(--heat-30);color:var(--heat-60);background:rgba(255,122,24,.05)}
.btn-dark{color:var(--chalk);background:#14100a;border-color:rgba(0,0,0,.5)}
.btn-dark:hover{color:var(--heat-60);background:#1c1710}

/* ---------- section heads: asymmetric, ruled ---------- */

.section-head{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:var(--s5);align-items:end;margin-bottom:var(--s6);
}
.section-head > p{
  color:var(--chalk-dim);font-size:16px;margin:0;max-width:52ch;
  padding-left:var(--s3);border-left:1px solid var(--steel-rule);
}

/* ---------- hero ---------- */

.hero{padding:var(--s6) 0 var(--s7);position:relative;overflow:hidden}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:var(--s6);align-items:center;position:relative;z-index:2;
}
.hero h1{max-width:14ch}
.hero-lead{
  margin-top:var(--s4);font-size:19px;line-height:1.6;color:var(--chalk);
  max-width:50ch;text-wrap:pretty;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}

/* the four figures: a spec plate */
.hero-facts{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--s3);margin-top:var(--s6);padding-top:var(--s3);
  border-top:1px solid var(--steel-rule);
}
.hero-facts b{
  display:block;font-family:var(--display);font-size:clamp(22px,2.2vw,30px);
  font-weight:400;color:var(--heat-60);font-variant-numeric:tabular-nums;
  line-height:1.15;
}
.hero-facts span{
  display:block;margin-top:6px;font-family:var(--stamp);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--chalk-dim);
}

/* ---------- the seal ---------- */


/* ---------- the seal: the painting set into forged metal ----------
   The artwork already contains a ring of fire, so the steel collar is sized
   to read as the rim of that same object. The painting is masked out at the
   edge instead of being cropped, so the flame dissolves into the metal. */

.seal{
  position:relative;margin:0 -4% 0 auto;
  width:100%;max-width:560px;aspect-ratio:1;
  padding:15px;border-radius:50%;
  /* heavy iron, not a grey border: high-contrast facets, dark between them */
  background:conic-gradient(from 208deg,
    #0f1318 0%,  #737e8b 7%,  #0c1015 17%, #a4afbb 27%, #10151b 37%,
    #5d6774 46%, #0b0e13 56%, #8d98a5 67%, #0e1217 77%, #6b7683 87%,
    #0d1116 95%, #0f1318 100%);
  box-shadow:
    0 0 0 1px #000,
    0 44px 90px rgba(0,0,0,.6),
    0 0 120px rgba(200,65,12,.26);
}

/* the fire behind the metal, breathing. opacity only - stays on the compositor */
.seal::before{
  content:"";position:absolute;left:50%;top:50%;z-index:0;
  width:170%;aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,122,24,.40),rgba(200,65,12,.14) 40%,transparent 66%);
  will-change:opacity;animation:breathe 7s ease-in-out infinite;
  pointer-events:none;
}
@keyframes breathe{
  0%,100%{opacity:.55}
  50%{opacity:1}
}

.seal img{
  position:relative;z-index:1;
  width:100%;height:100%;object-fit:cover;border-radius:50%;
  filter:saturate(.92) contrast(1.08);
  /* only the last sliver softens - the vignette below does the seating */
  -webkit-mask-image:radial-gradient(circle at 50% 48%,#000 88%,transparent 100%);
  mask-image:radial-gradient(circle at 50% 48%,#000 88%,transparent 100%);
}

/* seats the painting: the corners fall into darkness, then one hot rim,
   then a bevel of light where the metal catches the fire */
.seal::after{
  content:"";position:absolute;inset:15px;border-radius:50%;z-index:2;
  pointer-events:none;
  background:radial-gradient(circle at 50% 46%,
    transparent 64%, rgba(8,10,13,.18) 82%, rgba(8,10,13,.58) 95%, rgba(8,10,13,.78) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,122,24,.5),
    inset 0 0 26px 2px rgba(200,65,12,.45),
    inset 0 2px 3px -1px rgba(255,223,154,.35);
}

@media (prefers-reduced-motion:reduce){
  .seal::before{animation:none;opacity:.8}
}

/* ---------- plates (was: cards) ---------- */

.grid{display:grid;gap:1px;background:var(--steel-rule-soft)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}

.card{
  position:relative;display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--steel-700),var(--steel-800));
  padding:var(--s5) var(--s5) var(--s4);
  transition:background .25s ease;
}
/* the heat seats along the left edge on hover - metal set against metal */
.card::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--heat-40),var(--heat-20));
  transform:scaleY(0);transform-origin:top;transition:transform .25s ease;
}
.card:hover{background:linear-gradient(180deg,var(--steel-600),var(--steel-700))}
.card:hover::after{transform:scaleY(1)}

.card-body{display:flex;flex-direction:column;flex:1}
/* a short brass rule instead of a picture: the plate is stamped, not illustrated */
.card-meta{
  font-family:var(--stamp);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--brass);margin:0 0 var(--s3);
  padding-top:var(--s3);position:relative;
}
.card-meta::before{
  content:"";position:absolute;top:0;left:0;width:34px;height:1px;
  background:linear-gradient(90deg,var(--brass),var(--brass-dim));
}
.card h3{margin-bottom:var(--s3);font-size:clamp(26px,2.4vw,32px)}
.card p{font-size:16.5px;color:var(--chalk-soft);line-height:1.6;max-width:44ch}

.readmore{
  margin-top:auto;padding-top:var(--s3);
  font-family:var(--stamp);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass-hi);
  display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
}
.readmore::after{content:"\2192";transition:transform .2s ease}
.readmore:hover{color:var(--heat-50)}
.readmore:hover::after{transform:translateX(5px)}

.card-foot{
  display:flex;justify-content:space-between;gap:12px;
  margin-top:var(--s3);padding-top:var(--s2);
  border-top:1px solid var(--steel-rule-soft);
  font-family:var(--stamp);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--chalk-dim);
}

/* ---------- the catalogue of objects ---------- */

.species{
  position:relative;padding:var(--s4) var(--s4) var(--s4) var(--s5);
  background:linear-gradient(180deg,var(--steel-700),var(--steel-800));
  transition:background .25s ease;
}
.species:hover{background:linear-gradient(180deg,var(--steel-600),var(--steel-700))}

/* brass punch-mark instead of a glowing orb */
.species .orb{
  position:absolute;left:var(--s3);top:calc(var(--s4) + 8px);
  width:12px;height:12px;transform:rotate(45deg);
  background:linear-gradient(135deg,var(--brass-hi),var(--brass-dim));
  box-shadow:0 0 0 1px rgba(0,0,0,.5);
}
.species h3{font-size:23px;margin-bottom:4px}
.species .latin{
  font-style:italic;font-size:14px;color:var(--heat-50);
  margin:0 0 var(--s2);
}
.species p{font-size:15.5px;color:var(--chalk-dim);line-height:1.56}
.species .tag{
  position:absolute;top:var(--s4);right:var(--s4);
  font-family:var(--stamp);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--chalk-dim);
  border:1px solid var(--steel-rule);padding:4px 9px;
}

/* ---------- the dark panel: three fires ---------- */

.panel-dark{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:var(--s6);padding:var(--s6);
  background:
    radial-gradient(760px 420px at 100% 108%, rgba(200,65,12,.18), transparent 62%),
    linear-gradient(180deg,var(--steel-700),var(--steel-900));
  border:1px solid var(--steel-rule);
  position:relative;overflow:hidden;
}
.panel-dark > div{position:relative;z-index:1}

/* each fire gets its own temperature on the rule beside it */
.layer{padding:var(--s3) 0 var(--s3) var(--s4);position:relative}
.layer + .layer{border-top:1px solid var(--steel-rule-soft)}
.layer::before{
  content:"";position:absolute;left:0;top:var(--s3);bottom:var(--s3);width:2px;
  background:var(--steel-500);
}
.layer:nth-child(1)::before{background:linear-gradient(180deg,var(--heat-20),var(--heat-10))}
.layer:nth-child(2)::before{background:linear-gradient(180deg,var(--heat-60),var(--heat-40))}
.layer:nth-child(3)::before{background:linear-gradient(180deg,var(--steel-500),var(--heat-10))}
.layer h3{margin-bottom:var(--s1)}
.layer p{font-size:15.5px;color:var(--chalk-dim);margin:0;line-height:1.58}

/* ---------- feature ---------- */

.feature{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:var(--s6);align-items:center;
}
.feature h2{max-width:18ch}
.feature-cols{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin-top:var(--s4);
  padding-top:var(--s4);border-top:1px solid var(--steel-rule);
}
.feature-cols h4{
  font-family:var(--stamp);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass);margin-bottom:var(--s1);
}
.feature-cols p{font-size:15.5px;color:var(--chalk-dim);margin:0;line-height:1.56}

/* ---------- editorial rules: a glossary, not a sequence ---------- */

.standards{
  display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:var(--s6);align-items:start;
}
.standards > div > p{color:var(--chalk-dim);font-size:16px}

.rules{margin:0;display:grid;gap:0}
.rules > div{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);
  gap:var(--s4);padding:var(--s3) 0;
  border-bottom:1px solid var(--steel-rule-soft);
}
.rules > div:first-child{padding-top:0}
.rules dt{
  font-family:var(--display);font-size:18px;color:var(--chalk);
  line-height:1.25;position:relative;padding-left:var(--s3);
}
.rules dt::before{
  content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  transform:rotate(45deg);background:var(--brass);
}
.rules dd{margin:0;font-size:15.5px;color:var(--chalk-dim);line-height:1.56}

/* ---------- faq ---------- */

.faq{
  display:grid;grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr);
  gap:var(--s6);align-items:start;
}
.faq > div > p{color:var(--chalk-dim);font-size:16px}

details{border-bottom:1px solid var(--steel-rule-soft)}
details:first-of-type{border-top:1px solid var(--steel-rule-soft)}
details summary{
  cursor:pointer;list-style:none;padding:var(--s3) 44px var(--s3) 0;
  position:relative;font-family:var(--display);font-size:20px;color:var(--chalk);
  transition:color .2s ease;
}
details summary::-webkit-details-marker{display:none}
details summary:hover{color:var(--heat-60)}
/* a tongs-like mark that closes when the answer opens */
details summary::after{
  content:"";position:absolute;right:6px;top:50%;width:13px;height:13px;
  margin-top:-6.5px;
  background:
    linear-gradient(var(--brass),var(--brass)) center/13px 1px no-repeat,
    linear-gradient(var(--brass),var(--brass)) center/1px 13px no-repeat;
  transition:transform .22s ease;
}
details[open] summary::after{
  background:linear-gradient(var(--heat-50),var(--heat-50)) center/13px 1px no-repeat;
  transform:rotate(180deg);
}
details[open] summary{color:var(--heat-60)}
details p{
  padding:0 44px var(--s4) 0;font-size:16px;color:var(--chalk-dim);
  margin:0;max-width:62ch;line-height:1.6;
}

/* ---------- the brass panel ---------- */

.cta-gold{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);
  padding:var(--s6);
  background:linear-gradient(150deg,#e0c濃 0%,#c9a227 100%);
  background:linear-gradient(150deg,#dcc069 0%,#c9a227 46%,#9d7a15 100%);
  color:#241c05;
  position:relative;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,247,214,.4);
}
.cta-gold::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='b'><feTurbulence type='fractalNoise' baseFrequency='0.7 0.09' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='300' height='300' filter='url(%23b)' opacity='0.3'/></svg>");
  mix-blend-mode:multiply;opacity:.35;
}
.cta-gold > div{position:relative;z-index:1}
.cta-gold h2{
  color:#1d1604;background:none;-webkit-text-fill-color:#1d1604;filter:none;
}
.cta-gold p{color:#3b2f08;font-size:16px}
.cta-gold strong{color:#1d1604}
.cta-gold .eyebrow{color:rgba(29,22,4,.62)}

/* ---------- essay pages ---------- */

.page-hero{padding:var(--s6) 0 var(--s5);border-bottom:1px solid var(--steel-rule)}
.page-hero h1{max-width:17ch}
.page-hero .standfirst{
  margin-top:var(--s4);font-size:19px;line-height:1.58;color:var(--chalk);
  max-width:58ch;text-wrap:pretty;
}
.crumbs{
  font-family:var(--stamp);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--chalk-dim);margin-bottom:var(--s4);
}
.crumbs a{color:var(--chalk-dim)}
.crumbs a:hover{color:var(--brass-hi)}
.crumbs .sep{margin:0 10px;color:var(--steel-500)}

.byline{
  display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s4);
  padding-top:var(--s3);border-top:1px solid var(--steel-rule-soft);
  font-family:var(--stamp);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--chalk-dim);
}
.byline b{color:var(--brass);font-weight:400}

.prose{
  max-width:var(--measure);margin:0 auto;padding:var(--s6) 0 var(--s4);
  font-size:18px;line-height:1.68;color:var(--chalk-soft);
}
.prose > p:first-of-type::first-letter{
  float:left;font-family:var(--display);font-size:4.1em;line-height:.82;
  padding:.04em .1em 0 0;color:var(--heat-50);
}
.prose h2{font-size:clamp(25px,2.8vw,33px);margin:var(--s6) 0 var(--s3)}
.prose h3{font-size:21px;margin:var(--s5) 0 var(--s2);color:var(--brass-hi)}
.prose p{margin-bottom:var(--s3)}
.prose ul{margin:0 0 var(--s4);padding-left:var(--s3);list-style:none}
.prose ul li{position:relative;margin-bottom:var(--s2);padding-left:var(--s2)}
.prose ul li::before{
  content:"";position:absolute;left:calc(-1 * var(--s1));top:.62em;
  width:6px;height:6px;transform:rotate(45deg);background:var(--brass-dim);
}
.prose strong{color:var(--chalk);font-weight:600}
.prose em{color:var(--chalk-soft)}

.pull{
  margin:var(--s5) 0;padding:var(--s4) 0 var(--s4) var(--s4);
  border-left:2px solid var(--heat-30);
}
.pull p{
  font-family:var(--display);font-size:25px;line-height:1.32;
  color:var(--chalk);margin:0;text-wrap:balance;
}

.note{
  margin:var(--s5) 0;padding:var(--s4);
  background:var(--steel-700);border:1px solid var(--steel-rule);
}
.note h4{
  font-family:var(--stamp);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--heat-50);margin-bottom:var(--s1);
}
.note p{font-size:15.5px;color:var(--chalk-dim);margin:0;line-height:1.56}

.sources{margin:var(--s6) 0 0;padding:var(--s4) 0 0;border-top:1px solid var(--steel-rule)}
.sources h4{
  font-family:var(--stamp);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass);margin-bottom:var(--s2);
}
.sources ol{
  margin:0;padding-left:20px;font-size:14.5px;color:var(--chalk-dim);
  line-height:1.55;
}
.sources li{margin-bottom:var(--s1)}
.sources li::marker{color:var(--brass-dim)}

.next-reads{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:var(--s4);background:var(--steel-rule-soft)}
.next-reads a{
  display:block;padding:var(--s4);background:var(--steel-800);
  transition:background .22s ease;
}
.next-reads a:hover{background:var(--steel-700)}
.next-reads em{
  display:block;font-style:normal;font-family:var(--stamp);font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--brass);
  margin-bottom:var(--s2);
}
.next-reads b{
  display:block;font-family:var(--display);font-size:19px;
  color:var(--chalk);font-weight:400;line-height:1.24;
}

/* ---------- about / contact / legal ---------- */

.slab{padding:var(--s4);background:var(--steel-700);border:1px solid var(--steel-rule)}
.slab + .slab{margin-top:var(--s3)}
.slab h3{margin-bottom:var(--s1)}
.role{
  font-family:var(--stamp);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass);margin-bottom:var(--s2) !important;
}
.slab p{font-size:15.5px;color:var(--chalk-dim);line-height:1.56}

.legal{max-width:74ch}
.legal h2{font-size:clamp(22px,2.5vw,29px);margin:var(--s5) 0 var(--s2)}
.legal p,.legal li{font-size:16.5px;color:var(--chalk-soft)}
.legal ul{padding-left:var(--s3);list-style:none}
.legal li{position:relative;margin-bottom:var(--s2);padding-left:var(--s2)}
.legal li::before{
  content:"";position:absolute;left:calc(-1 * var(--s1));top:.66em;
  width:6px;height:6px;transform:rotate(45deg);background:var(--brass-dim);
}

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--steel-rule-soft)}
.contact-card{padding:var(--s4);background:var(--steel-700)}
.contact-card h3{margin-bottom:var(--s1)}
.contact-card p{font-size:15.5px;color:var(--chalk-dim);line-height:1.56}
.contact-card .mail{
  display:inline-block;margin-top:var(--s2);
  font-family:var(--display);font-size:19px;color:var(--brass-hi);
  border-bottom:1px solid var(--brass-dim);
}
.contact-card .mail:hover{color:var(--heat-60);border-color:var(--heat-40)}

/* ---------- pre-footer + footer ---------- */

.pre-footer{
  padding:var(--s6) 0;
  background:
    radial-gradient(620px 300px at 14% 50%, rgba(200,65,12,.14), transparent 66%),
    var(--steel-800);
  border-top:1px solid var(--steel-rule);
}
.pre-footer-grid{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:var(--s5);align-items:center;
}
.pre-footer h2{font-size:clamp(26px,3.2vw,40px);max-width:16ch}
.pre-footer h2 em{font-style:italic;-webkit-text-fill-color:var(--heat-50)}
.pre-footer p{margin-top:var(--s3);color:var(--chalk-dim);font-size:16px;max-width:48ch}

.site-footer{padding:var(--s6) 0 var(--s4);background:var(--steel-900);border-top:1px solid var(--steel-rule)}
.footer-grid{
  display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));
  gap:var(--s5);
}
.footer-about p{font-size:15px;color:var(--chalk-dim);max-width:32ch;margin-top:var(--s2);line-height:1.55}
.site-footer h4{
  font-family:var(--stamp);font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--brass);margin-bottom:var(--s3);
}
.site-footer nav{display:flex;flex-direction:column;gap:var(--s2)}
.site-footer nav a{font-size:15px;color:var(--chalk-soft)}
.site-footer nav a:hover{color:var(--brass-hi)}
.footer-bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s2);
  margin-top:var(--s6);padding-top:var(--s3);
  border-top:1px solid var(--steel-rule-soft);
  font-family:var(--stamp);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--chalk-dim);
}

/* ---------- responsive ---------- */

@media (max-width:1000px){
  .hero-grid,.feature,.standards,.faq,.panel-dark,.pre-footer-grid,
  .cta-gold,.section-head,.rules > div{
    grid-template-columns:1fr;
  }
  .section-head{gap:var(--s3);align-items:start}
  .section-head > p{padding-left:0;border-left:0}
  .rules > div{gap:var(--s1)}
  .rules dd{padding-left:var(--s3)}
  .hero-grid{gap:var(--s5)}
    .seal{margin:0 auto;max-width:430px}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .panel-dark{padding:var(--s4)}
  .cta-gold{padding:var(--s5)}
  .next-reads{grid-template-columns:1fr}
  .hero-facts{grid-template-columns:repeat(2,1fr);gap:var(--s4)}

  .nav{
    position:fixed;inset:78px 0 auto 0;flex-direction:column;align-items:flex-start;
    gap:0;padding:var(--s1) 30px var(--s4);margin:0;
    background:rgba(10,12,15,.98);border-bottom:1px solid var(--steel-rule);
    transform:translateY(-140%);transition:transform .3s ease;
  }
  .nav[data-open]{transform:translateY(0)}
  .nav a{width:100%;padding:16px 0;border-bottom:1px solid var(--steel-rule-soft);font-size:13px}
  .nav-toggle{
    display:block;margin-left:auto;width:44px;height:38px;
    background:transparent;border:1px solid var(--steel-rule);
    position:relative;cursor:pointer;
  }
  .nav-toggle span,.nav-toggle::before,.nav-toggle::after{
    content:"";position:absolute;left:11px;right:11px;height:1px;background:var(--brass);
  }
  .nav-toggle::before{top:12px}
  .nav-toggle span{top:18px}
  .nav-toggle::after{top:24px}
}

@media (max-width:680px){
  :root{--s6:56px;--s7:68px}
  .wrap{padding:0 22px}
  .grid-2,.grid-3,.feature-cols,.contact-grid{grid-template-columns:1fr}
  .hero-facts{grid-template-columns:1fr 1fr}
  .card,.species,.contact-card,.next-reads a{padding:var(--s4) var(--s3)}
  .species{padding-left:var(--s4)}
  .species .orb{left:var(--s2)}
  .species .tag{position:static;display:inline-block;margin-bottom:var(--s2)}
  .prose{font-size:17.5px}
  .prose > p:first-of-type::first-letter{font-size:3.4em}
  .pull p{font-size:21px}
  .cta-gold,.panel-dark{padding:var(--s4)}
}

/* ==========================================================================
   The bestiary, the fire-theft ledger and the reading list
   ========================================================================== */

/* ---------- bestiary: portrait plates, text rising out of the image ------- */

.bestiary{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--steel-rule-soft);
}
.beast{position:relative;background:var(--steel-800);display:flex;flex-direction:column}
.beast > figure{margin:0;position:relative;overflow:hidden}
.beast img{
  /* height:auto is required - the HTML height attribute is a presentational
     hint that otherwise defeats aspect-ratio and gives every card a
     different height. */
  width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;
  filter:saturate(.9) contrast(1.05) brightness(.94);
  transition:transform .6s ease,filter .4s ease;
}
/* art direction: each subject sits at a different height in its own frame */
.beast img[src*="salamander"]{object-position:center 30%}
.beast img[src*="seraph"]{object-position:center 26%}
.beast img[src*="firebird"]{object-position:center 54%}
.beast img[src*="phoenix-rising"]{object-position:center 42%}
.beast img[src*="fenghuang"]{object-position:center 34%}
.beast img[src*="djinn"]{object-position:center 46%}
.beast:hover img{transform:scale(1.035);filter:saturate(1) contrast(1.06) brightness(1)}
/* the picture is not a framed photo - it falls into the plate it sits on */
.beast > figure::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(10,12,15,.6) 0%, rgba(10,12,15,.05) 24%,
    rgba(10,12,15,.05) 46%, rgba(14,17,22,.88) 86%, var(--steel-800) 100%);
}
.beast .tradition{
  position:absolute;z-index:2;top:var(--s3);left:var(--s3);
  font-family:var(--stamp);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--chalk);background:rgba(10,12,15,.55);
  border:1px solid rgba(163,184,205,.28);padding:5px 10px;
  backdrop-filter:blur(3px);
}
.beast .body{position:relative;z-index:2;margin-top:-52px;padding:0 var(--s4) var(--s4)}
.beast h3{font-size:27px;margin-bottom:4px}
.beast .epithet{
  font-family:var(--body);font-style:italic;font-size:14.5px;
  color:var(--heat-50);margin:0 0 var(--s2);
}
.beast p{font-size:15px;color:var(--chalk-dim);line-height:1.56}

/* ---------- full-bleed banner ---------- */

.banner{
  position:relative;overflow:hidden;
  min-height:min(88vh,760px);
  display:grid;align-items:end;justify-items:center;
  border-top:1px solid var(--steel-rule);border-bottom:1px solid var(--steel-rule);
}
.banner img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* framed on the bird, not the centre - the words take the lower third */
  object-position:center 24%;
  filter:saturate(.9) contrast(1.05) brightness(.86);
}
.banner::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,var(--steel-900) 0%,rgba(10,12,15,.12) 20%,
                    rgba(10,12,15,.55) 58%,rgba(10,12,15,.93) 86%,var(--steel-900) 100%),
    radial-gradient(130% 80% at 50% 34%,transparent 30%,rgba(10,12,15,.6) 100%);
}
.banner blockquote{
  position:relative;z-index:2;margin:0 0 var(--s6);padding:0 var(--s4);
  /* px, not ch - a ch here resolves against the small container font,
     not the large display type inside, and collapses the line length */
  max-width:min(780px,88vw);text-align:center;
}
.banner blockquote p{
  font-family:var(--display);font-size:clamp(27px,3.8vw,46px);
  line-height:1.16;color:var(--chalk);margin:0;text-wrap:balance;
  text-shadow:0 2px 24px rgba(0,0,0,.75);
}
.banner cite{
  display:block;margin-top:var(--s4);font-style:normal;
  font-family:var(--stamp);font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--brass);
}

/* ---------- the fire-theft ledger: genuinely tabular, so a table --------- */

.ledger-wrap{overflow-x:auto;margin-top:var(--s5)}
.ledger{width:100%;min-width:660px;border-collapse:collapse;text-align:left}
.ledger th{
  font-family:var(--stamp);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass);font-weight:400;
  padding:0 var(--s4) var(--s2) 0;border-bottom:1px solid var(--steel-rule);
}
.ledger td{
  padding:var(--s3) var(--s4) var(--s3) 0;
  border-bottom:1px solid var(--steel-rule-soft);
  color:var(--chalk-dim);font-size:15.5px;line-height:1.5;vertical-align:top;
}
.ledger tbody tr:hover td{color:var(--chalk-soft);background:rgba(163,184,205,.03)}
.ledger td:first-child{
  color:var(--chalk);font-family:var(--display);font-size:18px;
  white-space:nowrap;padding-left:var(--s3);position:relative;
}
.ledger td:first-child::before{
  content:"";position:absolute;left:0;top:calc(var(--s3) + .55em);
  width:6px;height:6px;transform:rotate(45deg);background:var(--brass-dim);
}
.ledger td:last-child{color:var(--heat-50)}

/* ---------- a picture set in a plate (for the wide, non-square art) ------ */

.plate{position:relative;overflow:hidden;border:1px solid var(--steel-rule)}
.plate img{width:100%;height:auto;filter:saturate(.95) contrast(1.06)}
/* warms artwork that arrives in a colder palette than the page */
.plate::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(255,122,24,.16),rgba(200,65,12,.06) 60%,transparent),
    radial-gradient(100% 80% at 50% 50%,transparent 40%,rgba(10,12,15,.55) 100%);
  mix-blend-mode:soft-light;
}
.plate figcaption{
  padding:var(--s2) var(--s3);border-top:1px solid var(--steel-rule);
  font-family:var(--stamp);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--chalk-dim);
  position:relative;z-index:2;background:var(--steel-800);
}

/* ---------- reading list ---------- */

.tales{list-style:none;margin:0;padding:0}
.tales li{
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.55fr);
  gap:var(--s4);padding:var(--s3) 0;
  border-bottom:1px solid var(--steel-rule-soft);
}
.tales li:first-child{border-top:1px solid var(--steel-rule-soft)}
.tales .title{
  font-family:var(--display);font-size:19px;color:var(--chalk);
  line-height:1.22;position:relative;padding-left:var(--s3);
}
.tales .title::before{
  content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;
  transform:rotate(45deg);background:var(--brass);
}
.tales .where{
  display:block;margin-top:8px;padding-left:var(--s3);
  font-family:var(--stamp);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--chalk-dim);
}
.tales p{margin:0;font-size:15.5px;color:var(--chalk-dim);line-height:1.56}

/* ---------- responsive for the new blocks ---------- */

@media (max-width:1000px){
  .bestiary{grid-template-columns:repeat(2,1fr)}
  .tales li{grid-template-columns:1fr;gap:var(--s1)}
  .tales p{padding-left:var(--s3)}
  .banner{min-height:min(72vh,540px)}
}
@media (max-width:680px){
  .bestiary{grid-template-columns:1fr}
  .beast img{aspect-ratio:4/5}
  .banner{min-height:460px}
  .banner blockquote{margin-bottom:var(--s5)}
}

.lead-h3{font-size:23px;margin-bottom:var(--s2)}
.ledger caption{
  font-family:var(--stamp);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass);text-align:left;
  padding-bottom:var(--s2);
}

/* this one arrived in a blue palette - pulled into the page's temperature */
.plate img[src*="arrow"]{
  filter:saturate(.55) sepia(.5) hue-rotate(-14deg) saturate(1.5) contrast(1.08) brightness(1.02);
}


/* ---------- essay block: a reference column instead of a decorative seal --- */

.essay-block{
  display:grid;grid-template-columns:minmax(0,.3fr) minmax(0,.7fr);
  gap:var(--s6);align-items:start;
}
.essay-block > div:last-child > h2{max-width:20ch;margin-bottom:var(--s3)}
.essay-block-side{position:relative;padding-top:var(--s2)}
.essay-block-side::before{
  content:"";position:absolute;top:0;left:0;width:44px;height:1px;
  background:linear-gradient(90deg,var(--heat-40),transparent);
}
.essay-block-side .eyebrow{margin-bottom:var(--s3)}
.essay-block-side .ref{
  font-family:var(--display);font-size:17px;line-height:1.4;
  color:var(--chalk-dim);margin:0;
}
.essay-block-side .ref em{color:var(--chalk-soft)}

@media (max-width:1000px){
  .essay-block{grid-template-columns:1fr;gap:var(--s3)}
}