/* gracepc, the restart homepage. THE GLASS FAMILY: clear chrome / frost plates /
   paper ground. One reveal verb: ARRIVE (rise, settle, one pass of light).
   Photographs are whole, or framed like portraits; nothing is darkened. */

:root{
  --paper:#f4efe3; --ink:#241f16; --crimson:#d01030; --walnut:#401800;
  --frame:#2a241a; --mat:#faf7ee; --r:14px;
  --glass-day:rgba(244,239,227,.5); --frost-day:rgba(244,239,227,.46);
}
*{margin:0;box-sizing:border-box}
@media (prefers-reduced-motion: no-preference){ html:focus-within{scroll-behavior:smooth} }
body{background:var(--paper);color:var(--ink);font-family:"Albert Sans",sans-serif;
  overflow-x:hidden}
img{max-width:100%}

/* ---------- the chrome: clear glass ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:20;
  background:var(--glass-day);
  -webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);
  border-bottom:1px solid rgba(36,31,22,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.bar{display:flex;justify-content:space-between;align-items:center;gap:2rem;
  max-width:88rem;margin:0 auto;padding:12px 4vw}
.lock{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;padding:4px 0}
.lock img{height:40px;width:auto;display:block}
.lock .name{font-family:"Frank Ruhl Libre",serif;font-size:23px;font-weight:700;line-height:1.05}
.lock .name span{display:block;font-family:"Albert Sans",sans-serif;font-size:11px;
  letter-spacing:.24em;text-transform:uppercase;font-weight:500;color:#5d5443;margin-top:3px}
nav{display:flex;align-items:center;gap:1.6rem;font-size:15px;font-weight:500}
nav a{color:inherit;text-decoration:none;padding:10px 2px 9px}
nav a[aria-current]{border-bottom:2px solid var(--walnut)}
nav .givelink{font-weight:600;border-bottom:2px solid var(--crimson)}
.menuword{display:none;font:inherit;font-size:15px;font-weight:600;letter-spacing:.08em;
  background:none;border:0;color:inherit;padding:14px 8px;cursor:pointer}

/* ---------- THE MENU ROOM: the phone steps into the nav ---------- */
.menuroom{position:fixed;inset:0;z-index:30;display:none;
  background:rgba(16,17,16,.72);
  -webkit-backdrop-filter:blur(30px) saturate(1.3);backdrop-filter:blur(30px) saturate(1.3)}
.menuroom[data-open]{display:block}
.menuroom .inner{position:absolute;inset:0;overflow-y:auto;
  padding:calc(72px + env(safe-area-inset-top)) 7vw calc(28px + env(safe-area-inset-bottom))}
.menuroom a{display:block;color:#f4efe3;text-decoration:none;
  font-family:"Frank Ruhl Libre",serif;font-size:30px;line-height:1.15;
  padding:15px 0;border-bottom:1px solid rgba(244,239,227,.14);
  opacity:0;transform:translateY(14px);
  transition:opacity .45s ease, transform .45s cubic-bezier(.22,.9,.24,1)}
.menuroom[data-open] a{opacity:1;transform:none}
.menuroom[data-open] a:nth-child(1){transition-delay:.04s}
.menuroom[data-open] a:nth-child(2){transition-delay:.08s}
.menuroom[data-open] a:nth-child(3){transition-delay:.12s}
.menuroom[data-open] a:nth-child(4){transition-delay:.16s}
.menuroom[data-open] a:nth-child(5){transition-delay:.20s}
.menuroom[data-open] a:nth-child(6){transition-delay:.24s}
.menuroom[data-open] a:nth-child(7){transition-delay:.28s}
.menuroom[data-open] a:nth-child(8){transition-delay:.32s}
.menuroom a.give{color:#ffa7b2}
.menuroom .roomfoot{margin-top:26px;color:#c9bfae;font-size:15px;line-height:1.7}
.menuroom .roomfoot a{display:inline;font-family:"Albert Sans",sans-serif;font-size:15px;
  padding:0;border:0;color:#ffb3bc;opacity:1;transform:none}
body.menuopen{overflow:hidden}
/* the glass bar floats ABOVE the room it opened, so Close is always at hand */
body.menuopen header{z-index:32;background:rgba(16,17,16,.55);border-bottom-color:rgba(244,239,227,.14)}
body.menuopen .lock .name{color:#f4efe3}
body.menuopen .lock .name span{color:#c9bfae}
body.menuopen .menuword{color:#f4efe3}

/* ---------- the ground ---------- */
/* THE GRAND: home's own hero. The whole scene at full stage, the words on
   light frost over the empty asphalt, the photo breathing and drifting slower
   than the page (depth). Interiors keep their own varied species. */
.grand{position:relative;height:100svh;min-height:640px;overflow:hidden;background:#101110}
.grand .drift{position:absolute;inset:-12svh 0 0 0;will-change:transform}
.grand .drift img{width:100%;height:112svh;object-fit:cover;
  animation:breath 26s ease-in-out infinite alternate}
.grand .slab{position:absolute;left:4vw;bottom:9svh;max-width:34rem;padding:30px 34px 28px;
  text-align:center;border-radius:var(--r);
  background:rgba(22,19,16,.72);color:#efe9db;
  -webkit-backdrop-filter:blur(26px) saturate(1.4);backdrop-filter:blur(26px) saturate(1.4);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 14px 40px rgba(0,0,0,.4)}
.grand .slab h1{font-family:"Frank Ruhl Libre",serif;font-weight:500;font-size:33px;line-height:1.22}
.grand .slab .truth{margin-top:14px;font-size:16.5px;font-weight:600}
.grand .slab .addr{margin-top:6px;font-size:15px;color:#ece5d6}
@keyframes breath{from{transform:scale(1)}to{transform:scale(1.045)}}
body.night .grand .slab{background:rgba(22,19,16,.55);color:#efe9db;
  border-color:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 14px 40px rgba(0,0,0,.4)}
body.night .grand .slab .addr{color:#c9bfae}
header{overflow:hidden}
header::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg, transparent 44%, rgba(255,255,255,.35) 50%, transparent 56%);
  background-size:300% 100%;background-position:130% 0;
  animation:sweep 2.2s .5s ease forwards}
@keyframes sweep{to{background-position:-30% 0}}
.hero-split{min-height:96svh;background:#101110;color:#efe9db;
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:4vw;
  align-items:center;padding:110px 3vw 5svh}
.hero-split.photoleft{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
.hero-split .word h1{font-family:"Frank Ruhl Libre",serif;font-weight:500;font-size:37px;line-height:1.2;color:#fff}
.hero-split .word .truth{margin-top:18px;font-size:17px;font-weight:600}
.hero-split .word .addr{margin-top:8px;font-size:15.5px;color:#c9bfae}
.hero-split .mountimg{justify-self:center;max-width:100%;max-height:82svh;width:auto;height:auto;
  border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.45)}
.hero-band{background:#101110;color:#efe9db;padding:104px 3vw 6svh;text-align:center}
.hero-band .mountimg{max-width:100%;max-height:78svh;width:auto;height:auto;margin:0 auto;
  display:block;border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.45)}
.hero-band .word{max-width:64rem;margin:4svh auto 0}
.hero-band .word h1{font-family:"Frank Ruhl Libre",serif;font-weight:500;font-size:34px;line-height:1.22;color:#fff}
.hero-band .word p{margin-top:12px;font-size:16.5px;color:#c9bfae;line-height:1.6}
.cycleband{background:#101110;color:#efe9db;padding:8svh 3vw;text-align:center;margin-top:10svh}
.cycleband .cycle{position:relative;width:min(96vw,120svh);aspect-ratio:16/10;margin:0 auto;display:block}
.cycleband .cycle img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:18px}
.cycleband .word{max-width:56rem;margin:3svh auto 0}
.cycleband .word h2{color:#fff;max-width:none;font-size:27px}
.cycleband .word p{margin-top:10px;font-size:16px;color:#c9bfae;line-height:1.6}
.railhint{display:none;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:#8d8270;margin-top:10px;text-align:center}
.slab{position:absolute;left:4vw;bottom:8svh;max-width:33rem;padding:30px 34px 28px;
  text-align:center; /* his word: selectively centered on the frost */
  background:var(--frost-day);
  -webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5);
  border-radius:var(--r);border:1px solid rgba(255,255,255,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 14px 40px rgba(20,16,10,.16)}
.slab h1{font-family:"Frank Ruhl Libre",serif;font-weight:500;font-size:33px;line-height:1.22}
.slab .truth{margin-top:16px;font-size:16.5px;font-weight:600}
.slab .addr{margin-top:6px;font-size:15.5px;color:#3d362a}

/* ---------- the week: glass panes that turn ---------- */
/* No bare seam: the photograph ends BEHIND this row; the panes bridge it. */
.week{position:relative;z-index:2;max-width:88rem;margin:30px auto 0;padding:0 4vw;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:18px;align-items:stretch}
.pane{position:relative;min-height:172px;perspective:1200px}
.pane .face,.pane .back{position:absolute;inset:0;border-radius:var(--r);
  padding:20px 22px;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border:1px solid rgba(255,255,255,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65), 0 10px 30px rgba(20,16,10,.14);
  transition:transform .72s cubic-bezier(.32,.72,.22,1), -webkit-backdrop-filter .72s, backdrop-filter .72s;
  transform-style:preserve-3d}
.pane .face{display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  background:rgba(244,239,227,.55);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);
  font:inherit;color:inherit;text-align:left;cursor:pointer}
.pane .back{background:rgba(244,239,227,.84);
  -webkit-backdrop-filter:blur(30px) saturate(1.4);backdrop-filter:blur(30px) saturate(1.4);
  transform:rotateY(-180deg);display:flex;flex-direction:column;gap:8px;font-size:14.5px;line-height:1.5}
.pane .k{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--walnut)}
.pane .t{position:relative;display:block;min-height:3.4em;overflow:hidden;
  font-size:17px;line-height:1.4;font-weight:500;width:100%}
.pane .t span{position:absolute;inset:0;opacity:0;transform:translateY(14px);filter:blur(4px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,.9,.24,1), filter .7s ease}
.pane .t span.on{opacity:1;transform:none;filter:none}
.pane .t span.off{opacity:0;transform:translateY(-14px);filter:blur(4px)}
.pane .hint{margin-top:auto;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#544a39}
.pane .back p i{font-style:normal;color:var(--crimson)}
.pane .back .door{margin-top:auto;color:var(--ink)}
body.night .pane .back .door{color:#efe9db}
/* the turn: the pane swings, and one pass of light crosses the glass */
.pane .face::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,.5) 50%, transparent 58%);
  background-size:280% 100%;background-position:120% 0;transition:background-position .72s ease}
.pane.turned .face{transform:rotateY(180deg);
  -webkit-backdrop-filter:blur(4px) saturate(1.2);backdrop-filter:blur(4px) saturate(1.2)}
.pane.turned .face::after{background-position:-20% 0}
.pane.turned .back{transform:rotateY(0)}
/* the back's lines arrive in order once the pane has turned */
.pane .back>*{opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease}
.pane.turned .back>*{opacity:1;transform:none}
.pane.turned .back>*:nth-child(1){transition-delay:.30s}
.pane.turned .back>*:nth-child(2){transition-delay:.38s}
.pane.turned .back>*:nth-child(3){transition-delay:.46s}
.pane.turned .back>*:nth-child(4){transition-delay:.54s}
.slip.give{display:flex;align-items:center;justify-content:center;padding:20px 30px;
  border-radius:var(--r);font-size:17px;font-weight:600;color:var(--crimson);text-decoration:none;
  background:rgba(250,246,236,.95);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);
  border:1px solid rgba(208,16,48,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.65)}

/* ---------- the rooms ---------- */
.room{max-width:88rem;margin:0 auto;padding:11svh 4vw 0}
.over{font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--walnut)}
h2{font-family:"Frank Ruhl Libre",serif;font-weight:500;font-size:31px;line-height:1.25;margin-top:14px;max-width:24ch}
.copy>p:not(.over):not(.doors){margin-top:16px;font-size:17px;line-height:1.65;max-width:54ch}
.doors{margin-top:22px;display:flex;gap:1.8rem;flex-wrap:wrap}
.door{display:inline-block;color:var(--crimson);font-weight:600;text-decoration:none;font-size:16px;
  border-bottom:2px solid rgba(208,16,48,.4);padding:14px 0 12px}
.door.big{font-size:18px}
.door.glyph{border-bottom:0;padding:10px 6px;display:inline-flex;align-items:center}

/* framed moments: the photograph WHOLE, matted like a portrait on the wall.
   THE VITRINE: under the hand the photo takes one long slow breath inside its
   mat, the frame lifts, a light crosses the glass, the caption etches wider. */
.framed{background:var(--mat);padding:14px 14px 12px;border:1px solid var(--frame);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 16px 42px rgba(20,16,10,.16)}
.framed .well{position:relative;overflow:hidden}
.framed img{display:block;width:100%;height:auto;  /* native ratio: never a crop */
  transform-origin:var(--ox,50%) var(--oy,50%);
  transition:transform 5.5s cubic-bezier(.16,.6,.16,1)}
.framed .well::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.34) 50%, transparent 60%);
  background-size:300% 100%;background-position:130% 0;transition:background-position 1.6s ease}
.framed:hover img,.framed.breathe img{transform:scale(1.07)}
.framed:hover .well::after,.framed.breathe .well::after{background-position:-30% 0}
.framed figcaption{padding-top:10px;font-size:13.5px;color:#5d5443;letter-spacing:.02em;
  transition:letter-spacing 1.2s ease}
.framed:hover figcaption,.framed.breathe figcaption{letter-spacing:.09em}

.word-room{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:5vw;align-items:center}
.word-room .copy h2{max-width:none}

.life-room .copy{max-width:56rem}
.moments{margin-top:5svh;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5vw;align-items:start}
.moments .framed:nth-child(2){margin-top:6svh}   /* the interweave: no two frames level */
.moments .framed:nth-child(3){margin-top:2.5svh}

/* the film: a cinema frame that comes alive when clicked */
.film-room{text-align:center}
.cinema{position:relative;max-width:62rem;margin:0 auto;background:#0e0f0d;padding:16px;
  border:1px solid var(--frame);box-shadow:0 20px 50px rgba(20,16,10,.22)}
.cinema img,.cinema video{display:block;width:100%;height:auto}
.playword{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);
  display:inline-flex;align-items:center;justify-content:center;gap:6px;text-align:center;text-decoration:none;
  font:inherit;font-size:16.5px;font-weight:600;color:var(--ink);cursor:pointer;
  padding:13px 22px;border-radius:12px;border:1px solid rgba(255,255,255,.5);
  background:rgba(244,239,227,.55);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 10px 30px rgba(0,0,0,.3)}
.playword i{font-style:italic;font-family:"Frank Ruhl Libre",serif}
.filmline{margin-top:20px;font-size:15.5px;color:#5d5443}

/* found faithful */
.steward{text-align:center;padding-bottom:0}
.steward blockquote p{font-family:"Frank Ruhl Libre",serif;font-size:26px;line-height:1.4;max-width:30ch;margin:0 auto}
.steward cite{display:block;margin-top:12px;font-style:normal;font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--walnut)}
.steward .door.big{display:inline-block;margin-top:26px}

/* ---------- footer: the land, the stones, the cross ---------- */
/* ---------- THE CLOSE: the landing page ends as a destination ---------- */
footer{margin-top:6svh;background:#101110;color:#efe9db}
footer .land{width:100%}
footer .land img{width:100%;height:auto;display:block}   /* full width, whole photo */
.closeplate{max-width:88rem;margin:0 auto;padding:7svh 4vw 4svh;
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);gap:4vw}
.closeplate h2{color:#fff;font-size:29px;max-width:none;margin-top:0}
.closeplate .when{margin-top:16px;font-size:17px;line-height:1.6}
.closeplate .when b{font-weight:600;color:#fff}
.closeplate .call{display:inline-block;margin-top:18px;font-family:"Frank Ruhl Libre",serif;
  font-size:27px;color:#fff;text-decoration:none;border-bottom:2px solid rgba(255,167,178,.5);padding-bottom:4px}
.closeplate .where{font-size:16px;line-height:1.75;color:#c9bfae}
.closeplate .where a{color:#ffb3bc;text-decoration:none}
.closeplate .doors2{display:flex;flex-direction:column;gap:10px;font-size:16.5px}
.closeplate .doors2 a{color:#efe9db;text-decoration:none;padding:6px 0;
  border-bottom:1px solid rgba(244,239,227,.14)}
.closeplate .doors2 a.give{color:#ffa7b2}
.closeplate .social{display:flex;gap:14px;margin-top:14px}
.closeplate .social a{border:0;padding:8px 0;color:#c9bfae;display:inline-flex}
.closerule{max-width:88rem;margin:0 auto;padding:0 4vw}
.closerule .line{border-top:1px solid rgba(244,239,227,.14);padding:20px 0 34px;
  display:flex;justify-content:space-between;align-items:center;gap:2rem}
.closerule img{height:56px;width:auto}
.closerule .legal{text-align:right;font-size:13px;line-height:1.7;color:#a99e8a}
/* the interior close: quiet, so the landing close stays the event */
body.inner footer{margin-top:7svh;background:#101110;padding-top:0}
body.inner footer .land{display:none}
body.inner .closeplate{grid-template-columns:minmax(0,7fr) minmax(0,5fr);padding:5svh 4vw 2svh}
body.inner .closeplate h2{font-size:23px}
body.inner .closeplate .call{font-size:22px}
body.inner .closeplate .doors2{display:none}

/* ---------- the one verb: ARRIVE ---------- */
.arrive{opacity:1}
.js .arrive{opacity:0;transform:translateY(18px) scale(.988);
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,.9,.24,1)}
.js .arrive.in{opacity:1;transform:none}
.js .arrive.in[data-d="1"]{transition-delay:.12s}
.js .arrive.in[data-d="2"]{transition-delay:.24s}
.js .arrive.in[data-d="3"]{transition-delay:.36s}

/* ---------- night: the same family after dark ---------- */
body.night{background:#161310;color:#efe9db}
body.night header{background:rgba(22,19,16,.5);border-bottom-color:rgba(244,239,227,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
body.night .lock .name span{color:#a99e8a}
body.night .slab{background:rgba(22,19,16,.48);border-color:rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 14px 40px rgba(0,0,0,.4)}
body.night .slab .addr{color:#c9bfae}
body.night .pane .face,body.night .pane .back,body.night .slip.give{
  background:rgba(22,19,16,.5);border-color:rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 10px 30px rgba(0,0,0,.4)}
body.night .pane .k,body.night .over,body.night .steward cite{color:#c9b9a2}
body.night .pane .hint{color:#8d8270}
body.night .slip.give{border-color:rgba(255,90,112,.45);color:#ff5a70}
body.night .door{color:#ff5a70;border-bottom-color:rgba(255,90,112,.4)}
body.night .pane .back p i{color:#ff5a70}
body.night .playword{background:rgba(22,19,16,.62);color:#efe9db;
  border-color:rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 10px 30px rgba(0,0,0,.45)}
body.night .framed{background:#211c14;border-color:#0a0805}
body.night .framed figcaption,body.night .filmline,body.night .legal,body.night .slab .addr{color:#a99e8a}

/* ---------- phone: an authored composition ---------- */
@media (max-width:760px){
  .railhint{display:block}
  nav{display:none}
  .menuword{display:block}
  .ground{height:auto;min-height:0;display:block;padding:86px 4vw 20px}
  .ground img{width:100%;height:auto}
  .ground .slab{position:static;max-width:none;margin-top:14px;padding:24px 20px 22px}
  .grand .slab{background:rgba(22,19,16,.72);color:#efe9db;
    border-color:rgba(255,255,255,.16);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 14px 40px rgba(0,0,0,.4)}
  .grand .slab .addr{color:#ece5d6}
  .slab h1{font-size:25px}
  .week{grid-template-columns:1fr;margin-top:18px;gap:12px}
  .pane{min-height:150px}
  .word-room{grid-template-columns:1fr;gap:6svh}
  .moments{grid-template-columns:1fr;gap:5svh}
  .moments .framed:nth-child(2),.moments .framed:nth-child(3){margin-top:0}
  h2{font-size:25px}
  .room{padding:7svh 4vw 0}
  .cycleband{margin-top:7svh;padding:6svh 4vw}
  .qa,.seats,.ways,.weekrows,.quietways{margin-top:5svh !important}
  .centered{padding-top:7svh}
  footer{margin-top:7svh}
  .playword{position:static;transform:none;margin:14px auto 4px;display:flex;
    width:100%;max-width:none;font-size:15.5px;line-height:1.3}
  .cinema{padding:10px}
  .closeplate{grid-template-columns:1fr;gap:5svh;padding:6svh 5vw 3svh}
  body.inner .closeplate{grid-template-columns:1fr}
  .closerule .line{flex-direction:column;text-align:center;gap:14px}
  .closerule .legal{text-align:center}
}

/* ---------- honesty for still hands ---------- */
@media (prefers-reduced-motion: reduce){
  .grand .drift{transform:none !important}
  .grand .drift img{animation:none}
  header::after{animation:none;background:none}
  .ground img{animation:none}
  .framed img,.framed{transition:none}
  .framed .well::after{display:none}
  .pane .t span{transition:opacity .25s ease;transform:none;filter:none}
  .js .arrive,.js .arrive.in{opacity:1;transform:none;transition:none}
  .pane .face,.pane .back{transition:opacity .25s ease}
  .pane .face{transform:none}
  .pane.turned .face{transform:none;opacity:0;pointer-events:none}
  .pane .back{transform:none;opacity:0}
  .pane.turned .back{opacity:1}
  .pane .back>*{opacity:1;transform:none;transition:none}
  .pane .face::after{display:none}
}

/* ---------- interior patterns: the bleed, the duet, the cycle ---------- */
/* THE BLEED: every room opens (or breathes mid-page) on a full photograph,
   the words on frost. The home page's energy, carried inward. */
.vast{position:relative;height:100svh;min-height:620px;overflow:hidden;background:#101110}
.vast>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vast .slab{position:absolute;left:4vw;bottom:9svh;max-width:36rem}
.vast .slab.tl{top:16svh;bottom:auto}
.vast .slab.tr{top:16svh;bottom:auto;left:auto;right:4vw}
.vast .slab.ml{top:50%;bottom:auto;transform:translateY(-50%)}
.vast .caption{position:absolute;right:4vw;bottom:3.5svh;font-size:13.5px;color:#fff;
  padding:8px 14px;border-radius:10px;background:rgba(20,16,10,.38);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.vast .slab,.vast .slab.tl,.vast .slab.tr,.vast .slab.ml{
  background:rgba(22,19,16,.72);color:#efe9db;border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 14px 40px rgba(0,0,0,.4);
  -webkit-backdrop-filter:blur(26px) saturate(1.4);backdrop-filter:blur(26px) saturate(1.4);
  border-radius:var(--r);padding:28px 32px 26px;text-align:center}
.vast .slab h1{font-family:"Frank Ruhl Libre",serif;font-weight:500;font-size:32px;line-height:1.22}
.vast .slab .addr{margin-top:10px;font-size:15px;color:#ece5d6}
.bleed{position:relative;height:96svh;min-height:560px;background:#101110;
  display:grid;place-items:center;padding:86px 3vw 3svh}
.bleed>img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:18px;
  box-shadow:0 24px 70px rgba(0,0,0,.45)}
.bleed .cycle{position:relative;width:min(100%,150svh);aspect-ratio:16/10;max-height:100%}
.bleed .cycle img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:18px}
.bleed .slab{position:absolute;left:4vw;bottom:6svh;max-width:36rem}
.bleed .slab.tl{top:14svh;bottom:auto}
.bleed .slab.tr{top:14svh;bottom:auto;left:auto;right:4vw}
.bleed .slab.ml{top:50%;bottom:auto;transform:translateY(-50%)}
.bleed.short{height:72svh;min-height:460px}
.bleed .caption{position:absolute;right:4vw;bottom:3.5svh;font-size:13.5px;color:#fff;
  padding:8px 14px;border-radius:10px;background:rgba(20,16,10,.38);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
/* THE CYCLE: one frame, many true photographs, interchanging slowly */
.cycle{display:block}
.cycle img{position:absolute;inset:0;opacity:0;transition:opacity 1.8s ease}
.cycle img.on{opacity:1}
/* THE DUET: reading matter one side, the framed photograph the other, earned */
.duet{max-width:88rem;margin:0 auto;padding:9svh 4vw 0;display:grid;
  grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:5vw;align-items:center}
.duet.flip .framed{order:-1}
.duet h2{max-width:none}
/* frost slips reused as info cards on interiors */
.slipcard{padding:22px 24px;border-radius:var(--r);border:1px solid rgba(255,255,255,.5);
  background:rgba(250,246,236,.8);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 10px 30px rgba(20,16,10,.10)}
body.night .slipcard{background:rgba(22,19,16,.55);border-color:rgba(255,255,255,.14)}
body.night .bleed .caption{background:rgba(0,0,0,.5)}
.centered{max-width:60rem;margin:0 auto;padding:10svh 4vw 0;text-align:center}
.centered h2{margin-inline:auto}
.centered p{margin:16px auto 0;font-size:17px;line-height:1.65;max-width:54ch}
.rail-note{display:none}
@media (max-width:760px){
  .grand{height:auto;min-height:0;overflow:visible;background:#101110;padding:76px 0 0}
  .grand .drift{position:static;inset:auto}
  .grand .drift img{width:100%;height:auto;object-fit:unset;animation:none}
  .grand .slab{position:static;margin:14px 4vw 20px;max-width:none}
  .grand .slab h1{font-size:25px}
  .hero-split,.hero-split.photoleft{grid-template-columns:1fr;gap:0;padding:96px 4vw 5svh;min-height:0}
  .hero-split .mountimg{max-height:none;order:-1;margin-bottom:16px}
  .hero-split .word h1{font-size:26px}
  .hero-band{padding:96px 4vw 5svh}
  .hero-band .word h1{font-size:25px}
  .cycleband .cycle{width:100%;aspect-ratio:4/3}
  .bleed .slab.tl,.bleed .slab.tr,.bleed .slab.ml{position:static;transform:none;margin-top:14px}
  .vast{height:auto;min-height:0;overflow:visible;padding:76px 0 0}
  .vast>img{position:static;width:100%;height:auto;object-fit:unset}
  .vast .slab,.vast .slab.tl,.vast .slab.tr,.vast .slab.ml{position:static;transform:none;
    margin:14px 4vw 20px;max-width:none}
  .vast .slab h1{font-size:24px}
  .vast .caption{position:static;display:inline-block;margin:0 4vw 12px}
  .bleed{height:auto;min-height:0;display:block;padding:86px 4vw 20px}
  .bleed>img,.bleed .cycle{width:100%}
  .bleed .cycle{aspect-ratio:4/3}
  .bleed .slab{position:static;margin-top:14px;max-width:none;padding:22px 20px}
  .bleed .slab h1{font-size:24px}
  .bleed .caption{position:static;display:inline-block;margin-top:10px}
  .duet{grid-template-columns:1fr;gap:4svh}
  .duet.flip .framed{order:0}
  /* THE RAIL: photo sets swipe sideways, snap by snap */
  .moments,.rail,.kgrid,.chapters,.branches .moments{
    -webkit-mask-image:linear-gradient(90deg,#000 86%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 86%,transparent 100%)}
  .moments,.rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:14px;margin-top:4svh;padding-bottom:10px;-webkit-overflow-scrolling:touch}
  .moments .framed,.rail .framed{flex:0 0 82%;scroll-snap-align:center;margin-top:0 !important}
  .rail-note{display:block;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;
    color:#7a6f5c;margin-top:10px;text-align:center}
}
@media (prefers-reduced-motion: reduce){
  .bleed>img,.bleed .cycle img{animation:none}
  .cycle img{transition:none}
}