/* Kadıköy Cemre — pitch demo stylesheet. Light theme only. */

/* ---------- Fonts (self-hosted, from @fontsource) ---------- */
@font-face{font-family:'Forum';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/forum-cyrillic-400-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Forum';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/forum-latin-ext-400-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Forum';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/forum-latin-400-normal.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:'Golos Text';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/golos-text-cyrillic-400-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/golos-text-latin-ext-400-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/golos-text-latin-400-normal.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:'Golos Text';font-style:normal;font-weight:500;font-display:swap;
  src:url('../assets/fonts/golos-text-cyrillic-500-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:500;font-display:swap;
  src:url('../assets/fonts/golos-text-latin-ext-500-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:500;font-display:swap;
  src:url('../assets/fonts/golos-text-latin-500-normal.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:'Golos Text';font-style:normal;font-weight:600;font-display:swap;
  src:url('../assets/fonts/golos-text-cyrillic-600-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap;
  src:url('../assets/fonts/golos-text-latin-ext-600-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap;
  src:url('../assets/fonts/golos-text-latin-600-normal.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}

/* ---------- Tokens ---------- */
:root{
  --mist:#EDF0EF;
  --sea:#DCE9E6;
  --sand:#F2E8DA;
  --ink:#2A2230;
  --ink-soft:#5B5462;
  --ember:#E8742A;
  --ember-text:#8F3A0C;
  --card:#FBFBFA;
  --line:#BFC6C5;
  --line-sea:#A9C1BC;
  --line-sand:#D9C8AF;
  --map-land:#F4F1E8; --map-water:#BCD3CF; --map-street:#E2DDCF;
  --maxw:1280px; --gutter:40px;

  --display:'Forum', Georgia, 'Times New Roman', serif;
  --text:'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-fall:cubic-bezier(0.5,0,0.9,0.4);
  --ease-pop:cubic-bezier(0.34,1.56,0.64,1);

  --header-h:100px;
  --arch-w:380px; --arch-h:540px; --arch-r:190px;
  --line-h:var(--arch-h);
  --placeholder:#D5DAD9;
}
@media (max-width:719px){ :root{ --gutter:20px } }

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto }
body{
  margin:0; background:var(--mist); color:var(--ink);
  font-family:var(--text); font-size:17px; line-height:1.55; font-weight:400;
  padding-top:var(--header-h); overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
html.lenis, html.lenis body{ height:auto }
.lenis.lenis-smooth{ scroll-behavior:auto !important }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain }
.lenis.lenis-stopped{ overflow:hidden }

main{ overflow-x:clip } /* the hero glow may reach past the viewport edge on phones */
h1,h2,h3,p,figure,ol{ margin:0 }
img{ display:block; max-width:100% }
a{ color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.18em; text-decoration-color:currentColor }
:focus{ outline:none }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:4px }
.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter) }
.lead{ font-size:19px; line-height:1.55 }
.small{ font-size:15px; line-height:1.5 }
.soft{ color:var(--ink-soft) }
.display{ font-family:var(--display); font-weight:400 }

/* Pill buttons */
.pill{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 24px; border-radius:999px;
  background:var(--ink); color:#fff; text-decoration:none;
  font-weight:500; font-size:16px; line-height:1.2; white-space:nowrap;
  transition:background-color .2s ease, transform .2s ease;
}
@media (hover:hover) and (pointer:fine){
  .pill:hover{ background:#3A3142; transform:translateY(-1px) }
  a:not(.pill):not(.wordmark):hover{ text-decoration-thickness:2px; color:var(--ember-text) }
}
a:not(.pill){ transition:color .2s ease, text-decoration-thickness .2s ease }

/* ---------- Header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  padding:28px 0; height:var(--header-h);
  background:transparent; border-bottom:1px solid transparent;
  transition:padding .3s var(--ease-out), background-color .3s ease, border-color .3s ease, height .3s var(--ease-out);
}
.header-row{ display:flex; align-items:center; gap:28px; height:44px }
.wordmark{
  font-family:var(--display); font-size:30px; line-height:1; text-decoration:none;
  white-space:nowrap; transition:font-size .3s var(--ease-out);
  display:inline-flex; align-items:center; min-height:44px;
}
.site-nav{ display:flex; gap:28px; margin-left:auto }
.site-nav a{ text-decoration:none; padding:11px 0 }
.lang{ display:flex; gap:16px; margin-left:auto }
.site-nav + .lang{ margin-left:0 }
.lang a{ text-decoration:none; padding:12px 0; font-weight:400 }
/* Text links: at least 44px of tap height. Inline padding does not move the line box. */
.hero-rating{ padding:9px 0; margin:-9px 0 }
.date-note a{ padding:13px 0; margin:-13px 0 }
.lang a.is-current{ font-weight:600 }
.site-header.is-compact{
  height:64px; padding:10px 0;
  background:rgba(251,251,250,.86); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.site-header.is-compact .wordmark{ font-size:24px }
@media (max-width:1023px){
  .header-row{ gap:20px } .site-nav{ gap:20px }
}
@media (max-width:719px){
  /* Phone: wordmark + pill on the first row, the language links on a second row.
     Once compact, the pill steps aside (the bottom bar carries it) and the
     languages share the single 64px row with the wordmark. */
  :root{ --header-h:104px }
  .site-nav{ display:none }
  .site-header{ padding:12px 0 0; height:var(--header-h) }
  .header-row{ gap:14px; flex-wrap:wrap; height:auto }
  .wordmark{ font-size:26px }
  .site-header .pill{ margin-left:auto; padding:0 16px; min-height:44px; font-size:15px }
  .lang{ order:3; flex-basis:100%; margin-left:0; gap:14px; font-size:15px }
  .site-header.is-compact{ padding:10px 0; height:64px }
  .site-header.is-compact .header-row{ flex-wrap:nowrap; height:44px }
  .site-header.is-compact .pill{ display:none }
  .site-header.is-compact .lang{ order:0; flex-basis:auto; margin-left:auto; gap:12px; font-size:14px }
}

/* ---------- Hero ---------- */
.hero{ position:relative }
.hero-grid{
  display:grid; grid-template-columns:minmax(0,55fr) minmax(max-content,45fr);
  column-gap:48px; align-items:center;
  min-height:calc(100svh - var(--header-h)); padding-top:24px; padding-bottom:40px;
}
.hero-text{ display:flex; flex-direction:column; align-items:flex-start; gap:28px }
.hero-place{ color:var(--ink-soft) }
.hero-h1, .close-h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(44px,6.2vw,88px); line-height:1.02; letter-spacing:-0.01em;
}
.hero-lead{ max-width:34em }
.hero-rating{ font-size:17px }

.hero-visual{ position:relative; display:flex; align-items:flex-start; justify-self:end }
.hero-glow{
  position:absolute; width:520px; height:520px; left:50%; top:50%;
  transform:translate(calc(-50% - 60px), -50%);
  border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle, rgba(232,116,42,.55) 0%, rgba(232,116,42,.18) 40%, rgba(232,116,42,0) 70%);
  filter:blur(40px); opacity:var(--glow,0.45);
  transition:opacity .6s ease;
}

/* Arch frames */
.arch{
  position:relative; overflow:hidden; background:var(--placeholder);
  border-radius:var(--arch-r) var(--arch-r) 10px 10px;
  z-index:1;
}
.arch picture{ display:block; width:100%; height:100% }
.arch img{ width:100%; height:100%; object-fit:cover; display:block }
.arch-hero{ width:var(--arch-w); height:var(--arch-h); flex:0 0 auto }
.arch-hero{ --arch-r:190px }
.arch::after{
  /* file name shown only when the photo is missing */
  content:attr(data-file); position:absolute; inset:0; display:none;
  align-items:center; justify-content:center; text-align:center; padding:24px;
  font-size:15px; color:var(--ink-soft);
}
.arch.is-missing img{ visibility:hidden }
.arch.is-missing::after{ display:flex }

/* Fall line beside the hero arch */
.fall-line{ position:relative; width:110px; height:var(--line-h); margin-left:36px; flex:0 0 auto; z-index:1 }
.fall-line::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:1px; background:var(--line) }
.fall-stop{ position:absolute; left:0; height:0; display:flex; align-items:center }
.fall-stop.s1{ top:12%; --drop:calc(var(--line-h) * .12) }
.fall-stop.s2{ top:50%; --drop:calc(var(--line-h) * .50) }
.fall-stop.s3{ top:88%; --drop:calc(var(--line-h) * .88) }
.fall-stop .ember{ position:absolute; left:0; top:0; transform:translate(-50%,-50%) }
.fall-label{ font-family:var(--display); font-size:24px; line-height:1; margin-left:22px; white-space:nowrap }

/* ---------- Embers ---------- */
.ember{
  position:relative; display:inline-block; width:17px; height:17px; border-radius:50%;
  background:var(--ember); flex:0 0 auto; pointer-events:none;
}
.ember::before{ /* breathing glow, 88px = radius 44 */
  content:''; position:absolute; left:50%; top:50%; width:88px; height:88px; margin:-44px 0 0 -44px;
  border-radius:50%; background:radial-gradient(circle, rgba(232,116,42,.6) 0%, rgba(232,116,42,.3) 35%, rgba(232,116,42,0) 70%);
  animation:breathe 4s ease-in-out infinite alternate; transform:scale(.773); opacity:.75;
}
.ember.b2::before{ animation-delay:-1.3s }
.ember.b3::before{ animation-delay:-2.6s }
.ember::after{ /* landing pulse ring */
  content:''; position:absolute; inset:-6px; border-radius:50%; border:2px solid var(--ember); opacity:0; transform:scale(.4);
}
@keyframes breathe{ from{ transform:scale(.773); opacity:.75 } to{ transform:scale(1); opacity:1 } }
@keyframes land{ 0%{ transform:translate(-50%,-50%) scale(1) } 45%{ transform:translate(-50%,-50%) scale(1.6) } 100%{ transform:translate(-50%,-50%) scale(1) } }
@keyframes pulse-ring{ 0%{ opacity:.9; transform:scale(.4) } 100%{ opacity:0; transform:scale(2.2) } }
@keyframes fall-hero{ from{ transform:translate(-50%, calc(-50% - var(--drop))); opacity:0 } 6%{ opacity:1 } to{ transform:translate(-50%,-50%); opacity:1 } }

/* Chapter heading ember: hollow seat + ember that falls into it */
.seat{ position:relative; display:inline-block; width:17px; height:17px; flex:0 0 auto; vertical-align:middle; margin-right:28px; transform:translateY(-.1em) }
.seat::before{ content:''; position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--ember); transition:opacity .3s ease }
.seat .ember{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) }
@keyframes fall-chapter{ from{ transform:translate(-50%, calc(-50% - 120px)); opacity:0 } 10%{ opacity:1 } to{ transform:translate(-50%,-50%); opacity:1 } }
@keyframes land-c{ 0%{ transform:translate(-50%,-50%) scale(1) } 45%{ transform:translate(-50%,-50%) scale(1.6) } 100%{ transform:translate(-50%,-50%) scale(1) } }

/* ---------- Date bar ---------- */
.dates{ padding-bottom:40px }
.date-card{
  background:var(--card); border:1px solid var(--line); border-radius:22px; padding:22px 26px;
}
.date-row{ display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap }
.field{ display:flex; flex-direction:column; gap:6px; flex:1 1 180px; min-width:0 }
.field label{ font-size:15px; color:var(--ink-soft) }
.field input, .field select{
  height:48px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink);
  font:inherit; font-size:16px; padding:0 14px; width:100%; min-width:0; appearance:none; -webkit-appearance:none;
}
.field select{ background-image:none; padding-right:14px }
.field input:focus-visible, .field select:focus-visible{ outline-offset:2px }
.field-guests{ flex:0 1 150px }
.date-row .pill{ flex:0 0 auto; min-height:48px }
.date-error{ margin-top:12px; color:var(--ink); font-size:15px }
.date-error[hidden]{ display:none }
.date-note{ margin-top:14px; color:var(--ink-soft); font-size:15px }
@media (max-width:1023px) and (min-width:720px){
  .date-row > .field-guests{ flex:1 1 150px }
  .date-row::after{ content:''; flex-basis:100%; order:2; height:0 }
  .field-in, .field-out{ order:1 } .field-guests, .date-row .pill{ order:3 }
}
@media (max-width:719px){
  .date-card{ padding:20px }
  .date-row{ flex-direction:column; align-items:stretch; gap:14px }
  .field, .field-guests{ flex:1 1 auto }
  .date-row .pill{ width:100%; min-height:52px }
}

/* ---------- Chapters ---------- */
.chapter{ padding:96px 0 }
.chapter-head{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); column-gap:48px; align-items:baseline;
}
.chapter-title{
  font-family:var(--display); font-weight:400; font-size:clamp(56px,8vw,120px); line-height:.95;
  display:flex; align-items:baseline; white-space:nowrap;
}
.chapter-title .seat{ align-self:center }
.mask{ display:block; overflow:hidden; padding:.05em 0 .18em; margin:-.05em 0 -.18em }
.mask-inner{ display:block }
.chapter-lead{ max-width:30em; padding-top:8px }

/* Air: six rooms, two rows of three (three rows of two on phones) */
.rooms{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:48px 40px; margin-top:72px }
.room:nth-child(3n+2){ margin-top:72px }
.arch-room{ width:100%; height:420px; --arch-r:999px }
.room h3{ font-family:var(--display); font-weight:400; font-size:28px; line-height:1.1; margin-top:20px }
.room .room-ask{ display:inline-block; margin-top:4px; padding:9px 0 }

/* Water */
.water-grid{ display:grid; grid-template-columns:1.15fr 1fr; column-gap:64px; margin-top:48px; align-items:start }
.chapter-water .chapter-head{ grid-template-columns:minmax(0,1fr) }
.chapter-water .chapter-head .chapter-lead{ margin-top:24px }
.map-wrap{ margin-top:40px }
.map{
  display:block; width:100%; height:auto; border:1px solid var(--line-sea); border-radius:14px; background:var(--map-land);
  font-family:var(--text);
}
.map text{ fill:var(--ink); font-size:15px; font-weight:400 }
.map .lbl-name{ font-weight:600 }
.map .lbl-time{ fill:var(--ink-soft) }
.map .sea-label{ font-family:var(--display); font-size:22px; fill:var(--ink-soft) }
.map .map-note{ font-size:13px; fill:var(--ink-soft) }
.map .street{ stroke:var(--map-street); stroke-width:10; stroke-linecap:round; stroke-linejoin:round; fill:none }
.map .route{ stroke:var(--ember); stroke-width:7; stroke-linecap:round; stroke-linejoin:round; fill:none }
.map .dash{ stroke:var(--ink); stroke-width:2; stroke-dasharray:3 7; stroke-linecap:round; fill:none }
.map .stop{ transform-box:fill-box; transform-origin:center }
.map .dot{ fill:var(--ink) }
.map .hotel-ring{ fill:none; stroke:var(--ember); stroke-width:1.5 }
.map .rider-core{ fill:var(--ember) }
.map-open{ display:inline-block; margin-top:12px; padding:9px 0 }
.walks{ list-style:none; padding:0; margin:0 }
.walk{ display:grid; grid-template-columns:150px minmax(0,1fr); align-items:baseline; padding:22px 0; border-bottom:1px solid var(--line-sea) }
.walk:first-child{ border-top:1px solid var(--line-sea) }
.walk-time{ font-family:var(--display); font-size:56px; line-height:1; white-space:nowrap }
.walk-time .unit{ font-size:28px; margin-left:4px }
.walk-name{ font-size:20px }
.walk-caption{ margin-top:16px; color:var(--ink-soft); font-size:15px }

/* Earth */
.earth-grid{ display:grid; grid-template-columns:minmax(0,760px) minmax(0,1fr); column-gap:64px; margin-top:72px; align-items:end }
.arch-exterior{ width:100%; max-width:760px; height:420px; --arch-r:210px }
.earth-aside{ padding-bottom:24px }
.earth-rating{ font-family:var(--display); font-weight:400; font-size:32px; line-height:1.2; max-width:14em }
.earth-reviews{ display:inline-block; margin-top:14px; padding:9px 0 }

/* Closing */
.closing{ border-top:1px solid var(--line-sand); padding:96px 0 64px }
.closing-grid{ display:grid; grid-template-columns:1.2fr 1fr; column-gap:64px; align-items:start }
.close-h2{ max-width:12em }
.close-actions{ display:flex; align-items:center; gap:28px; margin-top:36px; flex-wrap:wrap }
.close-phone{ font-size:19px; padding:8px 0 }
.closing address{ font-style:normal; font-size:17px; line-height:1.6 }
.close-hours{ margin-top:16px; color:var(--ink-soft) }
.pitch{ padding:0 0 32px }
.pitch p{ color:var(--ink-soft) }

/* Phone-only bottom bar */
.bottom-bar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:var(--card); border-top:1px solid var(--line); padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  transform:translateY(100%); transition:transform .4s var(--ease-out);
}
.bottom-bar .pill{ width:100%; min-height:52px }
.bottom-bar.is-shown{ transform:translateY(0) }
@media (max-width:719px){ .bottom-bar{ display:block } }

/* ---------- Responsive ---------- */
@media (max-width:1023px){
  :root{ --arch-w:320px; --arch-h:460px }
  .hero-grid{ grid-template-columns:minmax(0,1fr); row-gap:48px; min-height:0; padding-top:24px; padding-bottom:40px }
  .hero-visual{ justify-self:start }
  .rooms{ gap:40px 28px; margin-top:56px }
  .room:nth-child(3n+2){ margin-top:0 }
  .arch-room{ height:300px }
  .room h3{ font-size:24px }
  .water-grid{ grid-template-columns:minmax(0,1fr); row-gap:56px }
  .earth-grid{ grid-template-columns:minmax(0,1fr); row-gap:40px }
  .chapter-head{ grid-template-columns:minmax(0,1fr); row-gap:20px }
  .chapter{ padding:80px 0 }
}
@media (max-width:719px){
  :root{ --arch-w:260px; --arch-h:380px }
  /* 260px arch + 90px fall line = the full 350px content width at 390px */
  .fall-line{ width:90px; margin-left:0 }
  .fall-line::before, .fall-stop{ left:14px }
  .fall-label{ font-size:20px; margin-left:14px }
  .hero-grid{ row-gap:40px; padding-bottom:32px }
  .hero-text{ gap:22px }
  .rooms{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:40px }
  .arch-room{ height:230px }
  .walk{ grid-template-columns:104px minmax(0,1fr); padding:18px 0 }
  .walk-time{ font-size:40px }
  .walk-time .unit{ font-size:22px }
  .walk-name{ font-size:18px }
  .arch-exterior{ height:300px; --arch-r:150px }
  /* the map scales to ~350px wide here, so its labels need larger SVG units */
  .map text{ font-size:19px }
  .map .sea-label{ font-size:26px }
  .map .map-note{ font-size:16px }
  .closing-grid{ grid-template-columns:minmax(0,1fr); row-gap:40px }
  .closing{ padding:72px 0 48px }
  .chapter{ padding:64px 0 }
  .chapter-lead{ padding-top:0 }
  .earth-rating{ font-size:28px }
  .room h3{ font-size:20px; margin-top:12px }
  .room .room-ask{ font-size:15px; padding:11px 0 }
  body{ padding-bottom:84px }
}

/* ---------- Motion: hidden-until-revealed states (only under html.js, not reduced) ---------- */
html.js:not(.reduce) .site-header{ opacity:0; transition:opacity .6s ease, padding .3s var(--ease-out), background-color .3s ease, border-color .3s ease, height .3s var(--ease-out) }
html.js:not(.reduce) .is-played .site-header, html.js:not(.reduce) .site-header.is-shown{ opacity:1 }

html.js:not(.reduce) .hero-place{ opacity:0; transition:opacity .6s ease }
html.js:not(.reduce) .hero-h1:not(.is-split){ opacity:0 }
html.js:not(.reduce) .hero-h1 .line{ display:block; overflow:hidden; padding:.08em 0 .14em; margin:-.08em 0 -.14em }
html.js:not(.reduce) .hero-h1 .line-inner{ display:block; transform:translateY(110%); transition:transform .9s var(--ease-out) }
html.js:not(.reduce) .hero-h1.is-split.is-done .line-inner{ transform:none; transition:none }
html.js:not(.reduce) .hero-lead, html.js:not(.reduce) .hero-rating, html.js:not(.reduce) .date-card{
  opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s var(--ease-out);
}
html.js:not(.reduce) .arch-hero{ clip-path:inset(100% 0 0 0 round 190px 190px 10px 10px) }
html.js:not(.reduce) .arch-hero picture{ transform:scale(1.08) }
html.js:not(.reduce) .hero-glow{ --glow:0 }
html.js:not(.reduce) .fall-stop .ember{ transform:translate(-50%, calc(-50% - var(--drop))); opacity:0 }
html.js:not(.reduce) .fall-stop.in .ember{ opacity:1 }
html.js:not(.reduce) .fall-stop .ember::before{ animation:none; opacity:0 }
html.js:not(.reduce) .fall-label{ opacity:0; transition:opacity .3s ease }

/* Played states for the first load (classes added by site.js at the right times) */
html.js:not(.reduce) .hero-place.in{ opacity:1 }
html.js:not(.reduce) .hero-h1.in .line-inner{ transform:none }
html.js:not(.reduce) .hero-lead.in, html.js:not(.reduce) .hero-rating.in, html.js:not(.reduce) .date-card.in{ opacity:1; transform:none }
html.js:not(.reduce) .arch-hero.in{ animation:wipe-hero 1.2s var(--ease-out) forwards }
html.js:not(.reduce) .arch-hero.in picture{ animation:settle 1.2s var(--ease-out) forwards }
@keyframes wipe-hero{ from{ clip-path:inset(100% 0 0 0 round 190px 190px 10px 10px) } to{ clip-path:inset(0 0 0 0 round 190px 190px 10px 10px) } }
@keyframes settle{ from{ transform:scale(1.08) } to{ transform:scale(1) } }
html.js:not(.reduce) .fall-stop.in .ember{ animation:fall-hero .9s var(--ease-fall) forwards, land .5s var(--ease-pop) .9s }
html.js:not(.reduce) .fall-stop.in .ember::after{ animation:pulse-ring .5s var(--ease-pop) .9s forwards }
html.js:not(.reduce) .fall-stop.in .ember::before{ animation:breathe 4s ease-in-out infinite alternate; opacity:.75; transition:opacity .4s ease .9s }
html.js:not(.reduce) .fall-stop.in .fall-label{ opacity:1; transition-delay:.9s }
html.js:not(.reduce) .fall-stop.s2.in .ember::before{ animation-delay:-1.3s }
html.js:not(.reduce) .fall-stop.s3.in .ember::before{ animation-delay:-2.6s }

/* Chapter landings */
html.js:not(.reduce) .seat .ember{ opacity:0; transform:translate(-50%, calc(-50% - 120px)) }
html.js:not(.reduce) .seat .ember::before{ animation:none; opacity:0 }
html.js:not(.reduce) .chapter-title .mask-inner{ transform:translateY(110%); transition:transform .9s var(--ease-out) }
html.js:not(.reduce) .chapter-lead{ opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s var(--ease-out) }
html.js:not(.reduce) .chapter.is-lit .seat .ember{ animation:fall-chapter .7s var(--ease-fall) forwards, land-c .5s var(--ease-pop) .7s }
html.js:not(.reduce) .chapter.is-lit .seat .ember::after{ animation:pulse-ring .5s var(--ease-pop) .7s forwards }
html.js:not(.reduce) .chapter.is-lit .seat .ember::before{ animation:breathe 4s ease-in-out infinite alternate; opacity:.75; transition:opacity .4s ease .7s }
html.js:not(.reduce) .chapter.is-lit .seat::before{ opacity:0; transition-delay:.7s }
html.js:not(.reduce) .chapter.is-lit .chapter-title .mask-inner{ transform:none; transition-delay:1.2s }
html.js:not(.reduce) .chapter.is-lit .chapter-lead{ opacity:1; transform:none; transition-delay:1.35s }

/* Arch photo wipes below the hero */
html.js:not(.reduce) .arch-room, html.js:not(.reduce) .arch-exterior{ clip-path:inset(100% 0 0 0 round var(--arch-r) var(--arch-r) 10px 10px) }
html.js:not(.reduce) .arch-room.in, html.js:not(.reduce) .arch-exterior.in{ animation:wipe 1.1s var(--ease-out) forwards; animation-delay:var(--delay,0s) }
@keyframes wipe{ from{ clip-path:inset(100% 0 0 0 round var(--arch-r) var(--arch-r) 10px 10px) } to{ clip-path:inset(0 0 0 0 round var(--arch-r) var(--arch-r) 10px 10px) } }

/* Desktop parallax drift and hover (fine pointer only) */
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  html.js:not(.reduce) .arch-room img, html.js:not(.reduce) .arch-exterior img{ height:106%; margin-top:-3%; transform:translateY(var(--py,0)) }
  html.js:not(.reduce) .arch picture{ transition:transform .6s var(--ease-out) }
  html.js:not(.reduce) .arch:hover picture{ transform:scale(1.04) }
  html.js:not(.reduce) .arch-hero.in picture{ animation:settle 1.2s var(--ease-out) forwards }
}

/* Water chapter reveals */
html.js:not(.reduce) .map .stop{ transform:scale(0); transition:transform .4s var(--ease-pop) }
html.js:not(.reduce) .map .stop.in{ transform:scale(1) }
html.js:not(.reduce) .map .rider{ opacity:0; transition:opacity .3s ease }
html.js:not(.reduce) .map .rider.in{ opacity:1 }
html.js:not(.reduce) .walk{ opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s var(--ease-out) }
html.js:not(.reduce) .walk.in{ opacity:1; transform:none }

/* ---------- Reduced motion / no JS: everything in its final state ---------- */
html.reduce .ember::before, html:not(.js) .ember::before{ animation:none; transform:scale(1); opacity:1 }
html.reduce .seat::before, html:not(.js) .seat::before{ opacity:0 }
html.reduce .map .rider, html:not(.js) .map .rider{ opacity:1 }
html.reduce .site-header, html.reduce .pill, html.reduce a, html.reduce .arch picture{ transition:none }
html.reduce #water, html:not(.js) #water{ background:var(--sea) }
html.reduce #earth, html.reduce #contact, html.reduce .pitch,
html:not(.js) #earth, html:not(.js) #contact, html:not(.js) .pitch{ background:var(--sand) }