/* Mona Sans, served from this site (no request to Google Fonts) */
@font-face { font-family: "Mona Sans"; font-style: normal; font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; src: url("../assets/fonts/mona-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Mona Sans"; font-style: normal; font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; src: url("../assets/fonts/mona-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Mona Sans"; font-style: normal; font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; src: url("../assets/fonts/mona-sans-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }

/* GHIM's own page: a night gym in graphite with GHIM green, turning to daylight for the home half. */
:root {
  --font: "Mona Sans", ui-sans-serif, system-ui, sans-serif;
  --sf: -apple-system, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;
  --sfr: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
  --green: #1cba54;
  --teal: #33d9b3;
  --chest: #57c785; --back: #618ff0; --shoulders: #fa9e47; --arms: #b87af0; --legs: #52bdc7; --abs: #f57575;
  --ground: #070807;
  --ink: #f1f3ee;
  --ink-rgb: 241, 243, 238;
  --soft: 0.8; /* the share of ink for words that support the bold ones */
  --ink-2: rgba(var(--ink-rgb), 0.74);
  --ink-3: rgba(var(--ink-rgb), 0.6);
  --line: rgba(var(--ink-rgb), 0.14);
  --chip: rgba(var(--ink-rgb), 0.08);
  --thumb: #f1f3ee;
  --thumb-ink: #0a0b0a;
  /* the nav and rail ink, set every frame from the room under them (0 dark room → light ink, 1 light room) */
  --nav-rgb: 241, 243, 238;
  --rail-rgb: 241, 243, 238;
  color-scheme: dark;
}
[data-tone="light"] {
  --ink: #121512;
  --ink-rgb: 18, 21, 18;
  --ink-2: rgba(var(--ink-rgb), 0.74);
  --ink-3: rgba(var(--ink-rgb), 0.62);
  --line: rgba(var(--ink-rgb), 0.13);
  --chip: rgba(var(--ink-rgb), 0.06);
  --thumb: #121512;
  --thumb-ink: #ffffff;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--ground); scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body { font-family: var(--font); color: var(--ink); background: var(--ground); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: rgba(28, 186, 84, 0.32); color: inherit; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 8px; }

.skip { position: fixed; left: 16px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 999px; background: #f1f3ee; color: #0a0b0a; font-weight: 600; }
.skip:focus { top: 16px; }
#runway { width: 1px; }

/* ——— nav: its ink follows the room under it, frame by frame ——— */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 40; height: 68px; padding: 0 clamp(24px, 3.4vw, 56px);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: rgb(var(--nav-rgb));
}
.nav > a { color: rgb(var(--nav-rgb)); }
.nav-mark { justify-self: start; display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.nav-logo { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 17px; height: 17px; }
.nav-logo i { border-radius: 3px; background: currentColor; opacity: 0.35; }
.nav-logo i:first-child { opacity: 1; background: var(--green); }
.nav-app { display: inline-flex; align-items: center; gap: 9px; font-weight: 760; font-size: 15px; letter-spacing: 0.02em; }
.nav-app img { width: 26px; height: 26px; border-radius: 7px; }
.nav-get {
  justify-self: end; height: 34px; padding: 0 16px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 14px; font-weight: 640;
  color: rgb(var(--nav-rgb)); box-shadow: inset 0 0 0 1.5px rgba(var(--nav-rgb), 0.32);
}
.nav-get:hover { box-shadow: inset 0 0 0 1.5px rgba(var(--nav-rgb), 0.7); }

/* ——— the stage ——— */
.stage { position: fixed; inset: 0; overflow: hidden; }
.rooms, .room, .gl, .glass-layer, .air, .words { position: absolute; inset: 0; }
.gl { z-index: 2; }
.glass-layer { z-index: 3; pointer-events: none; }
.air { z-index: 4; pointer-events: none; }
.words { z-index: 5; pointer-events: none; }
.words > * { pointer-events: auto; }

/* the HTML on a device's glass */
.glass { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; visibility: hidden; contain: layout paint; backface-visibility: hidden; }
.glass-in { position: absolute; inset: 0; }
.glass-island { position: absolute; left: 0; top: 11px; z-index: 29; width: 126px; height: 37px; border-radius: 19px; background: #000; opacity: 0; pointer-events: none; }
.glass-punch { position: absolute; left: 0; top: 13px; z-index: 29; width: 12px; height: 12px; border-radius: 50%; background: #000; box-shadow: inset 0 0 0 1.5px #16171b; opacity: 0; pointer-events: none; }
/* the iPhone Duo's inner display, half by half, with a soft shadow down the crease */
.glass-duo .glass-crease { position: absolute; top: 0; bottom: 0; width: 14px; z-index: 28; pointer-events: none; }
.glass-duo-left .glass-crease { right: 0; background: linear-gradient(to left, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0)); }
.glass-duo-right .glass-crease { left: 0; background: linear-gradient(to right, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0)); }
.app-duo-half { right: auto; bottom: auto; }
.glass-sheen { position: absolute; inset: -10% -60%; pointer-events: none; z-index: 30; background: linear-gradient(112deg, transparent 40%, rgba(255, 255, 255, 0.07) 47%, rgba(255, 255, 255, 0.02) 52%, transparent 58%); }
.app { position: absolute; inset: 0; overflow: hidden; font-family: var(--sf); transform-origin: 0 0; }
/* a morphing piece: placed by its frame, origin at its top-left */
.mp { position: absolute; left: 0; top: 0; transform-origin: 0 0; contain: layout; }
.app .gl { display: block; width: 100%; height: 100%; }

/* ——— rooms: each opens out of the device through a soft-edged iris (--ix, --iy, --ir, set per frame) ——— */
.room { visibility: hidden; --ix: 50%; --iy: 50%; --ir: 0px; --if: 140px; }
.room.iris {
  -webkit-mask-image: radial-gradient(circle at var(--ix) var(--iy), #000 calc(var(--ir) - var(--if)), transparent var(--ir));
  mask-image: radial-gradient(circle at var(--ix) var(--iy), #000 calc(var(--ir) - var(--if)), transparent var(--ir));
}
.room > i { position: absolute; inset: 0; }
.room-hero { background: #050605; }
.room-hero > i { background: radial-gradient(ellipse 34% 40% at 50% 62%, rgba(28, 186, 84, 0.16), transparent 72%), radial-gradient(ellipse 90% 34% at 50% 104%, rgba(51, 217, 179, 0.07), transparent 70%), radial-gradient(ellipse 60% 30% at 50% -6%, rgba(255, 255, 255, 0.05), transparent 70%); }
.room-before { background: #0b0c0e; }
.room-before > i { background: radial-gradient(ellipse 40% 50% at 32% 50%, rgba(150, 160, 178, 0.1), transparent 72%), radial-gradient(ellipse 70% 40% at 90% 100%, rgba(110, 120, 140, 0.07), transparent 70%); }
.room-plan { background: #090a09; }
.room-plan > i { background: radial-gradient(ellipse 42% 52% at 68% 48%, rgba(28, 186, 84, 0.13), transparent 70%), radial-gradient(ellipse 60% 40% at 12% 100%, rgba(82, 189, 199, 0.07), transparent 70%); }
.room-workouts { background: #0a0b0b; }
.room-workouts > i { background: radial-gradient(ellipse 44% 54% at 68% 46%, rgba(51, 217, 179, 0.11), transparent 70%), radial-gradient(ellipse 50% 40% at 0% 0%, rgba(250, 158, 71, 0.06), transparent 70%); }
.room-library { background: #08090a; }
.room-library > i { background: radial-gradient(ellipse 46% 56% at var(--lx, 68%) 48%, color-mix(in oklab, var(--lt, #57c785) 18%, transparent), transparent 72%), radial-gradient(ellipse 70% 40% at 50% 104%, rgba(255, 255, 255, 0.04), transparent 70%); }
.room-train { background: var(--field, #2a0f0c); }
.room-train > i { background: radial-gradient(ellipse 50% 60% at 68% 40%, var(--fieldglow, rgba(219, 97, 66, 0.4)), transparent 72%), radial-gradient(ellipse 80% 40% at 50% 110%, rgba(0, 0, 0, 0.45), transparent 70%); }
.room-watch { background: #030404; }
.room-watch > i { background: radial-gradient(ellipse 36% 46% at 64% 30%, rgba(28, 186, 84, 0.16), transparent 70%), radial-gradient(ellipse 30% 40% at 82% 60%, rgba(51, 217, 179, 0.06), transparent 70%); }
.room-finish { background: linear-gradient(180deg, #1a0d2a, #2a1022 60%, #2c0f14); }
.room-finish > i { background: radial-gradient(ellipse 44% 50% at 68% 46%, rgba(255, 196, 120, 0.12), transparent 70%); }
.room-duo { background: #eeece6; }
.room-duo > i { background: radial-gradient(ellipse 46% 52% at 66% 46%, rgba(255, 255, 255, 0.9), transparent 72%), radial-gradient(ellipse 60% 40% at 10% 100%, rgba(107, 143, 112, 0.12), transparent 70%); }
.room-ipad { background: #f2efe8; }
.room-ipad > i { background: radial-gradient(ellipse 48% 54% at 66% 50%, rgba(255, 232, 210, 0.7), transparent 72%), radial-gradient(ellipse 50% 40% at 100% 0%, rgba(255, 92, 13, 0.06), transparent 70%); }
.room-mac { background: #e9e7e1; }
.room-mac > i { background: radial-gradient(ellipse 54% 56% at 64% 46%, rgba(255, 255, 255, 0.85), transparent 72%), radial-gradient(ellipse 60% 40% at 0% 100%, rgba(31, 107, 71, 0.08), transparent 70%); }
.room-tv { background: #0d0a08; }
.room-tv > i { background: radial-gradient(ellipse 30% 46% at 94% 40%, rgba(255, 170, 90, 0.16), transparent 70%), radial-gradient(ellipse 50% 40% at 64% 100%, rgba(255, 120, 40, 0.07), transparent 70%); }
.room-vision { background: #24211e; }
.room-vision > i { background: radial-gradient(ellipse 60% 60% at 62% 40%, rgba(255, 238, 214, 0.14), transparent 72%), linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.3)); }
.room-everywhere { background: #080908; }
.room-everywhere > i { background: radial-gradient(ellipse 46% 56% at 66% 48%, rgba(28, 186, 84, 0.12), transparent 70%), radial-gradient(ellipse 40% 40% at 90% 90%, rgba(97, 143, 240, 0.07), transparent 70%); }
.room-close { background: #060706; }
.room-close > i { background: radial-gradient(ellipse 50% 46% at 50% 76%, rgba(28, 186, 84, 0.14), transparent 70%); }

/* the chapters, along the bottom */
.rail {
  position: absolute; left: 50%; bottom: 20px; z-index: 6; transform: translateX(-50%);
  display: flex; gap: var(--rg, 18px); padding: 8px 14px; border-radius: 999px; visibility: hidden; color: rgb(var(--rail-rgb));
}
.rail button { position: relative; padding: 4px 0 7px; font-size: var(--rf, 12.5px); font-weight: 620; white-space: nowrap; color: rgba(var(--rail-rgb), 0.56); }
.rail button i { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 1px; background: rgb(var(--rail-rgb)); transform-origin: 0 50%; transform: scaleX(0); opacity: 0.85; }
.rail button[aria-current="true"], .rail button:hover { color: rgb(var(--rail-rgb)); }

/* the text version: there for screen readers, out of sight for everyone else */
.outline { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }