/* ============================================================
   Plumline — shared page chrome
   The header, hero, bands, cards, rows and footer that every
   content page uses. Built only from tokens.css: no raw hex,
   no one-off radius. Written up in docs/style-guide.md.

   The map page (index.html) links this file too, after its own
   styles.css. The staff pages are the ones still on styles.css
   alone — see the note at the end of this file.
   ============================================================ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4.8rem; }
/* Jumping to an anchor must not park the heading under the sticky header, and
   the header grows as the section links wrap: measured at 53px from 625px up,
   85px from 410px, and 114px below that. These two steps sit where the nav
   gains a row, and each clears the header it belongs to. Re-measure them if a
   link is ever added to the bar. */
@media (max-width: 624px) { html { scroll-padding-top: 5.6rem; } }
@media (max-width: 409px) { html { scroll-padding-top: 7.4rem; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--clay-text); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 0.5em; }
/* A title and the line under it are read as shapes before they are read as
   words, so the browser is asked to even the lines rather than leave one word
   stranded on the last of them. Every page, not only this one. */
h1 { font-size: clamp(1.9rem, 5vw, 3rem); text-wrap: balance; }
h2 { font-size: clamp(1.4rem, 3.4vw, 2rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* ---- section colour ----------------------------------------
   One class sets a section's whole family, so a page says which
   part of the site it belongs to once and nothing below needs an
   inline colour. Finder/clay is the default. */
body, .sect-finder { --sect: var(--clay); --sect-text: var(--clay-text); --sect-soft: var(--clay-soft); }
.sect-builders { --sect: var(--sage); --sect-text: var(--sage-text); --sect-soft: var(--sage-soft); }
.sect-order { --sect: var(--indigo); --sect-text: var(--indigo-text); --sect-soft: var(--indigo-soft); }
.sect-plumliners { --sect: var(--rose); --sect-text: var(--rose-text); --sect-soft: var(--rose-soft); }

/* the readable measure, nested inside .wrap so it stays left-aligned
   against the container rather than centring itself in the window */
.measure { max-width: 64ch; }
.muted { color: var(--muted); }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); }

.skip {
  position: absolute; left: -9999px;
  background: var(--card); color: var(--ink);
  padding: 0.6rem 1rem; border-radius: var(--radius-sm); z-index: 100;
}
.skip:focus { left: 20px; top: 0.6rem; }

/* ---- header ------------------------------------------------
   Sticky, translucent, hairline bottom border. The frame never
   takes a section colour — all the saturation lives in content. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--ground-blur);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.site-header .bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem 1rem; flex-wrap: wrap;
  max-width: var(--maxw); margin: 0 auto; padding: 0.7rem 20px;
}
.wordmark {
  display: flex; align-items: center; color: var(--ink);
  font-weight: 600; font-size: 1.12rem; letter-spacing: -0.01em;
}
.wordmark:hover { text-decoration: none; }
.sangha { display: inline-flex; }
.wordmark .sangha { margin-right: 0.5rem; }
.sangha span {
  font-size: 1.05rem; line-height: 1; margin-right: -0.62em;
  filter: drop-shadow(0 0 1.5px var(--ground));
}
.sangha span:last-child { margin-right: 0; }
/* on a tinted panel the halo has to match the panel, not the page */
.rows.panels .sangha span { filter: drop-shadow(0 0 1.5px var(--sect-soft)); }

.site-header nav { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; font-size: 0.92rem; }
.site-header nav a { color: var(--ink); padding: 0.1rem 0; }
.site-header nav a[aria-current] {
  background: var(--accent-soft); border-radius: var(--radius-pill); padding: 0.1rem 0.7rem;
}
/* A section whose page has not shipped yet is named but not offered. Asked for
   by Christian reviewing #16: a link that goes nowhere is worse than a word that
   is plainly not a link. Each becomes an <a> again in the pull request that
   ships its page. */
.site-header nav .soon { color: var(--muted); }
.site-footer nav .soon { color: var(--footer-fine); }
@media (max-width: 620px) {
  .site-header .bar { padding-bottom: 0.5rem; }
  .site-header nav { width: 100%; font-size: 0.86rem; gap: 0.2rem 0.9rem; }
}

/* ---- page scaffolding -------------------------------------- */
.hero { padding-block: clamp(2.4rem, 7vw, 4rem) 1rem; }
.hero.centred { text-align: center; }
.hero.centred .lede { margin-inline: auto; }
.kicker {
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sect-text); margin-bottom: 0.6rem;
}
.lede { font-size: clamp(1.05rem, 2.3vw, 1.3rem); color: var(--muted); max-width: 48ch; text-wrap: balance; }
.note { font-size: 0.92rem; color: var(--muted); max-width: 64ch; }
section.block { padding: clamp(2.2rem, 6vw, 3.4rem) 0; border-top: 1px solid var(--rule); }
section.block.alt { background: var(--ground-2); }
section.block > .wrap > h2 { margin-bottom: 0.3em; }

/* ---- buttons ----------------------------------------------
   Orange is the only filled colour on the site and always means
   act. A section colour never fills a button. */
/* A button is a control, so it is drawn like every other control: the
   smallest corner the page has, the card surface where it is not filled, and
   --lift, which is the one amount of depth a thing you press ever carries.
   It used to be a pill that rose a pixel under the pointer; the rise is gone
   with it, because depth that moves is a second amount. */
.btn {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font); font-weight: 500; font-size: 1rem;
  line-height: 1.2; padding: 0.5em 1.1em; border-radius: var(--radius-xs);
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  box-shadow: var(--lift);
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent-strong); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-strong-hover); }
.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--rule); }
.btn-ghost:hover { border-color: var(--clay); background: var(--ground-2); }

/* ---- cards -------------------------------------------------
   The recurring unit: kicker, title, three lines of muted
   description, one link ending in an arrow. */
.cards { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 940px) { .cards.three { grid-template-columns: 1fr 1fr 1fr; } }
@media (min-width: 940px) { .cards.four { grid-template-columns: repeat(4, 1fr); } }
.card {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 1.3rem 1.3rem 1.4rem;
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--clay); }
.card h3 { margin: 0 0 0.3rem; }
.card p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.card .more { align-self: flex-start; margin-top: 0.7rem; color: var(--sect-text); font-weight: 600; font-size: 0.9rem; }
.card.sect { border-top: 3px solid var(--sect); }
/* a card that opens only for signed-in volunteers. Muted, not a section
   colour — a lock is a state, not a place. */
.card .lockline {
  display: block; margin-top: auto; padding-top: 0.8rem; font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.card.sect .kicker { margin-bottom: 0.3rem; }
/* the same decorative character the rows carry, at the head of a card */
.card .card-emoji { display: block; font-size: 1.5rem; line-height: 1; margin-bottom: 0.6rem; opacity: 0.9; }

/* ---- grouped rows -----------------------------------------
   Long lists are bands with generous padding, each row a title
   and one italic line — never a dense table. */
.rows { border-top: 1px solid var(--rule); margin-top: 1.4rem; max-width: 48rem; }
.rows a.row, .rows div.row {
  display: block; padding: 0.95rem 0.2rem;
  border-bottom: 1px solid var(--rule); color: var(--ink);
}
.rows a.row:hover { text-decoration: none; background: var(--card); }
.rows a.row:hover .row-title { color: var(--sect-text); }
.row-title { font-weight: 600; font-size: 1rem; }
.row-note { display: block; font-style: italic; color: var(--muted); font-size: 0.92rem; line-height: 1.5; max-width: 64ch; }


/* ---- tinted panel rows -------------------------------------
   A list item is a soft panel, not a line in a table. The tint is
   the section's own pale family, and the panels sit apart from each
   other so a list reads as a set of things rather than a form.

   The leading character is decoration, not an icon — flowers, leaves
   and seated figures, drawn from one small set and rotated. It is not
   trying to describe the row, so don't "fix" it to match the words. */
.rows.panels { border-top: 0; max-width: 52rem; display: grid; gap: 0.55rem; margin-top: 1.4rem; }
.rows.panels a.row, .rows.panels div.row {
  display: grid; grid-template-columns: 2.5rem 1fr; gap: 0.2rem 0.55rem;
  background: var(--sect-soft); border: 1px solid transparent;
  border-radius: var(--radius); padding: 1rem 1.2rem; border-bottom: 0;
}
.rows.panels a.row:hover { background: var(--sect-soft); border-color: var(--sect); text-decoration: none; }
.rows.panels .row-emoji { grid-row: span 2; font-size: 1.25rem; line-height: 1.5; opacity: 0.9; }
.rows.panels .row-note { margin: 0; }

/* ---- a card that opens ------------------------------------
   The card itself is the disclosure. Its summary carries the card's own two
   columns, so an openable card and a plain one look identical until it is
   opened, and what comes out sits *inside* the card rather than among the
   tinted rows below it. Those rows are separate things; this is one thing with
   more of itself to show. No JavaScript: a <details> works with scripting off,
   where a lightbox does not. */
details.feature { display: block; }
details.feature > summary {
  display: grid; grid-template-columns: 1fr; cursor: pointer; list-style: none;
}
@media (min-width: 720px) { details.feature > summary { grid-template-columns: 32% 1fr; } }
details.feature > summary::-webkit-details-marker { display: none; }
details.feature .more::after { content: " \25BE"; }
details.feature[open] .more::after { content: " \25B4"; }
details.feature > summary:hover .more { text-decoration: underline; }

.feature .unfold { border-top: 1px solid var(--rule); padding: 0.4rem 1.7rem 1.5rem; }
.feature .session {
  display: grid; grid-template-columns: 3.6rem 1fr; gap: 0.15rem 1rem;
  padding: 1.1rem 0; border-bottom: 1px solid var(--rule);
}
.feature .session:last-of-type { border-bottom: 0; padding-bottom: 0.6rem; }
.feature .when { display: block; line-height: 1.25; padding-top: 0.15rem; }
.feature .mon {
  display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--sect-text);
}
.feature .day { display: block; font-size: 0.78rem; color: var(--muted); }
.feature .session-title { margin: 0; font-weight: 600; font-size: 1rem; }
.feature .session-who { margin: 0; font-style: italic; color: var(--muted); font-size: 0.9rem; }
.feature .session p { margin: 0.5rem 0 0; font-size: 0.95rem; color: var(--muted); }
.feature .times { font-size: 0.9rem; font-variant-numeric: tabular-nums; margin-top: 0.3rem; }
/* The one action in this card. Orange is the only filled colour on the site
   and always means act, so the button carries the doing and the sentence
   beside it only has to carry the facts. */
.feature .joining {
  margin: 0.9rem 0 0.2rem; padding: 1rem 1.1rem; background: var(--sect-soft);
  border-radius: var(--radius-sm); font-size: 0.92rem; color: var(--ink);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1.1rem;
}
.feature .joining p { margin: 0; flex: 1 1 20rem; }
.feature .joining .btn { flex: 0 0 auto; font-size: 0.95rem; padding: 0.6em 1.25em; }
.feature .tz-note { margin: 0.9rem 0 0; font-size: 0.82rem; font-style: italic; color: var(--muted); }

/* A panel on a tinted band. The section tint and the band are close enough in
   value that the panel reads as a smudge rather than as a panel, so there it
   takes the plain card surface and a hairline instead — which is what .feature
   already does on any band. If a row with the seated figures ever lands on a
   tinted band, its halo will need the same treatment as the rule above. */
section.block.alt .rows.panels a.row,
section.block.alt .rows.panels div.row {
  background: var(--card); border-color: var(--rule);
}
section.block.alt .rows.panels a.row:hover {
  background: var(--card); border-color: var(--sect);
}

/* ---- the featured item -------------------------------------
   One thing per band may lead: a photograph, and the content
   beside it. Until an image is set the panel holds the section's
   mid tone, which is safe because nothing is read against it. */
.feature {
  display: grid; grid-template-columns: 1fr; overflow: hidden;
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius); box-shadow: var(--shadow);
  max-width: 52rem; margin-top: 1.4rem;
}
@media (min-width: 720px) { .feature { grid-template-columns: 32% 1fr; } }
.feature .panel {
  background: var(--sect); min-height: 170px;
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
}
/* interim, until a photograph is set */
.feature .panel > span { font-size: 3rem; line-height: 1; }
.feature .panel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feature .body { padding: 1.5rem 1.7rem 1.6rem; }
.feature .body h3 { font-size: 1.35rem; margin: 0 0 0.4rem; color: var(--ink); }
.feature .body p, .feature .cardline { display: block; color: var(--muted); margin: 0 0 0.8rem; }
.feature .body .more { color: var(--sect-text); font-weight: 600; font-size: 0.95rem; }


/* ---- long-form reading -------------------------------------
   The handbook is a document, not a landing page: a narrow
   measure, generous subheadings, quotes that carry the voice of
   the tradition, and tips that sit apart from the argument. */
.subsec { margin-top: 2.2rem; }
.subsec:first-of-type { margin-top: 1.2rem; }
.subsec h3 {
  font-size: 1.08rem; margin: 0 0 0.5rem;
  color: var(--sect-text);
}
.measure ul { padding-left: 1.15rem; margin: 0 0 1em; }
.measure li { margin-bottom: 0.35em; }

blockquote.quote {
  margin: 1.4rem 0; padding: 0.2rem 0 0.2rem 1.2rem;
  border-left: 3px solid var(--sect);
  font-size: 1.05rem; line-height: 1.6;
}
blockquote.quote p { margin: 0 0 0.7em; }
blockquote.quote cite {
  display: block; font-style: normal; font-size: 0.85rem;
  letter-spacing: 0.04em; color: var(--muted);
}

.tip {
  background: var(--sect-soft); border-radius: var(--radius);
  padding: 1rem 1.2rem; margin: 1.3rem 0; font-size: 0.95rem;
}
.tip p { margin: 0 0 0.6em; }
.tip p:last-child { margin: 0; }
.tip .tip-label {
  display: block; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sect-text); margin-bottom: 0.35rem;
}

/* a sample schedule: time and practice, read as a pair */
.schedule { display: grid; gap: 0.3rem; margin: 1.2rem 0; max-width: 26rem; }
.schedule div { display: grid; grid-template-columns: 3.4rem 1fr; gap: 0.8rem; padding: 0.45rem 0.9rem;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-sm); font-size: 0.95rem; }
.schedule .mins { color: var(--muted); font-variant-numeric: tabular-nums; }

/* contents block at the top of a long page */
.contents { max-width: 52rem; }
.contents .sectlabel {
  display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 0.6rem;
}

/* ---- photographs -------------------------------------------
   A photograph sits at the reading measure with the same radius
   as a card, and carries its credit beneath rather than over it. */
figure.photo { margin: 1.8rem 0; max-width: 44rem; }

/* We do not crop photographs. Every fixed ratio we tried cut people in
   half — heads off the top of a section band, bodies off the bottom of a
   letterboxed banner — and an uneven column of images is a far smaller
   price than a picture of a sangha with the sangha trimmed out of it.

   Which leaves width as the only handle on height. A banner used to run
   the full 1120px container, so an ordinary 3:2 photograph arrived 750px
   tall and pushed the page's first words off the screen. Every photograph
   now sits at one width, a little wider than the text it accompanies. */
figure.photo.banner { margin: 0 0 0.2rem; }
figure.photo.section { margin: 0 0 1.6rem; }
figure.photo img { width: 100%; border-radius: var(--radius); display: block; }
figure.photo figcaption, .credit {
  font-size: 0.85rem; color: var(--muted); margin-top: 0.55rem; font-style: italic;
  max-width: 52rem;
}
.credit { margin-bottom: 0; }

/* A banner that carries a credit line needs room under it. The banner's own
   0.2rem is right when the picture ends the block, and too tight when a caption
   does — it would sit almost on the next section's rule. */
figure.photo.banner figcaption { margin-bottom: 1rem; }

/* ---- pills and flags --------------------------------------- */
.pill {
  display: inline-block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; padding: 0.22em 0.7em; border-radius: var(--radius-pill);
  margin-left: 0.45rem; vertical-align: 0.1em;
}
.pill.todo { background: var(--unwhole-soft); color: var(--unwhole-text); }
.pill.new { background: var(--whole-soft); color: var(--whole-text); }
.pill.locked { background: var(--indigo-soft); color: var(--indigo-text); }

/* ---- forms --------------------------------------------------
   The contact page is the only form in this stylesheet so far, and
   it is built from the same tokens as everything else: the card
   surface, one hairline, and the orange focus ring that every other
   control on the site already uses. The staff pages have their own
   form styling in styles.css and are not touched by this.

   The measure is narrower than the reading measure on purpose — a
   text field the full width of a paragraph is tiring to read back. */
.form { max-width: 34rem; margin: 1.6rem 0 0.4rem; }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.35rem; }
.field input,
.field textarea {
  width: 100%; font: inherit; color: var(--ink);
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius-sm); padding: 0.6rem 0.75rem;
}
.field textarea { resize: vertical; min-height: 9rem; }
.field input:focus,
.field textarea:focus {
  outline: 2.5px solid var(--accent); outline-offset: 1px;
  border-color: var(--accent); background: var(--ground);
}
.field-note { font-size: 0.87rem; color: var(--muted); margin: 0.35rem 0 0; }

/* The field only a robot fills in. Off the side of the page rather than
   display:none or hidden, both of which a fair number of them skip. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* One line carries everything the form says back. It keeps its height when
   empty would collapse the page under the button as the message appears. */
.form-status { margin: 0 0 0.6rem; font-size: 0.95rem; min-height: 1.55rem; }
.form-status:empty { min-height: 0; margin: 0; }
.form-status.ok { color: var(--whole-text); }
.form-status.bad { color: var(--unwhole-text); }
.btn[disabled] { opacity: 0.6; cursor: default; box-shadow: none; }

/* ---- footer ------------------------------------------------
   The one inverted band on the page, and the only place fine
   print lives. */
.site-footer { background: var(--charcoal); color: var(--footer-text); padding: 2.4rem 0; margin-top: 1rem; }
.site-footer a { color: var(--footer-link); }
.site-footer .fine { font-size: 0.85rem; color: var(--footer-fine); margin: 0.5rem 0 0; max-width: 64ch; }
/* The footer carries About, Plumliners and Contact. They left the bar on
   21 Aug 2026 so it holds three destinations rather than six: the case against
   a hamburger is written for three or four links, and six wrapped the bar onto
   two lines on most laptops. Nothing else is repeated down here. */
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: 0.92rem; margin: 0 0 0.4rem; }
.site-footer nav a[aria-current] { text-decoration: underline; text-underline-offset: 0.2em; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------
   Still to do, deliberately not done here:
   - index.html loads this file after styles.css, and the staff pages
     load styles.css alone. Three selectors are still defined in both —
     html, body and a — so on the map page this file wins them.
   - No hamburger, at any width: the nav links wrap onto a second line
     below 620px. The written guide says the same.
   - plumline.html and sangha-support-centres.html are parked: still in
     the repo and still styled, but out of the navbar and noindexed.
   ------------------------------------------------------------ */