/* ==========================================================================
   Garet P. - shared stylesheet

   A warm, matte paper theme: flat cream panels on a parchment ground,
   solid hairline outlines, small radii. No blur, no translucency, no
   shadows, no texture. Surfaces and controls are flat colour; only the page
   ground carries one soft wash of light. Colours, type and spacing are the
   custom properties below; everything else refers to them.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Surfaces: three warm steps, darkest at the back */
  --ground:   #E5DCC7;   /* page behind the panels: the middle of the wash below */
  --chrome:   #EEE6D2;   /* sidebar, bars, header strips, buttons at rest */
  --chrome-2: #E5DCC5;   /* hover */
  --chrome-3: #D9CFB6;   /* pressed */
  --view:     #F6EFDC;   /* panels: the cream */
  --field:    #FCF8EA;   /* inputs */

  /* The ground is one soft wash of light: lit at the top left, a touch deeper at the far corner.
     It is only a background, never behind small text. For a perfectly flat page set --wash: var(--ground); */
  --ground-lit:  #EBE3CD;
  --ground-deep: #DAD3C0;
  --wash: linear-gradient(155deg, var(--ground-lit) 0%, var(--ground) 50%, var(--ground-deep) 100%);

  /* Ink: brown-black rather than blue-grey */
  --ink:   #2A2018;
  --ink-2: #52463A;
  --ink-3: #64584A;

  /* Outlines */
  --edge:       #857660;   /* controls (3:1 or better) */
  --edge-panel: #CBBE9F;   /* panel frames and bars */
  --edge-soft:  #E0D5BB;   /* dividers inside panels */

  /* Accent: one deep ink blue, three steps */
  --accent:    #233F66;
  --accent-2:  #1B3253;
  --accent-3:  #14263F;
  --on-accent: #FBF6E8;

  /* Status */
  --ok:     #2F6B3F;
  --warn:   #8A5200;
  --danger: #A8281E;

  /* Type: a book serif for headings and reading, a quiet sans for small interface text */
  --font-serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-sans:  "Source Sans 3", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --radius: 3px;          /* buttons, fields, list rows */
  --radius-panel: 4px;    /* panels */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --sidebar-w: 16rem;

  /* Spacing scale: tight groups use the low steps, section breaks the high ones */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
  background: var(--ground);
  accent-color: var(--accent);
  caret-color: var(--accent);
  scrollbar-color: var(--edge) var(--chrome);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

h1, h2, h3 { font-weight: 600; line-height: 1.2; text-wrap: balance; }
h1 {
  font-size: clamp(2.125rem, 1.6rem + 1.8vw, 2.875rem);
  line-height: 1.12;
  letter-spacing: -0.012em;
}
h2 { font-size: 1.5rem; }
h3 { font-size: 1.1875rem; line-height: 1.3; }

p, dd, li { text-wrap: pretty; }

a {
  color: var(--accent);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 0.12s var(--ease-out);
}
a:hover { color: var(--accent-2); text-decoration-thickness: 2px; }

::selection { background: var(--accent); color: var(--on-accent); }

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

img { display: block; max-width: 100%; }

/* Class rules that set display would otherwise override the hidden attribute */
[hidden] { display: none !important; }

.skip {
  position: absolute;
  left: var(--s-2);
  top: -4rem;
  z-index: 2000;
  padding: var(--s-2) var(--s-4);
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  text-decoration: none;
}
.skip:hover { color: var(--on-accent); }
.skip:focus { top: var(--s-2); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Icons: outline by default, .icon-fill for the brand marks */
.icon {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-fill { fill: currentColor; stroke: none; }

/* --------------------------------------------------------------------------
   Controls
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 2.5rem;
  padding: 0.4375rem var(--s-4);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--chrome);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s var(--ease-out), border-color 0.12s var(--ease-out), color 0.12s var(--ease-out);
}
.btn:hover { background: var(--chrome-2); color: var(--ink); }
.btn:active { background: var(--chrome-3); }
.btn--block { display: flex; width: 100%; }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent-2);
  color: var(--on-accent);
}
.btn--primary:hover { background: var(--accent-2); border-color: var(--accent-3); color: var(--on-accent); }
.btn--primary:active { background: var(--accent-3); }

.field { display: grid; gap: 0.375rem; }
.field label { font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 600; }

.input, .select, .textarea {
  width: 100%;
  min-height: 2.5rem;
  padding: 0.4375rem var(--s-3);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
}
.textarea { min-height: 9rem; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-2); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  border-color: var(--accent);
  outline-offset: 0;
}
[aria-invalid="true"] { border-color: var(--danger); }

.field-error { color: var(--danger); font-family: var(--font-sans); font-size: 0.9375rem; }
.field-hint { color: var(--ink-2); font-family: var(--font-sans); font-size: 0.875rem; }

/* --------------------------------------------------------------------------
   Status, chips, dividers
   -------------------------------------------------------------------------- */

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.3;
}
.dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--ok);
}
.dot--warn { background: var(--warn); }

/* Tags read as a line of text set off with commas, not as boxes. The comma trails each item, so a wrapped line never starts with one. */
.chips { display: flex; flex-wrap: wrap; }
.chip { margin-right: 0.3em; color: var(--ink-2); font-size: 1rem; line-height: 1.6; }
.chip:not(:last-child)::after { content: ","; content: "," / ""; }

/* --------------------------------------------------------------------------
   Panels
   -------------------------------------------------------------------------- */

.panel {
  padding: var(--s-5);
  border: 1px solid var(--edge-panel);
  border-radius: var(--radius-panel);
  background: var(--view);
}
.panel > h2 { margin-bottom: var(--s-4); }
.panel > h2 + .lede { margin-top: calc(var(--s-1) * -1); }

.prose > * + * { margin-top: var(--s-3); }
.prose p { max-width: 68ch; color: var(--ink-2); }
.prose p.strong-first { color: var(--ink); }

.more-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-4);
  font-weight: 500;
}
.more-link .icon { width: 1rem; height: 1rem; }

/* --------------------------------------------------------------------------
   Shell: sidebar + main column
   -------------------------------------------------------------------------- */

.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: var(--s-6) var(--s-4) var(--s-4);
  overflow-y: auto;
  background: var(--chrome);
  border-right: 1px solid var(--edge-panel);
}

.profile { padding: 0 var(--s-2); margin-bottom: var(--s-5); }
.profile-name { font-size: 1.3125rem; font-weight: 600; line-height: 1.25; }
.profile-role { color: var(--ink-2); font-family: var(--font-sans); font-size: 0.9375rem; line-height: 1.4; }

.avatar {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: var(--s-3);
  overflow: hidden;
  border: 1px solid var(--edge);
  border-radius: 50%;
  background: var(--chrome-3);
  color: var(--ink-2);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
}
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { width: 2.5rem; height: 2.5rem; margin: 0; font-size: 1.0625rem; }

.nav ul { display: grid; gap: 2px; }
.nav a {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.5625rem var(--s-3);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color 0.12s var(--ease-out), color 0.12s var(--ease-out);
}
.nav a:hover { background: var(--chrome-2); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--accent); color: var(--on-accent); }
.nav a[aria-current="page"]:hover { background: var(--accent-2); }
.nav-sep { height: 1px; margin: var(--s-2) var(--s-2); background: var(--edge-panel); }

.sidebar-foot { display: grid; gap: var(--s-3); margin-top: auto; padding-top: var(--s-5); }

.socials { display: flex; gap: var(--s-1); }
.socials a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius);
  color: var(--ink-2);
  transition: background-color 0.12s var(--ease-out), color 0.12s var(--ease-out);
}
.socials a:hover { background: var(--chrome-2); color: var(--accent); }
.socials .icon { width: 1.25rem; height: 1.25rem; }

.main { display: flex; flex-direction: column; min-height: 100vh; }
.wrap { width: 100%; max-width: calc(64rem + 2 * var(--s-6)); margin-inline: auto; padding-inline: var(--s-6); }

.topbar, .scrim { display: none; }

/* Page header strip: the title sits on a flat chrome strip above the ground */
.page-band {
  background: var(--chrome);
  border-bottom: 1px solid var(--edge-panel);
  padding-block: var(--s-7) var(--s-6);
}
.band-grid { display: grid; gap: var(--s-3) var(--s-6); align-items: baseline; }
.band-text > * + * { margin-top: var(--s-3); }
.lead { max-width: 60ch; color: var(--ink-2); font-size: 1.25rem; line-height: 1.55; }
/* The ground: parchment with a soft wash of light (see --wash). No image, no texture. */
.page-body, .hub-main {
  background-image: var(--wash);
}
.page-body { flex: 1; padding-block: var(--s-6) var(--s-8); }

/* --------------------------------------------------------------------------
   Grids
   -------------------------------------------------------------------------- */

.grid { display: grid; gap: var(--s-5); align-items: start; }
.stack-5 > * + * { margin-top: var(--s-5); }

/* --------------------------------------------------------------------------
   Portfolio overview
   -------------------------------------------------------------------------- */

.glance dl > div + div { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--edge-soft); }
.glance dt { color: var(--ink-2); font-family: var(--font-sans); font-size: 0.875rem; line-height: 1.4; }
.glance dd { font-weight: 500; }

.featured { display: grid; gap: var(--s-5); }
.featured article + article { padding-top: var(--s-5); border-top: 1px solid var(--edge-soft); }
.featured h3 { font-size: 1.25rem; }
.featured .project-meta { margin-top: var(--s-1); }
.featured p.summary { margin-top: var(--s-3); color: var(--ink-2); max-width: 60ch; }

/* --------------------------------------------------------------------------
   Projects
   -------------------------------------------------------------------------- */

/* The filter reads as a row of text tabs over a hairline, not as a bar of buttons */
.filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s-5);
  margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--edge-panel);
}
.filter button {
  min-height: 2.5rem;
  margin-bottom: -1px;
  padding: 0.375rem 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  transition: color 0.12s var(--ease-out), border-color 0.12s var(--ease-out);
}
.filter button:hover { color: var(--ink); border-bottom-color: var(--edge); }
.filter button[aria-pressed="true"] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

.project { scroll-margin-top: var(--s-5); }
.project > * + * { margin-top: var(--s-3); }
.project-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-1) var(--s-4);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.4;
}
.project > .project-meta { margin-top: var(--s-1); }
.project p, .project li { color: var(--ink-2); }
.project p:not(.project-meta), .project li { max-width: 68ch; }
.project > .chips { margin-top: var(--s-4); }

.project-cols { display: grid; gap: var(--s-4) var(--s-6); }
.project-cols h3 { margin-bottom: var(--s-2); }
.project-cols p + p { margin-top: var(--s-3); }
.bullets { display: grid; gap: var(--s-2); padding-left: 1.125rem; list-style: disc; }
.bullets li::marker { color: var(--ink-3); }

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */

.grid-about { display: grid; }
.certs li { display: grid; gap: 0.125rem; }
.certs li + li { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--edge-soft); }
.certs h3 { font-size: 1.0625rem; }
.certs p { color: var(--ink-2); font-family: var(--font-sans); font-size: 0.9375rem; }

.timeline { position: relative; display: grid; gap: var(--s-5); }
.timeline li { display: grid; gap: var(--s-1) var(--s-5); }
.timeline h3 { margin-bottom: var(--s-1); }
.timeline .when { color: var(--ink-2); font-family: var(--font-sans); font-size: 0.875rem; font-variant-numeric: tabular-nums; line-height: 1.6; }
.timeline p { max-width: 68ch; color: var(--ink-2); }

/* --------------------------------------------------------------------------
   Contact and support
   -------------------------------------------------------------------------- */

.form { display: grid; gap: var(--s-4); }
.form-actions { display: grid; gap: var(--s-2); justify-items: start; margin-top: var(--s-1); }

.rows { display: grid; }
.rows > li + li { border-top: 1px solid var(--edge-soft); }
.row-link {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  align-items: center;
  gap: 0 var(--s-3);
  padding: var(--s-3) var(--s-2);
  margin-inline: calc(var(--s-2) * -1);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  transition: background-color 0.12s var(--ease-out);
}
.row-link:hover { background: var(--chrome); color: var(--ink); }
.row-link .icon { color: var(--accent); grid-row: 1 / span 2; }
.row-label { font-weight: 600; line-height: 1.4; }
.row-value { color: var(--ink-2); font-family: var(--font-sans); font-size: 0.9375rem; line-height: 1.4; overflow-wrap: anywhere; }

.panel-note { margin-top: var(--s-3); color: var(--ink-2); max-width: 60ch; }

.subhead { margin-top: var(--s-6); font-size: 1.25rem; }
.panel-lede { max-width: 60ch; margin-bottom: var(--s-3); color: var(--ink-2); }
.toward { margin: var(--s-3) 0 var(--s-5); }
.toward > div + div { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--edge-soft); }
.toward dt { font-weight: 600; }
.toward dd { margin-top: 0.125rem; color: var(--ink-2); max-width: 60ch; }

.support-cta { display: grid; gap: var(--s-2); justify-items: start; }

.faq > * + * { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--edge-soft); }
.faq h3 { margin-bottom: var(--s-1); }
.faq p { color: var(--ink-2); max-width: 60ch; }

/* --------------------------------------------------------------------------
   Start page
   -------------------------------------------------------------------------- */

.hub { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; }

.hub-head { background: var(--chrome); border-bottom: 1px solid var(--edge-panel); }
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-6);
  border-bottom: 1px solid var(--edge-panel);
}
.identity { display: flex; align-items: center; gap: var(--s-3); }
.identity-name { font-size: 1.125rem; font-weight: 600; line-height: 1.25; }
.identity-role { color: var(--ink-2); font-family: var(--font-sans); font-size: 0.875rem; line-height: 1.3; }
.hub-hero { padding-block: var(--s-8) var(--s-7); }

.statusbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-3) var(--s-6);
  background: var(--chrome);
  border-top: 1px solid var(--edge-panel);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: 0.875rem;
}

.hub-main { display: grid; align-content: center; padding-block: var(--s-6); }

.dest {
  overflow: hidden;
  border: 1px solid var(--edge-panel);
  border-radius: var(--radius-panel);
  background: var(--view);
}
.dest li + li { border-top: 1px solid var(--edge-soft); }
.dest a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-1) var(--s-4);
  padding: var(--s-4) var(--s-5);
  color: var(--ink);
  text-decoration: none;
  transition: background-color 0.12s var(--ease-out);
}
.dest a:hover { background: var(--chrome); color: var(--ink); }
.dest a:focus-visible { outline-offset: -3px; }
.dest-title { font-size: 1.3125rem; font-weight: 600; line-height: 1.25; }
.dest-desc { grid-column: 1; color: var(--ink-2); font-size: 1rem; line-height: 1.5; }
.dest .dest-cta { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: var(--s-2); color: var(--accent); font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 500; }
.dest-cta-label { display: none; }
.dest a:hover .dest-cta { color: var(--accent-2); }

/* Greeting shown once per session; skipped for reduced motion (see site.js) */
.splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  place-items: center;
  background: var(--chrome);
}
html.splash-on .splash { display: grid; animation: splash-failsafe 0s 4s forwards; }
html.splash-on:not(.splash-done) .hub { visibility: hidden; animation: hub-failsafe 0s 4s forwards; }
.splash-word {
  font-size: clamp(2.25rem, 1.5rem + 3.4vw, 3.5rem);
  font-weight: 500;
  line-height: 1.2;
}
.splash.is-leaving { opacity: 0; transition: opacity 0.22s var(--ease-out); }
/* If the script never runs, the greeting and the hidden page both give way after four seconds */
@keyframes splash-failsafe { to { visibility: hidden; opacity: 0; } }
@keyframes hub-failsafe { to { visibility: visible; } }

/* --------------------------------------------------------------------------
   Wider screens: two-column layouts
   -------------------------------------------------------------------------- */

@media (min-width: 64rem) {
  .band-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .grid-about { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .span-2 { grid-column: 1 / -1; }
  .featured { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
  .featured article + article { padding-top: 0; border-top: 0; padding-left: var(--s-6); border-left: 1px solid var(--edge-soft); }
  .project-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .timeline li { grid-template-columns: 7.5rem minmax(0, 1fr); }
  .timeline .when { text-align: right; padding-top: 0.0625rem; }
  .timeline::before {
    content: "";
    position: absolute;
    top: 0.375rem;
    bottom: 0.375rem;
    left: calc(7.5rem + var(--s-5) / 2);
    width: 1px;
    background: var(--edge-panel);
  }
}

@media (min-width: 48rem) {
  .dest a { grid-template-columns: 14rem minmax(0, 1fr) auto; gap: var(--s-4) var(--s-5); }
  .dest-desc { grid-column: 2; }
  .dest .dest-cta { grid-column: 3; grid-row: 1; }
  .dest-cta-label { display: inline; }
}

/* --------------------------------------------------------------------------
   Narrow screens: top bar plus sliding menu
   -------------------------------------------------------------------------- */

@media (max-width: 56rem) {
  .shell { display: block; }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 3.5rem;
    padding: 0 var(--s-2) 0 var(--s-4);
    background: var(--chrome);
    border-bottom: 1px solid var(--edge-panel);
  }
  .topbar-name { font-size: 1.1875rem; font-weight: 600; }
  .menu-button {
    display: none;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
  }
  .menu-button:hover { background: var(--chrome-2); }
  .menu-button .icon { width: 1.5rem; height: 1.5rem; }
  .menu-button .icon-close { display: none; }
  .menu-button[aria-expanded="true"] .icon-menu { display: none; }
  .menu-button[aria-expanded="true"] .icon-close { display: block; }

  /* Without scripting the sidebar simply sits above the page */
  .sidebar { position: static; height: auto; overflow: visible; border-right: 0; border-bottom: 1px solid var(--edge-panel); }

  .js .menu-button { display: grid; }
  .js .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    width: min(20rem, 86vw);
    height: auto;
    overflow-y: auto;
    border-right: 1px solid var(--edge-panel);
    border-bottom: 0;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.22s var(--ease-out), visibility 0s linear 0.22s;
  }
  .js .sidebar[data-open] { transform: none; visibility: visible; transition-delay: 0s; }
  .js .scrim {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: block;
    background: rgb(42 32 24 / 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s var(--ease-out), visibility 0s linear 0.22s;
  }
  .js .scrim[data-open] { opacity: 1; visibility: visible; transition-delay: 0s; }
  html.drawer-open { overflow: hidden; }

  .wrap { padding-inline: var(--s-4); }
  .page-band { padding-block: var(--s-5); }
  .page-body { padding-block: var(--s-5) var(--s-7); }
  .panel { padding: var(--s-4) var(--s-4) var(--s-5); }
  .grid { gap: var(--s-4); }

  .bar, .statusbar { padding-inline: var(--s-4); }
  .hub-hero { padding-block: var(--s-6) var(--s-5); }
  .hub-main { padding-block: var(--s-5); }
  .dest a { padding: var(--s-4); }
}

@media (max-width: 30rem) {
  .btn--stretch-sm { display: flex; width: 100%; }
}

/* --------------------------------------------------------------------------
   Coat of arms
   One very small, one-colour print of the arms (assets/arms.png) in the bottom
   right-hand corner, where it is only found by reaching the end of the page: at the
   right-hand end of the footer bar on the start page, and in the margin below the
   last panel on every other page. It is decoration only, never sits behind text, and
   is the only image the theme uses. --arms-opacity is its strength (0 hides it, 1 is
   the full bronze) and --arms-size its width. To remove the arms, delete this whole
   section.
   -------------------------------------------------------------------------- */

:root {
  --arms-opacity: 0.5;
  --arms-size: 1.75rem;
}

/* Start page: the last thing in the footer bar, at its right-hand end. The negative margins let
   it stand a little taller than the text line without making the bar any taller. */
.statusbar .status { margin-left: auto; }
.statusbar .status::after {
  content: "";
  flex: none;
  width: var(--arms-size);
  aspect-ratio: 130 / 136;
  margin: -0.4rem 0 -0.4rem var(--s-2);
  background-image: url("arms.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  opacity: var(--arms-opacity);
}

/* Every other page: in the margin under the last panel, in line with the panels' right-hand edge.
   On a short page the margin is at the bottom of the window. */
.page-body { position: relative; }
.page-body::after {
  content: "";
  position: absolute;
  right: max(var(--s-6), calc((100% - 64rem) / 2));
  bottom: 1.25rem;
  width: var(--arms-size);
  aspect-ratio: 130 / 136;
  background-image: url("arms.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  opacity: var(--arms-opacity);
  pointer-events: none;
}
@media (max-width: 56rem) {
  :root { --arms-size: 1.5rem; }
  .page-body::after { right: var(--s-4); bottom: var(--s-2); }
}

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}