/* Hotel Mas del sol. Type: Prata (their brand serif) + Mulish. Colours: their sundial orange, gnomon ink, the shadow's
   brown, limewash, and the colours a day takes on the wall (dawn lilac, noon white, sunset apricot, night indigo). */
@font-face { font-family: "Prata"; src: url(/fonts/prata.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Mulish"; src: url(/fonts/mulish.woff2) format("woff2"); font-weight: 200 1000; 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: "Mulish"; src: url(/fonts/mulish-ext.woff2) format("woff2"); font-weight: 200 1000; font-display: swap;
  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; }

:root {
  --sun: #E38E4C; --sun-ink: #9a4a17; --ink: #1d1a17; --ink-2: #4a433d; --shade: #956F62;
  --lime: #f4efe7; --lime-2: #ebe3d6; --stone: #cfc3b1; --green: #1f5c45; --green-2: #2c7357;
  --lav: #8f80b8; --dusk: #3b3557; --night: #161a2e; --night-2: #232946; --bulb: #ffcf8a;
  --serif: "Prata", "Didot", "Bodoni 72", Georgia, serif; --sans: "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;
  --plate: #E38E4C; --hdr: 68px; --gut: clamp(18px, 4vw, 56px); --max: 1360px; --r: 2px;
  --ease: cubic-bezier(.22, .8, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font: 400 17px/1.6 var(--sans); color: var(--ink); background: var(--lime); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--sun); }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.005em; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; }
.skip:focus { top: 10px; }
.small { font-size: 15px; } .tiny { font-size: 13px; line-height: 1.5; opacity: .82; }
.kicker { font: 600 13px/1.3 var(--sans); letter-spacing: .04em; margin: 0 0 14px; color: var(--sun-ink); }
.sec-t { font-size: clamp(34px, 4.6vw, 68px); }
.sec-text { font-size: clamp(17px, 1.35vw, 20px); max-width: 38em; color: var(--ink-2); }
.more { display: inline-flex; align-items: center; gap: .45em; font-weight: 700; font-size: 15px; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.more svg { width: 18px; height: 18px; fill: currentColor; transition: transform .3s var(--ease); }
.more:hover svg { transform: translateX(4px); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 46px; padding: 0 22px; border-radius: 999px;
  font: 700 15px/1 var(--sans); text-decoration: none; border: 1.5px solid transparent; white-space: nowrap; transition: background-color .25s, color .25s, border-color .25s; }
.btn svg { width: 18px; height: 18px; fill: currentColor; }
.btn-sun { background: var(--sun); color: #1d1208; }
.btn-sun:hover { background: #ef9d5c; }
.btn-line { border-color: currentColor; background: transparent; }
.btn-line:hover { background: color-mix(in srgb, currentColor 10%, transparent); }

/* header */
.hdr { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hdr); display: flex; align-items: center; gap: 18px; padding: 0 var(--gut);
  background: color-mix(in srgb, var(--lime) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); transition: transform .4s var(--ease); }
.hdr.hide { transform: translateY(-100%); }
.hdr-logo { flex: none; display: block; width: 172px; }
.logo-svg { width: 100%; height: auto; display: block; }
.hdr-nav { margin-left: auto; }
.hdr-nav > ul { display: flex; gap: clamp(12px, 1.6vw, 26px); }
.hdr-nav a { text-decoration: none; font-size: 15px; font-weight: 600; padding: 22px 0; }
.hdr-nav a[aria-current] { box-shadow: inset 0 -2px 0 var(--sun); }
.has-sub { position: relative; }
.sub { position: absolute; left: -16px; top: 100%; min-width: 230px; padding: 10px 0; background: var(--lime); border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  box-shadow: 0 18px 40px -20px rgba(30, 20, 10, .35); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s, visibility .2s; }
.has-sub:hover .sub, .has-sub:focus-within .sub { opacity: 1; visibility: visible; transform: none; }
.sub a { display: block; padding: 8px 16px; font-weight: 500; }
.sub a:hover { background: var(--lime-2); }
.hdr-tools { display: flex; align-items: center; gap: 14px; }
.langs { display: flex; gap: 2px; }
.langs a { font-size: 13px; font-weight: 700; text-decoration: none; padding: 6px 6px; opacity: .65; }
.langs a[aria-current] { opacity: 1; box-shadow: inset 0 -2px 0 var(--sun); }
.hdr-call { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; text-decoration: none; }
.hdr-call svg { width: 16px; height: 16px; fill: currentColor; }
.hdr-book { min-height: 40px; padding: 0 18px; }
.hdr-menu { display: none; width: 44px; height: 44px; border: 0; background: none; position: relative; }
.hdr-menu > span:not(.sr) { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--ink); transition: transform .3s var(--ease); }
.hdr-menu > span:nth-child(1) { top: 17px; } .hdr-menu > span:nth-child(2) { top: 26px; }
.hdr-menu[aria-expanded="true"] > span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.hdr-menu[aria-expanded="true"] > span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }
.menu { position: fixed; inset: var(--hdr) 0 0; z-index: 49; background: var(--lime); overflow: auto; padding: 24px var(--gut) 40px; }
.menu > nav > ul > li { border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); padding: 12px 0; }
.menu > nav > ul > li > a { font: 400 26px/1.2 var(--serif); text-decoration: none; }
.menu li ul { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; }
.menu li ul a { font-size: 15px; color: var(--ink-2); text-decoration: none; display: inline-block; padding: 6px 0; }
.menu-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 24px; flex-wrap: wrap; }
.menu-foot a { font-weight: 700; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.menu-foot svg { width: 16px; fill: currentColor; }
.menu .langs a { font-size: 15px; padding: 10px 10px; }
@media (max-width: 1180px) { .hdr-call span { display: none; } }
@media (max-width: 1060px) { .hdr-nav, .hdr-tools .langs, .hdr-call { display: none; } .hdr-menu { display: block; } .hdr-tools { margin-left: auto; } }
@media (max-width: 420px) { .hdr-logo { width: 150px; } .hdr { gap: 10px; } .hdr-tools { gap: 6px; } .hdr-book { padding: 0 14px; } }

/* booking panel */
.book { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(22, 18, 14, .5); }
.book[hidden] { display: none; }
.book-in { position: relative; width: min(560px, 100%); background: var(--lime); padding: 34px 28px 24px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.5); }
.book-t { font: 400 30px/1.15 var(--serif); margin-bottom: 18px; }
.book-x { position: absolute; right: 8px; top: 8px; width: 44px; height: 44px; border: 0; background: none; font-size: 28px; line-height: 1; }
.book-f { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.book-f label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; }
.book-f input { font: 500 16px var(--sans); color: var(--ink); background: #fff; border: 1px solid var(--stone); border-radius: var(--r); min-height: 48px; padding: 0 12px; width: 100%; }
.book-f .btn { grid-column: 1 / -1; margin-top: 6px; }
.book-f .err input:invalid { border-color: #b3261e; }
.book-note { font-size: 13px; margin: 14px 0 0; color: var(--ink-2); }

/* ---------- the day: the signature ---------- */
.day { --wall: #ece0e6; --glow: #ffd9c2; --tint: #2a2333; --plate: #E38E4C; --sh: .9; --gx: 80%; --gy: 70%;
  position: relative; height: 820svh; background: var(--wall); }
.day-stage { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: minmax(380px, 44%) 1fr; overflow: hidden; }
.day-wall { position: relative; background: var(--wall); color: var(--tint); padding: calc(var(--hdr) + 3vh) clamp(24px, 3.4vw, 56px) 7vh; display: flex; flex-direction: column; isolation: isolate; }
.day-wall::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .4 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); }
.day-light { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(42% 36% at var(--gx) var(--gy), var(--glow), transparent 70%); opacity: .95; }
.day-dial { width: min(100%, calc((100svh - 400px) * 1.4)); margin: 0 auto; flex: none; }
.dial { width: 100%; height: auto; overflow: visible; }
.dial-plate { fill: var(--plate); transition: fill .4s; }
.dial-lines line { stroke: #1d1208; stroke-opacity: .16; stroke-width: .18; }
.dial-shadow { fill: #7d5a4d; }
.dial-pen { fill: #5a3b30; opacity: .45; }
.dial-nums text { font: 400 2.5px var(--serif); fill: #3a2414; fill-opacity: .55; text-anchor: middle; dominant-baseline: central; }
.dial-gap { fill: none; stroke: var(--plate); stroke-width: 1.1; stroke-linejoin: round; }
.dial-gnomon { fill: var(--ink); }
.dial-h { font: 600 2.3px var(--sans); fill: currentColor; text-anchor: middle; dominant-baseline: middle; }
.day-intro { position: relative; margin-top: auto; max-width: 30em; }
.day-h1 { font-size: clamp(54px, 6.4vw, 104px); line-height: .95; margin: 0 0 18px; letter-spacing: -.01em; }
.day-lede { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.5; margin-bottom: 22px; }
.day-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.day-hint { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; margin: 0; opacity: .8; }
.hint-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 0 rgba(227,142,76,.6); animation: pulse 2.4s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(227,142,76,0); } 100% { box-shadow: 0 0 0 0 rgba(227,142,76,0); } }
.day-steps { position: absolute; left: clamp(24px, 3.4vw, 56px); right: clamp(24px, 3.4vw, 56px); bottom: calc(7vh + 34px); }
.day-step { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; visibility: hidden; }
.day-time { font: 400 clamp(56px, 6vw, 96px)/1 var(--serif); margin: 0 0 8px; letter-spacing: -.02em; font-variant-numeric: lining-nums; }
.day-title { font-size: clamp(26px, 2.3vw, 38px); margin: 0 0 10px; }
.day-text { font-size: clamp(16px, 1.15vw, 19px); line-height: 1.55; margin: 0; max-width: 31em; }
.day-ticks { position: absolute; left: clamp(24px, 3.4vw, 56px); right: clamp(24px, 3.4vw, 56px); bottom: 3.2vh; display: flex; justify-content: space-between; gap: 4px;
  border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent); padding-top: 8px; opacity: 0; }
.day-ticks li { font-size: 12px; font-weight: 700; opacity: .5; transition: opacity .3s; font-variant-numeric: tabular-nums; position: relative; }
.day-ticks li.on { opacity: 1; }
.day-ticks li.on::before { content: ""; position: absolute; left: 0; right: 0; top: -9.5px; height: 2px; background: var(--sun); }
.day-photos { position: relative; overflow: hidden; background: #2a241f; }
.day-ph { position: absolute; inset: 0; margin: 0; opacity: 0; }
.day-ph:first-child { opacity: 1; }
.day-ph img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
.day-glow { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, color-mix(in srgb, var(--wall) 40%, transparent), transparent 18%); }
.day.is-night .dial-gap { stroke: var(--plate); }

/* no JS / reduced motion: a still, designed version: the day as a list */
.day.still { height: auto; }
.day.still .day-stage { position: relative; height: auto; display: block; }
.day.still .day-wall { min-height: auto; padding-bottom: 40px; }
.day.still .day-intro { margin-top: 24px; }
.day.still .day-steps, .day.still .day-ticks { display: none; }
.day.still .day-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.day.still .day-ph { position: relative; opacity: 1; aspect-ratio: 4/3; }
.day.still .day-ph img { transform: none; }
.day.still .day-glow { display: none; }

@media (max-width: 899px) {
  .day { height: 840svh; }
  .day-stage { grid-template-columns: 1fr; grid-template-rows: 53svh 1fr; }
  .day-photos { grid-row: 1; }
  .day-wall { grid-row: 2; padding: 14px var(--gut) 12px; z-index: 2; }
  .day-glow { background: linear-gradient(0deg, color-mix(in srgb, var(--wall) 45%, transparent), transparent 22%); }
  .day-dial { position: absolute; right: calc(var(--gut) - 14px); top: -21vw; width: 46vw; max-width: 230px; margin: 0; z-index: 2; filter: drop-shadow(0 10px 16px rgba(0,0,0,.22)); }
  .day-intro, .day-steps { padding-right: 0; }
  .day-intro .kicker { max-width: 52%; }
  .day-intro { margin-top: 0; padding-top: 4px; }
  .day-h1 { font-size: clamp(46px, 13vw, 64px); margin-bottom: 10px; }
  .day-lede { font-size: 16px; margin-bottom: 12px; }
  .day-cta { display: none; }
  .day-steps { left: var(--gut); right: var(--gut); top: 16px; bottom: auto; }
  .day-step { top: 0; bottom: auto; }
  .day-time { font-size: 50px; margin-bottom: 4px; }
  .day-title { font-size: 25px; margin-bottom: 6px; }
  .day-text { font-size: 15.5px; line-height: 1.5; }
  .day-ticks { left: var(--gut); right: var(--gut); bottom: 10px; }
  .day-ticks li { font-size: 10.5px; }
  .day.still .day-photos { grid-template-columns: repeat(2, 1fr); }
  .day.still .day-dial { position: relative; top: 0; right: 0; width: 60vw; margin: 0 auto; filter: none; }
}
@media (max-width: 899px) and (max-height: 700px) { .day-text { font-size: 15px; } .day-time { font-size: 44px; } }

/* hours of the house */
.hours { background: var(--night); color: #efe9df; padding: clamp(70px, 9vw, 130px) var(--gut); }
.hours .sec-t { max-width: var(--max); margin: 0 auto 40px; }
.hours-list { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid rgba(255,255,255,.22); }
.hours-list li { padding: 22px 16px 22px 0; border-right: 1px solid rgba(255,255,255,.12); display: flex; flex-direction: column-reverse; gap: 6px; }
.hours-list li + li { padding-left: 16px; }
.hours-list li:last-child { border-right: 0; }
.hours-t { font: 400 clamp(30px, 3vw, 46px)/1 var(--serif); color: var(--bulb); font-variant-numeric: lining-nums; }
.hours-k { font-size: 14px; font-weight: 600; opacity: .85; }
.hours-note { max-width: var(--max); margin: 30px auto 0; font-size: 15px; opacity: .8; }
.hours-note { padding-right: 30%; }
@media (max-width: 899px) { .hours-list { grid-template-columns: repeat(2, 1fr); } .hours-list li { border-bottom: 1px solid rgba(255,255,255,.12); padding-left: 0 !important; }
  .hours-list li:nth-child(even) { border-right: 0; padding-left: 16px !important; } .hours-note { padding-right: 0; } }

/* rooms chooser */
.rooms { background: linear-gradient(#f6f2ea, #efe7da); padding: clamp(80px, 10vw, 150px) var(--gut); }
.rooms > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.rooms-head { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 60px; align-items: end; margin-bottom: 40px; }
.rooms-head .kicker { grid-column: 1 / -1; margin: 0; }
.rooms-head .sec-t { margin: 0; }
.rooms-filter { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-bottom: 26px; }
.seg { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.seg > span { font-size: 13px; font-weight: 700; margin-right: 6px; color: var(--ink-2); }
.seg button { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); background: transparent; font-size: 14px; font-weight: 600; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--lime); border-color: var(--ink); }
.rooms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 26px; }
.room-card { display: flex; flex-direction: column; text-decoration: none; transition: opacity .35s, filter .35s; }
.room-card.dim { opacity: .28; filter: grayscale(.8); }
.room-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--lime-2); }
.room-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.room-card:hover .room-img img { transform: scale(1.04); }
.room-body { display: grid; gap: 6px; padding-top: 16px; }
.room-house { font-size: 13px; font-weight: 700; color: var(--sun-ink); }
.room-name { font: 400 clamp(24px, 2vw, 30px)/1.15 var(--serif); }
.room-spec { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 14.5px; color: var(--ink-2); border-top: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); padding-top: 10px; margin-top: 4px; }
.room-spec > span { padding-right: 12px; margin-right: 12px; border-right: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); }
.room-spec > span:last-child { border: 0; }
.room-spec b { color: var(--ink); font-weight: 800; }
@media (max-width: 1000px) { .rooms-grid { grid-template-columns: repeat(2, 1fr); } .rooms-head { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .rooms-grid { grid-template-columns: 1fr; } }

/* four names */
.names { background: var(--green); color: #eef3ee; padding: clamp(80px, 10vw, 150px) var(--gut); position: relative; overflow: hidden; }
.names-in { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 5fr 7fr; gap: 40px 80px; }
.names .kicker { color: #bfe0cf; }
.names-head { position: sticky; top: calc(var(--hdr) + 40px); align-self: start; }
.names-list { counter-reset: n; }
.nm { padding: 28px 0 34px; border-top: 1px solid rgba(255,255,255,.2); display: grid; grid-template-columns: 90px 1fr; gap: 4px 20px; }
.nm-year { font: 400 22px/1.3 var(--serif); color: #bfe0cf; padding-top: 10px; font-variant-numeric: lining-nums; }
.nm-name { font: 400 clamp(34px, 4vw, 62px)/1.05 var(--serif); position: relative; }
.nm-text { grid-column: 2; margin: 10px 0 0; max-width: 34em; font-size: 16.5px; opacity: .88; }
.nm:not(:last-child) .nm-name::after { content: ""; position: absolute; left: 0; top: 55%; height: 2px; width: 100%; background: currentColor; opacity: .55; transform: scaleX(var(--strike, 0)); transform-origin: left; }
.nm:last-child .nm-name { color: #ffd2ad; }
.names-docs { grid-column: 1; grid-row: 2; align-self: end; display: grid; gap: 18px; justify-items: start; }
.doc { margin: 0; background: #fff; padding: 6px; box-shadow: 0 20px 40px -24px rgba(0,0,0,.6); }
.doc-illus { max-width: min(100%, 410px); }
@media (max-width: 899px) { .doc-illus { max-width: 290px; } }
@media (max-width: 899px) { .names-in { grid-template-columns: 1fr; } .names-head { position: static; } .names-docs { grid-row: auto; } .nm { grid-template-columns: 60px 1fr; } .nm-year { font-size: 18px; } }

/* services */
.svcs { padding: clamp(80px, 10vw, 150px) var(--gut); background: #f7f1e6; }
.svcs .sec-t { max-width: var(--max); margin: 0 auto 50px; }
.svcs-grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 30px; align-items: start; }
.svc a { display: block; text-decoration: none; }
.svc-img { display: block; overflow: hidden; aspect-ratio: 4 / 5; margin-bottom: 18px; }
.svc-0 .svc-img { aspect-ratio: 5 / 6; }
.svc-1 { margin-top: 90px; } .svc-2 { margin-top: 30px; }
.svc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.svc a:hover img { transform: scale(1.04); }
.svc h3 { font-size: clamp(28px, 2.4vw, 38px); margin-bottom: 10px; }
.svc p { color: var(--ink-2); margin-bottom: 14px; }
@media (max-width: 899px) { .svcs-grid { grid-template-columns: 1fr; gap: 50px; } .svc-1, .svc-2 { margin-top: 0; } .svc-img, .svc-0 .svc-img { aspect-ratio: 4 / 3; } }

/* a house that lives on its sun */
.sun { background: var(--sun); color: #1d1208; padding: clamp(80px, 10vw, 150px) var(--gut); }
.sun-in { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.sun .sec-text { color: #2b1a0c; }
.sun-dial { --plate: #f6eadb; background: transparent; }
.sun-dial .dial-plate { fill: #f4e7d6; }
.sun-dial .dial-gap { stroke: #f4e7d6; }
.sun-dial .dial-lines line { stroke-opacity: .25; }
.sun-now { font-size: 15px; font-weight: 700; margin-top: 10px; min-height: 1.5em; }
.sun-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; margin: 30px 0 34px; }
.sun-facts li { border-top: 1.5px solid rgba(29, 18, 8, .35); padding: 14px 0 18px; }
.sun-facts b { display: block; font: 400 clamp(30px, 3vw, 44px)/1.1 var(--serif); }
.sun-facts span { font-size: 15px; }
@media (max-width: 899px) { .sun-in { grid-template-columns: 1fr; gap: 20px; } .sun-dial { max-width: 420px; } }

/* compass of places */
.compass { background: var(--dusk); color: #f1ecf6; padding: clamp(80px, 10vw, 150px) var(--gut); display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px 60px; align-items: center; }
.compass > * { min-width: 0; }
.compass .sec-text { color: #d9d2e6; }
.compass-copy { max-width: 520px; justify-self: end; }
.compass-map { position: relative; aspect-ratio: 1; width: min(100%, 760px); container-type: inline-size; }
.compass-rings { position: absolute; inset: 0; width: 100%; height: 100%; }
.compass-rings circle { fill: none; stroke: rgba(255,255,255,.18); stroke-width: .2; }
.compass-rings text { font: 600 1.7px var(--sans); fill: rgba(255,255,255,.55); text-anchor: middle; }
.compass-rings .cp-n { font: 400 3px var(--serif); fill: rgba(255,255,255,.75); dominant-baseline: middle; }
.compass-home { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; background: var(--sun); box-shadow: 0 0 0 6px rgba(227,142,76,.25); }
.pl a { text-decoration: none; }
.pl-dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #f1ecf6; transition: transform .2s, background-color .2s; }
.pl-lab { position: absolute; transform: translateY(-50%); white-space: nowrap; line-height: 1.2; }
.pl-name { font-size: 14px; font-weight: 700; }
.pl-km { font-size: 12px; opacity: .7; }
.pl a:hover .pl-dot, .pl a:focus-visible .pl-dot { transform: scale(1.4); background: var(--sun); }
.pl a:hover .pl-name { text-decoration: underline; }
@media (max-width: 899px) { .compass { grid-template-columns: 1fr; } .compass-copy { justify-self: start; } .pl-name { font-size: 11px; } .pl-km { display: none; } }

/* reviews */
.revs { background: #f3ece2; padding: clamp(70px, 8vw, 120px) var(--gut); }
.revs > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.revs-score { display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 15px; margin-bottom: 36px; }
.revs-score a { text-decoration: none; } .revs-score b { font: 400 26px var(--serif); }
.revs-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.revs blockquote { margin: 0; border-top: 1.5px solid var(--ink); padding-top: 18px; }
.revs blockquote p { font: 400 19px/1.5 var(--serif); }
.revs blockquote footer { font-size: 14px; font-weight: 700; color: var(--ink-2); }
@media (max-width: 899px) { .revs-list { grid-template-columns: 1fr; } }

/* come and stay */
.come { position: relative; color: #f4ede2; background: var(--night); padding: clamp(90px, 11vw, 170px) var(--gut) clamp(70px, 8vw, 120px); isolation: isolate; overflow: hidden; }
.come-bg { position: absolute; inset: 0; z-index: -1; }
.come-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .32; }
.come-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,26,46,.55), rgba(22,26,46,.92) 70%); }
.come-in { max-width: var(--max); margin: 0 auto; }
.come .sec-text { color: #e2dbd0; }
.come-book { margin: 34px 0 60px; background: rgba(244, 239, 231, .96); color: var(--ink); padding: 18px; max-width: 980px; }
.book-inline { grid-template-columns: repeat(4, 1fr) auto; align-items: end; }
.book-inline .btn { grid-column: auto; margin: 0; }
.come-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px 80px; }
.come h3 { font-size: 28px; }
.come-grid p { color: #e2dbd0; }
.come-grid b { color: #fff; }
.come-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.come-acts .btn-line { color: #fff; }
.come-groups a { color: var(--bulb); }
@media (max-width: 899px) { .book-inline { grid-template-columns: 1fr 1fr; } .book-inline .btn { grid-column: 1 / -1; } .come-grid { grid-template-columns: 1fr; } }

/* footer */
.ftr { background: #efe8dc; padding: 70px var(--gut) 26px; font-size: 15px; }
.ftr-in { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.3fr; gap: 40px; }
.logo-stack { width: 150px; height: auto; }
.ftr-brand p { display: none; }
.ftr-h { font-weight: 800; margin-bottom: 10px; }
.ftr-col ul li { margin-bottom: 4px; }
.ftr-col a { text-decoration: none; } .ftr-col a:hover { text-decoration: underline; }
.news { display: flex; gap: 8px; margin: 12px 0 8px; flex-wrap: wrap; }
.news input { flex: 1 1 180px; min-height: 46px; border: 1px solid var(--stone); background: #fff; padding: 0 12px; font: 500 16px var(--sans); border-radius: var(--r); }
.ftr-links { display: flex; gap: 16px; margin-top: 16px; }
.ftr-links a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.ftr-links svg { width: 22px; height: 22px; fill: currentColor; }
.ftr-base { max-width: var(--max); margin: 50px auto 0; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); display: grid; gap: 10px; justify-items: start; }
.ftr-base ul { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; }
.ftr-base a { text-decoration: none; }
.note { margin-top: 10px; padding: 12px 14px; background: #fff7ec; border-left: 3px solid var(--sun); font-size: 14.5px; color: var(--ink); }
@media (max-width: 1000px) { .ftr-in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ftr-in { grid-template-columns: 1fr; } }

/* motion helpers */
.rv { opacity: 1; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

.nw { white-space: nowrap; }
/* ---------- inner pages ---------- */
.phead { display: grid; grid-template-columns: minmax(360px, 44%) 1fr; min-height: min(78svh, 760px); background: var(--wall); color: var(--tint); }
.phead-wall { position: relative; padding: calc(var(--hdr) + 26px) clamp(24px, 3.4vw, 56px) 48px; display: flex; flex-direction: column; justify-content: flex-end; }
.phead-dial { position: absolute; right: clamp(20px, 3vw, 48px); top: calc(var(--hdr) + 20px); width: clamp(120px, 12vw, 190px); }
.phead h1 { font-size: clamp(42px, 5vw, 80px); line-height: 1; margin: 30px 0 16px; max-width: 12em; }
.phead-lede { font-size: clamp(17px, 1.3vw, 20px); max-width: 34em; margin: 0; }
.phead-ph { position: relative; overflow: hidden; }
.phead-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phead:not(:has(.phead-ph)) { grid-template-columns: 1fr; min-height: 0; }
.phead:not(:has(.phead-ph)) .phead-wall { padding-bottom: 40px; max-width: var(--max); width: 100%; margin: 0 auto; }
.phead[data-hour="23"] .dial-plate { fill: #8a5634; } .phead[data-hour="23"] .dial-gap { stroke: #8a5634; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; font-weight: 600; }
.crumbs li + li::before { content: "/"; margin-right: 10px; opacity: .45; }
.crumbs a { text-decoration: none; opacity: .8; }
.spec { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 0 26px; margin: 22px 0 0; }
.spec li { display: grid; gap: 2px; } .spec b { font: 400 30px/1.1 var(--serif); } .spec span { font-size: 13px; font-weight: 600; opacity: .8; }
.phead-acts { margin: 22px 0 0; }
@media (max-width: 899px) {
  .phead { grid-template-columns: 1fr; min-height: 0; }
  .phead-ph { order: -1; aspect-ratio: 4 / 3; margin-top: var(--hdr); }
  .phead-wall { padding: 22px var(--gut) 34px; }
  .phead:not(:has(.phead-ph)) .phead-wall { padding-top: calc(var(--hdr) + 22px); }
  .phead-dial { top: auto; bottom: calc(100% - 34px); width: 108px; right: var(--gut); filter: drop-shadow(0 8px 14px rgba(0,0,0,.2)); }
  .phead:not(:has(.phead-ph)) .phead-dial { display: none; }
  .phead h1 { margin-top: 18px; }
  .spec { gap: 0 18px; } .spec b { font-size: 24px; }
}
.blk { max-width: var(--max); margin: 0 auto; padding: clamp(56px, 7vw, 110px) var(--gut) 0; display: grid; grid-template-columns: 5fr 7fr; gap: 30px 70px; align-items: start; }
.blk-r { grid-template-columns: 7fr 5fr; } .blk-r .blk-txt { order: 2; }
.blk h2 { font-size: clamp(30px, 3vw, 46px); }
.blk-txt p { color: var(--ink-2); }
.blk-txt { position: sticky; top: calc(var(--hdr) + 30px); }
.blk-txt:only-child { position: static; grid-column: 1 / -1; max-width: 46em; }
.pgal { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.pgal figure { margin: 0; overflow: hidden; background: var(--lime-2); }
.pgal img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.pgal-1 { grid-template-columns: 1fr; }
.pgal-3 figure:first-child, .pgal-2 figure:first-child { grid-column: 1 / -1; }
.pgal-3 figure:first-child img, .pgal-2 figure:first-child img { aspect-ratio: 16 / 10; }
.pgal-4 figure:first-child { grid-column: 1 / -1; }
.pgal-4 figure:first-child img { aspect-ratio: 16 / 9; }
.pgal-4 figure:nth-child(n+2) { } .pgal-4 { grid-template-columns: repeat(3, 1fr); }
.dots li { position: relative; padding-left: 20px; margin-bottom: 6px; }
.dots li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; background: var(--sun); }
.pdf { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin: 14px 0 0; border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); text-decoration: none; font-weight: 700; max-width: 440px; transition: border-color .2s; }
.pdf:hover { border-color: var(--sun); }
.pdf svg { width: 26px; height: 26px; fill: var(--sun-ink); flex: none; } .pdf small { margin-left: auto; font-size: 12px; opacity: .7; }
@media (max-width: 899px) { .blk, .blk-r { grid-template-columns: 1fr; } .blk-r .blk-txt { order: 0; } .blk-txt { position: static; } .pgal-4 { grid-template-columns: 1fr 1fr; } .pgal-4 figure:first-child { grid-column: 1 / -1; } }
.outro { max-width: var(--max); margin: 60px auto 0; padding: 0 var(--gut); font: 400 clamp(26px, 2.6vw, 40px)/1.2 var(--serif); }
.bookband { padding: clamp(70px, 8vw, 120px) var(--gut); }
.bookband-in { max-width: 1000px; margin: 0 auto; background: var(--night); color: #f4ede2; padding: clamp(24px, 3vw, 40px); }
.bookband-t { font: 400 clamp(28px, 2.6vw, 40px)/1.1 var(--serif); margin-bottom: 18px; }
.bookband .book-f label span { color: #f4ede2; }
.bookband a { color: var(--bulb); }
.room-main { max-width: var(--max); margin: 0 auto; padding: clamp(56px, 7vw, 100px) var(--gut) 40px; display: grid; grid-template-columns: 7fr 5fr; gap: 40px 80px; }
.room-txt p { font: 400 clamp(20px, 1.6vw, 25px)/1.45 var(--serif); }
.room-eq h2 { font-size: 26px; }
.room-gal { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.room-gal figure { margin: 0; overflow: hidden; } .room-gal img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
.room-gal .wide { grid-column: span 2; grid-row: span 2; } .room-gal .wide img { aspect-ratio: auto; height: 100%; }
@media (max-width: 899px) { .room-main { grid-template-columns: 1fr; } .room-gal { grid-template-columns: 1fr 1fr; } .room-gal .wide { grid-column: 1 / -1; grid-row: auto; } .room-gal .wide img { aspect-ratio: 3 / 2; } }
.others { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut) clamp(70px, 8vw, 120px); }
.others h2 { font-size: 32px; }
.others-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.others-row a { text-decoration: none; display: grid; gap: 6px; } .others-row img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.others-row span { font: 400 19px/1.2 var(--serif); } .others-row small { font-size: 13px; color: var(--ink-2); }
@media (max-width: 899px) { .others-row { grid-template-columns: 1fr 1fr; } }
.rooms-page { padding-top: 60px; }
.cmp-t { font-size: clamp(30px, 3vw, 44px); margin-top: 80px; }
.cmp-wrap { overflow-x: auto; }
.cmp { border-collapse: collapse; width: 100%; min-width: 820px; font-size: 15px; }
.cmp th, .cmp td { text-align: left; padding: 12px 14px 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); vertical-align: top; }
.cmp thead th { font: 400 18px/1.2 var(--serif); } .cmp thead a { text-decoration: none; }
.cmp tbody th { font-weight: 700; color: var(--ink-2); font-size: 13px; }
.hub { max-width: var(--max); margin: 0 auto; padding: clamp(56px, 7vw, 110px) var(--gut); display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px 30px; }
.hub-card { display: grid; gap: 8px; text-decoration: none; } .hub-card img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.hub-t { font: 400 clamp(28px, 2.4vw, 38px)/1.1 var(--serif); margin-top: 8px; } .hub-p { color: var(--ink-2); } .hub-card .more { justify-self: start; }
.services .hub, .hub:has(.hub-card:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 899px) { .hub, .hub:has(.hub-card:nth-child(3):last-child) { grid-template-columns: 1fr; } }
.names-page { margin-top: 0; }
.names-page .names-head { position: sticky; }
.doc-small { max-width: 371px; } .doc figcaption { font-size: 13px; color: var(--ink-2); padding: 6px 2px 0; }
.about { max-width: var(--max); margin: 0 auto; padding: clamp(56px, 7vw, 110px) var(--gut); display: grid; grid-template-columns: 5fr 7fr; gap: 40px 70px; align-items: center; }
.about-ph img { width: 100%; } .about-txt p { color: var(--ink-2); } .sign { font: 400 22px var(--serif); color: var(--ink) !important; }
@media (max-width: 899px) { .about { grid-template-columns: 1fr; } }
.rules { max-width: 900px; margin: 0 auto; padding: clamp(56px, 7vw, 110px) var(--gut); }
.rules h2 { font-size: clamp(30px, 3vw, 44px); }
.gallery { max-width: 1600px; margin: 0 auto; padding: 50px var(--gut) 100px; columns: 4 280px; column-gap: 10px; }
.g-it { display: block; margin-bottom: 10px; break-inside: avoid; } .g-it img { width: 100%; }
.lb { position: fixed; inset: 0; z-index: 90; background: rgba(15, 12, 10, .94); display: grid; place-items: center; }
.lb[hidden] { display: none; }
.lb img { max-width: 92vw; max-height: 88svh; width: auto; height: auto; }
.lb button { position: absolute; border: 0; background: none; color: #fff; font-size: 40px; width: 56px; height: 56px; }
.lb-x { top: 10px; right: 10px; } .lb-p { left: 6px; top: 50%; } .lb-n { right: 6px; top: 50%; }
.contact { max-width: var(--max); margin: 0 auto; padding: clamp(56px, 7vw, 110px) var(--gut); display: grid; grid-template-columns: 1fr 1fr; gap: 50px 80px; }
.contact h2 { font-size: 36px; } .contact h3 { font-size: 24px; margin-top: 40px; }
.cform { display: grid; gap: 14px; align-content: start; }
.cform .two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cform label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; }
.cform input, .cform textarea { font: 500 16px var(--sans); border: 1px solid var(--stone); background: #fff; border-radius: var(--r); min-height: 48px; padding: 10px 12px; width: 100%; color: var(--ink); }
.cform .btn { justify-self: start; }
@media (max-width: 899px) { .contact, .cform .two { grid-template-columns: 1fr; } }
.article { max-width: var(--max); margin: 0 auto; padding: clamp(50px, 6vw, 90px) var(--gut) 90px; display: grid; grid-template-columns: 260px 1fr; gap: 60px; }
.art-solo { grid-template-columns: 1fr; max-width: 900px; }
.near { position: sticky; top: calc(var(--hdr) + 24px); align-self: start; }
.near ol { border-top: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); }
.near a { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); text-decoration: none; font-size: 15px; font-weight: 600; }
.near small { color: var(--ink-2); font-weight: 500; }
.art { max-width: 44em; } .art h2 { font-size: clamp(30px, 3vw, 44px); margin-top: 1.4em; } .art h3 { font-size: clamp(24px, 2vw, 30px); margin-top: 1.4em; } .art h4 { font-size: 20px; margin-top: 1.2em; }
.art p { color: var(--ink-2); }
.art-fig { margin: 26px 0 6px; } .art-fig img { width: 100%; }
.cap { font-size: 13px; font-weight: 700; color: var(--ink-2); margin-top: 0; }
.anchor { position: relative; top: calc(-1 * var(--hdr) - 20px); display: block; }
.legal .art p, .legal .art li { font-size: 15.5px; }
@media (max-width: 899px) { .article { grid-template-columns: 1fr; gap: 30px; } .near { position: static; } .near ol { columns: 2; column-gap: 20px; } }
/* the strike follows each line of a wrapped name */
.nm:not(:last-child) .nm-name::after { display: none; }
.nm-name > span { background: linear-gradient(currentColor, currentColor) no-repeat 0 60% / calc(var(--strike, 0) * 100%) 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.nm:last-child .nm-name > span { background: none; }
.hours-t { white-space: nowrap; }
@media (max-width: 899px) { .hours-t { font-size: clamp(24px, 7vw, 32px); } }
.book-f label, .book-f input { min-width: 0; } .book-f input[type=date] { -webkit-appearance: none; appearance: none; } .bookband { padding-left: max(12px, var(--gut)); padding-right: max(12px, var(--gut)); } .bookband-in { padding: clamp(18px, 3vw, 40px); }

.sun-dial { position: relative; }
.sun-dial { display: grid; grid-template-columns: 1fr; }
.sun-dial .dial { order: 0; }
.sun-real { order: 2; display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: center; margin: 26px 0 0; }
.sun-real img { width: 150px; height: auto; border: 5px solid #f4e7d6; }
.sun-real figcaption { font-size: 14px; font-weight: 700; line-height: 1.35; color: #2b1a0c; }
.sun-now { order: 1; }
.day-h1 { white-space: nowrap; }
@media (max-width: 899px) { .sun-real { grid-template-columns: 120px 1fr; } .sun-real img { width: 120px; } }

/* ---------- fix pass after the independent look ---------- */
/* their real sundial, at the opening */
.day-real { position: absolute; left: 26px; bottom: 26px; z-index: 3; margin: 0; width: 186px; background: #f4efe7; padding: 7px 7px 9px; box-shadow: 0 22px 40px -22px rgba(0,0,0,.6); }
.day-real img { width: 100%; height: auto; display: block; }
.day-real figcaption { font-size: 13px; font-weight: 700; line-height: 1.3; padding: 7px 2px 0; color: var(--ink); }
.day.still .day-real { display: none; }
/* the hours of the house read as the dial's legend */
.hours-list li { position: relative; padding-top: 74px !important; }
.hours-dial { position: absolute; top: 18px; left: 0; width: 64px; }
.hours-list li + li .hours-dial { left: 16px; }
.hours-dial .dial-gap { stroke: var(--plate); }
.amen { max-width: var(--max); margin: 26px auto 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; font-weight: 700; color: #efe9df; }
.amen li::before { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--sun); margin-right: 9px; vertical-align: 2px; }
/* services carry their hour */
.svc-hour { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.svc-hour .dial { width: 54px; }
.svc-hour b { font: 400 22px var(--serif); }
/* come and stay: the next morning */
.come { background: #e8dbe2; color: var(--ink); }
.come-bg img { opacity: .55; }
.come-bg::after { background: linear-gradient(180deg, rgba(232,219,226,.35), rgba(232,219,226,.94) 55%); }
.come .sec-text, .come-grid p { color: var(--ink-2); }
.come-grid b { color: var(--ink); }
.come-acts .btn-line { color: var(--ink); }
.come-groups a { color: var(--sun-ink); }
.come-book { background: rgba(255,255,255,.92); box-shadow: 0 30px 60px -40px rgba(40,20,40,.5); }
/* names: the illustration sits under the title */
.names-head .doc-illus { margin: 36px 0 18px; }
.names-docs { display: none; }
/* footer logo shows its tagline */
.logo-stack { overflow: visible; width: 170px; }
.others-row span { min-height: 2.4em; }
/* inner heads: the dial and its hour sit above the title */
.phead-dial { position: static; display: flex; align-items: center; gap: 14px; width: auto; margin: 26px 0 0; }
.phead-dial .dial { width: clamp(150px, 13vw, 220px); }
.phead-time { order: 2; font: 400 clamp(30px, 2.6vw, 42px)/1 var(--serif); opacity: .75; }
.phead-wall { justify-content: flex-end; }
.pgal-2 { grid-template-columns: 1fr 1fr; }
.pgal-2 figure:first-child { grid-column: auto; }
.pgal-2 figure:first-child img { aspect-ratio: 4 / 3; }
.doc-small { margin-top: 24px; }
.film { max-width: var(--max); margin: 0 auto; padding: clamp(56px, 7vw, 100px) var(--gut) 0; display: grid; grid-template-columns: 5fr 7fr; gap: 30px 70px; align-items: center; }
.film h2 { font-size: clamp(30px, 3vw, 46px); } .film p { color: var(--ink-2); }
.film video { width: 100%; height: auto; background: #000; display: block; }
@media (max-width: 899px) {
  .day-real { left: 12px; top: calc(var(--hdr) + 12px); bottom: auto; width: 116px; padding: 5px 5px 6px; }
  .day-real figcaption { font-size: 10.5px; }
  .day-dial { width: 60vw; max-width: 280px; top: -33vw; right: calc(var(--gut) - 18px); }
  .day-dial .dial-shadow { stroke: #7d5a4d; stroke-width: .55; }
  .day-steps { top: 30px; }
  .day-intro { padding-top: 26px; }
  .day-intro .kicker { max-width: 58%; }
  .day-cta { display: flex; margin: 0; } .day-cta .btn-line { display: none; }
  .day-hint { display: none; }
  .phead-dial { margin-top: 14px; } .phead-dial .dial { width: 120px; } .phead-time { font-size: 28px; }
  .phead:not(:has(.phead-ph)) .phead-dial { display: flex; }
  .film { grid-template-columns: 1fr; }
  .hours-dial { width: 52px; }
  .hours-list li { padding-top: 64px !important; }
  .hours-list li:nth-child(even) .hours-dial { left: 16px; } .hours-list li:nth-child(odd) .hours-dial { left: 0; }
}
.doc-small { max-width: 250px; } @media (max-width: 899px) { .doc-small { max-width: 180px; } }

/* second look */
.hours { background: #1b2036; }
@media (max-width: 899px) {
  .day-dial { width: 54vw; max-width: 260px; top: -24vw; }
  .day-dial .dial-clip { clip-path: url(#sun-plate); }
  .day-steps { top: 10px; }
  .day-time { position: absolute; top: 0; left: 0; }
  .day-step { padding-top: calc(19vw + 6px); }
  .day-intro { padding-top: 0; }
  .day-intro .kicker { max-width: 42%; min-height: calc(17vw); margin-bottom: 8px; }
  .names:not(.names-page) .doc-illus { display: none; }
  .day-real { width: 112px; }
}