/* Casa del Mar.
   Layout concept: the site is a house by the sea in the spirit of Antoni Gaudí. A mosaic facade,
   then rooms of different colors joined by wavy, sculpted edges; the animals are seen through
   organic stone windows. No boxes, no straight edges, nothing neon except the grotto's glow. */
:root {
  /* Gaudí's sea palette */
  --cobalt: #1F4E9E;
  --cobalt-deep: #163A72;
  --turquoise: #2A9DB0;
  --seaglass: #9AD6C8;
  --foam: #E9F6F1;
  --ochre: #D9A441;
  --coral: #E8836F;
  --terracotta: #C2643E;
  --lilac: #7A62B0;
  --stone: #F1E5CE;          /* Montjuïc sandstone: window frames, cartouches */
  --stone-shade: #D8C5A2;
  --plaster: #F8F0E3;        /* warm interior walls */
  --sand: #EBD7B4;

  /* Rooms */
  --room-plaster: #F8F0E3;
  --room-cobalt: #173C74;
  --room-teal: #12566A;
  --room-night: #10284D;
  --room-terrace: #F2DFC0;
  --room-grotto: #07111F;

  /* Ink */
  --ink: #15304A;
  --ink-soft: #4A6274;
  --ink-light: #F4F8F6;
  --ink-light-soft: #C6DAD9;
  --gold: #F0C27E;           /* small labels and sightings on dark rooms */
  --lagoon: #8FD3DC;         /* links on dark rooms */
  --glow: #8FFFE0;           /* bioluminescence only */

  /* Values the canvas creatures read */
  --d0: #EAF8EE; --d1: #CFEDE5; --d2: #A6DDD6; --d3: #24788F; --d4: #1A5C78; --d5: #164A68; --d6: #13355A; --d7: #07111F;
  --bed: #E6D3A3; --bed-shade: #CDB683;
  --sand-ink: #E9DCC0;
  --coral-ink: #C2412B;
  --cyan-deep: #8FD3DC;
  --ink-deep: #F4F8F6; --ink-deep-soft: #C6DAD9;
  --caustic: 255, 255, 255; --caustic-k: .42;
  --ts-water: #0B3A52;
  --plank: #7A5536;

  /* Type */
  --f-display: "Caprasimo", "Cooper Black", Georgia, serif;
  --f-body: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-ui: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-story: "Newsreader", "Iowan Old Style", Georgia, serif;
  --f-mono: "DM Mono", ui-monospace, Menlo, Consolas, monospace;
  --f-italic: "Instrument Sans", "Segoe UI", system-ui, sans-serif;

  --step--1: clamp(.82rem, .79rem + .15vw, .9rem);
  --step-0: clamp(1.04rem, 1rem + .25vw, 1.16rem);
  --step-1: clamp(1.28rem, 1.16rem + .55vw, 1.6rem);
  --step-2: clamp(1.7rem, 1.45rem + 1.2vw, 2.4rem);
  --step-3: clamp(2.2rem, 1.75rem + 2.1vw, 3.5rem);
  --step-4: clamp(3.2rem, 2.3rem + 5vw, 7rem);

  --gutter: clamp(16px, 4vw, 52px);
  --measure: 40rem;
  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--room-plaster); color: var(--ink); font-family: var(--f-body); font-size: var(--step-0); line-height: 1.62; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; line-height: 1.08; text-wrap: balance; font-weight: 400; }
h2 { font-family: var(--f-display); font-size: var(--step-3); letter-spacing: -.01em; max-width: 18ch; }
h3 { font-family: var(--f-ui); font-weight: 600; font-size: var(--step-1); }
p { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--ink); color: var(--plaster); padding: .5rem .9rem; border-radius: 999px; font-family: var(--f-ui); }
.skip:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }
.wrap { width: 100%; max-width: 74rem; margin-inline: auto; padding-inline: var(--gutter); position: relative; z-index: 2; }
@media (min-width: 900px) { .wrap { padding-right: calc(var(--gutter) + 5rem); } }

.eyebrow, .kicker, .room-name { font-family: var(--f-ui); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.room-name { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1.2rem; opacity: .85; }
.room-name::before { content: ""; width: 26px; height: 12px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: currentColor; opacity: .5; }
.intro { font-size: var(--step-1); line-height: 1.45; max-width: var(--measure); margin-top: .8rem; }
.links { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: 1rem; font-family: var(--f-ui); font-size: var(--step--1); font-weight: 600; }
.links a::after { content: " \2197"; }
.shortcuts a, .links a, .social a, .list-toggle, .more-btn, .copy, .mail, .ts-back, .ts-open-t { text-transform: capitalize; }

/* Rooms and their sculpted edges */
.zone { position: relative; }
.room { padding-block: clamp(4.5rem, 9vw, 8rem) clamp(5rem, 10vw, 9rem); background: var(--room); }
.edge { position: absolute; left: 0; top: 1px; width: 100%; height: clamp(50px, 8vw, 120px); transform: translateY(-100%); z-index: 1; pointer-events: none; }
.edge path { fill: var(--room); }
.plaster { --room: var(--room-plaster); color: var(--ink); }
.cobalt  { --room: var(--room-cobalt); color: var(--ink-light); }
.teal    { --room: var(--room-teal); color: var(--ink-light); }
.night   { --room: var(--room-night); color: var(--ink-light); }
.terrace { --room: var(--room-terrace); color: var(--ink); }
.cobalt .links a, .teal .links a, .night .links a { color: var(--lagoon); }
.cobalt .kicker, .teal .kicker, .night .kicker, .fc-k { color: var(--gold); }

/* Soft sunlight layer behind everything in the deep rooms */
.backdrop-fx { position: fixed; inset: 0; pointer-events: none; z-index: 1; }
.backdrop-fx canvas { width: 100%; height: 100%; display: block; }

/* Organic shapes: no two windows alike, and they breathe very slowly */
.shape-a { border-radius: 46% 54% 40% 60% / 56% 44% 58% 42%; }
.shape-b { border-radius: 9% 11% 8% 12% / 38% 30% 34% 40%; }
.shape-c { border-radius: 12% 8% 14% 9% / 44% 36% 40% 34%; }
.shape-d { border-radius: 42% 58% 46% 54% / 40% 46% 54% 60%; }
.shape-e { border-radius: 14% 10% 9% 13% / 30% 42% 36% 44%; }
@keyframes breathe-a { 0%, 100% { border-radius: 46% 54% 40% 60% / 56% 44% 58% 42%; } 50% { border-radius: 52% 48% 46% 54% / 50% 52% 48% 50%; } }
@keyframes breathe-d { 0%, 100% { border-radius: 42% 58% 46% 54% / 40% 46% 54% 60%; } 50% { border-radius: 50% 50% 40% 60% / 48% 40% 60% 52%; } }
.hero-window .shape-a, .hero-window .shape-a .pane { animation: breathe-a 16s ease-in-out infinite; }
.window.shape-d, .window.shape-d .encounter { animation: breathe-d 18s ease-in-out infinite; }

/* Mosaic-framed openings: a mosaic canvas behind, the view inset on top */
.frame-mosaic { position: relative; display: block; padding: clamp(10px, 1.4vw, 18px); overflow: hidden; box-shadow: 0 30px 60px -30px rgba(10, 30, 60, .55), inset 0 0 0 3px rgba(255, 255, 255, .35); }
.frame-mosaic > canvas.mosaic { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.frame-mosaic > .pane { position: relative; display: block; overflow: hidden; border-radius: inherit; box-shadow: inset 0 6px 24px rgba(0, 20, 40, .45); }

/* Stone windows onto the sea */
.window-wrap { position: relative; z-index: 2; width: min(78rem, calc(100% - 2 * var(--gutter))); margin: clamp(4rem, 8vw, 7rem) auto 0; }
.window { position: relative; overflow: hidden; background: var(--stone); padding: clamp(10px, 1.3vw, 16px);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), inset 0 -6px 14px rgba(120, 90, 50, .25), 0 40px 70px -40px rgba(8, 26, 50, .65); }
.window .encounter { position: relative; margin: 0; overflow: hidden; border-radius: inherit; height: clamp(330px, 56vh, 600px); background: linear-gradient(var(--d0), var(--d1));
  box-shadow: inset 0 10px 30px rgba(0, 30, 50, .35); }
.window .encounter canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.window.deepglass { background: linear-gradient(160deg, #E9DCC2, #CDB78F); }
.enc-whale { background: radial-gradient(ellipse at 50% 0%, #2E7E9C, #164A68 70%) !important; }
.enc-octo { background: radial-gradient(ellipse at 40% 20%, #1E4E78, #10284D 75%) !important; height: clamp(360px, 60vh, 640px) !important; cursor: pointer; }
.enc-jelly { background: radial-gradient(ellipse at 50% 10%, #13355A, #060E1C 80%) !important; height: clamp(420px, 70vh, 720px) !important; }
.window.shape-d { width: min(46rem, 100%); margin-inline: auto; }
.plaque { position: relative; z-index: 2; width: fit-content; max-width: min(38rem, 100%); margin: 1.1rem auto 0; padding: .7rem 1.2rem .8rem; border-radius: 22px 30px 26px 34px / 30px 24px 32px 26px; background: var(--stone); color: var(--ink); font-size: .92rem; line-height: 1.5; text-align: center; box-shadow: 0 14px 30px -18px rgba(10, 30, 60, .5), inset 0 1px 0 rgba(255, 255, 255, .7); }
.sight { display: block; font-family: var(--f-ui); font-weight: 600; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--terracotta); margin-bottom: .2rem; }

/* ---------- The facade ---------- */
.facade { min-height: min(100svh, 980px); display: flex; align-items: center; overflow: hidden; background: var(--cobalt); padding-block: clamp(5rem, 9vh, 7rem) clamp(6rem, 12vh, 9rem); }
.facade-tiles { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.facade-inner { position: relative; z-index: 2; width: 100%; max-width: 78rem; margin-inline: auto; padding-inline: var(--gutter); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-areas: "c w" "a w"; gap: clamp(1.4rem, 3vw, 2.6rem) clamp(1.6rem, 4vw, 4rem); align-items: center; }
@media (min-width: 900px) { .facade-inner { padding-right: calc(var(--gutter) + 4rem); } }
.cartouche { grid-area: c; position: relative; padding: clamp(1.6rem, 3.4vw, 2.8rem) clamp(1.5rem, 3.6vw, 3rem); background: var(--stone); color: var(--ink);
  border-radius: 64px 120px 70px 140px / 90px 60px 110px 70px;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .8), inset 0 -10px 22px rgba(130, 95, 50, .25), 0 40px 70px -40px rgba(5, 20, 50, .8); }
.eyebrow { color: var(--terracotta); }
.name { font-family: var(--f-display); font-size: clamp(3rem, 1.6rem + 4.6vw, 6rem); letter-spacing: -.02em; line-height: .9; margin: .5rem 0 1rem; color: var(--cobalt-deep); }
.name em { font-style: normal; color: var(--turquoise); padding-left: .3em; }
.lede { font-size: var(--step-0); line-height: 1.55; max-width: 32rem; }
.shortcuts { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.3rem; }
.shortcuts a { font-family: var(--f-ui); font-weight: 600; font-size: var(--step--1); text-decoration: none; color: var(--ink-light); background: var(--cobalt); padding: .55rem 1.1rem .6rem; border-radius: 999px 900px 999px 800px / 900px 999px 800px 999px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25), 0 8px 16px -10px rgba(10, 30, 60, .8); transition: transform .3s, background-color .3s; }
.shortcuts a:nth-child(2) { background: var(--turquoise); }
.shortcuts a:nth-child(3) { background: var(--terracotta); }
.shortcuts a:hover { transform: translateY(-3px) rotate(-1.5deg); }
.hero-window { grid-area: w; }
.hero-window .frame-mosaic { aspect-ratio: 4 / 5; max-height: 74vh; margin-inline: auto; width: 100%; }
.pane.water { width: 100%; height: 100%; background: radial-gradient(120% 80% at 70% 0%, rgba(255, 214, 160, .55), transparent 55%), linear-gradient(#BFEDE6, #5CB8C6 60%, #2A86A8); }
#caustics, #school { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#school { pointer-events: none; }
.azulejo { grid-area: a; position: relative; padding: 1rem 1.2rem 1.1rem; background: #FBF7EE; color: var(--ink); border-radius: 26px 34px 30px 38px / 34px 28px 38px 30px;
  border: 3px solid var(--cobalt); box-shadow: 0 0 0 6px #FBF7EE, 0 0 0 8px var(--turquoise), 0 30px 60px -30px rgba(5, 20, 50, .8); }
.now-k { font-family: var(--f-ui); font-size: .76rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 600; color: var(--cobalt); display: flex; align-items: center; gap: .55rem; }
.now-k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); animation: ping 2.6s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(232, 131, 111, .55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(232, 131, 111, 0); } }
.reef-table { margin-top: .5rem; font-family: var(--f-ui); }
.rt-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.25fr); gap: .5rem; align-items: center; padding-block: .4rem; border-bottom: 1px dashed rgba(31, 78, 158, .25); font-size: var(--step--1); }
.rt-head { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); padding-block: .2rem .35rem; border-bottom-style: solid; }
#reef-rows .rt-row:last-child { border-bottom: 0; }
.rt-name { display: grid; line-height: 1.2; }
.rt-name b { font-weight: 600; color: var(--cobalt-deep); }
.rt-name small { color: var(--ink-soft); font-size: .74rem; }
.rt-num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.rt-chip { font-style: normal; display: inline-block; font-size: .74rem; font-weight: 600; padding: .2rem .55rem; border-radius: 999px; line-height: 1.2; background: #D8F1E4; color: #14553A; }
.rt-chip.s1 { background: #FFF1B8; color: #6B5300; }
.rt-chip.s2 { background: #FFD99A; color: #7A4300; }
.rt-chip.s3 { background: #FFB59C; color: #7E2111; }
.rt-chip.s4 { background: #E8665A; color: #FFFFFF; }
@media (max-width: 900px) {
  .facade-inner { grid-template-columns: 1fr; grid-template-areas: "c" "w" "a"; }
  .hero-window .frame-mosaic { aspect-ratio: 5 / 4; max-height: none; }
}
@media (max-width: 520px) { .rt-row { grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr) minmax(0, 1fr); } .rt-row > :nth-child(3) { display: none; } }

/* ---------- Mahahual: the plaster room ---------- */
.promise { padding-bottom: clamp(4rem, 8vw, 7rem); }
.swirl { position: absolute; z-index: 0; right: -12vw; top: 2vw; width: 70vw; height: 70vw; border-radius: 50%; pointer-events: none; opacity: .5;
  background: repeating-radial-gradient(circle at 50% 50%, rgba(42, 157, 176, .06) 0 14px, transparent 14px 34px); -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%); mask-image: radial-gradient(circle, #000 30%, transparent 70%); }
.plaster .room-name { color: var(--terracotta); }
.story { max-width: var(--measure); display: grid; gap: 1.2rem; }
.story p:not(.pull) { font-family: var(--f-story); font-size: var(--step-1); line-height: 1.55; }
.dropcap::first-letter { font-family: var(--f-display); float: left; font-size: 3.6em; line-height: .82; padding: .06em .12em 0 0; color: var(--turquoise); }
.pull { font-family: var(--f-display); font-size: var(--step-2); line-height: 1.15; color: var(--cobalt); padding-block: .6rem; }

/* the optional turtle encounter: a porthole you can choose to look through */
.ts-open { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 1.2rem; margin-top: 1rem; cursor: pointer; }
.ts-open:focus-visible { outline: 2px solid var(--coral); outline-offset: 6px; border-radius: 999px; }
.porthole { width: clamp(9rem, 22vw, 13rem); aspect-ratio: 1; border-radius: 50%; flex: none; }
.porthole .pane { width: 100%; height: 100%; border-radius: 50%; background: var(--ts-water); }
.ts-open-img { position: absolute; inset: -6%; background: url(../assets/turtle-thumb.jpg) center / cover no-repeat; filter: blur(2px) saturate(.7) brightness(.8); transition: filter .8s ease, transform 1.2s ease; }
.ts-open:hover .ts-open-img, .ts-open:focus-visible .ts-open-img { filter: none; transform: scale(1.08); }
.ts-open-t { font-family: var(--f-display); font-size: var(--step-1); color: var(--cobalt); }

/* ---------- The light well ---------- */
.lightwell { position: relative; height: clamp(14rem, 34vh, 24rem); overflow: hidden; }
.lightwell canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lightwell::after { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--room-plaster), transparent 18%, transparent 78%, var(--room-cobalt)); }

/* ---------- The work: a facade of windows ---------- */
.work .room-name, .workshop .room-name, .places .room-name { color: var(--gold); }
.work h2 { margin-bottom: 1rem; }
.work-lead { max-width: 42rem; font-size: var(--step-1); line-height: 1.5; color: var(--ink-light); }
.windows { list-style: none; padding: 0; margin: clamp(2.5rem, 5vw, 4rem) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.4rem, 3vw, 2.6rem) clamp(1.4rem, 4vw, 3.4rem); }
.win { min-width: 0; animation: drift 8s ease-in-out infinite; }
.win.w2 { margin-top: clamp(0rem, 6vw, 5rem); animation-delay: -2s; }
.win.w3 { animation-delay: -4s; }
.win.w4 { margin-top: clamp(0rem, 6vw, 5rem); animation-delay: -6s; }
@keyframes drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.wcard { position: relative; display: flex; flex-direction: column; gap: .5rem; height: 100%; padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.5rem, 3vw, 2.4rem) clamp(1.8rem, 3vw, 2.6rem); text-decoration: none; color: var(--ink);
  background: var(--plaster); border: clamp(8px, 1vw, 12px) solid var(--stone);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6), inset 0 -8px 20px rgba(130, 95, 50, .14), 0 40px 70px -40px rgba(0, 0, 0, .7);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s; }
.w1 .wcard { border-radius: 120px 120px 40px 60px / 140px 140px 40px 50px; }
.w2 .wcard { border-radius: 50px 140px 60px 120px / 60px 150px 50px 110px; }
.w3 .wcard { border-radius: 140px 60px 120px 50px / 120px 50px 140px 60px; }
.w4 .wcard { border-radius: 60px 60px 140px 140px / 50px 50px 160px 160px; }
.wcard:hover, .wcard:focus-visible { transform: translateY(-8px) rotate(-.6deg); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6), 0 50px 80px -40px rgba(0, 0, 0, .8); }
.fc-k { font-family: var(--f-ui); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--terracotta) !important; }
.fc-t { font-family: var(--f-display); font-size: var(--step-2); line-height: 1.05; color: var(--cobalt-deep); }
.fc-t em { font-style: normal; }
.fc-d { font-size: 1rem; line-height: 1.5; color: var(--ink-soft); max-width: 26rem; }
.fc-x { font-size: .82rem; font-weight: 600; color: var(--turquoise); margin-top: .2rem; }
.fc-go { position: absolute; top: 1.4rem; right: 1.8rem; font-size: 1.3rem; color: var(--turquoise); }
.w1 .fc-go, .w3 .fc-go { right: 3rem; top: 2.2rem; }
@media (max-width: 760px) { .windows { grid-template-columns: 1fr; } .win.w2, .win.w4 { margin-top: 0; } }

/* ---------- Tools: the tiled workshop ---------- */
.tool-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(1.6rem, 4vw, 3.6rem); align-items: center; margin-block: clamp(2.4rem, 5vw, 4rem); }
.arch { margin: 0; padding: clamp(8px, 1vw, 12px); background: var(--stone); border-radius: 50% 50% 28px 28px / 26% 26% 28px 28px; box-shadow: inset 0 -6px 14px rgba(120, 90, 50, .25), 0 40px 70px -40px rgba(0, 0, 0, .7); }
.arch img { border-radius: 50% 50% 20px 20px / 25% 25% 20px 20px; }
.tool-text { display: grid; gap: .8rem; }
.tool-text h3 { font-family: var(--f-display); font-weight: 400; font-size: var(--step-3); }
.credit { font-size: .74rem; color: var(--ink-light-soft); }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.9rem, 2vw, 1.4rem); }
.tile { min-width: 0; display: flex; flex-direction: column; gap: .55rem; padding: 1.4rem 1.3rem 1.5rem; color: #FFFDF8; border-radius: 34px 26px 38px 24px / 26px 36px 24px 34px;
  background: var(--glaze); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -10px 20px rgba(0, 0, 0, .18), 0 24px 40px -26px rgba(0, 0, 0, .7);
  background-image: radial-gradient(120% 80% at 20% 0%, rgba(255, 255, 255, .22), transparent 55%); transition: transform .4s; }
.tile:hover { transform: translateY(-5px) rotate(.5deg); }
.t1 { --glaze: #2A64AE; } .t2 { --glaze: #1F8C9E; } .t3 { --glaze: #B9822E; } .t4 { --glaze: #B85A45; }
.tile .kicker { color: rgba(255, 245, 225, .85) !important; }
.tile h3 { font-size: var(--step-0); line-height: 1.25; }
.tile p:not(.kicker):not(.links) { font-size: .92rem; line-height: 1.5; color: rgba(255, 253, 248, .9); }
.tile .links { margin-top: auto; }
.tile .links a, .tile p a { color: #FFFDF8 !important; }
@media (max-width: 960px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .tool-hero { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .tiles { grid-template-columns: 1fr; } }

/* ---------- Places: the rose window ---------- */
.places .wrap { text-align: center; }
.places h2, .places .intro { margin-inline: auto; }
.places .room-name { justify-content: center; }
.legend { display: flex; flex-wrap: wrap; gap: .45rem; }
.legend-center { justify-content: center; margin-top: 1.4rem; }
.chip { font-family: var(--f-ui); font-size: var(--step--1); font-weight: 600; border: 0; background: rgba(255, 255, 255, .1); color: var(--ink-light); padding: .45rem .95rem; border-radius: 999px 900px 999px 850px / 900px 999px 850px 999px; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; transition: background-color .25s, color .25s; }
.chip:hover { background: rgba(255, 255, 255, .18); }
.chip.on { background: var(--stone); color: var(--ink); }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot.ocean { background: var(--lagoon); } .dot.life { background: var(--sand); } .dot.story { background: var(--coral); }
.rose { width: min(40rem, 100%); aspect-ratio: 1; margin: 1.8rem auto 0; border-radius: 50%; padding: clamp(14px, 2.4vw, 26px); }
.globe-pane { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #1D4F86, #0B1E3E 75%); }
#globe { width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
#globe:active { cursor: grabbing; }
.globe-card { width: min(26rem, 100%); margin: 1.2rem auto 0; padding: .9rem 1.2rem 1rem; text-align: center; background: var(--stone); color: var(--ink); border-radius: 26px 34px 28px 36px / 34px 26px 36px 28px; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .7); }
.gc-kind { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--terracotta); }
.gc-name { font-family: var(--f-display); font-size: var(--step-1); line-height: 1.15; margin-top: .2rem; color: var(--cobalt-deep); }
.gc-note { font-size: .95rem; color: var(--ink-soft); margin-top: .35rem; line-height: 1.5; }
.list-wrap { margin-top: 1rem; }
.list-toggle { font-family: var(--f-ui); font-size: var(--step--1); font-weight: 600; background: transparent; color: var(--lagoon); border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; padding: .45rem .95rem; cursor: pointer; }
#place-ul { display: none; list-style: none; padding: 0; max-width: 44rem; margin: 1rem auto 0; text-align: left; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
#place-ul.open { display: grid; }
#place-ul button { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: .1rem .55rem; align-items: baseline; padding: .45rem 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
#place-ul .pl-name { font-size: var(--step--1); }
#place-ul .pl-when { grid-column: 2; font-size: .76rem; color: var(--ink-light-soft); }
@media (max-width: 480px) { #place-ul { grid-template-columns: 1fr; } }

/* ---------- Favorite things: the terrace and its bench ---------- */
.terrace .room-name { color: var(--terracotta); }
.bench { position: relative; z-index: 2; height: clamp(70px, 9vw, 120px); margin: clamp(-2rem, -3vw, -1rem) 0 clamp(2rem, 4vw, 3rem);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 70C90 20 180 20 270 60s180 50 270 10 180-60 270-20 180 60 270 20 180-60 270-20 90 40 90 40v30C1350 120 1260 70 1170 90s-180 40-270 0-180-50-270-10-180 50-270 10-180-50-270-10S0 110 0 110Z' fill='%23000'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 70C90 20 180 20 270 60s180 50 270 10 180-60 270-20 180 60 270 20 180-60 270-20 90 40 90 40v30C1350 120 1260 70 1170 90s-180 40-270 0-180-50-270-10-180 50-270 10-180-50-270-10S0 110 0 110Z' fill='%23000'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.bench canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sub-h { font-family: var(--f-display); font-size: var(--step-2); line-height: 1.15; color: var(--cobalt-deep); }
.sub-h.small { font-family: var(--f-ui); font-weight: 600; font-size: var(--step-0); letter-spacing: .02em; margin-top: 2rem; color: var(--terracotta); }
.screen { margin-top: clamp(2rem, 4vw, 3rem); }
.screen-intro { color: var(--ink-soft); margin-top: .4rem; }
.films { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); gap: .7rem; }
.film { min-width: 0; border-radius: 20px 26px 18px 28px / 26px 18px 28px 20px; background: var(--g, #CFE9DF); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), inset 0 -6px 12px rgba(0, 0, 0, .06), 0 10px 20px -16px rgba(60, 40, 10, .6); transition: transform .3s; }
.film:nth-child(5n+1) { --g: #CDE9E1; } .film:nth-child(5n+2) { --g: #D3E2F3; } .film:nth-child(5n+3) { --g: #F4DFAE; } .film:nth-child(5n+4) { --g: #F6CFC3; } .film:nth-child(5n) { --g: #DED5EF; }
.film:hover { transform: translateY(-4px) rotate(-.8deg); }
.film a { display: grid; gap: .3rem; height: 100%; padding: .85rem 1rem .9rem; color: var(--ink); text-decoration: none; }
.film-t { font-weight: 600; font-size: .98rem; line-height: 1.3; }
.film-m { font-size: .76rem; color: var(--ink-soft); }
.film-play { font-size: .72rem; font-weight: 600; color: var(--terracotta); opacity: 0; transition: opacity .25s; }
.film a:hover .film-play, .film a:focus-visible .film-play { opacity: 1; }
@media (hover: none) { .film-play { opacity: .8; } }
@media (max-width: 520px) { .films { grid-template-columns: 1fr 1fr; } .film-t { font-size: .9rem; } }
.more-btn { margin-top: 1.2rem; font-family: var(--f-ui); font-size: var(--step--1); font-weight: 600; background: var(--cobalt); color: var(--ink-light); border: 0; border-radius: 999px 900px 999px 850px / 900px 999px 850px 999px; padding: .6rem 1.2rem; cursor: pointer; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25); }
.more-btn:hover { background: var(--turquoise); }

.nightstand { margin-top: clamp(3rem, 6vw, 4.5rem); }
.shelf { list-style: none; margin: 1.2rem 0 0; padding: 0 .6rem; height: 16.5rem; display: inline-flex; width: max-content; max-width: 100%; align-items: flex-end; gap: 5px; border-bottom: 10px solid var(--plank); border-radius: 0 0 6px 6px; box-shadow: 0 14px 24px -14px rgba(60, 30, 10, .6); }
.book { --w: 3.6rem; width: var(--w); height: var(--h, 92%); background: var(--c); color: var(--bink); writing-mode: vertical-rl; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; padding: .8rem .3rem; border-radius: 6px 6px 2px 2px; position: relative;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, .14), transparent 18%, transparent 82%, rgba(0, 0, 0, .18)); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .12); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.book:hover, .book:focus-visible { transform: translateY(-12px); }
.b-t { font-family: var(--f-ui); font-weight: 600; font-size: .9rem; white-space: nowrap; line-height: 1.1; }
.b-a { font-family: var(--f-mono); font-size: .75rem; opacity: .85; white-space: nowrap; }
.b1 { --c: #E3A33B; --bink: #2C1A05; --h: 90%; --w: 3.9rem; }
.b2 { --c: #7C2D3B; --bink: #F7E6D6; --h: 100%; --w: 4.3rem; }
.b3 { --c: #1C2733; --bink: #E8F6F6; --h: 86%; --w: 3.7rem; }
.b4 { --c: #CDB98C; --bink: #2B2416; --h: 95%; --w: 4.6rem; }
.b4 .b-t { font-size: 1.4rem; letter-spacing: .06em; text-transform: uppercase; }
.book.flat { writing-mode: horizontal-tb; width: auto; min-width: 11rem; height: 2.6rem; flex-direction: row; justify-content: space-between; gap: .8rem; padding: 0 .8rem; margin-left: 6px; --c: #2F6F73; --bink: #EAF7F4; border-radius: 3px 8px 8px 3px; background-image: linear-gradient(180deg, rgba(255, 255, 255, .14), transparent 25%, transparent 75%, rgba(0, 0, 0, .2)); }
.book.flat:hover, .book.flat:focus-visible { transform: translateX(6px); }
@media (max-width: 520px) {
  .shelf { padding: 0 .3rem; gap: 4px; height: 15rem; }
  .book { --w: 2.9rem !important; } .b4 { --w: 3.4rem !important; } .b4 .b-t { font-size: 1.15rem; }
  .book.flat { min-width: 0; width: 7.4rem; height: 3.3rem; flex-direction: column; justify-content: center; align-items: flex-start; gap: .1rem; padding: 0 .6rem; }
  .book.flat .b-a { white-space: normal; }
}

.pods { margin-top: clamp(3rem, 6vw, 4.5rem); }
.pod-grid { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: .65rem; }
.pod { display: flex; align-items: center; gap: .8rem; padding: .5rem 1rem .5rem .5rem; border-radius: 999px 900px 999px 850px / 900px 999px 850px 999px; background: rgba(255, 252, 245, .75); color: var(--ink); text-decoration: none; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), 0 10px 20px -16px rgba(60, 40, 10, .6); transition: transform .3s, background-color .3s; }
.pod:hover, .pod:focus-visible { transform: translateY(-3px); background: #FFFDF8; }
.pod img { width: 52px; height: 52px; border-radius: 50%; flex: none; object-fit: cover; box-shadow: 0 0 0 3px var(--stone); }
.pod-t { display: grid; min-width: 0; }
.pod-t b { font-weight: 600; font-size: .95rem; line-height: 1.25; }
.pod-t small { font-size: .78rem; color: var(--ink-soft); }

/* ---------- Say hello: the grotto ---------- */
.grotto { --room: var(--room-grotto); background: radial-gradient(120% 70% at 50% 0%, #0E2546, var(--room-grotto) 70%); color: var(--ink-light); min-height: 90vh; display: flex; align-items: center; padding-block: clamp(6rem, 12vw, 10rem) calc(clamp(5rem, 9vw, 7rem) + env(safe-area-inset-bottom, 0px)); }
.grotto .edge path { fill: #0E2546; }
.grotto .room-name { color: var(--gold); }
#biolum { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
#ctenophore { position: absolute; top: 0; right: 0; width: 44%; height: 100%; z-index: 1; pointer-events: none; }
@media (max-width: 860px) { #ctenophore { width: 100%; opacity: .55; } }
.deep-inner { display: grid; gap: 1.4rem; pointer-events: none; }
.deep-inner a, .deep-inner button, .deep-inner .email { pointer-events: auto; }
.hello { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: clamp(1.4rem, 4vw, 3.2rem); align-items: center; }
.hello-photo { margin: 0; padding: 10px; background: linear-gradient(160deg, #3A5470, #1A2C47); border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
.hello-photo img { border-radius: inherit; }
.hello-text { display: grid; gap: 1.1rem; }
.grotto h2 { font-size: var(--step-3); max-width: 15ch; }
.deep-copy { max-width: 32rem; color: var(--ink-light-soft); font-size: var(--step-1); line-height: 1.45; }
.contact { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; }
.email { font-family: var(--f-mono); font-size: var(--step-1); user-select: all; word-break: break-all; }
.copy, .mail { font-family: var(--f-ui); font-size: var(--step--1); font-weight: 600; border: 1px solid rgba(255, 255, 255, .25); background: transparent; color: var(--ink-light); padding: .45rem .95rem; border-radius: 999px; cursor: pointer; text-decoration: none; }
.copy:hover, .mail:hover { border-color: var(--gold); color: var(--gold); }
.social { list-style: none; padding: 0; margin: .3rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; font-size: var(--step--1); }
.social a { color: var(--ink-light-soft); }
.social a:hover { color: var(--gold); }
.deep-sight { max-width: 30rem; font-size: .9rem; color: var(--ink-light-soft); }
.deep-sight .sight { color: var(--gold); }
.colophon { margin-top: 2rem; font-size: .76rem; color: var(--ink-light-soft); opacity: .7; max-width: 42rem; }
@media (max-width: 600px) { .hello { grid-template-columns: 1fr; } .hello-photo { width: 10rem; } }

/* ---------- Navigation and sound ---------- */
.computer { position: fixed; z-index: 30; right: calc(14px + env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); display: grid; gap: 1rem; justify-items: end; }
.computer-nav { display: grid; gap: .35rem; justify-items: end; padding: .6rem .5rem; border-radius: 999px; background: rgba(248, 240, 227, .5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 10px 30px -18px rgba(10, 30, 60, .6); }
.computer-nav a { display: flex; align-items: center; gap: .5rem; font-family: var(--f-ui); font-size: .76rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.computer-nav a span { opacity: 0; transform: translateX(6px); transition: opacity .3s, transform .3s; white-space: nowrap; }
.computer-nav a::after { content: ""; width: 10px; height: 10px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--stone-shade); transition: background-color .3s, transform .3s; }
.computer-nav a.on::after { background: var(--turquoise); transform: scale(1.3); }
.computer-nav:hover a span, .computer-nav:focus-within a span, .computer-nav a.on span { opacity: 1; transform: none; }
.computer-nav:not(:hover):not(:focus-within) a.on span { opacity: 0; }
.sound { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(248, 240, 227, .8); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 10px 24px -14px rgba(10, 30, 60, .7); }
.sound svg { width: 18px; height: 18px; }
.sound .wave { opacity: .25; }
.sound[aria-pressed="true"] .wave { opacity: 1; }
@media (max-width: 900px) { .computer { top: auto; transform: none; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); right: 12px; } .computer-nav { display: none; } }

/* ---------- The turtle encounter (full screen, optional) ---------- */
html.ts-locked, html.ts-locked body { overflow: hidden; }
.ts-overlay { position: fixed; inset: 0; z-index: 100; overflow-y: auto; overscroll-behavior: contain; background: var(--ts-water); color: #F1FAF8; }
.ts-close { position: fixed; z-index: 110; top: calc(14px + env(safe-area-inset-top, 0px)); right: 16px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: rgba(6, 30, 44, .45); color: #F1FAF8; font-size: 1.6rem; line-height: 1; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ts-end { display: grid; place-items: center; padding: 14vh 16px 18vh; }
.ts-back { font-family: var(--f-ui); font-weight: 600; font-size: var(--step--1); color: #F1FAF8; background: transparent; border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px; padding: .6rem 1.2rem; cursor: pointer; }
.ts-back:hover { border-color: var(--gold); color: var(--gold); }
.turtle-scene { position: relative; }
.ts-stage { position: relative; }
.ts-frame { position: relative; max-width: 72rem; margin: 0 auto; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 6px; background: var(--ts-water); }
.ts-img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 45%; }
.ts-haze, .ts-vignette, .ts-rays { display: none; }
.ts-lines { max-width: 40rem; margin: 2rem auto 0; padding-inline: var(--gutter); display: grid; gap: 1.2rem; }
.ts-line { font-family: var(--f-story); font-size: var(--step-1); line-height: 1.55; }
.ts-credit { max-width: 72rem; margin: .6rem auto 0; padding-inline: var(--gutter); font-size: .76rem; opacity: .75; }
.ts-static { padding-top: 4.5rem; }
.ts-live { height: 420vh; }
.ts-live .ts-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--ts-water); }
.ts-live .ts-frame { position: absolute; inset: 0; max-width: none; aspect-ratio: auto; border-radius: 0; background: transparent; }
.ts-live .ts-img { position: absolute; left: 0; top: 0; width: 2560px; height: 1707px; max-width: none; object-fit: fill; transform-origin: 0 0; will-change: transform, filter;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 56% 53%, #000 var(--m0, 160%), transparent var(--m1, 230%)); mask-image: radial-gradient(ellipse 50% 50% at 56% 53%, #000 var(--m0, 160%), transparent var(--m1, 230%)); }
.ts-live .ts-haze { display: block; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, rgba(40, 120, 150, .55), var(--ts-water) 75%); pointer-events: none; }
.ts-live .ts-rays { display: block; position: absolute; inset: -20% -10%; opacity: var(--rays, .5); pointer-events: none; mix-blend-mode: screen; background: radial-gradient(60% 40% at 50% 0%, rgba(190, 235, 245, .22), transparent 70%); animation: rays 18s ease-in-out infinite alternate; }
@keyframes rays { from { transform: translateX(-3%); } to { transform: translateX(3%); } }
.ts-live .ts-vignette { display: block; position: absolute; inset: 0; opacity: 0; pointer-events: none; background: radial-gradient(circle at var(--vx, 60%) var(--vy, 42%), transparent 0, transparent 13vmin, rgba(2, 12, 20, .55) 34vmin, rgba(2, 10, 18, .92) 70vmin); }
.ts-live .ts-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(80deg, rgba(3, 18, 28, .78) 0%, rgba(3, 18, 28, .35) 38%, transparent 62%); }
.ts-live .ts-lines { position: absolute; z-index: 3; margin: 0; left: max(var(--gutter), calc((100% - 72rem) / 2 + var(--gutter))); bottom: 14vh; width: min(34rem, calc(100% - 2 * var(--gutter))); padding: 0; display: block; }
.ts-live .ts-line { position: absolute; left: 0; bottom: 0; width: 100%; opacity: 0; color: #F1FAF8; font-size: clamp(1.25rem, 1.05rem + .9vw, 1.75rem); line-height: 1.45; text-shadow: 0 2px 18px rgba(0, 10, 18, .65); }
.ts-live .ts-last { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2rem); }
.ts-live .ts-credit { position: absolute; z-index: 3; right: var(--gutter); bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); margin: 0; padding: 0; max-width: 24rem; text-align: right; color: #BFE0E6; }
@media (max-width: 700px) {
  .ts-live .ts-lines { bottom: 10vh; }
  .ts-live .ts-stage::after { background: linear-gradient(0deg, rgba(3, 18, 28, .85) 0%, rgba(3, 18, 28, .45) 40%, transparent 65%); }
  .ts-live .ts-credit { left: var(--gutter); right: auto; text-align: left; bottom: calc(.6rem + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* the facade bottom gets its own wave so the mosaic never ends in a straight line */
.facade { padding-bottom: clamp(7rem, 14vh, 10rem); }
#biolum, #ctenophore { clip-path: inset(0); }
@media (max-width: 1100px) and (min-width: 901px) { .cartouche .name { font-size: clamp(3rem, 1rem + 4.4vw, 4.8rem); } }
html { overflow-x: clip; }
.promise, .room { overflow-x: clip; }
@media (max-width: 760px) {
  .w1 .wcard, .w2 .wcard, .w3 .wcard, .w4 .wcard { border-radius: 48px 70px 44px 76px / 44px 62px 52px 70px; padding: 1.8rem 1.7rem 2rem; }
  .w1 .fc-go, .w3 .fc-go { right: 1.8rem; top: 1.4rem; }
}

/* =====================================================================
   Polish pass: menu pebbles, centered layouts, boxes that fit their words
   ===================================================================== */
@media (min-width: 900px) { .wrap { padding-right: var(--gutter); } .facade-inner { padding-right: var(--gutter); } }
.wrap { max-width: 72rem; }

/* Menu and sound: two small pebbles, bottom right, on every screen size */
.dock { position: fixed; z-index: 40; top: auto; transform: none; right: calc(14px + env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }
.pebble { width: 46px; height: 46px; border: 0; cursor: pointer; display: grid; place-items: center; color: var(--ink); background: var(--stone); border-radius: 52% 48% 46% 54% / 50% 54% 46% 50%; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .8), inset 0 -4px 8px rgba(130, 95, 50, .22), 0 12px 24px -12px rgba(8, 26, 50, .75); transition: transform .25s; }
.pebble:hover { transform: translateY(-2px) rotate(-3deg); }
.pebble svg { width: 20px; height: 20px; }
.dock .menu { display: grid; gap: .1rem; justify-items: stretch; padding: .7rem .6rem; background: var(--stone); border-radius: 26px 34px 28px 36px / 34px 26px 36px 28px; backdrop-filter: none; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .8), 0 24px 50px -20px rgba(8, 26, 50, .8); }
.dock .menu[hidden] { display: none !important; }
.dock .menu a { display: block; padding: .5rem .9rem; border-radius: 999px; font-family: var(--f-ui); font-size: .95rem; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; }
.dock .menu a::after { content: none; }
.dock .menu a:hover, .dock .menu a.on { background: rgba(42, 157, 176, .16); color: var(--cobalt-deep); }

/* Facade: the name always fits its stone */
.cartouche { container-type: inline-size; }
.name { font-size: clamp(2.6rem, 17cqi, 6rem); }
.name em { padding-left: .18em; }
@media (max-width: 1100px) and (min-width: 901px) { .cartouche .name { font-size: clamp(2.6rem, 17cqi, 6rem); } }
.lede { font-size: var(--step-0); max-width: none; }
.rt-row { grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, .9fr) minmax(0, 1.4fr); }
.rt-head { white-space: nowrap; font-size: .66rem; }

/* Mahahual: the story on the left, the porthole waiting on the right */
.story-grid { display: grid; grid-template-columns: minmax(0, 40rem) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.story-aside { position: sticky; top: 16vh; display: grid; justify-items: center; padding-top: 2rem; }
.ts-open { flex-direction: column; gap: 1rem; margin-top: 0; text-align: center; }
.porthole { width: clamp(11rem, 24vw, 21rem); }

.swirl { right: -6vw; top: 6vw; width: 56vw; height: 56vw; }
@media (max-width: 900px) {
  .story-grid { grid-template-columns: 1fr; }
  .story-aside { position: static; padding-top: 0; justify-items: start; }
  .ts-open { flex-direction: row; text-align: left; }
  .porthole { width: clamp(8.5rem, 34vw, 12rem); }
}

/* The work: windows sized to their words */
.work .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 1rem clamp(2rem, 5vw, 5rem); align-items: end; }
.work .room-name { grid-column: 1 / -1; margin-bottom: 0; }
.work h2 { margin: 0; }
.work-lead { font-size: var(--step-0); line-height: 1.6; max-width: none; }
.windows { grid-column: 1 / -1; align-items: start; gap: clamp(1.4rem, 3vw, 2.4rem) clamp(1.4rem, 3.5vw, 3rem); margin-top: clamp(2rem, 4vw, 3.2rem); }
.win.w2, .win.w4 { margin-top: clamp(0rem, 3.5vw, 3rem); }
.wcard { height: auto; gap: .55rem; padding: 2rem 2.2rem 2.2rem; }
.w1 .wcard { border-radius: 110px 110px 44px 56px / 96px 96px 44px 50px; padding: 2.6rem 2.6rem 2.1rem; }
.w2 .wcard { border-radius: 48px 110px 54px 96px / 54px 100px 48px 90px; padding: 2.1rem 3rem 2.2rem 2.3rem; }
.w3 .wcard { border-radius: 100px 54px 96px 48px / 96px 48px 104px 54px; padding: 2.3rem 2.3rem 2.4rem 2.8rem; }
.w4 .wcard { border-radius: 54px 54px 110px 110px / 48px 48px 100px 100px; padding: 2rem 2.6rem 2.8rem; }
.fc-d { font-size: var(--step-0); line-height: 1.5; max-width: none; padding-right: .5rem; }
.fc-go { top: 1.5rem; right: 2rem; }
.w1 .fc-go { top: 2.3rem; right: 3rem; } .w2 .fc-go { right: 3.2rem; top: 1.9rem; } .w3 .fc-go { top: 2rem; right: 2.2rem; }
@media (max-width: 900px) { .work .wrap { grid-template-columns: 1fr; align-items: start; } }
@media (max-width: 760px) {
  .w1 .wcard, .w2 .wcard, .w3 .wcard, .w4 .wcard { padding: 1.8rem 1.8rem 2rem; }
  .w1 .fc-go, .w2 .fc-go, .w3 .fc-go, .fc-go { right: 1.8rem; top: 1.5rem; }
}

/* Tools */
.tile { padding: 1.5rem 1.4rem 1.6rem; }
.tile h3 { font-size: 1.12rem; }
.tile p:not(.kicker):not(.links) { font-size: .98rem; }
.tiles { align-items: stretch; }

/* Places */
.globe-card { min-height: 0; }
.gc-note:empty { display: none; }

/* Favorite things: pebbles that fit their titles */
.films { display: flex; flex-wrap: wrap; gap: .55rem .6rem; }
.film { border-radius: 999px 900px 999px 860px / 900px 999px 860px 999px; max-width: 100%; }
.film a { display: flex; align-items: baseline; gap: .55rem; height: auto; padding: .6rem 1.1rem .65rem; }
.film-t { font-size: 1rem; }
.film-m { font-size: .8rem; white-space: nowrap; }
.film-play { opacity: .55; font-size: .62rem; align-self: center; }
.film a:hover .film-play { opacity: 1; }
@media (max-width: 520px) { .films { display: flex; } .film-t { font-size: .95rem; } .film { border-radius: 26px 30px 24px 32px / 30px 24px 32px 26px; } }
.pod-grid { display: flex; flex-wrap: wrap; gap: .6rem; }
.pod { padding: .45rem 1.2rem .45rem .45rem; }
.pod-t b { white-space: nowrap; }
.pod-t small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 16rem; }
@media (max-width: 420px) { .pod-t b { white-space: normal; } }

/* Windows and plaques */
.plaque { font-size: 1rem; padding: .85rem 1.5rem 1rem; max-width: min(42rem, 100%); }
.window-wrap { width: min(74rem, calc(100% - 2 * var(--gutter))); }

/* Say hello */
.grotto .wrap { padding-bottom: 3rem; }
.rt-num, .rt-chip { white-space: nowrap; }
@media (max-width: 520px) {
  .rt-row { grid-template-columns: minmax(0, 1.25fr) auto auto; gap: .6rem; }
  .rt-chip { font-size: .68rem; padding: .2rem .45rem; }
  .azulejo { padding: .9rem .9rem 1rem; }
  .pebble { width: 40px; height: 40px; }
}

/* =====================================================================
   Round: Play room in glazed tile, books that speak, floating globe note
   ===================================================================== */
.shortcuts a:nth-child(4) { background: #B9822E; }

/* Tools: shorter tiles */
.tile { gap: .5rem; padding: 1.4rem 1.4rem 1.5rem; }
.tile h3 { font-size: 1.15rem; }

/* Globe: the note floats over the map, then fades */
.rose-wrap { position: relative; width: min(40rem, 100%); margin: 1.8rem auto 0; }
.rose-wrap .rose { width: 100%; margin: 0; }
.rose-wrap .globe-card { position: absolute; left: 50%; bottom: 8%; width: min(23rem, 86%); margin: 0; z-index: 3; opacity: 0; transform: translate(-50%, 10px); pointer-events: none; transition: opacity .7s ease, transform .7s ease; box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .8), inset 0 2px 0 rgba(255, 255, 255, .7); }
.rose-wrap .globe-card.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; transition-duration: .35s; }

/* Play: glazed ceramic, like the tiles on the facade */
.films { gap: 7px 7px; }
.film { --g: #1F4E9E; color: #FFF9EC; background: var(--g); border-radius: 18px 26px 16px 24px / 24px 16px 26px 18px;
  background-image: radial-gradient(130% 120% at 12% 0%, rgba(255, 255, 255, .28), transparent 52%), linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .16));
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .4), inset 0 -3px 6px rgba(0, 0, 0, .18), 0 0 0 3px #FBF3E2, 0 10px 18px -12px rgba(60, 40, 10, .7); }
.film:nth-child(6n+1) { --g: #1F4E9E; } .film:nth-child(6n+2) { --g: #1F8C9E; } .film:nth-child(6n+3) { --g: #B9822E; }
.film:nth-child(6n+4) { --g: #1E6B5E; } .film:nth-child(6n+5) { --g: #B85A45; } .film:nth-child(6n) { --g: #5B4A8E; }
.film:nth-child(3n+1) { border-radius: 24px 16px 26px 18px / 16px 26px 18px 24px; transform: rotate(-.5deg); }
.film:nth-child(3n+2) { border-radius: 16px 24px 20px 28px / 28px 18px 24px 16px; transform: rotate(.4deg); }
.film:hover { transform: translateY(-3px) rotate(0); }
.film a { color: #FFF9EC; padding: .62rem 1.05rem .68rem; }
.film-m { color: rgba(255, 249, 236, .78); }
.film-play { color: rgba(255, 249, 236, .9); }
@media (max-width: 520px) { .film, .film:nth-child(3n+1), .film:nth-child(3n+2) { border-radius: 18px 22px 16px 24px / 22px 16px 24px 18px; } }
.pod { background: #FBF3E2; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .8), 0 0 0 1.5px rgba(31, 78, 158, .18), 0 10px 20px -16px rgba(60, 40, 10, .6); }
.pod img { box-shadow: 0 0 0 2px #FBF3E2, 0 0 0 4px var(--turquoise); }
.pod:nth-child(3n+2) img { box-shadow: 0 0 0 2px #FBF3E2, 0 0 0 4px var(--ochre); }
.pod:nth-child(3n) img { box-shadow: 0 0 0 2px #FBF3E2, 0 0 0 4px var(--cobalt); }
.pod-t b { color: var(--cobalt-deep); }

/* Books */
.shelf-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.6rem clamp(1.6rem, 4vw, 3.4rem); margin-top: 1.2rem; }
.shelf-row .shelf { margin-top: 0; flex: none; }
.book { cursor: pointer; }
.book.on { transform: translateY(-12px); }
.b5 { --c: #C4502E; --bink: #FFF1DE; --h: 93%; --w: 4rem; }
.stack { display: flex; flex-direction: column; align-self: flex-end; margin-left: 6px; }
.stack .book.flat { margin-left: 0; height: 2.6rem; min-width: 12.5rem; }
.stack .book.flat.f2 { --c: #2B2150; --bink: #EADFFF; margin-left: 10px; min-width: 11.5rem; }
.book.flat.on { transform: translateX(8px); }
.book-note { flex: 1 1 18rem; max-width: 28rem; min-height: 9.5rem; padding: 1.2rem 1.5rem 1.4rem; background: #FBF3E2; border-radius: 30px 44px 34px 50px / 44px 32px 50px 34px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .8), inset 0 -6px 14px rgba(130, 95, 50, .12), 0 20px 40px -26px rgba(60, 40, 10, .7); }
.bn-t { font-family: var(--f-display); font-size: var(--step-1); line-height: 1.15; color: var(--cobalt-deep); }
.bn-by { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--terracotta); margin-top: .3rem; }
.bn-q { font-family: var(--f-story); font-size: 1.12rem; line-height: 1.5; margin-top: .6rem; color: var(--ink); }
.bn-q.is-quote { font-style: italic; }
@media (max-width: 520px) {
  .book { --w: 2.55rem !important; } .b4 { --w: 3rem !important; }
  .b-t { font-size: .8rem; } .b-a { font-size: .68rem; }
  .stack .book.flat, .stack .book.flat.f2 { min-width: 0; width: 6.6rem; height: 3.2rem; flex-direction: column; justify-content: center; align-items: flex-start; gap: .05rem; padding: 0 .5rem; margin-left: 0; }
  .stack .book.flat .b-t { font-size: .82rem; white-space: nowrap; }
  .stack .book.flat .b-a { white-space: nowrap; font-size: .6rem; }
  .stack { margin-left: 3px; }
}