/* ==========================================================================
   RITUAL FOR THE PEOPLE — shared stylesheet
   Every page links to this one file. Change the look here and it changes
   everywhere. Sections below are labelled in plain English.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. COLOURS
   Two sets: one for readers whose device is in Light mode, one for Dark.
   The palette is drawn from the night-sky photograph — slate blue, deep
   violet-grey, and the warm pale light at the horizon.
   -------------------------------------------------------------------------- */

:root {
  /* Light mode (the default) */
  --page:        #e9ebe7;   /* page background — pale lichen, not white */
  --page-deep:   #dfe2dd;   /* slightly darker band, used behind images */
  --ink:         #23262f;   /* body text */
  --ink-soft:    #565b67;   /* quieter text: subtitles, captions, footnotes */
  --ink-faint:   #7d828d;   /* faintest text: inactive nav links */
  --rule:        #c6cac3;   /* hairlines and dividers */
  --accent:      #414d6d;   /* links — the blue-violet of the night sky */
  --accent-deep: #232c44;   /* links on hover */
  --accent-half: rgba(65, 77, 109, 0.25);   /* the link colour at quarter strength: every button on hover */
  --glow:        transparent; /* soft light behind the page; dark mode only */
  --panel:       rgba(233, 235, 231, 0.45);   /* the side menu: page colour, see-through */

  /* How much of the page colour is laid OVER the Jupiter photograph.
     This is the one number to change if the background is too strong or
     too faint. 1 hides the photo completely; 0.80 lets a lot through. */
  --veil:        rgba(233, 235, 231, 0.84);

  /* The background photograph. Pages can override this — see section 2a. */
  --backdrop:    url("images/jupiter.jpg");
}

@media (prefers-color-scheme: dark) {
  :root {
    --page:        #1a1e28;
    --page-deep:   #14171f;
    --ink:         #d8d5ce;   /* warm pale, like moonlight */
    --ink-soft:    #a09e9c;
    --ink-faint:   #74767f;
    --rule:        #333846;
    --accent:      #a9b4d4;
    --accent-deep: #cbd2e6;
    --accent-half: rgba(169, 180, 212, 0.25);
    --glow:        rgba(99, 112, 150, 0.16);
    --veil:        rgba(20, 23, 31, 0.88);
    --panel:       rgba(26, 30, 40, 0.45);   /* heavier here: the photo is bright, the text is pale */
  }
}


/* --------------------------------------------------------------------------
   2. PAGE FOUNDATION
   Typeface, base size, and the rule that stops sideways scrolling.
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  background-color: var(--page);
  /* A single very soft pool of light near the top. Invisible in light mode. */
  background-image: radial-gradient(120% 60% at 50% 0%, var(--glow) 0%, transparent 70%);
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 19px;          /* body size on phones */
  font-weight: 400;
  line-height: 1.65;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 40em) {
  body { font-size: 20px; }
}

/* THE BACKGROUND PHOTOGRAPH — images/jupiter.jpg
   It is fixed to the window, so the text scrolls over a still image rather
   than dragging it along. A wash of the page colour (--veil, set in section 1)
   is laid over the top so words stay readable on it.
   To swap the picture, change the file name below. To make it stronger or
   fainter, change --veil up in section 1. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--veil), var(--veil)),
    var(--backdrop);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

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


/* --------------------------------------------------------------------------
   2a. A DIFFERENT BACKGROUND ON ONE PAGE
   Most pages use the Jupiter photograph set in section 1. A page can use a
   different one by carrying a class on its <body> tag and naming the file
   here. The veil is set separately because a busier or brighter picture
   needs more of it to keep the words readable.
   -------------------------------------------------------------------------- */

/* To give a page its own picture, put a class on that page's <body> tag,
   e.g. <body class="page-sacred">, and add a matching rule here:

       .page-sacred {
         --backdrop: url("images/your-picture.jpeg");
         --veil: rgba(233, 235, 231, 0.90);
       }
*/

/* THE LANDING PAGE — the figures standing on the beach under the stars.
   File: images/background1.jpg. Used on index.html only. */
.page-home {
  --backdrop: url("images/background1.jpg");
  --veil: rgba(233, 235, 231, 0.70);   /* less faded than the other pages */
}

@media (prefers-color-scheme: dark) {
  .page-home {
    --veil: rgba(20, 23, 31, 0.78);
  }
}

/* On the landing page the wash over the picture is heavier towards the
   bottom of the screen, where the row of figures stands, so they show
   only faintly behind the words. To change how much the bottom fades,
   change --veil-bottom. */
.page-home {
  --veil-bottom: rgba(233, 235, 231, 0.84);
}

@media (prefers-color-scheme: dark) {
  .page-home {
    --veil-bottom: rgba(20, 23, 31, 0.87);
  }
}

.page-home::before {
  background-image:
    linear-gradient(to bottom, var(--veil) 0%, var(--veil) 50%, var(--veil-bottom) 78%, var(--veil-bottom) 100%),
    var(--backdrop);
}


/* --------------------------------------------------------------------------
   3. THE COLUMN
   One column, left aligned, capped at roughly 65–70 characters.
   Everything on every page sits inside this width unless it is a full-bleed
   image.
   -------------------------------------------------------------------------- */

.column {
  width: 100%;
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.4rem;
  padding-right: 1.4rem;
}

@media (min-width: 40em) {
  .column {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}


/* --------------------------------------------------------------------------
   4. HEADER AND NAVIGATION
   Same on every page. Site title links home; beside it, at the top right, a MENU button opens
   a side panel listing every page. The page you are on is filled in.
   -------------------------------------------------------------------------- */

/* The site title sits on the left and the MENU button on the right,
   on one line. */
.site-header {
  display: flex;
  align-items: baseline;   /* the words RITUAL FOR THE PEOPLE and MENU sit on the same line */
  justify-content: space-between;
  gap: 0.8rem;
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
}

.site-title {
  display: block;
  /* Sized to fill the reading column on one line at every screen width.
     The middle value grows with the window; the last value is the ceiling,
     the largest that still fits the column. Tracking is tighter than it was
     because large capitals need less air between letters than small ones. */
  font-size: clamp(0.68rem, 3.6vw, 1.3rem);   /* smaller, to share the line with MENU */
  font-weight: 500;
  letter-spacing: 0.09em;
  word-spacing: 0.25em;   /* wider gaps between words, so the capitals don't run together */
  line-height: 1.15;
  white-space: nowrap;
  text-transform: none;    /* the words are already written in capitals */
  color: var(--ink);
  text-decoration: none;
}

.site-title:hover,
.site-title:focus-visible {
  color: var(--accent-deep);
}

@media (min-width: 40em) {
  .site-title { font-size: 1.3rem; }
}

.site-nav {
  flex-shrink: 0;   /* the MENU button never gets squeezed */
}

/* THE MENU BUTTON — one clear pill reading MENU, under the site title.
   Pressing it opens the side panel below. */
.site-nav > summary {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6em;
  min-height: 2.4rem;
  padding: 0.4em 1em;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1.5px solid transparent;   /* no outline; it still fills softly on hover */
  border-radius: 999px;
  cursor: pointer;
  list-style: none;          /* hides the browser's small triangle */
  user-select: none;
  transition: background-color 0.18s ease;
}
.site-nav > summary::-webkit-details-marker { display: none; }

/* On the narrowest phones the button is just the word MENU, so it fits
   beside the title. */
@media (max-width: 22.5em) {
  .site-nav > summary { padding: 0.4em 0.85em; }
  .site-nav > summary::after { display: none; }
}

/* Three short lines before the word MENU */
.site-nav > summary::after {
  content: "";
  order: -1;
  width: 1em;
  height: 0.7em;
  border-top: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat;
}

.site-nav > summary:hover,
.site-nav > summary:focus-visible {
  background-color: var(--accent-half);
}

/* While the panel is open, the rest of the page is softly dimmed.
   Clicking anywhere on the dimmed page closes the menu. */
.site-nav[open] > summary::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(20, 23, 31, 0.35);
  cursor: default;
}

/* THE SIDE PANEL — slides in from the right-hand edge of the screen
   (it appears at once; there is no movement). */
.menu-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 51;
  width: min(18rem, 82vw);
  overflow-y: auto;
  padding: 1.4rem 1.4rem 2rem;
  /* See-through: the page shows behind, softly blurred so the menu
     words stay readable. Change --panel in section 1 to make it more
     or less clear (the last number: 0 = fully clear, 1 = solid). */
  background-color: var(--panel);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-left: 1px solid var(--rule);
}

/* The Close button at the top of the panel */
.menu-close {
  display: block;
  margin: 0 0 1.4rem auto;
  padding: 0.3em 0.2em;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: none;
  border: 0;
  cursor: pointer;
}
.menu-close:hover,
.menu-close:focus-visible {
  color: var(--accent-deep);
}

/* The six pages, stacked one above another, each a clear pill button */
.menu-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.menu-panel a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.8rem;
  padding: 0.45em 1.2em;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  word-spacing: 0.2em;   /* wider gaps between words: SACRED SPACE, YOUR GUIDE, THE OGs */
  white-space: nowrap;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  background-color: transparent;
  border: 1.5px solid var(--accent);
  border-radius: 999px;   /* fully rounded ends, like the page buttons */
  transition: background-color 0.18s ease, color 0.18s ease;
}

/* On hover the button fills with blue-violet at quarter strength.
   The page you are on stays fully filled. */
.menu-panel a:hover,
.menu-panel a:focus-visible {
  background-color: var(--accent-half);
}

/* A letter that stays lowercase inside the capitals — the "s" in THE OGs */
.site-nav .keep-case {
  text-transform: none;
}

/* The page you are currently reading — its button is filled in */
.menu-panel a[aria-current="page"] {
  color: var(--page);
  background-color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .site-nav > summary,
  .menu-panel a { transition: none; }
}

/* --------------------------------------------------------------------------
   5. HEADINGS
   Only two levels are used anywhere on the site.
   h1 = the page title.  h2 = a section within the page.
   -------------------------------------------------------------------------- */

h1 {
  margin: 0 0 1.6rem;
  font-size: 1.62rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.06em;
  color: var(--ink);
}

h2 {
  margin: 0 0 0.9rem;
  font-size: 1.4rem;   /* the same size on phones as on computers */
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.055em;
  color: var(--ink);
}

@media (min-width: 40em) {
  .subtitle { font-size: 1.08em; }
  h1 { font-size: 1.95rem; }
  h2 { font-size: 1.4rem; }
}

/* A heading that is also a link to another page */
h2 a,
h1 a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.12em;
}

h2 a:hover,
h2 a:focus-visible,
h1 a:hover,
h1 a:focus-visible {
  color: var(--accent-deep);
  border-bottom-color: var(--accent);
}


/* --------------------------------------------------------------------------
   6. BODY TEXT, LISTS AND LINKS
   -------------------------------------------------------------------------- */

p {
  margin: 0 0 1.35rem;
}

p:last-child { margin-bottom: 0; }

/* The short italic line that sits under some headings, e.g. "Start Here!!" */
.subtitle {
  margin: -0.4rem 0 1.15rem;
  font-style: italic;
  font-weight: 600;
  /* between the body text and the section heading in size.
     em, not rem: it grows with the body text. */
  font-size: 1.05em;
  color: var(--ink-soft);
}

/* A line that introduces a destination sitting directly below it, e.g.
   the invitation above "Get In Touch". Body size, but italic and in full
   ink, so it stands apart from the grey notes by voice rather than size. */
.lead-in {
  margin: 0;
  font-style: italic;
  color: var(--ink);
}

/* Small print, e.g. the travel note on the Weekend Intensive */
.note {
  font-size: 0.92rem;
  color: var(--ink-soft);
}

/* Plain lists of statements. No bullets — a thin rule marks each line. */
.list {
  list-style: none;
  margin: 0 0 1.35rem;
  padding: 0;
}

.list li {
  padding: 0.55rem 0 0.55rem 1.1rem;
  border-left: 1px solid var(--rule);
  margin-bottom: 0.45rem;
}

.list li:last-child { margin-bottom: 0; }

/* The same list with a small dot beside each line instead of the thin
   rule. Used for THE AIM on the landing page. To use it elsewhere,
   write <ul class="list dots">. */
.list.dots li {
  position: relative;
  border-left: none;
  padding-left: 1.5rem;
}

.list.dots li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  /* centred on the first line of text */
  top: calc(0.55rem + 0.825em - 0.15em);
  width: 0.3em;
  height: 0.3em;
  border-radius: 50%;
  background-color: var(--accent);
  opacity: 0.6;
}

/* A closing statement inside a list — "Be nothing." at the end of the
   stance list. It keeps the rule and the indent of its neighbours and
   simply carries a little more weight.
   NOTE: em, not rem. Body text is 19–20px while 1rem is 16px, so a rem
   value here would come out SMALLER than the lines above it. */
.list li.closing,
.steps li.closing {
  font-size: 1.12em;
}

/* The lists written as a sequence (the three functions of NoForm, the
   physical stance). They carry the same small soft dot as THE AIM
   rather than numbers. */
.steps {
  list-style: none;
  margin: 0 0 1.35rem;
  padding: 0;
}

.steps li {
  position: relative;
  padding: 0 0 0 1.5rem;
  margin-bottom: 1rem;
}

.steps li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  /* centred on the first line of text */
  top: calc(0.825em - 0.15em);
  width: 0.3em;
  height: 0.3em;
  border-radius: 50%;
  background-color: var(--accent);
  opacity: 0.6;
}

.steps li:last-child { margin-bottom: 0; }

/* Links inside running text */
a {
  color: var(--accent);
}

a:hover,
a:focus-visible {
  color: var(--accent-deep);
}

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

/* The "More about…" links that end a section on the home page */
.more {
  margin: 0;
  font-size: 0.95rem;
}

.more a {
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.12em;
}

.more a:hover,
.more a:focus-visible {
  border-bottom-color: var(--accent);
}


/* --------------------------------------------------------------------------
   6a. LINKS THAT LEAVE THE SITE
   Set as a short list of destinations rather than words in a sentence. Each
   one names where it goes on a second line, separated by hairlines, with a
   small arrow leaning away. The whole row is clickable, not just the words.
   -------------------------------------------------------------------------- */

.destinations {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.destinations li {
  border-bottom: 1px solid var(--rule);
}

/* When text carries on after a list of links, give it some air */
.destinations + p {
  margin-top: 1.6rem;
}

.destinations a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 0;
  color: var(--ink);
  text-decoration: none;
}

.dest-name {
  display: block;
  line-height: 1.35;
}

/* The web address itself — quiet, and the thing that says "this goes out" */
.dest-where {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.72em;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
}

/* The arrow leaning out of the page */
.destinations {
  --dest-mark: "\2197";       /* the arrow leaning out to another website */
  --dest-shift: translate(2px, -2px);
}

.destinations a::after {
  content: var(--dest-mark);
  display: inline-block;
  font-size: 1.05em;
  line-height: 1;
  color: var(--ink-faint);
  transition: transform 0.18s ease, color 0.18s ease;
}

.destinations a:hover .dest-name,
.destinations a:focus-visible .dest-name {
  color: var(--accent-deep);
}

.destinations a:hover .dest-where,
.destinations a:focus-visible .dest-where {
  color: var(--ink-soft);
}

.destinations a:hover::after,
.destinations a:focus-visible::after {
  color: var(--accent);
  transform: var(--dest-shift);
}

/* A contact address rather than a website. It opens a mail program rather
   than a new tab, so it points straight ahead instead of away. */
.destinations.is-contact {
  --dest-mark: "\2192";       /* → */
  --dest-shift: translate(4px, 0);
}

.destinations.is-contact .dest-where {
  letter-spacing: 0.01em;
}

/* Some people ask their device to keep movement to a minimum */
@media (prefers-reduced-motion: reduce) {
  .destinations a::after { transition: none; }
  .destinations a:hover::after,
  .destinations a:focus-visible::after { transform: none; }
}


/* --------------------------------------------------------------------------
   7. SPACE BETWEEN SECTIONS
   Sections are given room deliberately. Adjust these two numbers to make the
   whole site tighter or airier.
   -------------------------------------------------------------------------- */

.section {
  padding-top: 3.4rem;
  padding-bottom: 0;
}

.section:first-of-type { padding-top: 2.6rem; }

@media (min-width: 40em) {
  .section { padding-top: 4.4rem; }
}

/* A hairline used sparingly to close a passage */
.divider {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 3.4rem 0 0;
  width: 100%;
}


/* --------------------------------------------------------------------------
   8. IMAGES
   Two treatments only: full width across the screen, or held inside the
   reading column. Images never carry text on top of them.
   -------------------------------------------------------------------------- */

/* Edge to edge — used for the beach photograph at the top of the home page */
.image-full {
  margin: 0;
  background-color: var(--page-deep);
}

.image-full img {
  width: 100%;
  max-height: 58vh;
  object-fit: cover;
  /* Anchored low so the horizon and the walking figure stay in frame
     when a wide screen has to crop the photograph. */
  object-position: center 75%;
}

@media (min-width: 40em) {
  .image-full img { max-height: 62vh; }
}

/* Held inside the column, with air above and below */
.image-inline {
  margin: 2.6rem 0 0;
}

.image-inline img {
  width: 100%;
}

/* When a picture sits directly above a heading, the heading needs air.
   Without this the words press against the bottom edge of the photograph. */
.image-inline + h2,
.image-quiet + h2 {
  margin-top: 2.1rem;
}

/* Text that follows a photograph directly, in the same section */
.image-quiet + p,
.image-inline + p {
  margin-top: 1.8rem;
}

/* A small gallery — the Wilderness Workshop photographs. The first
   picture runs the full width of the column; the rest sit side by side. */
.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 2rem;
}

.gallery img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.gallery img:first-child {
  grid-column: 1 / -1;
}

/* A line of description under a photograph. Smaller and quieter than the
   body text. A <cite> inside it — a film or book title — comes out italic. */
.image-inline figcaption,
.image-quiet figcaption {
  margin-top: 0.7rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.image-inline figcaption cite,
.image-quiet figcaption cite {
  font-style: italic;
}

/* A smaller, quieter placement — used for the diagram and the portrait */
.image-quiet {
  margin: 2.6rem 0 0;
}

.image-quiet img {
  width: 100%;
  max-width: 24rem;
  max-height: 60vh;
  object-fit: contain;
  object-position: left top;
}


/* --------------------------------------------------------------------------
   9. THE PULL QUOTE
   Used once, for Antero Alli's words at the end of the No Form page.
   -------------------------------------------------------------------------- */

.quote {
  margin: 0;
  padding: 0;
}

/* Browsers indent blockquotes by default; the column stays flush left. */
.quote blockquote {
  margin: 0;
  padding: 0;
}

.quote p {
  font-size: 1.16rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--ink);
}

.quote .close {
  font-size: 1.32rem;
}

.quote figcaption {
  font-size: 0.9rem;
  font-style: normal;
  color: var(--ink-soft);
}

@media (min-width: 40em) {
  .quote p { font-size: 1.24rem; }
  .quote .close { font-size: 1.45rem; }
}



/* --------------------------------------------------------------------------
   10. FOOT OF THE PAGE
   The link that carries a reader on to the next page in sequence.
   -------------------------------------------------------------------------- */

.page-foot {
  margin-top: 4rem;
  padding-top: 1.6rem;
  padding-bottom: 4.5rem;
  border-top: 1px solid var(--rule);
}

.page-foot a {
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.15em;
}

.page-foot a:hover,
.page-foot a:focus-visible {
  border-bottom-color: var(--accent);
}

/* The foot of every page: the way on to the next page, then Contact,
   stacked one above the other. Contact opens an email to
   ritualforthepeople@gmail.com. */
.page-foot-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-foot-list li + li {
  margin-top: 0.8rem;
}

/* BUTTONS — every link that takes the reader to another page of this
   site: the "More about…" links on the landing page and Your Guide,
   and the "Continue to…" links at the foot of every page.
   Clear, with a blue-violet edge and fully rounded ends, so the background
   shows through. On hover they fill with blue-violet at quarter strength.
   (The menu at the top and links to other websites are not buttons.) */
.more a,
.page-foot a {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.6em 1.15em;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.3;
  color: var(--ink);
  background-color: transparent;
  border: 1.5px solid var(--accent);
  border-radius: 999px;   /* fully rounded ends */
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.more a::after,
.page-foot a::after {
  content: "\2192";   /* → */
  color: var(--accent);
  transition: transform 0.18s ease, color 0.18s ease;
}

.more a:hover,
.more a:focus-visible,
.page-foot a:hover,
.page-foot a:focus-visible {
  background-color: var(--accent-half);   /* blue-violet at quarter strength */
}

.more a:hover::after,
.more a:focus-visible::after,
.page-foot a:hover::after,
.page-foot a:focus-visible::after {
  color: var(--ink);
  transform: translateX(3px);
}

/* A little more room above a button than above ordinary text */
.more {
  margin-top: 1.6rem;
}

/* Buttons stacked one under another sit close together */
.more + .more {
  margin-top: 0.8rem;
}

/* On the landing page the button at the foot follows straight on from
   the two above it, with the same small gap and no dividing line. */
.page-home .page-foot {
  margin-top: 0.8rem;
  padding-top: 0;
  border-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .more a,
  .page-foot a,
  .more a::after,
  .page-foot a::after { transition: none; }
}