/* ==========================================================================
   Hattefisk - coming soon
   Tokens: black bg matches the hat-tile sprites exactly (no seams, no
   gradient behind them - see .hero). Warm white for content cards, brand
   red for accents. Buttons default to --red-deep (white text >= 4.5:1);
   bright --red is reserved for decorative/large type.
   Type: Permanent Marker (brush, latin-only, brand wordmark + COMING SOON
   stay English in every language) for the poster-style headline, Caveat
   (handwritten, Cyrillic) for the small eyebrow labels, Inter (Cyrillic +
   Latin Extended) for body/UI. All three self-hosted in assets/fonts/.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/Caveat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}

@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/Caveat-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Permanent Marker";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/PermanentMarker-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+2122;
}

:root {
  --black: #000000;
  --ink: #141210;
  --warm-white: #f7f1e4;
  --warm-white-dim: #e9e0cd;
  --red: #ef3d20;
  --red-deep: #b32914;
  --red-deep-hover: #8f2000;
  --grey: #9a9186;
  --grey-dim: #5c584f;
  --line: rgba(247, 241, 228, 0.14);

  --font-display: "Permanent Marker", "Segoe Script", cursive;
  --font-script: "Caveat", "Segoe Script", cursive;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  --gutter: 20px;
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

@media (min-width: 720px) {
  :root {
    --gutter: 40px;
  }
}

@media (min-width: 1200px) {
  :root {
    --gutter: 64px;
  }
}

/* ---- Reset ------------------------------------------------------------ */

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

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

body {
  margin: 0;
  background: var(--black);
  color: var(--warm-white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

h1, h2, h3, p, figure {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Visible focus ring everywhere, no silent removal */
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--gutter);
  z-index: 100;
  background: var(--red-deep);
  color: var(--warm-white);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.skip-link:focus {
  top: calc(var(--safe-t) + 10px);
}

/* ---- Top bar: lang switch ---------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: calc(var(--safe-t) + 12px) calc(var(--gutter) + var(--safe-r)) 12px calc(var(--gutter) + var(--safe-l));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
  pointer-events: none;
}

/* Lightweight text-link language switcher, shared by header and footer.
   No pill background: small, does not compete with the hero. */
.lang-links {
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
}

.lang-links span {
  color: var(--grey-dim);
  font-size: 0.72rem;
}

.lang-links button {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--grey);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 2px;
  cursor: pointer;
  transition: color 0.15s ease;
}

.lang-links button:hover {
  color: var(--warm-white);
}

.lang-links button[aria-pressed="true"] {
  color: var(--red);
}

.footer .lang-links span {
  color: var(--grey);
}

.footer .lang-links button {
  color: var(--grey-dim);
}

.footer .lang-links button:hover {
  color: var(--ink);
}

.footer .lang-links button[aria-pressed="true"] {
  color: var(--red-deep);
}

/* ---- Hero --------------------------------------------------------------- */

.hero {
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--safe-t) + 8px) calc(var(--gutter) + var(--safe-r)) calc(var(--safe-b) + 16px) calc(var(--gutter) + var(--safe-l));
  position: relative;
  background: var(--black); /* solid black, matches the hat sprites exactly: no gradient behind the tile */
}

.hero-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  margin-top: 26px;
}

.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hat-stage-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Breathing room for the motion strokes and speech bubble, so they do
     not press against the mascot or clip against the page edge. Extra
     top margin clears the speech bubble for every hat, including the
     tallest ones (wasabi, soy, chili). */
  margin: 40px 46px 0;
}

@media (min-width: 1024px) {
  .hat-stage-wrap {
    margin: 26px 72px 0;
  }
}

.hat-stage {
  position: relative;
  width: clamp(150px, 34vw, 190px);
  height: clamp(150px, 34vw, 190px);
}

.hat-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hat-frame.is-active {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .hat-frame {
    transition: none;
  }
}

/* Comic-style motion strokes flanking the mascot, like the poster */
.motion-strokes {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--warm-white);
  opacity: 0.9;
  pointer-events: none;
}

.motion-strokes--left {
  left: clamp(-44px, -13vw, -32px);
}

.motion-strokes--right {
  right: clamp(-44px, -13vw, -32px);
}

/* Speech bubble, poster-style, top-right of the mascot, clear of its hat.
   The mascot art (assets/hats-cut/) keeps a consistent body baseline and a
   generous top margin per tile, but the tallest hats (wasabi, soy, chili)
   still reach further up than the rest - the bubble sits well clear of
   even those, verified against every tile in the hero rotation. */
.speech-bubble {
  position: absolute;
  top: -40px;
  right: clamp(-68px, -18vw, -30px);
  background: var(--red-deep);
  color: var(--warm-white);
  font-weight: 800;
  font-size: 0.68rem;
  line-height: 1.15;
  letter-spacing: 0.01em;
  padding: 7px 11px;
  border-radius: 14px 14px 14px 2px;
  max-width: 92px;
  text-align: left;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
}

@media (min-width: 1024px) {
  .speech-bubble {
    top: -26px;
    font-size: 0.82rem;
    max-width: 120px;
    padding: 9px 14px;
  }
}

/* Vertical kanji beside the mascot - desktop only, too tight on mobile */
.kanji {
  display: none;
}

@media (min-width: 1024px) {
  .kanji {
    display: block;
    writing-mode: vertical-rl;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: 0.25em;
    color: var(--warm-white);
    opacity: 0.85;
    margin-right: 38px;
  }
}

.brush-heading {
  font-family: var(--font-display);
  color: var(--warm-white);
  font-size: clamp(2rem, 11vw, 3.1rem);
  line-height: 0.85;
  transform: rotate(-3deg);
  position: relative;
  /* Bottom margin clears the red brush-stroke underline (it extends to
     -0.32em below the text, see .brush-stroke) before the wordmark starts -
     otherwise the stroke and "HATTEFISK" collide on narrow screens. */
  margin: 0 0 0.55em;
}

.brush-heading .brush-stroke {
  position: absolute;
  left: 50%;
  bottom: -0.32em;
  transform: translateX(-50%);
  width: 78%;
  color: var(--red);
  z-index: -1;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--red);
  font-size: clamp(2.1rem, 10vw, 3.4rem);
  line-height: 0.95;
  margin: 0 0 10px;
  text-wrap: balance;
}

.hero-tagline {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: clamp(1.5rem, 6.5vw, 2.3rem);
  line-height: 1.05;
  color: var(--warm-white);
  max-width: 22ch;
  margin: 0 auto 4px;
  text-wrap: balance;
}

.hero-line {
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 3vw, 1.02rem);
  font-weight: 500;
  color: var(--warm-white-dim);
  max-width: 34ch;
  margin: 0 auto 22px;
  text-wrap: balance;
}

.hero-form {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
}

/* ---- Shared form styles -------------------------------------------------- */

.field-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

/* Hero newsletter field: the page around it is centered, and its own label
   is visually hidden (the placeholder + button carry the meaning), so the
   visible pieces - input, button, hint text below - center too instead of
   sitting flush left under a centered headline. */
.field-row--center {
  align-items: center;
  text-align: center;
}

/* form-status and form-note are siblings of .field-row inside the hero
   form (not descendants) - center them to match everything above. */
.hero-form .form-status,
.hero-form .form-note {
  text-align: center;
}

.optional-marker {
  font-weight: 400;
  color: var(--grey-dim);
}

.inline-form {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

@media (max-width: 420px) {
  .inline-form {
    flex-direction: column;
  }
}

label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--grey);
}

input,
select,
textarea {
  font-family: var(--font-body);
  font-size: 16px; /* never smaller: prevents iOS auto-zoom */
  background: var(--warm-white);
  color: var(--ink);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  width: 100%;
  transition: border-color 0.15s ease;
}

input::placeholder,
textarea::placeholder {
  color: var(--grey-dim);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--red);
}

textarea {
  min-height: 96px;
  resize: vertical;
}

.btn {
  appearance: none;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--red-deep);
  color: var(--warm-white);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 13px 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.btn:hover {
  background: var(--red-deep-hover);
}

.btn:active {
  transform: scale(0.98);
}

.btn:disabled {
  opacity: 0.7;
  cursor: progress;
}

.form-note {
  font-size: 0.78rem;
  color: var(--grey);
  margin-top: 4px;
  text-align: left;
}

.form-status {
  min-height: 1.2em;
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 8px;
  text-align: left;
}

.form-status--success {
  color: #8fd18f;
}

.form-status--error {
  color: #ff8a73;
}

/* Honeypot: present in the DOM/tab order removed, hidden visually and from
   assistive tech (parent is aria-hidden). No visible label text needed. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Idea section icon row (rolls&nigiri / delivery / hot rolls) --------- */

.idea-icons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 30px 0 40px;
}

.idea-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 108px;
}

.idea-icon svg {
  color: var(--red);
}

.idea-icon span {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--warm-white-dim);
  text-transform: uppercase;
  line-height: 1.25;
}

/* ---- Teaser sticker: a small rotated "hot take" callout between the hero
   and the idea section - reads like a sticker slapped on the page, not a
   quiet pill. ------------------------------------------------------------ */

.teaser-sticker {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: fit-content;
  max-width: calc(100% - 2 * var(--gutter));
  margin: 30px auto;
  padding: 14px 18px;
  background: var(--red);
  color: var(--warm-white);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 0 var(--red-deep), 0 10px 18px rgba(0, 0, 0, 0.45);
  transform: rotate(-2deg);
  text-align: left;
}

.teaser-flame {
  flex-shrink: 0;
  color: var(--warm-white);
  margin-top: 2px;
}

.teaser-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 46ch;
}

.teaser-title {
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.teaser-body {
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(247, 241, 228, 0.92);
}

/* ---- Sections ------------------------------------------------------------- */

.section {
  padding: 56px calc(var(--gutter) + var(--safe-r)) 56px calc(var(--gutter) + var(--safe-l));
}

.section-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.section-title {
  /* Caveat, not Permanent Marker: these headings are localized (about,
     catering), and Permanent Marker has no Cyrillic glyphs - Russian
     text would silently fall back to a mismatched generic cursive font.
     Permanent Marker stays reserved for the English-only brand lockup
     (.wordmark, .brush-heading). */
  font-family: var(--font-script);
  font-weight: 700;
  font-size: clamp(2.1rem, 7.5vw, 2.9rem);
  margin-bottom: 14px;
  color: var(--warm-white);
}

.section-body {
  font-size: 1.02rem;
  color: var(--warm-white-dim);
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}

/* Three short "why the hat" beats: name / hat / menu. Stacked on mobile,
   three columns on desktop where there is room to read them side by side. */
.idea-grid {
  display: flex;
  flex-direction: column;
  gap: 26px;
  max-width: 56ch;
  margin: 22px auto 0;
  text-align: left;
}

.idea-block-title {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--red);
  margin-bottom: 4px;
}

.idea-block-body {
  font-size: 0.96rem;
  color: var(--warm-white-dim);
}

@media (min-width: 900px) {
  .idea-grid {
    flex-direction: row;
    max-width: none;
    gap: 32px;
  }

  .idea-block {
    flex: 1;
  }
}

/* Wall of hats: all 25 tiles edge to edge on black, the signature "one
   mascot, many hats" system - no circles, no borders, no cropping. */
.hat-wall {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin: 26px auto 0;
  background: var(--black);
  max-width: 480px;
}

.hat-wall-item {
  aspect-ratio: 1;
  width: 100%;
  /* The img's own width/height HTML attributes (used as intrinsic-size
     hints before the image loads) act as low-priority presentational
     hints - width is overridden by the rule above, but height needs an
     explicit override too, or the height="200" attribute wins and every
     grid row ends up a fixed 200px tall regardless of actual column
     width, blowing the wall apart into rows with huge gaps. */
  height: auto;
  object-fit: contain;
  background: var(--black);
  transition: transform 0.15s ease;
}

.hat-wall-item:hover,
.hat-wall-item:active {
  transform: scale(1.08);
}

.hats-caption {
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--grey);
}

/* ---- Catering / B2B -------------------------------------------------------- */

.section--catering {
  background: var(--warm-white);
  color: var(--ink);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.section--catering .section-title {
  color: var(--ink);
}

.section--catering .section-body {
  color: var(--grey-dim);
}

.catering-cta {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* The "or email us directly" line is itself a mailto: link (the address
   is baked into the translated sentence, see b2b.or_email). */
.catering-direct {
  font-size: 0.9rem;
  color: var(--red-deep);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Catering dialog (native <dialog>) ------------------------------------ */

.catering-dialog {
  border: none;
  padding: 0;
  background: transparent;
  color: var(--ink);
  width: min(560px, 100%);
  max-width: 100%;
  margin: auto;
  max-height: 100dvh;
}

.catering-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.catering-dialog[open] {
  animation: catering-dialog-in 200ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .catering-dialog[open] {
    animation: none;
  }
}

@keyframes catering-dialog-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.catering-dialog-inner {
  position: relative;
  background: var(--warm-white);
  color: var(--ink);
  padding: 26px 22px calc(var(--safe-b) + 22px);
  max-height: 92dvh;
  overflow-y: auto;
  border-radius: var(--radius-lg);
  text-align: center;
}

.dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(20, 18, 16, 0.06);
  color: var(--ink);
  cursor: pointer;
}

.dialog-close:hover {
  background: rgba(20, 18, 16, 0.12);
}

.catering-dialog-title {
  margin-top: 6px;
  padding-right: 30px;
  /* .section-title defaults to white for the black hero/about sections;
     the dialog card is warm-white, so it needs the dark ink color. */
  color: var(--ink);
}

.catering-dialog-intro {
  margin: 0 auto 22px;
  color: var(--grey-dim);
}

.catering-form {
  display: block;
}

.catering-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  text-align: left;
}

/* [hidden] and a class-based `display` rule have equal specificity, and
   this stylesheet loads after the UA default - without this, toggling
   the `hidden` property from JS would silently do nothing. */
.catering-fields[hidden] {
  display: none;
}

@media (min-width: 1024px) {
  .catering-fields {
    grid-template-columns: 1fr 1fr;
  }
  .catering-fields .field-row--full {
    grid-column: 1 / -1;
  }
}

.catering-submit-row {
  margin-top: 4px;
}

.catering-success {
  text-align: center;
  padding: 20px 0 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.catering-success[hidden] {
  display: none;
}

.catering-success-title {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--red-deep);
}

.catering-success-text {
  font-size: 1.02rem;
  color: var(--grey-dim);
  margin-bottom: 6px;
}

/* The B2B form lives inside the <dialog>, on the warm-white panel - not on
   the black page. The global field style (warm-white fill, transparent
   border) is built for the dark hero and would make every field invisible
   here, so fields get a white fill and a real border on this surface. */
.catering-dialog input,
.catering-dialog select,
.catering-dialog textarea {
  background: #ffffff;
  border-color: rgba(20, 18, 16, 0.18);
}

.catering-dialog label {
  color: var(--grey-dim);
}

.catering-dialog .form-note {
  color: var(--grey-dim);
}

/* Mobile: bottom sheet, near full height, rounded top only */
@media (max-width: 639px) {
  .catering-dialog {
    width: 100%;
    margin: auto 0 0;
  }

  .catering-dialog-inner {
    border-radius: 24px 24px 0 0;
    max-height: 92dvh;
  }
}

/* ---- Footer -------------------------------------------------------------
   Compact and centered: email, location, language, social (hidden while
   empty), copyright. One column, small type, ~200px tall on mobile. */

.footer {
  background: var(--warm-white);
  color: var(--ink);
  padding: 22px calc(var(--gutter) + var(--safe-r)) calc(var(--safe-b) + 20px) calc(var(--gutter) + var(--safe-l));
  border-top: 1px solid rgba(20, 18, 16, 0.1);
}

.footer-inner {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
}

.footer-email {
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-location {
  font-size: 0.85rem;
  color: var(--grey-dim);
}

.footer-inner .lang-links {
  margin-top: 6px;
}

.social-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}

.social-row[hidden] {
  display: none;
}

.social-link {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--warm-white);
  transition: background-color 0.15s ease;
}

.social-link:hover {
  background: var(--red-deep);
}

.footer-fine {
  margin-top: 6px;
  font-size: 0.72rem;
  color: var(--grey-dim);
  opacity: 0.8;
}

/* ---- Desktop composition ------------------------------------------------------ */

@media (min-width: 1024px) {
  /* Desktop hero stays on the same vertical, centered axis as the poster:
     COMING SOON, mascot, HATTEFISK, subhead, form - one column, just
     scaled up. No side-by-side split. */
  .hero {
    padding-top: calc(var(--safe-t) + 20px);
  }

  .hero-main {
    margin-top: 0;
    gap: 40px;
  }

  .hat-stage {
    width: clamp(260px, 22vw, 380px);
    height: clamp(260px, 22vw, 380px);
  }

  .hero-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 560px;
  }

  .brush-heading {
    font-size: clamp(3rem, 6vw, 4.6rem);
  }

  .wordmark {
    font-size: clamp(2.8rem, 5vw, 4.4rem);
  }

  .hero-tagline {
    font-size: clamp(2rem, 3.4vw, 2.6rem);
    max-width: 26ch;
  }

  .hero-line {
    margin: 0 auto 28px;
  }

  .hero-form {
    margin: 0 auto;
  }

  .idea-icons {
    justify-content: center;
  }

  .section-inner {
    max-width: 640px;
  }

  .hat-wall {
    max-width: 480px;
  }

  .footer-inner {
    max-width: 640px;
  }
}