:root {
  --ink: #0B0A0C;   
  --bone: #ECE6DA;  
  --ash: #8A857D;   
  --red: #721819;   
  --ox: var(--red); 
  --hair: #2E2B2F;  
  --stone: #70717A; 
  --edge: #7D7B7C;  
  --panel: #151316; 
  --stone-on: #262429; 
  --r: 1.618px;     
  --r-btn: 6.854px; 
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --f-head: 'Philosopher', Georgia, 'Times New Roman', serif;
  --f-body: 'Sofia Sans', system-ui, 'Segoe UI', sans-serif;
  --f-mono: 'Martian Mono', ui-monospace, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); color-scheme: dark; -webkit-text-size-adjust: 100%; scroll-padding-top: 112px; }
body { margin: 0; background: var(--ink); color: var(--bone); font-family: var(--f-body); font-size: 17px; line-height: 1.55; }
img, svg { max-width: 100%; }
p, h1, h2, h3, h4, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -120px; z-index: 40; padding: 12px 16px; background: var(--bone); color: var(--ink); font: 500 var(--xs)/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; }
.skip:focus { top: 16px; }


.site { container-type: inline-size; container-name: site; width: 100%; }
.page {
  --d1: 128px; --d2: 80px; --h1: 48px; --h2: 32px; --h3: 22px; --p: 17px; --sm: 14px; --xs: 12px;
  --s1: 24px; --s2: 40px; --s3: 64px; --s4: 104px; --s5: 168px; --s6: 272px;
  --mx: 64px; --gut: 32px; --cols: 12;
  position: relative; background: var(--ink); color: var(--bone); font-family: var(--f-body); font-size: var(--p); line-height: 1.55;
  overflow-x: clip;
}
@container site (max-width: 720px) {
  .page {
    --d1: 48px; --d2: 32px; --h1: 32px; --h2: 22px; --h3: 17px; --p: 17px; --sm: 14px; --xs: 12px;
    --s1: 16px; --s2: 24px; --s3: 40px; --s4: 64px; --s5: 104px; --s6: 168px;
    --mx: 16px; --gut: 16px; --cols: 4;
  }
}


.d1, .d2, .h1, .h2, .h3 { font-family: var(--f-head); font-weight: 700; line-height: 1.04; letter-spacing: -0.01em; text-wrap: balance; }
.d1 { font-size: var(--d1); } .d2 { font-size: var(--d2); } .h1 { font-size: var(--h1); } .h2 { font-size: var(--h2); line-height: 1.12; } .h3 { font-size: var(--h3); line-height: 1.2; }
.lb { font-family: var(--f-mono); font-size: var(--xs); line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash); }
.ash { color: var(--ash); }
.sm { font-size: var(--sm); line-height: 1.5; }
.measure { max-width: 640px; }
.ex { font-family: var(--f-mono); font-size: var(--xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash); border: 1px solid var(--edge); padding: 2px 8px; white-space: nowrap; }


.g { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gut); padding-inline: var(--mx); }
.g > * { grid-column: var(--d, 1 / -1); min-width: 0; }
@container site (max-width: 720px) { .g > * { grid-column: var(--m, 1 / -1); } }


.btn { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 var(--s1); background: var(--red); color: var(--bone);
  font: 700 var(--h3)/1 var(--f-head); letter-spacing: 0; text-decoration: none; border: 0; border-radius: var(--r-btn); cursor: pointer;
  touch-action: manipulation; }   
@media (hover: hover) and (pointer: fine) { .btn:hover { box-shadow: inset 0 0 0 1px var(--bone); } }   
.tc { text-align: center; }   
.link { color: var(--bone); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.link:hover { text-decoration-thickness: 2px; }



.nav { position: relative; z-index: 20; background: transparent; }
.nav .g { align-items: center; min-height: 72px; }

.nav .wm-link { --d: 1 / -1; grid-row: 1; justify-self: center; display: block; line-height: 0; color: var(--bone); }
.nav nav { --d: 1 / -1; grid-row: 2; margin-inline: calc(var(--mx) * -1); }   
.nav .nav-logo { --d: 1 / -1; grid-row: 3; justify-self: center; display: block; line-height: 0; margin-top: var(--s1); }
.wm { fill: currentColor; stroke: none; }
.nav .wm { width: 240px; height: auto; }
.nav ul { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }   
.nav a.nl { display: inline-block; font-family: var(--f-mono); font-size: var(--sm); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--ash); padding: 12px 0 12px 0.08em; white-space: nowrap; }   
.nav a.nl:hover, .nav a.nl[aria-current="page"] { color: var(--bone); }
.nav a.nl[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
@container site (max-width: 360px) { .nav a.nl { font-size: var(--xs); letter-spacing: 0.04em; } }   
@container site (max-width: 720px) {
  .nav .g { row-gap: 0; min-height: 0; padding-top: 12px; align-items: center; }
  .nav .wm { width: 168px; }
}


.foot { border-top: 1px solid var(--hair); padding-block: var(--s2); }
.foot .g { row-gap: var(--s1); }
.foot a { display: inline-block; text-decoration: none; border-bottom: 1px solid currentColor; line-height: 1.3; padding-top: 5px; margin-top: -5px; }      
.foot a:hover { border-bottom-width: 2px; margin-bottom: -1px; }   
.dot { display: inline-block; width: 0.22em; height: 0.22em; margin-inline: 0.08em; background: var(--red); }   
.eg { color: var(--red); font-weight: 700; }   


.rule-red { height: 2px; background: var(--red); border: 0; margin: 0; }
.tile-red { background: var(--red); color: var(--bone); border-radius: var(--r); }


.seal .fr { fill: var(--f, none); stroke: var(--s, currentColor); }
.seal .gl { color: var(--g, var(--red)); }   
.seal.red .fr { fill: var(--red); stroke: var(--red); }   
.seal.red .gl { color: var(--ink); }
.lit { position: relative; }
.lit a { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; text-decoration-color: var(--u, transparent); text-decoration-skip-ink: none; }
.lit a::after { content: ""; position: absolute; inset: 0; }   
.lit a:focus-visible { outline: none; }
@media (hover: none), (pointer: coarse) { .lit a { text-decoration-thickness: 1px; text-decoration-color: var(--u, var(--edge)); } }   
@supports not selector(:has(*)) { .lit a:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; } }
.lit:has(a:focus-visible) { outline: 2px solid var(--bone); outline-offset: 8px; }
.lit:has(a:focus-visible) { --f: var(--red); --s: var(--red); --g: var(--bone); --u: var(--red); }
@media (hover: hover) and (pointer: fine) {
  .lit:has(a:hover) { --f: var(--red); --s: var(--red); --g: var(--bone); --u: var(--red); }
}


.arch { display: block; width: 100%; height: auto; overflow: visible; }
.arch path { fill: var(--ink); stroke: var(--bone); stroke-width: 1.5px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }   
.arch .ar-stone { fill: var(--sf, var(--ink)); }
.arch .ar-gem { fill: var(--red); stroke: var(--red); }   
.arch .ar-rune { color: var(--rg, var(--red)); }   
.arch .ar-door { fill: var(--ink); stroke: none; }
.arch a { cursor: pointer; outline: none; }
@media (forced-colors: active) {
  .btn { border: 1px solid ButtonText; }
  :root { --stone-on: Highlight; }   
  .arch { --bone: HighlightText; }
  .arch path { stroke: CanvasText; fill: Canvas; }   
  .arch .ar-stone { fill: var(--sf, Canvas); }
  
  .arch .ar-door { fill: Canvas; }
  .arch .ar-gem { fill: CanvasText; stroke: CanvasText; }
  .arch .ar-rune { color: var(--rg, CanvasText); }
  .dot { forced-color-adjust: none; background: CanvasText; }   
}   
@media (hover: hover) and (pointer: fine) {
  .arch a:hover { --sf: var(--stone-on); --rg: var(--bone); }
  
  .page:has(.lit[data-k="e"] a:hover) .arch a[data-k="e"], .page:has(.lit[data-k="s"] a:hover) .arch a[data-k="s"], .page:has(.lit[data-k="i"] a:hover) .arch a[data-k="i"],
  .page:has(.lit[data-k="c"] a:hover) .arch a[data-k="c"], .page:has(.lit[data-k="v"] a:hover) .arch a[data-k="v"], .page:has(.lit[data-k="d"] a:hover) .arch a[data-k="d"] { --sf: var(--stone-on); --rg: var(--bone); }
  .page:has(.arch a[data-k="e"]:hover) .lit[data-k="e"], .page:has(.arch a[data-k="s"]:hover) .lit[data-k="s"], .page:has(.arch a[data-k="i"]:hover) .lit[data-k="i"],
  .page:has(.arch a[data-k="c"]:hover) .lit[data-k="c"], .page:has(.arch a[data-k="v"]:hover) .lit[data-k="v"], .page:has(.arch a[data-k="d"]:hover) .lit[data-k="d"] { --f: var(--red); --s: var(--red); --g: var(--bone); --u: var(--red); }
}
.page:has(.lit[data-k="e"] a:focus-visible) .arch a[data-k="e"], .page:has(.lit[data-k="s"] a:focus-visible) .arch a[data-k="s"], .page:has(.lit[data-k="i"] a:focus-visible) .arch a[data-k="i"],
.page:has(.lit[data-k="c"] a:focus-visible) .arch a[data-k="c"], .page:has(.lit[data-k="v"] a:focus-visible) .arch a[data-k="v"], .page:has(.lit[data-k="d"] a:focus-visible) .arch a[data-k="d"] { --sf: var(--stone-on); --rg: var(--bone); }


.wmh { display: block; width: 100%; height: auto; overflow: visible; --wms: 2; }
.wmh .wmh-s path { fill: none; stroke: var(--bone); stroke-width: var(--wms); stroke-linejoin: round; }   
@container site (max-width: 720px) { .wmh { --wms: 3; } }


.band { height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M12 2 L16 6 L12 10 L8 6 Z' fill='%238A857D'/%3E%3C/svg%3E") repeat-x center; }


.seal { width: 40px; height: 40px; color: var(--edge); stroke: currentColor; stroke-width: 1.5; fill: none; overflow: visible; }
.seal .gl { stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
.rune { width: 24px; height: 24px; color: var(--bone); stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; fill: none; flex: none; }
.rune-lg { width: 64px; height: 64px; }


.rune-col { position: absolute; left: 0; top: 0; bottom: 0; width: var(--mx); z-index: 5; pointer-events: none; }
.rune-col .rc { position: sticky; top: 112px; display: flex; flex-direction: column; gap: 12px; align-items: center; padding-top: 16px; pointer-events: auto; }
.rune-col a { display: block; line-height: 0; color: var(--bone); }
.rune-col .seal { width: 32px; height: 32px; }
@container site (max-width: 720px) {
  .rune-col { position: static; width: auto; padding: 12px var(--mx) 0; border-bottom: 1px solid var(--hair); }
  .rune-col .rc { position: static; flex-direction: row; justify-content: space-between; padding: 0 0 12px; }
  .rune-col .seal { width: 40px; height: 40px; }
}


.loader { display: none; }


.logo { display: block; width: 100%; height: auto; }
.lg-p { display: none; }
.lg-nav { display: block; flex: none; width: 176px; }
.lg-foot { display: inline-block; width: 44px; margin-right: 12px; vertical-align: middle; }
.lg-foot .logo { display: inline-block; }
.lg-card { display: block; width: 96px; margin: 0 auto 16px; }
.cr-mark { display: none; }   
.lg-404 { display: block; --d: 9 / span 4; align-self: center; width: min(100%, 320px); justify-self: end; }
@media (max-width: 720px) { .lg-nav { width: 132px; } .lg-card { width: 80px; } .lg-404 { --d: 1 / -1; justify-self: start; width: 160px; margin-top: var(--s3); } }
.page [id] { scroll-margin-top: 96px; }



@keyframes rv { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes dr { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes dr-wm { 0% { stroke-dasharray: 1; stroke-dashoffset: 1; } 99.9% { stroke-dasharray: 1; stroke-dashoffset: 0; } 100% { stroke-dasharray: none; stroke-dashoffset: 0; } }   
@keyframes seal-on { 0%, 100% { fill: transparent; color: var(--bone); } 35%, 65% { fill: var(--red); color: var(--bone); } }
@keyframes seal-gl { 35%, 65% { color: var(--bone); } }   
@keyframes rune-loop { 0% { opacity: 0; transform: scale(0.92); filter: drop-shadow(0 0 1px rgba(170, 34, 38, 0.2)); } 16.67% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 9px rgba(170, 34, 38, 0.7)); } 33.33%, 100% { opacity: 0; transform: scale(1.06); filter: drop-shadow(0 0 1px rgba(170, 34, 38, 0.2)); } }   
@keyframes gl-in { to { opacity: 1; } }
@keyframes brick-in { from { opacity: 0; } to { opacity: 1; } }   
@keyframes brick-loop { 0% { opacity: 0; } 6% { opacity: 1; } 62% { opacity: 1; } 66.5% { opacity: 0; } 100% { opacity: 0; } }   


.dr, .ds, .dl { stroke-dasharray: 1; stroke-dashoffset: 0; }

@media (prefers-reduced-motion: no-preference) {
  
  html:not(.no-motion) .ld { animation: rv 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 90ms + var(--d0, 0ms)); }
  html:not(.no-motion) .dl { animation: dr 1.6s ease-in-out both; animation-delay: calc(var(--i, 0) * 140ms + var(--d0, 0ms)); }

  @supports (animation-timeline: view()) {
    
    html:not(.no-motion) .rv { animation: rv linear both; animation-timeline: view(); animation-range: entry 5% entry 55%; }
    html:not(.no-motion) .ds { animation: dr linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    
    html:not(.no-motion) .rune-col a[data-t] .fr { animation: seal-on linear both; animation-timeline: var(--tl); animation-range: cover 0% cover 100%; }
    html:not(.no-motion) .rune-col a[data-t] .gl { animation: seal-gl linear both; animation-timeline: var(--tl); animation-range: cover 0% cover 100%; }
  }

  
  html:not(.no-motion) .btn { transition: box-shadow 160ms var(--ease), transform 160ms var(--ease); }
  html:not(.no-motion) .btn:active { transform: scale(0.97); }
  
  html:not(.no-motion) .seal .fr { transition: fill 160ms var(--ease), stroke 160ms var(--ease); }
  html:not(.no-motion) .arch .ar-stone { transition: fill 160ms var(--ease); }
  html:not(.no-motion) .seal .gl, html:not(.no-motion) .arch .ar-rune { transition: color 160ms var(--ease); }
  html:not(.no-motion) .lit a { transition: text-decoration-color 160ms var(--ease); }
  
  @media screen { html:not(.no-motion) .arch.pre a[data-k], html:not(.no-motion) .arch.pre .ar-key { opacity: 0; pointer-events: none; } }   
  html:not(.no-motion) .arch.build a[data-k], html:not(.no-motion) .arch.build .ar-key { animation: brick-in 720ms var(--ease) both; animation-delay: calc(var(--n, 0) * 240ms); }
  .arch a[data-k="v"] { --n: 0; } .arch a[data-k="d"] { --n: 1; } .arch a[data-k="i"] { --n: 2; } .arch a[data-k="c"] { --n: 3; } .arch a[data-k="e"] { --n: 4; } .arch a[data-k="s"] { --n: 5; } .arch .ar-key { --n: 6; }
  
  html:not(.no-motion) .demo-build .arch a[data-k], html:not(.no-motion) .demo-build .arch .ar-key { animation: brick-in 720ms var(--ease) both; animation-delay: calc(var(--n, 0) * 240ms + 1s); }
  
  html:not(.no-motion).ld-wait .loader { display: block; position: fixed; inset: 0; z-index: 90; background: var(--ink); pointer-events: none; opacity: 1; transition: opacity 400ms ease-out, visibility 0s 400ms; }
  html:not(.no-motion).ld-wait.ld-go .loader { opacity: 0; visibility: hidden; }
  html:not(.no-motion).ld-wait:not(.ld-go) .page { visibility: hidden; }   
  html:not(.no-motion).ld-wait:not(.ld-go) .page *, html:not(.no-motion).ld-wait:not(.ld-go) .page *::before, html:not(.no-motion).ld-wait:not(.ld-go) .page *::after { animation-play-state: paused; }
  
  .loader .ld-runes { position: absolute; inset: 0; display: grid; place-items: center; }
  .loader .seal { grid-area: 1 / 1; width: 120px; height: 120px; opacity: 0; animation: rune-loop 2400ms ease-in-out infinite; animation-delay: calc(var(--i, 0) * 400ms); }
  @media (max-width: 720px) { .loader .seal { width: 96px; height: 96px; } }
  
  html:not(.no-motion) .wmh .wmh-s path { animation: dr-wm 1.5s cubic-bezier(0.65, 0, 0.35, 1) both; animation-delay: calc(var(--i, 0) * 170ms + var(--wm0, 300ms)); }   
}


.a4-rune { filter: drop-shadow(0 0 5px rgba(170, 34, 38, 0.45)); }