/* ---------------------------------------------------------------
   Young Political Workers — Ghost theme
   Idiom: the printed pamphlet cover. Ink on khadi-coloured stock,
   hard rules, no radii, one red. Display face is a bold serif
   (Georgia stack) — the face of Indian left-print booklets — set
   against a system sans body and a mono utility face for labels
   and addresses.

   Lifted from site/index.template.html, which was constrained to
   system fonts because published artifacts block every external
   request. That constraint is gone here: this file is served off
   the same box as the page. See the @font-face block below.
   --------------------------------------------------------------- */

/* ---- real typography -------------------------------------------

   Two routes to a proper face, and the first needs no code at all.

   1. Ghost Admin → Design → Brand → Typography. Ghost ships a curated
      set of webfonts and serves them off this same box — no external
      request, so the constraint that forced Georgia in the artifact
      does not apply. Ghost injects the choice through {{ghost_head}}
      as --gh-font-heading / --gh-font-body, which the two custom
      properties below consume. Staff pick a font; nothing here
      changes.

   2. A specific licensed face Ghost does not offer: drop the .woff2
      into assets/fonts/, add an @font-face here, and put its family
      at the front of the fallback list inside --display.

   Either way the Georgia stack stays as the safety net behind it.
   ---------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  --paper:        #f0ebe0;
  --paper-raised: #fbf8f1;
  --ink:          #16130f;
  --ink-soft:     #574e43;
  --line:         #c4b8a5;
  --line-soft:    #ddd3c2;
  --red:          #b81d24;
  --red-wash:     rgba(184, 29, 36, 0.07);
  --focus:        #9a5c06;
  --footer-bg:    #16130f;
  --footer-fg:    #f0ebe0;
  --logo-filter:  none;
  --img-frame:    #16130f;

  --max: 51.25rem;   /* 820px */

  --display: var(--gh-font-heading, Georgia), "Iowan Old Style", Charter,
             "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
  --body: var(--gh-font-body, system-ui), -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
          "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:        #14120f;
    --paper-raised: #1e1a15;
    --ink:          #f0ebe0;
    --ink-soft:     #a89d8e;
    --line:         #3a342c;
    --line-soft:    #302a23;
    --red:          #e8565d;
    --red-wash:     rgba(232, 86, 93, 0.10);
    --focus:        #f4c257;
    --footer-bg:    #1e1a15;
    --footer-fg:    #f0ebe0;
    /* The mark is dark ink on transparent; on a dark ground it would
       vanish, so flatten it to a light silhouette. */
    --logo-filter:  brightness(0) invert(1);
    --img-frame:    #3a342c;
  }
}

/* ---- reset + shell --------------------------------------------- */

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

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

body.ypw {
  min-height: 100vh;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
}

.ypw h1, .ypw h2, .ypw h3, .ypw p, .ypw ul, .ypw li {
  margin: 0;
  padding: 0;
}
.ypw ul { list-style: none; }
.ypw img, .ypw iframe, .ypw svg { max-width: 100%; }
.ypw img { display: block; }

.ypw h1, .ypw h2, .ypw h3 {
  font-family: var(--display);
  font-weight: 700;
  text-wrap: balance;
}

.ypw a {
  color: inherit;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

.ypw a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.wrap {
  width: min(100% - 2.5rem, var(--max));
  margin-inline: auto;
}

.rule-top {
  height: 0.5rem;
  background: var(--red);
}

/* ---- masthead --------------------------------------------------- */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
}

.brand img {
  width: 2.5rem;
  height: 2.5rem;
  filter: var(--logo-filter);
}

.mark,
.label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.mark { font-weight: 700; }

/* Ghost's navigation, rendered from Settings → Navigation. Empty by
   default, which is fine — the masthead just holds the brand. */
.masthead-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
}

.masthead-nav a {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.masthead-nav a:hover { color: var(--red); border-bottom-color: var(--red); }

/* ---- hero ------------------------------------------------------- */

.hero { padding-block: clamp(2.5rem, 8vw, 4.25rem) clamp(1.75rem, 5vw, 2.5rem); }

.hero .label { color: var(--red); display: block; margin-bottom: 1.5rem; }

/* The lockup: three stacked words, tightly leaded, like a cover. */
.lockup {
  font-size: clamp(2.6rem, 12.5vw, 4.75rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: initial;
}

.lockup span { display: block; }
.lockup span:last-child { color: var(--red); }

/* Scoped past the `.ypw p { margin: 0 }` reset, which is more specific than
   a bare class and would otherwise silently zero this. */
.ypw .statement {
  max-width: 34ch;
  margin-top: 2.75rem;
  font-size: clamp(1.05rem, 2.6vw, 1.2rem);
  line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* A heavy ink rule above and below makes an image a printed plate rather
   than a floating photograph. */
.plate {
  margin: clamp(1.75rem, 5vw, 2.5rem) 0 0;
  border-block: 2px solid var(--img-frame);
}

/* height:auto is load-bearing — the width/height attributes are there to
   reserve space before decode, and without it the attribute height wins
   over the fluid width and the image stretches. */
.plate img { width: 100%; height: auto; }

.plate figcaption {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-block: 0.6rem;
  border-top: 1px solid var(--line);
}

/* Full-bleed variant. 100vw would add a horizontal scrollbar on any page with
   a vertical one, because 100vw includes the scrollbar's width; the negative
   margin trick sidesteps that by staying inside the layout box. */
.plate--bleed {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  border-block-width: 3px;
}

.plate--bleed img {
  max-height: 68vh;
  object-fit: cover;
  object-position: center 32%;
}

.plate--bleed figcaption { border-top: 0; }

/* ---- scroll reveals ---------------------------------------------

   .reveal-armed is set on <html> by reveal.js only once it knows it can
   reverse the effect. Without JS the selector never matches, nothing is
   ever hidden, and the page reads normally — the failure mode is "no
   animation", never "no content".
   ------------------------------------------------------------------ */

.reveal-armed .reveal {
  opacity: 0;
  transform: translateY(1.25rem);
}

.reveal-armed .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 620ms cubic-bezier(.22,.61,.36,1),
              transform 620ms cubic-bezier(.22,.61,.36,1);
}

/* Wall images: opacity only, no transform — the tile already uses transform
   for its hover scale, and two rules animating the same property fight.
   Stagger comes from --i, set inline by the template. */
.reveal-armed .wall-item img.reveal { opacity: 0; transform: none; }

.reveal-armed .wall-item img.reveal.is-in {
  opacity: 1;
  transition: opacity 520ms ease, transform 420ms cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--i, 0) * 60ms), 0ms;
}

/* ---- poster wall -------------------------------------------------- */

/* No bottom padding: the ink band supplies its own top margin, and having
   both left a dead paper gap between the wall and the band. */
.wall-section { padding-block: clamp(2.5rem, 7vw, 4rem) 0; }

.wall {
  display: grid;
  /* auto-fit, not auto-fill: with only two or three posters tagged, empty
     tracks would leave the wall visibly lopsided. auto-fit collapses them so
     a small archive reads as large tiles rather than as a broken grid. */
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1px;
  /* A 1px gap over an ink ground gives hairline rules between tiles without
     any borders, so no doubled lines where tiles meet. */
  background: var(--img-frame);
  border-block: 2px solid var(--img-frame);
}

.wall-item {
  position: relative;
  display: block;
  background: var(--paper);
  text-decoration: none;
  overflow: hidden;
}

.wall-item img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* Anchor to the top. Event posters put the title in the upper third, and
     centre-cropping a tall poster into a 4:5 tile decapitates it. */
  object-position: center top;
  filter: saturate(0.95);
  transition: transform 420ms cubic-bezier(.22,.61,.36,1), filter 420ms ease;
}

.wall-item:hover img,
.wall-item:focus-visible img {
  transform: scale(1.03);
  filter: saturate(1.1);
}

.wall-caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: grid;
  gap: 0.15rem;
  padding: 2.5rem 0.85rem 0.75rem;
  color: #f0ebe0;
  /* Scrim rather than a solid bar: the art stays visible behind the text. */
  background: linear-gradient(to top, rgba(10,8,6,0.88), rgba(10,8,6,0));
  opacity: 0;
  transition: opacity 240ms ease;
}

.wall-item:hover .wall-caption,
.wall-item:focus-visible .wall-caption { opacity: 1; }

/* Touch devices have no hover, so the caption would never appear. */
@media (hover: none) {
  .wall-caption { opacity: 1; }
}

.wall-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
}

.wall-date {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
}

/* ---- the ink band (events + registration) ------------------------- */

.band {
  margin-block: clamp(2.5rem, 7vw, 4rem);
  padding-block: clamp(2.5rem, 7vw, 4rem);
  background: var(--footer-bg);
  color: #f0ebe0;
  border-block: 0.4375rem solid var(--red);
  /* Full bleed without a 100vw scrollbar. */
  box-shadow: 0 0 0 100vmax var(--footer-bg);
  clip-path: inset(0 -100vmax);
}

.band-inner {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: start;
}

.band-head { grid-column: 2; }
.band-head .label { display: block; color: var(--red); margin-bottom: 0.6rem; }

.band-head h2 {
  font-size: clamp(1.6rem, 4.2vw, 2.1rem);
  line-height: 1.15;
}

.band-head p {
  max-width: 52ch;
  margin-top: 0.7rem;
  font-size: 0.95rem;
  opacity: 0.8;
  text-wrap: pretty;
}

.band-poster {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin: 0;
  border: 1px solid rgba(240, 235, 224, 0.25);
}

.band-poster img { width: 100%; height: auto; }

.band-form { grid-column: 2; }
.band-form .label { display: block; color: var(--red); margin-bottom: 0.6rem; }

/* The form sits on paper even though the band is ink — Baserow's own UI is
   light, so a paper card is the only way the embed does not clash. */
.band-form .slot {
  margin-top: 0;
  background-color: var(--paper);
  border-color: rgba(240, 235, 224, 0.25);
}

.band-form .slot .label,
.band-form .slot p { color: var(--ink-soft); }

@media (max-width: 46rem) {
  .band-inner { grid-template-columns: minmax(0, 1fr); }
  .band-head, .band-form { grid-column: 1; }
  .band-poster { grid-column: 1; grid-row: auto; max-width: 13rem; }
}

/* ---- section furniture ------------------------------------------ */

.section { padding-block: clamp(2.25rem, 6vw, 3.25rem); }

.section-head { margin-bottom: 2rem; }
.section-head .label { color: var(--red); display: block; margin-bottom: 0.6rem; }
.section-head .label a { color: inherit; }

.section-head h1,
.section-head h2 {
  font-size: clamp(1.5rem, 4vw, 1.95rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* A post title carries more weight than a section heading. */
.post-template .section-head h1,
.page-template .section-head h1 {
  font-size: clamp(1.9rem, 5.5vw, 2.6rem);
}

.section-head p {
  max-width: 56ch;
  margin-top: 0.65rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
  text-wrap: pretty;
}

/* ---- the struck-rule index -------------------------------------- */

.index { border-top: 2px solid var(--ink); }

.index li {
  position: relative;
  border-bottom: 1px solid var(--line);
}

.index li:last-child { border-bottom: 2px solid var(--ink); }

.index a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.35rem 1.25rem;
  padding: 1.25rem 0;
  text-decoration: none;
  transition: padding-left 140ms ease, background-color 140ms ease;
}

/* The struck rule: a red marker grows at the left edge on approach. */
.index a::before {
  content: "";
  position: absolute;
  left: 0;
  width: 0;
  height: 100%;
  background: var(--red);
  transition: width 140ms ease;
}

.index a:hover,
.index a:focus-visible {
  padding-left: 1rem;
  background: var(--red-wash);
}

.index a:hover::before,
.index a:focus-visible::before { width: 0.25rem; }

.index a:focus-visible { outline-offset: -3px; }

.index-thumb {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 4.5rem;
  height: 4.5rem;
  object-fit: cover;
  border: 1px solid var(--img-frame);
  filter: saturate(0.92);
  transition: filter 140ms ease;
}

/* A post with no feature image still occupies the column, so titles stay
   aligned down the list instead of jumping left. */
.index-thumb--empty {
  display: block;
  background-image: repeating-linear-gradient(
    -45deg, var(--line-soft) 0 1px, transparent 1px 9px);
}

.index a:hover .index-thumb { filter: saturate(1.08); }

.index-title {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.15rem, 3.2vw, 1.4rem);
  line-height: 1.2;
  letter-spacing: -0.005em;
}

.index a:hover .index-title { color: var(--red); }

.index-note {
  grid-column: 2;
  grid-row: 2;
  max-width: 52ch;
  margin-top: 0.25rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.index-where {
  grid-column: 3;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  white-space: nowrap;
}

.index a:hover .index-where { color: var(--red); }

.index-where svg {
  flex: 0 0 auto;
  width: 0.6rem;
  height: 0.6rem;
  transition: transform 140ms ease;
}

.index a:hover .index-where svg,
.index a:focus-visible .index-where svg {
  transform: translate(1px, -1px);
}

/* ---- events / registration notice ------------------------------- */

.notice {
  position: relative;
  border: 1px solid var(--ink);
  border-top: 0.4375rem solid var(--ink);
  background: var(--paper-raised);
  box-shadow: 0.5rem 0.5rem 0 var(--line-soft);
  padding: clamp(1.25rem, 4vw, 2rem);
}

.notice > .label {
  display: block;
  color: var(--red);
  margin-bottom: 0.75rem;
}

.notice h2 {
  font-size: clamp(1.4rem, 3.6vw, 1.75rem);
  line-height: 1.2;
}

.notice-body {
  display: grid;
  grid-template-columns: 11.5rem minmax(0, 1fr);
  gap: clamp(1.25rem, 4vw, 2rem);
  align-items: start;
  margin-top: 1.25rem;
}

.poster { border: 1px solid var(--img-frame); }
.poster img { width: 100%; height: auto; }

.poster figcaption {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0.5rem 0.6rem;
  border-top: 1px solid var(--line);
}

.notice-body > p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  text-wrap: pretty;
}

/* The reserved area: a paste-up box on a layout board, hatched so it
   reads as deliberately held open rather than unfinished. */
.slot {
  display: grid;
  place-items: center;
  gap: 0.5rem;
  min-height: 11rem;
  margin-top: 1.25rem;
  padding: 2rem 1.25rem;
  border: 1px solid var(--line);
  text-align: center;
  background-color: transparent;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--line-soft) 0 1px,
    transparent 1px 9px
  );
}

/* Once a real form is embedded, drop the holding pattern and let the
   iframe fill the box. Driven by @custom.registration_form_url. */
.slot.is-filled {
  display: block;
  min-height: 0;
  padding: 0;
  background-image: none;
}

.slot.is-filled iframe {
  display: block;
  width: 100%;
  border: 0;
}

.slot .label { color: var(--ink-soft); }

.slot p:last-child {
  max-width: 34ch;
  color: var(--ink-soft);
  font-size: 0.9rem;
  text-wrap: pretty;
}

/* ---- forms ------------------------------------------------------

   Written for the adder on page-sum.hbs, but deliberately generic: the
   event registration form will want exactly these controls, so they are
   named for what they are rather than for that one page.
   ------------------------------------------------------------------ */

.ypw-form { margin-top: 1.5rem; }

.form-rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1rem;
}

.form-field { display: block; }

.form-field .label {
  display: block;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}

.ypw-form input[type="number"],
.ypw-form input[type="text"],
.ypw-form input[type="email"],
.ypw-form textarea {
  width: 100%;
  padding: 0.6rem 0.7rem;
  font-family: var(--mono);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 0;          /* hard corners — no radii anywhere in this design */
  appearance: none;
}

.ypw-form input:focus-visible,
.ypw-form textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.btn {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.7rem 1.1rem;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}

.btn:hover { background: var(--ink); color: var(--paper); }

.btn-primary {
  color: var(--paper);
  background: var(--red);
  border-color: var(--red);
}

.btn-primary:hover { background: var(--ink); border-color: var(--ink); }

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

/* The answer panel: an ink rule above it so it reads as a printed result
   rather than another field. */
.result {
  display: block;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 2px solid var(--ink);
}

.result .label { display: block; color: var(--red); margin-bottom: 0.4rem; }

.result-value {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.2rem, 8vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.result-note {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

/* ---- post body -------------------------------------------------- */

.post-content {
  margin-top: clamp(1.75rem, 5vw, 2.5rem);
  font-size: 1.06rem;
  line-height: 1.7;
}

.post-content > * + * { margin-top: 1.4em; }

.post-content h2,
.post-content h3 {
  margin-top: 2em;
  line-height: 1.25;
}

.post-content h2 { font-size: 1.5rem; }
.post-content h3 { font-size: 1.2rem; }

.post-content a { color: var(--red); }

.post-content ul,
.post-content ol {
  padding-left: 1.4em;
}

.post-content ul { list-style: disc; }
.post-content ol { list-style: decimal; }
.post-content li + li { margin-top: 0.5em; }

.post-content blockquote {
  margin-inline: 0;
  padding-left: 1.25rem;
  border-left: 0.25rem solid var(--red);
  color: var(--ink-soft);
  font-style: italic;
}

.post-content hr {
  border: 0;
  border-top: 2px solid var(--ink);
}

.post-content code,
.post-content pre {
  font-family: var(--mono);
  font-size: 0.88em;
}

.post-content pre {
  padding: 1rem 1.25rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  background: var(--paper-raised);
}

/* Ghost's editor emits Koenig cards. These are the ones that need the
   surrounding prose measure broken. */
.post-content figure { margin-inline: 0; }
.post-content img { width: 100%; height: auto; border: 1px solid var(--img-frame); }

.post-content figcaption {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 0.5rem;
  text-align: center;
}

.post-content .kg-width-wide  { width: min(100vw - 2.5rem, 64rem); margin-inline: calc(50% - min(50vw - 1.25rem, 32rem)); }
.post-content .kg-width-full  { width: 100vw; margin-inline: calc(50% - 50vw); }
.post-content .kg-width-full img { border-inline: 0; }

.post-content .kg-gallery-row { display: flex; gap: 0.75rem; }
.post-content .kg-gallery-image { flex: 1 1 0; }

.post-content .kg-callout-card {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--ink);
  background: var(--paper-raised);
}

.post-content .kg-bookmark-card a {
  display: block;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}

.post-content .kg-bookmark-title { font-family: var(--display); font-weight: 700; }
.post-content .kg-bookmark-description { color: var(--ink-soft); font-size: 0.9rem; }

/* ---- previous / next -------------------------------------------- */

.post-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  margin-top: clamp(2.5rem, 7vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 2px solid var(--ink);
}

.post-nav a {
  max-width: 22ch;
  font-family: var(--display);
  font-weight: 700;
  text-decoration: none;
}

.post-nav a:hover { color: var(--red); }
.post-nav .label { display: block; color: var(--ink-soft); margin-bottom: 0.3rem; }
.post-nav-next { text-align: right; margin-left: auto; }

/* ---- pagination -------------------------------------------------- */

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
}

.pagination-link {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.pagination-link:hover { color: var(--red); border-bottom-color: var(--red); }
.pagination-link.is-disabled { opacity: 0.35; border-bottom-color: transparent; }
.pagination-count { color: var(--ink-soft); }

/* ---- footer ------------------------------------------------------ */

.site-footer {
  margin-top: clamp(3rem, 8vw, 5rem);
  border-top: 0.4375rem solid var(--red);
  background: var(--footer-bg);
  color: var(--footer-fg);
  /* Full bleed without letting the page scroll sideways. */
  box-shadow: 0 0 0 100vmax var(--footer-bg);
  clip-path: inset(0 -100vmax);
}

.site-footer .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  padding-block: 1.75rem;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}

.footer-brand img {
  width: 2.25rem;
  height: 2.25rem;
  /* The footer band is ink in both themes, so the mark is always light. */
  filter: brightness(0) invert(1);
}

.site-footer p {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.site-footer .colophon {
  text-transform: none;
  letter-spacing: 0.02em;
  opacity: 0.72;
}

.site-footer a {
  color: inherit;
  text-decoration-color: rgba(240, 235, 224, 0.4);
}

.site-footer a:hover { text-decoration-color: currentColor; }
.site-footer a:focus-visible { outline-color: var(--focus); }

/* ---- narrow screens ---------------------------------------------- */

@media (max-width: 40rem) {
  .notice-body { grid-template-columns: minmax(0, 1fr); }
  .poster { max-width: 13rem; }
}

@media (max-width: 34rem) {
  .index a {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.3rem 1rem;
  }
  .index-thumb { width: 3.5rem; height: 3.5rem; }
  .index-where {
    grid-column: 2;
    grid-row: 3;
    margin-top: 0.5rem;
    white-space: normal;
  }
  .notice { box-shadow: 0.3125rem 0.3125rem 0 var(--line-soft); }
  .pagination { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .ypw *, .ypw *::before, .ypw *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ==================================================================
   v2 — the alternative landing page (page-v2.hbs)

   Everything here is scoped under .v2. The real homepage cannot be
   affected by any of it, and deleting page-v2.hbs plus this block
   removes the experiment entirely.

   The idea: the homepage is ink on paper, quiet and editorial. This is
   the same organisation read the other way — dark, loud, poster-led,
   closer to what they actually put on walls. Their art is high-contrast
   red and black, and a cream page frames it as an archive where a black
   page frames it as a movement.
   ================================================================== */

.v2 {
  --v2-bg:    #0d0b09;
  --v2-fg:    #f4efe4;
  --v2-dim:   #9a9086;
  --v2-red:   #e21f26;
  --v2-line:  rgba(244, 239, 228, 0.14);

  background: var(--v2-bg);
  color: var(--v2-fg);
  /* Pull out of the theme's paper page and own the full viewport. */
  margin: -0.5rem calc(50% - 50vw) 0;
  width: 100vw;
  overflow: hidden;
}

.v2 ::selection { background: var(--v2-red); color: #fff; }

/* ---- hero -------------------------------------------------------- */

.v2-hero {
  position: relative;
  min-height: 100svh;          /* svh, not vh: mobile browser chrome */
  display: grid;
  align-content: center;
  padding-block: clamp(4rem, 12vh, 8rem);
  isolation: isolate;
}

.v2-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  /* Duotone-ish: crush to greyscale, then let the red ground bleed
     through so the portrait reads as printed rather than photographic. */
  filter: grayscale(1) contrast(1.25) brightness(0.42);
  z-index: -2;
}

.v2-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 20% 20%, rgba(226,31,38,0.28), transparent 60%),
    linear-gradient(to bottom, rgba(13,11,9,0.15), var(--v2-bg) 92%);
  z-index: -1;
}

.v2-kicker {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--v2-red);
  margin-bottom: 1.5rem;
}

.v2-lockup {
  font-family: var(--display);
  font-weight: 700;
  /* Far past the homepage's 4.75rem ceiling — this is the whole point. */
  font-size: clamp(3rem, 14vw, 9.5rem);
  line-height: 0.84;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  margin: 0;
}

.v2-lockup span { display: block; }
.v2-lockup .is-red { color: var(--v2-red); }

.v2-statement {
  max-width: 32ch;
  margin: 2rem 0 0;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  line-height: 1.5;
  color: var(--v2-dim);
}

.v2-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 2.5rem;
  padding: 0.95rem 1.5rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--v2-fg);
  border: 1px solid var(--v2-fg);
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

.v2-cta svg { width: 0.68rem; height: 0.68rem; transition: transform 180ms ease; }
.v2-cta:hover { background: var(--v2-red); border-color: var(--v2-red); color: #fff; }
.v2-cta:hover svg { transform: translate(2px, -2px); }

.v2-cta--big { margin-top: 2rem; padding: 1.2rem 2rem; font-size: 0.82rem; }

.v2-scroll {
  position: absolute;
  bottom: 1.75rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--v2-dim);
}

/* ---- marquee ------------------------------------------------------ */

.v2-marquee {
  border-block: 1px solid var(--v2-line);
  background: var(--v2-red);
  color: #fff;
  overflow: hidden;
  padding-block: 0.7rem;
}

.v2-marquee-track {
  display: flex;
  width: max-content;
  animation: v2-scroll 34s linear infinite;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.1rem, 2.6vw, 1.6rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

@keyframes v2-scroll { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .v2-marquee-track { animation: none; }
}

/* ---- shout -------------------------------------------------------- */

.v2-shout { padding-block: clamp(4rem, 12vw, 8rem); }

.v2-shout p {
  max-width: 22ch;
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.9rem, 6.5vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.v2-shout em { font-style: normal; color: var(--v2-red); }

/* ---- section titles ----------------------------------------------- */

.v2-section-title {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--v2-dim);
  margin: 0 auto 1.5rem;
  font-weight: 400;
}

.v2-section-title span { flex: 1; height: 1px; background: var(--v2-line); }

/* ---- mosaic ------------------------------------------------------- */

.v2-mosaic { padding-block: clamp(2rem, 6vw, 3rem) clamp(4rem, 10vw, 7rem); }

.v2-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 2px;
  background: var(--v2-line);
  border-block: 1px solid var(--v2-line);
}

.v2-tile {
  position: relative;
  display: block;
  background: var(--v2-bg);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}

.v2-tile img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(0.35) contrast(1.05);
  transition: transform 600ms cubic-bezier(.22,.61,.36,1), filter 400ms ease;
}

.v2-tile:hover img,
.v2-tile:focus-visible img { transform: scale(1.05); filter: none; }

.v2-tile-meta {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: grid;
  gap: 0.2rem;
  padding: 3rem 1.1rem 1rem;
  background: linear-gradient(to top, rgba(13,11,9,0.94), transparent);
}

.v2-tile-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.15;
}

.v2-tile-date {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--v2-dim);
}

/* ---- channels ----------------------------------------------------- */

.v2-channels { padding-block: clamp(2rem, 6vw, 3rem) clamp(4rem, 10vw, 7rem); }

.v2-channel-grid { display: grid; }

.v2-channel {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--v2-line);
  text-decoration: none;
  color: inherit;
  transition: padding-left 200ms ease, color 200ms ease;
}

.v2-channel:last-child { border-bottom: 1px solid var(--v2-line); }
.v2-channel:hover { padding-left: 1rem; color: var(--v2-red); }

.v2-num {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--v2-dim);
}

.v2-channel-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.2rem, 3.4vw, 1.9rem);
  line-height: 1.15;
}

.v2-channel-at {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--v2-dim);
  white-space: nowrap;
}

@media (max-width: 34rem) {
  .v2-channel { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .v2-channel-at { grid-column: 2; }
}

/* ---- close -------------------------------------------------------- */

.v2-close {
  padding-block: clamp(4rem, 12vw, 8rem);
  border-top: 0.5rem solid var(--v2-red);
  background: linear-gradient(to bottom, rgba(226,31,38,0.10), transparent 40%);
}

.v2-close h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.2rem, 8vw, 5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0;
}

.v2-close p { max-width: 48ch; margin-top: 1.25rem; color: var(--v2-dim); }

/* ==================================================================
   Registration / join form (page-register.hbs)

   Built to be better than the Google Form it replaces, which means
   three things it does badly: a readable measure on long questions,
   real hierarchy between sections, and errors that appear next to the
   field rather than as a red block at the top.
   ================================================================== */

.reg { padding-bottom: clamp(3rem, 8vw, 5rem); }

.reg-head { padding-block: clamp(2.5rem, 7vw, 4rem) clamp(1.5rem, 4vw, 2rem); }
.reg-head .label { display: block; color: var(--red); margin-bottom: 0.7rem; }

.reg-head h1 {
  font-size: clamp(2.1rem, 7vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
}

.ypw .reg-lede {
  max-width: 46ch;
  margin-top: 1rem;
  font-size: clamp(1.05rem, 2.4vw, 1.2rem);
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* The letter. Narrower than the form: prose wants ~66 characters, form
   fields want the full column. */
.reg-letter { max-width: 42rem; margin-top: clamp(2rem, 5vw, 3rem); }

.reg-form { margin-top: clamp(2.5rem, 7vw, 4rem); }

.reg-group {
  margin: 0 0 clamp(2rem, 5vw, 3rem);
  padding: 0 0 clamp(1.5rem, 4vw, 2rem);
  border: 0;
  border-bottom: 1px solid var(--line);
}

.reg-group:last-of-type { border-bottom: 0; }

.reg-group legend {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  padding: 0;
  margin-bottom: 1.5rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.3rem, 3.4vw, 1.7rem);
  letter-spacing: -0.01em;
}

.reg-step {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--red);
}

/* Two columns for short answers, full width for anything with prose in it. */
.reg-form .reg-group > .form-field,
.reg-form .choices { max-width: none; }

.reg-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem 1.75rem;
}

.reg-group legend { grid-column: 1 / -1; }
.form-field--wide { grid-column: 1 / -1; }

.form-field .label b { color: var(--red); font-weight: 400; }

.field-help {
  display: block;
  max-width: 60ch;
  margin: -0.15rem 0 0.55rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--ink-soft);
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--body);
}

.ypw-form textarea {
  resize: vertical;
  min-height: 5.5rem;
  font-family: var(--body);
  line-height: 1.55;
}

/* Errors sit under their own field. Google Forms puts them there too;
   what it gets wrong is only showing them after a full-page submit. */
.field-error {
  display: block;
  min-height: 1.1em;
  margin-top: 0.35rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
}

.ypw-form [aria-invalid="true"] { border-width: 2px; border-color: var(--red); }

/* ---- radio groups ------------------------------------------------- */

.choices { display: grid; gap: 0.5rem; }

.choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.choice:hover { border-color: var(--ink); background: var(--paper-raised); }

.choice input[type="radio"] {
  appearance: none;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.18rem;
  border: 1px solid var(--ink);
  border-radius: 50%;   /* the one round thing in the design — a radio reads as broken square */
  display: grid;
  place-content: center;
}

.choice input[type="radio"]::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--red);
  transform: scale(0);
  transition: transform 120ms ease;
}

.choice input[type="radio"]:checked::before { transform: scale(1); }
.choice input[type="radio"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.choice:has(input:checked) { border-color: var(--red); background: var(--red-wash); }
.choice span { line-height: 1.45; }

/* ---- submit ------------------------------------------------------- */

.btn-lg { padding: 1rem 2rem; font-size: 0.8rem; }

.reg-submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--ink);
}

.ypw .reg-note {
  max-width: 44ch;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.ypw .reg-note.is-warn { color: var(--red); }
.ypw .reg-note b { font-weight: 700; }

/* Visually hidden, but not display:none — some bots skip hidden inputs. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.reg-done {
  margin-top: clamp(2rem, 6vw, 3rem);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border: 1px solid var(--ink);
  border-top: 0.4375rem solid var(--red);
  background: var(--paper-raised);
}

.reg-done .label { display: block; color: var(--red); margin-bottom: 0.6rem; }
.reg-done h2 { font-size: clamp(1.4rem, 3.6vw, 1.9rem); line-height: 1.15; }
.ypw .reg-done p { max-width: 46ch; margin-top: 0.75rem; color: var(--ink-soft); }

/* The homepage band's call to action, replacing the old iframe. */
.band-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 1.75rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: #f0ebe0;
  background: var(--red);
  border: 1px solid var(--red);
  transition: background-color 180ms ease, color 180ms ease;
}

.band-cta svg { width: 0.7rem; height: 0.7rem; transition: transform 180ms ease; }
.band-cta:hover { background: transparent; color: #f0ebe0; border-color: #f0ebe0; }
.band-cta:hover svg { transform: translate(2px, -2px); }

/* ---- fixes -------------------------------------------------------- */

/* Every text-ish input, not an enumerated list of types. The original
   selector named number/text/email and missed tel — so the WhatsApp field
   fell back to the browser's ~20-character default width while its
   neighbours filled their track. Enumerating input types is a bug factory;
   exclude the two that must not be stretched instead. */
.ypw-form input:not([type="radio"]):not([type="checkbox"]),
.ypw-form textarea {
  width: 100%;
  padding: 0.6rem 0.7rem;
  font-family: var(--mono);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 0;
  appearance: none;
}

.ypw-form textarea { font-family: var(--body); }

/* .wrap already centres the column; centring the letter inside it again
   indented it relative to the form below. Left-align within the wrap. */
.reg-letter { margin-inline: 0; }

/* v2's masthead. The shell is paper by default, which sat as a cream bar
   above a black hero. Scoped to the page so the real site is untouched —
   Ghost emits `page-v2` on <body> from the slug. */
body.page-v2 { background: #0d0b09; }
body.page-v2 .rule-top { background: #e21f26; }

body.page-v2 .masthead {
  border-bottom-color: rgba(244, 239, 228, 0.14);
  position: relative;
  z-index: 2;
}

body.page-v2 .brand { color: #f4efe4; }
body.page-v2 .brand img { filter: brightness(0) invert(1); }
body.page-v2 .masthead-nav a { color: #9a9086; border-bottom-color: rgba(244,239,228,0.2); }

/* The masthead sits over the hero rather than above it, so the portrait
   starts at the very top of the page. */
body.page-v2 header { position: absolute; inset-inline: 0; top: 0.5rem; }
body.page-v2 .v2 { margin-top: -0.5rem; }

/* hero.webp is 1100px wide and is being asked to fill a whole viewport, so
   it upscales and softens. Leaning into that — heavier grade, stronger red
   wash — makes it read as a printed poster rather than a low-res photo. */
body.page-v2 .v2-hero-bg { filter: grayscale(1) contrast(1.45) brightness(0.34); }

body.page-v2 .v2-hero::after {
  background:
    radial-gradient(130% 95% at 18% 30%, rgba(226,31,38,0.34), transparent 62%),
    linear-gradient(to bottom, rgba(13,11,9,0.55) 0%, rgba(13,11,9,0.15) 35%, var(--v2-bg) 94%);
}

/* Supersedes the two rules above. .reg-letter carries .wrap, so touching its
   max-width or margin moves the whole column rather than the text inside it —
   max-width centred it, margin-inline:0 shoved it to the viewport edge. Keep
   the column exactly where the form is and constrain the measure on the
   paragraphs instead, which is what "prose wants 66 characters" actually
   means. */
.reg-letter { max-width: none; margin-inline: auto; }
.reg-letter > * { max-width: 42rem; }

/* ---- v2: channels demoted to a link strip -------------------------

   Supersedes .v2-channels / .v2-channel / .v2-num / .v2-channel-name /
   .v2-channel-at, which are no longer emitted. The old treatment gave the
   channel list display-sized names and its own heading, so the page ended
   with two large lists in a row and read as repetitive. Navigation should
   not compete with the work.
   ------------------------------------------------------------------- */

.v2-links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 1.5rem;
  margin-top: clamp(2.5rem, 7vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--v2-line);
}

.v2-links-label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--v2-red);
}

.v2-links a {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--v2-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}

.v2-links a:hover { color: var(--v2-fg); border-bottom-color: var(--v2-red); }

/* .v2-scroll is gone from the template; nothing to style. */

/* ---- v1 plate: contained rather than full-bleed --------------------

   Supersedes the .plate--bleed rules above.

   hero.webp is 1100×556. Stretching it edge to edge on a wide screen
   upscaled it well past its own resolution and cropped it to 68vh to
   compensate — soft image, decapitated composition, and a band so wide it
   overwhelmed the column it sits in.

   Capping at the native 1100px fixes all three at once: no upscaling, so
   it is sharp; no cover-crop, so the whole rayed composition survives; and
   it still reads as wider than the 820px text column, which is what gives
   the page its change of rhythm.
   -------------------------------------------------------------------- */

.plate--bleed {
  width: min(100% - 2.5rem, 68.75rem);   /* 1100px — the image's own width */
  max-width: none;
  margin-inline: auto;
  border-block-width: 2px;
}

.plate--bleed img {
  max-height: none;
  object-fit: fill;      /* natural aspect at natural size: nothing to fit */
  height: auto;
}

.plate--bleed figcaption {
  border-top: 1px solid var(--line);
  padding-inline: 0;
}

/* A form heading rendered inside the page rather than as its own header. */
.reg-head--flush { padding: 0 0 1.5rem; }
.reg-head--flush h2 { font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.1; }
.reg-head--flush .label { display: block; color: var(--red); margin-bottom: 0.6rem; }

/* ---- schema-rendered form: one question per row --------------------

   Supersedes the .reg-group grid for these forms. Two short fields side
   by side saves vertical space and costs calm — and calm is the entire
   reason Google Forms feels easy. Every question now gets the full
   column and a hairline above it, which is this design's version of a
   card: separation without a box.
   -------------------------------------------------------------------- */

.baserow-form .reg-group {
  display: block;
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

.baserow-form .form-field {
  display: block;
  max-width: none;
  padding-block: clamp(1.5rem, 3.5vw, 2.1rem);
  border-top: 1px solid var(--line);
}

.baserow-form .form-field:first-child { border-top: 2px solid var(--ink); }

.baserow-form .form-field .label {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
}

.baserow-form .field-help { max-width: 58ch; margin-bottom: 0.9rem; }

/* Roomier controls. The default 0.6rem padding is fine in a dense grid and
   too tight when a field owns the whole width. */
.baserow-form input:not([type="radio"]):not([type="checkbox"]),
.baserow-form textarea {
  max-width: 34rem;
  padding: 0.85rem 0.9rem;
  font-size: 1rem;
}

.baserow-form textarea { max-width: none; }

.baserow-form .choices { max-width: 44rem; margin-top: 0.25rem; }

.ypw .reg-intro {
  max-width: 56ch;
  margin-bottom: clamp(2rem, 5vw, 2.75rem);
  color: var(--ink-soft);
  font-size: 1.02rem;
  text-wrap: pretty;
}

.baserow-form .reg-submit { margin-top: 0; }