/* Harmonic Linguistics
   Deep Ocean #1B2838 / Ancient Root #2C4A3E / Living Gold #B8956A
   Weathered Stone #7A7568 / Warm Parchment #E8DCC8
   Display: Cinzel (inscriptional caps) + Cormorant Garamond (manuscript) */
:root{
  --ocean:#1B2838; --ocean-ground:#121D2B; --root:#2C4A3E;
  --gold:#B8956A; --stone:#7A7568; --parchment:#E8DCC8;
  --ink:#E8DCC8; --body-ink:#D3CAB8; --label:#A79E8E;
  --inscribe:"Cinzel",Georgia,serif;
  --display:"Cormorant Garamond",Georgia,serif;
  --body:"Libre Franklin",system-ui,-apple-system,sans-serif;
  --measure:36rem;
  --gutter:clamp(1.25rem,5vw,2rem);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; color:var(--ink);
  font-family:var(--body); font-weight:300; font-size:1.0625rem; line-height:1.75;
  -webkit-font-smoothing:antialiased;
  /* Paper grain. The grain lightens whatever sits under it, so the ground is
     pre-darkened to --ocean-ground; the composite measures (27,40,56) on
     screen, which is Deep Ocean #1B2838 exactly. Change them together. */
  background-color:var(--ocean-ground);
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27200%27%3E%3Cfilter%20id%3D%27g%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%271.05%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27%20seed%3D%277%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type%3D%27linear%27%20slope%3D%272.4%27%20intercept%3D%27-0.700%27%2F%3E%3CfeFuncG%20type%3D%27linear%27%20slope%3D%272.4%27%20intercept%3D%27-0.700%27%2F%3E%3CfeFuncB%20type%3D%27linear%27%20slope%3D%272.4%27%20intercept%3D%27-0.700%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27200%27%20height%3D%27200%27%20filter%3D%27url%28%23g%29%27%20opacity%3D%271.0%27%2F%3E%3C%2Fsvg%3E"),
    radial-gradient(120% 55% at 50% -8%, rgba(184,149,106,.055), rgba(184,149,106,0) 62%);
  background-size:200px 200px, 100% 68vh;
  background-repeat:repeat, no-repeat;
  background-blend-mode:soft-light, normal;
}
@media (max-width:700px){
  body{background-size:200px 200px, 100% 48vh}
}
img{max-width:100%}
a{color:inherit}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;background:var(--parchment);color:var(--ocean);padding:.5rem .75rem;z-index:10}
:focus-visible{outline:1px solid var(--gold); outline-offset:3px}

/* centre every band on the same measure */
.hero,.how,.close,.codex,.dhead,.reading,.thread,.stepnav,.foot{
  padding-left:max(var(--gutter), calc(50% - var(--measure) / 2));
  padding-right:max(var(--gutter), calc(50% - var(--measure) / 2));
}
.hero>*,.how>*,.close>*,.dhead>*,.reading>*,.thread>*,.stepnav>*,.foot>*{max-width:var(--measure)}
.triad{max-width:var(--measure)}

/* nav */
.nav{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1.5rem; padding:1.5rem var(--gutter);
  border-bottom:1px solid rgba(232,220,200,.12);
}
.mark{
  font-family:var(--inscribe); font-weight:400; font-size:1.22rem;
  letter-spacing:.09em; text-transform:uppercase;
  text-decoration:none; color:var(--parchment); line-height:1.2;
}
.navlinks{display:flex; gap:1.85rem; flex-wrap:wrap; align-items:baseline}
.navlinks a{
  font-size:.975rem; font-weight:400; letter-spacing:.06em;
  text-decoration:none; color:#C6BDAC; white-space:nowrap;
  border-bottom:1px solid transparent; padding-bottom:.15rem;
}
.navlinks a:hover,.navlinks a[aria-current="page"]{color:var(--gold); border-color:rgba(184,149,106,.5)}

/* hero */
.hero{padding-top:clamp(2rem,5vh,2.75rem); padding-bottom:clamp(1.15rem,3vh,1.6rem)}
.hero h1{
  font-family:var(--inscribe); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.75rem,5.6vw,2.6rem); letter-spacing:.055em;
  line-height:1.24; margin:0 0 1.35rem; color:var(--parchment);
}
/* the codes index leads with an instruction, so it stays quiet */
.instruct h1{
  font-family:var(--display); text-transform:none; font-weight:400;
  font-size:clamp(1.45rem,4.4vw,1.85rem); letter-spacing:0;
  line-height:1.36; margin-bottom:0; max-width:30rem;
}
.lede{margin:0 0 .65rem; color:var(--body-ink); max-width:31rem; line-height:1.62}
.lede:last-child{color:var(--parchment); margin-bottom:0}

/* the codex */
.codex{
  border-top:1px solid rgba(232,220,200,.12);
  padding-top:clamp(1rem,2.4vh,1.4rem); padding-bottom:clamp(2rem,5vh,3.5rem);
}
.triad{margin:0 auto; padding:clamp(1rem,2.4vh,1.45rem) 0}
.triad+.triad{border-top:1px solid rgba(232,220,200,.08)}
.tnum{
  font-family:var(--body); font-weight:400; color:var(--label);
  font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
  margin:0 0 .7rem;
}
.codes{list-style:none; margin:0; padding:0}
.code{display:block; margin:0 0 .95rem}
.code:last-child{margin-bottom:0}
.axis{text-decoration:none; display:inline-block; margin-bottom:.15rem}
.ax{
  font-family:var(--body); font-weight:400; font-size:.89rem; letter-spacing:.1em;
  color:var(--gold); border-bottom:1px solid rgba(184,149,106,.4);
  padding-bottom:.12rem; transition:color .2s,border-color .2s;
}
.axis:hover .ax{color:var(--parchment); border-color:var(--parchment)}
.line{
  display:block; font-family:var(--display); font-weight:400;
  font-size:clamp(1.5rem,4.8vw,1.85rem); line-height:1.3;
  color:var(--parchment); text-wrap:balance; margin-top:.2rem;
}

/* how / close */
.how,.close{padding-top:clamp(2.75rem,7vh,4.25rem); padding-bottom:clamp(2.75rem,7vh,4.25rem)}
.how{border-top:1px solid rgba(232,220,200,.12)}
.how h2{
  font-family:var(--body); font-weight:400; font-size:.8125rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--label);
  margin:0 0 1.5rem;
}
.four{
  font-family:var(--display); font-size:clamp(1.4rem,4.2vw,1.7rem);
  line-height:1.5; color:var(--parchment); margin:0 0 1.35rem;
}
.how p{margin:0 0 1.1rem; color:var(--body-ink)}
.more{margin-top:1.6rem !important}
.more a{
  font-size:.9375rem; letter-spacing:.05em; color:var(--gold);
  text-decoration:none; border-bottom:1px solid rgba(184,149,106,.45);
  padding-bottom:.2rem;
}
.more a:hover{color:var(--parchment); border-color:var(--parchment)}
.more a+a{margin-left:1.75rem}
.close{border-top:1px solid rgba(232,220,200,.12)}
.close p{
  font-family:var(--display); font-size:clamp(1.375rem,3.8vw,1.6rem);
  line-height:1.55; margin:0 0 2rem; color:#E0D7C5;
}
.map{color:var(--gold) !important; font-style:italic; margin-bottom:0 !important}

/* index of codes */
.ilist{list-style:none; margin:0; padding:0}
.ilist li{border-top:1px solid rgba(232,220,200,.08)}
.ilist li:last-child{border-bottom:1px solid rgba(232,220,200,.08)}
.ilist a{
  display:block; text-decoration:none; padding:1.15rem 0;
  transition:padding-left .18s ease, color .18s ease;
}
.ilist a:hover{padding-left:.7rem}
.ilist .ax{display:inline-block; border-bottom-color:transparent}
.ilist a:hover .ax{color:var(--parchment)}
.ilist .line{margin-top:.2rem}
.ilist a:hover .line{color:#fff}
.tgroup{
  font-family:var(--body); font-size:.75rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--label); margin:2.5rem 0 .5rem;
}
.tgroup:first-of-type{margin-top:1.25rem}

/* deep reading pages */
.dhead{padding-top:clamp(3rem,10vh,5.5rem); padding-bottom:clamp(2rem,5vh,3rem)}
.eyebrow{
  font-size:.8125rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--label); margin:0 0 1.35rem;
}
.plate{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2rem,6.4vw,2.9rem); line-height:1.2;
  margin:0; color:var(--parchment); text-wrap:balance;
}
.reading{
  padding-bottom:clamp(2.5rem,7vh,4rem);
  border-top:1px solid rgba(232,220,200,.12);
}
.reading.narrow p{color:var(--body-ink)}
.reading h1,.reading h2{
  font-family:var(--display); font-weight:400; font-size:clamp(1.55rem,4.6vw,1.95rem);
  line-height:1.28; margin:3rem 0 1.35rem; color:var(--parchment);
}
.reading h3,.reading h4,.reading h5,.reading h6{
  font-family:var(--body); font-weight:500; font-size:.9375rem;
  letter-spacing:.02em; margin:2.6rem 0 .95rem; color:var(--gold);
}
.reading>*:first-child{margin-top:2.5rem}
.reading p{margin:0 0 1.3rem; color:var(--body-ink)}
.reading strong{font-weight:500; color:var(--parchment)}
.reading em{font-style:italic}
.reading ul{margin:0 0 1.4rem; padding-left:1.1rem; list-style:none}
.reading li{position:relative; margin:0 0 .8rem; color:var(--body-ink)}
.reading li::before{
  content:""; position:absolute; left:-1.1rem; top:.85em;
  width:.3rem; height:1px; background:var(--gold);
}
/* the about statement */
.statement{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.2rem,3.5vw,1.45rem); line-height:1.66;
  color:#E2D9C7; margin:2.5rem 0 0;
}
/* the about page runs a wider measure so no authored line wraps */
.wide{--measure:42rem}
.statement+.statement{margin-top:1.9rem}

/* recursion thread */
.thread{
  border-top:1px solid rgba(232,220,200,.12);
  padding-top:2rem; padding-bottom:.5rem;
}
.thead{
  font-family:var(--body); font-size:.75rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--label); margin:0 0 1rem;
}
.tchain{
  font-family:var(--body); font-size:1.0625rem; letter-spacing:.04em;
  margin:0 0 .9rem; color:var(--label);
}
.tchain a{color:var(--gold); text-decoration:none; border-bottom:1px solid rgba(184,149,106,.35)}
.tchain a:hover{color:var(--parchment); border-color:var(--parchment)}
.tchain .here{color:var(--parchment)}
.tnote{font-size:.9375rem; color:var(--label); margin:0; max-width:28rem}

/* step nav */
.stepnav{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-top:2rem; padding-bottom:clamp(3.5rem,9vh,5rem);
  border-top:1px solid rgba(232,220,200,.12);
}
.stepnav a{text-decoration:none; font-size:.9375rem; color:var(--gold)}
.stepnav a:hover{color:var(--parchment)}
.stepnav .pv,.stepnav .nx{min-width:4rem; display:block}
.stepnav .nx{text-align:right}
.stepnav a span{
  display:block; font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--label); margin-bottom:.25rem;
}
.stepnav .all{font-size:.8125rem; letter-spacing:.14em; text-transform:uppercase; color:#C6BDAC}

/* footer */
.foot{
  border-top:1px solid rgba(232,220,200,.12);
  padding-top:clamp(2.5rem,7vh,4rem); padding-bottom:clamp(2.5rem,7vh,4rem);
}
.foot>*{margin-left:0; margin-right:0}
.fmeta{
  font-family:var(--inscribe); font-size:.8125rem; letter-spacing:.14em;
  text-transform:uppercase; color:#C6BDAC; margin:0 0 1.15rem;
}
.fnote{color:var(--label); font-size:.9375rem; margin:0 0 1.6rem; max-width:31rem}
.flinks{display:flex; gap:1.6rem; flex-wrap:wrap; margin:0}
.flinks a{font-size:.9375rem; letter-spacing:.04em; color:var(--gold); text-decoration:none}
.flinks a:hover{color:var(--parchment)}
.fplain{margin-top:2.5rem; padding-top:1.6rem; border-top:1px solid rgba(232,220,200,.08)}
.fhead{
  font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--label); margin:0 0 1rem;
}
.fpl{list-style:none; margin:0; padding:0; columns:2; column-gap:2rem}
.fpl li{margin:0 0 .55rem; break-inside:avoid}
.fpl a{font-size:.9375rem; color:#C6BDAC; text-decoration:none}
.fpl a:hover{color:var(--gold)}
@media (max-width:560px){.fpl{columns:1}}

/* plain-language prose pages */
.prose h2{
  font-family:var(--display); font-weight:400; font-size:clamp(1.5rem,4.4vw,1.85rem);
  line-height:1.28; margin:3.25rem 0 1.25rem; color:var(--parchment);
}
.prose h3{
  font-family:var(--body); font-weight:400; font-size:.8125rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--label); margin:3.5rem 0 1.5rem;
}
.prose h3+p strong:first-child,.prose h4{color:var(--gold)}
.prose>*:first-child{margin-top:2.5rem}
.prose .qa{margin:0 0 1.9rem}
.prose .qa strong{display:block; color:var(--parchment); font-weight:500; margin-bottom:.4rem}

@media (max-width:700px){
  .nav{flex-direction:column; align-items:flex-start; gap:.8rem; padding:1.05rem var(--gutter)}
  .navlinks{gap:1.05rem}
  .navlinks a{font-size:.9rem; letter-spacing:.03em}
  .mark{font-size:1.1rem}
}
@media (max-width:360px){
  .navlinks a{font-size:.85rem}
  .navlinks{gap:.9rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important; animation:none !important}
}