/* THE THRESHOLD — shared stage: a real 3D leather-bound BOOK that OPENS on sign-in.
 * Closed: front cover (leather + living Vantablack Moonstone gem + title + form),
 * hinged on a left spine, with the stacked page block's fore-edge down the right.
 * Sign-in OPENS the cover (reveals the warm-lit first page); sign-out CLOSES it.
 * One stage → the login / sign-up / sign-out family. Above-the-fold on iPhone. */

.mth {
  --leather-crease: #0b0604;
  --leather-shadow: #1a0d07;
  --leather-body:   #2c150d;
  --leather-raised: #46230f;
  --leather-amber:  #7a4220;
  --leather-edge:   #080402;
  --gilt-hi:    #f0d99a;
  --gilt:       #c9a86a;
  --gilt-dim:   rgba(201,168,106,0.45);
  --gilt-faint: rgba(201,168,106,0.16);
  --brass-1:    #6e5326;
  --brass-2:    #c9a559;
  --brass-3:    #f4e2a6;
  --ink:        #07060a;
  --err:        #e2607a;
  --page-1:     #e8dcc0;
  --page-2:     #d6c49e;
  --page-3:     #c0a878;
  --thick:      16px;            /* book thickness */
  --font-disp:  'Cinzel', Georgia, serif;
  --font-ui:    'Space Mono', ui-monospace, monospace;
}

.mth {
  position: relative; min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 50% 42%, #0a0708 0%, #050304 60%, #000 100%);
  overflow: hidden; font-family: var(--font-ui); color: var(--gilt);
  -webkit-font-smoothing: antialiased;
}

/* ── 3D scene ── */
.mth-stage {
  position: relative;
  width: min(392px, 87vw);
  perspective: clamp(1400px, 200vw, 2200px);
  perspective-origin: 50% 38%;
  display: flex; align-items: center; justify-content: center;
}
.mth-book {
  position: relative; width: 100%; aspect-ratio: 1 / 1.28;
  max-height: 82dvh;
  transform-style: preserve-3d;
  transform: rotateX(4deg) rotateY(-7deg);
  transition: transform 1.3s cubic-bezier(.7,0,.2,1);
}
.mth.revealed .mth-book { transform: rotateX(5deg) rotateY(-8deg); }   /* gentle settle */
.mth-book.is-open  { transform: rotateX(6deg) rotateY(2deg); }          /* lean in as it opens */

/* under-book shadow on the void */
.mth-bookshadow {
  position: absolute; left: 8%; right: 2%; bottom: -6%; height: 16%;
  background: radial-gradient(60% 100% at 45% 0%, rgba(0,0,0,0.6), transparent 75%);
  filter: blur(10px); transform: translateZ(-30px); transition: all 1.3s; z-index: 0;
}
.mth-book.is-open ~ .mth-bookshadow { left: 2%; right: 2%; opacity: 0.8; }

/* back board */
.mth-backcover {
  position: absolute; inset: 0; border-radius: 4px 6px 6px 4px;
  transform: translateZ(calc(var(--thick) / -2));
  background: radial-gradient(150% 135% at 48% 40%, #321a10 0%, var(--leather-shadow) 60%, var(--leather-edge) 100%);
  box-shadow: 0 0 50px 10px rgba(0,0,0,0.6) inset;
}

/* the text block (stacked pages) */
.mth-pageblock {
  position: absolute; inset: 6px 8px 6px 10px;             /* boards lip over the pages */
  transform: translateZ(-1px); transform-style: preserve-3d;
  border-radius: 1px 2px 2px 1px;
}
/* first page (revealed when the cover opens) */
.mth-page {
  position: absolute; inset: 0; border-radius: 1px 2px 2px 1px;
  background:
    radial-gradient(80% 70% at 38% 30%, rgba(255,250,235,0.5), transparent 60%),
    repeating-linear-gradient(0deg, var(--page-1) 0px, var(--page-1) 2px, rgba(150,120,70,0.05) 3px),
    linear-gradient(170deg, #efe7d2, #d8c9a8 70%, #c7b489);
  box-shadow: inset 0 0 40px rgba(120,90,50,0.35), inset -8px 0 16px rgba(120,90,50,0.3);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 10%;
}
.mth-page-msg {
  font-family: var(--font-disp); font-style: italic; color: #5a4326;
  font-size: clamp(0.8rem, 2.4vw, 1rem); letter-spacing: 0.06em; line-height: 1.6;
  opacity: 0; transition: opacity .6s .5s;
}
.mth-book.is-open .mth-page-msg { opacity: 1; }
.mth-page-msg .em { display: block; font-style: normal; font-family: var(--font-ui);
  font-size: 0.8em; color: #7a5c33; margin-top: 8px; letter-spacing: 0.1em; }
/* the right fore-edge — true 3D face of stacked leaves */
.mth-foredge {
  position: absolute; top: 0; right: 0; height: 100%; width: var(--thick);
  transform-origin: right center; transform: rotateY(90deg);
  background:
    linear-gradient(180deg, rgba(255,250,235,0.5) 0%, transparent 8%, transparent 92%, rgba(90,65,35,0.5) 100%),
    repeating-linear-gradient(0deg, var(--page-1) 0px, var(--page-2) 1px, var(--page-3) 2px, var(--page-1) 3px);
  box-shadow: inset 0 0 6px rgba(120,90,50,0.5);
}
/* bottom edge leaves (subtle) */
.mth-botedge {
  position: absolute; left: 0; bottom: 0; width: 100%; height: var(--thick);
  transform-origin: bottom center; transform: rotateX(-90deg);
  background: repeating-linear-gradient(90deg, var(--page-1) 0px, var(--page-2) 2px, var(--page-3) 3px);
  opacity: 0.85;
}

/* spine (left bound edge) */
.mth-spine {
  position: absolute; top: 0; left: 0; height: 100%; width: var(--thick);
  transform-origin: left center; transform: rotateY(-90deg) translateX(calc(var(--thick) / -2));
  background: linear-gradient(180deg, #3a1d12, #1c0f09 50%, #120a06);
  box-shadow: inset 0 0 8px rgba(0,0,0,0.7);
  border-radius: 2px 0 0 2px;
}

/* ── front cover (the hinged leather board) ── */
.mth-frontcover {
  position: absolute; inset: 0;
  transform-origin: left center;
  transform: translateZ(calc(var(--thick) / 2)) rotateY(0deg);
  transform-style: preserve-3d;
  transition: transform 1.4s cubic-bezier(.7,0,.2,1);
}
.mth-book.is-open .mth-frontcover { transform: translateZ(calc(var(--thick) / 2)) rotateY(-168deg); will-change: transform; }
.mth-book.is-closing .mth-frontcover { transform: translateZ(calc(var(--thick) / 2)) rotateY(0deg); }

/* the leather FRONT face */
.mth-coverface {
  position: absolute; inset: 0; border-radius: 4px 7px 7px 4px;
  backface-visibility: hidden;
  background:
    radial-gradient(62% 50% at 36% 26%, rgba(138,76,36,0.66) 0%, transparent 56%),
    radial-gradient(40% 32% at 74% 76%, rgba(80,40,18,0.46) 0%, transparent 60%),
    radial-gradient(34% 40% at 18% 70%, rgba(0,0,0,0.4) 0%, transparent 55%),
    radial-gradient(155% 135% at 48% 40%, var(--leather-raised) 0%, var(--leather-body) 26%, var(--leather-shadow) 62%, var(--leather-edge) 100%),
    var(--leather-body);
  box-shadow:
    0 1.5px 0 rgba(255,214,158,0.08) inset,
    0 0 78px 18px rgba(0,0,0,0.66) inset,
    -6px 0 14px rgba(0,0,0,0.5),           /* spine-side shadow */
    0 6px 20px rgba(0,0,0,0.6);
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 30px) clamp(15px, 3.4vw, 26px);
}
.mth-coverface::before {                    /* broad patina mottle */
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background-image: var(--leather-mottle, none); background-size: 560px 560px;
  mix-blend-mode: soft-light; opacity: 0.92; pointer-events: none; z-index: 0;
}
.mth-coverface::after {                     /* fine pore grain */
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background-image: var(--leather-grain, none); background-size: 170px 170px;
  mix-blend-mode: overlay; opacity: 0.62; pointer-events: none; z-index: 0;
}
/* the INSIDE of the front cover (endpaper) — seen as it opens */
.mth-coverinside {
  position: absolute; inset: 0; border-radius: 4px 7px 7px 4px;
  transform: rotateY(180deg); backface-visibility: hidden;
  background:
    radial-gradient(120% 100% at 50% 40%, #3a2a16, #241608 70%, #160d05),
    repeating-linear-gradient(135deg, rgba(0,0,0,0.05) 0 6px, transparent 6px 12px);
  box-shadow: inset 0 0 50px rgba(0,0,0,0.6);
}

/* soft framing deboss on the cover (no hard lines) */
.mth-border {
  position: absolute; inset: clamp(12px,3vw,22px); border-radius: 5px;
  pointer-events: none; z-index: 1;
  box-shadow: 0 0 24px 5px rgba(0,0,0,0.22) inset;
}
.mth-border::before, .mth-border::after {
  content: ''; position: absolute; width: 14px; height: 14px;
  border: 1px solid rgba(201,168,106,0.10); opacity: 0.55;
}
.mth-border::before { top: 7px; left: 7px; border-right: none; border-bottom: none; }
.mth-border::after  { bottom: 7px; right: 7px; border-left: none; border-top: none; }

.mth-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 100%; }

/* ── stamped type ── */
.mth-wordmark {
  font-family: var(--font-disp); font-weight: 500;
  font-size: clamp(1rem, 3.1vw, 1.5rem); letter-spacing: 0.3em; text-indent: 0.3em;
  text-transform: uppercase;
  background: linear-gradient(180deg, var(--brass-3) 0%, var(--gilt) 48%, var(--brass-1) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.6)); margin: 0 0 4px;
}
.mth-motto { font-family: var(--font-disp); font-style: italic;
  font-size: clamp(0.58rem, 1.6vw, 0.7rem); letter-spacing: 0.22em; color: rgba(201,168,106,0.62);
  margin-bottom: clamp(12px, 2.6vw, 18px); }
.mth-rule { width: 60px; height: 1px; margin: 0 auto clamp(12px,2.6vw,18px);
  background: linear-gradient(90deg, transparent, var(--gilt-dim), transparent); }

/* ── gem ── */
.mth-jewel { position: relative; width: clamp(124px, 30vw, 176px); aspect-ratio: 5 / 6;
  margin: 0 auto clamp(14px, 2.6vw, 20px); }
.mth-bezel { position: absolute; inset: -2px; border-radius: 50% / 46%;
  background: conic-gradient(from 210deg, var(--brass-1) 0deg, var(--brass-3) 38deg, var(--brass-2) 88deg, var(--brass-1) 148deg, var(--brass-3) 208deg, var(--brass-2) 268deg, var(--brass-1) 320deg, var(--brass-3) 360deg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,0,0,0.55), 0 0.5px 0 rgba(255,235,190,0.45) inset;
  padding: 2px; }
.mth-bezel::after { content: ''; position: absolute; inset: 2px; border-radius: 50% / 46%;
  box-shadow: 0 3px 9px rgba(0,0,0,0.85) inset, 0 -1px 4px rgba(0,0,0,0.55) inset; pointer-events: none; }
.mth-well { position: absolute; inset: 2px; border-radius: 50% / 46%; overflow: hidden; background: #030204;
  box-shadow: 0 0 28px rgba(0,0,0,0.9) inset; }
.mth-canvas { width: 100%; height: 100%; display: block; }
/* still black moonstone (when no WebGL context is available) */
.mth-well.is-static { background: radial-gradient(120% 120% at 50% 46%, #0a0c12 0%, #050308 70%, #020103 100%); }
.mth-well.is-static::after { content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(44% 32% at 43% 37%, rgba(150,168,210,0.5), rgba(86,104,156,0.12) 56%, transparent 72%),
    radial-gradient(28% 20% at 60% 63%, rgba(120,140,200,0.22), transparent 70%),
    radial-gradient(120% 120% at 50% 50%, transparent 55%, rgba(0,0,0,0.6) 100%);
  mix-blend-mode: screen; }
.mth-screw { position: absolute; width: 5px; height: 5px; border-radius: 50%; z-index: 4;
  background: radial-gradient(circle at 40% 34%, var(--brass-2), var(--brass-1) 70%, #4a360f);
  box-shadow: 0 0 0 0.5px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,0.8) inset, 0 -0.5px 0.5px rgba(255,235,190,0.3) inset; }
.mth-screw::before { content: ''; position: absolute; top: 50%; left: 12%; right: 12%; height: 0.75px;
  background: rgba(0,0,0,0.7); transform: translateY(-50%) rotate(var(--slot, 30deg)); transform-origin: center; }
.mth-screw.n { top: -5px; left: 50%; margin-left: -2.5px; }
.mth-screw.s { bottom: -5px; left: 50%; margin-left: -2.5px; }
.mth-screw.e { right: -5px; top: 50%; margin-top: -2.5px; }
.mth-screw.w { left: -5px; top: 50%; margin-top: -2.5px; }

/* ── form (on the cover) ── */
.mth-form { width: 100%; max-width: 300px; }
.mth-field input { width: 100%; padding: 10px 4px; text-align: center;
  font-family: var(--font-ui); font-size: 0.9rem; letter-spacing: 0.06em; color: var(--gilt-hi);
  background: transparent; border: none; border-bottom: 1px solid var(--gilt-faint);
  box-shadow: 0 1px 0 rgba(0,0,0,0.4); outline: none; transition: border-color .4s, box-shadow .4s; }
.mth-field input::placeholder { color: rgba(201,168,106,0.35); text-transform: lowercase; letter-spacing: 0.2em; }
.mth-field input:focus { border-bottom-color: var(--gilt-hi); box-shadow: 0 1px 12px rgba(240,217,154,0.35); }
.mth-field input:-webkit-autofill { -webkit-text-fill-color: var(--gilt-hi); -webkit-box-shadow: 0 0 0 40px var(--leather-shadow) inset; }
.mth-enter { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  margin-top: 10px; padding: 12px 0; background: transparent; border: none; cursor: pointer;
  font-family: var(--font-disp); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--gilt-dim); transition: color .3s; }
.mth-enter:hover { color: var(--gilt-hi); }
.mth-enter .arr { transition: transform .3s; } .mth-enter:hover .arr { transform: translateX(4px); }
.mth-enter.loading .lbl, .mth-enter.loading .arr { display: none; }
.mth-enter .spin { display: none; width: 14px; height: 14px; border: 1.5px solid var(--gilt-faint);
  border-top-color: var(--gilt-hi); border-radius: 50%; animation: mth-spin .7s linear infinite; }
.mth-enter.loading .spin { display: block; }
@keyframes mth-spin { to { transform: rotate(360deg); } }
.mth-social { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; }
.mth-seal { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: none;
  cursor: pointer; padding: 6px 4px; font-family: var(--font-ui); font-size: 0.66rem; letter-spacing: 0.06em;
  color: rgba(201,168,106,0.66); transition: color .3s, transform .3s; }
.mth-seal:hover { color: var(--gilt-hi); transform: translateY(-1px); }
.mth-seal svg { width: 14px; height: 14px; }
.mth-social .dot { color: rgba(201,168,106,0.3); }
.mth-msg { margin-top: 14px; min-height: 1.1em; font-size: 0.74rem; letter-spacing: 0.05em; color: var(--gilt); }
.mth-msg.hidden { display: none; } .mth-msg.error { color: var(--err); } .mth-msg.success { color: var(--gilt-hi); }
.mth-msg .detail { display: block; font-size: 0.66rem; color: rgba(201,168,106,0.55); margin-top: 4px; letter-spacing: 0.16em; }
.mth-sky { margin-top: 12px; font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(201,168,106,0.34); }
.mth-sky.hidden { display: none; }

/* ── sign-out confirm view ── */
.mth-confirm { width: 100%; max-width: 300px; text-align: center; }
.mth-confirm .h { font-family: var(--font-disp); font-size: clamp(0.95rem,2.6vw,1.15rem); color: var(--gilt-hi); letter-spacing: 0.06em; margin-bottom: 6px; }
.mth-confirm .s { font-size: 0.72rem; color: rgba(201,168,106,0.6); line-height: 1.5; margin-bottom: 18px; }
.mth-actions { display: flex; flex-direction: column; gap: 10px; }
.mth-btn { font-family: var(--font-disp); letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.74rem;
  padding: 11px 0; border-radius: 3px; cursor: pointer; transition: all .25s; }
.mth-btn-out { color: #e8b27a; background: rgba(120,50,30,0.25); border: 1px solid rgba(200,110,70,0.4); }
.mth-btn-out:hover { background: rgba(160,70,40,0.4); color: #f3cf9a; }
.mth-btn-cancel { color: var(--gilt-dim); background: transparent; border: 1px solid var(--gilt-faint); }
.mth-btn-cancel:hover { color: var(--gilt-hi); border-color: var(--gilt-dim); }

/* ── reveal choreography ── */
.mth .mth-wordmark, .mth .mth-motto, .mth .mth-rule, .mth .mth-jewel, .mth .mth-form, .mth .mth-confirm {
  opacity: 0; transform: translateY(6px); transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
.mth.revealed .mth-wordmark { opacity: 1; transform: none; transition-delay: .15s; }
.mth.revealed .mth-motto    { opacity: 1; transform: none; transition-delay: .22s; }
.mth.revealed .mth-rule     { opacity: 1; transform: none; transition-delay: .26s; }
.mth.revealed .mth-jewel    { opacity: 1; transform: none; transition-delay: .3s; }
.mth.revealed .mth-form, .mth.revealed .mth-confirm { opacity: 1; transform: none; transition-delay: .44s; }

/* ── modal variant ── */
.mth.mth-modal { min-height: auto; background: none; }
.mth.mth-modal .mth-stage { width: min(380px, 88vw); }
/* keep the wordmark on one line in the narrower modal / card (was clipping to 'HISTORIA') */
.mth.mth-modal .mth-wordmark, .mth.mth-quiet .mth-wordmark {
  font-size: clamp(0.88rem, 3.4vw, 1.12rem); letter-spacing: 0.2em; text-indent: 0.2em; white-space: nowrap;
}

/* ── quiet sign-out card (no book, no gem) ── */
.mth.mth-quiet { background: radial-gradient(120% 90% at 50% 42%, #0a0708 0%, #050304 60%, #000 100%); }
.mth.mth-modal.mth-quiet { background: none; }
.mth-card {
  position: relative; width: min(360px, 90vw);
  padding: clamp(26px,6vw,42px) clamp(22px,5vw,36px) clamp(28px,6vw,38px);
  border-radius: 5px 7px 7px 5px; overflow: hidden; text-align: center;
  background:
    radial-gradient(62% 50% at 36% 26%, rgba(138,76,36,0.6) 0%, transparent 56%),
    radial-gradient(40% 32% at 74% 76%, rgba(80,40,18,0.42) 0%, transparent 60%),
    radial-gradient(155% 135% at 48% 40%, var(--leather-raised) 0%, var(--leather-body) 26%, var(--leather-shadow) 62%, var(--leather-edge) 100%),
    var(--leather-body);
  box-shadow:
    0 1.5px 0 rgba(255,214,158,0.08) inset, 0 0 70px 16px rgba(0,0,0,0.62) inset,
    0 30px 70px rgba(0,0,0,0.7), 0 4px 16px rgba(0,0,0,0.6);
}
.mth-card::before { content:''; position:absolute; inset:0; border-radius:inherit;
  background-image: var(--leather-mottle, none); background-size: 520px 520px; mix-blend-mode: soft-light; opacity: 0.9; pointer-events:none; z-index:0; }
.mth-card::after { content:''; position:absolute; inset:0; border-radius:inherit;
  background-image: var(--leather-grain, none); background-size: 160px 160px; mix-blend-mode: overlay; opacity: 0.6; pointer-events:none; z-index:0; }
.mth-card .mth-inner { gap: 0; }
.mth-card .mth-confirm { margin-top: 6px; }

/* ── above-the-fold / responsive ── */
@media (max-width: 480px) { .mth-stage { width: 92vw; } .mth-jewel { width: clamp(130px, 44vw, 190px); } }
@media (max-height: 720px) {
  .mth-book { aspect-ratio: 1 / 1.2; }
  .mth-jewel { width: clamp(120px, 26vh, 180px); margin-bottom: 12px; }
  .mth-motto { margin-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .mth-book, .mth-frontcover, .mth-bookshadow { transition: none !important; }
  .mth .mth-wordmark, .mth .mth-motto, .mth .mth-rule, .mth .mth-jewel, .mth .mth-form, .mth .mth-confirm {
    opacity: 1 !important; transform: none !important; transition: none !important; }
  .mth-enter .spin { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   GLASS THRESHOLD — broadly-appealing reskin (2026-06-13)

   The leather tome is lightened into a clean liquid-glass card floating over
   the shared LIVING FIELD (js/magna-field.js, mounted as .mth-field). The
   moonstone gem stays as the hero; the cover still flips open on submit.
   Universal, not niche — reads as awe to anyone. Fully reversible: delete this
   block to restore the leather book.
   ════════════════════════════════════════════════════════════════════════ */

/* the shared living field sits behind everything (.mth-atmos — NOT .mth-field,
   which is the email-input wrapper) */
.mth-atmos { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.mth { background: transparent; }
.mth.mth-quiet { background: transparent; }
.mth-stage, .mth-card { position: relative; z-index: 1; }

/* MODAL: the card sizes to its CONTENT — never a fixed box — so the wordmark
   and the social buttons can never be clipped at any viewport. The 3D book
   chassis collapses to one flat, flowing glass card. */
.mth.mth-modal .mth-book {
  aspect-ratio: auto !important; width: 100% !important; height: auto !important;
  max-height: none !important; transform: none !important;
}
.mth.revealed .mth-book, .mth-book.is-open { transform: none !important; }
.mth.mth-modal .mth-frontcover {
  position: relative !important; inset: auto !important; height: auto !important;
  transform: none !important;
}
.mth.mth-modal .mth-coverface {
  position: relative !important; inset: auto !important; height: auto !important;
  overflow: visible !important; justify-content: flex-start !important;
  padding: clamp(22px, 3.4vh, 34px) clamp(20px, 5vw, 38px) clamp(20px, 3vh, 30px) !important;
}
/* the revealed "key sent" page still overlays the card */
.mth.mth-modal .mth-pageblock { position: absolute !important; inset: 0 !important; }

/* kill the book's thickness, hardware + leather texture → one floating card */
.mth-backcover, .mth-spine, .mth-foredge, .mth-botedge, .mth-bookshadow,
.mth-coverface::before, .mth-coverface::after,
.mth-card::before, .mth-card::after,
.mth-screw { display: none !important; }

/* FRONT COVER · revealed PAGE · cover endpaper · sign-out CARD → obsidian glass
   Obsidian & Gold: a near-black charcoal vault door. One warm-grey hairline,
   gold the lone accent. Neutral + timeless — no violet, no candy glow. */
.mth-coverface, .mth-page, .mth-coverinside, .mth-card {
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, rgba(21,22,25,0.78) 0%, rgba(12,13,15,0.74) 100%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.05);
  backdrop-filter: blur(26px) saturate(1.05);
  border: 1px solid rgba(228,222,205,0.12);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.10) inset,
    0 -1px 0 rgba(0,0,0,0.30) inset,
    0 34px 90px rgba(0,0,0,0.62),
    0 0 0 1px rgba(232,200,121,0.06) !important;
}
.mth-page { box-shadow: 0 0 44px rgba(232,200,121,0.05) inset, 0 30px 80px rgba(0,0,0,0.6) !important; }
.mth-page-msg { color: rgba(238,234,224,0.92); }
.mth-page-msg .em { color: rgba(232,200,121,0.95); }

/* deboss frame → faint glass corner ticks */
.mth-border { box-shadow: none; }
.mth-border::before, .mth-border::after { border-color: rgba(228,222,205,0.18); }

/* GEM → a smaller, perfectly round porthole with a THIN refined gilt ring.
   (base gem is an oval at 5/6 + 50%/46% radius — the modal forces a true circle) */
.mth.mth-modal .mth-jewel {
  width: clamp(116px, 23vw, 156px) !important; aspect-ratio: 1 / 1 !important;
  margin: 2px auto clamp(14px, 2.2vh, 20px) !important;
}
.mth.mth-modal .mth-bezel {
  inset: -1.5px !important; padding: 1.5px !important; border-radius: 50% !important;
  background: conic-gradient(from 215deg,
    rgba(184,150,86,0.45), rgba(247,231,188,0.92), rgba(198,164,98,0.55),
    rgba(232,206,140,0.7), rgba(247,231,188,0.92), rgba(184,150,86,0.45)) !important;
  box-shadow:
    0 0 10px rgba(232,200,121,0.16),
    0 1px 2px rgba(0,0,0,0.5),
    0 0 0 0.5px rgba(0,0,0,0.45) inset !important;
}
.mth.mth-modal .mth-bezel::after { inset: 1.5px !important; border-radius: 50% !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.7) inset !important; }
.mth.mth-modal .mth-well {
  inset: 1.5px !important; border-radius: 50% !important;
  box-shadow: 0 0 24px rgba(0,0,0,0.8) inset, 0 0 14px rgba(232,200,121,0.10) !important;
}

/* modal gem → obsidian stone with a faint gold ember (the bed under the globe) */
.mth.mth-modal .mth-well.is-static {
  background: radial-gradient(120% 120% at 50% 46%, #101011 0%, #08080a 70%, #020203 100%) !important;
}
.mth.mth-modal .mth-well.is-static::after {
  background:
    radial-gradient(44% 32% at 45% 40%, rgba(232,200,121,0.30), rgba(150,120,60,0.10) 56%, transparent 72%),
    radial-gradient(26% 18% at 60% 64%, rgba(208,170,104,0.16), transparent 70%) !important;
}

/* THE WORLD IN THE RING — spinning Earth clipped to the circular well */
.mth.mth-modal .mth-well.has-globe { background: #02030a !important; }
.mth.mth-modal .mth-well .mth-globe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; border: 0;
  z-index: 1; opacity: 0; transition: opacity 1.1s var(--th-ease, ease);
}
.mth.mth-modal.revealed .mth-well .mth-globe { opacity: 1; }
/* the blank gem canvas must not veil the globe in the modal */
.mth.mth-modal .mth-well.has-globe .mth-canvas { display: none !important; }
/* the gold-ember bed glows through the globe's transparent void edges */
.mth.mth-modal .mth-well.has-globe.is-static::after { z-index: 2; mix-blend-mode: screen; opacity: 0.5; }
/* faint inner vignette so the globe seats into the orb instead of floating flat */
.mth.mth-modal .mth-well.has-globe::before {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 26px rgba(0,0,0,0.55), inset 0 0 4px rgba(232,200,121,0.18);
}

/* type reads on glass; keep the gilt wordmark */
.mth-motto { color: rgba(222,216,200,0.60); }
.mth-field input { color: #f4f1e8; border-bottom-color: rgba(228,222,205,0.22); }
.mth-field input::placeholder { color: rgba(222,216,200,0.40); }
.mth-field input:focus { border-bottom-color: rgba(232,200,121,0.9); box-shadow: 0 1px 12px rgba(232,200,121,0.3); }
.mth-field input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px rgba(17,17,19,0.96) inset !important; -webkit-text-fill-color: #f4f1e8 !important; }
.mth-enter { color: rgba(232,200,121,0.86); }
.mth-enter:hover { color: #fff4d6; }
.mth-seal { color: rgba(222,216,200,0.72); }
.mth-seal:hover { color: #fff; }

/* tighter, balanced vertical rhythm in the modal */
.mth.mth-modal .mth-wordmark { font-size: clamp(0.92rem, 2.5vw, 1.22rem) !important; margin: 0 0 5px !important; }
.mth.mth-modal .mth-motto { margin-bottom: clamp(9px, 1.6vh, 13px) !important; }
.mth.mth-modal .mth-rule { margin-bottom: clamp(9px, 1.6vh, 13px) !important; }
.mth.mth-modal .mth-form { margin-top: 2px !important; }

/* ── Footprint: the door is modest and NEVER clips at any viewport ──────────
   Width: usable on phones, modest on desktop (well under half the screen).
   Height: the card is content-sized, so it's naturally short; on a genuinely
   short viewport the WHOLE modal scrolls (it never slices content). */
.mth.mth-modal { background: transparent; overflow: visible; }
.mth.mth-modal .mth-atmos { inset: -44px; }
.mth.mth-modal .mth-stage { width: min(380px, 90vw); }
@media (min-width: 700px) { .mth.mth-modal .mth-stage { width: min(380px, 40vw); } }

/* the modal scroll surface: center when it fits, scroll when it doesn't —
   so nothing is ever clipped, on any device, in any orientation */
.mth.mth-modal {
  min-height: 100dvh; max-height: 100dvh; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(14px, 4vh, 40px) 0;
  align-items: center;
}
@media (max-height: 600px) { .mth.mth-modal { align-items: flex-start; } }

/* ════════════════════════════════════════════════════════════════════════
   PAGE variant on phones — never clip under the Dynamic Island or the browser
   toolbar (2026-06-19). The 3D leather book has a fixed-aspect cover face with
   overflow:hidden, so on a tall phone the wordmark (top) and the social row
   (bottom) get sliced, and nothing is inset from the notch/home-indicator.
   Fix: on small viewports flatten the book to the SAME content-sized,
   scrollable glass card the modal already uses, and pad it inside the safe
   area so it sits cleanly between the Dynamic Island and the bottom bar.
   Desktop keeps the immersive 3D book untouched.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px), (max-height: 720px) {
  .mth:not(.mth-modal) {
    min-height: 100dvh; max-height: 100dvh; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    align-items: center;
    padding:
      calc(env(safe-area-inset-top, 0px)    + clamp(14px, 4vh, 36px))
      env(safe-area-inset-right, 0px)
      calc(env(safe-area-inset-bottom, 0px) + clamp(14px, 4vh, 36px))
      env(safe-area-inset-left, 0px);
  }
  /* flatten the 3D book chassis → one flowing card that sizes to its content */
  .mth:not(.mth-modal) .mth-book {
    aspect-ratio: auto; width: 100%; height: auto;
    max-height: none; transform: none !important;
  }
  .mth:not(.mth-modal) .mth-frontcover {
    position: relative; inset: auto; height: auto; transform: none !important;
  }
  .mth:not(.mth-modal) .mth-coverface {
    position: relative; inset: auto; height: auto;
    overflow: visible; justify-content: flex-start;
  }
  /* the "a key has been sent" page still overlays the flattened card */
  .mth:not(.mth-modal) .mth-pageblock { position: absolute; inset: 0; }
  /* hide the book hardware/thickness that only reads in true 3D */
  .mth:not(.mth-modal) .mth-backcover,
  .mth:not(.mth-modal) .mth-spine,
  .mth:not(.mth-modal) .mth-foredge,
  .mth:not(.mth-modal) .mth-botedge,
  .mth:not(.mth-modal) .mth-bookshadow { display: none; }
  /* slim the gilt bezel ~30% on phones (base ring is 3px → 2px) */
  .mth:not(.mth-modal) .mth-bezel { inset: -3px; padding: 2px; }
  .mth:not(.mth-modal) .mth-bezel::after { inset: 2px; }
  .mth:not(.mth-modal) .mth-well { inset: 2px; }
}
/* genuinely short viewports start the scroll at the top so the wordmark is
   never sliced off above the fold */
@media (max-height: 600px) { .mth:not(.mth-modal) { align-items: flex-start; } }