/* ==========================================================================
   Japanese Fish Market — Coming Soon Site
   Stylesheet overview:
     0. Webfonts (@font-face)
     1. Design tokens (colors, fonts, spacing)
     2. Reset / base styles
     3. Layout helpers
     4. Ticker (scrolling announcement bar)
     5. Header / hero section
     6. Footer
     7. Buttons
     8. Forms (inputs, radios, file upload)
     9. Modal / popup (shared by wishlist + careers)
    10. Success pages
    11. Responsive breakpoints
   ========================================================================== */

/* -------------------------------------------------------------------------
   0. Webfonts
   The client's licensed fonts, converted from the supplied .otf files to
   .woff2 (with .woff fallback for older browsers) and self-hosted in
   /fonts. font-display:swap shows fallback text immediately rather than
   blanking the page while these download.

   NOTE: the client's font pack did not include "Mono45 Headline" (the
   monospace face used for the ticker, nav, and form labels), so that one
   is still Google Fonts' Space Mono as the closest free substitute. Drop
   the real files into /fonts and add a @font-face block here to swap it in.
   Japanese text also stays on Noto Sans JP — neither supplied font
   contains CJK glyphs.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: "BN Hightide";
  src: url("../fonts/BNHightide.woff2") format("woff2"),
       url("../fonts/BNHightide.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TWK Everett";
  src: url("../fonts/TWKEverett-Regular.woff2") format("woff2"),
       url("../fonts/TWKEverett-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TWK Everett";
  src: url("../fonts/TWKEverett-Medium.woff2") format("woff2"),
       url("../fonts/TWKEverett-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TWK Everett";
  src: url("../fonts/TWKEverett-Bold.woff2") format("woff2"),
       url("../fonts/TWKEverett-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* -------------------------------------------------------------------------
   1. Design tokens
   All colors/fonts/spacing live here so the whole site can be re-themed
   by editing this one block.
   ------------------------------------------------------------------------- */
:root {
  /* Brand colors, sampled from the client's design mockups */
  --color-cream: #f2e9da;      /* page background */
  --color-cream-soft: #efe6d5; /* subtle panels on top of cream */
  --color-red: #f53f39;        /* primary brand red */
  --color-red-dark: #c72f2a;   /* hover / active state for red */
  --color-ink: #201c17;        /* near-black text */

  /*
    Fonts — the client's licensed brand faces, self-hosted (see @font-face
    above). Each falls back to the Google Fonts substitute we used before
    them, then to a system font:
      BN Hightide  -> display: logo, headlines, CTA buttons
      TWK Everett  -> body copy, eyebrow lines
      Mono45 Headline -> NOT SUPPLIED; substituted with Martian Mono, a
                         variable display monospace whose condensed width
                         (wdth 75) and heavy weights are a much closer match
                         to Mono45's narrow, headline-weight letterforms than
                         Space Mono was. Used for the ticker, footer nav,
                         form labels/placeholders and radio options.
  */
  --font-display: "BN Hightide", "Bakbak One", system-ui, sans-serif;
  --font-mono: "Martian Mono", "Space Mono", ui-monospace, monospace;
  --font-body: "TWK Everett", "Space Grotesk", system-ui, sans-serif;
  --font-jp: "Noto Sans JP", "TWK Everett", system-ui, sans-serif;

  /* Spacing scale */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 5rem;
  --space-8: 10rem;

  /* Vertical rhythm for the hero/success layouts.
     These use vh so the whole composition scales to fit ONE screen at any
     window height (the design is a full-screen splash — it shouldn't
     scroll). The vh values are calibrated against the client's mockup:
     at its 1294px canvas height they resolve to ~78px and ~155px, matching
     the measured 83px and 170px gaps. The rem min/max keep it sane on very
     short (landscape phone) or very tall screens. */
  --gap-hero-pad: clamp(1rem, 4vh, 4rem);
  --gap-button-logo: clamp(1rem, 5vh, 5rem);
  --gap-logo-follow: clamp(1.25rem, 10vh, 10rem);

  /* Misc */
  --border-width: 2px;
  --edge-padding: clamp(1.25rem, 4vw, 3rem); /* side padding that scales with viewport */
  --hero-max-width: 1680px; /* caps the fish+copy group so it stays centered on ultra-wide screens */
  --transition: 180ms ease;
}

/* -------------------------------------------------------------------------
   2. Reset / base styles
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--color-cream);
  color: var(--color-ink);
  font-family: var(--font-body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* The whole design system is uppercase (this only affects cased Latin
     letters — Japanese text is caseless, so it's unaffected). */
  text-transform: uppercase;
  /* Condenses Martian Mono (our Mono45 Headline substitute) toward Mono45's
     narrow proportions. Only affects variable fonts with a width axis, so
     BN Hightide, TWK Everett and Noto Sans JP are untouched. */
  font-stretch: 75%;
}

/* Japanese text needs its own font and should NOT be forced uppercase
   (text-transform has no visual effect on it anyway, but this keeps the
   font-family override explicit and easy to find). */
:lang(ja) {
  font-family: var(--font-jp);
}

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

a {
  color: inherit;
}

button {
  font-family: inherit;
}

/* Respect users who've asked for less motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Consistent, visible focus state for keyboard users */
a:focus-visible,
button:focus-visible,
input:focus-visible,
label:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
}

/* -------------------------------------------------------------------------
   3. Layout helpers
   ------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  padding-inline: var(--edge-padding);
}

.eyebrow {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* Visually hidden but still available to screen readers — used for form
   labels where the placeholder already shows the visible instruction
   (matches the client's mockups, which don't show a separate label). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------------------
   4. Ticker — infinite horizontal scroll of "COMING SOON..." text
   Built from two identical <ul> tracks placed side by side; animating the
   wrapper left by 50% loops seamlessly from track 1 into track 2.
   ------------------------------------------------------------------------- */
.ticker {
  overflow: hidden;
  white-space: nowrap;
  background: var(--color-cream);
}

.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 55s linear infinite;
  /* Stays paused until js/main.js confirms the ticker has enough content
     to loop seamlessly and the webfont has finished loading — starting
     early can cause a visible jump/gap once the font swaps in and the
     text width changes. See initTicker() in js/main.js. */
  animation-play-state: paused;
}

.ticker__track.is-ready {
  animation-play-state: running;
}

.ticker__list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}

.ticker__list li {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  padding: var(--space-2) var(--space-4);
  white-space: nowrap;
}

@keyframes ticker-scroll {
  from {
    transform: translateX(0);
  }
  to {
    /* Track is duplicated once, so -50% is exactly one loop */
    transform: translateX(-50%);
  }
}

/* -------------------------------------------------------------------------
   5. Hero
   .hero centers .hero__inner as a unit (fish + copy together) within the
   viewport. .hero__inner caps out at --hero-max-width so that on very
   wide screens the whole composition stays centered instead of hugging
   the left edge with a lopsided gap on the right.
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding-block: var(--gap-hero-pad);
  padding-inline: var(--edge-padding);
}

/* Deliberately NOT position:relative — the fish is absolutely positioned
   against .hero (the full-viewport-width parent) so it can bleed off the
   left edge of the screen at any width, exactly as in the mockup. If this
   were relative, the fish would anchor to this centered, max-width box
   instead and stop bleeding on wide monitors. */
.hero__inner {
  position: static;
  width: 100%;
  max-width: var(--hero-max-width);
}

.hero__fish {
  position: absolute;
  /* Sized by HEIGHT, not width: in the mockup the fish is 66.7% of the page
     height. Sizing by width instead made it balloon on short/wide browser
     windows (a 28vw fish is ~82% of a 950px-tall viewport vs the intended
     67%). Height-based keeps it proportional to the screen the way the
     design intends. Bumped a bit larger than the strict mockup measurement
     per client request. */
  height: clamp(320px, 74vh, 960px);
  width: auto;
  /* Bled past the viewport's LEFT edge so the illustration is cropped
     there, matching the design. (Kept as a single pair of values so it's
     easy to flip: swap `left` for `right` and negate the translateX.) */
  left: 3%;
  top: 50%;
  transform: translate(-26%, -50%);
  z-index: 0;
}

/* The content column is CENTERED on the page, and its text is
   center-aligned. Measured from the mockup: every element (logo, eyebrow,
   button, "follow us" label, @handle) is centered on x=960 of the 1920px
   canvas — i.e. dead center. The column's width matches the logo, which is
   the widest element in it. */
.hero__content {
  position: relative;
  z-index: 1;
  width: min(48vw, 1000px);
  margin-inline: auto;
  text-align: center;
}

.hero__intro {
  margin-bottom: 0;
}

.hero__intro-en {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  line-height: 1.4;
  margin: 0;
}

.hero__intro-jp {
  font-family: var(--font-jp);
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  line-height: 1.6;
  margin: 0.35em 0 0;
  font-weight: bold;
}

/* Each gap below is owned by exactly one side (margin-top on the
   element that follows) so the rhythm is unambiguous — no relying on
   margin collapsing between two competing values. Sizes are matched
   against the vertical spacing in the client's reference mockup. */
.hero__cta {
  margin-top: var(--gap-button-logo); /* eyebrow -> button */
}

.hero__logo {
  /* Fills the content column (which is itself 48vw) — matches the mockup's
     measured 909px logo on a 1920px canvas (47.3%). max-height caps it
     against viewport height so it can't push the page past one screen on
     short/wide windows. */
  width: 100%;
  max-height: 26vh;
  object-fit: contain;
  margin-inline: auto; /* centers it whenever its rendered width ends up
                           less than its container's — see the 768px
                           breakpoint below for why this was needed */
  margin-top: var(--gap-button-logo);   /* button -> logo */
  margin-bottom: var(--gap-logo-follow); /* logo -> "follow us" block */
}

.hero__follow {
  margin-top: 0;
}

.follow__label {
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 var(--space-2); /* label -> @handle button */
}

/* -------------------------------------------------------------------------
   6. Footer
   ------------------------------------------------------------------------- */
.site-footer {
  background: var(--color-red);
  color: var(--color-cream);
}

.site-footer .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
  flex-wrap: wrap;
}

.footer__badge {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.6vw, 2.2rem);
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
}

.footer__nav {
  display: flex;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.footer__nav a {
  font-family: var(--font-mono);
  text-decoration: none;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}

.footer__nav a:hover,
.footer__nav a:focus-visible {
  border-color: currentColor;
}

.footer__cfg {
  height: 52px; /* bumped up for desktop per client request — see the
                    768px breakpoint below for the (unchanged) mobile size */
  width: auto;
}

/* -------------------------------------------------------------------------
   7. Buttons
   ------------------------------------------------------------------------- */
.btn {
  --btn-color: var(--color-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.95rem;
  line-height: 1;
  padding: .7em 1.75em;
  border-radius: 999px;
  border: var(--border-width) solid var(--btn-color);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), color var(--transition), transform var(--transition);
  white-space: nowrap;
}

/* letter-spacing adds a gap AFTER every character, including the last —
   so the invisible trailing gap gets included when justify-content:center
   centers the button's content, leaving the visible letters sitting
   slightly left of true center (confirmed by measuring in Photoshop).
   Wrapping the label in this span and pulling it back by exactly one
   letter-spacing unit cancels that phantom trailing gap out. */
.btn__label {
  margin-right: -0.02em;
}

/* Outline style — transparent bg, red text/border (e.g. "Join the waitlist") */
.btn--outline {
  background: transparent;
  color: var(--btn-color);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  background: var(--btn-color);
  color: var(--color-cream);
}

/* Solid style — filled red bg, cream text (e.g. "Upload resume") */
.btn--solid {
  background: var(--btn-color);
  color: var(--color-cream);
}

.btn--solid:hover,
.btn--solid:focus-visible {
  background: var(--color-red-dark);
  border-color: var(--color-red-dark);
}

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

.btn--block {
  width: 100%;
}

/* Everett variant — used for the @handle link, which is set in the body
   face rather than the display face. */
.btn--mono {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0;
}

/* .btn--mono has no letter-spacing, so it has no trailing phantom gap to
   cancel out — the -0.02em compensation above only applies to buttons
   that actually use the default 0.02em tracking. */
.btn--mono .btn__label {
  margin-right: 0;
}

/* -------------------------------------------------------------------------
   8. Forms
   ------------------------------------------------------------------------- */
.field {
  border: none;
  border-bottom: var(--border-width) solid var(--color-red);
  background: transparent;
  width: 100%;
  padding: 0.6em 0.1em;
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--color-ink);
}

.field::placeholder {
  color: var(--color-ink);
  opacity: 0.55;
  text-transform: uppercase;
}

.field:focus {
  outline: none;
  border-color: var(--color-ink);
}

/* JS-driven validation states (see initFormValidation in js/main.js).
   Red is already the brand's default border color, so an invalid field
   switches to the ink-black border instead — that contrast reads as
   "something's wrong" without introducing a clashing new color, and the
   message text underneath is red so it's still clearly an error. */
.field.is-invalid {
  border-color: var(--color-ink);
}

.field-error {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-red);
  margin: var(--space-1) 0 0;
  /* When a .field-error ends up as a third item inside .form-row's
     flexbox (e.g. the resume field's error, appended after both
     columns), force it onto its own full-width line rather than
     squeezing into the row. Has no effect outside a flex container. */
  flex: 1 1 100%;
}

/* Status line for data-remote forms (currently just the wishlist popup) —
   shows "Submitting…" while the fetch is in flight, and any error message
   the endpoint returns. Empty and invisible the rest of the time (empty
   :not(:empty) means it takes up no space until there's something to say,
   so it doesn't leave a gap in the layout by default). */
.form-status {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-align: center;
  margin: 0;
}

.form-status:not(:empty) {
  margin-top: var(--space-2);
}

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

/* The resume field's error lands here specifically (see above) — center
   it to match the centered .file-upload__name caption below it, instead
   of the left alignment that suits the email field's error. */
.form-row > .field-error {
  text-align: center;
}

.radio-group.is-invalid .radio-option input[type="radio"] {
  border-color: var(--color-ink);
}

.form-row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
  justify-content: center; /* centered inside the popup */
  flex-wrap: wrap;
}

.form-row .field-group {
  flex: 1 1 240px;
}

/* Radio group — "What role are you applying for?" */
.radio-group {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  justify-content: center; /* centered inside the popup */
  margin: var(--space-2) 0 var(--space-4);
}

.radio-option {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.95rem;
}

.radio-option input[type="radio"] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-red);
  border-radius: 50%;
  margin: 0;
  display: grid;
  place-content: center;
  cursor: pointer;
}

.radio-option input[type="radio"]::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-red);
  transform: scale(0);
  transition: transform var(--transition);
}

.radio-option input[type="radio"]:checked::before {
  transform: scale(1);
}

.field-label {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

/* File upload — the real <input type="file"> is visually hidden (.sr-only)
   and its <label for="..."> stands in as the visible "Upload resume"
   button. Clicking or keyboard-activating the label natively opens the
   file picker — no JS or absolute-position overlay hack needed for that
   part; js/main.js only fills in the chosen filename afterwards. */
.file-upload__input:focus-visible + label {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
}

.file-upload__name {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-align: center;
  opacity: 0.75;
  margin: var(--space-2) 0 0;
}

/* -------------------------------------------------------------------------
   9. Modal / popup
   Shared shell used by both the wishlist and careers popups.
   ------------------------------------------------------------------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(32, 28, 23, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  z-index: 100;
}

/* Hidden by default; JS toggles [data-open] */
.modal-backdrop:not([data-open]) {
  display: none;
}

.modal {
  /* Outer shell: draws the border and positions the close button.
     Overflow stays visible here so the close button can hang half
     outside the border, like the reference design. The *inner*
     wrapper below is what actually scrolls on short viewports. */
  position: relative;
  width: 100%;
  max-width: 620px;
  max-height: 90vh;
  background: var(--color-cream);
  border: var(--border-width) solid var(--color-red);
}

.modal__inner {
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--space-6) var(--space-5) var(--space-5);
  text-align: center;
}

.modal__close {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: var(--border-width) solid var(--color-red);
  background: var(--color-cream);
  color: var(--color-red);
  font-family: var(--font-display);
  font-size: 1.1rem;
  cursor: pointer;
  display: grid;
  place-content: center;
  line-height: 1;
  z-index: 1;
}

.modal__close:hover,
.modal__close:focus-visible {
  background: var(--color-red);
  color: var(--color-cream);
}

.modal__logo {
  width: min(80%, 320px);
  margin: 0 auto var(--space-4);
}

.modal__title {
  font-family: var(--font-display);
  color: var(--color-red);
  text-transform: uppercase;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: 1.15;
  margin: 0 0 var(--space-4);
}

.modal__subtitle {
  font-family: var(--font-mono);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0 0 var(--space-3);
}

.modal__form {
  /* Everything inside the popups is centered (the .modal__inner wrapper
     already sets text-align:center; this used to override it back to left
     for the form only). Flex containers inside the form need their own
     centering — see .radio-group and .form-row below. */
  text-align: center;
  margin-top: var(--space-4);
}

/* Inputs inherit text-align from the form, but placeholder + typed text
   need it applied to the control itself. */
.modal__form .field,
.modal__form .field::placeholder {
  text-align: center;
}

.modal__actions {
  margin-top: var(--space-4);
  text-align: center;
}

.modal__note {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  opacity: 0.65;
  margin-top: var(--space-3);
}

/* -------------------------------------------------------------------------
   10. Success pages (wishlist-success.html / career-success.html)
   Reuses .hero styles for layout consistency with the main page.
   ------------------------------------------------------------------------- */
.success__logo {
  /* Measured from the mockup: 382px on a 1920px canvas ≈ 20% of viewport
     width — roughly HALF the main hero's logo. It was previously set to
     40vw, which is why it looked oversized on these pages. */
  width: min(20vw, 400px);
  max-height: 16vh;
  object-fit: contain;
  margin-inline: auto;
  margin-bottom: var(--gap-logo-follow); /* logo -> title */
}

.success__title {
  font-family: var(--font-display);
  color: var(--color-red);
  text-transform: uppercase;
  /* Measured from the mockup: ~28px cap-height type on a 1920px canvas.
     The previous 2.2rem ceiling rendered noticeably larger than the design. */
  font-size: clamp(1.25rem, 1.6vw, 1.85rem);
  line-height: 1.2;
  margin: 0 0 var(--space-3); /* title -> body: tight, they read as one thought */
}

.success__body {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.5;
  /* 32vw matches the mockup's measured 613px body column on a 1920px
     canvas, so the copy wraps to the same number of lines as the design. */
  max-width: min(32vw, 620px);
  margin-inline: auto; /* centered, matching the mockup */
  margin-block: 0 var(--gap-logo-follow); /* body -> "follow us" block */
}/* -------------------------------------------------------------------------
   11. Responsive
   ------------------------------------------------------------------------- */
/* Short viewports (small laptops, or big browser chrome / open toolbars).
   The mockup's proportions assume a tall canvas — on short screens the
   composition can't fit one screen at those proportions, so tighten the
   vertical rhythm and logo caps here rather than letting it overflow
   awkwardly. Purely a height-based adjustment; widths are untouched. */
@media (max-height: 800px) {
  :root {
    --gap-hero-pad: clamp(0.75rem, 2.5vh, 2rem);
    --gap-button-logo: clamp(0.75rem, 3.5vh, 3rem);
    --gap-logo-follow: clamp(1rem, 7vh, 6rem);
  }

  .hero__logo { max-height: 22vh; }
  .success__logo { max-height: 18vh; }

  .ticker__list li {
    padding-block: var(--space-1);
  }

  .success__title {
    margin-bottom: var(--space-2);
  }
}

@media (max-width: 1024px) {
  .hero__content {
    width: min(62vw, 720px);
  }
}

@media (max-width: 768px) {
  .hero {
    padding-block: var(--space-5);
  }

  .hero__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .hero__fish {
    /* Back to normal document flow on mobile — stacked above the copy
       rather than bleeding off the side. Resets the desktop absolute
       positioning, its height-based sizing, and the translate centering. */
    position: static;
    transform: none;
    height: auto;
    width: 42vw;
    max-width: 220px;
    margin: 0 auto var(--space-3);
    animation: none;
  }

  .hero__content {
    width: 100%;
  }

  /* Mobile-only reorder for the home page: logo before the eyebrow text,
     fish moved to sit after the "Join the waitlist" button. Everywhere
     else (desktop, and both success pages) keeps its normal order.

     How: .hero__content normally wraps the eyebrow/button/logo/follow
     block as one unit, with the fish as a separate sibling — so on
     desktop the fish can be absolutely positioned independent of that
     content flow. To interleave the fish between two of that unit's
     children on mobile, .hero__content needs to stop being a box of its
     own (display:contents) so its children and the fish become direct,
     re-orderable siblings in the same flex context. */
  .page-home .hero__content {
    display: contents;
  }

  .page-home .hero__logo {
    order: 1;
    /* Base rule's margin-top/bottom were written for "button -> logo" and
       "logo -> follow" gaps, which don't apply now that the logo is
       first. Small gap down to the eyebrow text instead. */
    margin-top: 0;
    margin-bottom: var(--space-4);
  }

  .page-home .hero__intro {
    order: 2;
  }

  .page-home .hero__cta {
    order: 3;
  }

  .page-home .hero__fish {
    order: 4;
    margin-block: var(--space-4);
  }

  .page-home .hero__follow {
    order: 5;
  }

  /* Mobile-only reorder for the two success pages: logo first, fish moved
     to right after it (previously fish came first). Same display:contents
     technique as the home-page reorder above — see the comment on
     .page-home .hero__content for the full explanation. */
  .page-success .hero__content {
    display: contents;
  }

  .page-success .hero__fish {
    order: 2;
    margin: var(--space-3) auto 0;
  }

  .page-success .success__logo {
    order: 1;
    margin-bottom: 0;
  }

  .page-success .success__title {
    order: 3;
    margin-top: var(--space-4);
  }

  .page-success .success__body {
    order: 4;
  }

  .page-success .hero__follow {
    order: 5;
  }

  .hero__logo {
    width: 100%;
    max-width: 480px;
    max-height: none;
  }

  /* The desktop vw-based sizing collapses on a phone (20vw of 390px is a
     78px logo, and a 32vw body column is ~125px wide — which is what
     caused the tiny logo and the huge empty margins either side of the
     text). Size these against the container instead on mobile. */
  .success__logo {
    width: 70%;
    max-width: 320px;
    max-height: none;
  }

  .success__body {
    max-width: 100%;
    /* Shrunk from the desktop clamp so "We look forward to welcoming you
       soon for an exceptional sushi experience." fits in 2 lines instead
       of wrapping to 3 on common phone widths (360px and up — the
       sentence is long enough that 2 lines at a readable size is not
       physically achievable on 320px-and-narrower screens, which are
       essentially obsolete at this point). */
    font-size: 12px;
  }

  .success__title {
    font-size: clamp(1.35rem, 6vw, 1.75rem);
  }

  /* Eyebrow text ("Sushi, sake & market..." + the Japanese line below it)
     — shrunk so each line fits on one row down to 320px instead of
     wrapping to a second line (which read as an unwanted "third line"
     combined with the line below it). */
  .hero__intro-en,
  .hero__intro-jp {
    font-size: clamp(0.8rem, 3.6vw, 0.95rem);
  }

  .follow__label {
    font-size: 0.8rem;
  }

  .site-footer .wrap {
    flex-direction: column;
    text-align: center;
    justify-content: center;
  }

  /* Keep the footer badge/logo at their original (smaller) mobile size —
     the size bump above is scoped to desktop only. */
  .footer__badge {
    font-size: clamp(1.1rem, 6vw, 1.6rem);
  }

  .footer__cfg {
    height: 34px;
  }

  .form-row {
    flex-direction: column;
    align-items: stretch;
  }

  /* .form-row .field-group's "flex: 1 1 240px" (style.css, forms section)
     sets a 240px flex-basis for the row layout's WIDTH on desktop. Once
     flex-direction flips to column here, the main axis becomes vertical,
     so that same 240px would get reinterpreted as a minimum HEIGHT
     instead — reset it back to auto so columns just size to their content. */
  .form-row .field-group {
    flex: 1 1 auto;
  }

  .modal__inner {
    padding: var(--space-5) var(--space-3) var(--space-4);
  }
}

@media (max-width: 480px) {
  .ticker__list li {
    font-size: 0.8rem;
    padding: var(--space-1) var(--space-3);
  }

  .radio-group {
    flex-direction: column;
    gap: var(--space-2);
  }
}