/* One hue. #659ad3 is the brand; paper, ink, and every gray are steps of it.
 * Display: Archivo Narrow. Body: Newsreader.
 */

@import "tokens.css";

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

html,
body {
  overflow-x: clip;
}

html {
  /* The design is tuned 10% above the browser default ? every type size
     and space token is in rem, so this one number scales the whole page
     the way 110% browser zoom would. */
  font-size: 110%;
  background: var(--color-paper);
  /* Sticky mast paints over the viewport top. Fragment navigation aligns
     a target to the scrollport's top edge, so the scrollport itself has
     to start below the mast or the section heading is covered. */
  scroll-padding-top: calc(var(--mast-offset) + var(--space-sm));
}

body {
  margin: 0;
  min-width: 0;
  /* isolate makes body a stacking context, which is what lets the ambient
     layers below work: without it, body::before/::after at z-index:-1 are
     hoisted into the ROOT stacking context, where they paint in the
     "negative z-index" step and body's own opaque paper background then
     paints OVER them in the "in-flow block backgrounds" step (CSS 2.1
     App. E). Inside body's own stacking context the order flips to:
     body background, then the negative-z layers, then content.
     isolation (unlike position:relative) does this without becoming the
     containing block for absolutely-positioned descendants, and it does
     not trap the layers' fixed positioning (only transform/filter/
     perspective would). */
  isolation: isolate;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

/* Ambient background: two fixed layers of soft blue wash, every color a step
   of the one hue. The gradients stay frozen inside each layer and only the
   layer's transform animates, so the compositor does all the work and nothing
   repaints per frame. inset:-15% oversizes each layer so the drift never
   exposes an edge. The global reduced-motion rule collapses these to a
   static wash. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: -15%;
  z-index: -1;
  pointer-events: none;
}

body::before {
  background:
    radial-gradient(45% 42% at 24% 26%, rgb(101 154 211 / 0.11), transparent 70%),
    radial-gradient(38% 40% at 78% 18%, rgb(31 95 168 / 0.07), transparent 70%);
  animation: bg-drift-a 32s var(--ease-in-out) infinite;
}

body::after {
  background:
    radial-gradient(52% 46% at 76% 78%, rgb(101 154 211 / 0.09), transparent 70%),
    radial-gradient(40% 36% at 28% 82%, rgb(227 234 242 / 0.8), transparent 70%);
  animation: bg-drift-b 46s var(--ease-in-out) infinite;
}

/* 0%/100% identical + ease-in-out (zero velocity at the loop point) = no
   visible seam when the animation restarts. 32s and 46s are incommensurate,
   so the two layers' combined pattern takes ~12 minutes to repeat. */
@keyframes bg-drift-a {
  0%,
  100% {
    transform: translate3d(-3%, -2%, 0) scale(1);
  }
  50% {
    transform: translate3d(3%, 2.5%, 0) scale(1.07);
  }
}

@keyframes bg-drift-b {
  0%,
  100% {
    transform: translate3d(2.5%, 2.5%, 0) scale(1.06);
  }
  50% {
    transform: translate3d(-2.5%, -3%, 0) scale(1);
  }
}

img,
svg {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--color-accent-2);
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--color-ink);
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: var(--space-md);
  top: var(--space-md);
  z-index: var(--z-focus);
  transform: translateY(-200%);
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-ink);
  color: var(--color-paper);
  text-decoration: none;
  white-space: nowrap;
}

.skip:focus {
  transform: none;
}

.mast {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  display: grid;
  gap: var(--space-xs);
  padding: max(var(--space-sm), env(safe-area-inset-top, 0px))
    var(--page-pad-right) 0 var(--page-pad-left);
  background: var(--color-paper);
  text-align: center;
}

.mast-line {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-variant: small-caps;
  letter-spacing: 0.06em;
  line-height: 1.35;
  color: var(--color-muted);
}

.mast-brand {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}

.mast-home {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.mast-mark {
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
}
.mast-mark path[stroke-dasharray] {
  stroke: var(--color-accent);
  opacity: 1;
}
.mast-mark circle {
  fill: var(--color-accent);
}

.mast-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 5vw, 2.25rem);
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.04em;
  line-height: 1;
  overflow-wrap: anywhere;
}

.mast-name b {
  font-weight: 700;
}

.mast-name span {
  font-weight: 700;
  opacity: 0.72;
}

.menu {
  display: grid;
  place-items: center;
  position: static;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: var(--rule-hair) solid var(--color-ink);
  background: var(--color-paper);
  color: var(--color-ink);
  cursor: pointer;
  touch-action: manipulation;
}

.menu svg {
  width: 1.25rem;
  height: 0.85rem;
}

.mast-nav ul {
  display: none;
  margin: 0;
  padding: var(--space-sm) 0 var(--space-md);
  list-style: none;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-xs);
}

.mast.is-open .mast-nav ul {
  display: flex;
}

.mast-nav a {
  display: grid;
  place-items: center;
  min-height: 2.75rem;
  padding-inline: var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-ink);
  white-space: nowrap;
}

.mast-nav a:hover {
  color: var(--color-accent-2);
}

.mast-nav .cta {
  border: var(--rule-hair) solid var(--color-ink);
}

.mast-rule,
.foot-rule {
  position: relative;
  height: 0.7rem;
  border: 0;
  border-top: var(--rule-heavy) solid var(--color-ink);
}

.mast-rule {
  margin: 0 calc(var(--page-pad-right) * -1) 0 calc(var(--page-pad-left) * -1);
}

.foot-rule {
  margin: 0;
}

.mast-rule::after,
.foot-rule::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 5px;
  border-top: 2px dashed var(--color-accent);
}

.page {
  display: grid;
  gap: var(--space-2xl);
  padding: var(--space-md) var(--page-pad-right) var(--space-2xl)
    var(--page-pad-left);
}

.brief {
  display: grid;
  gap: var(--space-md);
  justify-items: center;
  align-content: start;
  text-align: center;
  min-width: 0;
  padding-top: var(--space-sm);
  /* On a phone, forcing this block to 100svh leaves a blank band
     under the sit-line: the copy is shorter than the leftover
     viewport after mast + dock. Let the content set the height.
     Desktop keeps a first-screen poster so How it works does not
     peek into the opening view. */
}

.brief-copy {
  display: grid;
  justify-items: center;
  min-width: 0;
}

.brief h1 {
  margin: 0 0 var(--space-sm);
  font-size: clamp(2.35rem, 8.5vw, 5rem);
  max-width: 14ch;
}

/* The mark is a 1-D stroke, so preserveAspectRatio="none" stretches it to the
   word without distorting a shape. Em sizing keeps it proportional across the
   fluid h1; absolute placement keeps it out of the line box (no layout shift). */
.brief h1 .asis {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.brief h1 .asis-mark {
  position: absolute;
  left: -2%;
  bottom: -0.06em;
  width: 104%;
  height: 0.22em;
  color: var(--color-accent-2);
  pointer-events: none;
}

/* Draws itself once, like a hand underlining the word. pathLength="200"
   normalizes the geometry so dash units are exact at any stretch. */
.brief h1 .asis-mark path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: asis-draw 600ms var(--ease-out) 150ms forwards;
}

@keyframes asis-draw {
  to {
    stroke-dashoffset: 0;
  }
}

.brief .lede {
  font-size: var(--text-lg);
}

.brief .actions {
  margin-top: var(--space-md);
}

.brief .btn {
  min-height: 3.25rem;
  padding: 0 var(--space-lg);
  font-size: var(--text-md);
}

.who-scan {
  margin: var(--space-sm) 0 0;
  color: var(--color-muted);
}

.sit-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2xs) 0;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 36rem;
  color: var(--color-muted);
  font-size: var(--text-md);
  line-height: 1.45;
}

.sit-line li {
  white-space: nowrap;
}

.sit-line li:not(:last-child)::after {
  content: "\00B7";
  margin-inline: 0.55em;
  color: var(--color-neutral);
}

#how-it-works {
  max-width: 52rem;
}

.who-band {
  display: grid;
  gap: var(--space-xl);
  min-width: 0;
}

.who-head h2 {
  margin: 0 0 var(--space-xs);
}

.who-role {
  margin: 0;
  color: var(--color-muted);
}

.who-split {
  display: grid;
  gap: var(--space-xl);
  align-items: start;
  min-width: 0;
}

/* Left column: heading stacked directly over the copy with a fixed gap.
   Keeping them in one stacked container (instead of separate grid rows)
   means no track can be inflated by the taller card column ? the head-to-
   copy distance is always exactly this gap. */
.who-main {
  display: grid;
  gap: var(--space-xl);
  align-content: start;
  min-width: 0;
}

.who-copy {
  display: grid;
  align-content: start;
  gap: var(--space-md);
  min-width: 0;
}

.who-copy > .prose {
  font-size: var(--text-lg);
  line-height: 1.45;
  max-width: 38rem;
}

.who-place {
  margin: 0;
  color: var(--color-muted);
}

.who-money {
  display: grid;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
  padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
}

.who-money__label {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.who-card {
  display: grid;
  gap: var(--space-md);
  min-width: 0;
  margin-left: calc(var(--page-pad-left) * -1);
  margin-right: calc(var(--page-pad-right) * -1);
  padding: var(--space-lg) var(--page-pad-right) var(--space-lg)
    var(--page-pad-left);
  background: var(--color-paper-2);
  border-top: var(--rule-heavy) solid var(--color-ink);
}

.who-card h3 {
  margin: 0;
  max-width: none;
  font-size: var(--text-lg);
}

.who-card__note {
  margin: 0;
  max-width: 42ch;
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.who-card__addr {
  margin: 0;
  font-size: var(--text-sm);
}

.who-card__addr a {
  color: inherit;
}

.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--page-pad-right)
    max(var(--space-md), env(safe-area-inset-bottom, 0px)) var(--page-pad-left);
  background: var(--color-paper);
  border-top: var(--rule-hair) solid var(--color-rule);
  transform: translateY(0);
  opacity: 1;
  transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out);
}

.dock.is-away {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

.dock-who {
  display: none;
  margin: 0;
  min-width: 0;
  color: var(--color-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dock .btn {
  flex: 1 1 auto;
  width: 100%;
}

body:has(.dock:not(.is-away)) {
  padding-bottom: var(--dock-offset);
}

.display,
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.05;
  overflow-wrap: anywhere;
  min-width: 0;
}

h1 {
  margin: 0 0 var(--space-lg);
  font-size: var(--text-display);
  max-width: 14ch;
}

h2 {
  margin: 0 0 var(--space-md);
  font-size: var(--text-display-s);
  max-width: 18ch;
}

h3 {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-xl);
}

.lede,
.prose {
  margin: 0;
  max-width: var(--measure);
}

.lede {
  font-size: var(--text-lg);
  line-height: 1.4;
}

.prose + .prose {
  margin-top: var(--space-md);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.btn {
  display: inline-grid;
  place-items: center;
  min-height: 2.75rem;
  padding: 0 var(--space-md);
  border: var(--rule-hair) solid var(--color-ink);
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}

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

.btn:active,
.btn.is-active {
  transform: translateY(1px);
}

.btn[aria-disabled="true"],
.btn:disabled,
.btn.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.btn.is-busy {
  opacity: 0.7;
}

.btn--fill {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}

.btn--fill:hover,
.btn--fill.is-hover {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-paper);
}

.not-fit {
  margin: var(--space-lg) 0 0;
  padding: var(--space-md);
  max-width: var(--measure);
  background: var(--color-paper-3);
  border-left: var(--rule-heavy) solid var(--color-accent);
  color: var(--color-ink);
}

.spec {
  width: 100%;
  border-collapse: collapse;
}

.spec,
.spec tbody,
.spec tr,
.spec th,
.spec td {
  display: block;
}

.spec th,
.spec td {
  width: auto;
  text-align: left;
  vertical-align: top;
}

.spec th {
  padding: var(--space-md) 0 0;
  border-bottom: 0;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.spec td {
  padding: var(--space-2xs) 0 var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  font-variant-numeric: tabular-nums;
}

.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm);
  align-items: start;
  margin: 0;
  max-width: var(--measure);
  font-size: var(--text-sm);
}

.consent input {
  width: var(--space-lg);
  height: var(--space-lg);
  margin-top: var(--space-3xs);
  accent-color: var(--color-accent-2);
}

.form {
  display: grid;
  gap: var(--space-md);
  max-width: 36rem;
}

.field {
  display: grid;
  gap: var(--space-2xs);
}

.field span {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.opt {
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-muted);
}

.field input,
.field textarea {
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  padding: var(--space-sm);
  border: var(--rule-hair) solid var(--color-ink);
  border-radius: var(--radius);
  background: var(--color-paper);
  color: var(--color-ink);
  font: inherit;
  outline: 2px solid transparent;
}

.field textarea {
  min-height: var(--space-4xl);
  resize: vertical;
}

.field input:hover,
.field textarea:hover,
.field input.is-hover,
.field textarea.is-hover {
  background: var(--color-paper-2);
}

.field input:focus-visible,
.field textarea:focus-visible,
.field input.is-focus,
.field textarea.is-focus {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

.field input:disabled,
.field textarea:disabled,
.field input.is-disabled,
.field textarea.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--color-paper-2);
}

.field.is-error input,
.field.is-error textarea {
  border-color: var(--color-danger);
}

.form-status {
  margin: 0;
  min-height: 1lh;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.form-status.is-error {
  color: var(--color-danger);
}

.form-status.is-ok {
  color: var(--color-accent-2);
}

.lead {
  width: min(34rem, calc(100% - var(--page-pad-left) - var(--page-pad-right)));
  max-height: calc(100dvh - var(--space-lg) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  /* The cap above is shorter than the form on most screens, so this box
     still scrolls. The native scrollbar is UA chrome; wheel, trackpad,
     touch, and keyboard still move the content. */
  overflow: auto;
  scrollbar-width: none;
  margin: auto;
  padding: var(--space-lg);
  padding-bottom: max(var(--space-lg), env(safe-area-inset-bottom, 0px));
  border: var(--rule-hair) solid var(--color-ink);
  border-top: var(--rule-heavy) dashed var(--color-accent);
  background: var(--color-paper);
  color: var(--color-ink);
}

.lead::-webkit-scrollbar {
  display: none;
}

.lead::backdrop {
  background: rgb(16 28 38 / 0.55);
}

.lead[open] {
  animation: lead-in var(--dur-short) var(--ease-out);
}

@keyframes lead-in {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
}

.lead h2 {
  margin: 0 0 var(--space-xs);
  font-size: var(--text-2xl);
  max-width: none;
}

.lead .form {
  max-width: none;
  margin-top: var(--space-lg);
}

.lead-close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: var(--rule-hair) solid transparent;
  background: none;
  color: var(--color-muted);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1;
  cursor: pointer;
}

.lead-close:hover {
  color: var(--color-ink);
  border-color: var(--color-ink);
}

.lead-alt {
  margin: var(--space-md) 0 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.lead-alt a {
  color: var(--color-accent-2);
}

/* Footer is page chrome, not a letter close: full-bleed band, mast language. */
.foot {
  background: var(--color-paper-2);
  padding: 0 0 var(--space-xl);
}

.foot-inner {
  display: grid;
  gap: var(--space-xs) var(--space-lg);
  padding: var(--space-lg) var(--page-pad-right) 0 var(--page-pad-left);
}

.foot-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
  width: max-content;
  color: inherit;
  text-decoration: none;
}

.foot-brand:hover {
  color: var(--color-ink);
}

.foot-brand .mast-mark {
  width: 1.35rem;
  height: 1.35rem;
}

.foot-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}

.foot-name span {
  opacity: 0.72;
}

.foot-place {
  margin: 0;
  font-size: var(--text-xs);
  font-variant: small-caps;
  letter-spacing: 0.12em;
  color: var(--color-muted);
}

.foot-reach {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15em 1.25em;
  margin: 0;
  font-size: var(--text-sm);
}

.foot-reach a {
  color: inherit;
}

.foot-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);
  margin-top: var(--space-xs);
}

.foot-legal a {
  display: grid;
  place-items: center;
  min-height: 2.75rem;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-ink);
  white-space: nowrap;
}

.foot-legal a:hover,
.foot-legal a[aria-current="page"] {
  color: var(--color-accent-2);
}

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

.foot-legal a:active {
  color: var(--color-ink);
}

.doc-main {
  padding: var(--space-xl) var(--page-pad-right) var(--space-2xl)
    var(--page-pad-left);
}

.doc-main h1 {
  max-width: 18ch;
  font-size: var(--text-display-s);
}

.updated {
  margin: calc(var(--space-md) * -1) 0 var(--space-lg);
  color: var(--color-muted);
}

.doc-main h2 {
  margin: var(--space-2xl) 0 var(--space-sm);
  font-size: var(--text-2xl);
  max-width: none;
}

.doc-main h3 {
  margin: var(--space-lg) 0 var(--space-xs);
}

.doc-main p,
.doc-main li {
  max-width: var(--measure);
}

.doc-main ul {
  padding-left: 1.2em;
}

@media (min-width: 40rem) {
  .mast-line {
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
  }

  .mast-brand {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .mast-nav ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-xs) var(--space-md);
    padding-bottom: var(--space-sm);
  }

  .brief {
    gap: var(--space-lg);
    padding-top: var(--space-lg);
  }

  .brief h1 {
    margin-bottom: var(--space-md);
    font-size: clamp(2.75rem, 9vw, 5rem);
  }

  .brief .lede {
    font-size: var(--text-xl);
  }

  .brief .actions {
    margin-top: var(--space-lg);
  }

  .spec {
    display: table;
  }

  .spec tbody {
    display: table-row-group;
  }

  .spec tr {
    display: table-row;
  }

  .spec th,
  .spec td {
    display: table-cell;
    padding: var(--space-md) 0;
    border-bottom: var(--rule-hair) solid var(--color-rule);
  }

  .spec th {
    width: 7.5rem;
    padding-right: var(--space-md);
  }

  .dock-who {
    display: block;
  }

  .dock .btn {
    flex: 0 0 auto;
    width: auto;
  }

  .lead {
    padding: var(--space-xl);
  }

  .foot-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .foot-brand,
  .foot-place {
    grid-column: 1;
  }

  .foot-legal {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-content: end;
    align-content: start;
    margin-top: 0;
  }

  .menu {
    display: none;
  }

  h1 {
    max-width: 16ch;
  }
}

@media (min-width: 60rem) {
  .page {
    gap: var(--space-3xl);
    padding: var(--space-lg) var(--page-pad-right) var(--space-3xl)
      var(--page-pad-left);
  }

  .brief {
    gap: var(--space-xl);
    padding-top: var(--space-xl);
    min-height: calc(100svh - var(--mast-offset) - var(--space-lg));
  }

  /* One row, two columns: .who-main (heading + copy) left, card right.
     align-items:start keeps both column tops level, so the card's top edge
     sits flush with the "Who we are" heading. No spanning items, so the
     card's extra height can never inflate the heading's track. */
  .who-split {
    grid-template-columns: minmax(0, 1.2fr) minmax(20rem, 0.8fr);
    gap: var(--space-2xl);
  }

  .who-card {
    margin-inline: 0;
    padding: var(--space-lg);
  }

  .mast-name {
    letter-spacing: 0.08em;
  }

  .doc-main {
    padding: var(--space-2xl) var(--page-pad-right) var(--space-3xl)
      var(--page-pad-left);
  }
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    transform: translateY(-1.5px);
  }

  .btn:active {
    transform: translateY(0);
  }
}

@media (pointer: coarse) {
  .btn,
  .mast-nav a,
  .menu,
  .foot-legal a {
    min-height: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
    transition-property: opacity !important;
  }
}