/* Line Up Surf House — design tokens + components.
   Concept: a day by the break. Every chapter sits on a horizon line; the sun moves along it. */

@font-face{font-family:"Anybody";src:url(/assets/fonts/anybody-latin.woff2) format("woff2");font-weight:100 900;font-stretch:50% 150%;font-style:normal;font-display:swap;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:"Newsreader";src:url(/assets/fonts/newsreader-400-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;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:"Newsreader";src:url(/assets/fonts/newsreader-400i-latin.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap;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}

:root{
  /* palette — sampled from the business's own photos (see BRAND_NOTES.md) */
  --ink:#0f2533;      /* deep Atlantic, darkened from the sea band in the window view */
  --sea:#1f4257;      /* sea just under the horizon */
  --sky:#3d6cb9;      /* Anza sky over the beach (window view, high sky) */
  --dawn:#e4eef7;     /* low sky at the horizon, lifted */
  --mural:#7aa4cb;    /* painted sea on the LINE UP mural */
  --board:#ecd03c;    /* yellow soft-tops + Line Up tees */
  --pine:#d6b27e;     /* pine doors and room-name plaques */
  --sand:#f1ebe1;     /* Anza sand, lifted */
  --sand-2:#bfa084;   /* Anza sand */
  --haze:#f0debe;     /* hazy late light over the sea */
  --white:#fff;
  --err:#a3260f;
  --line:rgba(15,37,51,.16);

  --f-display:"Anybody","Arial Narrow",system-ui,sans-serif;
  --f-text:"Newsreader",Georgia,"Times New Roman",serif;

  --gut:20px;
  --max:1320px;
  --hd:64px;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;
}
@media (min-width:700px){:root{--gut:40px;--hd:72px}}

/* ---------- base */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--hd) + 8px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;font-family:var(--f-text);font-size:1.125rem;line-height:1.55;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
@media (min-width:960px){body{font-size:1.1875rem}}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
p{margin:0 0 1em}
h1,h2,h3,h4{margin:0;font-weight:inherit}
ul,ol,dl,dd,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
address{font-style:normal}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--board);outline-offset:3px}
.ch--sun :focus-visible,.ch--dawn :focus-visible,.ch--noon :focus-visible{outline-color:var(--ink)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--board);color:var(--ink);padding:12px 16px;font-family:var(--f-display);font-weight:700}
.skip:focus{top:12px}
.wrap{width:100%;max-width:calc(var(--max) + 2*var(--gut));margin:0 auto;padding:0 var(--gut)}
.ic{width:20px;height:20px;flex:none}
.ic--s{width:14px;height:14px;vertical-align:-1px}

/* ---------- type */
.h2,.cover h1,.brand__word,.room__name,.room__count,.stat__n,.roof__word,.ft__word,.nf__word{font-family:var(--f-display)}
.h2{font-size:clamp(2.15rem,1.25rem + 4vw,4.6rem);font-stretch:122%;font-weight:820;line-height:.96;letter-spacing:-.012em;text-wrap:balance;margin-bottom:var(--s5)}
.h3{font-family:var(--f-display);font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem);font-stretch:112%;font-weight:760;line-height:1.08;margin-bottom:var(--s3)}
.h3--big{font-size:clamp(1.75rem,1.2rem + 2vw,2.9rem);font-stretch:125%;font-weight:820;line-height:1}
.lead{font-size:clamp(1.25rem,1.1rem + .7vw,1.65rem);line-height:1.38;max-width:34ch}
.kicker,.mk__label,.cover__kicker,.maybe__label,.room__kind,.specs dt,.ft__h,.fld label,.ask__extras legend,.cover__cap,figcaption{font-family:var(--f-display);font-size:.78rem;font-stretch:110%;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1.3}
.small{font-size:1rem}

/* ---------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border:2px solid transparent;border-radius:0;font-family:var(--f-display);font-size:.95rem;font-stretch:112%;font-weight:760;letter-spacing:.05em;text-transform:uppercase;line-height:1.1;text-decoration:none;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.btn--sun{background:var(--board);color:var(--ink)}
.btn--sun:hover{background:#f6df60}
.btn--ink{background:var(--ink);color:var(--white)}
.btn--ink:hover{background:var(--sea)}
.btn--line{border-color:currentColor;color:inherit;background:transparent}
.btn--line:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}
.btn--line-light{border-color:rgba(255,255,255,.55);color:var(--white);background:transparent}
.btn--line-light:hover{border-color:var(--white)}
.linkbtn{background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}

/* ---------- sun (shared glyph) */
.sun{position:absolute;display:block;width:30px;height:30px;border-radius:50%;background:var(--board)}

/* ---------- header */
.hd{position:absolute;top:0;left:0;right:0;z-index:40;color:var(--white);transition:transform .35s ease,background-color .25s,color .25s}
.hd__in{display:flex;align-items:center;gap:var(--s5);height:var(--hd);max-width:calc(var(--max) + 2*var(--gut));margin:0 auto;padding:0 var(--gut)}
.js .hd{position:fixed}
.hd.is-past{background:rgba(255,255,255,.97);color:var(--ink);box-shadow:0 1px 0 var(--line)}
@media (max-width:959px){.hd.is-past{transform:translateY(-100%)}}
body:not(.home) .hd{position:sticky;background:var(--white);color:var(--ink);box-shadow:0 1px 0 var(--line)}
.brand{display:inline-flex;flex-direction:column;text-decoration:none;line-height:1;margin-right:auto}
.brand__word{font-size:1.32rem;font-stretch:150%;font-weight:900;text-transform:uppercase;letter-spacing:.01em}
.brand__sub{font-family:var(--f-display);font-size:.62rem;font-weight:650;font-stretch:105%;letter-spacing:.2em;text-transform:uppercase;margin-top:5px;opacity:.9}
.hd__nav{display:none}
.hd__nav ul{display:flex;gap:clamp(18px,2.2vw,34px)}
.hd__nav a{font-family:var(--f-display);font-size:.95rem;font-stretch:106%;font-weight:650;text-decoration:none;padding:10px 0;border-bottom:2px solid transparent}
.hd__nav a:hover,.hd__nav a[aria-current]{border-bottom-color:currentColor}
.hd__end{display:flex;align-items:center;gap:var(--s4)}
.hd__cta{display:none;min-height:46px;padding:0 18px}
.lang{font-family:var(--f-display);font-weight:750;font-size:.85rem;letter-spacing:.08em;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;padding:0 6px}
.burger{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 4px 0 10px;background:none;border:0;cursor:pointer;font-family:var(--f-display);font-weight:750;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase}
.burger__lines{position:relative;display:block;width:26px;height:10px;border-top:2px solid currentColor;border-bottom:2px solid currentColor}
.burger__lines::after{content:"";position:absolute;right:0;top:2px;width:16px;height:2px;background:currentColor;opacity:0}
@media (min-width:700px){.hd__cta{display:inline-flex}}
@media (min-width:960px){.hd__nav{display:block}.burger{display:none}.brand{margin-right:0}.hd__nav{margin:0 auto}}

/* ---------- mobile sheet */
.sheet{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;background:var(--ink);color:var(--white);padding:0 var(--gut) calc(24px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;transform:translateY(16px);opacity:0;transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .25s}
.sheet.is-open{transform:none;opacity:1}
.sheet__top{display:flex;align-items:center;justify-content:space-between;height:var(--hd)}
.sheet__close{min-height:44px;padding:0 4px 0 12px;background:none;border:0;color:inherit;font-family:var(--f-display);font-weight:750;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.sheet__list{margin-top:var(--s5)}
.sheet__list a{display:flex;align-items:baseline;gap:14px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.16);font-family:var(--f-display);font-size:clamp(1.8rem,8.4vw,2.6rem);font-stretch:126%;font-weight:820;line-height:1.05;text-decoration:none}
.sheet__n{font-size:.8rem;font-weight:650;opacity:.55;font-stretch:100%;min-width:1.6em}
.sheet__list a[aria-current]{color:var(--board)}
.sheet__horizon{position:relative;height:46px;margin:var(--s6) 0 var(--s5);overflow:hidden;border-bottom:2px solid rgba(255,255,255,.85)}
.sheet__horizon .sun{right:16%;bottom:-15px}
.sheet__acts{display:grid;gap:var(--s3)}
.sheet__bk{justify-self:start;padding:10px 0;font-family:var(--f-display);font-weight:650;font-size:.95rem}
.sheet .lang{margin-top:var(--s4);justify-self:start;color:var(--white)}
body.is-locked{overflow:hidden}

/* ---------- dock (mobile sticky action) */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:auto 1fr auto;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--ink);color:var(--white);transform:translateY(110%);transition:transform .3s cubic-bezier(.2,.7,.2,1);box-shadow:0 -1px 0 rgba(255,255,255,.08)}
.dock.is-on{transform:none}
.dock a,.dock button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;font-family:var(--f-display);font-weight:760;font-size:.85rem;font-stretch:108%;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer}
.dock__menu{padding:0 14px;background:none;border:2px solid rgba(255,255,255,.35);color:inherit}
.dock__wa{background:var(--board);color:var(--ink);padding:0 12px;white-space:nowrap}
.dock__call{width:52px;border:2px solid rgba(255,255,255,.35)}
@media (max-width:379px){.dock{gap:6px;padding-left:8px;padding-right:8px}.dock a,.dock button{font-size:.78rem;letter-spacing:.03em}.dock__menu{padding:0 10px}.dock__wa{padding:0 8px}}
@media (min-width:960px){.dock{display:none}}
@media (max-width:959px){.ft{padding-bottom:calc(96px + env(safe-area-inset-bottom))}}

/* ---------- cover */
.cover{position:relative;container-type:inline-size;--r:var(--r-m);--hz:var(--hz-m);--hzpos:calc((100% - 100cqw * var(--r)) * .3 + var(--hz) * 100cqw * var(--r))}
@media (min-width:700px){.cover{--r:var(--r-d);--hz:var(--hz-d)}}
.cover__media{position:relative;width:100%;aspect-ratio:var(--ar-m);max-height:84svh;overflow:hidden;background:#698fbf;color:var(--white)}
@media (min-width:700px){.cover__media{aspect-ratio:var(--ar-d);max-height:88svh;background:#799ec5}}
.cover__media picture,.cover__img{display:block;width:100%;height:100%}
.cover__img{object-fit:cover;object-position:50% 30%}
.cover__hz{position:absolute;left:0;right:0;top:var(--hzpos);height:0;border-top:1.5px solid rgba(255,255,255,.9);transform-origin:left center}
.cover__hz span{position:absolute;right:var(--gut);top:7px;font-family:var(--f-display);font-size:.68rem;font-weight:700;font-stretch:110%;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 1px 6px rgba(15,37,51,.6)}
.cover__hz span::before{content:"";display:inline-block;width:1.5px;height:9px;background:currentColor;margin-right:7px;vertical-align:-1px}
@media (min-width:700px){.cover__hz span{right:16%}}
.cover__cap{position:absolute;left:var(--gut);bottom:12px;margin:0;padding:5px 8px;background:rgba(15,37,51,.72);font-size:.62rem;letter-spacing:.12em}
.cover__title{position:absolute;left:0;right:0;bottom:calc(100% - var(--hzpos) + clamp(18px,3cqw,40px));margin:0 auto}
.cover__kicker{margin-bottom:var(--s3);text-shadow:0 1px 10px rgba(15,37,51,.3)}
.cover h1{font-size:min(12.3vw,3.6rem);font-stretch:110%;font-weight:860;line-height:.92;letter-spacing:-.015em;text-shadow:0 2px 30px rgba(15,37,51,.18)}
@media (min-width:700px){.cover h1{font-size:clamp(3.4rem,1.2rem + 5.2vw,5.6rem);font-stretch:120%}}
@media (min-width:960px){.cover h1{font-stretch:130%}}
.cover h1 span{display:block}
.cover__band{background:var(--white);padding:22px 0 30px}
.cover__lead{font-size:1.2rem;line-height:1.4;margin-bottom:var(--s5);max-width:36ch}
.cover__acts{display:flex;gap:var(--s3);margin-bottom:var(--s4)}
.cover__acts .btn--sun{flex:1 1 auto;min-width:min(100%,260px)}
.cover__rating{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;font-family:var(--f-display);font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.cover__rating a{display:inline-flex;align-items:center;gap:5px;min-height:44px;text-decoration:underline;text-underline-offset:.25em}
.cover__score{display:inline-grid;place-items:center;min-width:44px;height:30px;padding:0 6px;background:var(--ink);color:var(--white);font-size:.95rem;letter-spacing:0}
@media (min-width:960px){
  .cover__band{position:absolute;left:0;right:0;bottom:calc(100% - var(--hzpos) + 36px);background:none;padding:0;color:var(--white);pointer-events:none}
  .cover__band-in{display:flex;flex-direction:column;align-items:flex-start;margin-left:auto;margin-right:auto;padding-left:calc(var(--gut) + 57%);padding-right:calc(var(--gut) + 10%);pointer-events:none}
  .cover__band-in>*{pointer-events:auto}
  .cover__lead{font-size:1.3rem;text-shadow:0 1px 14px rgba(15,37,51,.35)}
  .cover__acts{flex-wrap:nowrap}
  .cover__acts .btn--sun{flex:none}
  .cover__rating a{color:var(--white)}
  .cover__score{background:var(--white);color:var(--ink)}
  .cover__title{padding-right:44%}
}
.js .cover__hz{animation:draw 1.4s .25s cubic-bezier(.3,.6,.2,1) both}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- chapters + marker */
.ch{padding:clamp(48px,7vw,112px) 0 clamp(64px,9vw,136px)}
.ch--dawn{background:var(--dawn)}
.ch--sky{background:var(--sky);color:var(--white)}
.ch--noon{background:var(--white)}
.ch--sea{background:var(--sea);color:var(--white)}
.ch--dusk{background:var(--ink);color:var(--haze)}
.ch--sun{background:var(--board)}
.mk{margin-bottom:clamp(28px,4.5vw,64px)}
.mk__sky{position:relative;height:46px;overflow:hidden}
.mk__sky::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;transform-origin:left center;transition:transform 1.1s cubic-bezier(.3,.6,.2,1)}
.mk .sun{left:var(--x);bottom:var(--sy);transform:translateX(-50%);transition:transform 1.2s .25s cubic-bezier(.2,.7,.2,1)}
.mk__sea{height:12px;opacity:.38;background:linear-gradient(currentColor,currentColor) 0 4px/100% 1px no-repeat,linear-gradient(currentColor,currentColor) 0 10px/100% 1px no-repeat}
.mk__label{margin:var(--s2) 0 0;display:flex;gap:10px}
.mk__n{font-weight:900}
.js .mk:not(.is-in) .mk__sky::after{transform:scaleX(0)}
.js .mk:not(.is-in) .sun{transform:translate(-50%,60px)}
.ch--dawn .sun{box-shadow:0 0 0 2px var(--ink) inset}

/* ---------- figures, quotes */
figcaption{margin-top:var(--s2);font-size:.68rem;opacity:.85}
.q blockquote p{font-family:var(--f-text);font-style:italic;font-size:clamp(1.3rem,1.1rem + .9vw,1.85rem);line-height:1.3;margin:0 0 var(--s3)}
.q figcaption{font-size:.72rem;opacity:1}
.q figcaption span{opacity:.7}

/* ch1 — first light */
.ch1{display:grid;gap:var(--s7)}
.ch1__fig img{width:100%;aspect-ratio:4/5;object-fit:cover}
.maybe__label{margin:var(--s5) 0 var(--s2);opacity:.7}
.maybe{font-family:var(--f-display);font-size:clamp(1.3rem,1.05rem + 1.1vw,1.95rem);font-stretch:118%;font-weight:760;line-height:1.22;margin-bottom:var(--s5)}
.maybe li{display:inline;white-space:nowrap}
.maybe li:not(:last-child)::after{content:"\00a0·";color:var(--sky);font-weight:400}
.q--ch1{border-top:2px solid var(--ink);padding-top:var(--s5)}
@media (min-width:960px){
  .ch1{grid-template-columns:repeat(12,1fr);column-gap:var(--s5);row-gap:var(--s7)}
  .ch1__text{grid-column:1/7}
  .ch1__fig{grid-column:8/13;grid-row:1/4;position:sticky;top:calc(var(--hd) + 24px);align-self:start}
  .ch1__bf{grid-column:1/7}
  .q--ch1{grid-column:1/7;align-self:end}
}

/* ch2 — first session */
.ch2{display:grid;gap:var(--s7)}
.specs>div{display:grid;grid-template-columns:6em 1fr;gap:var(--s4);padding:var(--s4) 0;border-top:1px solid rgba(255,255,255,.3)}
@media (min-width:700px){.specs>div{grid-template-columns:7.5em 1fr}}
.specs>div:last-child{border-bottom:1px solid rgba(255,255,255,.3)}
.specs dt{padding-top:.35em;color:var(--board)}
.specs--ink>div{border-color:var(--line)!important;grid-template-columns:6.5em 1fr;padding:var(--s3) 0}
.specs--ink dt{color:var(--sky)}
.specs--ink dd{font-size:1rem;line-height:1.4}
.who{font-family:var(--f-display);font-size:clamp(1.6rem,1.2rem + 1.6vw,2.6rem);font-stretch:118%;font-weight:800;line-height:1.05;color:var(--board);margin-bottom:var(--s6);text-wrap:balance}
.q--light figcaption{color:var(--white)}
@media (min-width:960px){
  .ch2{grid-template-columns:repeat(12,1fr);column-gap:var(--s5)}
  .ch2__text{grid-column:1/7}
  .ch2__who{grid-column:8/13;align-self:end}
}
.set{display:flex;align-items:flex-end;gap:var(--s4);margin-top:clamp(48px,6vw,96px);padding:0 var(--gut) var(--s2);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.set::-webkit-scrollbar{display:none}
.set__f{flex:0 0 74vw;scroll-snap-align:center}
.set__f img{width:100%;object-fit:cover}
.set__f--1 img{aspect-ratio:1/1}
.set__f--2 img{aspect-ratio:5/6}
.set__f--3 img{aspect-ratio:4/5.6}
@media (min-width:960px){
  .set{max-width:calc(var(--max) + 2*var(--gut));margin-left:auto;margin-right:auto;overflow:visible;gap:var(--s5)}
  .set__f{flex:1 1 0}
}

/* ch3 — midday: rooms, lunch, Anza */
.h2--wide{font-stretch:140%;max-width:none}
.rooms{margin-top:var(--s7)}
.rooms__head{display:grid;gap:var(--s3);margin-bottom:var(--s6)}
.rooms__head p{max-width:46ch;margin:0}
.room{position:relative;display:grid;grid-template-columns:min(34vw,150px) 1fr;column-gap:var(--s4);padding:var(--s5) 0;border-top:2px solid var(--ink)}
.room:last-child{border-bottom:2px solid var(--ink)}
.room__n{position:absolute;right:0;top:var(--s5);font-family:var(--f-display);font-size:.78rem;font-weight:800;letter-spacing:.1em}
.room__img img{width:100%;aspect-ratio:4/5;object-fit:cover}
.room__kind{color:var(--sky);margin:0 0 6px;padding-right:2.6em}
.room__name{font-size:clamp(1.35rem,1.05rem + 1.4vw,2.3rem);font-stretch:122%;font-weight:820;line-height:1;margin-bottom:var(--s3)}
.room__facts{font-size:.98rem;line-height:1.38}
.room__facts li{display:inline}
.room__facts li:not(:last-child)::after{content:" / ";opacity:.45}
.room__plaques{display:flex;flex-wrap:wrap;gap:8px;margin:var(--s3) 0 0}
.plaque{display:inline-block;padding:5px 14px 6px;border-radius:50%/60%;background:var(--pine);color:#1d2f52;font-family:var(--f-display);font-size:.85rem;font-weight:720;box-shadow:inset 0 0 0 1px rgba(60,40,15,.25),0 2px 0 rgba(60,40,15,.25)}
.room__count{display:none}
.rooms__note{margin-top:var(--s4);font-size:.95rem;opacity:.8}
@media (min-width:700px){
  .room{grid-template-columns:3.5rem 200px 1fr auto;align-items:center;column-gap:var(--s5)}
  .room__n{position:static;align-self:start;padding-top:6px}
  .room__kind{padding-right:0}
  .room__count{display:block;font-size:clamp(2rem,1rem + 3vw,3.8rem);font-stretch:150%;font-weight:900;color:var(--sky);line-height:1}
}
@media (min-width:960px){
  .rooms__head{grid-template-columns:5fr 7fr;align-items:end}
  .room{grid-template-columns:4rem 180px 1fr auto;padding:var(--s4) 0}
  .room__img img{aspect-ratio:1/1}
}
.noon{display:grid;gap:var(--s7);margin-top:clamp(56px,7vw,112px)}
.noon__facts{background:var(--sand);padding:var(--s5)}
.noon__facts .kicker{margin-bottom:var(--s3)}
@media (min-width:960px){
  .noon{grid-template-columns:repeat(12,1fr);column-gap:var(--s5)}
  .noon__lunch{grid-column:1/5}
  .noon__anza{grid-column:5/9}
  .noon__facts{grid-column:9/13}
}

/* ch4 — second session */
.ch4{display:grid;gap:var(--s7)}
.ch4 .lead{margin-bottom:var(--s7)}
.stat{border-top:2px solid var(--white);padding-top:var(--s4)}
.stat__n{font-size:clamp(7rem,4rem + 16vw,14rem);font-stretch:150%;font-weight:900;line-height:.82;color:var(--board);margin:0 0 var(--s3);letter-spacing:-.03em}
.stat__l{font-family:var(--f-display);font-weight:760;font-size:1.05rem;font-stretch:112%;margin:0 0 var(--s2)}
.stat__note{font-style:italic;opacity:.85;margin:0}
.qset{display:grid;gap:var(--s6);margin-top:clamp(56px,7vw,112px)}
.q--set{border-top:1px solid rgba(255,255,255,.4);padding-top:var(--s4)}
.q--s1 blockquote p{font-size:clamp(1.2rem,1.05rem + .4vw,1.35rem)}
.q--s2 blockquote p{font-size:clamp(1.35rem,1.1rem + .8vw,1.75rem)}
.q--s3 blockquote p{font-size:clamp(1.55rem,1.15rem + 1.4vw,2.35rem)}
@media (min-width:960px){
  .ch4{grid-template-columns:repeat(12,1fr);column-gap:var(--s5)}
  .ch4__text{grid-column:1/8}
  .stat{grid-column:9/13;align-self:start}
  .qset{grid-template-columns:3fr 4fr 5fr;align-items:end;column-gap:var(--s6)}
}

/* ch5 — sunset */
.ch5{display:grid;gap:var(--s7)}
.roof{position:relative;container-type:inline-size;aspect-ratio:4/5;overflow:hidden;border:1px solid rgba(240,222,190,.28);color:var(--haze)}
.roof__word{position:absolute;left:6cqw;top:5cqw;margin:0;font-size:17cqw;font-stretch:150%;font-weight:900;text-transform:uppercase;line-height:.86;max-width:80%}
.roof__line{position:absolute;left:0;right:0;top:62%;height:2px;background:var(--haze)}
.roof__sun{position:absolute;left:58%;top:62%;width:34cqw;height:34cqw;border-radius:50%;background:var(--board);transform:translate(-50%,-50%);clip-path:inset(0 0 50% 0)}
.roof__lines{position:absolute;left:0;right:0;top:calc(62% + 2px);bottom:0;padding:9cqw 6cqw 0;background:repeating-linear-gradient(to bottom,transparent 0 13px,rgba(240,222,190,.18) 13px 14px)}
.roof__lines li{font-family:var(--f-display);font-size:max(.78rem,3.6cqw);font-weight:720;font-stretch:112%;letter-spacing:.08em;text-transform:uppercase;line-height:1.9}
.ch5__fig img{width:100%}
.ch5 .lead{max-width:40ch}
@media (min-width:960px){
  .ch5{grid-template-columns:repeat(12,1fr);column-gap:var(--s5)}
  .ch5__text{grid-column:1/7}
  .roof{grid-column:8/13;grid-row:1/3;aspect-ratio:auto;min-height:620px}
  .ch5__fig{grid-column:1/6;align-self:end}
}
.js .roof__sun{transition:transform 1.6s .2s cubic-bezier(.2,.7,.2,1)}
.js .roof:not(.is-in) .roof__sun{transform:translate(-50%,-110%)}

/* ---------- ask */
.askw{display:grid;gap:var(--s6)}
.askw .lead{max-width:30ch}
.askw__alt a{font-family:var(--f-display);font-weight:700;font-size:.95rem}
@media (min-width:960px){
  .askw{grid-template-columns:repeat(12,1fr);column-gap:var(--s5)}
  .askw__head{grid-column:1/6}
  .askw__form{grid-column:7/13}
}
.ask{display:grid;gap:var(--s4)}
.ask__row{display:grid;gap:var(--s4)}
.ask__row--2{grid-template-columns:1fr 1fr}
.ask__row--3{grid-template-columns:1fr 1fr;align-items:end}
.fld--room{grid-column:1/-1}
@media (min-width:700px){.ask__row--3{grid-template-columns:1fr 1fr 2fr}.fld--room{grid-column:auto}}
@media (max-width:420px){.ask__row--2:last-of-type{grid-template-columns:1fr}}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld label{letter-spacing:.08em}
.opt{text-transform:none;letter-spacing:0;font-weight:500;opacity:.75}
.fld input,.fld select,.fld textarea{width:100%;min-height:52px;padding:12px 14px;border:2px solid var(--ink);border-radius:0;background:var(--white);font-family:var(--f-display);font-size:1.0625rem;font-stretch:100%;font-weight:520;color:var(--ink);-webkit-appearance:none;appearance:none}
.fld select{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:36px}
.fld textarea{min-height:52px;resize:vertical;font-family:var(--f-text);font-size:1.0625rem}
.fld input[type=date]{min-width:0;display:block}
.fld input[aria-invalid=true]{border-color:var(--err);box-shadow:inset 0 0 0 1px var(--err)}
.fld__err{margin:0;color:var(--err);font-family:var(--f-display);font-weight:720;font-size:.85rem}
.ask__summary{margin:0;padding:10px 14px;background:var(--ink);color:var(--white);font-family:var(--f-display);font-weight:700;font-size:.9rem}
.ask__extras{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ask__extras legend{padding:0;margin-bottom:8px;letter-spacing:.08em}
.chk{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:8px 14px;border:2px solid var(--ink);background:rgba(255,255,255,.35);font-family:var(--f-display);font-size:.95rem;font-weight:620;cursor:pointer}
.chk input{width:20px;height:20px;margin:0;accent-color:var(--ink)}
.chk:has(input:checked){background:var(--ink);color:var(--white)}
.chk:has(input:checked) input{accent-color:var(--board)}
.ask__go{width:100%;margin-top:var(--s2)}
.ask__done{border:2px solid var(--ink);padding:var(--s5);background:rgba(255,255,255,.4)}
.ask__done:focus{outline:none}
.ask__done-t{font-family:var(--f-display);font-size:1.5rem;font-stretch:118%;font-weight:820;line-height:1.1}
.ask__alts{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);margin:0;font-family:var(--f-display);font-weight:650;font-size:.95rem}
.ask__alts a,.ask__alts button{min-height:44px;display:inline-flex;align-items:center}

/* ---------- footer */
.ft{background:var(--ink);color:var(--haze);padding-bottom:var(--s8)}
.ft__horizon{position:relative;height:52px;overflow:hidden;border-bottom:2px solid var(--haze);margin-bottom:var(--s7)}
.ft__horizon .sun{right:12%;bottom:-17px;width:34px;height:34px}
.ft__grid{display:grid;gap:var(--s6)}
.ft__word{font-size:clamp(2.6rem,1.4rem + 5vw,4.6rem);font-stretch:150%;font-weight:900;text-transform:uppercase;line-height:.9;margin:0 0 var(--s3);color:var(--white)}
.ft__mural{font-style:italic;margin:0}
.ft__h{margin-bottom:var(--s3);color:var(--board)}
.ft__list li{margin-bottom:6px}
.ft__list a,.ft__link{display:inline-flex;align-items:center;gap:6px;min-height:36px;text-decoration:none;border-bottom:1px solid rgba(240,222,190,.35)}
.ft__list a:hover,.ft__link:hover{border-bottom-color:var(--haze)}
.ft__list--plain li{margin-bottom:4px}
.ft__small{font-size:.95rem;margin-top:var(--s3);opacity:.85}
.ft address{margin-bottom:var(--s3)}
.ft .lang{color:var(--white);margin-top:var(--s3)}
@media (min-width:700px){.ft__grid{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.ft__grid{grid-template-columns:1.6fr 1fr 1.1fr 1fr .8fr}}

/* ---------- inner pages: shared bits */
body:not(.home) .hd{top:0}
.ch--sand{background:var(--sand)}
.ch--tight{padding:clamp(40px,5vw,72px) 0}
.more{margin:var(--s5) 0 0;font-family:var(--f-display);font-size:.88rem;font-stretch:110%;font-weight:760;letter-spacing:.08em;text-transform:uppercase}
.more a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.35em}
.more--light a{color:var(--white)}
.split{display:grid;gap:var(--s7)}
.split>*,.mast__grid>*,.rt__grid>*,.cta__in>*,.book__in>*{min-width:0}
.split__fig img{width:100%;aspect-ratio:4/5;object-fit:cover}
@media (min-width:960px){
  .split{grid-template-columns:repeat(12,1fr);column-gap:var(--s5)}
  .split__a{grid-column:1/7}
  .split__b{grid-column:8/13}
}
.who--ink{color:var(--sky);margin-bottom:var(--s5)}
.q--rule{border-top:2px solid currentColor;padding-top:var(--s4);margin-top:var(--s6)}
.q--rule:first-child{margin-top:0}
.q--dusk{border-top:1px solid rgba(240,222,190,.35);padding-top:var(--s4);margin-top:var(--s6)}
.q--light figcaption{color:var(--white)}
.panel{background:var(--sand);padding:var(--s5)}
.panel .kicker{margin-bottom:var(--s3)}
.lines{margin-bottom:var(--s4)}
.lines li{display:flex;align-items:baseline;gap:12px;padding:var(--s3) 0;border-top:1px solid var(--line);font-family:var(--f-display);font-size:1.05rem;font-stretch:105%;font-weight:650;line-height:1.3}
.lines li:last-child{border-bottom:1px solid var(--line)}
.lines li::before{content:"";flex:none;width:14px;height:2px;background:var(--sky);transform:translateY(-.3em)}
.lines--not li::before{background:var(--ink);opacity:.35}
.kicker{margin-bottom:var(--s3)}

/* masthead: the day strip (one horizon, five hours, the sun at this page's hour) */
.mast{position:relative;padding:var(--s4) 0 clamp(44px,6vw,88px)}
.mast--dawn{background:var(--dawn)}
.mast--sky{background:var(--sky);color:var(--white)}
.mast--noon{background:var(--white)}
.mast--sand{background:var(--sand)}
.mast--dusk{background:var(--ink);color:var(--haze)}
.mast--wide{padding-bottom:0}
.day{margin-bottom:clamp(28px,4vw,52px)}
.day__sky{position:relative;height:40px;overflow:hidden}
.day__sky::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;transform-origin:left center;transition:transform 1.1s cubic-bezier(.3,.6,.2,1)}
.day .sun{left:var(--x);bottom:var(--sy);transform:translateX(-50%);transition:transform 1.2s .2s cubic-bezier(.2,.7,.2,1)}
.mast--dawn .sun,.mast--noon .sun,.mast--sand .sun,.next .sun{box-shadow:0 0 0 2px var(--ink) inset}
.day__ticks{position:relative;height:24px}
.day__ticks li{position:absolute;top:0;left:var(--tx);padding-top:11px;transform:translateX(-50%);font-family:var(--f-display);font-size:.66rem;font-stretch:110%;font-weight:700;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;opacity:.5}
.day__ticks li::before{content:"";position:absolute;left:50%;top:0;width:2px;height:7px;margin-left:-1px;background:currentColor}
.day__ticks li:first-child{transform:translateX(-1px)}
.day__ticks li:first-child::before{left:1px}
.day__ticks li:last-child{transform:translateX(calc(-100% + 1px))}
.day__ticks li:last-child::before{left:auto;right:0}
.day__ticks li.is-now{opacity:1}
@media (max-width:699px){.day__ticks li:not(.is-now){font-size:0;letter-spacing:0}}
.js .day:not(.is-in) .day__sky::after{transform:scaleX(0)}
.js .day:not(.is-in) .sun{transform:translate(-50%,46px)}
.mast__kicker{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--s4);font-family:var(--f-display);font-size:.78rem;font-stretch:110%;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.mast h1{font-family:var(--f-display);font-size:clamp(2.45rem,1.15rem + 6vw,6.1rem);font-stretch:116%;font-weight:860;line-height:.94;letter-spacing:-.015em;text-wrap:balance;margin:0 0 var(--s5)}
.mast__lead{max-width:36ch;margin:0}
.mast__grid{display:grid;gap:var(--s6)}
.mast__fig img{width:100%;aspect-ratio:4/3;object-fit:cover}
.mast--sky figcaption{color:var(--white)}
@media (min-width:960px){
  .mast h1{font-size:clamp(2.45rem,1rem + 4.6vw,5.2rem);font-stretch:126%}
  .mast__grid{grid-template-columns:repeat(12,1fr);column-gap:var(--s5);align-items:end}
  .mast__text{grid-column:1/8;padding-bottom:var(--s5)}
  .mast__fig{grid-column:8/13}
  .mast__fig img{aspect-ratio:4/5;max-height:70svh}
  .mast--bare .mast__text{grid-column:1/11}
  .mast--wide .mast__text{grid-column:1/13;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--s5);align-items:end;padding-bottom:0}
  .mast--wide .mast__kicker{grid-column:1/13}
  .mast--wide h1{grid-column:1/9;margin:0}
  .mast--wide .mast__lead{grid-column:9/13;padding-bottom:.4em}
}
/* wide band: a real view with the line-up drawn on its real horizon (fraction from images.py) */
.band{position:relative;margin:var(--s7) 0 0;color:var(--white);--hz:var(--hz-m)}
.band__img{width:100%;aspect-ratio:var(--ar);object-fit:cover;object-position:50% var(--py)}
@media (min-width:960px){.band{--hz:var(--hz-d)}.band__img{aspect-ratio:2.4}}
.band__hz{position:absolute;left:0;right:0;top:calc(var(--hz) * 100%);border-top:1.5px solid rgba(255,255,255,.9);transform-origin:left center}
.band__hz span{position:absolute;right:var(--gut);bottom:7px;font-family:var(--f-display);font-size:.68rem;font-weight:700;font-stretch:110%;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 1px 6px rgba(15,37,51,.6)}
.band__hz span::before{content:"";display:inline-block;width:1.5px;height:9px;background:currentColor;margin-right:7px;vertical-align:-1px}
.band__cap{position:absolute;left:var(--gut);bottom:12px;margin:0;padding:5px 8px;background:rgba(15,37,51,.72);font-size:.62rem;letter-spacing:.12em;opacity:1}
.js .band__hz{animation:draw 1.4s .3s cubic-bezier(.3,.6,.2,1) both}

/* rooms */
.rt{padding-top:clamp(48px,6vw,96px)}
.rt:last-of-type{padding-bottom:clamp(64px,8vw,128px)}
.rt__grid{display:grid;gap:var(--s6)}
.rt__name{font-family:var(--f-display);font-size:clamp(2.1rem,1.2rem + 3.4vw,4.3rem);font-stretch:124%;font-weight:840;line-height:.96;letter-spacing:-.01em;margin:0 0 var(--s4)}
.rt__count{color:var(--sky);font-stretch:150%;font-weight:900;white-space:nowrap}
.rt__blurb{font-size:1.2rem;line-height:1.45;max-width:38ch}
.rt .specs{margin-top:var(--s5)}
.rt__set{display:grid;grid-template-columns:5fr 6fr;gap:var(--s3);align-items:end}
.rt__f img{width:100%;object-fit:cover}
.rt__f--1 img{aspect-ratio:4/5}
.rt__f--2 img{aspect-ratio:4/5.6}
@media (min-width:960px){
  .rt__grid{grid-template-columns:repeat(12,1fr);column-gap:var(--s5);align-items:end}
  .rt__text{grid-column:1/6}
  .rt__set{grid-column:7/13;gap:var(--s5)}
  .rt--flip .rt__text{grid-column:8/13;grid-row:1}
  .rt--flip .rt__set{grid-column:1/7;grid-row:1}
}
.every{display:grid;gap:var(--s6)}
.every__doors p{max-width:30ch}
.plaque--big{font-size:1.15rem;padding:9px 22px 10px}
.every__arrive{margin:clamp(48px,6vw,88px) 0 clamp(40px,5vw,72px)}
@media (min-width:960px){
  .every{grid-template-columns:repeat(3,1fr);column-gap:var(--s6)}
  .specs--wide{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s6)}
  .specs--wide>div:nth-last-child(2){border-bottom:1px solid var(--line)}
}

/* house: scores */
.scores{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6) var(--s4);margin:var(--s6) 0 var(--s5)}
.score{border-top:2px solid rgba(255,255,255,.85);padding-top:var(--s3)}
.score__n{font-family:var(--f-display);font-size:clamp(3.4rem,2rem + 6vw,7.4rem);font-stretch:150%;font-weight:900;line-height:.86;letter-spacing:-.02em;color:var(--board);margin:0 0 var(--s2)}
.score__l{margin:0;font-family:var(--f-display);font-size:.95rem;font-stretch:108%;font-weight:700;line-height:1.25}
@media (min-width:960px){.scores{grid-template-columns:repeat(4,1fr);column-gap:var(--s5)}}

/* anza: cross-section from the house to the line-up (no distances — just the order of things) */
.xs{display:grid;gap:0;margin:var(--s6) 0 var(--s7)}
.xs__i{display:grid;grid-template-columns:84px 1fr;column-gap:var(--s4);align-items:end;padding:var(--s3) 0;border-top:2px solid var(--ink)}
.xs__i:last-child{border-bottom:2px solid var(--ink)}
.xs__i b{font-family:var(--f-display);font-size:1.25rem;font-stretch:118%;font-weight:820;line-height:1.05;display:block}
.xs__i span:not(.xs__shape){grid-column:2;font-size:1rem;opacity:.8}
.xs__shape{grid-row:1/3;position:relative;display:block;height:56px;align-self:end}
.xs__i--house .xs__shape{background:linear-gradient(var(--dawn),var(--dawn)) 22% 22%/20% 18% no-repeat,linear-gradient(var(--dawn),var(--dawn)) 78% 22%/20% 18% no-repeat,linear-gradient(var(--board),var(--board)) 50% 100%/34% 34% no-repeat,var(--ink)}
.xs__i--park .xs__shape{height:12px;background:repeating-linear-gradient(90deg,var(--sand-2) 0 14px,var(--white) 14px 16px)}
.xs__i--sand .xs__shape{height:18px;background:#d8c3a5;clip-path:polygon(0 0,100% 55%,100% 100%,0 100%)}
.xs__i--surf .xs__shape{height:24px;background:repeating-linear-gradient(90deg,var(--white) 0 9px,var(--mural) 9px 20px);box-shadow:inset 0 0 0 1px var(--line)}
.xs__i--line .xs__shape{height:24px;background:var(--sea)}
.xs__i--line .xs__shape::after{content:"";position:absolute;left:50%;top:-13px;width:26px;height:13px;margin-left:-13px;border-radius:26px 26px 0 0;background:var(--board);box-shadow:0 0 0 2px var(--ink) inset}
@media (min-width:960px){
  .xs{grid-template-columns:1fr 1.5fr 1.3fr 1fr 1.4fr;align-items:end}
  .xs__i{grid-template-columns:1fr;border-top:0;border-bottom:0!important;padding:0;align-self:stretch;align-content:end}
  .xs__shape{grid-row:auto;height:150px;margin-bottom:var(--s4)}
  .xs__i--park .xs__shape{height:16px}
  .xs__i--sand .xs__shape{height:30px}
  .xs__i--surf .xs__shape,.xs__i--line .xs__shape{height:40px}
  .xs__i b{border-top:2px solid var(--ink);padding:var(--s3) var(--s3) 4px 0}
  .xs__i span:not(.xs__shape){grid-column:1;padding-right:var(--s3)}
  .xs__i--line .xs__shape::after{top:-20px;width:40px;height:20px;margin-left:-20px}
}
.findus{margin-top:var(--s6)}
.findus address{margin-bottom:var(--s4)}

/* closing bands */
.cta__in{display:grid;gap:var(--s6)}
.cta .lead{max-width:34ch}
.cta__acts{display:grid;gap:var(--s2);justify-items:start;align-content:end}
.cta__acts .btn{width:100%;margin-bottom:var(--s2)}
.cta__link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-family:var(--f-display);font-size:.95rem;font-weight:700}
@media (min-width:960px){
  .cta__in{grid-template-columns:repeat(12,1fr);column-gap:var(--s5)}
  .cta__in>div:first-child{grid-column:1/8}
  .cta__acts{grid-column:9/13}
}
.next{padding:clamp(40px,5vw,72px) 0 clamp(48px,6vw,88px);background:var(--white)}
.next__mk{margin-bottom:var(--s4)}
.next__label{margin:0 0 var(--s3);font-family:var(--f-display);font-size:.78rem;font-stretch:110%;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.65}
.next__a{display:inline-flex;flex-direction:column;gap:8px;text-decoration:none}
.next__hour{font-family:var(--f-display);font-size:.85rem;font-stretch:110%;font-weight:760;letter-spacing:.1em;text-transform:uppercase;color:var(--sky)}
.next__t{font-family:var(--f-display);font-size:clamp(2.1rem,1.2rem + 3.8vw,4.6rem);font-stretch:128%;font-weight:860;line-height:.95;letter-spacing:-.01em}
.next__a:hover .next__t{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.12em}

/* book */
.book__in{display:grid;gap:var(--s7)}
.book__aside>.kicker{margin:var(--s6) 0 var(--s3)}
.book__aside>.kicker:first-child{margin-top:0}
.steps{counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:2.4em 1fr;gap:6px;padding:var(--s3) 0;border-top:2px solid var(--ink);line-height:1.4}
.steps li:last-child{border-bottom:2px solid var(--ink)}
.steps li::before{content:"0" counter(s);font-family:var(--f-display);font-weight:900;font-stretch:130%}
.book__other a,.book__map{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-family:var(--f-display);font-size:.98rem;font-weight:700}
.book__aside address{margin-bottom:0}
@media (min-width:960px){
  .book__in{grid-template-columns:repeat(12,1fr);column-gap:var(--s5)}
  .book__form{grid-column:1/8}
  .book__aside{grid-column:9/13}
}

/* ---------- 404 */
.nf{background:var(--ink);color:var(--haze);min-height:100svh}
.nf__sky{position:relative;height:30svh;overflow:hidden;border-bottom:2px solid var(--haze);margin-bottom:var(--s7)}
.nf__sky .sun{left:50%;bottom:-40px;width:80px;height:80px;transform:translateX(-50%)}
.nf__word{font-size:1.4rem;font-stretch:150%;font-weight:900;text-transform:uppercase;color:var(--white)}
.nf__acts{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.nf__fr{margin:var(--s8) 0 var(--s7);padding-top:var(--s5);border-top:1px solid rgba(240,222,190,.3)}
.nf__frt{font-family:var(--f-display);font-size:1.6rem;font-stretch:120%;font-weight:820;color:var(--white);margin-bottom:var(--s2)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .mk:not(.is-in) .mk__sky::after{transform:none}
  .js .mk:not(.is-in) .sun,.js .day:not(.is-in) .sun{transform:translateX(-50%)}
  .js .day:not(.is-in) .day__sky::after{transform:none}
  .js .roof:not(.is-in) .roof__sun{transform:translate(-50%,-50%)}
}