/* Impluvium. Limestone and water: warm pale stone, deep teal ink, and one field of pool
   colour the page works out for itself. Ysabeau throughout; roman on the stone, italic in
   the water and for everything named. */

@font-face { font-family: "Ysabeau"; font-style: normal; font-weight: 1 1000; font-display: swap; src: url("/assets/fonts/specimen/ysabeau-var.woff2") format("woff2"); }
@font-face { font-family: "Ysabeau"; font-style: italic; font-weight: 1 1000; font-display: swap; src: url("/assets/fonts/specimen/ysabeau-var-italic.woff2") format("woff2"); }

body.spec-impluvium { margin: 0; background: #E8E2D6; }
.spec-impluvium #spec-main { background: #E8E2D6; }

.im-site {
  --im-stone: #E8E2D6;
  --im-stone-hi: #F2EDE3;
  --im-stone-lo: #D8CFBF;
  --im-ink: #0D2630;
  --im-ink-2: #35505B;
  --im-teal: #0C8FA0;
  --im-teal-text: #0A6F7D;
  --im-tomato: #E4573A;
  --im-pale: #F4F1EA;
  --im-w045: #A6D3D9;
  --im-w12: #6FC7D2;
  --im-w19: #4EBDCC;
  --im-sans: "Ysabeau", "Gill Sans", "Seravek", "Segoe UI", system-ui, sans-serif;
  --im-m: clamp(16px, 5vw, 96px);
  --im-gut: clamp(16px, 2vw, 32px);
  --im-nav-h: 56px;
  --im-geo: cubic-bezier(.3, 0, .1, 1);
  --im-col: cubic-bezier(.22, .61, .12, 1);
  --im-sec: clamp(72px, 10vw, 168px);
  background: var(--im-stone);
  color: var(--im-ink);
  font: 420 clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem)/1.62 var(--im-sans);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
.im-site *, .im-site *::before, .im-site *::after { box-sizing: border-box; }
.im-site :where(h1, h2, h3, p, ul, ol, figure, fieldset) { margin: 0; }
.im-site :where(ul, ol) { padding: 0; list-style: none; }
.im-site img { display: block; max-width: 100%; height: auto; }
.im-site em { font-style: italic; }
.im-site a { color: var(--im-teal-text); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.im-site :focus-visible { outline: 2px solid var(--im-teal); outline-offset: 3px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--im-ink) 55%, transparent); }
.im-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.im-wrap { max-width: calc(1320px + 2 * var(--im-m)); margin: 0 auto; padding: 0 var(--im-m); }

/* ── the mark: an impluvium in plan ─────────────────────────────────────────────────────────── */
.im-mark { display: block; flex: none; overflow: visible; }
.im-mk-roof { fill: none; stroke: var(--im-ink); stroke-width: 2; }
.im-mk-fall { fill: none; stroke: var(--im-ink); stroke-width: 1.5; stroke-linecap: square; }
.im-mk-basin { fill: var(--im-teal); }
.im-mk-glint { fill: none; stroke: var(--im-pale); stroke-width: 1; }

/* ── the nav: a length of coping ────────────────────────────────────────────────────────────── */
.im-nav {
  position: sticky; top: var(--bar-h, 40px); z-index: 800;
  display: flex; align-items: center; gap: 24px;
  height: var(--im-nav-h); padding: 0 var(--im-m);
  background: color-mix(in srgb, var(--im-stone-hi) 94%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--im-ink) 40%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--im-ink) 40%, transparent);
  box-shadow: 0 1px 0 rgb(255 255 255 / .5), 0 6px 14px -8px rgb(13 38 48 / .35);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.im-brand { display: flex; align-items: center; gap: 10px; color: var(--im-ink) !important; text-decoration: none; font: 620 1.0625rem/1 var(--im-sans); letter-spacing: 0.01em; margin-right: auto; }
.im-links { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 36px); }
.im-links a { color: var(--im-ink); text-decoration: none; font: 560 0.9375rem/1 var(--im-sans); letter-spacing: 0.01em; padding: 10px 0; background: linear-gradient(var(--im-teal), var(--im-teal)) 0 calc(100% - 4px) / 0 1.5px no-repeat; transition: background-size .4s var(--im-geo); }
.im-links a:hover { background-size: 100% 1.5px; }
.im-links .im-talk-link { padding: 10px 16px; border: 1.5px solid var(--im-ink); background: none; transition: background-color .3s, color .3s; }
.im-links .im-talk-link:hover { background: var(--im-ink); color: var(--im-stone-hi); }
.im-menu { display: none; }

/* ── the hero: straight down onto the pool ──────────────────────────────────────────────────── */
.im-hero {
  --im-ar: 1.7778; --im-zx: 1.14; --im-fx: 0; --im-fy: 0.6;
  --im-hink: var(--im-ink); --im-hink-2: var(--im-ink-2);
  position: relative; isolation: isolate;
  display: grid;
  grid-template-columns: var(--im-m) minmax(0, var(--im-colw, 480px)) 1fr;
  grid-template-rows: auto auto auto 1fr;
  grid-template-areas: ". head ." ". tiles ." ". hour ." ". cap .";
  min-height: max(620px, calc(100svh - var(--bar-h, 40px) - var(--im-nav-h)));
  padding: var(--im-top, clamp(40px, 16svh, 170px)) 0 clamp(24px, 4svh, 40px);
  background: #CFC6B6;
  color: var(--im-hink);
  scroll-margin-top: calc(var(--bar-h, 40px) + var(--im-nav-h));
  --im-colw: clamp(300px, calc(38.96vw - var(--im-m) - 28px), 520px);
}
.im-photo { position: absolute; inset: 0; overflow: hidden; container-type: size; z-index: -1; }
.im-plate {
  --pw: max(calc(var(--im-zx) * 100cqw), calc(100cqh * var(--im-ar)));
  position: absolute; width: var(--pw); height: calc(var(--pw) / var(--im-ar));
  left: calc((100cqw - var(--pw)) * var(--im-fx));
  top: calc((100cqh - var(--pw) / var(--im-ar)) * var(--im-fy));
}
.im-plate picture, .im-plate img, .im-still { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.im-still { display: none; }
.im-site.im-2d .im-still { display: block; }
.im-if-rip { display: none; }
.im-site.im-rip .im-if-rip { display: inline; }
.im-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; touch-action: pan-y; cursor: crosshair; outline: none; }
.im-site.im-live .im-gl { opacity: 1; }
.im-site.im-live .im-plate picture, .im-site.im-2d .im-plate picture { visibility: hidden; }
.im-gl:focus-visible { box-shadow: inset 0 0 0 2px var(--im-teal); }
.im-ring { position: absolute; left: 0; top: 0; width: 28px; height: 28px; margin: -14px 0 0 -14px; border: 2px solid var(--im-teal); border-radius: 50%; box-shadow: 0 0 0 1px rgb(244 241 234 / .6); opacity: 0; pointer-events: none; transition: opacity .3s; transform: translate(var(--rx, 60vw), var(--ry, 50%)); }
.im-gl:focus-visible ~ .im-ring { opacity: 1; }

/* the name, cut into the coping at the head of the step */
.im-cut {
  --cx: 0.3623; --cy: 0.6858;
  position: absolute; left: calc(var(--cx) * 100%); top: calc(var(--cy) * 100%);
  transform: translate(-50%, -50%) rotate(-90deg);
  font: 620 11px/1 var(--im-sans); letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap;
  color: rgb(96 76 52 / .2);
  text-shadow: var(--im-cut-sh, -0.6px 0 0 rgb(255 252 244 / .55), 0.8px 0 0 rgb(70 52 32 / .3));
  pointer-events: none; user-select: none; z-index: 2;
}
.im-site.im-live .im-cut { z-index: 2; }

/* the column on the photographed terrace */
.im-hero::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 0; top: 0; bottom: 0; width: calc(var(--im-m) + var(--im-colw) + 60px);
  background:
    linear-gradient(180deg, var(--im-wash-top, transparent) 0, var(--im-wash-top, transparent) calc(var(--im-top, 0px) + 1em), transparent calc(var(--im-top, 0px) + 4em)),
    var(--im-wash, rgb(232 226 214 / .1));
  -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent);
  mask-image: linear-gradient(90deg, #000 72%, transparent);
  transition: background .6s var(--im-col);
}
.im-head, .im-tiles, .im-hour, .im-cap { position: relative; z-index: 1; }
.im-head { grid-area: head; }
.im-hero h1 {
  font: 300 clamp(2.5rem, 1.1rem + 3.4vw, 4.375rem)/1.02 var(--im-sans);
  letter-spacing: -0.015em; text-wrap: balance;
  max-width: 9.2em;
}
.im-hero h1 em { font-weight: 340; letter-spacing: -0.01em; }
.im-sub { margin-top: clamp(16px, 2.4svh, 24px); max-width: 36ch; font: 380 clamp(1.125rem, 1.02rem + 0.42vw, 1.375rem)/1.45 var(--im-sans); color: var(--im-hink); text-wrap: pretty; }

.im-tiles { grid-area: tiles; display: flex; gap: 20px; margin-top: clamp(24px, 4svh, 40px); }
.im-tile {
  --t: 88px;
  display: grid; justify-items: start; gap: 6px; min-width: var(--t);
  padding: 0; border: 0; background: none; color: inherit; cursor: pointer; text-align: left;
  font: inherit;
}
.im-sw {
  position: relative; display: block; width: var(--t); height: var(--t);
  background: var(--im-sw-bg, #6FC7D2);
  box-shadow: inset 0 0 0 1px rgb(13 38 48 / .18), 0 1px 0 rgb(255 255 255 / .5);
  outline: 2px solid transparent; outline-offset: 3px;
  transition: outline-color .3s var(--im-col);
}
.im-tile[data-finish="white"] .im-sw { --im-sw-bg: linear-gradient(160deg, #A6D3D9, #4EBDCC); }
.im-tile[data-finish="grey"] .im-sw { --im-sw-bg: linear-gradient(160deg, #86AEB6, #3B8FA1); }
.im-tile[data-finish="charcoal"] .im-sw { --im-sw-bg: linear-gradient(160deg, #3F6C77, #285869); }
.im-sw canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.im-tile[aria-pressed="true"] .im-sw { outline-color: var(--im-teal); }
.im-tile:hover .im-sw { outline-color: color-mix(in srgb, var(--im-teal) 45%, transparent); }
.im-tile:focus-visible { outline: none; box-shadow: none; }
.im-tile:focus-visible .im-sw { outline-color: var(--im-teal); box-shadow: 0 0 0 7px var(--im-ink); }
.im-tname { white-space: nowrap; font: italic 480 clamp(1rem, 0.94rem + 0.3vw, 1.125rem)/1.15 var(--im-sans); transition: font-weight .4s var(--im-col); }
.im-tile[aria-pressed="true"] .im-tname { font-weight: 620; }
.im-sound { display: block; width: 64px; height: 6px; background: linear-gradient(90deg, var(--im-s0, #A6D3D9) 0 calc(100% / 3), var(--im-s1, #6FC7D2) 0 calc(200% / 3), var(--im-s2, #4EBDCC) 0); box-shadow: inset 0 0 0 0.5px rgb(13 38 48 / .25); }

.im-hour { grid-area: hour; margin-top: clamp(20px, 3.4svh, 36px); width: min(440px, 100%); }
.im-hour-label { display: block; font: 560 0.9375rem/1.3 var(--im-sans); letter-spacing: 0.01em; }
.im-hour-label em { font-weight: 460; font-size: 1.0625rem; letter-spacing: 0; }
.im-hour-row { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.im-hour-track { position: relative; flex: 1; display: block; }
.im-hour-range {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 32px; margin: 0; background: none; cursor: pointer;
  --p: 64%;
}
.im-hour-range::-webkit-slider-runnable-track {
  height: 14px; border: 1px solid var(--im-hink);
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), color-mix(in srgb, var(--im-ink) 22%, transparent) calc(12.5% - 1px) 12.5%),
    linear-gradient(180deg, var(--im-stone-hi) 0 55%, #DDD5C6 100%);
  box-shadow: 0 2px 0 -1px rgb(13 38 48 / .18);
}
.im-hour-range::-moz-range-track {
  height: 12px; border: 1px solid var(--im-hink);
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), color-mix(in srgb, var(--im-ink) 22%, transparent) calc(12.5% - 1px) 12.5%),
    linear-gradient(180deg, var(--im-stone-hi) 0 55%, #DDD5C6 100%);
}
.im-hour-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -5px; border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #F08A6E, var(--im-tomato) 62%);
  border: 0; box-shadow: 0 0 0 3px rgb(242 237 227 / .9), 0 0 0 4px rgb(13 38 48 / .5), 0 3px 8px rgb(13 38 48 / .3);
}
.im-hour-range::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; border: 0;
  background: radial-gradient(circle at 38% 36%, #F08A6E, var(--im-tomato) 62%);
  box-shadow: 0 0 0 3px rgb(242 237 227 / .9), 0 0 0 4px rgb(13 38 48 / .5);
}
.im-hour-range:focus-visible { outline: 2px solid var(--im-teal); outline-offset: 4px; box-shadow: none; }

/* the hour as the sun's arch: sunrise, midday at the top, sunset; the range under it is hidden
   and does the keyboard's work */
.im-arch {
  position: relative; display: block; height: clamp(124px, 17svh, 160px);
  color: var(--im-hink); touch-action: pan-y; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.im-hero .im-hour-track { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.im-arch-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.im-arch-svg path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.im-arch-svg .im-a-way { stroke-width: 2; stroke-dasharray: 0 6; opacity: .75; }
.im-arch-svg .im-a-done { stroke-width: 1.5; }
.im-arch-svg .im-a-sky { stroke-width: 1; opacity: .5; }
.im-arch-svg .im-a-ic { stroke-width: 1.5; }
.im-arch-svg .im-a-noon { stroke-width: 1.5; }
/* the clock, in the middle of the arch just above the horizon */
.im-arch .im-hour-label {
  position: absolute; left: 50%; bottom: calc(var(--im-horizon, 18px) + 6px); translate: -50% 0; margin: 0;
  pointer-events: none; white-space: nowrap;
  font: 560 clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem)/1 var(--im-sans); letter-spacing: 0.01em; font-variant-numeric: lining-nums tabular-nums;
}
/* the sun (or the moon): placed by translate and grown by scale, so growing never moves it off the line */
.im-arch-sun {
  position: absolute; left: 0; top: 0; width: 36px; height: 36px; margin: -18px 0 0 -18px;
  translate: var(--sx, 0) var(--sy, 0); isolation: isolate; touch-action: none; cursor: grab;
  filter: drop-shadow(0 1px 1.5px rgb(13 38 48 / .35)) drop-shadow(0 0 5px rgb(255 168 110 / calc(.7 * var(--im-day, 1))));
  transition: scale .25s var(--im-col);
}
.im-arch-sun svg { display: block; overflow: visible; }
.im-arch-sun::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
.im-orb-rays { fill: none; stroke: var(--im-tomato); stroke-width: 2; stroke-linecap: round; }
.im-orb-edge { fill: none; stroke: rgb(13 38 48 / .4); stroke-width: 1; }
/* the moon sits in a disc of night sky, so it reads on the pale stone as well as the dark */
.im-orb-night { fill: #1A2A3C; stroke: rgb(244 241 234 / .35); stroke-width: 1; }
@media (hover: hover) { .im-arch-sun:hover { scale: 1.16; } }
.im-arch.is-near { cursor: pointer; }
.im-arch.is-held .im-arch-sun, .im-arch.is-following .im-arch-sun { scale: 1.16; }
.im-arch.is-held .im-arch-sun { cursor: grabbing; }
.im-hour:has(.im-hour-range:focus-visible) .im-arch-sun { outline: 2px solid var(--im-teal); outline-offset: 1px; border-radius: 50%; }
/* until the sun has been moved once, a ring goes out from it now and then, asking to be taken */
.im-arch-sun::after {
  content: ""; position: absolute; inset: 8px; z-index: -1; border-radius: 50%;
  border: 1.5px solid var(--im-tomato); opacity: 0; pointer-events: none;
  animation: im-call 2.8s var(--im-col) 1.2s infinite;
}
.im-arch.is-known .im-arch-sun::after { animation: none; }
@keyframes im-call { 0% { opacity: .75; scale: .8; } 70%, 100% { opacity: 0; scale: 2.1; } }
@media (prefers-reduced-motion: reduce) { .im-arch-sun::after { animation: none; } }

.im-play {
  display: flex; align-items: center; gap: 8px; width: max-content; min-height: 40px; margin: 8px auto 0; padding: 0 16px 0 13px;
  border: 1.5px solid currentColor; border-radius: 999px; color: var(--im-hink); cursor: pointer;
  background: color-mix(in srgb, var(--im-stone-hi) 55%, transparent);
  font: 560 0.9375rem/1 var(--im-sans); letter-spacing: 0.01em; white-space: nowrap;
  transition: background-color .3s, color .3s;
}
@media (hover: hover) {
  .im-play:hover { background: var(--im-ink); color: var(--im-stone-hi); border-color: var(--im-ink); }
  .im-hero.is-dark .im-play:hover { background: var(--im-pale); color: var(--im-ink); border-color: var(--im-pale); }
}
.im-play-ic { display: block; flex: none; }
.im-play-tri { fill: var(--im-tomato); }
.im-play-bars { fill: currentColor; display: none; }
.im-play.is-on .im-play-tri { display: none; }
.im-play.is-on .im-play-bars { display: inline; }
.im-hero.is-dark .im-play { background: rgb(13 38 48 / .35); }

.im-hero > .im-cap { grid-area: cap; align-self: end; margin-top: 28px; max-width: 46ch; font: italic 400 clamp(0.97rem, 0.92rem + 0.2vw, 1.0625rem)/1.55 var(--im-sans); color: var(--im-hink-2); }
.im-cap-alt { display: none; }
@media (max-height: 959px) and (min-width: 901px) and (min-aspect-ratio: 5/6) {
  .im-hero > .im-cap { display: none; }
  .im-cap-alt { display: block; }
}

/* the terrace after dark: the type comes up pale over the shaded stone */
.im-hero.is-dark { --im-hink: var(--im-pale); --im-hink-2: #D9D4CA; }

/* 1024–1180, and short windows: the terrace narrows */
@media (max-width: 1180px) and (min-width: 901px) {
  .im-hero { --im-colw: clamp(300px, calc(38.96vw - var(--im-m) - 16px), 460px); }
  .im-hero h1 { font-size: clamp(2.5rem, 0.6rem + 3.6vw, 3.75rem); }
  .im-tile { --t: 72px; }
  .im-tname { font-size: 0.9375rem; }
  .im-tiles { gap: 12px; }
  .im-hour { width: min(360px, 100%); }
  .im-hero > .im-cap { max-width: 40ch; }
}
/* laptops: the sun's arch and its button keep to the first screen */
@media (max-height: 860px) and (min-width: 901px) {
  .im-hero h1 { font-size: min(3.75rem, 7.5svh); }
  .im-sub { font-size: 1.125rem; }
  .im-tile { --t: 72px; }
}
@media (max-height: 760px) and (min-width: 901px) {
  .im-hero h1 { font-size: min(3.5rem, 7.5svh); }
  .im-sub { font-size: 1.0625rem; }
  .im-sound { display: none; }
  .im-tile { --t: 64px; }
}

/* ── stacked: tablets upright and phones ────────────────────────────────────────────────────── */
@media (max-width: 900px), (max-aspect-ratio: 5/6) {
  .im-hero {
    --im-zx: 1; --im-fx: 0.42; --im-fy: 0.5;
    --im-ph: max(260px, min(62vw, calc(100svh - var(--bar-h, 40px) - var(--im-nav-h) - var(--im-headh, 300px) - 88px)));
    grid-template-columns: var(--im-m) minmax(0, 1fr) var(--im-m);
    grid-template-rows: auto var(--im-ph) auto auto auto;
    grid-template-areas: ". head ." "photo photo photo" ". tiles ." ". hour ." ". cap .";
    min-height: 0; padding: 28px 0 40px; background: var(--im-stone);
  }
  .im-hero::before { display: none; }
  .im-photo { position: relative; inset: auto; grid-area: photo; z-index: 0; margin-top: 24px; }
  .im-head { padding-bottom: 0; }
  .im-hero h1 { max-width: 12em; }
  .im-sub { max-width: 44ch; }
  .im-tiles { margin-top: -24px; z-index: 2; }
  .im-sw { box-shadow: 0 0 0 3px var(--im-stone), 0 6px 16px -6px rgb(13 38 48 / .5); }
  .im-hero > .im-cap { align-self: start; }
  .im-hero.is-dark { --im-hink: var(--im-ink); --im-hink-2: var(--im-ink-2); }
  .im-hero.is-dark .im-play { background: color-mix(in srgb, var(--im-stone-hi) 55%, transparent); }
  .im-cap-alt { display: none !important; }
  .im-hero > .im-cap { display: block !important; }
}
@media (max-width: 700px) {
  .im-hero { --im-ar: 0.75; --im-fx: 0.5; --im-fy: 0.42;
    --im-ph: max(240px, min(133vw, calc(100svh - var(--bar-h, 40px) - var(--im-nav-h) - var(--im-headh, 280px) - 80px)));
    padding-top: 22px; }
  .im-hero h1 { font-size: clamp(2.125rem, 1.2rem + 4vw, 2.75rem); line-height: 1.02; }
  .im-sub { font-size: 1.0625rem; margin-top: 12px; }
  .im-photo { margin-top: 18px; }
  .im-cut { --cx: 0.1736; }
  .im-tiles { gap: 10px; justify-content: space-between; }
  .im-tile { --t: min(96px, calc((100vw - 2 * var(--im-m) - var(--im-tg) - 20px) / 3)); width: var(--t); }
  .im-tname { font-size: 0.9375rem; white-space: normal; }
  .im-sound { width: 100%; }
  .im-hour { width: 100%; margin-top: 28px; }
  .im-arch { height: clamp(150px, 44vw, 168px); }
  .im-hour-range { height: 44px; }
}
@media (max-width: 700px) and (max-height: 640px) {
  .im-hero { grid-template-areas: ". head ." "photo photo photo" ". tiles ." ". sub ." ". hour ." ". cap ."; grid-template-rows: auto var(--im-ph) auto auto auto auto; padding-top: 16px; }
  .im-head { display: contents; }
  .im-hero h1 { grid-area: head; font-size: 1.875rem; }
  .im-sub { grid-area: sub; margin-top: 20px; }
  .im-photo { margin-top: 14px; }
  .im-tile { --t: 80px; }
}

/* ── the nav on phones: a menu on a stone sheet ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .im-site { --im-nav-h: 52px; }
  .im-menu {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; margin-right: -6px;
    border: 1.5px solid var(--im-ink); background: none; color: var(--im-ink); font: 560 0.9375rem/1 var(--im-sans); cursor: pointer;
  }
  .im-links {
    position: absolute; left: 0; right: 0; top: calc(100% + 1px);
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--im-m) 20px;
    background: var(--im-stone-hi); border-bottom: 1px solid color-mix(in srgb, var(--im-ink) 40%, transparent);
    box-shadow: 0 16px 24px -16px rgb(13 38 48 / .4);
    visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .25s, transform .25s var(--im-geo), visibility 0s .25s;
  }
  .im-nav.is-open .im-links { visibility: visible; opacity: 1; transform: none; transition: opacity .25s, transform .25s var(--im-geo); }
  .im-links a { display: block; padding: 14px 0; font-size: 1.125rem; border-bottom: 1px solid color-mix(in srgb, var(--im-ink) 12%, transparent); background: none; }
  .im-links .im-talk-link { border: 0; padding: 14px 0; font-style: italic; }
}

/* ── the page edge: one coping line, terrace on its left and water on its right ───────────── */
.im-site { position: relative; isolation: isolate; --im-bw: clamp(14px, 2.1vw, 30px); --im-tg: clamp(48px, 7vw, 140px); --im-gap: 40px; }
.im-hero { z-index: 2; }
.im-seas { position: absolute; left: 0; top: 0; width: 100%; z-index: 0; pointer-events: none; }
.im-sea { position: absolute; left: 0; width: 100%; display: block; background: linear-gradient(180deg, var(--im-w12), var(--im-w19)); }
.im-band { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; overflow: visible; }
.im-band path { fill: none; stroke-linejoin: round; stroke-linecap: butt; }
.im-b0 { stroke: var(--im-ink); }
.im-b1 { stroke: var(--im-stone-hi); }
.im-b2 { stroke: rgb(13 38 48 / .22); stroke-dasharray: 1 57; }
.im-b3 { stroke: var(--im-ink); stroke-width: 1; }
.im-bt { fill: var(--im-stone-hi) !important; stroke: var(--im-ink); stroke-width: 1; }
.im-bstep { stroke: rgb(244 241 234 / .8); stroke-width: 1.5; }

/* ── sections ───────────────────────────────────────────────────────────────────────────────── */
.im-sec { position: relative; padding: var(--im-sec) 0; scroll-margin-top: calc(var(--bar-h, 40px) + var(--im-nav-h)); }
.im-sec > * { position: relative; z-index: 2; }
.im-t .im-wrap { padding-right: calc(var(--im-m) + var(--im-tg)); }
.im-w .im-wrap { padding-left: max(var(--im-m), calc(var(--im-bw) * 1.4 + var(--im-gap) + 8px)); }
.im-sec h2 { font: 330 clamp(1.875rem, 1.2rem + 2.4vw, 3.25rem)/1.06 var(--im-sans); letter-spacing: -0.01em; max-width: 16ch; text-wrap: balance; }
.im-lede { margin-top: 20px; font: 380 clamp(1.1875rem, 1.05rem + 0.5vw, 1.5rem)/1.45 var(--im-sans); max-width: 40ch; }
.im-body { margin-top: 24px; max-width: 62ch; text-wrap: pretty; }
.im-body + .im-body { margin-top: 16px; }
.im-fig { margin-top: 48px; }
.im-site figcaption, .im-cap-alt { font: italic 400 clamp(0.97rem, 0.92rem + 0.2vw, 1.0625rem)/1.55 var(--im-sans); max-width: 46ch; text-wrap: pretty; }
.im-fig figcaption { margin-top: 14px; color: var(--im-ink-2); }
.im-cap-alt { margin-bottom: 48px; max-width: 60ch; color: var(--im-ink-2); }
.im-w { color: var(--im-pale); text-shadow: 0 0 1px rgb(13 38 48 / .25); }
/* the type in the water sits on slabs of the terrace's limestone laid into the pool: ink on
   stone, so teal is only ever the water. The pool paints each slab's shadow onto itself. */
.im-pg :is(.im-w, .im-bay, .im-heat-out, .im-waterline figcaption) { background-image: linear-gradient(transparent, transparent); }
.im-w em, .im-heat-out { font-style: italic; }
.im-site :where(.im-w, .im-heat-out, .im-bay) a { color: var(--im-pale); }
.im-num { font-variant-numeric: tabular-nums lining-nums; }

/* the house */
.im-house-body { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 0.6fr); gap: 24px clamp(24px, 3.4vw, 56px); }
.im-house-body p { max-width: 50ch; }
.im-notes { align-self: start; margin-top: 6px; display: grid; gap: 18px; padding-left: 20px; border-left: 1px solid rgb(13 38 48 / .35); font: italic 400 clamp(0.97rem, 0.92rem + 0.2vw, 1.0625rem)/1.4 var(--im-sans); color: var(--im-ink-2); }
.im-waterline { margin-top: clamp(56px, 8vw, 120px); }
.im-waterline img { width: 100%; box-shadow: 0 1px 0 rgb(13 38 48 / .3); }
.im-waterline figcaption { margin-top: clamp(32px, 4vw, 56px); max-width: 56ch; color: var(--im-pale); }
.im-waterline figcaption, .im-heat-out { margin-left: max(0px, calc(var(--im-bw) * 1.4 + var(--im-gap) + 8px - var(--im-m))); }

/* the shapes */
.im-shapes-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "text stage" "fence thumbs"; gap: 0 clamp(32px, 5vw, 80px); align-items: start; }
.im-shapes-text { grid-area: text; padding-bottom: 32px; }
.im-shape-now { margin-top: 40px; min-height: 9.5em; }
.im-shape-cap { font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem); line-height: 1.45; max-width: 34ch; }
.im-shape-cap em { display: block; margin-bottom: 4px; font: italic 560 clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem)/1.2 var(--im-sans); }
.im-shape-size { margin-top: 12px; font-style: italic; }
.im-stage { grid-area: stage; position: relative; aspect-ratio: 620 / 420; background: var(--im-stone); box-shadow: 0 0 0 1px var(--im-ink), 0 18px 40px -24px rgb(13 38 48 / .6); color: var(--im-ink); text-shadow: none; }
.im-stage canvas, .im-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.im-stage svg { overflow: visible; }
.im-pl-c0 { fill: none; stroke: var(--im-ink); }
.im-pl-c1 { fill: none; stroke: var(--im-stone-hi); }
.im-pl-c2 { fill: none; stroke: rgb(13 38 48 / .3); }
.im-pl-spill { fill: none; stroke: var(--im-ink); stroke-width: 1; }
.im-pl-l { fill: none; stroke: rgb(244 241 234 / .85); stroke-width: 1.25; }
.im-pl-m { font: italic 460 13px var(--im-sans); fill: var(--im-ink); text-anchor: middle; }
.im-site[data-fin="charcoal"] .im-stage .im-pl-m:not(.im-pl-dt), .im-site[data-fin="charcoal"] .im-yours .im-pl-m:not(.im-pl-dt) { fill: var(--im-pale); }
.im-pl-dim { fill: none; stroke: var(--im-ink); stroke-width: 1; }
.im-thumbs { grid-area: thumbs; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.im-thumb { display: grid; gap: 6px; justify-items: start; width: 100%; padding: 8px 8px 10px; border: 0; background: none; color: var(--im-pale); cursor: pointer; text-align: left; font: inherit; }
.im-thumb svg { width: 100%; height: auto; aspect-ratio: 160 / 110; display: block; }
.im-pl-t { fill: rgb(244 241 234 / .1); stroke: var(--im-pale); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.im-thumb .im-pl-l { stroke-width: 1; stroke: rgb(244 241 234 / .6); }
.im-thumb em { font: italic 480 clamp(0.97rem, 0.9rem + 0.25vw, 1.0625rem)/1.25 var(--im-sans); text-decoration: underline 1.5px transparent; text-underline-offset: 0.3em; transition: text-decoration-color .3s, font-weight .4s var(--im-col); }
.im-thumb[aria-pressed="true"] em { font-weight: 620; text-decoration-color: var(--im-pale); }
.im-thumb:hover em { text-decoration-color: rgb(244 241 234 / .5); }
.im-thumb-line { font-size: 0.9375rem; line-height: 1.45; }
.im-js .im-thumb-line { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.im-fence { grid-area: fence; align-self: end; margin-top: 24px; max-width: 40ch; font-style: italic; }
.im-site:not(.im-js) .im-stage, .im-site:not(.im-js) .im-shape-now { display: none; }
.im-site:not(.im-js) .im-shapes-grid { grid-template-areas: "text text" "thumbs thumbs" "fence fence"; }

/* the depth */
.im-depth-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px clamp(32px, 5vw, 80px); align-items: end; }
.im-depth-top .im-body { margin: 0; }
.im-long { margin-top: clamp(48px, 6vw, 88px); }
.im-long-draw { position: relative; }
.im-long-svg { display: block; width: 100%; height: auto; overflow: visible; }
.im-lg-water { fill: url(#im-lg-g); }
.im-lg-floor { fill: none; stroke: var(--im-ink); stroke-width: 1.5; stroke-linejoin: round; }
.im-lg-cope { fill: none; stroke: var(--im-ink); stroke-width: 6; }
.im-lg-lead { fill: none; stroke: var(--im-ink); stroke-width: 1; stroke-dasharray: 2 3; }
.im-lg-dot { fill: var(--im-stone); stroke: var(--im-ink); stroke-width: 1.5; }
.im-soundings li { position: absolute; left: var(--x); top: 0; padding-left: 10px; white-space: nowrap; font-size: 0.9375rem; line-height: 1.2; transform: translateY(-4px); }
.im-soundings li:nth-child(even) { top: 11.4%; }
.im-soundings li:last-child { transform: translate(calc(-100% - 20px), -4px); text-align: right; padding: 0; }
.im-soundings em { font: italic 480 clamp(1rem, 0.94rem + 0.3vw, 1.1875rem)/1.2 var(--im-sans); }
.im-soundings span { display: block; margin-top: 2px; color: var(--im-ink-2); font: italic 460 0.8125rem/1 var(--im-sans); font-variant-numeric: tabular-nums lining-nums; }
.im-long figcaption { margin-top: 20px; color: var(--im-ink-2); max-width: 60ch; }

/* the build */
.im-build { padding-bottom: 0; }
.im-bwrap { position: relative; height: 320vh; margin-top: 24px; view-timeline: --im-build block; }
.im-bframe { position: sticky; top: calc(var(--bar-h, 40px) + var(--im-nav-h)); height: calc(100vh - var(--bar-h, 40px) - var(--im-nav-h)); display: flex; align-items: center; }
.im-bframe .im-wrap { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "a b c" "d d d" "e f g"; gap: 20px clamp(24px, 3vw, 48px); }
.im-bdraw { grid-area: d; }
.im-bsvg { display: block; width: 100%; height: auto; max-height: 48vh; overflow: visible; }
.im-bnotes { display: contents; }
.im-n { font-size: 0.9375rem; line-height: 1.45; color: var(--im-ink-2); max-width: 34ch; }
.im-n em { display: block; margin-bottom: 2px; color: var(--im-ink); font: italic 560 clamp(1.0625rem, 1rem + 0.3vw, 1.25rem)/1.2 var(--im-sans); }
.im-n-dig { grid-area: a; } .im-n-steel { grid-area: b; } .im-n-shot { grid-area: c; }
.im-n-render { grid-area: e; } .im-n-coping { grid-area: f; } .im-n-water { grid-area: g; }
.im-n-dig, .im-n-steel, .im-n-shot { align-self: end; padding-bottom: 14px; border-bottom: 1px solid rgb(13 38 48 / .3); }
.im-n-render, .im-n-coping, .im-n-water { padding-top: 14px; border-top: 1px solid rgb(13 38 48 / .3); }
.im-earth { fill: url(#im-hatch); }
.im-hl { stroke: #C9BEAB; stroke-width: 1.2; }
.im-cav { fill: url(#im-hatch); opacity: 0; }
.im-ground { fill: none; stroke: var(--im-ink); stroke-width: 1.5; }
.im-cut-line { fill: none; stroke: #9C8F7A; stroke-width: 1; stroke-dasharray: 3 3; }
.im-cage { fill: none; stroke: var(--im-ink-2); stroke-width: 0.8; stroke-dasharray: 1; }
.im-dots { stroke: var(--im-ink); stroke-width: 3; stroke-linecap: round; }
.im-shell { fill: url(#im-stip); stroke: var(--im-ink); stroke-width: 1.2; }
#im-stip circle { fill: var(--im-ink-2); }
.im-l-shot .im-shell { fill-opacity: 1; }
.im-render { fill: none; stroke-width: 4; stroke-linejoin: round; stroke-dasharray: 1; }
.im-bed { fill: none; stroke: #B7AC98; stroke-width: 3; }
.im-l-coping rect { fill: var(--im-stone-hi); stroke: var(--im-ink); stroke-width: 1.2; }
.im-bwater { fill: url(#im-bw); }
.im-bwl { fill: none; stroke: var(--im-pale); stroke-width: 1.5; }
.im-build-photos { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(24px, 4vw, 64px); align-items: end; padding-top: 24px; padding-bottom: var(--im-sec); }
.im-build-photos .im-fig { margin: 0; }
.im-build-photos figcaption { max-width: 42ch; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .im-js .im-bwrap .im-cav { animation: im-cav linear both; animation-range: contain 0% contain 14%; }
    .im-js .im-bwrap .im-cut-line { animation: im-fade linear both; animation-range: contain 4% contain 14%; }
    .im-js .im-bwrap .im-cage { animation: im-draw linear both; animation-range: contain 14% contain 26%; }
    .im-js .im-bwrap .im-dots { animation: im-wipe linear both; animation-range: contain 16% contain 30%; }
    .im-js .im-bwrap .im-shell { animation: im-wipe linear both; animation-range: contain 30% contain 46%; }
    .im-js .im-bwrap .im-render { animation: im-draw linear both; animation-range: contain 46% contain 60%; }
    .im-js .im-bwrap .im-l-coping { animation: im-drop linear both; animation-range: contain 60% contain 74%; }
    .im-js .im-bwrap .im-bwater { animation: im-rise linear both; animation-range: contain 74% contain 96%; }
    .im-js .im-bwrap .im-bwl { animation: im-fade linear both; animation-range: contain 94% contain 100%; }
    .im-js .im-bwrap .im-n { animation: im-fade linear both; }
    .im-js .im-bwrap .im-n-dig { animation-range: contain 0% contain 5%; }
    .im-js .im-bwrap .im-n-steel { animation-range: contain 14% contain 19%; }
    .im-js .im-bwrap .im-n-shot { animation-range: contain 30% contain 35%; }
    .im-js .im-bwrap .im-n-render { animation-range: contain 46% contain 51%; }
    .im-js .im-bwrap .im-n-coping { animation-range: contain 60% contain 65%; }
    .im-js .im-bwrap .im-n-water { animation-range: contain 74% contain 79%; }
    .im-js .im-bwrap :is(.im-cav, .im-cut-line, .im-cage, .im-dots, .im-shell, .im-render, .im-l-coping, .im-bwater, .im-bwl, .im-n) { animation-timeline: --im-build; }
  }
}
@keyframes im-cav { from { opacity: 1; clip-path: inset(0 0 0 0); } to { opacity: 1; clip-path: inset(100% 0 0 0); } }
@keyframes im-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes im-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes im-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes im-drop { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: none; } }
@keyframes im-rise { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
/* without scroll timelines: the script marks each layer as it is reached */
.im-io :is(.im-l-steel, .im-l-shot, .im-l-render, .im-l-coping, .im-l-water, .im-n) { transition: opacity .6s var(--im-col), transform .6s var(--im-geo); }
.im-io .im-cav { transition: opacity .6s; opacity: 1; }
.im-io.is-1 .im-cav { opacity: 0; }
.im-io:not(.is-2) .im-l-steel, .im-io:not(.is-3) .im-l-shot, .im-io:not(.is-4) .im-l-render, .im-io:not(.is-5) .im-l-coping, .im-io:not(.is-6) .im-l-water { opacity: 0; }
.im-io:not(.is-1) .im-n-dig, .im-io:not(.is-2) .im-n-steel, .im-io:not(.is-3) .im-n-shot, .im-io:not(.is-4) .im-n-render, .im-io:not(.is-5) .im-n-coping, .im-io:not(.is-6) .im-n-water { opacity: 0; transform: translateY(6px); }

/* the finish */
.im-finish-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px clamp(64px, 9vw, 160px); align-items: center; }
.im-fig-fin { max-width: 440px; }
.im-bay { color: var(--im-pale); padding: clamp(40px, 5vw, 72px) 0; padding-left: max(0px, calc(var(--im-bw) * 1.4 + var(--im-gap) + 8px - var(--im-m))); text-shadow: 0 0 1px rgb(13 38 48 / .25); }
.im-swatches { display: grid; gap: clamp(28px, 3vw, 44px); }
.im-swl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px clamp(20px, 2.4vw, 36px); align-items: center; }
.im-swatch { display: grid; gap: 10px; justify-items: start; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; font: inherit; text-align: left; }
.im-swatch canvas { display: block; width: clamp(112px, 11vw, 160px); aspect-ratio: 1; background: var(--im-w12); outline: 2px solid transparent; outline-offset: 4px; box-shadow: 0 0 0 1px rgb(244 241 234 / .5); transition: outline-color .3s var(--im-col); }
.im-swatch[data-finish="grey"] canvas { background: #4B939F; }
.im-swatch[data-finish="charcoal"] canvas { background: #2D5561; }
.im-swatch[aria-pressed="true"] canvas { outline-color: var(--im-pale); }
.im-swatch:hover canvas { outline-color: rgb(244 241 234 / .5); }
.im-swatch em { font: italic 480 clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem)/1.2 var(--im-sans); transition: font-weight .4s var(--im-col); }
.im-swatch[aria-pressed="true"] em { font-weight: 620; }
.im-swl p { font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); line-height: 1.5; max-width: 32ch; }
.im-what { display: block; font-style: italic; margin-bottom: 4px; }
.im-bay-cap { margin-top: 32px; font: italic 400 clamp(0.97rem, 0.92rem + 0.2vw, 1.0625rem)/1.55 var(--im-sans); max-width: 42ch; }

/* the heat */
.im-heat-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px clamp(48px, 7vw, 120px); align-items: start; }
.im-heat-ctl { display: grid; gap: 16px; padding-top: 8px; }
.im-heat-sent { font: italic 400 clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem)/1.45 var(--im-sans); max-width: 38ch; margin-bottom: 8px; }
.im-rng label { display: block; font: 560 0.9375rem/1.3 var(--im-sans); letter-spacing: 0.01em; margin-bottom: 2px; }
.im-range {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 36px; margin: 0; background: none; cursor: pointer;
}
.im-range::-webkit-slider-runnable-track { height: 14px; border: 1px solid var(--im-ink); background: repeating-linear-gradient(90deg, transparent 0 57px, rgb(13 38 48 / .22) 57px 58px), linear-gradient(180deg, var(--im-stone-hi) 0 55%, #DDD5C6 100%); box-shadow: 0 2px 0 -1px rgb(13 38 48 / .18); }
.im-range::-moz-range-track { height: 12px; border: 1px solid var(--im-ink); background: linear-gradient(180deg, var(--im-stone-hi) 0 55%, #DDD5C6 100%); }
.im-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 26px; margin-top: -7px; background: var(--im-ink); border: 0; box-shadow: 0 0 0 2px var(--im-stone), 0 2px 6px rgb(13 38 48 / .35); }
.im-range::-moz-range-thumb { width: 12px; height: 26px; border: 0; border-radius: 0; background: var(--im-ink); }
.im-range:focus-visible { outline: 2px solid var(--im-teal); outline-offset: 4px; box-shadow: none; }
.im-heat-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 8px; }
.im-cover { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 14px 6px 8px; border: 1.5px solid var(--im-ink); background: var(--im-stone-hi); color: var(--im-ink); cursor: pointer; font: 560 0.9375rem/1.2 var(--im-sans); }
.im-cover em { font-weight: 480; }
.im-cover[aria-pressed="true"] .im-cv-off, .im-cover[aria-pressed="false"] .im-cv-on { display: none; }
.im-cv-pool { fill: var(--im-w12); stroke: var(--im-ink); stroke-width: 1.5; }
.im-cv-sheet { fill: #6E7F86; stroke: var(--im-ink); stroke-width: 1; transform-origin: 1px 12px; transition: transform .5s var(--im-geo); }
.im-cv-roll { fill: var(--im-stone-hi); stroke: var(--im-ink); stroke-width: 1.5; transition: transform .5s var(--im-geo); }
.im-cover[aria-pressed="false"] .im-cv-sheet { transform: scaleX(0.02); }
.im-pump { display: flex; flex-wrap: wrap; align-items: center; gap: 0; border: 0; padding: 0; margin: 0; }
.im-pump legend { float: left; margin-right: 12px; padding: 0; font: 560 0.9375rem/48px var(--im-sans); }
.im-pump label { position: relative; cursor: pointer; }
.im-pump input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.im-pump span { display: grid; place-items: center; min-width: 58px; height: 48px; padding: 0 10px; border: 1.5px solid var(--im-ink); margin-left: -1.5px; background: var(--im-stone-hi); font: italic 480 1rem/1 var(--im-sans); }
.im-pump input:checked + span { background: var(--im-ink); color: var(--im-stone-hi); font-weight: 620; }
.im-pump input:focus-visible + span { outline: 2px solid var(--im-teal); outline-offset: 3px; }
.im-strip { margin-top: clamp(48px, 6vw, 88px); }
.im-strip-svg { display: block; width: 100%; height: auto; overflow: visible; }
.im-st { fill: var(--im-stone-hi); stroke: var(--im-ink); stroke-width: 1; }
.im-st-m { font: 620 11px var(--im-sans); letter-spacing: 0.2em; text-transform: uppercase; fill: #6E5E49; text-anchor: middle; paint-order: stroke; stroke: var(--im-stone-hi); stroke-width: 4px; stroke-linejoin: round; }
.im-hot { fill: url(#im-warm); }
.im-wh { stroke: var(--im-tomato); stroke-width: 2; }
.im-ref { stroke: var(--im-ink-2); stroke-width: 1; stroke-dasharray: 1 4; }
.im-ref-t { font: italic 460 13px var(--im-sans); fill: var(--im-ink-2); }
.im-line { fill: var(--im-ink); }
.im-ink-m { fill: none; stroke: #fff; stroke-width: 16; stroke-dasharray: 1; stroke-dashoffset: 0; }
.im-strip.is-inking .im-ink-m { animation: im-ink .6s var(--im-geo) both; }
@keyframes im-ink { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.im-heat-out { display: grid; gap: 14px; margin-top: clamp(40px, 5vw, 72px); max-width: 50ch; color: var(--im-pale); text-shadow: 0 0 1px rgb(13 38 48 / .25); }
.im-res { font: italic 400 clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem)/1.5 var(--im-sans); font-variant-numeric: tabular-nums lining-nums; }
.im-res b { font-weight: 620; }
.im-label { font-size: 0.9375rem; }
.im-site:not(.im-js) .im-heat-ctl > :not(.im-heat-sent) { display: none; }

/* the dusk */
.im-dusk-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px clamp(40px, 6vw, 96px); align-items: center; }
.im-dusk-hour { margin-top: 36px; max-width: 420px; }
.im-dusk .im-hour-label { color: var(--im-pale); }
.im-four { flex: none; padding: 8px 2px; color: var(--im-pale); font: italic 460 1rem/1.2 var(--im-sans); text-decoration-color: var(--im-tomato) !important; text-decoration-thickness: 1.5px; }
.im-dusk-fig { margin: 0; }
.im-dusk-frame { position: relative; aspect-ratio: 21 / 9; background: #0B1B26; box-shadow: 0 0 0 1px rgb(244 241 234 / .35), 0 24px 48px -24px rgb(0 0 0 / .6); overflow: hidden; }
.im-dusk-frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.im-dusk-fig figcaption { margin-top: 16px; color: var(--im-pale); }
.im-site:not(.im-js) .im-dusk-fig, .im-site:not(.im-js) .im-dusk-hour { display: none; }

/* the talk */
.im-talk { padding-bottom: calc(var(--im-sec) + 64px); }
.im-talk-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px clamp(48px, 7vw, 120px); align-items: start; }
.im-form { margin-top: 40px; display: grid; gap: 24px; max-width: 600px; }
.im-field label, .im-field legend { display: block; font: 560 0.9375rem/1.3 var(--im-sans); letter-spacing: 0.01em; margin-bottom: 4px; padding: 0; }
.im-form input[type="text"], .im-form select, .im-form textarea {
  width: 100%; padding: 10px 4px; border: 0; border-bottom: 1.5px solid var(--im-pale); border-radius: 2px 2px 0 0;
  background: rgb(8 28 36 / .32); color: var(--im-pale); font: 420 1.0625rem/1.4 var(--im-sans);
}
.im-form select { -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--im-pale) 50%), linear-gradient(-45deg, transparent 50%, var(--im-pale) 50%); background-size: 6px 6px; background-position: calc(100% - 16px) 55%, calc(100% - 10px) 55%; background-repeat: no-repeat; }
.im-form select option { color: var(--im-ink); background: var(--im-stone-hi); }
.im-form ::placeholder { color: rgb(244 241 234 / .78); font-style: italic; }
.im-radios { border: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.im-radios legend { width: 100%; margin-bottom: 8px; }
.im-radios label, .im-incl label { position: relative; display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 420; margin: 0; }
.im-radios input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.im-radios span { display: grid; place-items: center; height: 44px; padding: 0 16px; background: var(--im-stone-hi); color: var(--im-ink); box-shadow: inset 0 0 0 1px rgb(13 38 48 / .35), 0 2px 0 rgb(13 38 48 / .3); font: italic 480 1rem/1 var(--im-sans); text-shadow: none; }
.im-radios input:checked + span { background: var(--im-ink); color: var(--im-stone-hi); font-weight: 620; }
.im-radios input:focus-visible + span { outline: 2px solid var(--im-pale); outline-offset: 3px; }
.im-incl label { gap: 10px; font: italic 460 1rem/1.3 var(--im-sans); }
.im-incl input { width: 20px; height: 20px; accent-color: var(--im-ink); }
.im-btn { min-height: 52px; padding: 16px 28px; border: 0; background: var(--im-stone-hi); color: var(--im-ink); font: 620 1.0625rem/1 var(--im-sans); cursor: pointer; box-shadow: inset 0 0 0 1px var(--im-ink), 0 3px 0 rgb(13 38 48 / .45); text-shadow: none; }
.im-btn:hover { background: #fff; }
.im-btn:focus-visible { outline: 2px solid var(--im-pale); }
.im-status { min-height: 1.6em; font-style: italic; }
.im-yours { position: sticky; top: calc(var(--bar-h, 40px) + var(--im-nav-h) + 32px); padding: 24px; background: var(--im-stone); color: var(--im-ink); text-shadow: none; box-shadow: 0 0 0 1px var(--im-ink), 0 18px 40px -24px rgb(13 38 48 / .6); }
.im-yours-h { font: italic 560 clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem)/1.2 var(--im-sans); margin: 0; }
.im-yours-plan { position: relative; margin-top: 12px; aspect-ratio: 360 / 240; }
.im-yours-plan canvas, .im-yours-plan svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.im-yours-list { margin-top: 12px; display: grid; gap: 4px; font-size: 1rem; }
.im-yours-list em { font-weight: 560; }
.im-site:not(.im-js) .im-yours, .im-site:not(.im-js) .im-incl { display: none; }

/* the foot: the last stone */
.im-foot { position: relative; z-index: 2; padding: 8px 0 72px; }
.im-foot .im-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.im-foot-stone { display: inline-flex; align-items: center; gap: 16px; padding: 14px 32px 14px 16px; background: var(--im-stone-hi); box-shadow: inset 0 0 0 1px rgb(13 38 48 / .5), 0 2px 0 rgb(13 38 48 / .18); }
.im-cut-foot { font: 620 0.6875rem/1 var(--im-sans); letter-spacing: 0.2em; text-transform: uppercase; color: #6E5E49; text-shadow: -0.6px -0.6px 0 #fff, 0.6px 0.6px 0 rgb(70 52 32 / .25); }
.im-foot-line { color: var(--im-ink-2); }

/* ── the slabs: limestone laid into the water, carrying whatever is written there ─────────── */
.im-site [data-slab] {
  --im-pale: var(--im-ink);
  position: relative; background: var(--im-stone); color: var(--im-ink); text-shadow: none;
  padding: clamp(20px, 2.6vw, 40px);
  box-shadow: inset 0 0 0 1px rgb(13 38 48 / .5), inset 0 -3px 0 rgb(13 38 48 / .07);
}
.im-site [data-slab] a { color: var(--im-teal-text); }
.im-site [data-slab] .im-four { color: var(--im-ink); }
.im-site [data-slab] .im-pl-t { fill: rgb(13 38 48 / .05); }
.im-site [data-slab] .im-thumb .im-pl-l { stroke: rgb(13 38 48 / .4); }
.im-site [data-slab] .im-thumb:hover em { text-decoration-color: rgb(13 38 48 / .4); }
.im-site [data-slab] .im-swatch canvas { box-shadow: 0 0 0 1px rgb(13 38 48 / .45); }
.im-site [data-slab] .im-swatch:hover canvas { outline-color: rgb(13 38 48 / .4); }
.im-site [data-slab] .im-swatch[aria-pressed="true"] canvas { outline-color: var(--im-teal); }
.im-site [data-slab] .im-dusk-frame { box-shadow: 0 0 0 1px var(--im-ink); }
.im-site [data-slab] .im-dusk-fig figcaption, .im-dusk-fig[data-slab] figcaption { color: var(--im-ink-2); }
.im-site [data-slab] :is(.im-form input[type="text"], .im-form select, .im-form textarea) { background-color: var(--im-stone-hi); border-bottom-color: var(--im-ink); }
.im-site [data-slab] .im-form ::placeholder { color: var(--im-ink-2); }
.im-site [data-slab] .im-radios input:focus-visible + span, .im-site [data-slab] .im-btn:focus-visible { outline-color: var(--im-teal); }
.im-site [data-slab] .im-btn { background: var(--im-ink); color: var(--im-stone-hi); box-shadow: 0 3px 0 rgb(13 38 48 / .3); }
.im-site [data-slab] .im-btn:hover { background: #1B3A46; }
.im-slab-fin { max-width: 640px; }

/* ── without the script: the water as the model's own gradient, the edge drawn straight ───── */
.im-site:not(.im-pg) .im-w { background: linear-gradient(170deg, var(--im-w045) 0%, var(--im-w12) 30%, var(--im-w19) 100%); box-shadow: inset 30px 0 0 -2px var(--im-stone-hi), inset 31px 0 0 -1px var(--im-ink); }
.im-site:not(.im-pg) .im-t { background: linear-gradient(90deg, transparent calc(100% - var(--im-tg) - 2px), var(--im-ink) 0 calc(100% - var(--im-tg) - 1px), var(--im-stone-hi) 0 calc(100% - var(--im-tg) + 22px), var(--im-ink) 0 calc(100% - var(--im-tg) + 23px), var(--im-w19) 0); }
.im-site:not(.im-pg) .im-bay { background: linear-gradient(170deg, var(--im-w12), var(--im-w19)); padding-left: 32px; padding-right: 32px; }
/* the slabs' shadows, drawn plainly when the pool isn't painted */
.im-site:not(.im-pg) [data-slab] { box-shadow: inset 0 0 0 1px rgb(13 38 48 / .5), inset 0 -3px 0 rgb(13 38 48 / .07), 14px 10px 0 -2px rgb(8 30 38 / .28); }

/* ── in between and on phones ───────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .im-house-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .im-notes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 32px; }
  .im-shapes-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "stage" "thumbs" "fence"; }
  .im-shape-now { min-height: 0; }
  .im-finish-grid { grid-template-columns: minmax(0, 1fr); }
  .im-fig-fin { max-width: 520px; }
  .im-heat-top, .im-talk-grid, .im-dusk-grid { grid-template-columns: minmax(0, 1fr); }
  .im-yours { position: relative; top: 0; max-width: 520px; }
}
@media (max-width: 900px), (max-aspect-ratio: 5/6) {
  .im-hero { grid-template-columns: var(--im-m) minmax(0, 1fr) calc(var(--im-m) + var(--im-tg)); background: transparent; }
}
@media (max-width: 900px) {
  .im-site { --im-tg: 40px; --im-gap: 14px; }
  .im-house-body, .im-depth-top { grid-template-columns: minmax(0, 1fr); }
  .im-soundings { position: static !important; margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px 24px; }
  .im-soundings li, .im-soundings li:last-child { position: static; transform: none; padding: 0; text-align: left; white-space: normal; }
  .im-lg-lead { display: none; }
  .im-bframe .im-wrap { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; gap: 16px; }
  .im-bdraw { grid-area: auto; }
  .im-n { grid-area: auto !important; border: 0 !important; padding: 0 !important; align-self: start !important; }
  .im-bsvg { max-height: none; }
  .im-bwrap { height: 260vh; }
  .im-build-photos { grid-template-columns: minmax(0, 1fr); }
  .im-thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .im-talk-grid .im-yours { order: -1; }
}
@supports (animation-timeline: view()) { @media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .im-js .im-bframe .im-wrap { grid-template-areas: "d" "n"; }
  .im-js .im-bwrap .im-bdraw { grid-area: d; }
  .im-js .im-bwrap .im-n { grid-area: n !important; animation-name: im-slot; }
  .im-js .im-bwrap .im-n-dig { animation-range: contain 0% contain 14%; }
  .im-js .im-bwrap .im-n-steel { animation-range: contain 14% contain 30%; }
  .im-js .im-bwrap .im-n-shot { animation-range: contain 30% contain 46%; }
  .im-js .im-bwrap .im-n-render { animation-range: contain 46% contain 60%; }
  .im-js .im-bwrap .im-n-coping { animation-range: contain 60% contain 74%; }
  .im-js .im-bwrap .im-n-water { animation-name: im-fade; animation-range: contain 74% contain 80%; }
} }
@keyframes im-slot { 0% { opacity: 0; } 12%, 88% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 700px) {
  .im-thumb { padding: 6px 4px; }
  .im-stage { aspect-ratio: 1; }
  .im-pl-m { font-size: 12px; }
  .im-swl { grid-template-columns: minmax(0, 1fr); }
  .im-pump legend { float: none; width: 100%; line-height: 1.3; margin-bottom: 6px; }
  .im-yours { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .im-site *, .im-site *::before, .im-site *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
/* the sticky frame only when the drawing can move */
@media (prefers-reduced-motion: reduce) { .im-bwrap { height: auto !important; } .im-bframe { position: relative; top: 0; height: auto; padding: 24px 0; } }
.im-site:not(.im-js) .im-bwrap { height: auto; } .im-site:not(.im-js) .im-bframe { position: relative; top: 0; height: auto; padding: 24px 0; }

/* without the script the hour cannot change, so the photograph's four o'clock stands alone */
.im-site:not(.im-js) .im-hour { display: none; }

/* the shape change: the chosen thumbnail grows into the stage */
::view-transition-group(im-pick), ::view-transition-group(im-stage), ::view-transition-group(im-cap) { animation-duration: .65s; animation-timing-function: cubic-bezier(.3, 0, .1, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }