/* The Four Horizons, Queensland edition.
   Direction B, Quiet Pages (design brief section 9), with Direction C's Part lists.
   One column of Literata on white, hairline rules, near-black navy ink, one royal-blue accent.
   Order: fonts, tokens (light, dark), base, layout, home, lists, chapter, pages, footer, responsive. */

/* ---------- fonts (self-hosted, SIL Open Font License, see /fonts) ---------- */
@font-face{font-family:"Literata";font-style:normal;font-weight:200 900;font-display:swap;src:url("/fonts/literata-latin-opsz-normal.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:"Literata";font-style:italic;font-weight:200 900;font-display:swap;src:url("/fonts/literata-latin-opsz-italic.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:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("/fonts/instrument-sans-latin-wght-normal.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}

/* ---------- tokens ---------- */
:root{
  color-scheme:light dark;
  /* primitives sampled from the badge (approximate: the source is a JPEG) */
  --tic-navy:#0D287E; --tic-royal:#0751A6; --tic-azure:#1175BC; --tic-bright:#0491D2; --tic-sky:#86C8E8;
  /* primitives derived for text and surfaces */
  --paper-0:#FFFFFF; --paper-50:#F5F8FC; --ink-900:#101B36; --ink-600:#465270; --line-200:#D5DCE8; --line-500:#7A88A6;
  /* semantic, light: the layer the rest of this file uses */
  --bg:var(--paper-0); --bg-alt:var(--paper-50); --ink:var(--ink-900); --ink-2:var(--ink-600);
  --rule:var(--line-200); --rule-strong:var(--line-500);
  --link:var(--tic-royal); --link-hover:var(--tic-navy); --accent:var(--tic-royal); --focus:var(--tic-royal);
  --badge-plate:#FFFFFF;
  /* type */
  --serif:"Literata","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-caption:.8125rem; --fs-small:.9375rem; --fs-body:1.1875rem; --fs-body-lead:1.3125rem;
  --fs-lede:clamp(1.25rem,1.1rem + .7vw,1.5rem);
  --fs-h2:clamp(1.5rem,1.25rem + 1vw,1.85rem);
  --fs-h1:clamp(2.1rem,1.4rem + 3.1vw,3.4rem);
  --fs-display:clamp(3rem,1.9rem + 5.6vw,5.6rem);
  --lh-body:1.72;
  /* layout */
  --gutter:clamp(20px,5vw,40px); --col:38rem; --wide:66rem; --margin-col:13rem;
  --focus-ring:3px solid var(--focus); --focus-offset:4px;
  --badge-header:48px; --badge-colophon:96px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0B111F; --bg-alt:#111A2E; --ink:#E8ECF5; --ink-2:#A8B3CB; --rule:#28344F; --rule-strong:#5A6885;
    --link:#8DBBF2; --link-hover:#FFFFFF; --accent:#8DBBF2; --focus:#8DBBF2;
  }
}
:root[data-theme="dark"]{
  --bg:#0B111F; --bg-alt:#111A2E; --ink:#E8ECF5; --ink-2:#A8B3CB; --rule:#28344F; --rule-strong:#5A6885;
  --link:#8DBBF2; --link-hover:#FFFFFF; --accent:#8DBBF2; --focus:#8DBBF2;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--serif);font-size:1.125rem;line-height:1.7;font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,dl,figure{margin:0}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{color:var(--link-hover);text-decoration-thickness:2px}
:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset);border-radius:2px}
[hidden]{display:none!important}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:#000;padding:10px 14px;z-index:100;font:600 1rem var(--sans)}
.skip:focus{left:8px;top:8px}
.col{width:min(100% - 2*var(--gutter),var(--col));margin-inline:auto}
.wide{width:min(100% - 2*var(--gutter),var(--wide));margin-inline:auto}
.m-hz{stroke:var(--accent)}

/* ---------- masthead ---------- */
.masthead .bar{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding-block:16px;border-bottom:1px solid var(--rule)}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink)}
.brand:hover{color:var(--ink)}
.badge{--badge:var(--badge-header);flex:none;width:var(--badge);height:var(--badge);border-radius:50%;background:var(--badge-plate);overflow:hidden;display:block;box-shadow:0 0 0 1px var(--rule)}
.badge img{width:100%;height:100%;object-fit:contain}
.brand-name{font:600 1.25rem/1.1 var(--serif);letter-spacing:-.005em}
.nav{display:flex;gap:6px 22px;font:500 var(--fs-small) var(--sans)}
.nav a{color:var(--ink);text-decoration:none;padding:10px 2px;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current]{color:var(--link);border-bottom-color:var(--link)}

/* ---------- shared headings ---------- */
.overline{font:500 var(--fs-small)/1.4 var(--sans);color:var(--accent);margin-bottom:22px}
.lede{font:400 var(--fs-lede)/1.55 var(--serif);color:var(--ink-2);text-wrap:pretty}
.sec-title{font:600 clamp(1.7rem,1.35rem + 1.4vw,2.2rem)/1.15 var(--serif);letter-spacing:-.012em;margin-bottom:.4rem}
.sec-title a{color:var(--ink);text-decoration:none}
.sec-title a:hover{color:var(--link);text-decoration:underline;text-underline-offset:.2em}
.sec-lead{font:italic 400 1.125rem/1.5 var(--serif);color:var(--ink-2);margin-bottom:1.6rem}
.preview-note{margin:0 0 1.6rem;padding:.7rem 1rem;border-left:3px solid var(--accent);background:var(--bg-alt);font:500 var(--fs-small)/1.5 var(--sans);color:var(--ink-2)}
.page-head{padding-block:clamp(40px,8vw,96px) clamp(20px,4vw,40px)}
.page-head h1{font:600 var(--fs-h1)/1.1 var(--serif);letter-spacing:-.018em;text-wrap:balance;margin-bottom:1.1rem}
.page-head .preview-note{margin:1.4rem 0 0}
.count-line{margin-top:1rem;font:500 var(--fs-small) var(--sans);color:var(--ink-2)}

/* ---------- home ---------- */
.opening{padding-block:clamp(56px,11vw,132px) clamp(40px,7vw,80px)}
.opening h1{font:500 var(--fs-display)/1.02 var(--serif);letter-spacing:-.028em;margin-bottom:26px}
.opening .lede{margin-bottom:30px}
.opening-links{display:flex;flex-wrap:wrap;gap:12px 28px;font:600 1rem var(--sans)}
.opening-links a{padding:6px 0}
.figure-block,.contents,.who{padding-block:clamp(24px,5vw,56px) clamp(48px,8vw,96px)}
.plate{width:100%;height:auto;max-height:240px;color:var(--ink);margin-bottom:26px}
.hz{list-style:none;padding:0 0 0 2.75rem;position:relative;border-bottom:1px solid var(--rule)}
.hz::before{content:"";position:absolute;left:.7rem;top:1.7rem;bottom:1rem;width:1px;background:var(--rule-strong)}
.hz::after{content:"";position:absolute;left:.7rem;bottom:.7rem;transform:translateX(-50%);border:5px solid transparent;border-top:8px solid var(--rule-strong);border-bottom:0}
.hz li{position:relative;display:grid;grid-template-columns:11rem minmax(0,1fr);gap:.25rem 2rem;align-items:baseline;padding:1.2rem 0;border-top:1px solid var(--rule)}
.hz li::before{content:"";position:absolute;left:-2.33rem;top:1.7rem;width:9px;height:9px;border-radius:50%;background:var(--ink)}
.hz .outer{border-top-style:dashed}
.hz .outer::before{background:var(--bg);border:1.5px solid var(--accent)}
.hz h3{font:600 1.3rem/1.2 var(--serif)}
.hz p{color:var(--ink-2);font-size:1.0625rem;line-height:1.5}
.hz .kind{display:block;font:500 var(--fs-caption) var(--sans);color:var(--accent);margin-top:.25rem}
figcaption{font:italic 400 1rem/1.5 var(--serif);color:var(--ink-2);margin-top:1rem}

.toc{list-style:none;padding:0;border-bottom:1px solid var(--rule)}
.toc li{position:relative;display:grid;grid-template-columns:4.5rem auto minmax(1rem,1fr) auto;column-gap:.85rem;align-items:baseline;padding:1.3rem 0;border-top:1px solid var(--rule)}
.toc-part{font:600 var(--fs-caption) var(--sans);color:var(--accent)}
.toc-title{font:600 1.45rem/1.2 var(--serif);letter-spacing:-.005em}
.toc-title a{color:var(--ink);text-decoration:none}
.toc-title a::after{content:"";position:absolute;inset:0}
.toc li:hover .toc-title a{color:var(--link);text-decoration:underline;text-underline-offset:.2em}
.toc-leader{border-bottom:2px dotted var(--rule-strong);transform:translateY(-.32em)}
.toc-count{font:500 var(--fs-small) var(--sans);color:var(--ink-2);white-space:nowrap}
.toc-desc{grid-column:2/-1;color:var(--ink-2);font-size:1.0625rem;line-height:1.5;margin-top:.3rem}
.more{margin-top:1.4rem;font:600 1rem var(--sans)}

.cols{display:grid;grid-template-columns:1fr 1fr;margin-top:1.6rem}
.cols>div{padding-right:1.75rem}
.cols>div+div{padding:0 0 0 1.75rem;border-left:1px solid var(--rule)}
.cols h3{font:italic 500 1.5rem/1.2 var(--serif);margin-bottom:.6rem}
.cols p{color:var(--ink-2);font-size:1.0625rem;line-height:1.6}
.cols p+p{margin-top:.8rem;font:500 var(--fs-small)/1.55 var(--sans);color:var(--ink)}

.colophon{text-align:center;padding-block:clamp(40px,7vw,80px);border-top:1px solid var(--rule)}
.colophon .badge{--badge:var(--badge-colophon);margin:0 auto 18px;box-shadow:0 0 0 1px var(--rule)}
.colophon-large .badge{--badge:132px}
.colophon p{font:italic 400 1.25rem/1.4 var(--serif);color:var(--ink)}

/* ---------- chapter and Part lists ---------- */
.part-block{padding-bottom:clamp(32px,6vw,64px)}
.part-block .toc-part{margin-bottom:.4rem}
.part-block .count{color:var(--ink-2);font-weight:500}
.part-block .dot{margin-inline:.35em;color:var(--ink-2)}
.chlist{list-style:none;padding:0;border-bottom:1px solid var(--rule)}
.chlist li{position:relative;display:grid;grid-template-columns:2.6rem minmax(0,1fr) auto;column-gap:1rem;align-items:baseline;padding:1.15rem 0;border-top:1px solid var(--rule)}
.chlist .num{font:600 var(--fs-caption) var(--sans);color:var(--accent)}
.chlist .t{font:600 1.2rem/1.3 var(--serif);letter-spacing:-.005em}
.chlist .t a{color:var(--ink);text-decoration:none}
.chlist .t a::after{content:"";position:absolute;inset:0}
.chlist li:hover .t a{color:var(--link);text-decoration:underline;text-underline-offset:.2em}
.chlist .m{font:500 .875rem var(--sans);color:var(--ink-2);white-space:nowrap}
.chlist .d{grid-column:2/3;margin-top:.3rem;color:var(--ink-2);font-size:1.0625rem;line-height:1.5}
.chlist .soon .t{font-weight:500;color:var(--ink-2)}
.empty{color:var(--ink-2);font-style:italic}
.part-pager,.pager{display:grid;grid-template-columns:1fr 1fr;gap:2rem;border-top:1px solid var(--rule);padding-top:1.75rem}
.part-pager{margin-block:3rem 5rem}
.part-pager a,.pager a{text-decoration:none;color:var(--ink)}
.part-pager small,.pager small{display:block;font:500 .875rem var(--sans);color:var(--ink-2)}
.part-pager b,.pager b{display:block;font:600 1.15rem/1.3 var(--serif);margin-top:.4rem}
.part-pager .next,.pager .next{text-align:right;grid-column:2}
.part-pager a:hover b,.pager a:hover b{color:var(--link);text-decoration:underline;text-underline-offset:.2em}

/* ---------- chapter ---------- */
.grid2{width:min(100% - 2*var(--gutter),var(--wide));margin-inline:auto;display:grid;grid-template-columns:var(--margin-col) minmax(0,var(--col));column-gap:clamp(2rem,5vw,4.5rem);justify-content:center}
.ch-head{padding-block:clamp(36px,7vw,88px) clamp(20px,3vw,36px)}
.ch-meta{font:500 var(--fs-small)/1.5 var(--sans);color:var(--ink-2);padding-top:.7rem}
.ch-meta p+p{margin-top:.9rem}
.ch-meta a{color:var(--accent)}
.ch-meta .sep{display:none}
.ch-head h1{font:600 var(--fs-h1)/1.1 var(--serif);letter-spacing:-.018em;text-wrap:balance;margin-bottom:1.1rem}
.subtitle{font:italic 400 clamp(1.15rem,1.05rem + .5vw,1.35rem)/1.5 var(--serif);color:var(--ink-2);text-wrap:pretty}
.ch-aside{padding-top:.4rem;font:500 var(--fs-small)/1.4 var(--sans)}
.rail h2{font:600 var(--fs-caption) var(--sans);color:var(--ink-2);margin-bottom:.8rem;letter-spacing:.02em}
.rail+.rail{margin-top:2.2rem}
.rail ul{list-style:none;padding:0}
.rail li+li{margin-top:.8rem}
.rail a{color:var(--ink);text-decoration:none}
.rail a:hover{color:var(--link);text-decoration:underline}
.rail-sections{position:sticky;top:24px}
.part-items{list-style:none;padding:0}
.part-items li{display:grid;grid-template-columns:1.5rem minmax(0,1fr);column-gap:.4rem;align-items:baseline;padding:.32rem 0}
.part-items li::before{content:attr(value);font:600 .75rem var(--sans);color:var(--ink-2);font-variant-numeric:tabular-nums}
.part-items a{color:var(--ink);text-decoration:none}
.part-items a:hover{color:var(--link);text-decoration:underline}
.part-items .here span{font-weight:700;color:var(--ink)}
.part-items .soon span{color:var(--ink-2);font-weight:400}
.part-disclosure{display:none;margin-bottom:1.8rem;border:1px solid var(--rule);border-top:3px solid var(--rule-strong);font-family:var(--sans)}
.part-disclosure summary{padding:.85rem 1rem;font-weight:600;font-size:var(--fs-small);cursor:pointer;color:var(--ink)}
.part-disclosure .part-items{padding:.35rem 1rem .9rem;border-top:1px solid var(--rule);font-size:var(--fs-small);line-height:1.4}
.prose{font-size:var(--fs-body);line-height:var(--lh-body);hyphens:manual;padding-bottom:1rem}
.prose p{margin-bottom:1.25em;text-wrap:pretty}
.prose>p:first-child{font-size:var(--fs-body-lead);line-height:1.62}
.prose h2{font:600 var(--fs-h2)/1.25 var(--serif);letter-spacing:-.01em;margin:2.5em 0 .7em;scroll-margin-top:24px;text-wrap:balance}
.prose h3{font:600 1.3rem/1.3 var(--serif);margin:2em 0 .5em;scroll-margin-top:24px}
.prose ul,.prose ol{margin:0 0 1.25em;padding-left:1.4em}
.prose li{margin-bottom:.4em}
.prose blockquote{margin:1.6em 0;padding:0 0 0 1.2rem;border-left:3px solid var(--rule-strong);color:var(--ink-2);font-style:italic}
.prose blockquote p{margin-bottom:.6em}
.prose strong{font-weight:600}
.pager{grid-column:2;margin-block:3rem 5rem}

/* ---------- about, 404 ---------- */
.about-body{padding-bottom:clamp(32px,6vw,64px)}
.about-body section+section{margin-top:2.6rem}
.about-body p{font-size:var(--fs-body);line-height:var(--lh-body);margin-top:1rem;text-wrap:pretty}
.notfound .mark{width:64px;height:64px;color:var(--ink);margin-bottom:1.5rem}
.notfound-links{list-style:none;padding:0;margin-top:1.8rem;display:grid;gap:.6rem;font:600 1rem var(--sans)}
.notfound{padding-bottom:clamp(48px,8vw,96px)}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--rule);padding-block:28px 40px;font:400 var(--fs-small)/1.5 var(--sans);color:var(--ink-2)}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 32px}
.site-foot a{color:var(--ink-2)}
.foot-nav{display:flex;gap:6px 20px;flex-wrap:wrap}
.foot-note{margin-top:1rem;max-width:46rem;font-size:.875rem;line-height:1.55}
.foot-copy{margin-top:.75rem;font-size:var(--fs-caption);line-height:1.5}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .grid2{display:block;width:min(100% - 2*var(--gutter),var(--col))}
  .ch-meta{display:flex;flex-wrap:wrap;gap:.2rem 1.1rem;padding:0;margin-bottom:1.4rem}
  .ch-meta p+p{margin:0}
  .ch-meta br{display:none}
  .ch-meta .sep{display:inline}
  .ch-meta p:first-child{margin-right:.2rem}
  .ch-aside{display:none}
  .part-disclosure{display:block}
  .pager{margin-top:2.5rem}
}
@media (max-width:720px){
  .hz{padding-left:2rem}
  .hz::before,.hz::after{left:.4rem}
  .hz li{grid-template-columns:1fr;gap:.35rem}
  .hz li::before{left:-30px}
  .toc li{display:block}
  .toc-part,.toc-title,.toc-count,.toc-desc{display:block}
  .toc-part{margin-bottom:.2rem}
  .toc-count{margin-top:.2rem}
  .toc-desc{margin-top:.35rem}
  .toc-leader{display:none}
  .chlist li{grid-template-columns:2rem minmax(0,1fr);row-gap:.15rem}
  .chlist .m{grid-column:2;order:3}
  .chlist .d{order:4}
  .cols{grid-template-columns:1fr}
  .cols>div{padding:0 0 1.8rem}
  .cols>div+div{padding:1.8rem 0 0;border-left:0;border-top:1px solid var(--rule)}
  .prose{font-size:1.125rem;line-height:1.7}
  .prose>p:first-child{font-size:1.2rem}
  .pager,.part-pager{grid-template-columns:1fr;gap:1.5rem}
  .pager .next,.part-pager .next{text-align:left;grid-column:auto}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}