/* Prāṇāgni: "Paper, River and Lamp". One stylesheet, written for this site (DESIGN.md).
   Warm paper grounds in large colour blocks, a classical serif for every statement, square corners,
   hairline lists, photographs and a film of Kāśī. No shadows, no gradients, no translucent colour. */

/* ------------------------------------------------------------------ tokens */
:root {
  /* grounds */
  --paper: #f3eee6; --paper-2: #e8e1d3; --pear: #d3cfb0; --slate: #51647a; --umber: #2f2616;
  --dusk: #515143;   /* the sky of the Kāśī photograph, whose top rows end in exactly this colour */
  /* ink */
  --ink: #372c17; --ink-2: #5f533d; --on-dark: #f3eee6; --on-dark-2: #d2c9b6;
  /* the one accent: a maroon brown for buttons and the short line before a statement */
  --accent: #6b3325; --accent-deep: #55271c; --on-accent: #f6f1e8;
  /* lines and edges */
  --line: #bdb4a0; --line-pear: #9c9976; --line-dark: #6f634c; --line-slate: #8494a5; --edge: #7d735f;
  --error: #a3271f; --select: #d9cfb8;
  /* the lamp symbol */
  --lamp-bowl: #6b3325; --lamp-rim: #2f2616; --lamp-ember: #b4593a; --lamp-flame: #e9c46a; --lamp-core: #fff8e1;
  /* type */
  --serif: "EB Garamond", "Tiro Devanagari Sanskrit", Georgia, serif;
  --sans: "Libre Franklin", "Tiro Devanagari Sanskrit", system-ui, sans-serif;
  --deva: "Tiro Devanagari Sanskrit", serif;
  --t-display: clamp(46px, 5.1vw + 22px, 96px);
  --t-h2: clamp(34px, 2.6vw + 22px, 60px);
  --t-h3: clamp(26px, 0.9vw + 21px, 34px);
  --t-lead: clamp(22px, 0.6vw + 19px, 27px);
  --t-row: clamp(22px, 0.4vw + 20px, 26px);
  --t-body: 18px; --t-small: 16px;
  /* space: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128 */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --gut: 24px; --max: 1240px; --band: 80px; --top: 64px; --bar: 0px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
@media (min-width: 640px) { :root { --gut: 48px; --band: 104px; --top: 72px; } }
@media (min-width: 1024px) { :root { --gut: 64px; --band: 136px; } }
@media (min-width: 1280px) { :root { --gut: 80px; --band: 152px; } }
@media (max-width: 639px) { :root { --bar: 72px; } }

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--top) + var(--s-4)); scroll-padding-bottom: var(--bar); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--t-body)/1.6 var(--sans); letter-spacing: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset, legend { margin: 0; padding: 0; }
ul[role="list"], ol[role="list"] { list-style: none; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: 0; }
button { cursor: pointer; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: 0; text-wrap: balance; }
h1 { font-size: var(--t-display); line-height: 1.02; }
h2 { font-size: var(--t-h2); line-height: 1.08; }
h3 { font-size: var(--t-h3); line-height: 1.15; }
p { text-wrap: pretty; }
i[lang="sa-Latn"] { font-style: italic; }
[lang="sa"], .deva { font-family: var(--deva); }
::selection { background: var(--select); color: var(--ink); }
:focus-visible { outline: 2px solid var(--fg, var(--ink)); outline-offset: 3px; }
a, button, label, summary, select { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nowrap { white-space: nowrap; }
.skip { position: absolute; left: var(--s-3); top: var(--s-3); z-index: 60; padding: var(--s-2) var(--s-4); background: var(--accent); color: var(--on-accent); transform: translateY(-200%); }
.skip:focus { transform: none; }

.wrap { width: min(100% - 2 * var(--gut), var(--max)); margin-inline: auto; }
@supports (width: max(1px, env(safe-area-inset-left))) {
  .wrap { width: min(100% - 2 * max(var(--gut), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)), var(--max)); }
}

/* ------------------------------------------------------------------ grounds
   Each band names its ground; the ground sets the text, rule and control colours for everything inside. */
.band { position: relative; padding-block: var(--band); background-color: var(--bg); color: var(--fg); background-size: 240px 240px; }
.g-paper { --bg: var(--paper); --fg: var(--ink); --fg-2: var(--ink-2); --rule: var(--line); --lead: var(--accent); background-image: url("/assets/img/grain-paper.webp"); }
.g-pear  { --bg: var(--pear); --fg: var(--ink); --fg-2: var(--ink-2); --rule: var(--line-pear); --lead: var(--accent); background-image: url("/assets/img/grain-pear.webp"); }
.g-slate { --bg: var(--slate); --fg: var(--on-dark); --fg-2: var(--on-dark); --rule: var(--line-slate); --lead: var(--on-dark); background-image: url("/assets/img/grain-slate.webp"); }
.g-umber { --bg: var(--umber); --fg: var(--on-dark); --fg-2: var(--on-dark-2); --rule: var(--line-dark); --lead: var(--on-dark-2); background-image: url("/assets/img/grain-umber.webp"); }
.g-paper + .g-paper, .g-pear + .g-pear { padding-top: 0; }   /* two bands on one ground read as one: no doubled gap */

/* ------------------------------------------------------------------ type helpers */
.leadin { display: block; font: 400 var(--t-lead)/1.25 var(--serif); color: var(--lead); margin-bottom: var(--s-4); }
.lead { font: 400 var(--t-lead)/1.32 var(--serif); }
.muted { color: var(--fg-2); }
.small { font-size: var(--t-small); line-height: 1.5; }
.stack > * + * { margin-top: var(--s-5); }
.stack > h2 + *, .stack > h3 + * { margin-top: var(--s-6); }
.measure { max-width: 62ch; }

/* ------------------------------------------------------------------ links and buttons */
.link { color: inherit; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--rule, var(--line)); transition: text-decoration-color .2s var(--ease); }
.link:hover { text-decoration-color: currentColor; }
p > .link:only-child { display: inline-flex; align-items: center; min-height: 44px; }   /* a link standing alone is a full tap target */
p a:not([class]), dd a:not([class]), li a:not([class]) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 48px; padding: 10px var(--s-6); border: 1px solid var(--btn-edge, var(--accent)); border-radius: 0;
       background: var(--btn-bg, var(--accent)); color: var(--btn-fg, var(--on-accent)); font: 500 20px/1.15 var(--serif); text-align: center; text-decoration: none; white-space: nowrap; text-wrap: balance;
       transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .12s var(--ease); }
.btn:hover { background: var(--btn-bg-h, var(--accent-deep)); border-color: var(--btn-edge-h, var(--accent-deep)); color: var(--btn-fg-h, var(--on-accent)); }
.btn:active { transform: translateY(1px); }
.btn--line { --btn-bg: transparent; --btn-fg: var(--accent); --btn-edge: var(--accent); --btn-bg-h: var(--accent); --btn-fg-h: var(--on-accent); --btn-edge-h: var(--accent); }
/* on a dark ground or a photograph: a paper button, and its outlined partner */
.on-dark .btn, .btn--light { --btn-bg: var(--paper); --btn-fg: var(--ink); --btn-edge: var(--paper); --btn-bg-h: var(--pear); --btn-fg-h: var(--ink); --btn-edge-h: var(--pear); }
.on-dark .btn--line, .btn--light.btn--line { --btn-bg: transparent; --btn-fg: var(--on-dark); --btn-edge: var(--on-dark); --btn-bg-h: var(--paper); --btn-fg-h: var(--ink); --btn-edge-h: var(--paper); }
.btn:disabled, .btn[aria-disabled="true"] { cursor: progress; transform: none; background: var(--btn-bg, var(--accent)); border-color: var(--btn-edge, var(--accent)); color: var(--btn-fg, var(--on-accent)); }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
@media (max-width: 639px) { .btn-row { flex-direction: column; align-items: stretch; } .btn { white-space: normal; } }
@media (prefers-reduced-motion: reduce) { .btn, .link { transition: none; } .btn:active { transform: none; } }

/* ------------------------------------------------------------------ header: the name centred, the menu left, the action right */
.top { position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--top); color: var(--on-dark); --fg: var(--on-dark); transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); border-bottom: 1px solid transparent; }
.top__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 100%; width: min(100% - 2 * var(--gut), 1440px); margin-inline: auto; }
.top__menu { justify-self: start; display: inline-flex; align-items: center; gap: var(--s-3); min-height: 44px; margin-left: -8px; padding: 0 8px; border: 0; background: none; color: inherit; font: 500 var(--t-small)/1 var(--sans); }
.top__menu svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.top__name { justify-self: center; display: inline-flex; align-items: center; min-height: 44px; font: 500 28px/1 var(--serif); color: inherit; text-decoration: none; }
.top__cta { justify-self: end; min-height: 44px; padding: 8px var(--s-5); font-size: 18px; --btn-bg: var(--paper); --btn-fg: var(--ink); --btn-edge: var(--paper); --btn-bg-h: var(--pear); --btn-fg-h: var(--ink); --btn-edge-h: var(--pear); }
.top.is-solid, .subpage .top { background: var(--paper); color: var(--ink); --fg: var(--ink); border-bottom-color: var(--line); }
.top.is-solid .top__cta, .subpage .top .top__cta { --btn-bg: var(--accent); --btn-fg: var(--on-accent); --btn-edge: var(--accent); --btn-bg-h: var(--accent-deep); --btn-fg-h: var(--on-accent); --btn-edge-h: var(--accent-deep); }
@media (max-width: 639px) { .top__cta { display: none; } .top__name { font-size: 26px; } }
@media (prefers-reduced-motion: reduce) { .top { transition: none; } }

/* the full-screen menu */
.menu { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; background: var(--umber) url("/assets/img/grain-umber.webp") 0 0 / 240px 240px; color: var(--on-dark); --fg: var(--on-dark); --rule: var(--line-dark); }
.menu__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; flex: none; height: var(--top); width: min(100% - 2 * var(--gut), 1440px); margin-inline: auto; }
.menu__close { justify-self: start; display: inline-flex; align-items: center; gap: var(--s-3); min-height: 44px; margin-left: -8px; padding: 0 8px; border: 0; background: none; color: inherit; font: 500 var(--t-small)/1 var(--sans); }
.menu__close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.menu__name { justify-self: center; font: 500 28px/1 var(--serif); }
.menu__body { flex: 1; display: grid; align-content: center; gap: var(--s-8); width: min(100% - 2 * var(--gut), var(--max)); margin-inline: auto; padding-block: var(--s-7) var(--s-8); }
.menu__links { display: grid; gap: var(--s-1); }
.menu__links a { display: inline-flex; align-items: center; min-height: 52px; font: 400 clamp(30px, 3.2vw + 14px, 52px)/1.1 var(--serif); text-decoration: none; }
.menu__links a:hover, .menu__links a:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; }
.menu__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--rule); }
.menu__foot a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 1024px) { .menu__body { grid-template-columns: 7fr 5fr; align-items: end; } .menu__foot { flex-direction: column; align-items: flex-start; border-top: 0; border-left: 1px solid var(--rule); padding: 0 0 var(--s-2) var(--s-7); } }
body.menu-open { overflow: hidden; }

/* ------------------------------------------------------------------ hero: the film of Kāśī, the words centred on it */
.hero { position: relative; display: grid; align-items: center; min-height: 100svh; padding: calc(var(--top) + var(--s-6)) 0 var(--s-8); background: var(--umber); color: var(--on-dark); --fg: var(--on-dark); text-align: center; overflow: clip; }
.hero__media, .hero__media > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__media > * { object-fit: cover; object-position: 50% 50%; }
.hero__video { opacity: 0; transition: opacity .8s linear; }
.hero__video.is-playing { opacity: 1; }
.hero__inner { position: relative; display: grid; justify-items: center; gap: var(--s-5); }
.hero h1 > span { display: block; }
.hero__lead { max-width: 34ch; font: 400 var(--t-lead)/1.3 var(--serif); }
.hero__lead + .hero__lead { margin-top: calc(-1 * var(--s-3)); }
.hero .btn-row { justify-content: center; margin-top: var(--s-4); }
.hero__by { font-size: var(--t-small); }
.hero__pause { position: absolute; right: max(var(--gut), env(safe-area-inset-right, 0px)); bottom: var(--s-5); display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--on-dark); background: none; color: var(--on-dark); }
.hero__pause svg { width: 14px; height: 14px; fill: currentColor; }
.hero__pause:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.hero__pause [data-icon="play"], .hero__pause[data-paused="true"] [data-icon="pause"] { display: none; }
.hero__pause[data-paused="true"] [data-icon="play"] { display: block; }
@media (max-width: 639px) { .hero { padding-bottom: var(--s-9); } .hero .btn-row { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .hero__video { transition: none; } }

/* ------------------------------------------------------------------ photographs: square corners; a few stand in an arch */
.photo { position: relative; overflow: hidden; background: var(--paper-2); aspect-ratio: var(--ratio, 3 / 2); }
.photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.photo--tall { --ratio: 3 / 4; }
.photo--arch { --ratio: 3 / 4; border-radius: 50% 50% 0 0 / 37.5% 37.5% 0 0; }

/* ------------------------------------------------------------------ the idea: a centred statement, then the bell and the reading */
.statement { text-align: center; }
.statement h2 { max-width: 18ch; margin-inline: auto; }
.idea__body { display: grid; gap: var(--s-7); margin-top: var(--s-8); }
@media (min-width: 1024px) {
  .idea__body { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-6); align-items: center; margin-top: var(--s-9); }
  .idea__body > .photo { grid-column: 2 / span 4; }
  .idea__body > .stack { grid-column: 7 / span 5; }
}
@media (max-width: 1023px) { .idea__body > .photo { width: min(100%, 420px); margin-inline: auto; } }

/* ------------------------------------------------------------------ two-column bands */
.split { display: grid; gap: var(--s-7); }
@media (min-width: 1024px) {
  .split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-6); align-items: center; }
  .split > .split__text { grid-column: 1 / span 6; }
  .split > .split__media { grid-column: 8 / span 5; }
  .split--flip > .split__media { grid-column: 1 / span 6; grid-row: 1; }
  .split--flip > .split__text { grid-column: 8 / span 5; grid-row: 1; }
  .split--top { align-items: start; }
}
@media (min-width: 640px) and (max-width: 1023px) { .split > .split__media .photo--tall, .split > .split__media .photo--arch { width: min(100%, 460px); } }

/* ------------------------------------------------------------------ Kāśī: the words over the open sky of the photograph */
.kashi { position: relative; background: var(--dusk); color: var(--on-dark); --fg: var(--on-dark); --fg-2: var(--on-dark); --rule: var(--line-slate); --lead: var(--on-dark); }
.kashi__bg { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 8% 100%; }
@media (min-width: 640px) { .kashi__bg { aspect-ratio: 16 / 9; } }
.kashi__inner { padding-block: var(--s-7) var(--band); }
@media (min-width: 1024px) {
  /* the photograph lies along the foot of the section at its own shape; its sky is the section's ground, so the
     words can run as long as they need above the ghāṭs and never over them */
  .kashi__bg { position: absolute; inset: auto 0 0 0; height: auto; }
  .kashi__inner { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-6); padding-block: var(--band) 23vw; }
  .kashi__inner > .stack { grid-column: 7 / span 6; }
}

/* ------------------------------------------------------------------ hairline rows */
.rows { border-top: 1px solid var(--rule); }
.rows > li { display: grid; gap: var(--s-2) var(--s-5); padding-block: var(--s-5); border-bottom: 1px solid var(--rule); }
.rows__name { font: 400 var(--t-row)/1.2 var(--serif); }
.rows__value { font: 400 var(--t-row)/1.2 var(--serif); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 640px) {
  .rows > li { grid-template-columns: 13rem minmax(0, 1fr); align-items: baseline; }
  .rows--valued > li { grid-template-columns: 9rem minmax(0, 1fr) auto; }
}
@media (max-width: 639px) { .rows--valued > li { grid-template-columns: 1fr auto; } .rows--valued > li > p { grid-column: 1 / -1; grid-row: 2; } }

/* ------------------------------------------------------------------ the work */
.work { display: grid; gap: var(--s-7); }
.work__head > p { margin-top: var(--s-6); }
.work__rows { margin-top: var(--s-7); }
@media (min-width: 1024px) {
  .work { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-6); align-items: start; }
  .work > .work__main { grid-column: 1 / span 7; }
  .work > .work__side { grid-column: 9 / span 4; position: sticky; top: calc(var(--top) + var(--s-6)); }
}
.work__side > .lead { margin-top: var(--s-5); }

/* ------------------------------------------------------------------ the eleven temples: one lamp for each */
.temples__head { display: grid; justify-items: center; gap: var(--s-5); text-align: center; }
.temples__head > p { max-width: 62ch; }
.lamps-key { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-6); font-size: var(--t-small); color: var(--fg-2); }
.lamps-key li { display: inline-flex; align-items: flex-end; gap: var(--s-2); }
.lamps-key__mark { width: 26px; height: 36px; flex: none; }
.lamps-figure { margin-top: var(--s-7); }
.lamps { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: var(--s-6) var(--s-2); }
.lamp { display: grid; justify-items: center; gap: var(--s-2); text-align: center; }
.lamp__mark { width: 56px; height: 78px; }
.lamp__no { font: 400 20px/1.2 var(--serif); overflow-wrap: anywhere; text-wrap: balance; }
@media (max-width: 1023px) { .lamps { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 639px) { .lamps { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lamp__mark { width: 40px; height: 56px; } }
.temple-details:empty { display: none; }
.temple-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); margin-top: var(--s-8); }
@media (max-width: 639px) { .temple-details { grid-template-columns: 1fr; } }
.temple-card { display: grid; gap: var(--s-3); padding: var(--s-5); background: var(--paper-2); scroll-margin-top: calc(var(--top) + var(--s-6)); }
.temple-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.temple-card dl { display: grid; grid-template-columns: auto 1fr; gap: var(--s-1) var(--s-4); font-size: var(--t-small); }
.temple-card dt { color: var(--ink-2); }
.beyond { display: grid; gap: var(--s-5); margin-top: var(--s-9); padding-top: var(--s-7); border-top: 1px solid var(--rule); scroll-margin-top: calc(var(--top) + var(--s-5)); }
@media (min-width: 1024px) { .beyond { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-6); } .beyond > h3 { grid-column: 1 / span 5; } .beyond > .stack { grid-column: 7 / span 6; } }

/* ------------------------------------------------------------------ the share: a paper card on the dark ground */
.card { background: var(--paper) url("/assets/img/grain-paper.webp") 0 0 / 240px 240px; color: var(--ink); --fg: var(--ink); --fg-2: var(--ink-2); --rule: var(--line); --lead: var(--accent);
        --btn-bg: var(--accent); --btn-fg: var(--on-accent); --btn-edge: var(--accent); --btn-bg-h: var(--accent-deep); --btn-fg-h: var(--on-accent); --btn-edge-h: var(--accent-deep);
        padding: var(--s-6) var(--s-5); }
@media (min-width: 640px) { .card { padding: var(--s-8) var(--s-7); } }
.share { display: grid; gap: var(--s-7); }
@media (min-width: 1024px) {
  .share { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-6); align-items: center; }
  .share > .share__media { grid-column: 1 / span 4; }
  .share > .card { grid-column: 6 / span 7; }
}
@media (max-width: 1023px) { .share > .share__media { order: 2; } .share > .share__media .photo { width: min(100%, 420px); margin-inline: auto; } }
.share-figure { margin-top: var(--s-4); font: 400 var(--t-h3)/1.15 var(--serif); }
.share-figure__inr { color: var(--fg-2); }
.card > .rows { margin-top: var(--s-6); }
.share-receive { margin-top: var(--s-6); }
.share-receive > p { margin-top: var(--s-3); }
.card > .btn-row { margin-top: var(--s-6); }
.share-later { margin-top: var(--s-4); font-size: var(--t-small); }
.share-trust { margin-top: var(--s-5); font-size: var(--t-small); color: var(--fg-2); }

/* ------------------------------------------------------------------ the meeting: details and questions beside the form */
.meeting { display: grid; gap: var(--s-7); }
@media (min-width: 1024px) {
  .meeting { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-6); grid-template-rows: auto 1fr; align-items: start; }
  .meeting > .meeting__intro { grid-column: 1 / span 5; }
  .meeting > .meeting__form { grid-column: 7 / span 6; grid-row: 1 / span 2; }
  .meeting > .meeting__faq { grid-column: 1 / span 5; grid-row: 2; }
}
.details { margin-top: var(--s-6); border-top: 1px solid var(--rule); }
.details > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--s-4); padding-block: var(--s-4); border-bottom: 1px solid var(--rule); }
.details dt { color: var(--fg-2); }
.zones { display: grid; font-variant-numeric: tabular-nums; }
.faq { margin-top: var(--s-5); border-top: 1px solid var(--rule); }
.faq > div { display: grid; gap: var(--s-2); padding-block: var(--s-5); border-bottom: 1px solid var(--rule); }
.faq dt { font: 400 var(--t-row)/1.2 var(--serif); }

.form-panel { padding: var(--s-5); background: var(--paper-2); }
@media (min-width: 640px) { .form-panel { padding: var(--s-7); } }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-4); }
.form > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 640px) { .form > .field:not(.field--full) { grid-column: span 1; } }
.field { display: grid; gap: var(--s-2); align-content: start; font-size: var(--t-small); }
.field label, .choices legend { font-weight: 500; }
.field :is(input, select, textarea) { width: 100%; min-height: 48px; padding: 10px var(--s-3); border: 1px solid var(--edge); border-radius: 0; background: var(--paper); font-size: var(--t-body); line-height: 1.4; appearance: none; -webkit-appearance: none; }
.field select { padding-right: var(--s-7); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23372c17' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--s-4) center; background-size: 12px 12px; }
.field textarea { min-height: 96px; resize: vertical; }
.field :is(input, select, textarea):hover { border-color: var(--ink); }
.field :is(input, select, textarea):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.field :is(input, select, textarea)[aria-invalid="true"], .choices[aria-invalid="true"] .choice span { border-color: var(--error); }
.field__hint { color: var(--ink-2); }
.field__error { font-size: var(--t-small); font-weight: 500; color: var(--error); }
.choices { display: flex; flex-wrap: wrap; gap: var(--s-2); border: 0; }
.choices legend { width: 100%; margin-bottom: var(--s-2); }
.choices .field__error { flex-basis: 100%; }
.choice { position: relative; display: inline-grid; }
.choice input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.choice span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-4); border: 1px solid var(--edge); background: var(--paper); font-weight: 500; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.choice:hover span { border-color: var(--ink); }
.choice input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.choice input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.check { display: grid; grid-template-columns: 22px 1fr; gap: var(--s-3); align-items: start; padding-block: 10px; font-size: var(--t-small); line-height: 1.5; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--accent); }
.check + .field__error { margin-top: calc(-1 * var(--s-3)); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__error:empty { display: none; }
.form__error { font-size: var(--t-small); font-weight: 500; color: var(--error); }
.form__error a { color: inherit; }
.form__note { font-size: var(--t-small); color: var(--ink-2); }
.thanks { display: grid; justify-items: start; gap: var(--s-5); outline: none; }
.thanks__lamp { width: 48px; height: 68px; }
main :is(a[href], button, input, select, textarea), footer :is(a[href], button) { scroll-margin-top: calc(var(--top) + var(--s-4)); }
main .field :is(input, select, textarea) { scroll-margin-top: calc(var(--top) + var(--s-8)); }

/* ------------------------------------------------------------------ the close: three lamps in the dark, the words beside them */
.close { position: relative; background: #050302; color: var(--on-dark); --fg: var(--on-dark); --fg-2: var(--on-dark-2); }
.close__bg { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 50%; }
.close__inner { padding-block: var(--band) var(--s-7); }
.close__inner .lead { margin-top: var(--s-5); color: var(--on-dark-2); }
.close__inner .btn-row { margin-top: var(--s-6); }
@media (min-width: 1024px) {
  .close { display: grid; min-height: min(86svh, 820px); }
  .close__bg { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .close__inner { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-6); align-items: center; padding-block: var(--band); }
  .close__inner > div { grid-column: 8 / span 5; }   /* the lamps hold the left half of the photograph */
}
@media (max-width: 1023px) { .close { display: flex; flex-direction: column; } .close__inner { order: 1; } .close__bg { order: 2; } }

/* ------------------------------------------------------------------ footer */
.foot { padding-block: var(--s-9) calc(var(--s-6) + var(--bar)); }
.foot__grid { display: grid; gap: var(--s-7); }
.foot__big { display: grid; gap: var(--s-1); align-content: start; }
.foot__big a { display: inline-flex; align-items: center; min-height: 48px; font: 400 clamp(26px, 1.2vw + 20px, 36px)/1.15 var(--serif); text-decoration: none; }
.foot__big a:hover, .foot__col a:hover, .foot__legal a:hover, .share-links :is(a, button):hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.foot__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
.foot__col :is(h2, h3) { font: 500 var(--t-small)/1.4 var(--sans); color: var(--fg-2); margin-bottom: var(--s-2); }
.foot__col ul { display: grid; }
.foot__col a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-small); line-height: 1.35; text-decoration: none; overflow-wrap: anywhere; }
@media (min-width: 1024px) {
  .foot__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-6); }
  .foot__big { grid-column: 1 / span 5; }
  .foot__cols { grid-column: 7 / span 6; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.foot__sign { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--rule); display: grid; gap: var(--s-5); font-size: var(--t-small); line-height: 1.6; }
.foot__name { display: inline-flex; align-items: center; min-height: 44px; font: 500 28px/1 var(--serif); text-decoration: none; }
.foot__legal { color: var(--fg-2); }
.foot__legal a, .share-links :is(a, button) { position: relative; color: var(--fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.foot__legal a::after, .share-links :is(a, button)::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%); }
.share-links { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); }
.share-links button { border: 0; padding: 0; background: none; }
@media (min-width: 1024px) { .foot__sign { grid-template-columns: 1fr auto; align-items: end; } }

/* ------------------------------------------------------------------ phones: the two actions stay within reach */
.actionbar { display: none; }
@media (max-width: 639px) {
  .actionbar { position: fixed; inset: auto 0 0 0; z-index: 30; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); height: var(--bar); padding: var(--s-3) max(var(--s-4), env(safe-area-inset-left, 0px)); padding-bottom: max(var(--s-3), env(safe-area-inset-bottom, 0px));
               background: var(--paper); border-top: 1px solid var(--line); transition: transform .3s var(--ease), visibility 0s; }
  .actionbar .btn { min-height: 48px; padding-inline: var(--s-3); font-size: 18px; white-space: nowrap; }
  body.bar-off .actionbar { transform: translateY(100%); visibility: hidden; transition: transform .3s var(--ease), visibility 0s .3s; }
}
@media (max-width: 639px) and (prefers-reduced-motion: reduce) { .actionbar, body.bar-off .actionbar { transition: none; } }

/* ------------------------------------------------------------------ sub-pages: long reading on paper */
.doc { padding-top: calc(var(--top) + var(--s-9)); min-height: 70svh; }
.doc > .wrap { width: min(100% - 2 * var(--gut), 46rem); }   /* one reading column, centred on the page */
.doc__head { display: grid; gap: var(--s-5); margin-bottom: var(--s-8); }
.doc__head h1 { font-size: var(--t-h2); max-width: 20ch; }
.doc__body { display: grid; gap: var(--s-5); max-width: 36em; font-size: 20px; line-height: 1.65; }
.doc__part { display: grid; gap: var(--s-5); }
.doc__part + .doc__part { margin-top: var(--s-7); }
.doc__body h2 { font-size: var(--t-h3); margin-top: var(--s-3); }
.doc__body h3 { font: 400 var(--t-row)/1.2 var(--serif); margin-top: var(--s-2); }
.doc__body :is(h2, h3) + p { margin-top: calc(-1 * var(--s-3)); }
.doc__runin { display: block; font: 400 var(--t-row)/1.25 var(--serif); }
.doc__body ol { display: grid; gap: var(--s-4); padding-left: 0; list-style: none; }
.doc__body a[href*="creativecommons"], .doc__body a[href*="pexels.com/license"] { white-space: nowrap; }
.doc__end { margin-top: var(--s-8); }
.doc__head:has(+ .doc__end) { margin-bottom: 0; }
.doc__head + .doc__end { margin-top: var(--s-6); }
.doc .rows.doc__body { gap: 0; max-width: 46em; font-size: var(--t-body); line-height: 1.6; }
.doc .rows .rows__name a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (max-width: 639px) { .doc__body { font-size: 19px; } .doc__end { align-items: flex-start; } }