/* Greyhaven — shared site stylesheet
   Editorial identity: warm paper in light mode, deep harbour ink in dark,
   Fraunces + IBM Plex Mono, hairline rules, numbered sections, square corners.
   All colours route through the theme variables below — no component rule
   hard-codes a theme colour. */

:root{
  /* Light theme — the paper record room */
  --bg:#F5F1EA;
  --panel:#EFEAE1;
  --band:#E8ECE8;
  --hover:#EFEAE1;
  --ink:#1A1A18;
  --ink-secondary:#59554D;
  --accent:#C73E1D;
  --accent-dark:#A93418;
  --brass:#D9B45B;
  --brass-text:#7C5F12;
  --seal:#C73E1D;
  --hairline:rgba(26,26,24,0.14);
  --rule:#1A1A18;
  --img-border:rgba(26,26,24,0.45);
  --img-border-soft:rgba(26,26,24,0.35);
  --input-border:#59554D;
  --field-bg:transparent;
  --btn-bg:#C73E1D;
  --btn-bg-hover:#A93418;
  --btn-fg:#FFFFFF;
  --focus:#C73E1D;
  --hero-card:rgba(245,241,234,0.92);
  --scrim-top:rgba(245,241,234,0.86);
  --scrim-mid:rgba(245,241,234,0.74);
  --scrim-bottom:rgba(245,241,234,0.82);
  --grain-op:0.03;
  --contour-img:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='360'%20height='120'%20viewBox='0%200%20360%20120'%3E%3Cg%20fill='none'%20stroke='%231F3A4A'%20stroke-opacity='0.08'%3E%3Cpath%20d='M-10%2020C60%205%2C120%2035%2C190%2020S320%205%2C370%2020'/%3E%3Cpath%20d='M-10%2050C60%2035%2C120%2065%2C190%2050S320%2035%2C370%2050'/%3E%3Cpath%20d='M-10%2080C60%2065%2C120%2095%2C190%2080S320%2065%2C370%2080'/%3E%3Cpath%20d='M-10%20110C60%2095%2C120%20125%2C190%20110S320%2095%2C370%20110'/%3E%3C/g%3E%3C/svg%3E");
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease:cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme:light;
}

:root[data-theme="dark"]{
  /* Dark theme — the harbour at night, lamplight on the water */
  --bg:#0C1521;
  --panel:#132433;
  --band:#0F1E2E;
  --hover:#16283C;
  --ink:#EDE6D6;
  --ink-secondary:#B9AE97;
  --accent:#C73E1D;
  --accent-dark:#A93418;
  --brass:#D9B45B;
  --brass-text:#D9B45B;
  --seal:#D9B45B;
  --hairline:rgba(217,180,91,0.20);
  --rule:rgba(217,180,91,0.5);
  --img-border:rgba(237,230,214,0.35);
  --img-border-soft:rgba(237,230,214,0.22);
  --input-border:#8A7D63;
  --field-bg:#0E1B29;
  --btn-bg:#C73E1D;
  --btn-bg-hover:#A93418;
  --btn-fg:#FFFFFF;
  --focus:#D9B45B;
  --hero-card:rgba(9,15,24,0.8);
  --scrim-top:rgba(12,21,33,0.74);
  --scrim-mid:rgba(12,21,33,0.58);
  --scrim-bottom:rgba(12,21,33,0.68);
  --grain-op:0.05;
  --contour-img:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='360'%20height='120'%20viewBox='0%200%20360%20120'%3E%3Cg%20fill='none'%20stroke='%23D9B45B'%20stroke-opacity='0.05'%3E%3Cpath%20d='M-10%2020C60%205%2C120%2035%2C190%2020S320%205%2C370%2020'/%3E%3Cpath%20d='M-10%2050C60%2035%2C120%2065%2C190%2050S320%2035%2C370%2050'/%3E%3Cpath%20d='M-10%2080C60%2065%2C120%2095%2C190%2080S320%2065%2C370%2080'/%3E%3Cpath%20d='M-10%20110C60%2095%2C120%20125%2C190%20110S320%2095%2C370%20110'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme:dark;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background-color:var(--bg);
  color:var(--ink);
  font-family:var(--serif);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
  transition:background-color 300ms var(--ease), color 300ms var(--ease);
}
:root[data-theme="dark"] body{
  background-image:
    radial-gradient(1100px 520px at 88% -8%, rgba(217,180,91,0.10), rgba(217,180,91,0) 60%),
    radial-gradient(900px 620px at -12% 108%, rgba(58,102,150,0.14), rgba(58,102,150,0) 62%);
  background-attachment:fixed;
}
/* Grain over everything, very subtle — lamplight dust in the dark, paper tooth in the light */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:90;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='2'/%3E%3C/filter%3E%3Crect%20width='160'%20height='160'%20filter='url(%23n)'%20opacity='0.55'/%3E%3C/svg%3E");
  opacity:var(--grain-op);
}
::selection{background:var(--ink);color:var(--bg);}

:focus{outline:none;}
:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
}

.skip-link{
  position:absolute;
  left:1rem;top:-4rem;
  z-index:100;
  background:var(--ink);
  color:var(--bg);
  font-family:var(--mono);
  font-size:0.75rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  text-decoration:none;
  padding:0.75rem 1rem;
  transition:top 200ms var(--ease);
}
.skip-link:focus-visible{top:1rem;color:var(--bg);}

.wrap{
  max-width:76rem;
  margin:0 auto;
  padding:0 clamp(1.25rem, 4vw, 3rem);
}

.label{
  font-family:var(--mono);
  font-size:0.75rem;
  font-weight:400;
  letter-spacing:0.13em;
  text-transform:uppercase;
  color:var(--ink-secondary);
  line-height:1.35;
}
.label .no{color:var(--ink);}

a{color:var(--ink);}
.text-link{
  font-family:var(--mono);
  font-size:0.8125rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  text-decoration:none;
  background-image:linear-gradient(currentColor, currentColor);
  background-size:0% 1px;
  background-repeat:no-repeat;
  background-position:0 100%;
  transition:background-size 350ms var(--ease);
  padding-bottom:0.2rem;
}
.text-link:hover{background-size:100% 1px;}
.text-link .arr{color:var(--accent);}
:root[data-theme="dark"] .text-link .arr{color:var(--brass);}

img{max-width:100%;}

/* ---------- Masthead ---------- */
header.site{
  border-bottom:1px solid var(--hairline);
}
.masthead{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1.5rem;
  flex-wrap:wrap;
  padding-top:1.4rem;
  padding-bottom:1.4rem;
}
.wordmark{
  font-family:var(--mono);
  font-size:0.9375rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  text-decoration:none;
}
.wordmark .dot{color:var(--accent);}
:root[data-theme="dark"] .wordmark .dot{color:var(--brass);}
.mast-tools{
  display:flex;
  align-items:baseline;
  gap:2rem;
  flex-wrap:wrap;
}
nav.site-nav ul{
  list-style:none;
  display:flex;
  gap:2rem;
  flex-wrap:wrap;
}
nav.site-nav a{
  font-family:var(--mono);
  font-size:0.75rem;
  letter-spacing:0.13em;
  text-transform:uppercase;
  text-decoration:none;
  padding:0.5rem 0;
  background-image:linear-gradient(currentColor, currentColor);
  background-size:0% 1px;
  background-repeat:no-repeat;
  background-position:0 100%;
  transition:background-size 350ms var(--ease);
}
nav.site-nav a:hover{background-size:100% 1px;}
nav.site-nav a[aria-current="page"]{
  background-image:linear-gradient(var(--accent), var(--accent));
  background-size:100% 1px;
}
:root[data-theme="dark"] nav.site-nav a[aria-current="page"]{
  background-image:linear-gradient(var(--brass), var(--brass));
}
.theme-toggle{
  font-family:var(--mono);
  font-size:0.75rem;
  letter-spacing:0.13em;
  text-transform:uppercase;
  background:transparent;
  color:var(--ink);
  border:1px solid var(--hairline);
  border-radius:0;
  padding:0.5rem 0.8rem;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:0.55rem;
  transition:border-color 250ms var(--ease);
}
.theme-toggle::before{
  content:"";
  width:0.62rem;
  height:0.62rem;
  border-radius:50%;
  border:1.5px solid currentColor;
  background:linear-gradient(90deg, currentColor 50%, transparent 50%);
  flex:none;
}
.theme-toggle:hover{border-color:var(--brass-text);}

/* ---------- Record bar (the terminal chrome) ---------- */
.record-bar{
  border-bottom:1px solid var(--hairline);
}
.record-bar-in{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  padding-top:0.55rem;
  padding-bottom:0.55rem;
  font-family:var(--mono);
  font-size:0.6875rem;
  letter-spacing:0.13em;
  text-transform:uppercase;
  color:var(--ink-secondary);
  line-height:1.5;
}
.record-sheet{color:var(--brass-text);}

/* ---------- Attestation seal & lines ---------- */
.seal{
  width:0.72rem;
  height:0.72rem;
  flex:none;
  color:var(--ink-secondary);
  opacity:0.6;
}
.attest-line{
  display:flex;
  align-items:center;
  gap:0.55rem;
  font-family:var(--mono);
  font-size:0.75rem;
  letter-spacing:0.13em;
  text-transform:uppercase;
  color:var(--ink-secondary);
  line-height:1.4;
}
.form-attest{margin-bottom:1.2rem;}
.record-strip{
  margin-top:1.5rem;
  padding-top:0.85rem;
  border-top:1px solid var(--hairline);
  display:flex;
  align-items:center;
  gap:0.6rem;
  font-family:var(--mono);
  font-size:0.75rem;
  letter-spacing:0.11em;
  text-transform:uppercase;
  color:var(--ink-secondary);
  line-height:1.5;
}

/* ---------- Hero (index — image-led) ---------- */
.hero{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  background-size:cover;
  background-position:center 30%;
  min-height:min(92vh, 64rem);
  display:flex;
  align-items:center;
  padding-top:clamp(3.5rem, 9vh, 6rem);
  padding-bottom:clamp(3.5rem, 9vh, 6rem);
}
:root:not([data-theme="dark"]) .hero{
  background-image:
    linear-gradient(102deg, rgba(245,241,234,0.96) 0%, rgba(245,241,234,0.84) 52%, rgba(245,241,234,0.38) 100%),
    linear-gradient(0deg, #F5F1EA 0%, rgba(245,241,234,0) 22%),
    url("img/hero-panorama.webp");
}
:root[data-theme="dark"] .hero{
  background-image:
    linear-gradient(102deg, rgba(6,11,19,0.92) 0%, rgba(6,11,19,0.78) 52%, rgba(6,11,19,0.50) 100%),
    linear-gradient(0deg, #0C1521 0%, rgba(12,21,33,0) 22%),
    url("img/hero-panorama.webp");
}
.hero-inner{width:100%;}
.hero-grid{
  display:grid;
  grid-template-columns:7fr 5fr;
  gap:clamp(2.5rem, 6vw, 5rem);
  align-items:start;
}
.hero h1{
  font-size:clamp(3rem, 8vw, 6.5rem);
  font-weight:400;
  line-height:1.0;
  letter-spacing:-0.015em;
  margin-top:1.6rem;
}
.hero h1 em{font-style:italic;}
.hero-cap{
  margin-top:clamp(2.5rem, 6vh, 4rem);
  color:var(--ink-secondary);
}
.standfirst{
  margin-top:2.2rem;
  font-size:1.1875rem;
  line-height:1.6;
  max-width:34em;
}
.doors{
  margin-top:3rem;
  display:flex;
  align-items:center;
  gap:2.2rem;
  flex-wrap:wrap;
}
.btn{
  display:inline-block;
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-family:var(--mono);
  font-size:0.8125rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  text-decoration:none;
  padding:1rem 1.6rem;
  min-height:3rem;
  border:0;
  cursor:pointer;
  transition:background-color 250ms var(--ease);
}
.btn:hover{background:var(--btn-bg-hover);}

.hero-index{
  background:var(--hero-card);
  border:1px solid var(--hairline);
  padding:1.3rem 1.5rem 1.5rem;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.hero-index dl{width:100%;}
.hero-index .row{
  display:grid;
  grid-template-columns:8.5rem 1fr;
  gap:1rem;
  padding:0.85rem 0;
  border-bottom:1px solid var(--hairline);
  align-items:baseline;
}
.hero-index .row:first-child{padding-top:0.35rem;}
.hero-index dt{
  font-family:var(--mono);
  font-size:0.75rem;
  letter-spacing:0.13em;
  text-transform:uppercase;
  color:var(--ink-secondary);
}
.hero-index dd{
  font-size:1.0625rem;
  line-height:1.4;
}
.hero-index dd em{font-style:italic;}

/* Page hero (subpages) */
.page-hero{
  padding-top:clamp(3.5rem, 10vh, 6.5rem);
  padding-bottom:clamp(2.5rem, 6vh, 4rem);
}
.page-hero h1{
  font-size:clamp(2.6rem, 6vw, 4.75rem);
  font-weight:400;
  line-height:1.02;
  letter-spacing:-0.015em;
  margin-top:1.4rem;
  max-width:14em;
}
.page-hero h1 em{font-style:italic;}
.page-hero .standfirst{max-width:38em;}

/* ---------- Plates & figures ---------- */
.plate{margin:1.6rem 0 0;}
.plate img{
  width:172px;
  max-width:62%;
  height:auto;
  display:block;
  border:1px solid var(--img-border);
}
.plate figcaption{margin-top:.55rem;}
figure.plate-wide{margin-top:clamp(2.5rem, 6vh, 4rem);}
figure.plate-wide img{
  width:100%;
  height:auto;
  display:block;
  border:1px solid var(--img-border);
  background:var(--panel);
}
figure.plate-wide figcaption{
  margin-top:.8rem;
  display:flex;
  justify-content:space-between;
  gap:1.5rem;
  flex-wrap:wrap;
  align-items:baseline;
}
figure.plate-wide .cap-note{
  font-style:italic;
  color:var(--ink-secondary);
  font-size:0.9375rem;
  max-width:34em;
}
figure.plate-narrow{max-width:40rem;margin-left:auto;margin-right:auto;}

/* Full-bleed world bands */
figure.band{margin:clamp(2.5rem,6vh,4rem) 0 0;width:100vw;margin-left:calc(50% - 50vw);}
figure.band img{width:100%;height:auto;display:block;}
figure.band figcaption{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;width:min(76rem,100% - 3rem);margin:0.9rem auto 0;}
figure.band .cap-note{
  font-style:italic;
  color:var(--ink-secondary);
  font-size:0.9375rem;
  max-width:34em;
}

/* ---------- Sections ---------- */
section.block{
  padding-top:clamp(5rem, 11vh, 8.5rem);
  padding-bottom:clamp(5rem, 11vh, 8.5rem);
}
section.block.tight{
  padding-top:clamp(3rem, 7vh, 5rem);
  padding-bottom:clamp(3rem, 7vh, 5rem);
}
/* Banded sections: slate-water tint in the light, dark water in the dark,
   with a faint contour/waterline chart texture */
section.banded{
  position:relative;
  isolation:isolate;
}
section.banded::before{
  content:"";
  position:absolute;
  top:0;bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:100vw;
  background-color:var(--band);
  background-image:var(--contour-img);
  background-size:360px 120px;
  background-repeat:repeat;
  z-index:-1;
}

/* Scene bands: a painting laid under the section, held back by a scrim of
   the theme's own ground colour so the art reads as weather, not wallpaper,
   and text keeps its contrast. The art is set per section with --art. */
.sceneband{
  position:relative;
  isolation:isolate;
}
.sceneband::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:linear-gradient(var(--scrim-top), var(--scrim-mid) 45%, var(--scrim-bottom)), var(--art);
  background-size:cover, cover;
  background-position:center, center;
}
.sceneband.bleed::before{
  left:50%;
  right:auto;
  width:100vw;
  transform:translateX(-50%);
}

/* Shelf groups (books page): a sceneband wrapping a group head and its entries */
.shelf-group{
  padding-top:clamp(2rem, 5vh, 3.5rem);
  padding-bottom:clamp(2.5rem, 6vh, 4rem);
}
.shelf-group .group-head{margin-top:0;}
.shelf-group .book-entry:last-child{border-bottom:0;}
.section-head{
  border-top:1px solid var(--rule);
  padding-top:1.1rem;
  display:grid;
  grid-template-columns:7fr 5fr;
  gap:clamp(2.5rem, 6vw, 5rem);
  align-items:start;
}
.section-head h2{
  font-size:clamp(2rem, 4.2vw, 3.25rem);
  font-weight:400;
  line-height:1.05;
  letter-spacing:-0.01em;
  margin-top:1.2rem;
}
.section-head h2 em{font-style:italic;}
.section-intro{
  font-size:1.125rem;
  line-height:1.65;
  max-width:36em;
}
.section-intro p + p{margin-top:1.1rem;}

/* Two-column prose */
.split-grid{
  display:grid;
  grid-template-columns:7fr 5fr;
  gap:clamp(2.5rem, 6vw, 5rem);
  margin-top:clamp(2.5rem, 6vh, 4rem);
  align-items:start;
}
.prose{max-width:38em;}
.prose p{font-size:1.125rem;line-height:1.7;}
.prose p + p{margin-top:1.3rem;}
.prose h3{
  font-size:1.45rem;
  font-weight:400;
  line-height:1.2;
  margin-top:2.4rem;
  margin-bottom:0.9rem;
}
.prose h3:first-child{margin-top:0;}
.prose ul{
  list-style:none;
  margin-top:1rem;
  border-top:1px solid var(--hairline);
}
.prose ul li{
  padding:0.7rem 0;
  border-bottom:1px solid var(--hairline);
  font-size:1.0625rem;
  line-height:1.55;
}
.prose ul li strong{font-weight:600;}

/* Record list (definition rows, like the hero index) */
.record-list{border-top:1px solid var(--rule);}
.record-list .row{
  display:grid;
  grid-template-columns:11rem 1fr;
  gap:1.25rem;
  padding:0.95rem 0;
  border-bottom:1px solid var(--hairline);
  align-items:baseline;
}
.record-list dt{
  font-family:var(--mono);
  font-size:0.75rem;
  letter-spacing:0.13em;
  text-transform:uppercase;
  color:var(--ink-secondary);
  line-height:1.5;
}
.record-list dd{font-size:1.0625rem;line-height:1.55;}

/* Pull quote */
blockquote.pull{
  border-top:1px solid var(--hairline);
  padding-top:1.6rem;
}
blockquote.pull p{
  font-size:clamp(1.6rem, 3vw, 2.3rem);
  font-style:italic;
  font-weight:400;
  line-height:1.25;
}
blockquote.pull footer{margin-top:1.2rem;}

/* ---------- Ways in ---------- */
.ways{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2.5rem clamp(2.5rem, 6vw, 5rem);
  margin-top:clamp(2.5rem, 6vh, 4rem);
}
.way{
  border-top:1px solid var(--hairline);
  padding-top:1.1rem;
}
.way h3{
  font-size:1.5rem;
  font-weight:400;
  line-height:1.15;
  margin-top:0.7rem;
  margin-bottom:0.6rem;
}
.way h3 em{font-style:italic;}
.way p{font-size:1.02rem;line-height:1.6;max-width:32em;}
.way p + p{margin-top:0.9rem;}

/* ---------- Shelf head (index) ---------- */
.shelf-head{
  margin-top:clamp(3.5rem, 8vh, 6rem);
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1.5rem;
  flex-wrap:wrap;
}
.shelf-head h3{
  font-size:clamp(1.5rem, 3vw, 2rem);
  font-weight:400;
  line-height:1.15;
}
.shelf-head h3 em{font-style:italic;}
.shelf-head + .book-list{margin-top:1.5rem;}

/* ---------- The shelves (index category panels) ---------- */
.shelves{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2.5rem clamp(2.5rem, 6vw, 5rem);
  margin-top:clamp(2.5rem, 6vh, 4rem);
}
.shelf-panel{
  border:1px solid var(--hairline);
  padding:clamp(1.8rem, 4vw, 2.8rem);
  overflow:clip;
}
.shelf-panel h3{
  font-size:clamp(1.6rem, 3vw, 2.1rem);
  font-weight:400;
  line-height:1.12;
  margin-top:0.8rem;
  margin-bottom:0.7rem;
}
.shelf-panel h3 em{font-style:italic;}
.shelf-panel p{font-size:1.05rem;line-height:1.65;max-width:32em;}
.shelf-panel p + p{margin-top:1rem;}

/* ---------- Group heads (books page) ---------- */
.group-head{
  border-top:1px solid var(--rule);
  padding-top:1.1rem;
  margin-top:clamp(3.5rem, 8vh, 6rem);
}
.group-head h2{
  font-size:clamp(1.9rem, 3.8vw, 2.9rem);
  font-weight:400;
  line-height:1.05;
  letter-spacing:-0.01em;
  margin-top:1rem;
}
.group-head h2 em{font-style:italic;}
.group-note{
  margin-top:1rem;
  font-size:1.125rem;
  line-height:1.65;
  max-width:38em;
}
.group-head + .book-entry{border-top:1px solid var(--hairline);}

/* ---------- Books index (home) ---------- */
.book-list{
  list-style:none;
  margin-top:clamp(2.5rem, 6vh, 4rem);
  border-top:1px solid var(--hairline);
}
.book-list li{border-bottom:1px solid var(--hairline);}
.book-list a{
  display:grid;
  grid-template-columns:4.5rem 1fr 2rem;
  gap:1.25rem;
  align-items:baseline;
  padding:1.35rem 0.5rem;
  text-decoration:none;
  transition:background-color 250ms var(--ease);
}
.book-list a:hover{background:var(--hover);}
.book-list.has-covers a{
  grid-template-columns:4.5rem 3.4rem 1fr 2rem;
  align-items:center;
}
.book-list .num{
  font-family:var(--mono);
  font-size:0.8125rem;
  letter-spacing:0.1em;
  color:var(--ink-secondary);
}
.book-list .cov{
  width:100%;
  height:auto;
  display:block;
  border:1px solid var(--img-border-soft);
}
.book-list .title{
  font-size:clamp(1.45rem, 2.6vw, 2rem);
  font-weight:400;
  line-height:1.15;
}
.book-list .arr{
  font-family:var(--mono);
  font-size:1.05rem;
  color:var(--ink-secondary);
  text-align:right;
  transition:color 250ms var(--ease), transform 250ms var(--ease);
}
.book-list a:hover .arr{color:var(--accent);transform:translateX(4px);}
:root[data-theme="dark"] .book-list a:hover .arr{color:var(--brass);}
.books-foot{
  margin-top:2.2rem;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1.5rem;
  flex-wrap:wrap;
}
.books-foot .note{
  font-size:1rem;
  font-style:italic;
  color:var(--ink-secondary);
  max-width:30em;
}

/* ---------- Book entries (books page) ---------- */
.book-entry{
  display:grid;
  grid-template-columns:5fr 7fr;
  gap:clamp(2rem, 5vw, 4rem);
  padding:clamp(2.5rem, 6vh, 4rem) 0;
  border-bottom:1px solid var(--hairline);
  align-items:start;
}
.book-entry:first-of-type{border-top:1px solid var(--hairline);}
.book-entry .cover img{
  width:100%;
  max-width:340px;
  height:auto;
  display:block;
  border:1px solid var(--img-border);
}
.book-entry h3{
  font-size:clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight:400;
  line-height:1.08;
  margin-top:1rem;
}
.book-entry h3 em{font-style:italic;}
.book-entry .blurb{
  margin-top:1.2rem;
  font-size:1.125rem;
  line-height:1.65;
  max-width:34em;
}
.book-entry .actions{margin-top:1.8rem;}

/* ---------- Cadets panel ---------- */
.young-panel{
  background:var(--panel);
  border:1px solid var(--hairline);
  padding:clamp(2rem, 5vw, 3.5rem);
  display:grid;
  grid-template-columns:7fr 5fr;
  gap:clamp(2rem, 5vw, 4rem);
  align-items:start;
}
.young-panel h2{
  font-size:clamp(2rem, 4.2vw, 3.25rem);
  font-weight:400;
  line-height:1.05;
  margin-top:1.2rem;
}
.young-panel h2 em{font-style:italic;}
.young-copy{max-width:36em;font-size:1.125rem;line-height:1.65;}
.young-copy p + p{margin-top:1.1rem;}
.young-copy .text-link{display:inline-block;margin-top:1.6rem;}
.young-cov{
  width:148px;
  height:auto;
  display:block;
  border:1px solid var(--img-border);
  margin-bottom:1.1rem;
}

/* ---------- Primer / signup ---------- */
.primer-grid{
  display:grid;
  grid-template-columns:7fr 5fr;
  gap:clamp(2.5rem, 6vw, 5rem);
  margin-top:clamp(2.5rem, 6vh, 4rem);
  align-items:start;
}
.primer-copy{max-width:36em;font-size:1.125rem;line-height:1.65;}
.primer-copy p + p{margin-top:1.1rem;}
.primer-copy .gets{
  list-style:none;
  margin-top:1.4rem;
  border-top:1px solid var(--hairline);
}
.primer-copy .gets li{
  padding:0.8rem 0;
  border-bottom:1px solid var(--hairline);
  font-size:1.0625rem;
  display:grid;
  grid-template-columns:2rem 1fr;
  gap:0.75rem;
  align-items:baseline;
}
.primer-copy .gets .no{
  font-family:var(--mono);
  font-size:0.75rem;
  letter-spacing:0.1em;
  color:var(--ink-secondary);
}
form.signup{
  border-top:1px solid var(--rule);
  padding-top:1.6rem;
}
.field{margin-bottom:1.5rem;}
.field label{
  display:block;
  font-family:var(--mono);
  font-size:0.75rem;
  letter-spacing:0.13em;
  text-transform:uppercase;
  margin-bottom:0.55rem;
}
.field label .opt{
  color:var(--ink-secondary);
  letter-spacing:0.08em;
}
.field input{
  width:100%;
  font-family:var(--serif);
  font-size:1.0625rem;
  color:var(--ink);
  background:var(--field-bg);
  border:1px solid var(--input-border);
  border-radius:0;
  padding:0.85rem 1rem;
  min-height:3rem;
}
.field input::placeholder{color:var(--ink-secondary);opacity:1;}
form.signup .btn{width:100%;text-align:center;}
.form-note{
  margin-top:1.1rem;
  font-size:0.9375rem;
  font-style:italic;
  color:var(--ink-secondary);
  line-height:1.55;
}
.form-status{
  margin-top:1.1rem;
  font-size:1rem;
  line-height:1.55;
  border-top:1px solid var(--hairline);
  padding-top:1rem;
}
.form-status[hidden]{display:none;}

/* ---------- Footer ---------- */
footer.site{
  border-top:1px solid var(--rule);
  margin-top:clamp(2rem, 6vh, 4rem);
}
.footer-grid{
  display:grid;
  grid-template-columns:7fr 5fr;
  gap:clamp(2rem, 5vw, 4rem);
  padding-top:2.4rem;
  padding-bottom:2.4rem;
  align-items:start;
}
.footer-about{max-width:36em;font-size:1.0625rem;line-height:1.65;}
.footer-about .label{display:block;margin-bottom:0.9rem;}
.footer-links{list-style:none;}
.footer-links li{padding:0.45rem 0;}
.colophon{
  border-top:1px solid var(--hairline);
  padding-top:1.1rem;
  padding-bottom:1.6rem;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.harbour-time time{
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}

/* ---------- Motion ---------- */
.js .reveal{
  opacity:0;
  transform:translateY(10px);
  transition:opacity 500ms var(--ease), transform 500ms var(--ease);
}
.js .reveal.in{opacity:1;transform:none;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    transition:none !important;
    animation:none !important;
  }
  .js .reveal{opacity:1;transform:none;}
}

/* ---------- Small screens ---------- */
@media (max-width: 760px){
  .hero-grid,
  .section-head,
  .split-grid,
  .young-panel,
  .primer-grid,
  .footer-grid,
  .book-entry,
  .ways,
  .shelves{grid-template-columns:1fr;}
  .hero{min-height:0;padding-top:3.5rem;}
  :root:not([data-theme="dark"]) .hero{
    background-image:
      linear-gradient(180deg, rgba(245,241,234,0.95) 0%, rgba(245,241,234,0.84) 60%, rgba(245,241,234,0.6) 100%),
      url("img/hero-panorama.webp");
  }
  :root[data-theme="dark"] .hero{
    background-image:
      linear-gradient(180deg, rgba(6,11,19,0.92) 0%, rgba(6,11,19,0.8) 60%, rgba(6,11,19,0.62) 100%),
      url("img/hero-panorama.webp");
  }
  .hero-index{margin-top:0.5rem;}
  .doors{flex-direction:column;align-items:stretch;gap:1.4rem;}
  .doors .btn{text-align:center;}
  .doors .text-link{align-self:flex-start;}
  .book-list a{grid-template-columns:3rem 1fr 1.5rem;padding:1.15rem 0.25rem;}
  .book-list.has-covers a{grid-template-columns:3rem 2.6rem 1fr 1.5rem;}
  .record-list .row{grid-template-columns:1fr;gap:0.25rem;}
  .hero-index .row{grid-template-columns:7rem 1fr;}
  .book-entry .cover img{max-width:240px;}
  nav.site-nav ul{gap:1.25rem;}
  .mast-tools{gap:1.25rem;}
}

/* Record strips span a book entry like a catalogue footer line */
.book-entry .record-strip{grid-column:1 / -1;}