﻿

@font-face{font-family:Marcellus;font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/Marcellus-400-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Marcellus;font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/Marcellus-400-normal-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:"Marcellus SC";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/MarcellusSC-400-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Marcellus SC";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/MarcellusSC-400-normal-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:Newsreader;font-style:normal;font-weight:200 800;font-display:swap;
  src:url(../fonts/Newsreader-200_800-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Newsreader;font-style:normal;font-weight:200 800;font-display:swap;
  src:url(../fonts/Newsreader-200_800-normal-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:Lekton;font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/Lekton-400-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Lekton;font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/Lekton-700-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Lekton;font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/Lekton-400-normal-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Lekton;font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/Lekton-700-normal-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  color-scheme:dark;

  --void:#0c0a09;
  --oxblood:#8c2b2b;

  --gold:#c8a35c;
  --gold-leaf:#ead79b;
  --gold-deep:#9c7736;

  --ink-hi:#efe6d4;
  --ink-mid:#a99c83;
  --ink-low:#8a7e6d;

  --hair:rgba(200,163,92,.15);
  --hair-strong:rgba(200,163,92,.3);
  --hair-soft:rgba(200,163,92,.08);

  --display:Marcellus,"Palatino Linotype","Book Antiqua",Palatino,"Iowan Old Style",Georgia,serif;
  --display-sc:"Marcellus SC",Marcellus,"Palatino Linotype",Georgia,serif;
  --text:Newsreader,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --ledger:Lekton,ui-monospace,"Cascadia Mono",Consolas,"SFMono-Regular",Menlo,monospace;

  --prose:1.05rem;
  --prose-sc:1.08rem;

  --col:min(29.5rem,88vw);
  --gutter:clamp(1.1rem,4vw,2.6rem);
  
  --step:clamp(5rem,8vw,7.4rem);
  --row-lead:1.56rem;
}

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

html{font-size:109%;scroll-behavior:smooth}
@media (max-width:37.5em){html{font-size:104%}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--void);
  color:var(--ink-hi);
  font-family:var(--text);
  font-size:1rem;
  font-weight:400;
  line-height:1.68;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

::selection{background:rgba(200,163,92,.26);color:var(--ink-hi)}
:focus-visible{outline:1.5px solid var(--gold);outline-offset:4px}

h1,h2{margin:0;font-family:var(--display);font-weight:400;text-wrap:balance}
p{margin:0}
dl,dd{margin:0}
img,canvas{display:block;max-width:100%}
hr{border:0;margin:0}

b{font-weight:400;color:var(--ink-hi)}

a{color:var(--gold);text-decoration-thickness:1px;text-underline-offset:.22em;
  text-decoration-color:rgba(200,163,92,.4);transition:text-decoration-color .3s ease}
a:hover{text-decoration-color:var(--gold)}

.skip{position:absolute;left:-9999px;top:0;z-index:60;font-family:var(--ledger);
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  background:var(--gold);color:var(--void);padding:.8em 1.4em;text-decoration:none}
.skip:focus{left:.6rem;top:.6rem}
main section[id]{scroll-margin-top:4.6rem}
main section[id]:focus{outline:none}

.frame{
  position:fixed;left:0;right:0;z-index:20;
  display:flex;justify-content:space-between;gap:1rem;
  font-family:var(--ledger);font-size:.6rem;font-weight:400;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ink-low);
  pointer-events:none;
}
.frame > *{pointer-events:auto}

.frame-top{
  top:0;padding:1.15rem var(--gutter) 2.5rem;
  background:linear-gradient(180deg,var(--void) 0 70%,rgba(12,10,9,0) 100%);
}
.frame-bot{
  bottom:0;justify-content:flex-end;padding:2.5rem var(--gutter) 1.15rem;
  background:linear-gradient(0deg,var(--void) 0 70%,rgba(12,10,9,0) 100%);
}
.frame b{color:var(--ink-mid);font-weight:700}
.frame a{color:var(--ink-low);text-decoration:none;transition:color .35s ease}
.frame a:hover{color:var(--gold)}
@media (max-width:48em){.frame-far{display:none}}

.azoth-ready .frame{
  opacity:0;visibility:hidden;
  transition:opacity .55s ease,visibility 0s .55s;
}
.azoth-ready.past-masthead .frame{
  opacity:1;visibility:visible;
  transition:opacity .55s ease,visibility 0s;
}

.rail{
  position:fixed;left:var(--gutter);top:50%;z-index:15;
  transform:translateY(-50%);
  display:flex;flex-direction:column;gap:.7rem;
  padding:.35rem 0;
  border-left:1px solid var(--hair-soft);
  font-family:var(--ledger);font-size:.575rem;
  letter-spacing:.2em;text-transform:uppercase;
}
.rail a{
  display:flex;align-items:center;gap:.55rem;
  color:var(--ink-low);text-decoration:none;transition:color .45s ease;
}
.rail a::before{
  content:"";width:.75rem;height:1px;background:currentColor;opacity:.5;
  transition:width .45s ease,opacity .45s ease;
}
.rail a:hover{color:var(--ink-mid)}
.rail a.on{color:var(--gold)}
.rail a.on::before{width:1.55rem;opacity:1}
@media (max-width:74em){.rail{display:none}}

main{position:relative;z-index:2;display:flex;flex-direction:column}

.leaf{width:var(--col);margin-inline:auto}

main > .leaf + .leaf{margin-top:var(--step)}
main > .leaf:last-child{margin-bottom:var(--step)}

.sec-label{
  margin-bottom:1.15rem;
  font-family:var(--ledger);font-weight:700;font-size:.6rem;
  letter-spacing:.3em;text-transform:uppercase;color:var(--ink-low);
}

h2{
  font-size:clamp(1.9rem,4.6vw,2.9rem);line-height:1.14;
  margin-bottom:1.15rem;text-wrap:balance;
}

.lede{font-size:clamp(2.4rem,6.1vw,3.9rem);line-height:1.07;margin-bottom:1.5rem}

.leaf > p:not([class]){color:var(--ink-mid);font-size:var(--prose)}

.leaf > p:not([class]) + p:not([class]){margin-top:.85rem}

.leaf-gold{color:var(--gold-leaf)}

#masthead{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:13svh var(--gutter) 12svh;
}

.mark-wrap{
  position:relative;
  width:clamp(9.5rem,28vw,17.4rem);aspect-ratio:1;
  flex:none;
}
.mark-live,.mark-still{position:absolute;inset:0;width:100%;height:100%}
.mark-live{display:none}
.mark-ready .mark-live{display:block}
.mark-ready .mark-still{display:none}

.wordmark{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.35rem,6.9vw,4.05rem);line-height:1;
  letter-spacing:.22em;text-transform:uppercase;
  margin:clamp(.7rem,2.4vh,1.5rem) 0 0 .28em;
  
  background:linear-gradient(158deg,var(--gold-leaf),var(--gold) 72%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.submark{
  font-family:var(--ledger);font-size:clamp(.58rem,1.5vw,.7rem);
  letter-spacing:.56em;text-transform:uppercase;color:var(--ink-mid);
  margin:1.05rem 0 0 .56em;
}

.mast-rule{
  font-size:clamp(.58rem,1.5vw,.7rem);
  width:21.7em;max-width:88vw;
  height:1px;margin:1.9rem 0 0;
  background:linear-gradient(90deg,transparent,var(--hair-strong),transparent);
}
.descend{
  position:absolute;left:50%;bottom:3.1rem;translate:-50% 0;
  width:1px;height:clamp(2.2rem,6vh,3.8rem);
  background:linear-gradient(180deg,transparent,rgba(200,163,92,.5));
  transition:opacity .5s ease;
}
.descend::after{
  content:"";position:absolute;left:50%;bottom:-.2rem;translate:-50% 0;
  width:.36rem;height:.36rem;transform:rotate(45deg);
  border:1px solid var(--gold);background:var(--void);
}
.past-masthead .descend{opacity:0}

.stmt{
  border-left:2px solid var(--oxblood);
  padding:0 0 0 clamp(1.15rem,3vw,1.8rem);
  display:flex;flex-direction:column;gap:.85rem;
}
.stmt p{color:var(--ink-mid);font-size:var(--prose)}

p + .stmt{margin-top:1.55rem}

.note{
  margin-top:1.85rem;padding-top:1.2rem;
  border-top:1px solid var(--hair);
  font-family:var(--ledger);font-size:calc(var(--prose) * .88);
  line-height:1.68;letter-spacing:.045em;color:var(--ink-mid);
  
  text-wrap:balance;
}

.rows{margin-top:1.85rem}
h2 + .rows{margin-top:3.2rem}

.row{
  display:grid;grid-template-columns:5.6rem 1fr;
  gap:clamp(1rem,3vw,1.7rem);align-items:baseline;
  padding:1.05rem 0;border-top:1px solid var(--hair-soft);
}

.row:first-child{border-top:1px solid var(--hair-strong)}
.row:last-child{border-bottom:1px solid var(--hair-strong)}
.row dt{
  font-family:var(--display-sc);font-size:var(--prose-sc);line-height:var(--row-lead);
  letter-spacing:.085em;color:var(--ink-hi);text-wrap:balance;
}
.row dd{color:var(--ink-mid);font-size:var(--prose);line-height:var(--row-lead)}
@media (max-width:39em){
  .row{grid-template-columns:1fr;gap:.05rem;padding:1.7rem 0 1.85rem}
  .row dt{letter-spacing:.09em}
}

.cta{margin-top:2.2rem}
.write{
  display:inline-block;position:relative;
  font-family:var(--ledger);font-weight:700;font-size:.66rem;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-leaf);text-decoration:none;
  background:rgba(200,163,92,.05);
  border:1px solid rgba(200,163,92,.5);
  padding:1.15em 2.2em 1.15em calc(2.2em + .24em);
  transition:background-color .35s ease,color .35s ease,border-color .35s ease;
}
.write::after{
  content:"";position:absolute;inset:4px;pointer-events:none;
  border:1px solid rgba(200,163,92,.2);transition:border-color .35s ease;
}
.write:hover,.write:focus-visible{
  background:var(--gold);color:var(--void);border-color:var(--gold);
}
.write:hover::after,.write:focus-visible::after{border-color:rgba(12,10,9,.3)}
.fine{
  margin-top:1.35rem;font-family:var(--ledger);font-size:.63rem;
  letter-spacing:.14em;color:var(--ink-mid);
}

#colophon{text-align:center}
.seal,.seal-still{width:8.6rem;height:8.6rem;margin:0 auto 1.5rem}
.seal{display:none}
.mark-ready .seal{display:block}
.mark-ready .seal-still{display:none}
.reg{
  font-family:var(--ledger);font-size:.6rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-low);
}
.disclaimer{
  margin-top:1.9rem;padding-top:1.4rem;
  border-top:1px solid var(--hair);
  font-family:var(--ledger);font-size:.6rem;line-height:1.75;
  letter-spacing:.03em;color:var(--ink-low);
}

.azoth-ready .reveal{
  opacity:0;transform:translateY(10px);
  transition:opacity .7s cubic-bezier(.6,0,.25,1),transform .7s cubic-bezier(.6,0,.25,1);
}
.azoth-ready .reveal.seen{opacity:1;transform:none}

.azoth-ready .reveal:focus-within{opacity:1;transform:none;transition:none}

@media (prefers-reduced-motion:reduce){
  .azoth-ready .reveal{opacity:1;transform:none;transition:none}
  .write,.rail a,.rail a::before,.frame a,.frame-top,.descend,a{transition:none}
}

@media print{
  @page{margin:18mm}
  :root{
    --ink-hi:#141110;--ink-mid:#332d24;--ink-low:#5c5347;
    --hair:#c9bfa8;--hair-strong:#9a8f78;--hair-soft:#d5cdba;--gold:#7a6132;
    
    --prose:10.5pt;--prose-sc:10.8pt;
    print-color-adjust:exact;-webkit-print-color-adjust:exact;
  }
  html,body{background:#fff;overflow:visible}
  body{color:var(--ink-hi);font-size:10.5pt;line-height:1.5}
  h1,h2,.lede,.row dt{color:var(--ink-hi)}
  .leaf > p:not([class]),.stmt p,.row dd{color:var(--ink-mid)}

  .azoth-ready .reveal{opacity:1;transform:none;transition:none}

  .frame,.rail,.descend,.skip,.cta,
  .mark-ready .mark-live,.mark-ready .seal,.seal-still{display:none}

  .mark-wrap{width:24mm;height:24mm;aspect-ratio:auto}
  .mark-ready .mark-still{
    display:block;width:100%;height:100%;
    content:url(../../brand/azoth-mark-mono.svg);filter:brightness(0);
  }

  #masthead{min-height:0;padding:0 0 10mm;break-after:avoid}
  .wordmark,.leaf-gold{
    background:none;-webkit-text-fill-color:var(--ink-hi);color:var(--ink-hi);
  }
  .submark,.sec-label,.reg,.disclaimer{color:var(--ink-low)}
  .mast-rule{background:#c9bfa8}
  
  .leaf{width:auto;max-width:none;margin-inline:0}
  main > .leaf + .leaf{margin-top:8mm}
  .stmt{border-left-color:#8a2f2f}
  .row,.rows,.stmt,.note{break-inside:avoid}
  .fine::before{content:"Write to "}
}
