/* Knock Twice — Global Styles */

/* ── Variables ──────────────────────────────────── */
:root {

  /* Colors */
  --color-bg:              #F7F2EC;
  --color-ink:             #32261F;
  --color-blue:            #378CDA;
  --color-green:           #51B18C;
  --color-khaki:           #D1C3B6;
  --color-white:           #FFFFFF;
  --color-yellow:          #FADB4B;
  --color-pink:            #EC8EDF;
  --color-red:             #FF0004;
  /* Figma: mobile stack / Field chips (7097:1941–1942) */
  --color-caramel:         #9A7555;

  /* Fonts */
  --font-display:          'Erica One', serif;
  --font-body:             'Instrument Sans', sans-serif;
  --font-ui:               'Handjet', sans-serif;

  /* Type scale — clamp(mobile, fluid, desktop) */
  --type-h1:               clamp(2.625rem, 5vw, 4.0625rem);
  --type-h2:               clamp(1.25rem, 2.5vw, 1.5rem);
  --type-b1:               clamp(0.75rem, 1.2vw, 0.875rem);
  --type-b2:               0.75rem;
  --type-b3:               0.875rem;
  --type-nav:              clamp(1.125rem, 1.8vw, 1.375rem);
  /* Full-screen mobile overlay menu (Figma: Handjet 34 — Regular like Nav/Unselected) */
  --type-nav-mobile-menu:  2.125rem;
  --leading-nav-mobile-menu: 1.12;
  --wght-nav-mobile-menu:  400;
  --wght-nav-mobile-menu-active: 700;
  --tracking-nav-mobile-menu: -0.02125rem; /* -0.34px @ 16px root — Figma 7531:2089 */
  --type-field:            1rem;
  --type-button:           1rem;
  --type-error:            0.75rem;
  --type-anim:             clamp(1.125rem, 1.8vw, 1.375rem);

  /* Line heights */
  --leading-h1:            clamp(2.875rem, 5.2vw, 4.25rem);
  --leading-h2:            clamp(1.5625rem, 2.6vw, 1.6875rem);
  --leading-b1:            clamp(1.0625rem, 1.8vw, 1.375rem);
  --leading-nav:           clamp(1.5rem, 2vw, 1.6875rem);

  /* Letter spacing */
  --tracking-nav:          -0.01375rem;

  /* Spacing scale */
  --space-xs:              clamp(0.5rem,  1vw,  1rem);
  --space-sm:              clamp(1rem,    2vw,  2rem);
  --space-md:              clamp(1.5rem,  3vw,  3rem);
  --space-lg:              clamp(2.5rem,  5vw,  6rem);
  --space-xl:              clamp(4rem,    7vw,  9rem);

  /* Layout — desktop */
  --content-width:         50.5rem;
  --content-left:          19.75rem;
  --page-max:              90rem;
  --nav-left:              2.5rem;
  --nav-top:               12.5rem;
  --logo-top:              3.8125rem;

  /* Layout — mobile */
  --content-left-mobile:   1.25rem;
  --content-width-mobile:  calc(100vw - 2 * var(--content-left-mobile));

  /* Components */
  /* Chips / tag pills (Figma: e.g. KT_Livingroom 7086:1494–1505, Handjet Bold 16 / 22, 32× cap, 2px stroke) */
  --chip-height:           2rem;           /* 32px */
  --chip-radius:           2rem;           /* 32px pill */
  --chip-pad-x:            0.625rem;       /* 10px */
  --chip-gap:              0.625rem;       /* 10px between tags */
  --type-chip:             1rem;           /* 16px */
  --leading-chip:          1.375rem;       /* 22px */
  /* Figma 7097:1941 (Field/Active_Mobile) + 7097:1942 — stack title tags, cream bg */
  --type-chip-mobile-stack:   0.875rem;   /* 14px */
  --leading-chip-mobile-stack: 1.375rem;  /* 22px */
  --wght-chip-mobile-stack:   700;       /* Handjet Bold in file */
  --radius-pill:           2rem;
  --radius-button:         6.25rem;
  --radius-input:          0.25rem;
  /* Footer blue band — Figma: 90px desktop, 56px mobile (fixed rem; no vw). */
  --footer-height:         5.625rem;
  --footer-height-mobile:  3.5rem;
  /* Horizontal inset: desktop matches nav (40px); mobile matches Figma page margin (20px). */
  --footer-pad-x:          var(--nav-left);
  --wave-height-mobile:    4rem;
  --wave-height-desktop:   6.875rem;
  --input-height:          3.4375rem;
  --button-height:         3.4375rem;

  /* Effects */
  --shadow-stack:          0px 4px 4px rgba(0, 0, 0, 0.25);

  /* Grid — desktop (5 col) */
  --grid-margin:           2.5rem;       /* 40px — outer page margin */
  --grid-gutter:           1.25rem;      /* 20px — space between columns */
  --grid-columns:          5;

  /* Grid — mobile (3 col) */
  --grid-margin-mobile:    1.25rem;      /* 20px */
  --grid-gutter-mobile:    1.25rem;      /* 20px */
  --grid-columns-mobile:   3;
}

/* ── Reset ──────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  cursor: none !important;
}

/* ── Touch override — restore native cursor on touch devices ── */
html.is-touch *, html.is-touch *::before, html.is-touch *::after {
  cursor: auto !important;
}
html.is-touch button, html.is-touch a, html.is-touch [role="button"],
html.is-touch input, html.is-touch textarea, html.is-touch select {
  cursor: pointer !important;
}
html.is-touch .obj, html.is-touch .photo, html.is-touch .photo-rotated {
  cursor: grab !important;
}
html.is-touch #custom-cursor { display: none !important; }

/* ── Base ───────────────────────────────────────── */
html, body {
  width: 100%;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  cursor: none;
}
html.is-touch, html.is-touch body {
  cursor: auto;
}

/* ── Typography helpers ─────────────────────────── */
.h1 {
  font-family: var(--font-display);
  font-size: var(--type-h1);
  line-height: var(--leading-h1);
  font-weight: 400;
  color: var(--color-ink);
}
.h2 {
  font-family: var(--font-display);
  font-size: var(--type-h2);
  line-height: var(--leading-h2);
  font-weight: 400;
  color: var(--color-ink);
}
.body-text {
  font-family: var(--font-body);
  font-size: var(--type-b1);
  line-height: var(--leading-b1);
  font-weight: 400;
  color: var(--color-ink);
}

/* ── Custom cursor ──────────────────────────────── */
#custom-cursor {
  position: fixed;
  left: 0; top: 0;
  pointer-events: none;
  z-index: 9999;
  will-change: transform;
  transform: translate(-200px, -200px);
}
#cursor-default { display: block; width: 45px; height: 49px; }
#cursor-hover   { display: none;  width: 48px; height: 51px; }
#cursor-drag    { display: none;  width: 48px; height: 40px; }
body[data-cursor="hover"] #cursor-default { display: none; }
body[data-cursor="hover"] #cursor-hover   { display: block; }
body[data-cursor="drag"]  #cursor-default { display: none; }
body[data-cursor="drag"]  #cursor-drag    { display: block; }

/* ── Logo ───────────────────────────────────────── */
.logo {
  position: fixed;
  left: var(--nav-left);
  top: var(--logo-top);
  width: 3.25rem;
  height: 6.25rem;
  z-index: 1000;
}
.logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: left top;
}
.logo svg path {
  transition: fill 0.2s ease;
}
.logo:hover svg path,
.logo:active svg path {
  fill: var(--color-ink);
}
/* Eye sclera path must stay cream — nested inside keyhole hover fill rule above */
.logo:hover svg path.logo-eye-sclera,
.logo:active svg path.logo-eye-sclera {
  fill: var(--color-bg);
}

/* ── Page skeleton ──────────────────────────────── */
#page-scaler {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh + var(--footer-height));
  overflow: hidden;
}

.page {
  position: relative;
  width: 100%;
  flex: 1;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  padding-top: 4.375rem;
  padding-left: var(--content-left);
  padding-right: var(--grid-margin);
  padding-bottom: 0;
}

/* ── Navigation — desktop ───────────────────────── */
.nav {
  position: fixed;
  left: var(--nav-left);
  top: var(--nav-top);
  width: fit-content;
  z-index: 1000;
}
.nav a {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--type-nav);
  font-weight: 400;
  line-height: var(--leading-nav);
  letter-spacing: var(--tracking-nav);
  color: var(--color-ink);
  text-decoration: none;
  font-variation-settings: 'ELGR' 1, 'ELSH' 2, 'wght' 400;
  margin-bottom: 0.5rem;
}
.nav a.active {
  font-weight: 700;
  font-variation-settings: 'ELGR' 1, 'ELSH' 2, 'wght' 700;
}
.nav a:hover {
  color: var(--color-blue);
  font-weight: 700;
  font-variation-settings: 'ELGR' 1, 'ELSH' 2, 'wght' 700;
}

/* ── Navigation — mobile overlay ───────────────── */
/* Figma: Menu_Open 7531:2089 (440×956). Full-screen pink, safe-area insets,
   equal flex rows, 34px Handjet, dividers, X close 7535:2125 (15×2 stroke). */
/* Hamburger pill button — Figma node 7054:1625 (mobile header).
   76×47 pill with ROUNDED LEFT side and SQUARED RIGHT side (the flat edge
   aligns with the viewport's right margin). Per Figma SVG path:
     M23.5 1 H75 V46 H23.5 C11.07 46, 1 35.93, 1 23.5 C1 11.07, 11.07 1, 23.5 1
   2px #32261F stroke, #F7F2EC fill. 34×22 3-line hamburger centered inside
   the rounded portion (icon is visually shifted left since the rounded half
   is on the left). */
.nav-mobile-trigger {
  display: none;
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 1001;
  width: 4.75rem;   /* 76px */
  height: 2.9375rem; /* 47px */
  background: var(--color-bg);
  border: 2px solid var(--color-ink);
  /* Rounded left, squared right */
  border-top-left-radius: 23.5px;
  border-bottom-left-radius: 23.5px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding: 0;
  color: var(--color-ink);
  cursor: none;
  align-items: center;
  justify-content: center;
}
.nav-mobile-trigger svg,
.nav-mobile-trigger img {
  display: block;
  width: 2.125rem;   /* 34px */
  height: 1.375rem;  /* 22px */
  margin: 0;
  /* Visually center the icon within the rounded half of the pill
     (not the full 76px width). Per Figma inset 26.32% left, 28.95% right
     the icon center sits at x ≈ 37.7/76 ≈ 49.6% — essentially centered. */
}
body.nav-open .nav-mobile-trigger {
  display: none !important;
}
.nav-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  flex-direction: column;
  box-sizing: border-box;
  /* Fill the visual viewport; safe-area padding paints pink into iOS home-indicator / notch gutters */
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  background: var(--color-pink);
  overscroll-behavior: none;
}
.nav-mobile-overlay.is-open {
  display: flex;
}
.nav-mobile-menu {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* Close control — Figma Menu_Open 7531:2089: X 15×15, frame top 30px / right 26px */
.nav-mobile-close {
  position: absolute;
  top: 1.875rem;
  right: 1.625rem;
  z-index: 1;
  width: 2.75rem;
  height: 2.75rem;
  background: none;
  border: none;
  padding: 0;
  color: var(--color-ink);
  cursor: none;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
.nav-mobile-close svg {
  width: 0.9375rem;
  height: 0.9375rem;
  display: block;
  flex-shrink: 0;
}
.nav-mobile-overlay a {
  font-family: var(--font-ui);
  font-size: var(--type-nav-mobile-menu);
  font-weight: var(--wght-nav-mobile-menu);
  line-height: var(--leading-nav-mobile-menu);
  color: var(--color-ink);
  text-decoration: none;
  font-variation-settings: 'ELGR' 1, 'ELSH' 2, 'wght' var(--wght-nav-mobile-menu);
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  background: transparent;
  border-top: 1px solid var(--color-ink);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav-mobile-menu);
}
.nav-mobile-overlay a:last-of-type {
  border-bottom: 1px solid var(--color-ink);
}
.nav-mobile-overlay a.active,
.nav-mobile-overlay a:hover {
  font-weight: var(--wght-nav-mobile-menu-active);
  font-variation-settings: 'ELGR' 1, 'ELSH' 2, 'wght' var(--wght-nav-mobile-menu-active);
  background: var(--color-yellow);
}
body.nav-open {
  overflow: hidden;
}

/* ── Tag pills (Figma: pill 32px tall, 2px border, 10px gap, text Handjet 16/22) */
.card-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: var(--chip-height);
  padding: 0 var(--chip-pad-x);
  font-family: var(--font-ui);
  font-size: var(--type-chip);
  line-height: var(--leading-chip);
  font-weight: 700;
  font-variation-settings: 'ELGR' 1, 'ELSH' 2, 'wght' 700;
  color: var(--color-ink);
  border: 2px solid var(--color-ink);
  border-radius: var(--chip-radius);
  background: transparent;
}

/* Mobile project stacks — Saya, Living Room, etc. (Figma: 7097:1941 text, 7097:1942 pill) */
.project-mobile .card-tag {
  min-height: 1.75rem;
  padding: 0.125rem 0.625rem;
  font-size: var(--type-chip-mobile-stack);
  line-height: var(--leading-chip-mobile-stack);
  font-weight: var(--wght-chip-mobile-stack);
  font-variation-settings: 'ELGR' 1, 'ELSH' 2, 'wght' var(--wght-chip-mobile-stack);
  color: var(--color-caramel);
  border: 2px solid var(--color-caramel);
  border-radius: 2rem;
  background: transparent;
}

/* ── Card flip ──────────────────────────────────── */
.photo-card {
  position: absolute;
  perspective: 1000px;
}
.photo-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.7s cubic-bezier(0.4, 0.0, 0.2, 1);
  transform-style: preserve-3d;
}
.photo-card:hover .photo-card-inner {
  transform: rotateY(180deg) scale(1.02);
}
.photo-card-front,
.photo-card-back {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  backface-visibility: hidden;
  border-radius: 0.25rem;
  overflow: hidden;
  box-shadow: var(--shadow-stack);
  transition: box-shadow 0.7s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.photo-card:hover .photo-card-front,
.photo-card:hover .photo-card-back {
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.2);
}
.photo-card-front img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
}
/* Front: placeholder checkerboard; back is solid khaki with copy */
.photo-card-front--placeholder {
  background-image: url('interior-placeholder.png');
  background-size: 87.68px 87.68px;
  background-repeat: repeat;
}
.photo-card-back {
  background: var(--color-khaki);
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8% 7%;
  gap: 1rem;
  min-height: 0;
}
.card-title {
  font-family: var(--font-display);
  font-size: var(--type-h2);
  line-height: var(--leading-h2);
  font-weight: 400;
  color: var(--color-ink);
}
.card-body {
  font-family: var(--font-body);
  font-size: var(--type-b1);
  line-height: var(--leading-b1);
  font-weight: 400;
  color: var(--color-ink);
}
.card-tags {
  display: flex;
  gap: var(--chip-gap);
  flex-wrap: wrap;
  align-self: flex-start;
}
/* Khaki / dark panels: off-white text + stroke (Figma Container_Hover) */
.photo-card-back .card-tag,
.section-card .card-tag {
  color: var(--color-bg);
  border-color: var(--color-bg);
}

/* ── Spinning sticker ring ──────────────────────── */
.sticker {
  position: absolute;
  pointer-events: none;
  z-index: 8;
}
.sticker svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: sticker-spin 18s linear infinite;
}
.sticker text {
  text-rendering: optimizeLegibility;
}
/* Base rotation (e.g. 60°) + continuous spin without resetting offset */
.sticker svg.sticker-svg--spin-60 {
  animation-name: sticker-spin-60;
}
@keyframes sticker-spin {
  to { transform: rotate(360deg); }
}
@keyframes sticker-spin-60 {
  from { transform: rotate(60deg); }
  to { transform: rotate(420deg); }
}

/* ── Placeholder ────────────────────────────────── */
.placeholder {
  position: absolute;
  background-image: url('interior-placeholder.png');
  background-size: 87.68px 87.68px;
  background-repeat: repeat;
  box-shadow: var(--shadow-stack);
}

/* ── Section card (static project info) ─────────── */
.section-card {
  position: absolute;
  background: var(--color-khaki);
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  z-index: 5;
  padding: 2rem;
}

/* ── Draggable objects ──────────────────────────── */
.obj {
  position: absolute;
  cursor: none;
  user-select: none;
}
.obj-inner {
  width: 100%;
}
.obj-inner img {
  width: 100%;
  display: block;
  pointer-events: none;
  user-select: none;
}
.obj:not(.has-rotation) > img {
  width: 100%;
  height: auto;
}
.is-dragging {
  cursor: none !important;
}

/* ── Buttons ────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: var(--type-button);
  font-weight: 700;
  font-variation-settings: 'ELGR' 1, 'ELSH' 2, 'wght' 700;
  height: var(--button-height);
  border-radius: var(--radius-button);
  background: var(--color-green);
  color: var(--color-bg);
  border: none;
  padding: 0 2rem;
  text-decoration: none;
  cursor: none;
}
.btn:hover {
  opacity: 0.9;
}

/* Full-width primary button — pages will migrate to this over time */
.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--button-height);
  border-radius: var(--radius-button);
  background: var(--color-green);
  color: var(--color-bg);
  font-family: var(--font-ui);
  font-size: var(--type-button);
  font-weight: 400;
  font-variation-settings: 'ELGR' 1, 'ELSH' 2, 'wght' 400;
  border: none;
  cursor: none;
  text-decoration: none;
}
.btn-primary:hover {
  opacity: 0.85;
}

/* ── Form fields ────────────────────────────────── */
.field {
  font-family: var(--font-ui);
  font-size: var(--type-field);
  font-weight: 400;
  font-variation-settings: 'ELGR' 1, 'ELSH' 2, 'wght' 400;
  height: var(--input-height);
  border-radius: var(--radius-button);
  border: 2px solid var(--color-ink);
  background: var(--color-bg);
  color: var(--color-ink);
  padding: 0 1.375rem;
  width: 100%;
}
.field::placeholder {
  color: var(--color-khaki);
}
.field:focus {
  outline: none;
  border-color: var(--color-green);
}

/* ── Footer ─────────────────────────────────────── */
.footer {
  position: relative;
  left: 0;
  width: 100%;
  height: var(--footer-height);
  margin-top: -2px;
  background: var(--color-blue);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--footer-pad-x);
  z-index: 100;
}
.footer-icons {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-shrink: 0;
}
.footer-icons a {
  display: flex;
  align-items: center;
  width: 1.25rem;
  height: 1.25rem;
}
.footer-icons img {
  width: 100%;
  height: 100%;
  display: block;
}
.footer-copyright {
  flex-shrink: 0;
  font-family: var(--font-ui);
  font-size: var(--type-field);
  font-weight: 400;
  color: var(--color-bg);
  font-variation-settings: 'ELGR' 1, 'ELSH' 2, 'wght' 400;
  white-space: nowrap;
}

/* ── Image stack (draggable photos) ─────────────── */
.photo,
.photo-rotated {
  position: absolute;
  overflow: hidden;
  box-shadow: var(--shadow-stack);
  cursor: none;
  user-select: none;
}
.photo img,
.photo-rotated img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

/* ── Swipe Hint Overlay ─────────────────────────── */
.swipe-hint-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 100;
  pointer-events: none;
  animation: swipeBlink 3s infinite ease-in-out;
  transition: opacity 0.3s ease;
}

@keyframes swipeBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.swipe-hint-overlay.is-hidden {
  opacity: 0;
  pointer-events: none;
  animation: none;
}

/* ── Error text ─────────────────────────────────── */
.error-text {
  font-family: var(--font-body);
  font-size: var(--type-error);
  color: var(--color-red);
  line-height: 1rem;
}

/* Replaces .error-text going forward — toggled by JS adding .is-visible */
.error-msg {
  font-family: var(--font-body);
  font-size: var(--type-error);
  color: var(--color-red);
  line-height: 1rem;
  display: none;
  margin-top: 0.25rem;
}
.error-msg.is-visible {
  display: block;
}

/* Lock document scroll while monster mailing-list modal is open (About / Shop),
   or home empty-state monster is visible / dismissing. */
html.kt-monster-modal-open,
html.kt-home-monster-open,
html.kt-monster-modal-open body,
html.kt-home-monster-open body {
  overflow: hidden !important;
  overscroll-behavior: none;
}

/* ── Modals ─────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(247, 242, 236, 0.88);
  z-index: 14;
  display: none;
  pointer-events: all;
}
.modal-card {
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(58rem, 90vw);
  background: var(--color-white);
  border: 2px solid var(--color-ink);
  border-radius: 0.875rem;
  z-index: 25;
  padding: 2.375rem 2.375rem 2rem;
}

/* ── Mailing list modal ─────────────────────────── */
.ml-close {
  position: absolute;
  top: 1.125rem;
  right: 1.125rem;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 1.125rem;
  color: var(--color-ink);
  line-height: 1;
  padding: 0.75rem;
}
.ml-heading {
  font-family: var(--font-display);
  font-size: var(--type-h2);
  line-height: var(--leading-h2);
  font-weight: 400;
  color: var(--color-ink);
  margin-bottom: var(--space-xs);
}
.ml-body {
  font-family: var(--font-body);
  font-size: var(--type-b1);
  line-height: var(--leading-b1);
  font-weight: 400;
  color: var(--color-ink);
}
.ml-form-row {
  display: flex;
  gap: 0.625rem;
  margin-top: 1.25rem;
}
/* Inherits .field styles; overrides specific to this context */
.ml-form-row input {
  font-family: var(--font-ui);
  font-size: var(--type-field);
  font-weight: 400;
  font-variation-settings: 'ELGR' 1, 'ELSH' 2, 'wght' 400;
  height: var(--input-height);
  border: 2px solid var(--color-ink);
  color: var(--color-ink);
  padding: 1rem 1.375rem;
  flex: 1;
  background: var(--color-white);
  border-radius: var(--radius-button);
}
.ml-form-row input::placeholder {
  color: var(--color-khaki);
}
.ml-form-row input:focus {
  outline: none;
  border-color: var(--color-green);
}
.ml-form-row input.has-error {
  color: var(--color-red);
  font-weight: 700;
}
.ml-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: auto;
  padding: 0 4.5rem;
  height: var(--button-height);
  border-radius: var(--radius-button);
  background: var(--color-green);
  color: var(--color-bg);
  font-family: var(--font-ui);
  font-size: var(--type-button);
  font-weight: 700;
  font-variation-settings: 'ELGR' 1, 'ELSH' 2, 'wght' 700;
  border: 2px solid transparent;
  cursor: none;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.ml-submit:hover {
  background: transparent;
  color: var(--color-green);
  border-color: var(--color-green);
}
.ml-submit.is-disabled {
  opacity: 0.5;
  cursor: default;
}
.ml-submit.is-disabled:hover {
  background: var(--color-green);
  color: var(--color-bg);
  border-color: transparent;
}
.ml-disclaimer {
  font-family: var(--font-body);
  font-size: var(--type-b1);
  line-height: var(--leading-b1);
  font-weight: 400;
  color: var(--color-ink);
  /* text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); */
  margin-top: 1rem;
}

/* Error state — JS adds .ml-error to .modal-card */
.modal-card.ml-error .error-msg {
  display: block;
}
.modal-card.ml-error .ml-form-row input {
  border-color: var(--color-red);
}

/* Success state — JS adds .ml-success to .modal-card */
.ml-success-body {
  font-family: var(--font-body);
  font-size: var(--type-b1);
  line-height: var(--leading-b1);
  font-weight: 400;
  color: var(--color-ink);
  display: none;
}
.modal-card.ml-success .ml-body,
.modal-card.ml-success .ml-form-row,
.modal-card.ml-success .ml-disclaimer,
.modal-card.ml-success .error-msg {
  display: none;
}
.modal-card.ml-success .ml-success-body {
  display: block;
}

/* ── Footer monster eyes (split desktop / mobile SVG) ─────────────
   Matches coming-soon / about: circle irises + clip, eye-blink groups.
   Pages opt in with #monster-group.has-mobile-monster-eyes */
.monster-area .eye-blink-group {
  transform-box: fill-box;
  transform-origin: center;
}
.monster-area .eye-blink-group.closing {
  transform: scaleY(0);
  transition: transform 60ms ease-in;
}
.monster-area .eye-blink-group.opening {
  transform: scaleY(1);
  transition: transform 100ms ease-out;
}
.monster-eyes-overlay-mobile {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

/* Home easter-egg monster: same blink treatment inside combined SVG */
#home-monster .eye-blink-group {
  transform-box: fill-box;
  transform-origin: center;
}
#home-monster .eye-blink-group.closing {
  transform: scaleY(0);
  transition: transform 60ms ease-in;
}
#home-monster .eye-blink-group.opening {
  transform: scaleY(1);
  transition: transform 100ms ease-out;
}

/* ── Tablet breakpoint (1140px to 769px) ─────────── */
@media (max-width: 1140px) {
  :root {
    --content-width: 70.877vw;
    --content-left: 27.719vw;
    --grid-margin: 3.508vw;
  }
}

/* ── Mobile breakpoint (canonical: 768px) ─────────── */
@media (max-width: 768px) {
  /* ── Overscroll split (Safari/mobile): ──────────────────────────────────
     - html = cream (#F7F2EC): top rubber-band stays on-brand without painting
       body globally blue (which would tint top bounce too).
     - body stays transparent — inline routes that set blue body backgrounds lose
       to `transparent !important` so overscroll behaves consistently.
     - Fixed body::after = footer blue in lower half viewport; bottom bounce reveals it.
     - #page-scaler sits above the wash so normal content/footer still read cream/blue bars. */
  html {
    font-size: 16px;
    background: var(--color-bg) !important;
  }
  body {
    font-size: 16px;
    background: transparent !important;
    position: relative;
    isolation: isolate;
  }
  body::after {
    content: '';
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50vh;
    background: var(--color-blue);
    z-index: 0;
    pointer-events: none;
  }
  #page-scaler {
    position: relative;
    z-index: 1;
    background: var(--color-bg);
    min-height: 100vh;
  }
  :root {
    --grid-margin:    var(--grid-margin-mobile);
    --content-left: var(--content-left-mobile);
    --content-width: var(--content-width-mobile);
    --footer-height: var(--footer-height-mobile);
    --footer-pad-x:  var(--content-left-mobile);
    /* Total depth from viewport bottom reserved for footer + home-indicator inset. */
    --footer-stack-height: calc(var(--footer-height) + env(safe-area-inset-bottom, 0px));
  }
  /* Wave / modal stack: anchor to footer + safe-area (overrides weaker per-page rules).
     About mounts `#monster-linear-ticker` beneath the wave — taller bottom offset wins below. */
  #monster-group {
    bottom: var(--footer-stack-height) !important;
  }
  #page-scaler:has(#monster-linear-ticker) #monster-group {
    bottom: calc(var(--footer-stack-height) + var(--about-ml-ticker-height) - 1px) !important;
  }

  /* Footer grid + safe-area: fills home-indicator row with brand blue. Bottom
     rubber-band pulls use `body::after` (see mobile base block), not global blue `body`. */
  .footer {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: var(--footer-height) env(safe-area-inset-bottom, 0px);
    justify-content: unset;
    align-items: center;
    height: auto;
    min-height: var(--footer-stack-height);
    box-sizing: border-box;
  }
  .footer-icons {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: start;
  }
  .footer-copyright {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: end;
  }

  .nav { display: none; }

  /* Mobile header (Figma 440-wide spec):
     - Keyhole logo 25×47 at x=20, y=30
     - Hamburger 76×47 at x=366 (i.e. right=20), y=30
     Home overrides .logo dimensions to use the wordmark (119×47). */
  .logo {
    top: 1.875rem;
    left: var(--content-left);
    width: 1.5625rem;
    height: 2.9375rem;
  }
  .nav-mobile-trigger {
    display: flex;
    top: 1.875rem;
    right: 0;
    border-right: none!important;
    /* width, height, border, background inherited from base rule */
  }
  .nav-mobile-trigger svg,
  .nav-mobile-trigger img {
    width: 2.125rem;  /* 34px */
    height: 1.375rem; /* 22px */
  }

  /* Figma mobile wave strip: 440×64 — same as About. Without this, .monster-area
     stays at --wave-height-desktop and the 1440×116 wave + 440×64 eyes stretch wrong. */
  #monster-group .monster-area {
    height: var(--wave-height-mobile) !important;
  }

  #monster-group.has-mobile-monster-eyes #monster-eyes-svg {
    display: none;
  }
  #monster-group.has-mobile-monster-eyes .monster-eyes-overlay-mobile {
    display: block;
  }
  #monster-group.has-mobile-monster-eyes .monster-area .eye-blink-group.closing {
    transform: none;
    opacity: 0;
    transition: opacity 50ms linear;
  }
  #monster-group.has-mobile-monster-eyes .monster-area .eye-blink-group.opening {
    transform: none;
    opacity: 1;
    transition: opacity 80ms linear;
  }

  /* Home easter egg: same desktop/mobile eye swap as footer */
  #home-monster #home-monster-eyes-svg {
    display: none;
  }
  #home-monster #home-monster-eyes-svg-mobile {
    display: block;
  }

  #home-monster .eye-blink-group.closing {
    transform: none;
    opacity: 0;
    transition: opacity 50ms linear;
  }
  #home-monster .eye-blink-group.opening {
    transform: none;
    opacity: 1;
    transition: opacity 80ms linear;
  }

  /* Mobile page clearance — Figma H1 starts at y=97 (header 30+47+20).
     Per-page mobile blocks can layer additional padding/adjustments on
     top; this sets the baseline clearance for absolute-positioned logo
     + hamburger. Pages that run a fixed canvas (Home) aren't affected
     since their .page is position:absolute/transform:scale. */
  .page {
    padding-top: 6.0625rem;
  }
}