/* ==========================================================================
   Kite & Common - house sheet
   One stylesheet for the whole journal. No external requests, system faces only.
   Naming: masthead / wayfinder / gale / band / chapter / noticeboard / notice /
           readout / dispatch / rail / keylines / stepped / checklist / plate /
           rollcall / quotebar / trail / token / press / footing
   ========================================================================== */

:root{
  /* Night on the moor, chalk paper, one red dress, a little gorse. */
  --nightmoor:#0f141d;
  --peat:#1d2530;
  --deepwater:#173039;
  --chalk:#f7f2e8;
  --sheet:#fffdf7;
  --linen:#ece3d3;
  --mist:#d5cbb8;
  --slate:#5c6672;
  --scarlet:#b32430;
  --gorse:#c9902c;
  --ivy:#3d6a5c;

  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua","URW Palladio L",Georgia,"Times New Roman",serif;
  --grotesk:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --stamp:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  --gutter:clamp(1.15rem,5vw,3rem);
  --band:clamp(3.25rem,8vw,6.5rem);
  --column:42rem;
  --hairline:1px solid rgba(29,37,48,.16);
  --hairline-dusk:1px solid rgba(247,242,232,.18);
  --lift:0 1px 0 rgba(29,37,48,.05), 0 12px 30px -22px rgba(15,20,29,.55);

  --wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M0 6C15 0 25 12 40 6S65 0 80 6s25 6 40 0' fill='none' stroke='%23c9902c' stroke-width='1.6'/%3E%3C/svg%3E");
}

/* --- groundwork ---------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--chalk);
  color:var(--peat);
  font-family:var(--serif);
  font-size:clamp(1.02rem,.98rem + .3vw,1.12rem);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.12;letter-spacing:-.012em}
p,ul,ol,dl,figure,table{margin:0}
::selection{background:rgba(179,36,48,.16)}

.skipwire{
  position:absolute;left:-999px;top:0;z-index:99;
  background:var(--peat);color:var(--chalk);
  padding:.7rem 1.1rem;font-family:var(--stamp);font-size:.8rem;
}
.skipwire:focus{left:.6rem;top:.6rem}
:focus-visible{outline:2px solid var(--gorse);outline-offset:3px}

.shell{width:100%;max-width:74rem;margin-inline:auto;padding-inline:var(--gutter)}
.shell--tight{max-width:56rem}

/* --- masthead ------------------------------------------------------------ */

.masthead__strip{
  background:var(--nightmoor);
  color:rgba(247,242,232,.72);
  font-family:var(--stamp);
  font-size:.66rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding-block:.5rem;
}
.masthead__strip p{margin:0;text-align:center;line-height:1.5}
.masthead__strip b{color:var(--gorse);font-weight:400}

.masthead__deck{
  border-bottom:var(--hairline);
  background:var(--chalk);
  padding-block:1rem;
}
.masthead__deck .shell{
  display:flex;flex-wrap:wrap;gap:.9rem 1.4rem;
  align-items:center;justify-content:space-between;
}

.wordmark{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.wordmark svg{width:2.15rem;height:2.15rem;flex:0 0 auto}
.wordmark__name{
  font-family:var(--serif);font-size:1.3rem;font-weight:600;
  letter-spacing:-.02em;line-height:1;display:block;
}
.wordmark__name em{font-style:normal;color:var(--scarlet)}
.wordmark__sub{
  display:block;font-family:var(--stamp);font-size:.6rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--slate);
  margin-top:.32rem;
}

.wayfinder{display:flex;flex-wrap:wrap;gap:.35rem .2rem}
.wayfinder a{
  font-family:var(--grotesk);font-size:.85rem;letter-spacing:.01em;
  text-decoration:none;color:var(--peat);
  padding:.42rem .72rem;border-radius:2px;
  border-bottom:2px solid transparent;
}
.wayfinder a:hover{background:rgba(201,144,44,.14)}
.wayfinder a[aria-current="page"]{border-bottom-color:var(--scarlet);font-weight:600}

/* --- the hero ------------------------------------------------------------ */

.gale{
  background:
    radial-gradient(80% 55% at 78% 12%, rgba(247,242,232,.14), transparent 62%),
    radial-gradient(70% 60% at 8% 88%, rgba(23,48,57,.75), transparent 70%),
    linear-gradient(168deg,#182231 0%,#111823 58%,#0d1119 100%);
  color:var(--chalk);
  position:relative;
  overflow:hidden;
  padding-block:clamp(2.6rem,8vw,5.5rem);
}
.gale::before{
  content:"";position:absolute;inset:-20% -10%;
  background:repeating-linear-gradient(103deg,rgba(247,242,232,.05) 0 1px,transparent 1px 34px);
  opacity:.8;pointer-events:none;
}
.gale .shell{position:relative;z-index:1}
.gale__grid{display:grid;gap:clamp(1.9rem,5vw,3.4rem);align-items:center}
@media (min-width:56rem){
  .gale__grid{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr)}
}
.gale__strap{
  font-family:var(--stamp);font-size:.68rem;letter-spacing:.19em;
  text-transform:uppercase;color:var(--gorse);
  display:flex;align-items:center;gap:.65rem;margin-bottom:1.15rem;
}
.gale__strap::before{content:"";width:2.2rem;height:1px;background:var(--gorse);flex:0 0 auto}
.gale__title{
  font-size:clamp(2.25rem,7.4vw,4.15rem);
  line-height:1.02;letter-spacing:-.022em;
  margin-bottom:1.2rem;
}
.gale__title i{font-style:italic;color:var(--gorse)}
.gale__standfirst{
  color:rgba(247,242,232,.82);
  font-size:clamp(1.06rem,1rem + .5vw,1.24rem);
  max-width:33rem;
}
.gale__standfirst + .gale__standfirst{margin-top:.9rem}

.pair{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}
.press{
  font-family:var(--grotesk);font-size:.86rem;font-weight:600;
  letter-spacing:.01em;text-decoration:none;
  padding:.78rem 1.25rem;border-radius:2px;
  display:inline-flex;align-items:center;gap:.5rem;
  transition:transform .16s ease,background .16s ease,color .16s ease;
}
.press:hover{transform:translateY(-1px)}
.press--solid{background:var(--chalk);color:var(--peat)}
.press--solid:hover{background:var(--gorse)}
.press--ghost{border:1px solid rgba(247,242,232,.42);color:var(--chalk)}
.press--ghost:hover{background:rgba(247,242,232,.1)}
.press--dark{background:var(--peat);color:var(--chalk)}
.press--dark:hover{background:var(--scarlet)}

/* --- image plates (never an empty grey square) --------------------------- */

.plate{
  position:relative;margin:0;
  border-radius:2px;overflow:hidden;
  background:
    radial-gradient(120% 82% at 22% 14%, rgba(201,144,44,.3), transparent 60%),
    radial-gradient(92% 72% at 86% 82%, rgba(179,36,48,.24), transparent 66%),
    linear-gradient(158deg,#25313e 0%,#17212c 56%,#0f141d 100%);
  box-shadow:var(--lift);
}
.plate > img{
  width:100%;height:100%;object-fit:cover;
  background:inherit;color:rgba(247,242,232,.75);
  font-family:var(--stamp);font-size:.72rem;
}
.plate--hero{aspect-ratio:4/5}
@media (min-width:56rem){.plate--hero{aspect-ratio:5/6}}
.plate--wide{aspect-ratio:16/10}
.plate--panel{aspect-ratio:3/2}
.plate--framed{position:relative}
.plate--framed::after{
  content:"";position:absolute;inset:0;
  border:1px solid rgba(247,242,232,.24);pointer-events:none;
}
.plate__caption{
  font-family:var(--stamp);font-size:.68rem;line-height:1.5;
  letter-spacing:.04em;color:var(--slate);
  margin-top:.6rem;
}
.gale .plate__caption{color:rgba(247,242,232,.6)}

.plateset{position:relative}
.plateset::before{
  content:"";position:absolute;inset:auto -.85rem -.85rem auto;
  width:62%;height:58%;border:1px solid rgba(201,144,44,.55);
  border-radius:2px;z-index:0;
}
.plateset .plate{position:relative;z-index:1}

/* --- bands and chapter headings ------------------------------------------ */

.band{padding-block:var(--band)}
.band--linen{background:var(--linen)}
.band--dusk{background:var(--nightmoor);color:var(--chalk)}
.band--dusk .chapter__title{color:var(--chalk)}
.band--dusk .chapter__note{color:rgba(247,242,232,.72)}
.band--rule{border-top:var(--hairline)}

.chapter{max-width:40rem;margin-bottom:clamp(1.7rem,4vw,2.7rem)}
.chapter--wide{max-width:52rem}
.chapter__strap{
  font-family:var(--stamp);font-size:.67rem;letter-spacing:.19em;
  text-transform:uppercase;color:var(--scarlet);
  margin-bottom:.85rem;display:block;
}
.band--dusk .chapter__strap{color:var(--gorse)}
.chapter__title{font-size:clamp(1.7rem,4.4vw,2.65rem);line-height:1.08}
.chapter__note{margin-top:.9rem;color:var(--slate)}

.windrule{
  height:12px;width:min(100%,11rem);
  background:var(--wave) repeat-x center/120px 12px;
  margin:0 0 1.1rem;
}
.windrule--centred{margin-inline:auto}

/* --- noticeboard --------------------------------------------------------- */

.noticeboard{
  display:grid;gap:clamp(1rem,2.6vw,1.55rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17.5rem),1fr));
}
.noticeboard--pair{grid-template-columns:repeat(auto-fit,minmax(min(100%,21rem),1fr))}

.notice{
  background:var(--sheet);
  border:var(--hairline);
  border-top:3px solid var(--slate);
  padding:clamp(1.15rem,3vw,1.6rem);
  display:flex;flex-direction:column;gap:.6rem;
  transition:transform .18s ease,box-shadow .18s ease;
}
.notice:hover{transform:translateY(-3px);box-shadow:var(--lift)}
.notice--gorse{border-top-color:var(--gorse)}
.notice--scarlet{border-top-color:var(--scarlet)}
.notice--ivy{border-top-color:var(--ivy)}
.notice__stamp{
  font-family:var(--stamp);font-size:.63rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--slate);
}
.notice__title{font-size:1.28rem;line-height:1.16}
.notice__title a{text-decoration:none;background-image:linear-gradient(var(--gorse),var(--gorse));background-size:0 2px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .2s ease}
.notice__title a:hover{background-size:100% 2px}
.notice__text{font-size:.98rem;color:var(--slate);margin-top:-.15rem}
.notice__more{
  margin-top:auto;font-family:var(--grotesk);font-size:.82rem;font-weight:600;
  color:var(--scarlet);text-decoration:none;
}
.notice__more::after{content:" \203A"}
.notice__more:hover{text-decoration:underline}

/* --- roll call (numbered index) ------------------------------------------ */

.rollcall{list-style:none;padding:0;counter-reset:roll;display:grid;gap:.15rem}
.rollcall li{
  counter-increment:roll;
  display:grid;grid-template-columns:2.9rem 1fr;gap:.9rem;
  align-items:baseline;
  padding:.95rem 0;border-bottom:var(--hairline);
}
.rollcall li::before{
  content:counter(roll,decimal-leading-zero);
  font-family:var(--stamp);font-size:.82rem;color:var(--gorse);
  letter-spacing:.06em;
}
.band--dusk .rollcall li{border-bottom-color:rgba(247,242,232,.16)}
.rollcall a,.rollcall strong{text-decoration:none;font-size:1.1rem;font-weight:600;display:block}
.rollcall a:hover{color:var(--scarlet)}
.band--dusk .rollcall a:hover{color:var(--gorse)}
.rollcall span{display:block;font-size:.92rem;color:var(--slate);font-family:var(--grotesk);margin-top:.2rem}
.band--dusk .rollcall span{color:rgba(247,242,232,.65)}

/* --- feature strip (image + text) ---------------------------------------- */

.feature{display:grid;gap:clamp(1.6rem,4vw,3rem);align-items:center}
@media (min-width:56rem){
  .feature{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .feature--flip .feature__words{order:2}
}
.feature__words > * + *{margin-top:1rem}

/* --- article pages ------------------------------------------------------- */

.trail{
  font-family:var(--stamp);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--slate);
  padding-block:1.3rem 0;
}
.trail ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.trail li:not(:last-child)::after{content:"\203A";margin-left:.45rem;color:var(--mist)}
.trail a{text-decoration:none}
.trail a:hover{color:var(--scarlet);text-decoration:underline}

.pagehead{padding-block:clamp(1.4rem,4vw,2.4rem) clamp(1.8rem,5vw,3rem)}
.pagehead__strap{
  font-family:var(--stamp);font-size:.67rem;letter-spacing:.19em;
  text-transform:uppercase;color:var(--scarlet);display:block;margin-bottom:.9rem;
}
.pagehead__title{font-size:clamp(2rem,6.2vw,3.4rem);line-height:1.05;max-width:22ch}
.pagehead__standfirst{
  margin-top:1.1rem;max-width:38rem;
  font-size:clamp(1.06rem,1rem + .45vw,1.22rem);color:var(--slate);
}
.pagehead__meta{
  margin-top:1.35rem;display:flex;flex-wrap:wrap;gap:.5rem;
}

.token{
  font-family:var(--stamp);font-size:.63rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--slate);
  border:var(--hairline);border-radius:999px;
  padding:.28rem .72rem;
}

.readout{display:grid;gap:clamp(2rem,5vw,3rem);align-items:start}
@media (min-width:62rem){
  .readout{grid-template-columns:minmax(0,var(--column)) minmax(0,17.5rem);gap:clamp(2.4rem,4.5vw,4rem)}
}

.dispatch{max-width:var(--column)}
.dispatch > * + *{margin-top:1.15rem}
.dispatch h2{
  font-size:clamp(1.42rem,3.4vw,1.85rem);
  margin-top:clamp(2.2rem,5vw,3rem);
  padding-top:1.1rem;border-top:var(--hairline);
}
.dispatch h3{font-size:1.16rem;margin-top:1.9rem;color:var(--deepwater)}
.dispatch p > strong{font-weight:600}
.dispatch a{color:var(--scarlet);text-underline-offset:.18em}
.dispatch ul:not([class]){padding-left:1.15rem}
.dispatch ul:not([class]) li,.dispatch ol:not([class]) li{margin-top:.45rem}
.dispatch ol:not([class]){padding-left:1.3rem}

.leadin::first-letter{
  float:left;font-size:3.35rem;line-height:.86;
  padding:.14rem .5rem .1rem 0;color:var(--scarlet);
  font-weight:600;
}

.checklist{list-style:none;padding:0;display:grid;gap:.6rem}
.checklist li{display:grid;grid-template-columns:1.35rem 1fr;gap:.6rem;align-items:start}
.checklist li::before{
  content:"\2713";color:var(--ivy);font-weight:700;
  font-family:var(--grotesk);line-height:1.6;
}

.stepped{list-style:none;padding:0;counter-reset:step;display:grid;gap:1.35rem}
.stepped > li{counter-increment:step;display:grid;grid-template-columns:2rem 1fr;gap:.95rem}
.stepped > li::before{
  content:counter(step);
  width:2rem;height:2rem;border-radius:50%;
  background:var(--peat);color:var(--chalk);
  font-family:var(--stamp);font-size:.8rem;
  display:grid;place-items:center;
}
.stepped h3{margin:0 0 .35rem}

.quotebar{
  margin-block:clamp(2rem,5vw,2.8rem);
  padding-top:1.2rem;
  border-top:var(--hairline);border-bottom:var(--hairline);
  padding-bottom:1.4rem;
}
.quotebar p{
  font-size:clamp(1.25rem,3.4vw,1.6rem);line-height:1.3;
  letter-spacing:-.012em;color:var(--deepwater);
}
.quotebar cite{
  display:block;margin-top:.8rem;font-style:normal;
  font-family:var(--stamp);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--slate);
}

.rail{display:grid;gap:1.5rem}
@media (min-width:62rem){.rail{position:sticky;top:1.6rem}}

.keylines{
  background:var(--linen);border-left:3px solid var(--gorse);
  padding:1.15rem 1.25rem;
}
.keylines h2,.keylines h3{
  font-family:var(--stamp);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--slate);margin:0 0 .8rem;
  border:0;padding:0;
}
.keylines dl{display:grid;gap:.7rem;margin:0}
.keylines dt{
  font-family:var(--grotesk);font-size:.72rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--slate);
}
.keylines dd{margin:.1rem 0 0;font-size:.98rem;line-height:1.45}

.margin-note{
  border-top:2px solid var(--peat);border-bottom:var(--hairline);
  padding-block:.9rem 1.1rem;
}
.margin-note h2,.margin-note h3{
  font-family:var(--stamp);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--scarlet);margin:0 0 .6rem;
  border:0;padding:0;
}
.margin-note p{font-size:.95rem;line-height:1.6;color:var(--slate)}
.margin-note p + p{margin-top:.6rem}

.railnav{list-style:none;padding:0;display:grid;gap:.5rem}
.railnav a{font-family:var(--grotesk);font-size:.92rem;text-decoration:none;border-bottom:1px solid var(--mist);padding-bottom:.5rem;display:block}
.railnav a:hover{color:var(--scarlet);border-bottom-color:var(--scarlet)}

/* --- notes, callouts ----------------------------------------------------- */

.standing-note{
  background:var(--sheet);border:var(--hairline);
  border-left:3px solid var(--scarlet);
  padding:clamp(1.1rem,3vw,1.5rem);
  font-size:.98rem;
}
.standing-note strong{font-weight:600}
.band--dusk .standing-note{background:rgba(247,242,232,.06);border-color:rgba(247,242,232,.2);color:rgba(247,242,232,.85)}

.tally{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))}
.tally div{border-top:2px solid var(--gorse);padding-top:.8rem}
.tally b{display:block;font-size:clamp(1.6rem,4vw,2.15rem);line-height:1.1;letter-spacing:-.02em}
.tally span{font-family:var(--stamp);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--slate)}
.band--dusk .tally span{color:rgba(247,242,232,.62)}

/* --- footing ------------------------------------------------------------- */

.footing{background:var(--nightmoor);color:rgba(247,242,232,.78);padding-block:clamp(2.6rem,6vw,4rem) 2rem;margin-top:0}
.footing__grid{display:grid;gap:2rem}
@media (min-width:52rem){.footing__grid{grid-template-columns:1.4fr 1fr 1fr}}
.footing h2{
  font-family:var(--stamp);font-size:.66rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--gorse);margin-bottom:.95rem;
}
.footing ul{list-style:none;padding:0;display:grid;gap:.5rem}
.footing a{color:rgba(247,242,232,.86);text-decoration:none;font-family:var(--grotesk);font-size:.9rem}
.footing a:hover{color:var(--gorse);text-decoration:underline}
.footing__blurb{font-size:.98rem;max-width:26rem;line-height:1.6;margin-top:1rem}
.footing .wordmark__name{color:var(--chalk)}
.footing .wordmark__sub{color:rgba(247,242,232,.55)}
.footing__base{
  margin-top:clamp(2rem,5vw,3rem);padding-top:1.3rem;
  border-top:var(--hairline-dusk);
  font-family:var(--stamp);font-size:.68rem;line-height:1.75;
  letter-spacing:.03em;color:rgba(247,242,232,.62);
  display:grid;gap:.6rem;
}
@media (min-width:52rem){
  .footing__base{grid-template-columns:1fr auto;align-items:end}
}

/* --- small mercies ------------------------------------------------------- */

.pagebody{padding-top:clamp(2.2rem,6vw,3.6rem);padding-bottom:var(--band)}
.spaced-top{margin-top:clamp(2rem,5vw,3rem)}

.hush{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media print{
  .masthead__strip,.wayfinder,.footing,.gale::before{display:none}
  body{background:#fff;color:#000}
}