@charset "UTF-8";
/* ===========================================================================
   UNGODLY · BLASPHEMOUS — installation guide
   Guide & plugins by StixsworldHD (StixsmasterHD4k)

   Direction: a gilded altarpiece in a dark cathedral. Bone text on near-black,
   gold hairline tracery, crimson rubrics. Commentary lives in the margin the
   way a gloss lives beside the text it argues with.
   =========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root{
  --ink:        #0B0A0E;   /* nave dark  */
  --ink-2:      #0F0D13;
  --crypt:      #14111A;   /* raised panel */
  --crypt-2:    #1B1723;
  --bone:       #E9E0CF;   /* parchment text */
  --bone-2:     #BEB4A2;
  --bone-3:     #8B8375;
  --gild:       #D2A24B;   /* gold leaf */
  --gild-2:     #A67C2E;
  --gild-3:     #9C7A33;   /* readable at text sizes */
  --gild-4:     #6B4F1C;   /* decorative only: rules, scrollbars */
  --crimson:    #B0303A;   /* rubric — strokes, borders, rules */
  --crimson-tx: #D2555E;   /* rubric — text, where 4.5:1 is required */
  --ember:      #FF6B4A;   /* the elite tint, used live */
  --glass:      #8CC3D8;   /* stained glass */

  --rule:       rgba(210,162,75,.20);
  --rule-soft:  rgba(233,224,207,.10);
  --shadow:     0 18px 46px rgba(0,0,0,.55);

  --f-disp: "Cinzel", "Trajan Pro", Constantia, Georgia, serif;
  --f-body: "Spectral", Georgia, "Times New Roman", serif;
  --f-mono: "JetBrains Mono", "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;

  --measure: 42rem;
  --gloss-w: 15rem;
  --gloss-gap: 2rem;
  --gloss-out: 17rem;      /* gloss-w + gloss-gap */

  --rail-w: 15.5rem;
  --top-h: 4.25rem;
}

/* ------------------------------------------------------------------- reset */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--top-h) + 1.5rem); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font:400 1.0625rem/1.72 var(--f-body);
  font-feature-settings:"onum" 1,"kern" 1;
  overflow-x:hidden;
}

/* faint vaulting: two dim shafts of light, nothing more */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(48rem 34rem at 78% -8%,  rgba(140,195,216,.055), transparent 68%),
    radial-gradient(40rem 30rem at 6% 104%,  rgba(176,48,58,.05),    transparent 66%),
    linear-gradient(180deg,#0C0B10 0%, #0B0A0E 46%, #08070B 100%);
}

img{ max-width:100%; height:auto; display:block; }
h1,h2,h3,h4{ margin:0; font-weight:500; }

a{ color:var(--glass); text-decoration:none; text-underline-offset:.2em;
   text-decoration-color:rgba(140,195,216,.4); transition:color .16s, text-decoration-color .16s; }
a:hover{ color:#B9E0EE; text-decoration:underline; text-decoration-color:currentColor; }

:focus-visible{ outline:2px solid var(--gild); outline-offset:3px; border-radius:1px; }

::selection{ background:rgba(176,48,58,.55); color:#FFF3E2; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gild); color:#150F04; padding:.7rem 1.1rem;
  font:700 .8rem/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase;
}
.skip:focus{ left:.5rem; top:.5rem; }

/* ================================================================== top bar */
.top{
  position:sticky; top:0; z-index:90;
  background:rgba(9,8,12,.90);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  border-bottom:1px solid var(--rule);
}
.top__in{
  max-width:1560px; margin:0 auto; height:var(--top-h);
  padding:0 clamp(1rem,3vw,2.25rem);
  display:flex; align-items:center; gap:1rem;
}
.brand{ display:flex; align-items:center; gap:.7rem; color:var(--gild); text-decoration:none; }
.brand:hover{ color:#E6BC6C; }
.brand__m{ width:1.35rem; height:1.7rem; flex:none; }
.brand__t{ display:flex; flex-direction:column; line-height:1.1; }
.brand__n{ font:700 1.02rem/1 var(--f-disp); letter-spacing:.14em; text-transform:uppercase; }
.brand__s{ font:400 .68rem/1.3 var(--f-mono); letter-spacing:.05em; color:var(--bone-3); margin-top:.28rem; }

.topnav{ margin-left:auto; display:flex; align-items:center; gap:1.5rem; }
.topnav a{
  font:400 .78rem/1 var(--f-mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--bone-2); text-decoration:none; padding:.4rem 0; border-bottom:1px solid transparent;
}
.topnav a:hover{ color:var(--bone); border-bottom-color:var(--gild-2); }
.topnav a[aria-current]{ color:var(--gild); border-bottom-color:var(--gild); }
.topnav__cta{
  border:1px solid var(--rule); padding:.5rem .85rem !important; color:var(--gild) !important;
  background:rgba(210,162,75,.06);
}
.topnav__cta:hover{ background:rgba(210,162,75,.14); border-color:var(--gild-2); }

.navtog{
  display:none; margin-left:auto; align-items:center; gap:.55rem;
  background:none; border:1px solid var(--rule); color:var(--bone-2);
  font:400 .72rem/1 var(--f-mono); letter-spacing:.1em; text-transform:uppercase;
  padding:.55rem .8rem; cursor:pointer;
}
.navtog__b{ width:1rem; height:.6rem; border-top:1px solid currentColor; border-bottom:1px solid currentColor;
  position:relative; }
.navtog__b::after{ content:""; position:absolute; left:0; top:calc(50% - .5px); width:100%; border-top:1px solid currentColor; }

/* ================================================================== shell */
.shell{
  max-width:1560px; margin:0 auto;
  display:grid; grid-template-columns:var(--rail-w) minmax(0,1fr);
}

/* ---------------------------------------------------------------- the rail */
.rail{ border-right:1px solid var(--rule); }
.rail__in{
  position:sticky; top:var(--top-h);
  padding:2.5rem 1.15rem 3rem 1.5rem;
  max-height:calc(100vh - var(--top-h)); overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:var(--gild-4) transparent;
}
.rail__in::-webkit-scrollbar{ width:6px; }
.rail__in::-webkit-scrollbar-thumb{ background:var(--gild-4); }

.rail__k{
  margin:0 0 .9rem; font:400 .64rem/1 var(--f-mono);
  letter-spacing:.22em; text-transform:uppercase; color:var(--gild-2);
}
.rail__k--sub{ margin-top:2.25rem; padding-top:1.5rem; border-top:1px solid var(--rule); }

.rail__list{ list-style:none; margin:0; padding:0; counter-reset:none; }
.rail__i a{
  display:grid; grid-template-columns:1.9rem 1fr; align-items:baseline; gap:.3rem;
  padding:.42rem 0; color:var(--bone-2); text-decoration:none;
  font-size:.905rem; line-height:1.4; border-left:2px solid transparent; padding-left:.7rem; margin-left:-.7rem;
}
.rail__i a:hover{ color:var(--bone); }
.rail__n{ font:400 .68rem/1.7 var(--f-mono); color:var(--gild-3); letter-spacing:.05em; }
.rail__i.is-here a{ color:var(--gild); border-left-color:var(--crimson); }
.rail__i.is-here .rail__n{ color:var(--crimson-tx); }
.rail__i--util{ margin-top:.55rem; padding-top:.55rem; border-top:1px solid var(--rule-soft); }

.rail__toc{ list-style:none; margin:0; padding:0; }
.rail__toc a{
  display:block; padding:.3rem 0 .3rem .85rem; margin-left:-.1rem;
  border-left:1px solid var(--rule-soft);
  color:var(--bone-3); font-size:.83rem; line-height:1.42; text-decoration:none;
}
.rail__toc a:hover{ color:var(--bone-2); border-left-color:var(--gild-4); }
.rail__toc a.is-active{ color:var(--glass); border-left-color:var(--glass); }

.rail__sig{
  margin:2.5rem 0 0; padding-top:1.4rem; border-top:1px solid var(--rule-soft);
  font:400 .74rem/1.6 var(--f-mono); color:var(--bone-3);
}
.rail__sig b{ color:var(--bone-2); font-weight:400; }

/* ---------------------------------------------------------------- the main */
.main{ padding:3.25rem clamp(1.25rem,3.5vw,3.5rem) 5.5rem; min-width:0; }

/* page head */
.phead{ max-width:var(--measure); margin-bottom:2.75rem; }
.phead__e{
  margin:0 0 1rem; font:400 .7rem/1 var(--f-mono);
  letter-spacing:.26em; text-transform:uppercase; color:var(--crimson-tx);
}
.phead__h{
  font:500 clamp(2.1rem,4.6vw,3.1rem)/1.08 var(--f-disp);
  letter-spacing:.005em; color:#F5EEE0; margin:0 0 1.15rem;
}
.phead__l{ margin:0; font-size:1.135rem; line-height:1.66; color:var(--bone-2); font-weight:300; }
.phead::after{
  content:""; display:block; width:3.5rem; height:1px; margin-top:1.9rem;
  background:linear-gradient(90deg,var(--gild),transparent);
}

/* =============================================================== prose body */
.prose{ max-width:var(--measure); }
.prose p{ margin:0 0 1.15rem; }
.prose .lead{ font-size:1.1rem; color:var(--bone-2); font-weight:300; }
.prose strong,.prose b{ color:#F6EFE1; font-weight:600; }
.prose em{ color:var(--bone-2); }

.prose ul,.prose ol{ margin:0 0 1.3rem; padding-left:1.2rem; }
.prose li{ margin-bottom:.5rem; }
.prose ul{ list-style:none; padding-left:1.35rem; }
.prose ul > li{ position:relative; }
.prose ul > li::before{
  content:"\203A"; position:absolute; left:-1.1rem; top:-.06em;
  color:var(--gild-2); font-size:1.05em;
}
.prose ol{ list-style:none; counter-reset:ol; padding-left:1.9rem; }
.prose ol > li{ position:relative; counter-increment:ol; }
.prose ol > li::before{
  content:counter(ol,decimal-leading-zero); position:absolute; left:-1.9rem; top:.28em;
  font:400 .7rem/1 var(--f-mono); color:var(--gild-3); letter-spacing:.04em;
}

/* sections */
.sec{ margin:0 0 3.25rem; }
.sec:last-child{ margin-bottom:1.5rem; }
.sec__eyebrow{
  margin:0 0 .55rem; font:400 .66rem/1 var(--f-mono);
  letter-spacing:.22em; text-transform:uppercase; color:var(--gild-2);
}
.sec__h{
  font:500 clamp(1.42rem,2.6vw,1.78rem)/1.24 var(--f-disp);
  color:#F3EBDC; margin:0 0 1.15rem; padding-bottom:.75rem;
  border-bottom:1px solid var(--rule);
  position:relative;
}
.sec__anchor{
  margin-left:.5rem; color:var(--gild-3); font-family:var(--f-mono); font-size:.72em;
  opacity:0; text-decoration:none; transition:opacity .16s;
}
.sec__h:hover .sec__anchor{ opacity:1; }
.sub__h{
  font:600 1.02rem/1.4 var(--f-body); color:var(--gild);
  margin:2.1rem 0 .8rem; letter-spacing:.005em;
}
.sub__h + p{ margin-top:0; }

/* inline code */
code{ font-family:var(--f-mono); font-size:.855em; }
/* long identifiers and paths must never push the page sideways.
   Harmless inside <pre>, where white-space:pre suppresses wrapping anyway. */
.prose code, .call code, .steps__b code, .dt code{ overflow-wrap:break-word; }
.tile__facts code, .tile__facts dd{ overflow-wrap:anywhere; }
.path{
  background:rgba(210,162,75,.08); border:1px solid rgba(210,162,75,.18);
  color:#EBD4A4; padding:.08em .38em; border-radius:2px; word-break:break-word;
}
.cfgkey{
  background:rgba(140,195,216,.07); border:1px solid rgba(140,195,216,.18);
  color:#BEE0EC; padding:.08em .38em; border-radius:2px; word-break:break-word;
}
.prose p > code:not(.path):not(.cfgkey),
.prose li > code:not(.path):not(.cfgkey),
.prose td > code, .prose th > code, .prose dd > code{
  background:rgba(233,224,207,.06); color:#DCD3C2; padding:.08em .34em; border-radius:2px;
}

.kbd{
  display:inline-block; font:700 .74em/1.5 var(--f-mono); letter-spacing:.04em;
  color:#1A1206; background:linear-gradient(180deg,#E4BC72,#C79535);
  border:1px solid #8C6A24; border-bottom-width:2px; border-radius:3px;
  padding:.06em .44em; vertical-align:.06em; white-space:nowrap;
}

/* ------------------------------------------------------- marginal glosses */
.gloss{
  margin:1.3rem 0 1.6rem; padding:.1rem 0 .1rem 1.05rem;
  border-left:1px solid var(--crimson);
  font:italic 400 .885rem/1.6 var(--f-body); color:var(--bone-3);
}
.gloss__mark{ color:var(--crimson-tx); font-style:normal; margin-right:.4rem; font-size:1.02em; }
.gloss b{ color:var(--bone-2); font-weight:600; font-style:normal; }
.gloss code{ font-style:normal; }

@media (min-width:1360px){
  .gloss{
    float:right; clear:right;
    width:var(--gloss-w); margin:.35rem calc(var(--gloss-out) * -1) 1.2rem var(--gloss-gap);
    padding-left:.85rem;
  }
}

/* ----------------------------------------------------------------- callouts */
.call{
  margin:1.6rem 0; padding:1.05rem 1.25rem 1.1rem;
  background:var(--crypt); border:1px solid var(--rule-soft); border-left:2px solid var(--bone-3);
}
.call__t{ margin:0 0 .5rem !important; font:600 .96rem/1.45 var(--f-body); color:#F2EADB; }
.call__i{ margin-right:.5rem; font-size:.95em; }
.call__b > p:last-child{ margin-bottom:0 !important; }
.call__b{ font-size:.985rem; color:var(--bone-2); }
.call__b ul,.call__b ol{ margin-bottom:0; }

.call--warn{ border-left-color:var(--crimson); background:linear-gradient(90deg,rgba(176,48,58,.09),var(--crypt) 42%); }
.call--warn .call__i{ color:var(--crimson-tx); }
.call--stop{ border-left-color:var(--ember); background:linear-gradient(90deg,rgba(255,107,74,.10),var(--crypt) 42%); }
.call--stop .call__i{ color:var(--ember); }
.call--note{ border-left-color:var(--glass); background:linear-gradient(90deg,rgba(140,195,216,.07),var(--crypt) 42%); }
.call--note .call__i{ color:var(--glass); }
.call--do{ border-left-color:var(--gild); background:linear-gradient(90deg,rgba(210,162,75,.09),var(--crypt) 42%); }
.call--do .call__i{ color:var(--gild); }

/* -------------------------------------------------------------------- steps */
.steps{ list-style:none !important; counter-reset:st; margin:1.75rem 0 2rem !important; padding:0 !important; }
.steps__i{
  position:relative; counter-increment:st;
  padding:0 0 1.5rem 3.35rem; margin:0 0 .1rem;
  border-left:1px solid var(--rule);
}
.steps__i::before{
  content:counter(st,decimal-leading-zero) !important;
  position:absolute; left:0 !important; top:-.1rem !important;
  transform:translateX(-50%);
  width:2rem; height:2rem; display:grid; place-items:center;
  background:var(--ink); border:1px solid var(--gild-3); border-radius:50%;
  font:400 .72rem/1 var(--f-mono) !important; color:var(--gild) !important; letter-spacing:.02em;
}
.steps__i:last-child{ border-left-color:transparent; padding-bottom:.4rem; }
.steps__t{ font:600 1.04rem/1.4 var(--f-body); color:#F4ECDE; margin:0 0 .55rem !important; }
.steps__b > p:first-child{ margin-top:0; }
.steps__b > *:last-child{ margin-bottom:0 !important; }
.steps__b{ color:var(--bone-2); }

/* --------------------------------------------------------------- file trees */
.tree{ margin:1.75rem 0 2rem; }
.tree__cap{
  margin:0 0 .6rem; font:400 .68rem/1.4 var(--f-mono);
  letter-spacing:.15em; text-transform:uppercase; color:var(--gild-2);
}
.tree__pre{
  margin:0; padding:1.15rem 1.25rem; overflow-x:auto;
  background:#0A0910; border:1px solid var(--rule);
  font:400 .82rem/1.75 var(--f-mono); color:var(--bone-3);
  scrollbar-width:thin; scrollbar-color:var(--gild-4) transparent;
}
.tree__pre code{ font-size:inherit; background:none; }
.t-add{ color:var(--gild); }
.t-gen{ color:var(--glass); }
.t-dim{ color:#8A8279; }
.t-bad{ color:var(--ember); text-decoration:line-through; }
.t-note{ color:#827C73; font-style:normal; }
.tree__legend{
  margin:.65rem 0 0 !important; font:400 .7rem/1.6 var(--f-mono); color:var(--bone-3);
}
.tree__legend span{ font-size:.85em; vertical-align:.08em; }

/* ---------------------------------------------------------------- copy rows */
.copy{ margin:1.35rem 0 1.75rem; }
.copy__l{ margin:0 0 .5rem !important; font:400 .68rem/1.4 var(--f-mono);
  letter-spacing:.15em; text-transform:uppercase; color:var(--gild-2); }
.copy__row{ display:flex; align-items:stretch; border:1px solid var(--rule); background:#0A0910; }
.copy__c{
  flex:1; min-width:0; padding:.72rem .9rem; overflow-x:auto; white-space:nowrap;
  font:400 .82rem/1.6 var(--f-mono); color:#EBD4A4;
  scrollbar-width:thin; scrollbar-color:var(--gild-4) transparent;
}
.copy__b{
  flex:none; border:0; border-left:1px solid var(--rule); background:rgba(210,162,75,.07);
  color:var(--gild); font:400 .7rem/1 var(--f-mono); letter-spacing:.12em; text-transform:uppercase;
  padding:0 1rem; cursor:pointer; transition:background .15s,color .15s;
}
.copy__b:hover{ background:rgba(210,162,75,.18); color:#F0D69C; }
.copy__b.is-done{ color:var(--glass); }

/* ------------------------------------------------------------------ figures */
.fig{ margin:2rem 0 2.25rem; }
@media (min-width:1360px){
  .fig--wide{ width:calc(100% + var(--gloss-out)); }
}
.fig__a{
  position:relative; display:block; text-decoration:none;
  border:1px solid var(--rule); padding:.5rem; background:#0A0910;
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
.fig__a:hover{ border-color:var(--gild-2); box-shadow:var(--shadow); }
.fig__img{ width:100%; }
.fig__zoom{
  position:absolute; right:1.1rem; bottom:1.1rem;
  background:rgba(9,8,12,.86); border:1px solid var(--gild-3); color:var(--gild);
  font:400 .68rem/1 var(--f-mono); letter-spacing:.1em; text-transform:uppercase;
  padding:.5rem .7rem; opacity:0; transform:translateY(.25rem); transition:opacity .2s, transform .2s;
}
.fig__a:hover .fig__zoom, .fig__a:focus-visible .fig__zoom{ opacity:1; transform:none; }
.fig__corner{ position:absolute; width:.7rem; height:.7rem; border:0 solid var(--gild); opacity:.65; }
.fig__corner--tl{ top:-1px; left:-1px; border-top-width:2px; border-left-width:2px; }
.fig__corner--tr{ top:-1px; right:-1px; border-top-width:2px; border-right-width:2px; }
.fig__corner--bl{ bottom:-1px; left:-1px; border-bottom-width:2px; border-left-width:2px; }
.fig__corner--br{ bottom:-1px; right:-1px; border-bottom-width:2px; border-right-width:2px; }
.fig__cap{
  margin:.85rem 0 0; font-size:.905rem; line-height:1.6; color:var(--bone-3);
  max-width:var(--measure);
}
.fig__cap b{ color:var(--bone-2); font-weight:600; }
.fig__meta{ display:block; margin-top:.3rem; font:400 .72rem/1.5 var(--f-mono); color:#867F75; }

/* ------------------------------------------------------------------- tables */
.tw{ margin:1.6rem 0 2rem; overflow-x:auto; scrollbar-width:thin; scrollbar-color:var(--gild-4) transparent; }
@media (min-width:1360px){ .tw--wide{ width:calc(100% + var(--gloss-out)); } }
.dt{ width:100%; border-collapse:collapse; font-size:.94rem; }
.dt th,.dt td{ text-align:left; padding:.62rem .85rem; border-bottom:1px solid var(--rule-soft); vertical-align:top; }
.dt thead th{
  font:400 .66rem/1.4 var(--f-mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--gild-2); border-bottom:1px solid var(--rule); white-space:nowrap;
}
.dt tbody th{ font-weight:600; color:#F1E9DA; white-space:nowrap; }
.dt tbody tr:hover td, .dt tbody tr:hover th{ background:rgba(210,162,75,.04); }
.dt td{ color:var(--bone-2); }
.dt--num td:not(:first-child){ font-family:var(--f-mono); font-size:.86rem; white-space:nowrap; }

/* --------------------------------------------------------------- def lists */
.deflist{ margin:1.4rem 0 1.9rem; }
.deflist > div{ padding:.75rem 0; border-bottom:1px solid var(--rule-soft); display:grid;
  grid-template-columns:11rem 1fr; gap:1rem; }
.deflist dt{ font:400 .78rem/1.6 var(--f-mono); color:var(--gild-2); letter-spacing:.03em; }
.deflist dd{ margin:0; color:var(--bone-2); font-size:.97rem; }
@media (max-width:640px){ .deflist > div{ grid-template-columns:1fr; gap:.2rem; } }

/* ------------------------------------------------------------ download tile */
.tiles{ display:grid; gap:1.5rem; margin:2rem 0 2.5rem; }
@media (min-width:1360px){ .tiles{ width:calc(100% + var(--gloss-out)); grid-template-columns:1fr 1fr; } }
/* grid items default to min-width:auto, so a long filename inside one would
   otherwise widen the whole track and push the page sideways on a phone. */
.tiles > .tile{ min-width:0; }
.tile{
  background:linear-gradient(180deg,var(--crypt) 0%, #100E15 100%);
  border:1px solid var(--rule-soft); padding:1.5rem 1.5rem 1.35rem; position:relative;
}
.tile::before{
  content:""; position:absolute; left:-1px; top:-1px; bottom:-1px; width:2px; background:var(--bone-3);
}
.tile--gild::before{ background:linear-gradient(180deg,var(--gild),transparent); }
.tile--crimson::before{ background:linear-gradient(180deg,var(--crimson),transparent); }
.tile__k{ margin:0 0 .35rem !important; font:400 .66rem/1 var(--f-mono);
  letter-spacing:.2em; text-transform:uppercase; color:var(--bone-3); }
.tile--gild .tile__k{ color:var(--gild-2); }
.tile--crimson .tile__k{ color:var(--crimson-tx); }
.tile__t{ font:500 1.4rem/1.2 var(--f-disp); color:#F5EEE0; margin:0 0 .9rem; }
.tile__v{ font:400 .82rem/1 var(--f-mono); color:var(--bone-3); letter-spacing:.04em; vertical-align:.28em; }
.tile__blurb{ margin:0 0 1.15rem !important; font-size:.95rem; line-height:1.62; color:var(--bone-2); }
.tile__facts{ margin:0 0 1.25rem; border-top:1px solid var(--rule-soft); }
.tile__facts > div{ display:grid; grid-template-columns:7.2rem 1fr; gap:.75rem;
  padding:.42rem 0; border-bottom:1px solid var(--rule-soft); }
.tile__facts dt{ font:400 .68rem/1.7 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--bone-3); }
.tile__facts dd{ margin:0; font-size:.88rem; color:var(--bone-2); min-width:0; overflow-wrap:anywhere; }
.tile__facts code{ color:#EBD4A4; }
.tile__acts{ display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:1.1rem; }
.tile__sha{ margin:0 !important; font:400 .66rem/1.6 var(--f-mono); color:#8A8379; overflow-wrap:anywhere; }
.tile__sha span{ color:var(--bone-3); letter-spacing:.14em; text-transform:uppercase; margin-right:.5rem; }

.btn{
  display:inline-block; font:400 .76rem/1 var(--f-mono); letter-spacing:.1em; text-transform:uppercase;
  padding:.72rem 1rem; border:1px solid var(--rule); color:var(--bone-2); text-decoration:none;
  background:rgba(233,224,207,.03); transition:background .15s,border-color .15s,color .15s;
}
.btn:hover{ background:rgba(233,224,207,.08); border-color:var(--bone-3); color:var(--bone); text-decoration:none; }
.btn--pri{
  background:linear-gradient(180deg,#E0B45F,#BE8E31); border-color:#8C6A24; color:#170F03; font-weight:700;
}
.btn--pri:hover{ background:linear-gradient(180deg,#EDC672,#CE9C38); color:#0F0A02; border-color:#A57E2B; }
.btn--ghost{ border-style:dashed; }

/* ------------------------------------------------------------------- pager */
.pager{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
  margin-top:4rem; padding-top:1.75rem; border-top:1px solid var(--rule);
  max-width:calc(var(--measure) + var(--gloss-out));
}
.pager__l{
  display:flex; flex-direction:column; gap:.35rem; padding:1rem 1.15rem;
  border:1px solid var(--rule-soft); text-decoration:none; background:rgba(233,224,207,.02);
  transition:border-color .18s, background .18s;
}
.pager__l:hover{ border-color:var(--gild-3); background:rgba(210,162,75,.05); text-decoration:none; }
.pager__l--next{ text-align:right; }
.pager__l--empty{ border:0; background:none; }
.pager__d{ font:400 .66rem/1 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--gild-2); }
.pager__t{ font:500 1.02rem/1.35 var(--f-disp); color:var(--bone); letter-spacing:.01em; }

/* ------------------------------------------------------------------- footer */
.foot{ border-top:1px solid var(--rule); background:#08070B; margin-top:2rem; }
.foot__in{
  max-width:1560px; margin:0 auto; padding:3.25rem clamp(1.25rem,3.5vw,3.5rem) 1.75rem;
  display:grid; gap:2.25rem; grid-template-columns:1.4fr 1fr 1fr 1fr;
}
.foot__mark{ margin:0 0 .6rem; color:var(--crimson-tx); font-size:1.5rem; line-height:1; }
.foot__n{ margin:0 0 .3rem; font:500 1.06rem/1.2 var(--f-disp); letter-spacing:.1em;
  text-transform:uppercase; color:var(--gild); }
.foot__s{ margin:0; font-size:.9rem; color:var(--bone-3); }
.foot__k{ margin:0 0 .85rem; font:400 .64rem/1 var(--f-mono);
  letter-spacing:.2em; text-transform:uppercase; color:var(--gild-2); }
.foot__list{ list-style:none; margin:0; padding:0; }
.foot__list li{ margin-bottom:.42rem; }
.foot__list a{ color:var(--bone-3); font-size:.885rem; text-decoration:none; }
.foot__list a:hover{ color:var(--bone); }
.foot__law{
  max-width:1560px; margin:0 auto; padding:1.5rem clamp(1.25rem,3.5vw,3.5rem) 3rem;
  border-top:1px solid var(--rule-soft);
  font-size:.83rem; line-height:1.7; color:#867F75;
}
.foot__law b{ color:var(--bone-3); font-weight:600; }

/* ==================================================================== HOME */
.hero{
  display:grid; gap:clamp(2rem,5vw,4rem); align-items:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  padding-bottom:3.5rem; margin-bottom:3.5rem; border-bottom:1px solid var(--rule);
}
.hero__k{
  margin:0 0 1.15rem; font:400 .7rem/1 var(--f-mono);
  letter-spacing:.26em; text-transform:uppercase; color:var(--crimson-tx);
}
.hero__h{
  font:500 clamp(2.35rem,5.2vw,3.75rem)/1.06 var(--f-disp); color:#F8F2E6; margin:0 0 1.35rem;
}
.hero__h em{ font-style:normal; color:var(--gild); }
.hero__p{ font-size:1.14rem; line-height:1.68; color:var(--bone-2); font-weight:300; margin:0 0 1.1rem; max-width:34rem; }
.hero__acts{ display:flex; flex-wrap:wrap; gap:.65rem; margin-top:2rem; }
.hero__note{ margin:1.5rem 0 0 !important; font:400 .78rem/1.6 var(--f-mono); color:var(--bone-3); }

@media (max-width:1080px){ .hero{ grid-template-columns:1fr; } }

/* the reliquary */
.rel{ display:flex; justify-content:center; }
.rel__svg{ width:100%; max-width:29rem; height:auto; overflow:visible; }
.rel__arch{ fill:none; stroke:var(--gild); stroke-opacity:.42; stroke-width:1.15; }
.rel__arch--in{ stroke-opacity:.18; stroke-width:.9; }
.rel__sill{ stroke:var(--gild); stroke-opacity:.5; stroke-width:1.5; }
.rel__boss{ fill:none; stroke:var(--crimson); stroke-width:1.3; }
.rel__spine{ stroke:var(--gild); stroke-opacity:.3; stroke-width:1; fill:none; }
.rel__tick path{ fill:var(--gild); fill-opacity:.65; }
.rel__node rect{ fill:rgba(20,17,26,.82); stroke:var(--gild); stroke-opacity:.28; stroke-width:1; }
.rel__node--key rect{ stroke:var(--glass); stroke-opacity:.5; }
.rel__leaf rect{ fill:rgba(20,17,26,.9); stroke-width:1.1; }
.rel__leaf--gild rect{ stroke:var(--gild); stroke-opacity:.75; }
.rel__leaf--crimson rect{ stroke:var(--crimson); stroke-opacity:.85; }
.rel__lbl{
  font-family:var(--f-mono); font-size:14px; fill:#F1E9DA; text-anchor:middle; letter-spacing:.01em;
}
.rel__leaf--gild .rel__lbl{ fill:var(--gild); }
.rel__leaf--crimson .rel__lbl{ fill:#E4707A; }
.rel__sub{
  font-family:var(--f-body); font-size:11.5px; font-style:italic; fill:#867E71; text-anchor:middle;
}
.rel__node--key .rel__sub{ fill:var(--glass); fill-opacity:.75; }
.rel__foot{
  font-family:var(--f-mono); font-size:9.5px; fill:#867F75; text-anchor:middle; letter-spacing:.14em;
  text-transform:uppercase;
}

.rel__node,.rel__leaf,.rel__tick,.rel__spine{ opacity:0; animation:relIn .55s ease-out forwards; }
.rel__node:nth-of-type(1){ animation-delay:.15s; }
.rel__spine:nth-of-type(1){ animation-delay:.3s; }
@keyframes relIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.rel__svg > g,.rel__svg > path.rel__spine{ transform-box:fill-box; transform-origin:center; }
.js-off .rel__node,.js-off .rel__leaf,.js-off .rel__tick,.js-off .rel__spine{ opacity:1; animation:none; }
@media (prefers-reduced-motion: reduce){
  .rel__node,.rel__leaf,.rel__tick,.rel__spine{ opacity:1; animation:none; }
}

/* spec strip */
.spec{
  display:grid; gap:0; grid-template-columns:repeat(4,1fr);
  border:1px solid var(--rule-soft); margin:0 0 3.5rem;
}
.spec > div{ padding:1.05rem 1.1rem; border-right:1px solid var(--rule-soft); }
.spec > div:last-child{ border-right:0; }
.spec dt{ font:400 .63rem/1 var(--f-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--gild-2); margin-bottom:.5rem; }
.spec dd{ margin:0; font:400 .95rem/1.35 var(--f-body); color:var(--bone); }
.spec dd small{ display:block; font:400 .72rem/1.5 var(--f-mono); color:var(--bone-3); margin-top:.25rem; }
@media (max-width:900px){ .spec{ grid-template-columns:1fr 1fr; }
  .spec > div{ border-bottom:1px solid var(--rule-soft); }
  .spec > div:nth-child(2n){ border-right:0; } }
@media (max-width:520px){ .spec{ grid-template-columns:1fr; } .spec > div{ border-right:0; } }

/* route index */
.route{ list-style:none; margin:0 0 1rem; padding:0; }
.route li{ margin:0; border-top:1px solid var(--rule-soft); }
.route li:last-child{ border-bottom:1px solid var(--rule-soft); }
.route a{
  display:grid; grid-template-columns:3.5rem minmax(0,15rem) minmax(0,1fr); gap:1.25rem; align-items:baseline;
  padding:1.05rem .5rem 1.05rem .25rem; text-decoration:none; color:var(--bone-2);
  transition:background .15s, padding .15s;
}
.route a:hover{ background:rgba(210,162,75,.045); padding-left:.75rem; text-decoration:none; }
.route__n{ font:400 .72rem/1.6 var(--f-mono); color:var(--gild-3); letter-spacing:.08em; }
.route a:hover .route__n{ color:var(--gild); }
.route__t{ font:500 1.06rem/1.35 var(--f-disp); color:#F1E9DA; letter-spacing:.01em; }
.route__d{ font-size:.9rem; line-height:1.55; color:var(--bone-3); }
@media (max-width:820px){
  .route a{ grid-template-columns:3rem 1fr; gap:.5rem 1rem; }
  .route__d{ grid-column:2; }
}

/* home section head */
.hsec{ margin:0 0 3.75rem; }
.hsec__k{ margin:0 0 .6rem; font:400 .66rem/1 var(--f-mono);
  letter-spacing:.24em; text-transform:uppercase; color:var(--gild-2); }
.hsec__h{ font:500 clamp(1.5rem,3vw,1.95rem)/1.2 var(--f-disp); color:#F3EBDC; margin:0 0 1rem;
  padding-bottom:.8rem; border-bottom:1px solid var(--rule); }
.hsec__p{ font-size:1.02rem; line-height:1.68; color:var(--bone-2); max-width:var(--measure); margin:0 0 1.6rem; }

/* home wants the full width, not the reading measure */
.page--home .prose{ max-width:none; }
.page--home .prose p{ max-width:var(--measure); }
.page--home .hero__p,.page--home .hsec__p{ max-width:38rem; }

/* …and because it is already full width, nothing on it should reach further
   into the gloss column the way it does on a measure-constrained page. */
@media (min-width:1360px){
  .page--home .tiles,
  .page--home .tw--wide,
  .page--home .fig--wide{ width:100%; }
}

/* screenshot strip */
.strip{ display:grid; gap:1.25rem; grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .strip{ grid-template-columns:1fr; } }
.strip .fig{ margin:0; }
.strip .fig__cap{ font-size:.85rem; }
.strip .fig__meta{ display:none; }

/* ================================================================= lightbox */
.lb{
  position:fixed; inset:0; z-index:150; display:grid; place-items:center;
  background:rgba(5,4,7,.94); padding:clamp(1rem,4vw,3rem);
  opacity:0; transition:opacity .18s;
}
.lb[hidden]{ display:none; }
.lb.is-open{ opacity:1; }
.lb__f{ margin:0; max-width:100%; max-height:100%; display:flex; flex-direction:column; gap:.9rem; }
.lb__img{
  max-width:100%; max-height:calc(100vh - 11rem); width:auto; margin:0 auto;
  border:1px solid var(--gild-3); background:#000; object-fit:contain;
}
.lb__cap{
  text-align:center; font-size:.88rem; line-height:1.6; color:var(--bone-3);
  max-width:52rem; margin:0 auto;
}
.lb__raw{ display:inline-block; margin-top:.45rem; font:400 .72rem/1 var(--f-mono);
  letter-spacing:.1em; text-transform:uppercase; color:var(--gild); }
.lb__x{
  position:absolute; top:1rem; right:1rem; z-index:2;
  width:2.75rem; height:2.75rem; display:grid; place-items:center;
  background:rgba(20,17,26,.9); border:1px solid var(--rule); color:var(--bone-2);
  font-size:1rem; cursor:pointer; transition:color .15s, border-color .15s;
}
.lb__x:hover{ color:var(--gild); border-color:var(--gild-2); }
body.lb-open{ overflow:hidden; }

/* ============================================================== responsive */
@media (max-width:1080px){
  :root{ --rail-w:13.5rem; }
}
@media (max-width:900px){
  .top__in{ gap:.75rem; }
  .navtog{ display:inline-flex; }
  .topnav{ display:none; }
  .shell{ grid-template-columns:1fr; }
  .rail{
    border-right:0; border-bottom:1px solid var(--rule);
    display:none; background:#0A0910;
  }
  .rail.is-open{ display:block; }
  .rail__in{ position:static; max-height:none; padding:1.75rem 1.5rem 2rem; }
  .main{ padding:2.25rem 1.25rem 4rem; }
  .foot__in{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  body{ font-size:1rem; }
  .pager{ grid-template-columns:1fr; }
  .pager__l--next{ text-align:left; }
  .pager__l--empty{ display:none; }
  .foot__in{ grid-template-columns:1fr; }
  .tile__facts > div{ grid-template-columns:1fr; gap:.15rem; }
  .tile__acts .btn{ width:100%; text-align:center; }
  .steps__i{ padding-left:2.6rem; }
}

/* ================================================================== print */
@media print{
  body{ background:#fff; color:#111; }
  body::before,.top,.rail,.pager,.lb,.fig__zoom,.fig__corner{ display:none !important; }
  .shell{ display:block; } .main{ padding:0; }
  a{ color:#111; } .prose{ max-width:none; }
  .gloss{ float:none; width:auto; margin:1rem 0; color:#444; }
}