/* Art of Unravelling: design language v2
   Settled 2026-08-28 (workspace/project-aou-website/2026-08-28-design-language.md).
   Palette inverted 2026-09-02 on Rowena's decision: a warm white ground with
   dark charcoal text, for reading comfort. The text ramp was lightened again on
   2026-09-03, also on Rowena's reading of the built page: the near-black it had
   been now sits at a true charcoal. Every text-on-ground pair is WCAG AA or
   better. Type, sizes and spacing are unchanged throughout.
   Scoped to the pages rebuilt under this design language. The original
   assets/style.css stays untouched for pages not yet rebuilt. */

:root {
  --ground: oklch(96.5% 0.011 90);
  --card-ground: oklch(93.5% 0.014 88);
  --card-border: oklch(84% 0.014 88);
  --footer-ground: oklch(91.5% 0.014 88);
  --text-heading: oklch(33% 0.012 165);
  --text-body: oklch(39% 0.013 165);
  --text-quiet: oklch(47% 0.013 165);
  --accent: oklch(46% 0.09 165);
}

* { box-sizing: border-box; }

html { background: var(--ground); }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text-body);
  font-family: "Work Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.7;
}

h1, h2, h3, .wordmark {
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text-heading);
  margin: 0 0 0.5em;
}

h1 { font-weight: 700; font-size: 56px; line-height: 1.1; }
h2 { font-weight: 500; font-size: 32px; line-height: 1.25; }
h3 { font-weight: 500; font-size: 22px; line-height: 1.3; }

@media (max-width: 640px) {
  h1 { font-size: 38px; }
  h2 { font-size: 26px; }
}

p { margin: 0 0 1.2em; }

a { color: var(--text-heading); }
a:hover { color: var(--accent); }

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

.measure {
  max-width: 1000px;
}

/* Header */

header.site-v2 {
  padding: 28px 0;
  border-bottom: 1px solid var(--card-border);
}

header.site-v2 .masthead {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

header.site-v2 .masthead img {
  width: 40px;
  height: 40px;
}

.wordmark {
  font-size: 19px;
  font-weight: 700;
  text-decoration: none;
  display: block;
}

.site-tag {
  color: var(--text-quiet);
  font-size: 14px;
  font-weight: 300;
  font-family: "Work Sans", sans-serif;
}

nav.nav-v2 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
}

nav.nav-v2 a {
  color: var(--text-body);
  text-decoration: none;
  font-size: 15px;
}

nav.nav-v2 a:hover { color: var(--text-heading); }

/* Hero */

.hero-v2 {
  padding: 72px 0 40px;
  text-align: center;
}

.hero-v2 .badge {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-quiet);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 22px;
}

.hero-v2 h1 { margin-bottom: 14px; }

.hero-v2 .tag {
  font-size: 22px;
  font-weight: 300;
  color: var(--text-body);
  max-width: 720px;
  margin: 0 auto;
}

/* Intro / framing */

.intro-v2 {
  padding: 8px 0 48px;
}

.intro-v2 p {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  font-size: 19px;
}

/* Plain-terms card */

.plain-terms {
  background: var(--card-ground);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  max-width: 920px;
  margin: 0 auto 56px;
  padding: 36px 40px;
}

.plain-terms h2 {
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-quiet);
  margin-bottom: 20px;
}

.plain-terms dt {
  font-family: "Manrope", sans-serif;
  font-weight: 500;
  color: var(--text-heading);
  font-size: 18px;
  margin-top: 20px;
}

.plain-terms dt:first-child { margin-top: 0; }

.plain-terms dd {
  margin: 6px 0 0;
  font-size: 17px;
}

/* Reading list */

.reading-list {
  list-style: none;
  margin: 0 auto 56px;
  padding: 0;
  max-width: 1000px;
  border-top: 1px solid var(--card-border);
}

.reading-list li {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 22px 0;
  border-bottom: 1px solid var(--card-border);
}

.reading-list .n {
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-quiet);
  width: 28px;
  flex: none;
}

.reading-list .entry { flex: 1; }

.reading-list h3 {
  margin: 0 0 4px;
  font-size: 19px;
}

.reading-list h3 a {
  text-decoration: none;
}

.reading-list h3 a:hover { color: var(--accent); }

.reading-list .subtitle {
  color: var(--text-body);
  font-size: 16px;
  margin: 0 0 4px;
}

.reading-list .meta {
  color: var(--text-quiet);
  font-size: 14px;
  margin: 0;
}

/* Substack's own image toolbar came across with the post bodies. Substack
   hides it until hover, with CSS these pages do not carry, so without this it
   renders as two stray controls under every image. The photograph credit in
   the caption is part of the design and stays. */

.post-body .image-link-expand,
.post-body button.pencraft { display: none; }

/* Cover tiles

   Each post's Substack cover image, cropped square and served from this repo
   rather than Substack's CDN, so the archive does not depend on that CDN
   staying up. The tile repeats the link its own row already carries, so it is
   hidden from assistive technology and skipped by the keyboard: the title
   beside it is the one link and the one label. Two Unravelling posts have no
   cover image, and their rows carry an invisible spacer instead, which keeps
   the column of titles straight without drawing a box around nothing. */

.tile {
  flex: none;
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--card-border);
  background: var(--card-ground);
}

.tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tile-empty {
  border-color: transparent;
  background: none;
}

.aside-card {
  display: flex;
  align-items: flex-start;
  gap: 22px;
}

.aside-card .entry { flex: 1; }

/* The asides sit directly under the reading order and read as its companion,
   so their titles are set the same way: no underline, accent on hover. */

.aside-card h3 a { text-decoration: none; }
.aside-card h3 a:hover { color: var(--accent); }

@media (max-width: 640px) {
  .tile { width: 64px; height: 64px; }
  .reading-list li, .aside-card { gap: 14px; }
}

/* Asides */

.asides-v2 {
  max-width: 1000px;
  margin: 0 auto 64px;
}

.asides-v2-head {
  color: var(--text-quiet);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 18px;
}

.aside-card {
  background: var(--card-ground);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 22px 26px;
  margin-bottom: 16px;
}

.aside-card .badge-inline {
  font-size: 13px;
  color: var(--text-quiet);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 8px;
}

.aside-card h3 { margin-bottom: 4px; }

.aside-card .subtitle {
  color: var(--text-body);
  font-size: 16px;
  margin: 0 0 4px;
}

.aside-card .meta {
  color: var(--text-quiet);
  font-size: 14px;
  margin: 0;
}

/* Post article */

article.post-v2 {
  padding: 56px 0 40px;
}

.post-v2 .badge-inline {
  display: inline-block;
  font-size: 13px;
  color: var(--text-quiet);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 20px;
}

.post-v2 h1 {
  font-size: 44px;
  max-width: 900px;
}

.post-v2 .subtitle {
  font-size: 20px;
  color: var(--text-body);
  max-width: 760px;
  margin-bottom: 8px;
}

.post-v2 .meta {
  color: var(--text-quiet);
  font-size: 15px;
  margin-bottom: 40px;
}

.post-body {
  max-width: 720px;
  font-size: 18px;
}

.post-body p, .post-body blockquote, .post-body ul, .post-body ol {
  margin: 0 0 1.4em;
}

.post-body h2, .post-body h3 {
  margin-top: 1.6em;
}

.post-body blockquote {
  border-left: 2px solid var(--card-border);
  padding-left: 20px;
  color: var(--text-body);
}

.post-body strong { color: var(--text-heading); font-weight: 500; }

/* height: auto is load-bearing. Substack's markup carries width and height
   attributes that often disagree with the file's real dimensions, and without
   this the attribute height is honoured while the width scales, which stretches
   the picture. */
.post-body img { max-width: 100%; height: auto; border-radius: 4px; }

/* A photograph carried across at full column width can run taller than the
   screen. img-compact holds one inside a smaller box, centred, keeping its
   proportions. */
.post-body .captioned-image-container.img-compact img {
  display: block;
  max-width: 420px;
  max-height: 600px;
  width: auto;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

/* Captions run quiet and small: 8pt, which is 11px on screen. This reaches
   every caption on a post page, the cover credits and Rowena's own notes
   under her photographs alike. Quiet text on the page ground measures 6.13:1,
   which clears AA for small text. */
.post-body figcaption {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-quiet);
  margin-top: 8px;
}

/* A cover is centred in its box, so its credit is centred under it. The
   captions inside the post body keep the left-hand start they already have. */
.post-body .post-cover figcaption {
  text-align: center;
}

/* Substack's embeds arrive with no styling of their own, so an audio player
   renders at the browser's default 300 by 150 and a video overflows the
   column. */
.post-body iframe {
  max-width: 100%;
  border: 0;
}

.post-body iframe.spotify-wrap {
  width: 100%;
  height: 420px;
}

.post-body .youtube-wrap iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* A poem sets one line per paragraph, so it reads as a stanza rather than as a
   column of separated lines. */
.post-body .poem { margin-bottom: 1.4em; }
.post-body .poem p { margin-bottom: 0; }

.post-body hr {
  border: none;
  border-top: 1px solid var(--card-border);
  margin: 2.4em 0;
}

/* Post-to-post navigation */

.post-chain {
  max-width: 720px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-top: 32px;
  margin-top: 32px;
  border-top: 1px solid var(--card-border);
  font-size: 15px;
}

.post-chain a { text-decoration: none; }
.post-chain a:hover { color: var(--accent); }
.post-chain .prev { text-align: left; }
.post-chain .next { text-align: right; margin-left: auto; }
.post-chain .label {
  display: block;
  color: var(--text-quiet);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.back-to-season {
  display: inline-block;
  margin-top: 28px;
  font-size: 15px;
  color: var(--text-quiet);
  text-decoration: none;
}

.back-to-season:hover { color: var(--text-heading); }

/* Support the work

   A quiet pill at the foot of every post page, sitting under the closing
   paragraph that invites a contribution. It opens Rowena's own Stripe page in
   a new tab. Nothing is loaded from Stripe, so the page still makes no
   third-party request. */

.post-support {
  max-width: 720px;
  margin: 0;
}

.post-support a {
  display: inline-block;
  font-size: 15px;
  color: var(--text-body);
  text-decoration: none;
  background: var(--card-ground);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  padding: 10px 22px;
}

.post-support a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Buy button for a practice card, inside the post body. Same pill as the
   support button, with the price beside the name so the reader knows the cost
   before they leave the page. */
.post-buy {
  max-width: 720px;
  margin: 0 0 1.4em;
}

.post-buy a {
  display: inline-block;
  font-size: 15px;
  color: var(--text-body);
  text-decoration: none;
  background: var(--card-ground);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  padding: 10px 22px;
  cursor: pointer;
}

.post-buy a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.post-buy .price {
  color: var(--text-quiet);
  margin-left: 6px;
}

/* Footer */

footer.site-v2 {
  background: var(--footer-ground);
  border-top: 1px solid var(--card-border);
  padding: 32px 0;
  margin-top: 40px;
}

footer.site-v2 .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

footer.site-v2 .wordmark {
  font-size: 16px;
}

footer.site-v2 .tagline {
  color: var(--text-quiet);
  font-size: 14px;
}

footer.site-v2 .copyright {
  width: 100%;
  color: var(--text-quiet);
  font-size: 13px;
  margin-top: 12px;
}

/* The footer's link list is marked inline on the <ul>, but its items
   are still list items, so without this the five links stack into a
   column under the copyright line instead of running along it. Added
   2026-09-04. */

footer.site-v2 .copyright li { display: inline; }

footer.site-v2 .copyright li + li::before {
  content: " \00b7 ";
  color: var(--text-quiet);
}

footer.site-v2 .copyright a { color: var(--text-quiet); }
footer.site-v2 .copyright a:hover { color: var(--accent); }

/* ============================================================
   The go-live set: the Arrival page, The Practice page and the
   seasons index. Added 2026-09-04 from the design canvas
   ("Art of Unravelling Arrival") and the settled design language.
   Nothing below is used by the season or post pages, so this
   block adds to the stylesheet without changing any of them.
   ============================================================ */

/* Full-bleed photograph bands

   The hero on the Arrival page and the breathing band partway down
   The Practice page. Both run the full width of the viewport rather
   than sitting inside .wrap, so they escape the 1080px measure. The
   credit is a small chip in the bottom corner: a translucent dark
   ground under light text, because a photograph is the one place on
   this site where the page's own charcoal-on-cream would be
   unreadable. */

.band {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--card-ground);
}

.band img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.band-hero { height: 560px; }
.band-mid { height: 460px; }

@media (max-width: 640px) {
  .band-hero { height: 320px; }
  .band-mid { height: 260px; }
}

.photo-credit {
  position: absolute;
  right: 14px;
  bottom: 12px;
  font-family: "Work Sans", sans-serif;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: oklch(97% 0.008 90);
  /* The chip sits over a photograph, so the ground behind the credit
     is whatever the picture is. At the canvas value of 0.55 the credit
     measures 3.69:1 against a white sky, which is under AA. At 0.65 the
     worst case any photograph can produce is 5.15:1, and the chip is
     still quiet. */
  background: oklch(20% 0.02 90 / 0.65);
  padding: 5px 10px;
  border-radius: 3px;
}

.photo-credit a {
  color: oklch(97% 0.008 90);
  text-decoration: underline;
}

/* The Arrival hero

   Larger than the season pages' h1, and set below the photograph
   rather than over it, so the picture is never asked to carry text.
   The headline and the line under it are lines, not sentences, and
   they carry no full stops.

   The headline is given more width than the page's 1080px measure so
   that it sits on one line on a desktop screen, the way it does in
   the design canvas. It still wraps once the screen is narrower than
   the line, which is what the two size steps below are for. */

.hero-arrival {
  padding: 72px 0 24px;
  text-align: center;
  max-width: 1320px;
}

.hero-arrival h1 {
  font-size: 64px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
}

.hero-arrival .tag {
  font-size: 22px;
  font-weight: 300;
  color: var(--text-body);
  max-width: 760px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .hero-arrival h1 { font-size: 44px; }
}

@media (max-width: 640px) {
  .hero-arrival h1 { font-size: 34px; }
  .hero-arrival .tag { font-size: 19px; }
}

/* A statement set beside a photograph

   The Arrival page's second section. The words take slightly more
   width than the picture, and the two stack on a narrow screen with
   the words first. */

.beside {
  display: flex;
  gap: 56px;
  align-items: center;
  padding: 88px 0 96px;
}

.beside .words { flex: 1.1; }

.beside .words h2 {
  margin-bottom: 20px;
  max-width: 520px;
}

.beside .words h2 span { display: block; }

.beside .words h2 span + span { margin-top: 12px; }

.beside .words p {
  font-size: 19px;
  max-width: 520px;
  margin: 0;
}

/* The opening line of the "beside" block reads as ordinary body prose rather
   than a heading, so it takes the same size as the paragraph beneath it and
   carries only the gap between the two. */
.beside .words .lead-line { margin: 0 0 20px; }

.beside .picture {
  flex: 0.9;
  position: relative;
  height: 420px;
  border-radius: 4px;
  overflow: hidden;
}

.beside .picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 860px) {
  .beside { flex-direction: column; gap: 36px; padding: 56px 0 64px; }
  .beside .picture { width: 100%; height: 300px; }
  .beside .words h2, .beside .words p { max-width: none; }
}

/* A left-aligned blurb

   The Practice page's "Attention before action". A wide measure
   flush against the left margin, which is the design language's
   default shape for body prose outside a card. */

.blurb {
  padding: 80px 0 88px;
  max-width: 1000px;
}

.blurb p {
  font-size: 19px;
  margin-bottom: 1.3em;
}

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

/* The two paths

   Both entry pages close on two ways in rather than on a call to
   action. Underlined links, not buttons: the ask is quiet by
   design. */

.paths {
  padding: 88px 0 104px;
  text-align: center;
}

.paths .lead {
  font-size: 17px;
  letter-spacing: 0.02em;
  color: var(--text-quiet);
  max-width: 520px;
  margin: 0 auto 36px;
}

.paths .routes {
  display: flex;
  gap: 56px;
  flex-wrap: wrap;
  justify-content: center;
}

.paths .routes a {
  font-size: 18px;
  font-weight: 500;
  font-family: "Manrope", sans-serif;
  color: var(--text-heading);
  text-decoration: none;
  border-bottom: 1px solid var(--card-border);
  padding-bottom: 4px;
}

.paths .routes a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

@media (max-width: 640px) {
  .paths { padding: 56px 0 72px; }
  .paths .routes { gap: 24px; flex-direction: column; align-items: center; }
}

/* Season cards

   One card per season on the seasons index. The artwork is the
   right-hand textile band of that season's practice-bundle cover,
   cropped to a strip and run down the left of the card, echoing the
   covers' own composition.

   The whole card is a link to the season's reading page, made by
   stretching the title's own anchor over the card with ::after.
   That is what makes a click on the artwork go to the reading page
   rather than to the shop, per the design decision. The two buttons
   sit above that overlay on their own stacking level, so they keep
   their own destinations. The strip is decorative and repeats the
   link beside it, so it is hidden from assistive technology. */

.season-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  max-width: 1000px;
  margin: 0 auto 28px;
}

.season-card {
  position: relative;
  display: flex;
  background: var(--card-ground);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  overflow: hidden;
}

.season-card:hover { border-color: var(--text-quiet); }

/* The strip is held in a box of its own with the picture positioned
   inside it. A plain <img> here would bring its own 530-pixel height
   into the flex row and set the card's height from the artwork
   instead of from the words, which left a tall empty band beside the
   shorter cards. The box has no height of its own, so the card is as
   tall as its text and the strip covers whatever that comes to. */

.season-card .card-strip {
  flex: none;
  width: 150px;
  position: relative;
  overflow: hidden;
  background: var(--card-border);
}

.season-card .card-strip img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The body is deliberately not positioned. The stretched link below
   resolves against the nearest positioned ancestor, and that has to
   be the card itself: with the body positioned, the link covered the
   words only and a click on the artwork did nothing. */

.season-card .card-body {
  padding: 26px 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.season-card .card-badge {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-quiet);
}

.season-card h2 {
  font-size: 26px;
  font-weight: 700;
  margin: 0;
}

.season-card h2 a {
  text-decoration: none;
  color: var(--text-heading);
}

.season-card h2 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.season-card:hover h2 a { color: var(--accent); }

.season-card .card-body p {
  font-size: 17px;
  margin: 0;
}

.season-card .card-buttons {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.btn-read, .btn-buy {
  display: inline-block;
  font-family: "Manrope", sans-serif;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 999px;
  padding: 10px 20px;
}

.btn-read {
  color: var(--text-body);
  background: transparent;
  border: 1px solid var(--card-border);
}

.btn-read:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.btn-buy {
  color: var(--ground);
  background: var(--text-heading);
  border: 1px solid var(--text-heading);
}

.btn-buy:hover {
  color: var(--ground);
  background: var(--accent);
  border-color: var(--accent);
}

.btn-buy .price {
  opacity: 0.75;
  margin-left: 6px;
}

/* Echoes is not a season in the sequence, so its card runs the full
   width under the four and carries a wider strip. */

.season-card.wide { grid-column: 1 / -1; }
.season-card.wide .card-strip { width: 180px; }
.season-card.wide .card-body { padding: 32px 36px; }

@media (max-width: 860px) {
  .season-cards { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .season-card .card-strip, .season-card.wide .card-strip { width: 96px; }
  .season-card .card-body, .season-card.wide .card-body { padding: 22px 22px 24px; }
}

/* A block sitting directly under a full-bleed band needs its own top
   space, because the band has no margin of its own. */

.after-band { margin-top: 88px; }

@media (max-width: 640px) {
  .after-band { margin-top: 48px; }
}

/* ============================================================
   Start Here, the shop and the archive. Added 2026-09-04.
   These three pages were the last of the old parchment site
   still sitting behind the nav. Nothing below is used by the
   entry pages, the season pages or the post pages, so this
   block adds to the stylesheet without changing any of them.
   ============================================================ */

/* A quiet heading over a block of cards

   Start Here's "A way in", and any later section needing a line
   of its own above a grid. Left-aligned on the same 1000px
   measure the grids use, so the heading and the first card
   share a left edge. */

.block-head {
  max-width: 1000px;
  margin: 0 auto 28px;
}

.block-head h2 { margin: 0; }

/* Start Here's ten ways in

   Each card is one route into the work: a condition the reader
   might recognise, and the thread that meets it. The whole card
   is the link, made the way the season cards make theirs, by
   stretching the title's own anchor over the card. There is one
   destination per card here, so nothing has to sit above the
   overlay. */

.way-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto 24px;
}

.way-card {
  position: relative;
  background: var(--card-ground);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 24px 28px 26px;
}

.way-card:hover { border-color: var(--text-quiet); }

.way-card h3 {
  margin: 0 0 8px;
  font-size: 20px;
}

.way-card h3 a {
  text-decoration: none;
  color: var(--text-heading);
}

.way-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.way-card:hover h3 a { color: var(--accent); }

.way-card p {
  font-size: 17px;
  margin: 0;
}

@media (max-width: 780px) {
  .way-cards { grid-template-columns: minmax(0, 1fr); }
}

/* The shop grid

   The products in The Seed Bank, all carrying the same shape:
   the price, the product's name as the link, and one line
   saying what it is. No artwork: the cropped textile strips
   exist for the five seasons only, and two of these products
   are season bundles, so strips here would leave the rest
   looking unfinished. */

.shop-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto 104px;
}

.shop-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--card-ground);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 22px 24px 24px;
}

.shop-card:hover { border-color: var(--text-quiet); }

.shop-card .price {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-quiet);
}

.shop-card h3 {
  margin: 0;
  font-size: 19px;
}

.shop-card h3 a {
  text-decoration: none;
  color: var(--text-heading);
}

.shop-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.shop-card:hover h3 a { color: var(--accent); }

.shop-card p {
  font-size: 16px;
  margin: 0;
}

/* A single filled link standing on its own above the grid.
   .btn-buy carries the fill; this gives it its own room. */

.shop-browse {
  max-width: 1000px;
  margin: 0 auto 48px;
  text-align: center;
}

/* The archive list

   Every post on the site in one flat run, newest first. It uses
   the reading list's rhythm, a hairline between rows on the same
   1000px measure, with the thread name in the left column where
   a season's reading order carries its number. A grid of cards
   was the alternative and it does not suit a list this long: the
   reader is scanning for one title, not browsing. */

.archive-list {
  list-style: none;
  margin: 0 auto 56px;
  padding: 0;
  max-width: 1000px;
  border-top: 1px solid var(--card-border);
}

.archive-list li {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--card-border);
}

.archive-list .thread {
  flex: none;
  width: 168px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-quiet);
  line-height: 1.9;
}

.archive-list .entry { flex: 1; }

.archive-list h3 {
  margin: 0 0 2px;
  font-size: 19px;
}

.archive-list h3 a { text-decoration: none; }

.archive-list h3 a:hover { color: var(--accent); }

.archive-list .meta {
  color: var(--text-quiet);
  font-size: 14px;
  margin: 0;
}

@media (max-width: 640px) {
  .archive-list li { flex-direction: column; gap: 4px; }
  .archive-list .thread { width: auto; line-height: 1.6; }
}

/* ============================================================
   Try a practice: the live Whole Body Listening demo. Added
   2026-09-05, built from the design canvas ("Art of Unravelling
   Arrival", the Demo artboard) and cleared by Tuning Fork's
   Vessel Calibration. Nothing below is used by any other page,
   so this block adds to the stylesheet without changing them.
   ============================================================ */

.demo {
  max-width: 640px;
  margin: 0 auto;
  padding: 64px 0 96px;
}

.demo-screen[hidden] { display: none; }

.demo-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
}

.demo-tags {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-quiet);
}

.demo-title { margin: 0; }

.demo-lead {
  font-size: 19px;
  color: var(--text-body);
  margin: 0;
}

.demo-sub {
  font-size: 16px;
  color: var(--text-quiet);
  margin: 0;
}

.demo-begin { margin-top: 6px; }

.demo-progress {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-quiet);
}

/* The step panel: all three steps stand at once, the current one
   lit at full size and colour, the other two receded to a single
   teaser line. Receding by colour and size rather than opacity
   keeps every line of text at the same measured contrast the rest
   of the site holds, active or not. */

.demo-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  width: 100%;
}

.step-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  text-align: left;
  border-radius: 8px;
  padding: 22px 26px;
}

.step-card.active {
  background: var(--card-ground);
  border: 1px solid var(--card-border);
}

.step-card.dim {
  background: transparent;
  border: 1px solid transparent;
  padding: 10px 26px;
}

.step-icon { flex: none; padding-top: 2px; }

.step-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke-width: 1.4;
}

.step-card.active .step-icon svg { stroke: var(--text-heading); }
.step-card.dim .step-icon svg { stroke: var(--text-quiet); }

.step-card.active h3 {
  font-size: 20px;
  margin: 0 0 6px;
}

.step-card.dim h3 {
  font-size: 16px;
  color: var(--text-quiet);
  margin: 0 0 2px;
}

.step-card.active p {
  font-size: 17px;
  margin: 0;
}

.step-card.dim p {
  font-size: 14px;
  color: var(--text-quiet);
  margin: 0;
}

.demo-controls {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 6px;
}

.demo-controls button { border: none; }
.demo-controls .btn-read { border: 1px solid var(--card-border); background: transparent; cursor: pointer; }
.demo-controls .btn-buy { cursor: pointer; }

.demo-stop-note {
  font-size: 14px;
  color: var(--text-quiet);
  margin: 0;
}

.demo-closing textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  background: var(--ground);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  color: var(--text-body);
  font-family: "Work Sans", sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  padding: 16px;
}

.demo-closing textarea::placeholder { color: var(--text-quiet); }

.demo-privacy-note {
  font-size: 14px;
  color: var(--text-quiet);
  margin: -8px 0 0;
}

.demo-giveaway {
  width: 100%;
  max-width: 480px;
  margin: 4px auto 0;
  text-align: center;
}

.demo-giveaway-lead {
  font-size: 16px;
  color: var(--text-body);
  margin: 0 0 10px;
}

.demo-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}

.demo-links a { cursor: pointer; }
.demo-links .price { opacity: 0.75; margin-left: 6px; }

.demo-restart {
  border: none;
  background: transparent;
  color: var(--text-quiet);
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  text-decoration: underline;
  padding: 6px;
  cursor: pointer;
}

.demo-restart:hover { color: var(--text-heading); }

@media (max-width: 640px) {
  .demo { padding: 40px 0 64px; }
  .step-card { padding: 18px 20px; gap: 14px; }
  .step-card.dim { padding: 8px 20px; }
  .demo-controls { flex-direction: column; align-items: stretch; }
  .demo-links { flex-direction: column; align-items: stretch; }
}

/* Nav dropdowns -- 2026-09-05 site-wide chrome pass.
   The Practice and each season link gain a small toggle that reveals a
   submenu: Try a practice under The Practice, and that season's own
   reading-order posts under each season name. Click/tap toggles the menu
   (so it works on touch, not just hover); hovering the item on a pointer
   device also opens it, as a convenience. See assets/nav-dropdown.js for
   the toggle behaviour. */

nav.nav-v2 .nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
}

nav.nav-v2 .nav-dropdown-toggle {
  background: none;
  border: none;
  padding: 2px 4px;
  margin: 0;
  font-size: 11px;
  line-height: 1;
  color: var(--text-quiet);
  cursor: pointer;
  font-family: inherit;
}

nav.nav-v2 .nav-dropdown-toggle:hover,
nav.nav-v2 .nav-dropdown-toggle:focus-visible {
  color: var(--text-heading);
}

nav.nav-v2 .nav-dropdown-menu {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  max-width: calc(100vw - 32px);
  background: var(--ground);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 20;
  display: none;
}

nav.nav-v2 .nav-item.open > .nav-dropdown-menu,
nav.nav-v2 .nav-item:hover > .nav-dropdown-menu {
  display: block;
}

nav.nav-v2 .nav-dropdown-menu li { margin: 0; }

nav.nav-v2 .nav-dropdown-menu a {
  display: block;
  padding: 7px 16px;
  font-size: 14px;
  white-space: normal;
}