/* Hawk & Wolf — hawknwolf.com
   The page is the studio backdrop from the campaign photograph: smoke at the top,
   falling to sea-glass. Black is the wordmark's black. Cormorant speaks, Jost informs. */

@font-face { font-family: "Cormorant"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/cormorant-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/cormorant-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/cormorant-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant"; font-style: italic; font-weight: 500; font-display: swap; src: url("/fonts/cormorant-latin-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/jost-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/jost-latin-500-normal.woff2") format("woff2"); }

:root {
  --smoke: #4e4d4b;
  --pewter: #747576;
  --mist: #9aa4a6;
  --seaglass: #aabbbb;
  --ivory: #efeae0;
  --ink: #000;
  --error: #6b1010;
  --night: #06080d;
  --store-blue: #84ade2;   /* the store's walls, sampled from the 3D walk-through */
  --error-on-ink: #f0b4a6;
  --rule: rgba(0, 0, 0, .32);
  --rule-on-ink: rgba(239, 234, 224, .4);

  /* Sampled from the edges of the campaign photograph, top to bottom. */
  --backdrop: linear-gradient(180deg, #4e4d4b 0%, #535351 5%, #5b5b5a 10%, #747576 25%, #7c8080 30%, #8d9495 40%, #9aa4a6 50%, #a7b2b4 60%, #acbabb 70%, #aebebe 80%, #afbfbf 90%, #aabbbb 100%);

  --serif: "Cormorant", "Cormorant Garamond", Garamond, Georgia, serif;
  --sans: "Jost", "Futura", "Avenir Next", "Century Gothic", system-ui, sans-serif;
  --gutter: clamp(20px, 4vw, 56px);
  --ease: cubic-bezier(.7, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--seaglass);
  color: var(--ink);
  font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, p, ul, dl, figure { margin: 0; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
::selection { background: var(--ink); color: var(--ivory); }

.skip {
  position: absolute; left: 12px; top: -100px; z-index: 10;
  background: var(--ink); color: var(--ivory); padding: 10px 16px; text-decoration: none;
}
.skip:focus { top: 12px; }

.wordmark { display: block; width: 100%; height: auto; }

/* ---------- top bar ---------- */

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px var(--gutter);
}
.topbar__brand { display: block; width: clamp(150px, 16vw, 210px); color: var(--ink); }
.topbar__nav { display: flex; gap: clamp(18px, 2.4vw, 32px); font-size: 15px; }
.topbar__nav a { text-decoration: none; padding: 6px 0; }
.topbar__nav a:hover, .topbar__nav a[aria-current="page"] { text-decoration: underline; }

.topbar--hero { position: absolute; inset: 0 0 auto 0; z-index: 3; color: var(--ivory); }
.topbar--hero .topbar__nav { margin-left: auto; }
.topbar__join { font-size: 15px; padding: 6px 0; }
.topbar__wide { display: contents; }
@media (max-width: 520px) { .topbar__wide { display: none; } }

/* ---------- hero ---------- */
/* Narrow and portrait screens: photograph, then words on the backdrop's last colour. */

.hero { position: relative; display: grid; grid-template-areas: "stage" "intro" "join"; }
.hero__stage { grid-area: stage; display: flex; justify-content: center; background: var(--backdrop); }
.hero__photo, .hero__photo img { display: block; }
.hero__photo img {
  width: auto; height: auto; max-width: 100%;
  max-height: 80vh; max-height: 80svh;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.hero__intro { grid-area: intro; padding: 36px var(--gutter) 8px; }
.hero__join { grid-area: join; padding: 28px var(--gutter) 64px; max-width: 520px; }

.hero__whisper {
  font: italic 400 clamp(40px, 11vw, 64px)/1 var(--serif);
  letter-spacing: -.01em; text-wrap: balance;
}
.hero__title { margin-top: 18px; font: 500 15px/1.45 var(--sans); max-width: 30ch; }

/* Wide screens: the photograph stands full height in the centre; the backdrop
   carries on either side of it so the studio fills the whole window. */
@media (min-width: 1000px) and (min-aspect-ratio: 5/4) {
  .hero {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "intro stage join";
    min-height: 100vh; min-height: 100svh;
    background: var(--backdrop);
  }
  .hero__stage { background: none; height: 100vh; height: 100svh; }
  .hero__photo img { height: 100vh; height: 100svh; max-height: none; max-width: none; }
  .hero__intro, .hero__join { align-self: end; padding-bottom: clamp(36px, 7svh, 80px); }
  .hero__intro { padding-left: var(--gutter); padding-right: 24px; }
  .hero__join { justify-self: end; width: 100%; max-width: 400px; padding-right: var(--gutter); padding-left: 24px; }
  .hero__whisper { font-size: clamp(36px, 3.3vw, 64px); }
  .topbar__join { display: none; }
}

/* The one orchestrated moment: the photograph opens like an aperture. */
@media (prefers-reduced-motion: no-preference) {
  .hero__photo img { animation: aperture 1.7s var(--ease) .1s both; }
  .hero__intro, .hero__join, .topbar--hero { animation: appear .8s ease-out 1.15s both; }
}
@keyframes aperture { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }

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

.field { margin-top: 20px; }
.field label, .choice legend { display: block; font: 500 14px/1.3 var(--sans); }
.field input, .field textarea {
  display: block; width: 100%; margin: 0;
  font: 400 18px/1.4 var(--sans); color: inherit;
  background: transparent; border: 0; border-bottom: 1px solid currentColor; border-radius: 0;
  padding: 10px 0 9px;
  -webkit-appearance: none; appearance: none;
}
.field textarea { resize: vertical; min-height: 104px; }
.field input:focus-visible, .field textarea:focus-visible { outline: none; box-shadow: inset 0 -2px 0 currentColor; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-bottom-width: 2px; padding-bottom: 8px; }
.field__hint { margin-top: 6px; font-size: 14px; line-height: 1.4; opacity: .85; }
.optional { font-weight: 400; opacity: .8; }

.button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 54px; margin-top: 24px; padding: 0 28px;
  background: var(--ink); color: var(--ivory);
  border: 1px solid var(--ink); border-radius: 0;
  font: 500 16px/1.2 var(--sans); letter-spacing: .02em; text-decoration: none;
  cursor: pointer; transition: background-color .2s, color .2s;
}
.button:hover { background: var(--smoke); border-color: var(--smoke); text-decoration: none; }
.button[aria-busy="true"] { cursor: progress; opacity: .7; }
.button--outline { width: auto; background: transparent; color: var(--ink); }
.button--outline:hover { background: var(--ink); color: var(--ivory); border-color: var(--ink); }

.msg { margin-top: 12px; min-height: 1.4em; font-size: 15px; line-height: 1.4; }
.msg.is-error { color: var(--error); }
.fine { margin-top: 4px; font-size: 13px; line-height: 1.5; opacity: .85; max-width: 40ch; }

.linklike {
  display: inline-block; margin-top: 18px; padding: 4px 0;
  background: none; border: 0; color: inherit; cursor: pointer;
  font: 400 14px/1.4 var(--sans); text-decoration: underline; text-underline-offset: .2em;
}

.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.choice { border: 0; margin: 22px 0 0; padding: 0; }
.choice legend { padding: 0; margin-bottom: 10px; }
.choice label { display: inline-block; margin: 0 6px 8px 0; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span {
  display: inline-block; padding: 9px 16px; border: 1px solid currentColor;
  font-size: 15px; line-height: 1.2; transition: background-color .15s, color .15s;
}
.choice input:checked + span { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.choice input:focus-visible + span { outline: 2px solid currentColor; outline-offset: 3px; }

/* ---------- waitlist states ---------- */

.join__lede { font: 400 17px/1.45 var(--sans); max-width: 30ch; }
.join__done:focus { outline: none; }
.join__number {
  font: 500 clamp(56px, 7vw, 88px)/.95 var(--serif);
  letter-spacing: -.01em; font-variant-numeric: lining-nums;
}
.join__title { margin-top: 10px; font: italic 400 30px/1.15 var(--serif); }
.join__hint { margin-top: 18px; font-size: 15px; line-height: 1.5; max-width: 36ch; }
.join__saved { margin-top: 18px; font-size: 16px; }
@media (prefers-reduced-motion: no-preference) {
  .join__number.is-new { animation: aperture 1.1s var(--ease) both; }
}

/* ---------- the list ---------- */

.list {
  display: grid; gap: clamp(36px, 6vw, 96px);
  padding: clamp(72px, 12vw, 168px) var(--gutter);
}
.list__figure img { display: block; width: 100%; height: auto; }
.list__title { font: 500 clamp(36px, 4.4vw, 64px)/1.04 var(--serif); letter-spacing: -.01em; max-width: 15ch; }
.perks { list-style: none; padding: 0; margin-top: clamp(28px, 4vw, 48px); display: grid; gap: 18px; max-width: 42ch; }
.perks li { padding-top: 18px; border-top: 1px solid var(--rule); }
.perks strong { font-weight: 500; }
@media (min-width: 860px) {
  .list { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: end; }
  .list__figure { max-width: 560px; }
}

/* ---------- closing (ink) ---------- */

.closing {
  display: grid; gap: 40px;
  padding: clamp(72px, 11vw, 152px) var(--gutter) clamp(56px, 8vw, 104px);
  background: var(--ink); color: var(--ivory);
}
.closing__title { font: italic 400 clamp(44px, 6.4vw, 96px)/1 var(--serif); letter-spacing: -.01em; max-width: 12ch; }
.closing .join { max-width: 440px; }
@media (min-width: 860px) {
  .closing { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
  .closing .join { justify-self: end; width: 100%; }
}

/* Anything on ink inverts its controls. */
.closing .button, .apply .button { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.closing .button:hover, .apply .button:hover { background: #fff; border-color: #fff; }
.closing .msg.is-error, .apply .msg.is-error { color: var(--error-on-ink); }
.closing .choice input:checked + span, .apply .choice input:checked + span { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.closing ::selection, .apply ::selection, .footer ::selection { background: var(--ivory); color: var(--ink); }

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

.footer { background: var(--ink); color: var(--ivory); padding: 0 var(--gutter) 40px; }
.footer__inner {
  display: grid; gap: 28px; padding-top: 36px; border-top: 1px solid var(--rule-on-ink);
}
.footer__brand { display: block; width: 180px; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 15px; }
.footer__nav a { text-decoration: none; }
.footer__nav a:hover { text-decoration: underline; }
.sub .footer__inner { border-top: 0; }
.footer__legal { font-size: 13px; line-height: 1.6; opacity: .8; }
.footer__store { font-style: normal; font-size: 15px; line-height: 1.55; display: grid; gap: 10px; }
.footer__store-title { font: italic 400 26px/1.1 var(--serif); }
.footer__store a { text-decoration-color: var(--rule-on-ink); }
@media (min-width: 860px) {
  .footer__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-areas: "brand store nav" "legal legal legal";
    align-items: start; row-gap: 48px;
  }
  .footer__brand { grid-area: brand; }
  .footer__store { grid-area: store; }
  .footer__nav { grid-area: nav; flex-direction: column; align-items: flex-end; }
  .footer__legal { grid-area: legal; }
}

/* ---------- inner pages (careers, privacy) ---------- */

.sub { background: linear-gradient(180deg, var(--mist) 0, var(--seaglass) 560px) var(--seaglass) no-repeat; }
.page { padding: clamp(32px, 6vw, 88px) var(--gutter) clamp(72px, 10vw, 140px); }
.page__head { max-width: 900px; }
.display { font: 500 clamp(48px, 8vw, 112px)/.98 var(--serif); letter-spacing: -.015em; text-wrap: balance; }
.display--role { font-size: clamp(44px, 6.4vw, 88px); }
.lede { margin-top: 24px; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; max-width: 52ch; }
.page__section { margin-top: clamp(56px, 8vw, 112px); }
.section-title { font: 500 clamp(30px, 3.4vw, 44px)/1.08 var(--serif); }

.roles { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.roles li { border-bottom: 1px solid var(--rule); }
.role { display: grid; gap: 8px; padding: 26px 0; text-decoration: none; color: inherit; }
.role__title { font: 500 clamp(28px, 3vw, 40px)/1.1 var(--serif); }
.role__summary { font-size: 16px; max-width: 60ch; }
.role__meta { display: grid; gap: 6px; margin-top: 6px; font-size: 14px; }
.role__meta > span { display: inline-flex; align-items: center; gap: 8px; }
.role__meta svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.3; }
.role:hover .role__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .12em; }
@media (min-width: 700px) { .role__meta { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 820px; } }
.empty { margin-top: 24px; max-width: 52ch; }
.open-app p { margin-top: 14px; max-width: 52ch; }

/* Careers: MDV-style page — culture, why join, roles by team, register interest. */
.careers-head { display: grid; gap: clamp(32px, 5vw, 64px); }
.careers-head__text .button--outline { margin-top: 28px; }
.careers-head__figure img { display: block; width: 100%; height: auto; }
@media (min-width: 1000px) {
  .careers-head { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: end; }
}

.perks-grid { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 28px 40px; }
.perks-grid li { padding-top: 18px; border-top: 1px solid var(--rule); }
.perks-grid h3 { font: 500 24px/1.15 var(--serif); }
.perks-grid p { margin-top: 8px; font-size: 16px; max-width: 36ch; }
@media (min-width: 700px) { .perks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .perks-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.role-body .perks-list { list-style: none; padding: 0; }
.role-body .perks-list li::marker { content: none; }
.role-body .perks-list li { margin-top: 14px; }
.role-body .perks-list h3 { display: inline; font: 500 17px/1.5 var(--sans); }
.role-body .perks-list h3::after { content: ". "; }
.role-body .perks-list p { display: inline; margin: 0; }

.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.filters { display: grid; gap: 12px; margin-top: 24px; }
.filters input, .filters select {
  width: 100%; min-height: 48px; padding: 0 14px;
  font: 400 16px/1.2 var(--sans); color: var(--ink);
  background: transparent; border: 1px solid var(--ink); border-radius: 0;
  -webkit-appearance: none; appearance: none;
}
.filters select {
  padding-right: 40px; cursor: pointer;
  background: no-repeat right 14px center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E");
}
.filters input::placeholder { color: rgba(0, 0, 0, .62); }
.filters input:focus-visible, .filters select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (min-width: 860px) { .filters { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); } }
.filters__count { margin-top: 20px; font-size: 14px; }
.page--careers .roles { margin-top: 12px; }

/* ---------- opening: the 3D walk into the store ---------- */
.intro {
  display: none; position: fixed; inset: 0; z-index: 100; place-items: center;
  background: var(--night); transition: background-color .9s ease, opacity .55s ease-out;
}
.has-intro .intro, .intro.is-active { display: grid; }
.has-intro body { overflow: hidden; }
.intro.is-inside { background: var(--store-blue); }
.intro.is-leaving { opacity: 0; pointer-events: none; }
.intro__video { width: 100%; height: 100%; object-fit: cover; }
@media (max-aspect-ratio: 1/1) { .intro__video { height: auto; object-fit: contain; } }
.intro__skip {
  position: absolute; right: calc(var(--gutter) + env(safe-area-inset-right, 0px)); bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  padding: 11px 18px; color: #fff; background: rgba(6, 8, 13, .35); border: 1px solid rgba(255, 255, 255, .65);
  font: 500 14px/1 var(--sans); letter-spacing: .02em; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.intro__skip:hover { background: rgba(6, 8, 13, .6); }
.intro__skip:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* Hold the hero's opening until the walk-in has finished, so one leads into the other. */
.has-intro .hero__photo img, .has-intro .hero__intro, .has-intro .hero__join, .has-intro .topbar--hero { animation-play-state: paused; }
/* After the walk-in the page is simply there as the video fades: the walk-in was the opening. */
.intro-done .hero__photo img, .intro-done .hero__intro, .intro-done .hero__join, .intro-done .topbar--hero { animation: none; }

/* ---------- campaign (staggered) ---------- */
.campaign { padding: clamp(24px, 4vw, 48px) var(--gutter) clamp(72px, 10vw, 140px); }
.campaign__title { font: 500 clamp(30px, 3.4vw, 44px)/1.08 var(--serif); }
.campaign__grid { list-style: none; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.campaign__grid img { display: block; width: 100%; height: auto; }
.campaign__grid li:nth-child(even) { margin-top: clamp(40px, 8vw, 72px); }
@media (min-width: 860px) {
  .campaign__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); }
  .campaign__grid li:nth-child(2) { margin-top: clamp(64px, 9vw, 140px); }
  .campaign__grid li:nth-child(3) { margin-top: clamp(24px, 3vw, 48px); }
  .campaign__grid li:nth-child(4) { margin-top: clamp(96px, 13vw, 200px); }
}

/* ---------- the store, on the home page ---------- */
.visit { display: grid; gap: clamp(28px, 4vw, 64px); align-items: end; padding: 0 var(--gutter) clamp(72px, 11vw, 152px); }
.visit__figure img { display: block; width: 100%; height: auto; }
.visit__title { font: 500 clamp(36px, 4.4vw, 64px)/1.04 var(--serif); letter-spacing: -.01em; max-width: 12ch; }
.visit__text p { margin-top: 18px; max-width: 42ch; }
.visit__text .button { margin-top: 28px; }
@media (min-width: 860px) { .visit { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

/* Store page */
.store-head { display: grid; gap: clamp(32px, 5vw, 64px); }
.store-head__figure img { display: block; width: 100%; height: auto; }
.store-facts { display: grid; gap: 18px; margin: 32px 0 0; }
.store-facts dt { font-size: 14px; opacity: .8; }
.store-facts dd { margin: 4px 0 0; font-size: 18px; line-height: 1.5; }
.store-head__actions .button { width: auto; }
.page--store .prose h3 { margin-top: 28px; font: 500 22px/1.2 var(--serif); }
.page--store .prose h3 + p { margin-top: 8px; }
@media (min-width: 1000px) {
  .store-head { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; }
}
.store-video__text, .store-space__text { margin-top: 14px; max-width: 60ch; }
.store-video__player { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin-top: 24px; background: var(--store-blue); }
.store-gallery { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 16px; }
.store-gallery img { display: block; width: 100%; height: auto; }
@media (min-width: 860px) {
  .store-gallery { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(320px, 38vw, 620px); gap: clamp(16px, 2vw, 28px); }
  .store-gallery__item--wide { grid-column: span 7; }
  .store-gallery__item--tall { grid-column: span 5; }
  .store-gallery__item picture, .store-gallery__item img { height: 100%; }
  .store-gallery__item img { object-fit: cover; }
}

.crumb { font-size: 15px; margin-bottom: clamp(24px, 4vw, 48px); }
.role-layout { display: grid; gap: clamp(48px, 6vw, 96px); }
.role-body h2 { margin-top: 48px; font: 500 clamp(26px, 2.6vw, 34px)/1.1 var(--serif); }
.role-body ul { margin-top: 14px; padding-left: 1.1em; max-width: 60ch; }
.role-body li { margin-top: 8px; }
.role-body li::marker { content: "—  "; }
.role-body p { margin-top: 14px; max-width: 60ch; }
.facts { display: flex; flex-wrap: wrap; gap: 16px 48px; margin-top: 28px; }
.facts dt { font-size: 14px; opacity: .8; }
.facts dd { margin: 2px 0 0; font-weight: 500; }

.apply { background: var(--ink); color: var(--ivory); padding: clamp(28px, 4vw, 48px); margin: 0 calc(var(--gutter) * -1); }
.apply__title { font: italic 400 clamp(32px, 3vw, 44px)/1.05 var(--serif); }
.apply__done-title { font: italic 400 40px/1.05 var(--serif); }
.apply__done p + p { margin-top: 12px; }
.apply__done:focus { outline: none; }
@media (min-width: 1000px) {
  .role-layout { grid-template-columns: minmax(0, 7fr) minmax(360px, 5fr); align-items: start; }
  .apply { margin: 0; }
}

.prose { max-width: 64ch; }
.prose h2 { margin-top: 40px; font: 500 28px/1.15 var(--serif); }
.prose p { margin-top: 14px; }
.prose .lede { margin-top: 24px; }
.page--simple .button--outline { margin-top: 32px; }

/* ---------- admin ---------- */

.page--admin .topbar__brand { margin-bottom: 32px; }
.admin-login { max-width: 380px; margin-top: 24px; }
.admin__stats { display: flex; flex-wrap: wrap; gap: 24px 56px; margin-top: 32px; }
.admin__stats div { min-width: 120px; }
.admin__stats strong { display: block; font: 500 56px/1 var(--serif); }
.admin__stats span { font-size: 14px; }
.admin__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.admin__actions .button { width: auto; margin-top: 0; }
.admin__h { margin-top: 48px; font: 500 28px/1.1 var(--serif); }
.table-wrap { margin-top: 16px; overflow-x: auto; }
.table-wrap table { border-collapse: collapse; font-size: 14px; min-width: 640px; width: 100%; }
.table-wrap th, .table-wrap td { text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.table-wrap th { font-weight: 500; }
.table-wrap a { word-break: break-all; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media (forced-colors: active) {
  .button { border: 1px solid ButtonText; }
  .choice input:checked + span { outline: 2px solid Highlight; }
}