/* Sunny — color-blocked editorial magazine theme.

   Full-bleed alternating bands (cream / mustard / terracotta / pink) separated
   by hairline rules, an inline block face for display type, condensed caps for
   every functional label, and a script face for the one word per headline that
   gets to be soft.

   The palette comes from site.json → colors, emitted into brand.css as
   --cream/--mustard/--terracotta/--pink/--ink. The .band-* classes below are
   the only place those raw colors are named, so a re-skin is a site.json edit.

   Faces: --heading-font (condensed sans, e.g. Oswald) carries labels, nav and
   article titles; --body-font (geometric sans, e.g. Jost) carries running text;
   --display-font and --script-font are theme-local because they are decorative
   and never change per site. */

:root {
  /* fallbacks so the stylesheet still renders if site.colors is missing */
  --cream: #f6f1e5;
  --mustard: #eac672;
  --terracotta: #dc7b51;
  --pink: #deb9cb;
  --ink: #1a1410;

  --display-font: "Bungee Inline", "Arial Black", sans-serif;
  --script-font: "Mrs Saint Delafield", cursive;

  --hairline: 1px solid var(--ink);
  --band-y: clamp(3.25rem, 7vw, 5.5rem);
  --band-x: clamp(1.25rem, 5vw, 4.5rem);
}

/* ------------------------------------------------------------- ground --- */
html { scroll-behavior: smooth; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body-font);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
main { display: block; }

/* --------------------------------------------------------------- type --- */
.display {
  font-family: var(--display-font);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: 0.01em;
}
.display-xl { font-size: clamp(2.6rem, 8vw, 7rem); }
.display-lg { font-size: clamp(2rem, 5.6vw, 4.2rem); }
.display-md { font-size: clamp(1.4rem, 3.4vw, 2.4rem); }

/* Stroked twin of .display: same job, quieter voice. Uses the condensed sans
   because an inline face with a stroke on top turns to mud at display sizes. */
.outline {
  font-family: var(--heading-font);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
}
.outline-xl { font-size: clamp(2.6rem, 8vw, 6.5rem); }
.outline-lg { font-size: clamp(1.9rem, 5vw, 3.6rem); }
.outline-md { font-size: clamp(1.3rem, 3vw, 2.2rem); }

.script {
  font-family: var(--script-font);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  /* the script face carries tall ascenders and deep descenders; a 1 line-height
     keeps it from opening a gap when it shares a line with the block caps */
  line-height: 1;
}
.label {
  font-family: var(--heading-font);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.72rem;
  line-height: 1.6;
}
.caps-body {
  font-family: var(--heading-font);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.92rem;
  line-height: 1.9;
}
.body { max-width: 62ch; }
.meta { font-size: 0.8rem; font-style: italic; }
.ta-right { text-align: right; }
.ta-center, .center { text-align: center; }

/* -------------------------------------------------------------- bands --- */
.band { position: relative; overflow: hidden; border-bottom: var(--hairline); }
.band-cream { background: var(--cream); }
.band-mustard { background: var(--mustard); }
.band-terracotta { background: var(--terracotta); }
.band-pink { background: var(--pink); }
.pad { padding: var(--band-y) var(--band-x); }
.pad-sm { padding: calc(var(--band-y) * 0.5) var(--band-x); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
/* a two-up whose columns differ a lot in height (copy beside a long form)
   reads better top-aligned than centered */
.grid-2.ai-start { align-items: start; }
@media (max-width: 820px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; gap: 2.25rem; }
}

/* ------------------------------------------------------------- header --- */
.site-header {
  background: var(--mustard);
  border-bottom: var(--hairline);
  position: sticky; top: 0; z-index: 50;
  padding: 0;
}
.site-header .header-inner {
  max-width: none;
  width: 100%;
  padding: 1.1rem clamp(1.25rem, 4vw, 3rem);
  /* the shared header stacks its logo over the nav; this theme runs them as a
     single row at every width, with the nav collapsing behind the toggle */
  display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.site-header .logo {
  font-family: var(--display-font);
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  display: flex; align-items: center; gap: 0.5rem;
}
/* the sun sits outside the wordmark so the title stays plain text in site.json */
.site-header .logo::before {
  content: "☀";
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 0.85em;
}
.site-header .nav-list {
  display: flex; gap: clamp(0.9rem, 1.8vw, 1.6rem);
  list-style: none; margin: 0; padding: 0; flex-wrap: wrap;
}
.site-header .nav-list a, .site-header .nav-sub-toggle {
  font-family: var(--heading-font); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.72rem;
  color: var(--ink); text-decoration: none;
  background: none; border: 0; cursor: pointer;
  padding: 0 0 2px;
  border-bottom: 1.5px solid transparent;
}
.site-header .nav-list a:hover, .site-header .nav-list .current a { border-bottom-color: var(--ink); }
.site-header .nav-list .sub {
  list-style: none; margin: 0; padding: 0.6rem 0 0;
  background: var(--mustard); border: var(--hairline); border-radius: 0;
}
.nav-toggle { display: none; background: none; border: 0; color: var(--ink); font-size: 1.4rem; cursor: pointer; }
@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .site-header .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--mustard); border-bottom: var(--hairline);
    padding: 1rem clamp(1.25rem, 4vw, 3rem) 1.4rem;
  }
  .site-header .site-nav.open { display: block; }
  .site-header .nav-list { flex-direction: column; gap: 0.9rem; }
  .site-header .nav-list a { font-size: 0.85rem; }
}

/* Decorative word strips under the header (site.json → strips). Static by
   design: the reference marquee scrolled, and the brief asked for the look
   without the motion. */
.word-strip {
  border-bottom: var(--hairline);
  padding: 0.55rem 1rem;
  white-space: nowrap; overflow: hidden;
  font-family: var(--heading-font); font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.72rem;
  text-align: center;
}
.word-strip--pink { background: var(--pink); }
.word-strip--mustard { background: var(--mustard); }
.word-strip--terracotta { background: var(--terracotta); }
.word-strip--cream { background: var(--cream); }

/* ------------------------------------------------------------ buttons --- */
.btn-line, .site-form button, .join-form button, .prose .wp-block-button__link {
  display: inline-block;
  font-family: var(--heading-font); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.72rem;
  color: var(--ink); text-decoration: none;
  background: none; border: 0; border-bottom: 1.5px solid var(--ink);
  border-radius: 0;
  padding: 0 clamp(1.5rem, 4vw, 3.5rem) 0.8rem;
  cursor: pointer;
  transition: letter-spacing 0.2s ease;
}
.btn-line:hover, .site-form button:hover, .join-form button:hover { letter-spacing: 0.38em; filter: none; }
.teaser-cta { margin-top: 2rem; }

/* -------------------------------------------------------- front page --- */
.mag-hero-img { max-width: 460px; justify-self: center; }
.mag-quote { max-width: 48ch; font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.8; }
.mag-sig { font-size: clamp(2.6rem, 5vw, 3.4rem); margin: 1.5rem 0 0.4rem; line-height: 0.9; }
.mag-sections .pad-sm { padding-bottom: 1rem; }
.mag-sections h2 { margin: 0; }

.section-cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: var(--hairline);
}
/* the masthead runs four across so the crew stays one row */
.section-cards.crew { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .section-cards.crew { grid-template-columns: 1fr 1fr; } }
@media (max-width: 920px) { .section-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .section-cards, .section-cards.crew { grid-template-columns: 1fr; } }
.section-card {
  border-right: var(--hairline); border-bottom: var(--hairline);
  padding: 2.2rem 1.8rem 2.6rem;
  display: flex; flex-direction: column; gap: 1.1rem;
  text-decoration: none; color: var(--ink);
  transition: transform 0.25s ease;
}
.section-card:hover { transform: translateY(-4px); }
.section-card .thumb { aspect-ratio: 4 / 5; overflow: hidden; }
.section-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.section-card .thumb-letter {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display-font); font-size: 4.5rem; color: var(--ink);
}
.section-card h3 {
  font-family: var(--heading-font); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 1.15rem;
  margin: 0;
}
.section-card p { font-size: 0.95rem; margin: 0; }

/* ------------------------------------------------- headline list rows --- */
.headline-list { margin-top: 2.5rem; border-top: var(--hairline); }
.headline-row {
  display: grid; grid-template-columns: 110px 1fr auto; gap: 2rem; align-items: center;
  border-bottom: var(--hairline); padding: 1.6rem 0;
  text-decoration: none; color: var(--ink);
}
.headline-row:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.headline-row .kicker {
  font-family: var(--heading-font); font-weight: 500;
  font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase;
}
.headline-row h3 {
  font-family: var(--heading-font); font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: clamp(1rem, 1.6vw, 1.25rem); line-height: 1.3;
  margin: 0;
}
.headline-row .meta { font-size: 0.8rem; font-style: italic; }
@media (max-width: 700px) {
  .headline-row { grid-template-columns: 1fr; gap: 0.4rem; }
}

/* ------------------------------------------------------ teaser bands --- */
/* utility, not scoped to the teaser band: any two-up that pairs copy with a
   portrait image uses it (the About page builds its bands by hand) */
.teaser-img { max-width: 420px; justify-self: center; }
.teaser-band h2 { margin: 1rem 0 0; }
.teaser-band .teaser-copy .body { margin-top: 1.5rem; font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.7; }
.teaser-band.is-center .teaser-copy { max-width: 62ch; margin: 0 auto; }
.teaser-band.is-center .body { margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------ section pages --- */
.sec-head h1 { margin: 1rem 0 0; }
.sec-intro { max-width: 52ch; margin-top: 2rem; }
.sec-featured .feat-img { max-width: 420px; justify-self: center; }
.sec-featured .feat-title {
  font-family: var(--heading-font); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.02em;
  font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.15;
  margin: 0.8rem 0 1.2rem;
}
.sec-featured .feat-title a { text-decoration: none; }
.sec-featured .feat-title a:hover { text-decoration: underline; text-underline-offset: 6px; }
.sec-featured .meta { display: block; margin-top: 1rem; }
.sec-list h2, .mag-fresh h2 { margin: 0; }
.sec-editor h2 { margin: 0; }
.sec-editor .body { font-size: 1rem; }

/* Body copy inside a band is not .prose, so its links need the underline the
   prose column gets for free. */
.sec-editor a, .sec-extra a, .teaser-copy a, .sec-featured .body a {
  text-decoration: underline; text-underline-offset: 3px;
}
.sec-editor a.btn-line, .sec-extra a.btn-line, .teaser-copy a.btn-line, .sec-featured a.btn-line { text-decoration: none; }

/* --------------------------------------------------------- newsletter --- */
.nl-band .nl-head { margin: 0.8rem 0 0; }
.nl-band .nl-blurb { margin: 1.4rem auto 0; }
.nl-form { max-width: 420px; margin: 2.2rem auto 0; text-align: left; }
.nl-form label, .join-form label, .site-form label {
  font-family: var(--heading-font); font-weight: 500;
  font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase;
}
.nl-form input, .join-form input, .site-form input, .site-form textarea {
  width: 100%; background: transparent;
  border: 0; border-bottom: 1.5px solid var(--ink); border-radius: 0;
  font-family: var(--body-font); font-weight: 300; font-size: 1rem; color: var(--ink);
  padding: 0.5rem 0; margin-top: 0.5rem; outline: none;
}
.nl-form input:focus, .join-form input:focus, .site-form input:focus, .site-form textarea:focus {
  outline: none; border-bottom-width: 2.5px;
}
.site-form textarea { min-height: 140px; resize: vertical; }
.nl-form button, .join-form button { margin-top: 1.6rem; }
.nl-form button { justify-self: center; }
.join-status, .form-status { font-family: var(--heading-font); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; margin-top: 1rem; }

/* ------------------------------------------------------------- footer --- */
.site-footer {
  background: var(--pink);
  border-top: var(--hairline);
  /* the shared stylesheet floats the footer 40px below the last section; the
     bands here run edge to edge, so it has to sit flush */
  margin-top: 0;
  padding: 3.5rem var(--band-x) 2rem;
  color: var(--ink);
}
.site-footer .wrap { max-width: none; padding: 0; }
.site-footer a { color: var(--ink); }
.foot-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; align-items: start; }
@media (max-width: 700px) { .foot-grid { grid-template-columns: 1fr; text-align: center; } }
.foot-brand, .foot-head { font-family: var(--display-font); font-weight: 400; font-size: 1.6rem; text-transform: uppercase; }
.foot-head { text-align: center; }
.foot-center { text-align: center; }
.foot-links { text-align: right; }
@media (max-width: 700px) { .foot-links, .foot-head { text-align: center; } }
.social { display: flex; gap: 0.8rem; justify-content: flex-end; }
@media (max-width: 700px) { .social { justify-content: center; } }
.social a {
  width: 32px; height: 32px; border: 1.5px solid var(--ink); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; font-size: 0.72rem;
  font-family: var(--heading-font); font-weight: 500;
}
/* The shared footer prints its copyright line first, but the legal row reads
   better last — a two-column grid puts them side by side on the bottom row
   without the site.json copy having to hardcode the year. */
.site-footer > .wrap { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: baseline; }
.site-footer .foot-grid { grid-column: 1 / -1; }
.site-footer .copyright { grid-column: 1; grid-row: 2; font-size: 0.78rem; margin: 3rem 0 0; }
.site-footer .foot-legal { grid-column: 2; grid-row: 2; text-align: right; font-size: 0.78rem; margin: 3rem 0 0; }
@media (max-width: 700px) {
  .site-footer > .wrap { grid-template-columns: 1fr; text-align: center; }
  .site-footer .copyright, .site-footer .foot-legal { grid-column: 1; grid-row: auto; text-align: center; margin-top: 1rem; }
  .site-footer .foot-grid + .copyright { margin-top: 2.5rem; }
}

/* ---------------------------------------------------- posts & archives --- */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--band-x); }
.wrap.narrow { max-width: 760px; }

.page-plain-head, .page-hero {
  background: var(--mustard);
  border-bottom: var(--hairline);
  padding: calc(var(--band-y) * 0.8) 0;
}
.page-hero { background-size: cover; background-position: center; position: relative; }
.page-hero .wrap { position: relative; }
.page-plain-head h1, .page-hero h1 {
  font-family: var(--display-font); font-weight: 400;
  text-transform: uppercase; line-height: 0.95;
  font-size: clamp(2rem, 5.6vw, 4.2rem);
  margin: 0;
}
.page-hero h1 { color: var(--cream); text-shadow: 0 2px 18px rgba(0,0,0,0.5); }

.post-head { padding: calc(var(--band-y) * 0.8) 0 1.5rem; }
.post-head h1 {
  font-family: var(--heading-font); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.02em;
  font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.12;
  margin: 0.6rem 0 0;
}
.post-meta {
  font-family: var(--heading-font); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.24em; font-size: 0.68rem;
  color: var(--ink);
}
.post-meta a { text-decoration: none; border-bottom: 1px solid var(--ink); }
.post-hero { margin: 0 0 2.5rem; }
.post-hero img { width: 100%; border-radius: 0; border: var(--hairline); }

.prose { font-size: 1.05rem; line-height: 1.75; padding-bottom: 3rem; }
.prose h2 {
  font-family: var(--heading-font); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em;
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  margin: 2.6rem 0 0.8rem;
}
.prose h3 {
  font-family: var(--heading-font); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 1.05rem;
  margin: 2rem 0 0.6rem;
}
.prose p { margin: 0 0 1.1em; }
.prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.prose img { border: var(--hairline); }
.prose blockquote {
  border: 0; border-left: 3px solid var(--ink);
  margin: 2rem 0; padding: 0.2rem 0 0.2rem 1.4rem;
  font-family: var(--heading-font); font-weight: 300;
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.95rem; line-height: 1.85;
}
/* The advice column's letter block: a bordered card on the band ground. */
.prose .letter {
  background: rgba(255, 255, 255, 0.55);
  border: var(--hairline);
  padding: clamp(1.5rem, 4vw, 2.6rem);
  margin: 2rem 0;
}
.prose .letter .q { font-style: italic; }
.prose .letter .sig { font-family: var(--script-font); font-size: 2.6rem; line-height: 1; margin-top: 1.4rem; }
.prose ul.believe { list-style: none; padding: 0; margin: 0; border-top: var(--hairline); }
.prose ul.believe li {
  border-bottom: var(--hairline); padding: 1.1rem 0;
  font-family: var(--heading-font); font-weight: 300;
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.95rem;
}

.post-tags { max-width: 760px; margin: 0 auto 3rem; padding: 0 var(--band-x); }
.post-tags a {
  font-family: var(--heading-font); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.64rem;
  border: 1.5px solid var(--ink); border-radius: 0; background: none;
  padding: 0.35rem 0.8rem; text-decoration: none;
}

/* archive card grid (the generic /blog index and any non-section archive) */
/* Archives run their card grid edge to edge, like the front page sections.
   Scoped to main's own wrap so the header and footer keep their gutters. */
.page-blog main > .wrap { max-width: none; padding: 0; }
.page-blog main > .wrap > .pager { padding: 2.5rem var(--band-x) var(--band-y); }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0; border-top: var(--hairline); padding: 0; }
@media (max-width: 920px) { .post-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .post-grid { grid-template-columns: 1fr; } }
.post-card {
  border-right: var(--hairline); border-bottom: var(--hairline);
  border-radius: 0; box-shadow: none; background: none;
  padding: 2rem 1.6rem 2.4rem;
  display: flex; flex-direction: column; gap: 1rem;
  text-decoration: none; color: var(--ink);
  transition: transform 0.25s ease;
}
.post-card:hover { transform: translateY(-4px); box-shadow: none; }
.post-card img, .post-card .ph { height: auto; aspect-ratio: 4 / 5; object-fit: cover; width: 100%; border-radius: 0; background: var(--mustard); }
.post-card .pc-cats {
  font-family: var(--heading-font); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.24em; font-size: 0.66rem;
  margin: 0;
}
.post-card .pc-body h2 {
  font-family: var(--heading-font); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 1.1rem; line-height: 1.3; margin: 0.5rem 0;
}
.post-card .pc-excerpt { font-size: 0.92rem; margin: 0 0 0.6rem; }

.pager {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; padding: 2.5rem 0 0;
  font-family: var(--heading-font); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.7rem;
}
.pager a { text-decoration: none; border-bottom: 1.5px solid var(--ink); }

.related { background: var(--cream); border-top: var(--hairline); margin: 0; max-width: none; padding: var(--band-y) var(--band-x); }
.related h3 {
  font-family: var(--display-font); font-weight: 400;
  text-transform: uppercase; font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  margin: 0 0 2rem; text-align: center;
}
.rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; max-width: 1280px; margin: 0 auto; }
@media (max-width: 700px) { .rel-grid { grid-template-columns: 1fr; } }
/* the shared card is a white rounded tile; here it is a bare image with a rule */
.rel-card { text-decoration: none; color: var(--ink); display: block; background: none; border-radius: 0; box-shadow: none; overflow: visible; }
.rel-card:hover { transform: translateY(-4px); }
.rel-card img { height: auto; aspect-ratio: 4 / 5; object-fit: cover; width: 100%; border: var(--hairline); }
.rel-card span {
  display: block; padding: 0; margin-top: 0.8rem;
  font-family: var(--heading-font); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.95rem; line-height: 1.35;
}

.author-card {
  border: var(--hairline); background: none; border-radius: 0;
  padding: 1.6rem; margin: 2rem 0 3rem;
  display: flex; gap: 1.4rem; align-items: flex-start;
}
.author-card .ac-photo { width: 92px; height: 92px; object-fit: cover; border-radius: 0; border: var(--hairline); }
.author-card .ac-name { font-family: var(--heading-font); font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.78rem; margin: 0 0 0.5rem; }
.author-card .ac-bio { font-size: 0.95rem; margin: 0 0 0.6rem; }
.author-card .ac-link { font-family: var(--heading-font); font-weight: 500; text-transform: uppercase; letter-spacing: 0.24em; font-size: 0.68rem; }

.site-sidebar { display: none; }

/* the contact/pitch form sits in a page body, so give it the band rhythm */
.site-form { max-width: 620px; margin: 2.5rem 0 3rem; display: grid; gap: 1.6rem; }
.site-form .field { margin: 0; }
/* a grid item stretches by default, which would make the underlined button run
   the full column width */
.site-form button, .join-form button { justify-self: start; }
.site-form .req { color: var(--terracotta); }
.contact-intro { font-size: 1.1rem; }