/*
  Haus Torfsee (fictional). Photo-led hospitality, extended from the hero-only
  exemplar into a complete page.
  One idea: a sauna round in three phases. Heat (the lit spruce), cold (the
  descent down the steps into peat-black water, the request filled under the
  water line, the lake and its seasons as the deepest point), rest (the climb
  back into the warm house: food, the rooms as three treads out of the water,
  arrival as the one lit window on the site drawing), and at the end a second
  descent. Every drawing on the page is a crop of one site section at one scale.

  Type: Commissioner (exemplar-font motive: the family is this page's own choice
  from the exemplar brief, kept by the showcase registry; the flare axis gives
  hot and cold in one body). Display at FLAR 100 and weight 600, body at FLAR 0.
*/
@property --lit { syntax: "<percentage>"; inherits: false; initial-value: 0%; }

:root {
  /* colours, all sampled from the photographs (see notes.md) */
  --peat: #181c15;      /* hero: the black water at the lower left; canvas, ink on the lit band and the mist band */
  --water: #354c56;     /* hero: the water under the mist; secondary ink on the mist band */
  --spruce: #c27d3c;    /* hero: the lit treads. saturated-ground motive: the lamp light on the sauna steps, the only warm surface of the house */
  --mist: #cfd9e1;      /* morning photograph: the sky; ink on every dark band; the ground of the rooms band (the top of the stairs, morning) */
  --mist-muted: #9fb4c7;/* hero: the dusk sky; secondary text on peat only */
  --lamp: #e9b45c;      /* the lamp light, one job: the request action (never on type, never a gradient); once as the lit window in the drawing */
  --lamp-edge: #a86f2e; /* the front face of a lit tread, under the lamp surface */
  --tea: #624630;       /* hero: the submerged tread seen through the peat water (sampled at 45 %, 55 %); the surface of the depth strip */
  --h2-step: clamp(3rem, 9.4vw, 9rem); /* the heat and cold headline, the one display moment of the bands */
  --on-lamp: #181c15;
  --border-strong: #8ea3b3; /* interactive boundaries on peat and water, 3:1 */

  --color-canvas: var(--peat);
  --color-ink: var(--mist);
  --color-muted: var(--mist-muted);
  --color-accent: var(--lamp);
  --color-on-accent: var(--on-lamp);
  --color-border-strong: var(--border-strong);

  --gutter: clamp(1rem, 2.8vw, 2.5rem);
  --gap: clamp(1rem, 1.7vw, 1.5rem);
  --space-tight: .5rem;
  --space-section: clamp(3rem, 6vw, 5rem);
  --space-air: clamp(5rem, 11vw, 9rem);
  --scroll-offset: 1rem;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-light: cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-gutter: stable; background: var(--peat); color-scheme: dark; }   /* dark scrollbar on the dark page (brand decision: peat water at blue hour) */
body {
  margin: 0;
  font-family: "Commissioner", system-ui, sans-serif;
  font-variation-settings: "FLAR" 0;
  font-weight: 400;
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  line-height: 1.55;
  color: var(--mist);
  background: var(--peat);
  font-optical-sizing: auto;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3 { margin: 0; text-wrap: balance; font-weight: 600; font-variation-settings: "FLAR" 100; letter-spacing: -.025em; line-height: .95; }
p { margin: 0; text-wrap: pretty; }
dl, dd, figure, fieldset, legend, ol, ul { margin: 0; padding: 0; }
fieldset { border: 0; min-inline-size: 0; }
nav ul, ol.plain, ul.plain { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--lamp); color: var(--peat); }
:focus-visible { outline: 3px solid var(--lamp); outline-offset: 3px; }
[id] { scroll-margin-top: var(--scroll-offset); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip-link { position: absolute; top: 0; left: 0; translate: 0 -200%; z-index: 1000; padding: .75rem 1rem; background: var(--lamp); color: var(--peat); font-weight: 500; text-decoration: none; transition: translate 120ms ease-out; }
.skip-link:focus-visible { translate: 0 0; }

/* the request: a lit tread. A plank in the photograph's perspective, with a front face under the lamp surface */
.plank {
  position: relative; display: inline-flex; align-items: center; gap: 1rem;
  min-height: 4rem; padding: 1.1rem 2.25rem 1.65rem 2rem;
  background: var(--lamp); color: var(--peat);
  font-family: inherit; font-size: 1.05rem; font-weight: 560; line-height: 1; letter-spacing: -.005em;
  text-decoration: none; border: 0; border-radius: 0; cursor: pointer; white-space: nowrap;
  clip-path: polygon(0 16%, 100% 0, 100% 84%, 0 100%);
  box-shadow: inset 0 -.55rem 0 var(--lamp-edge);
  transition: background-color 450ms ease-out, scale 150ms ease-out;
}
.plank:active { scale: .97; }
@media (hover: hover) { .plank:hover { background: #f2c675; transition-duration: 125ms; } }

/* links: one hairline that grows from the left */
a.text { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; padding-bottom: .12em; transition: background-size 450ms ease-out; }
@media (hover: hover) { a.text:hover { background-size: 100% 1px; transition-duration: 125ms; } }

/* header: on the photograph, left, where the mist is */
.top {
  position: absolute; inset: 0 0 auto 0; z-index: 3;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .75rem clamp(1.5rem, 4vw, 4rem);
  padding: 1.1rem var(--gutter);
  color: var(--peat);
  animation: fade 400ms var(--ease-out) both;
}
.mark { color: inherit; text-decoration: none; display: inline-flex; align-items: flex-end; gap: .9rem; font-variation-settings: "FLAR" 100; font-weight: 600; font-size: clamp(1.25rem, 1rem + .7vw, 1.75rem); letter-spacing: -.02em; line-height: 1; }
.mark .glyph { width: clamp(6rem, 8vw, 8rem); height: auto; display: block; }
.top nav ul { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem clamp(1rem, 2.5vw, 2.25rem); }
.top nav a.text { font-weight: 500; }
.plank-nav { min-height: 0; padding: .55rem 1rem .75rem; font-size: 1rem; font-weight: 600; box-shadow: inset 0 -.3rem 0 var(--lamp-edge); clip-path: polygon(0 12%, 100% 0, 100% 88%, 0 100%); translate: 0 .2rem; }

/* hero: the photograph owns the viewport (kept from the exemplar) */
.hero {
  position: relative; isolation: isolate;
  height: 100svh; min-height: 40rem; max-height: 62rem;
  overflow: clip; background: var(--peat);
}
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 84% 50%; }
.hero-shade {
  position: absolute; inset: 0; background: var(--peat); opacity: .94; pointer-events: none;
  --lit: 0%;
  mask-image: radial-gradient(circle at 96% 4%, transparent 0, transparent calc(var(--lit) - 9%), #000 calc(var(--lit) + 3%));
  animation: lampon 1100ms var(--ease-light) both;
}
.hero-water {
  position: absolute; inset: 0; background: var(--peat); opacity: .94; pointer-events: none;
  translate: 0 100%;
  mask-image: linear-gradient(180deg, transparent 0, #000 9%);
}
.hero-water::before { content: ""; position: absolute; left: 0; right: 0; top: 7%; height: 28px; background: linear-gradient(180deg, rgb(207 217 225 / .5) 0, rgb(207 217 225 / .5) 2px, rgb(207 217 225 / .14) 2px, rgb(207 217 225 / 0) 100%); }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgb(24 28 21 / .6) 0%, rgb(24 28 21 / .42) 30%, rgb(24 28 21 / .3) 50%, rgb(24 28 21 / 0) 68%);
}
.hero-copy { position: absolute; left: var(--gutter); right: var(--gutter); top: 35%; max-width: 62rem; }
.hero h1 { font-size: clamp(2.75rem, 7.6vw, 7rem); color: var(--mist); }
.hero h1 .line { display: block; }
.hero h1 .line > span { display: block; }   /* present from the first frame, in mist, before the lamp reaches the water */
.lede { margin-top: 1.75rem; max-width: 24rem; font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem); line-height: 1.4; color: var(--mist); animation: fade 400ms var(--ease-out) both; animation-delay: 300ms; }
.btn-step {
  position: absolute; left: 25%; top: 71%; z-index: 2; width: clamp(20rem, 33vw, 33rem); min-height: 5.2rem; justify-content: center; align-items: center;
  padding: .9rem 2rem 1.5rem; font-size: 1.5rem; letter-spacing: .01em; font-weight: 600;
  rotate: -27deg; transform-origin: 50% 50%;
  clip-path: polygon(0 0, 100% 14%, 100% 86%, 0 100%);
  box-shadow: inset 0 -.85rem 0 var(--lamp-edge), inset 0 2px 0 rgb(255 255 255 / .5);
  overflow: clip;
}
.btn-step > span { position: relative; z-index: 2; }
/* the plank is unlit wood until the light reaches the water, then it catches the light with one wet specular sweep */
.btn-step::before { content: ""; position: absolute; inset: 0; background: var(--lamp-edge); z-index: 1; animation: catch 450ms var(--ease-light) both; animation-delay: 700ms; }
.btn-step::after { content: ""; position: absolute; inset: 0; width: 45%; z-index: 1; background: linear-gradient(100deg, rgb(255 255 255 / 0) 0, rgb(255 255 255 / .55) 50%, rgb(255 255 255 / 0) 100%); translate: -120% 0; animation: sweep 650ms var(--ease-light) both; animation-delay: 820ms; }
.cap-hero { position: absolute; left: var(--gutter); bottom: 1.25rem; z-index: 2; max-width: 36ch; color: var(--mist); }

@keyframes lampon { from { --lit: 12%; } to { --lit: 160%; } }
@keyframes rise { from { translate: 0 24px; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes catch { from { opacity: 1; } to { opacity: 0; } }
@keyframes sweep { from { translate: -120% 0; } to { translate: 260% 0; } }

.cap { font-size: .8125rem; line-height: 1.4; }
.cap b { font-weight: 560; }

/* bands: the grounds of the round, sampled from the photographs */
.band { position: relative; padding-inline: var(--gutter); }
.band-lit { background: var(--spruce); color: var(--peat); }
.band-water { background: var(--water); color: var(--mist); }
.band-peat { background: var(--peat); color: var(--mist); }
.band-mist { background: var(--mist); color: var(--peat); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.band h2 { font-size: clamp(2.5rem, 5.6vw, 5.4rem); }
.copy p { max-width: 34rem; font-size: clamp(1rem, .95rem + .3vw, 1.2rem); line-height: 1.5; }
.copy p + p { margin-top: 1rem; }
.copy h2 + p { margin-top: 1.5rem; }
.muted { color: var(--mist-muted); }
.band-lit .muted, .band-mist .muted { color: var(--water); }

/* band edges cut as a stepped profile, the risers of the site section: down through heat, cold and lake, up again through rest and rooms */
.edge-down, .edge-up { --edge-from: var(--peat); }
.edge-down::before, .edge-up::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2.75rem; pointer-events: none; z-index: 0; background: var(--edge-from); }
.edge-down::before { clip-path: polygon(0 0, 100% 0, 100% 0%, 75% 0%, 75% 34%, 50% 34%, 50% 67%, 25% 67%, 25% 100%, 0 100%); }
.edge-up::before { clip-path: polygon(0 0, 100% 0, 100% 100%, 75% 100%, 75% 67%, 50% 67%, 50% 34%, 25% 34%, 25% 0%, 0 0); }

/* heat: the first band. The paragraph above, the headline crossing the edge into the water */
.heat { padding-block: 2rem 0; }
.heat .photo { grid-row: 1; grid-column: 1 / 6; margin-left: calc(-1 * var(--gutter)); margin-bottom: -34rem; z-index: 1; }
.heat .photo img { object-position: 30% 50%; }
.heat .copy { grid-row: 1; grid-column: 7 / 13; padding-top: 0; display: flex; flex-direction: column; }
.heat .copy p { margin-bottom: 1.5rem; }
.heat h2 { margin-bottom: -.95em; position: relative; z-index: 3; margin-top: auto; font-size: var(--h2-step); margin-left: -22%; }   /* the second line runs over the right edge of the spruce photograph */
.heat h2 span { display: block; }
.heat h2 .cold-word { color: var(--mist); }

/* photographs step down the left column and cross a band edge, like a foot on the next tread */
.photo { position: relative; margin: 0; }
.photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: 0 40px 70px -30px rgb(0 0 0 / .65); }
.photo figcaption { margin-top: .75rem; padding-left: var(--gutter); }

/* cold: the water band. The copy, the drawing, the request under the water line */
.cold { padding-block: 0; }
.cold .photo { grid-row: 1; grid-column: 1 / 6; margin-left: calc(-1 * var(--gutter)); margin-top: 38rem; margin-bottom: -30rem; z-index: 2; }
.cold .photo img { object-position: 40% 50%; }
.copy-cold { grid-row: 1; grid-column: 7 / 13; padding-top: clamp(7rem, 11.4vw, 10.5rem); }   /* room for the crossing headline plus the page's headline-to-body space */

/* the site drawing: one section at one scale, cropped per section (see the <symbol> in the page) */
.drawing { display: block; width: 100%; height: auto; overflow: hidden; }   /* every drawing is a crop of the one site section; nothing outside the crop shows */
.drawing .ink, .ink { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.drawing .wl, .wl { stroke-dasharray: 4 5; }
.drawing text, .stage text { fill: currentColor; font-family: "Commissioner", system-ui, sans-serif; font-size: 15px; }
.drawing .num { font-size: 66px; font-weight: 600; font-variation-settings: "FLAR" 100; letter-spacing: -.03em; }
.drawing .lbl { font-weight: 520; }
.drawing .ph { font-weight: 400; }
.window { fill: var(--lamp); stroke: none; }   /* the one lit window; drawn in the arrival crop only, the shared symbol keeps it as an outline */
.elevation { margin-top: 1.25rem; max-width: 30rem; }
.facts { display: none; }
.drawing-cap { margin-top: .5rem; }

/* the request stage: the submerged treads behind the form, the water line as its top edge, the water rising on scroll */
.request { position: relative; isolation: isolate; margin-top: 1.5rem; padding-top: 1.25rem; }
.treads { position: absolute; inset: 0 calc(-1 * var(--gutter)) 0 -3rem; overflow: clip; pointer-events: none; z-index: -1;
  mask-image: linear-gradient(90deg, transparent 0, #000 28%), linear-gradient(180deg, transparent 0, #000 22%, #000 70%, transparent 100%); mask-composite: intersect; -webkit-mask-composite: source-in; }
.treads img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 62%; opacity: .34; filter: saturate(.55); }
.treads .water-rise { position: absolute; inset: 0; background: var(--water); opacity: .7; clip-path: inset(34% 0 0 0); mask-image: linear-gradient(180deg, transparent 0, #000 12rem); }

.form { margin-top: 0; font-size: clamp(1.6rem, 3.3vw, 3.1rem); line-height: 1.2; letter-spacing: -.02em; font-variation-settings: "FLAR" 100; font-weight: 600; max-width: 40rem; }
.form .row { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 0 .3em; padding: .3em 0 .18em; border-bottom: 1px solid rgb(207 217 225 / .6); max-width: none; }
.form .row + .row { margin-top: .1em; }
.form label, .form .row span { font-weight: 600; white-space: nowrap; letter-spacing: -.01em; word-spacing: .06em; }
.form input {
  font: inherit; color: var(--mist); background: transparent;
  border: 0; border-radius: 0; padding: .02em .3em 0; margin: 0;
  line-height: 1.2; min-height: 1.25em; color-scheme: dark; font-variant-numeric: tabular-nums;
  font-variation-settings: "FLAR" 100; font-weight: 600;
}
.form input::placeholder { color: var(--mist-muted); font-weight: 400; }
.form input[type="date"]:invalid { color: var(--mist-muted); font-weight: 400; }   /* the empty date reads like the other placeholders, not like an entered value */
.form input[type="text"] { flex: 1 1 8em; min-width: 0; }
.form input[type="date"] { width: 6.1em; }
.form input[type="number"] { width: 2.2em; text-align: center; }
.form input[type="email"] { flex: 1 1 8em; min-width: 0; }
.form input:focus-visible { outline: 0; box-shadow: 0 2px 0 0 var(--lamp); }
.form input::-webkit-calendar-picker-indicator { display: none; }
.form .note { font-size: .95rem; line-height: 1.5; color: var(--mist); font-variation-settings: "FLAR" 0; font-weight: 400; letter-spacing: 0; max-width: 34rem; }
.form .note-top { margin-bottom: .75rem; }
.form .note-bottom { margin-top: 1rem; }
.form .demo { margin-top: 1.25rem; color: var(--mist); font-weight: 500; padding: .6rem .9rem; border: 1px solid var(--border-strong); max-width: 34rem; font-size: 1rem; line-height: 1.45; letter-spacing: 0; font-variation-settings: "FLAR" 0; }
.form .demo[hidden] { display: none; }
.form .plank { margin-top: 2rem; width: 100%; min-height: 5.6rem; font-size: 1.5rem; letter-spacing: .01em; font-weight: 600; font-variation-settings: "FLAR" 0; justify-content: flex-start; align-items: flex-start; padding: 1.1rem 2rem 1.4rem; z-index: 2; margin-bottom: 2.5rem; overflow: clip; box-shadow: inset 0 -.85rem 0 var(--lamp-edge), inset 0 2px 0 rgb(255 255 255 / .5); }


/* the lake: the deepest point. Surroundings in the right column beside the hanging photograph, then the seasons stage */
.lake { padding-block: var(--space-section) 0; }
.lake .copy { grid-column: 7 / 13; padding-top: 3.25rem; }
.lake h2 { max-width: 14em; }

/* the depth strip: the water seen from above, tea brown at the surface and peat at depth, the four treads fading into it */
.depth { position: relative; margin: var(--space-section) calc(-1 * var(--gutter)) 0; height: clamp(16rem, 46vh, 26rem); background: linear-gradient(180deg, var(--tea) 0, #3b2e20 30%, var(--peat) 100%); overflow: clip; }
.depth svg { position: absolute; inset: 0; width: 100%; height: 100%; mask-image: linear-gradient(180deg, #000 0, #000 30%, transparent 92%); }
.depth .ink { stroke: var(--mist); stroke-width: 2; }
.depth .surface { stroke: var(--mist); stroke-width: 1; stroke-dasharray: 4 5; }
.depth .label { position: absolute; left: var(--gutter); bottom: 1.25rem; max-width: 30rem; color: var(--mist); }
.depth .label b { font-weight: 560; }
.depth .mark { position: absolute; right: var(--gutter); top: 1rem; color: var(--mist); font-size: .9rem; }

/* the seasons: one staircase at content width, sticky at the top of the viewport while the four seasons pass under it; the water line moves to its tread per season (scroll-linked, the immersive section). Resting state: the line at the spring tread, every season readable */
.seasons { margin-top: var(--space-air); timeline-scope: --s1, --s2, --s3, --s4; }
.seasons .intro { max-width: 34rem; margin-bottom: 2rem; }
.stage { position: sticky; top: 0; z-index: 1; background: var(--peat); padding-block: 1rem .5rem; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); border-bottom: 1px solid rgb(207 217 225 / .25); }
.stage svg { display: block; width: 100%; max-height: 44vh; height: auto; overflow: hidden; margin-inline: auto; }
.stage .waterfill { fill: url(#water-grad); opacity: .78; }
.stage .icefill { fill: var(--mist); opacity: .5; }
.stage .wl-group { translate: 0 0; }
.stage .mistband { opacity: 0; fill: var(--mist); }
.stage .ice { opacity: 0; }
.stage .ice line { stroke-dasharray: none; }
.stage .reading { font-size: 15px; font-weight: 520; }
.season-list { list-style: none; }
.season { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; min-height: 40vh; padding-block: 2.5rem; border-top: 1px solid rgb(207 217 225 / .35); }
.season:first-child { border-top: 0; }
.season h3 { grid-column: 1 / 6; font-size: clamp(2.2rem, 5vw, 4.8rem); }
.season .text { grid-column: 7 / 13; }
.season p { max-width: 30rem; font-size: clamp(1rem, .95rem + .3vw, 1.2rem); line-height: 1.5; }
.season .reading { margin-top: .75rem; font-size: .9rem; color: var(--mist-muted); }
.s1 { view-timeline: --s1 block; } .s2 { view-timeline: --s2 block; } .s3 { view-timeline: --s3 block; } .s4 { view-timeline: --s4 block; }
.lake .photo-winter { grid-column: 7 / 13; margin-top: var(--space-section); margin-right: calc(-1 * var(--gutter)); margin-bottom: -14rem; z-index: 2; }
.lake .photo-winter img { aspect-ratio: 16 / 10; object-position: 50% 60%; }
.lake .photo-winter figcaption { padding-left: 0; padding-right: var(--gutter); color: var(--peat); }   /* the caption lands on the spruce band the photograph crosses into */

/* rest: the climb back into the warm house. Food on the lit spruce */
.rest { padding-block: 5rem var(--space-section); }
.rest .copy { grid-column: 1 / 6; padding-top: .5rem; }
.rest h2 { margin-bottom: 2rem; }
.rest h2 span { display: block; }
.rest .photo-table { grid-column: 7 / 13; margin-right: calc(-1 * var(--gutter)); margin-top: 16rem; margin-bottom: -9rem; z-index: 2; }
.rest .photo-table img { aspect-ratio: 16 / 10; object-position: 60% 50%; }
.rest .photo-table figcaption { padding-left: 0; padding-right: var(--gutter); }
.rest dl { display: grid; grid-template-columns: max-content 1fr; column-gap: 1.25rem; row-gap: .4rem; margin-top: 2rem; max-width: 34rem; }
.rest dt { font-weight: 560; }

/* rooms: the mist band, the top of the stairs at morning. Three treads climb out of the water, the price rises with the step */
.rooms { padding-block: calc(9rem + var(--space-section)) var(--space-section); }
.rooms .copy { grid-column: 1 / 7; }
.rooms .locator { grid-column: 8 / 13; max-width: 26rem; margin-top: .75rem; justify-self: end; }
.stair { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; margin-top: 4rem; border-bottom: 1px dashed var(--water); position: relative; list-style: none; }
.stair li { border-top: 1.5px solid var(--peat); border-left: 1.5px solid var(--peat); padding: 1.25rem clamp(1rem, 2vw, 1.75rem) 3.25rem; position: relative; }
.stair li:nth-child(1) { margin-top: 7rem; }   /* equal risers of 3.5 rem: the lowest tread stands in the water */
.stair li:nth-child(2) { margin-top: 3.5rem; }
.stair li:nth-child(3) { margin-top: 0; }
.stair h3 { font-size: clamp(1.5rem, 2.4vw, 2.2rem); }
.stair .price { display: block; margin-top: 1rem; font-size: clamp(2rem, 3.6vw, 3.4rem); font-weight: 600; font-variation-settings: "FLAR" 100; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.stair .price small { display: block; font-size: .9rem; font-weight: 400; font-variation-settings: "FLAR" 0; letter-spacing: 0; color: var(--water); margin-top: .5rem; line-height: 1.4; }
.stair p { margin-top: 1rem; max-width: 24rem; }
.stair .under { position: absolute; left: 0; right: 0; bottom: 0; height: 2rem; background: rgb(53 76 86 / .14); pointer-events: none; }   /* the lowest tread stands in the water */
.rooms .after { grid-column: 1 / 13; margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem; }
.rooms .after p { max-width: 34rem; }
.rooms .plank { font-variation-settings: "FLAR" 0; }

/* arrival: the whole site section at one scale, the one lit window */
.arrival { padding-block: var(--space-section) var(--space-section); overflow: clip; }
.arrival .copy { grid-column: 1 / 7; }
.arrival .site { grid-column: 1 / 13; margin-top: 3rem; margin-inline: calc(-1 * var(--gutter)); width: calc(100% + 2 * var(--gutter)); max-width: none; }   /* full bleed: the site section is the structure of the page, not an illustration in a column */
.arrival .site .walk { stroke: var(--lamp); stroke-dasharray: 3 6; }
.arrival .site .window { opacity: 1; }
.arrival .site .glow { opacity: 1; }
.arrival .how { grid-column: 7 / 13; display: grid; grid-template-columns: max-content 1fr; column-gap: 1.25rem; row-gap: .5rem; align-self: end; max-width: 34rem; }
.arrival .how dt { font-weight: 560; }
.arrival .site-cap { grid-column: 1 / 13; margin-top: .75rem; }
.site-phone { display: none; grid-column: 1 / 13; margin-top: 2rem; }
.site-phone svg + svg { margin-top: 1.5rem; }
.site-phone .big { font-size: 24px; font-weight: 520; }
.site-phone .num { font-size: 72px; }
.site-phone .walk { stroke: var(--lamp); stroke-dasharray: 3 6; }

/* FAQ: four water lines across the full width, each question marked with its tread; an opened answer sinks below its line onto the water */
.faq { padding-block: var(--space-section); }
.faq .copy { grid-column: 1 / 13; margin-bottom: 2.5rem; }
.faq .list { grid-column: 1 / 13; }
.faq details { border-top: 1px dashed rgb(207 217 225 / .7); }
.faq details:last-child { border-bottom: 1px dashed rgb(207 217 225 / .7); }
.faq summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: 3.5rem 1fr; align-items: center; column-gap: 1.25rem; padding: 1.25rem 0; font-size: clamp(1.3rem, 1rem + 1.2vw, 2.1rem); font-weight: 600; font-variation-settings: "FLAR" 100; letter-spacing: -.015em; line-height: 1.15; }
.faq summary::-webkit-details-marker { display: none; }
.faq .tread-mark { width: 3.5rem; height: auto; display: block; overflow: visible; }
.faq .tread-mark .dot { fill: var(--lamp); }
.faq details[open] { background: var(--water); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
.faq details p { padding: 0 0 1.5rem 4.75rem; max-width: 40rem; color: var(--mist); }

/* the closing: a second descent. The treads return at full strength, the water rises as the visitor arrives, the plank in the water once more */
.again { position: relative; isolation: isolate; overflow: clip; min-height: 40rem; padding-block: var(--space-air); display: grid; align-content: center; }
.again .treads { inset: 0; mask-image: linear-gradient(90deg, transparent 0, #000 35%), linear-gradient(180deg, #000 0, #000 60%, transparent 100%); }
.again .treads img { opacity: .6; filter: saturate(.7); object-position: 70% 60%; }
.again .treads .water-rise { clip-path: inset(50% 0 0 0); opacity: .9; }
.again .copy { grid-column: 1 / 8; position: relative; z-index: 1; }
.again h2 { font-size: clamp(2.5rem, 5.4vw, 5.2rem); }
.again .copy p { margin-top: 1.5rem; max-width: 28rem; }
.again .plank { margin-top: 2.5rem; min-height: 5.2rem; overflow: clip; font-size: 1.5rem; letter-spacing: .01em; font-weight: 600; padding: 1rem 2.25rem 1.5rem; box-shadow: inset 0 -.85rem 0 var(--lamp-edge), inset 0 2px 0 rgb(255 255 255 / .5); }

/* footer: the bottom of the lake. The lake-bed line of the site section is the footer's top edge, the water of the closing above it, the lines as labels on the bed */
.foot { padding-block: 0 2rem; color: var(--mist-muted); font-size: .9rem; }
.foot .lakebed { display: block; width: 100%; height: clamp(3rem, 8vw, 7rem); margin-inline: calc(-1 * var(--gutter)); width: calc(100% + 2 * var(--gutter)); }
.foot .lakebed .bed { stroke: var(--mist); stroke-width: 1.5; fill: none; vector-effect: non-scaling-stroke; }
.foot .grid { row-gap: 1rem; margin-top: 1.5rem; }
.foot .col { grid-column: span 4; display: grid; gap: .35rem; }
.foot .col:nth-child(2) { grid-column: 5 / 9; }
.foot .col:nth-child(3) { grid-column: 9 / 13; }
.foot .fine { grid-column: 1 / 13; margin-top: 1.5rem; font-size: .8rem; }

/* scroll-linked: the water rises over the treads as the hero exits, photographs open downward as they enter,
   the water rises behind the form, the water line draws itself, the seasons move the water line, the walk draws itself and the window lights */
@supports (animation-timeline: view()) {
  .hero-water { animation: rise-hero linear forwards; animation-timeline: view(); animation-range: exit 0% exit 72%; }
  .photo img { animation: descend linear forwards; animation-timeline: view(); animation-range: entry 0% entry 100%; }
  .treads .water-rise { animation: rise-water linear forwards; animation-timeline: view(); animation-range: entry 25% entry 100%; }
  .again .treads .water-rise { animation: rise-again linear forwards; animation-timeline: view(); animation-range: entry 10% cover 70%; }
  .elevation { view-timeline: --draw block; }
  .elevation .wl { animation: draw linear forwards; animation-timeline: --draw; animation-range: entry 40% cover 60%; }
  .stage .wl-group { animation: wl-sommer linear forwards, wl-herbst linear forwards, wl-winter linear forwards; animation-timeline: --s2, --s3, --s4; animation-range: entry 0% entry 100%, entry 0% entry 100%, entry 0% entry 100%; }
  .stage .mistband { animation: show linear forwards, hide linear forwards; animation-timeline: --s3, --s4; animation-range: entry 0% entry 100%, entry 0% entry 100%; }
  .stage .ice { animation: show linear forwards; animation-timeline: --s4; animation-range: entry 0% entry 100%; }
  .arrival .site { view-timeline: --site block; }
  .arrival .site .walk { animation: walk linear forwards; animation-timeline: --site; animation-range: entry 20% cover 55%; }
  .arrival .site .glow { animation: show linear both; animation-timeline: --site; animation-range: entry 10% entry 70%; }   /* the window is lit at rest; its glow comes up as the drawing enters */
}
@keyframes rise-hero { from { translate: 0 100%; } to { translate: 0 -10%; } }
@keyframes rise-again { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(50% 0 0 0); } }
@keyframes descend { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes rise-water { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(34% 0 0 0); } }
@keyframes draw { from { stroke-dashoffset: 320; } to { stroke-dashoffset: 0; } }
@keyframes walk { from { stroke-dashoffset: 1400; } to { stroke-dashoffset: 0; } }
@keyframes show { from { opacity: 0; } to { opacity: 1; } }
@keyframes hide { from { opacity: 1; } to { opacity: 0; } }
@keyframes wl-sommer { from { translate: 0 0; } to { translate: 0 24px; } }
@keyframes wl-herbst { from { translate: 0 24px; } to { translate: 0 12px; } }
@keyframes wl-winter { from { translate: 0 12px; } to { translate: 0 12px; } }

@media (max-width: 900px) {
  /* the hero below 900 px: the treads keep the upper half, the copy sits on the black water below them, the plank spans the bottom */
  .hero { min-height: 36rem; }
  .hero-img { object-position: 58% 50%; }
  .hero-copy { top: auto; bottom: 8.75rem; max-width: 36rem; }
  .hero h1 { font-size: clamp(2.6rem, 9vw, 4.5rem); }
  .hero::before { background: linear-gradient(180deg, rgb(24 28 21 / 0) 34%, rgb(24 28 21 / .66) 48%, rgb(24 28 21 / .66) 88%, rgb(24 28 21 / .4) 100%); }
  .hero-shade { mask-image: linear-gradient(195deg, transparent 0, transparent calc(var(--lit) - 16%), #000 calc(var(--lit) + 2%)); }
  .btn-step { left: var(--gutter); right: var(--gutter); top: auto; bottom: 3.5rem; width: auto; rotate: none; clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%); font-size: 1.25rem; min-height: 4.6rem; }
  .cap-hero { bottom: .75rem; max-width: none; }
  .heat .copy, .heat .photo, .cold .photo, .copy-cold, .lake .copy, .lake .photo-winter, .rest .copy, .rest .photo-table, .rooms .copy, .rooms .locator, .arrival .copy, .arrival .how, .faq .copy, .faq .list, .again .copy { grid-column: 1 / -1; grid-row: auto; }
  .heat { padding-bottom: 0; }
  .heat .copy p { margin-bottom: 1.5rem; }
  .heat h2 { margin-bottom: 0; margin-left: 0; }
  .heat h2 .cold-word { color: var(--mist); }   /* both lines stay together above the photograph on phones; mist on spruce reads at display size */
  .copy-cold { padding-top: 2rem; }
  .cold { padding-top: 1rem; }
  .cold .copy-cold { order: 1; padding-top: 2.5rem; }
  .cold .photo { order: 2; margin-top: 2.5rem; margin-bottom: 0; }
  .heat .photo { order: 2; margin-top: 1.5rem; margin-right: calc(-1 * var(--gutter)); margin-bottom: 0; }
  .request { margin-top: 2.5rem; }
  .heat .photo img { aspect-ratio: 3 / 2; }
  .heat .photo figcaption { padding-inline: var(--gutter); color: var(--peat); }
  .cold .photo { margin-top: 0; margin-right: calc(-1 * var(--gutter)); margin-bottom: 0; }
  .cold .photo img { aspect-ratio: 3 / 2; object-position: 50% 50%; }
  .cold .photo figcaption { padding-inline: var(--gutter); }
  .treads { inset: -2rem calc(-1 * var(--gutter)) 0 calc(-1 * var(--gutter)); }
  .lake, .arrival, .rest, .again { padding-top: 5.5rem; }
  .depth .mark { display: none; }
  .site { display: none; }
  .site-phone { display: block; }
  .arrival .site-cap { margin-top: 1rem; }
  .lake .copy { padding-top: 0; }
  .seasons { margin-top: 4rem; }
  .stage { padding-block: .75rem .5rem; }
  .stage svg { max-height: 34vh; }
  .season { min-height: 0; padding-block: 2.5rem; display: block; }
  .season .text { margin-top: 1rem; }
  .lake .photo-winter { margin-top: 3rem; margin-left: calc(-1 * var(--gutter)); margin-bottom: -6rem; }
  .lake .photo-winter figcaption { padding-inline: var(--gutter); }
  .rest { padding-top: 8rem; }
  .rest .photo-table { margin-top: 2.5rem; margin-left: calc(-1 * var(--gutter)); margin-bottom: 0; }
  .rest .photo-table figcaption { padding-inline: var(--gutter); }
  .rooms { padding-top: var(--space-section); }
  .rooms .locator { justify-self: start; margin-top: 1.5rem; max-width: 22rem; }
  .stair { grid-template-columns: 1fr; margin-top: 2.5rem; align-items: start; }
  .stair li:nth-child(n) { min-height: 0; }
  .stair li:nth-child(2) { margin-left: 1.5rem; }
  .stair li:nth-child(3) { margin-left: 3rem; }
  .stair .under { display: none; }
  .arrival .how { margin-top: 2rem; }
  .faq .list { margin-top: 0; }
  .faq summary { grid-template-columns: 2.5rem 1fr; column-gap: .9rem; }
  .faq .tread-mark { width: 2.5rem; }
  .faq details p { padding-left: 0; }
  .depth { height: clamp(14rem, 36vh, 20rem); }
  .again { min-height: 0; padding-top: 5.5rem; }
  .again .treads { mask-image: linear-gradient(180deg, transparent 0, transparent 38%, #000 70%); }   /* the copy sits on clear water, the treads below it */
  .again .treads img { opacity: .55; }
  .again .plank { width: 100%; justify-content: flex-start; }
  .foot .col, .foot .col:nth-child(2), .foot .col:nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  :root { --h2-step: clamp(2.6rem, 12.5vw, 3.6rem); }
  .top { padding: 1rem var(--gutter); flex-direction: column; align-items: flex-start; gap: .6rem; }
  .top nav ul { gap: .35rem 1.1rem; font-size: .95rem; }
  .top nav li:last-child { display: none; } /* the request plank sits in the first viewport */
  .cold .copy-cold { padding-top: 2rem; }
  .mark .glyph { width: 5rem; }
  .cap-hero { bottom: .75rem; max-width: none; }
  .drawing .lbl, .drawing .ph { display: none; }
  .drawing .lbl.keep { display: block; }
  .elevation { max-width: none; }
  .facts { display: grid; grid-template-columns: 1fr; row-gap: .15rem; margin-top: 1.5rem; font-size: 1.05rem; line-height: 1.4; }
  .facts dt { font-weight: 560; }
  .facts dd { margin-bottom: .6rem; }
  .form { font-size: 1.55rem; }
  .form input[type="date"] { width: 6.4em; }
  .stage .reading { display: none; }
  .rest dl, .arrival .how { grid-template-columns: 1fr; row-gap: .15rem; }
  .rest dd, .arrival .how dd { margin-bottom: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .top, .hero-shade, .lede, .btn-step::before, .btn-step::after, .photo img, .hero-water, .treads .water-rise, .again .treads .water-rise, .elevation .wl, .stage .wl-group, .stage .mistband, .stage .ice, .arrival .site .walk, .arrival .site .glow { animation: none; }
  .hero-shade { opacity: 0; }
  .btn-step::before { opacity: 0; }
  .btn-step::after { translate: 260% 0; }
  .stage .wl-group { translate: 0 12px; }
  .plank, a.text, .faq summary::after { transition: none; }
}
/* QA hook: open the page with #qa to hide the hero text for the contrast measurement of the photograph */
body:has(#qa:target) .top, body:has(#qa:target) .hero-copy, body:has(#qa:target) .btn-step, body:has(#qa:target) .cap-hero { visibility: hidden; }

@media print {
  /* print: ink on paper, a deliberate #111 on #fff for the printed page, not the page's theme */
  .hero { height: auto; min-height: 0; }
  .hero-img, .hero-water, .hero-shade, .hero::before, .treads { display: none; }
  .hero-copy, .btn-step, .top, .cap-hero { position: static; translate: none; rotate: none; }
  .stage { position: static; }
  body, .band, .again { background: #fff; color: #111; }
  .facts { display: grid; }
}