/* ==========================================================================
   Refractions — Brookline High School literary & arts magazine
   One stylesheet for the whole site.

   Contents
   1. Fonts
   2. Tokens (colors, type, spacing) — taken from the logo
   3. Base
   4. Header and navigation
   5. Shared pieces (rules, buttons, placeholders, fact lists)
   6. Home page (hero, contest, genres, latest issue, meetings)
   7. Inner pages (page head, prose, aside)
   8. Archive
   9. Submission form
   10. Footer
   ========================================================================== */

/* 1. Fonts ---------------------------------------------------------------- */
/* EB Garamond, the typeface in the logo, hosted with the site (no outside requests). */
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/eb-garamond-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/eb-garamond-latin-wght-italic.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/eb-garamond-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/eb-garamond-latin-ext-wght-italic.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 2. Tokens --------------------------------------------------------------- */
:root {
  /* Colors sampled from the logo */
  --paper: #f7f4eb;        /* cream background */
  --paper-deep: #efe9da;   /* a shade darker, for panels */
  --ink: #1f2740;          /* wordmark navy */
  --helmet: #2c3650;       /* crest navy */
  --slate: #4f5872;        /* tagline grey-navy */
  --blue: #4d8df0;         /* plume, top */
  --pink: #f272b7;         /* plume, middle */
  --red: #d23943;          /* plume, lower */
  --ember: #341c24;        /* plume, tip */
  --deep-blue: #263e7e;    /* start of the rule under the wordmark; link color */

  /* The rule under the wordmark */
  --spectrum: linear-gradient(90deg, var(--deep-blue) 0%, var(--blue) 24%, var(--pink) 50%,
    var(--red) 76%, var(--ember) 100%);
  --spectrum-down: linear-gradient(180deg, var(--deep-blue) 0%, var(--blue) 22%, var(--pink) 50%,
    var(--red) 76%, var(--ember) 100%);

  --serif: "EB Garamond", "Cormorant Garamond", Garamond, "Times New Roman", serif;

  /* Type scale (ratio about 1.333) */
  --step--1: 1.0625rem;
  --step-0: 1.25rem;
  --step-1: 1.5rem;
  --step-2: 2rem;
  --step-3: 2.75rem;
  --step-4: clamp(2.75rem, 1.6rem + 4.6vw, 4.5rem);
  --step-hero: clamp(3.5rem, 0.9rem + 9.2vw, 8.25rem);

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --wrap: 74rem;
  --measure: 62ch;
}

/* 3. Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.55;
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); line-height: 1.25; letter-spacing: 0; }

p, ul, ol, dl { margin: 0; }
p { text-wrap: pretty; }
img { max-width: 100%; height: auto; display: block; }

a { color: var(--deep-blue); text-decoration-thickness: 0.06em; text-underline-offset: 0.18em; }
a:hover { color: var(--ink); text-decoration-thickness: 0.12em; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 2px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--gutter); top: -4rem; z-index: 10;
  background: var(--ink); color: var(--paper); padding: 0.5rem 1rem;
}
.skip-link:focus { top: 0.75rem; color: var(--paper); }

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

/* 4. Header and navigation ------------------------------------------------ */
.site-header { padding-block: 1.1rem; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }

.brand { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--ink); text-decoration: none; }
.brand img { width: 2.6rem; height: auto; }
.brand span { font-size: 1.7rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1; }

.site-nav ul { display: flex; gap: clamp(1rem, 2.4vw, 2.2rem); list-style: none; padding: 0; }
.site-nav a {
  display: inline-block; padding-block: 0.35rem; color: var(--ink); text-decoration: none;
  background: var(--spectrum) no-repeat left bottom / 0 2px;
  transition: background-size 0.25s ease;
}
.site-nav a:hover { background-size: 100% 2px; }
.site-nav a[aria-current="page"] { background-size: 100% 2px; font-weight: 600; }

.nav-toggle {
  display: none; font: inherit; font-size: var(--step--1); color: var(--ink);
  background: none; border: 1.5px solid var(--ink); border-radius: 2px; padding: 0.3rem 0.9rem; cursor: pointer;
}

@media (max-width: 50rem) {
  .site-header .wrap { flex-wrap: wrap; }
  .nav-toggle { display: inline-block; }
  .site-nav { flex-basis: 100%; }
  .js .site-nav { display: none; }
  .js .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; border-top: 1px solid rgba(31, 39, 64, 0.2); }
  .site-nav li { border-bottom: 1px solid rgba(31, 39, 64, 0.2); }
  .site-nav a { display: block; padding-block: 0.8rem; background-size: 0 2px; }
  .site-nav a[aria-current="page"] { background-size: 2.5rem 2px; }
}

/* 5. Shared pieces -------------------------------------------------------- */

/* The short gradient rule from under the wordmark */
.rule { display: block; width: min(100%, 16rem); height: 4px; border: 0; border-radius: 2px; margin: 0; background: var(--spectrum); }

.button {
  display: inline-block; padding: 0.7rem 1.5rem; border: 1.5px solid var(--ink); border-radius: 2px;
  background: var(--ink); color: var(--paper); font: inherit; font-weight: 500; line-height: 1.2;
  text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease;
}
.button:hover { background: var(--deep-blue); border-color: var(--deep-blue); color: var(--paper); }
.button--quiet { background: transparent; color: var(--ink); }
.button--quiet:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.button--light { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.button--light:hover { background: #fff; border-color: #fff; color: var(--ink); }

.actions { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }

/* PLACEHOLDERS
   Anything wrapped in <span class="ph"> is sample text waiting for the real detail.
   It is highlighted on purpose so nothing made-up goes live unnoticed.
   When every placeholder has been replaced, this rule can be deleted. */
.ph {
  background: rgba(242, 114, 183, 0.22);
  box-shadow: 0 0 0 0.12em rgba(242, 114, 183, 0.22);
  border-bottom: 1.5px dashed var(--pink);
  border-radius: 1px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
h1 .ph, h2 .ph { box-shadow: none; }

/* Label / value lists: meeting times, contest details, contact rows */
.facts { display: grid; grid-template-columns: max-content 1fr; column-gap: 1.5rem; row-gap: 0.55rem; }
.facts dt { font-style: italic; color: var(--slate); }
.facts dd { margin: 0; }
@media (max-width: 22rem) {
  .facts { grid-template-columns: 1fr; row-gap: 0; }
  .facts dd { margin-bottom: 0.6rem; }
}

.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section-head { margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.section-head p { margin-top: 0.75rem; max-width: var(--measure); color: var(--slate); font-size: var(--step-1); line-height: 1.4; }

/* 6. Home page ------------------------------------------------------------ */

/* Hero: the logo lockup rebuilt in live type.
   Crest | vertical rule | wordmark, with a beam of light that enters from the
   left, meets the rule, and leaves as three colors. */
.hero { position: relative; padding-block: clamp(2rem, 6vw, 5rem) clamp(4rem, 9vw, 8rem); overflow: clip; }

.lockup {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(1.5rem, 4vw, 3.75rem);
}
.lockup__crest { position: relative; z-index: 1; width: 100%; max-width: 30rem; justify-self: end; }

.prism { position: relative; align-self: stretch; width: 3px; border-radius: 2px; background: var(--spectrum-down); }

/* The beam. Each ray is a long thin line pinned to the rule and rotated about that point. */
.ray { position: absolute; top: 95%; height: 2px; width: 150vw; pointer-events: none; }
.ray--in { right: 100%; background: var(--helmet); opacity: 0.55; transform-origin: 100% 50%; transform: rotate(6deg); }
.ray--out { left: 100%; transform-origin: 0 50%; }
.ray--blue { background: var(--blue); transform: rotate(3.5deg); }
.ray--pink { background: var(--pink); transform: rotate(7deg); }
.ray--red { background: var(--red); transform: rotate(10.5deg); }

@media (prefers-reduced-motion: no-preference) {
  .ray--in { animation: ray-in 0.7s cubic-bezier(0.5, 0, 0.2, 1) both; }
  .ray--out { animation: ray-out 1.1s cubic-bezier(0.2, 0.6, 0.2, 1) both; }
  .ray--blue { animation-delay: 0.65s; }
  .ray--pink { animation-delay: 0.75s; }
  .ray--red { animation-delay: 0.85s; }
}
@keyframes ray-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ray-out { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.lockup__text { position: relative; z-index: 1; padding-block: clamp(1rem, 3vw, 2.5rem); container-type: inline-size; }
.lockup__school {
  font-size: clamp(0.85rem, 0.6rem + 0.8vw, 1.15rem); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.34em; color: var(--helmet);
}
.lockup__name { font-size: var(--step-hero); font-size: clamp(3.25rem, 21cqi, 8.25rem); font-weight: 600; line-height: 0.95; letter-spacing: -0.02em; margin-block: 0.12em 0.2em; margin-left: -0.04em; }
.lockup__tagline { margin-top: clamp(1rem, 2.4vw, 1.75rem); font-size: clamp(1.4rem, 1rem + 1.6vw, 2.25rem); font-style: italic; color: var(--slate); line-height: 1.2; }
.lockup__genres {
  margin-top: clamp(0.9rem, 2vw, 1.5rem); font-size: clamp(0.95rem, 0.7rem + 0.9vw, 1.3rem); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.24em;
}
.lockup__genres i { display: inline-block; width: 0.3em; height: 0.3em; margin-inline: 0.35em 0.6em; border-radius: 50%; vertical-align: 0.22em; font-size: 1em; overflow: hidden; text-indent: -9em; background: currentColor; }
.lockup__genres i:nth-of-type(1) { color: var(--pink); }
.lockup__genres i:nth-of-type(2) { color: var(--blue); }
.lockup .actions { margin-top: clamp(1.5rem, 3.5vw, 2.5rem); }

@media (max-width: 50rem) {
  .hero { padding-top: 1rem; }
  .lockup { grid-template-columns: 1fr; row-gap: 1.25rem; }
  .lockup__crest { max-width: min(62vw, 17rem); justify-self: start; }
  .prism { display: none; }
  .lockup__text { padding-block: 0; }
}

/* Contest band */
.contest { position: relative; background: var(--ink); color: var(--paper); }
.contest::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--spectrum); }
.contest .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.contest__season { font-style: italic; font-size: var(--step-1); color: #c9cfe3; }
.contest h2 { font-size: var(--step-4); margin-top: 0.15em; }
.contest__pitch { margin-top: 1.1rem; max-width: 34ch; font-size: var(--step-1); line-height: 1.4; }
.contest .actions { margin-top: 2rem; }
.contest .facts { padding-top: 0.6rem; column-gap: 0; row-gap: 0; }
.contest .facts dt { color: #c9cfe3; padding-right: 1.75rem; }
.contest .facts dt, .contest .facts dd { padding-block: 0.6rem; border-bottom: 1px solid rgba(247, 244, 235, 0.22); }
.contest a:not(.button) { color: var(--paper); }
.contest .ph { background: rgba(242, 114, 183, 0.3); box-shadow: 0 0 0 0.12em rgba(242, 114, 183, 0.3); }
.contest :focus-visible { outline-color: var(--pink); }
@media (max-width: 50rem) { .contest .wrap { grid-template-columns: 1fr; } }
@media (max-width: 22rem) { .contest .facts dt { border-bottom: 0; padding-bottom: 0; } .contest .facts dd { padding-top: 0; margin-bottom: 0; } }

/* Three kinds of work, one color of the beam each */
.genres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.75rem, 4vw, 3.5rem); }
.genre { padding-top: 1.1rem; border-top: 4px solid; }
.genre--fiction { border-color: var(--blue); }
.genre--poetry { border-color: var(--pink); }
.genre--art { border-color: var(--red); }
.genre h3 { font-size: var(--step-3); font-weight: 600; letter-spacing: -0.012em; line-height: 1.1; }
.genre p { margin-top: 0.6rem; }
@media (max-width: 50rem) { .genres { grid-template-columns: 1fr; } }

/* Latest issue */
.latest { background: var(--paper-deep); }
.latest .wrap { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.latest__kicker { font-style: italic; font-size: var(--step-1); color: var(--slate); }
.latest h2 { margin-top: 0.1em; }
.latest__blurb { margin-top: 1rem; max-width: 46ch; }
.latest .actions { margin-top: 1.75rem; }
@media (max-width: 40rem) {
  .latest .wrap { grid-template-columns: 1fr; }
  .latest .cover { max-width: 13rem; }
}

/* Meetings line */
.meet .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: end; }
.meet h2 { max-width: 28ch; }
.section + .meet { padding-top: 0; }
.meet p.meet__line { margin-top: 0.9rem; max-width: 36ch; font-size: var(--step-2); font-weight: 500; line-height: 1.25; }
.meet p { margin-top: 1rem; max-width: 48ch; }
@media (max-width: 50rem) { .meet .wrap { grid-template-columns: 1fr; align-items: start; justify-items: start; } }

/* 7. Inner pages ---------------------------------------------------------- */
.page-head { padding-block: clamp(2rem, 6vw, 4.5rem) clamp(2rem, 5vw, 3.5rem); }
.page-head h1 { font-size: clamp(3rem, 1.6rem + 6vw, 6rem); line-height: 1; letter-spacing: -0.02em; margin-left: -0.03em; }
.page-head .rule { margin-top: 1.25rem; }
.page-head p { margin-top: 1.5rem; max-width: 34ch; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); font-style: italic; line-height: 1.25; color: var(--slate); }

.page-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); gap: clamp(2.5rem, 7vw, 6rem); align-items: start; padding-bottom: clamp(4rem, 9vw, 7rem); }
.page-body--single { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 56rem) { .page-body { grid-template-columns: 1fr; } }
@media (min-width: 56.01rem) { .page-body--facts-first .aside-col { order: 2; } }

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.1rem; }
.prose h2 { font-size: var(--step-2); margin-top: 3rem; scroll-margin-top: 1.5rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 2rem; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: 0.45rem; }
.prose .steps { padding-left: 0; }
.prose li::marker { color: var(--slate); }
.prose .facts { margin-top: 1.25rem; }
.prose strong { font-weight: 600; }
.prose--wide { max-width: 100%; }
.prose--wide p { font-size: var(--step-1); line-height: 1.5; }
.coming-soon { font-size: var(--step-3); font-style: italic; color: var(--slate); padding-bottom: clamp(3rem, 8vw, 6rem); }

/* Side panel: the practical facts for the page */
.aside { background: var(--paper-deep); padding: 1.75rem 1.75rem 2rem; border-left: 3px solid; border-image: var(--spectrum-down) 1; }
.aside h2 { font-size: var(--step-1); line-height: 1.25; letter-spacing: 0; }
.aside > * + * { margin-top: 0.9rem; }
.aside .facts { column-gap: 1rem; }
.aside address { font-style: normal; }
.aside + .aside { margin-top: 1.5rem; }

/* Dates table */
.dates { width: 100%; border-collapse: collapse; margin-top: 1.25rem; }
.dates th, .dates td { text-align: left; vertical-align: top; padding: 0.65rem 0; border-bottom: 1px solid rgba(31, 39, 64, 0.2); }
.dates th { font-weight: 400; padding-right: 1.5rem; }
.dates td { white-space: nowrap; }
.dates thead th { font-style: italic; color: var(--slate); }
@media (max-width: 30rem) { .dates td { white-space: normal; } }

/* Contact rows */
.contact-list { list-style: none; padding: 0; max-width: 46rem; }
.contact-list li { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 0.25rem 2rem; padding-block: 1.4rem; border-bottom: 1px solid rgba(31, 39, 64, 0.2); }
.contact-list li:first-child { border-top: 1px solid rgba(31, 39, 64, 0.2); }
.contact-list h2 { font-size: var(--step-1); font-style: italic; font-weight: 400; color: var(--slate); line-height: 1.3; letter-spacing: 0; }
.contact-list .big { font-size: var(--step-2); font-weight: 500; line-height: 1.2; overflow-wrap: anywhere; }
.contact-list p + p { margin-top: 0.35rem; }
@media (max-width: 36rem) { .contact-list li { grid-template-columns: 1fr; } }

/* 8. Archive -------------------------------------------------------------- */
.year + .year { margin-top: clamp(3rem, 7vw, 5rem); }
.year > h2 { font-size: var(--step-2); padding-bottom: 0.6rem; border-bottom: 1px solid rgba(31, 39, 64, 0.25); }
.issues { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: clamp(1.75rem, 4vw, 3rem); list-style: none; padding: 0; margin-top: 2rem; }
.issue h3 { margin-top: 1rem; }
.issue p { margin-top: 0.2rem; color: var(--slate); }
.issue .download { display: inline-block; margin-top: 0.5rem; font-weight: 500; }
.issue a.cover { text-decoration: none; transition: transform 0.2s ease; }
.issue a.cover:hover { transform: translateY(-3px); }

/* Covers.
   Use <img class="cover" src="issues/covers/…jpg"> when a real cover image exists.
   Otherwise <div class="cover cover--drawn"> draws a stand-in from the logo colors. */
.cover { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--paper-deep); box-shadow: 0 1px 0 rgba(31, 39, 64, 0.25), 0 14px 28px -18px rgba(31, 39, 64, 0.55); }
.cover--drawn { position: relative; overflow: hidden; background: var(--paper); border: 1px solid rgba(31, 39, 64, 0.18); color: var(--ink); }
.cover--drawn::before, .cover--drawn::after { content: ""; position: absolute; left: -30%; width: 160%; }
.cover--drawn::before { top: 44%; height: 2px; background: var(--helmet); opacity: 0.5; transform: rotate(-18deg); }
.cover--drawn::after { top: 52%; height: 30%; background: var(--spectrum-down); transform: rotate(-18deg); opacity: 0.92; }
.cover--b::before { transform: rotate(24deg); top: 30%; }
.cover--b::after { transform: rotate(24deg); top: 36%; height: 22%; }
.cover--c::before { transform: rotate(-52deg); top: 50%; }
.cover--c::after { transform: rotate(-52deg); top: 54%; height: 16%; }
.cover__title { position: absolute; z-index: 1; left: 9%; top: 7%; font-size: 1.6rem; font-weight: 600; line-height: 1; letter-spacing: -0.01em; }
.cover__issue { position: absolute; z-index: 1; left: 9%; bottom: 7%; font-style: italic; font-size: 1.05rem; line-height: 1.2; background: var(--paper); padding: 0.1em 0.4em; margin-left: -0.4em; }

/* 9. Submission form ------------------------------------------------------ */
.form-frame { margin-top: 1.5rem; border: 1px solid rgba(31, 39, 64, 0.25); background: #fff; }
.form-frame iframe { display: block; width: 100%; height: 75rem; max-height: 85vh; border: 0; }
.form-missing { padding: 2rem; background: var(--paper-deep); }
.form-missing > * + * { margin-top: 0.75rem; }
.form-help { margin-top: 1rem; color: var(--slate); }

/* Wider layout for the submit page: guidelines beside the form */
.steps { list-style: none; padding: 0; counter-reset: step; }
.steps li { counter-increment: step; position: relative; padding-left: 2.6rem; }
.steps li + li { margin-top: 0.9rem; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: -0.1em; font-size: var(--step-2); font-weight: 600; line-height: 1; color: var(--deep-blue); font-variant-numeric: lining-nums; }

/* 10. Footer -------------------------------------------------------------- */
.site-footer { border-top: 1px solid rgba(31, 39, 64, 0.2); padding-block: clamp(2.5rem, 6vw, 4rem) 2rem; font-size: var(--step--1); }
.site-footer .wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 2rem clamp(2rem, 5vw, 4rem); }
.site-footer h2 { font-size: var(--step--1); font-style: italic; font-weight: 400; color: var(--slate); letter-spacing: 0; line-height: 1.55; }
.site-footer ul { list-style: none; padding: 0; }
.site-footer li { margin-top: 0.3rem; }
.site-footer a { color: var(--ink); overflow-wrap: anywhere; }
.site-footer .footer-links { padding-top: 1.65rem; }
@media (max-width: 44rem) { .site-footer .footer-links { padding-top: 0; } }
.site-footer address { font-style: normal; margin-top: 0.75rem; color: var(--slate); }
.site-footer .brand span { font-size: 1.5rem; }
.signoff { grid-column: 1 / -1; margin-top: 1.5rem; text-align: center; }
.signoff p:first-child { font-style: italic; font-size: var(--step-1); color: var(--slate); }
.signoff .rule { margin: 0.9rem auto 1.1rem; width: 12rem; height: 3px; }
.signoff small { font-size: 0.95rem; color: var(--slate); }
@media (max-width: 44rem) { .site-footer .wrap { grid-template-columns: 1fr 1fr; } .site-footer .wrap > :first-child { grid-column: 1 / -1; } }
@media (max-width: 30rem) { .site-footer .wrap { grid-template-columns: 1fr; } }

@media print {
  .site-nav, .nav-toggle, .ray, .actions, .form-frame { display: none !important; }
  body { background: #fff; }
}