/* VILLA IMERA - a villa page drawn as a navigational chart of one day.
   Two palettes run the page. The CHROME palette (--c-*) belongs to the frame, the header and
   the day scene, and main.js moves it through dawn, noon, dusk and night while the day plays.
   The SHEET palette (--s-*) is the chart paper the later sections are printed on; it never
   moves. Magenta is the one accent and it means only two things: the action, and the live
   state (the chosen week, the room you are in, the lit light). */

:root {
  --s-paper: #fafcfd;
  --s-ink: #151a1f;
  --s-soft: #4a5561;
  --s-tint1: #e4f1f8;
  --s-tint2: #c9e3ef;
  --s-tint3: #a9d0e2;
  --s-land: #eadcb4;
  --s-mag: #ad1379;

  /* chrome starts as the day sheet; main.js takes it over (dawn first) */
  --c-paper: #fafcfd;
  --c-ink: #151a1f;
  --c-soft: #4a5561;
  --c-mag: #ad1379;
  --c-glow: 0;

  --f-title: "Castoro Titling", "Castoro", Georgia, serif;
  --f-serif: "Castoro", Georgia, "Times New Roman", serif;
  --f-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --frame: 8px;
  --gutter: 18px;
  --bar: 54px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}
@media (min-width: 900px) {
  :root { --frame: 14px; --gutter: 44px; --bar: 64px; }
}

/* self-hosted faces (OFL, licences beside the files): no request leaves this page for a font */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 300 700; font-stretch: 62% 125%; font-display: swap; src: url(fonts/Archivo-normal-latin-ext.woff2) format('woff2'); 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; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 300 700; font-stretch: 62% 125%; font-display: swap; src: url(fonts/Archivo-normal-latin.woff2) format('woff2'); 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: 'Castoro'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/Castoro-italic-latin-ext.woff2) format('woff2'); 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; }
@font-face { font-family: 'Castoro'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/Castoro-italic-latin.woff2) format('woff2'); 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: 'Castoro'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/Castoro-normal-latin-ext.woff2) format('woff2'); 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; }
@font-face { font-family: 'Castoro'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/Castoro-normal-latin.woff2) format('woff2'); 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: 'Castoro Titling'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/CastoroTitling-normal-latin-ext.woff2) format('woff2'); 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; }
@font-face { font-family: 'Castoro Titling'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/CastoroTitling-normal-latin.woff2) format('woff2'); 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; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--c-paper); }
body {
  margin: 0;
  background: var(--s-paper);
  color: var(--s-ink);
  font-family: var(--f-serif);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums proportional-nums;
  overflow-x: clip;
  caret-color: var(--s-mag);
}
::selection { background: var(--s-mag); color: var(--s-paper); }
img, svg, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--s-mag); outline-offset: 3px; }
html { scrollbar-color: var(--c-ink) var(--c-paper); scrollbar-width: thin; }

.skip {
  position: fixed; left: calc(var(--frame) + 8px); top: -60px; z-index: 90;
  background: var(--s-mag); color: var(--s-paper); padding: 10px 14px;
  font: 600 .8rem/1 var(--f-sans); letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
}
.skip:focus { top: calc(var(--frame) + 8px); }

/* ── the neatline: the chart border every sheet of this page is printed inside ── */
.neatline { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.nl { position: absolute; background: var(--c-paper); }
.nl::before { content: ""; position: absolute; }
.nl-t, .nl-b { left: 0; right: 0; height: var(--frame); }
.nl-l, .nl-r { top: 0; bottom: 0; width: var(--frame); }
.nl-t { top: 0; border-bottom: 1px solid var(--c-ink); }
.nl-b { bottom: 0; border-top: 1px solid var(--c-ink); }
.nl-l { left: 0; border-right: 1px solid var(--c-ink); }
.nl-r { right: 0; border-left: 1px solid var(--c-ink); }
/* graduated bars: alternating minutes, the way a chart border counts latitude */
.nl-t::before, .nl-b::before { left: 0; right: 0; top: calc(50% - 1px); height: 2px;
  background: repeating-linear-gradient(90deg, var(--c-ink) 0 20px, transparent 20px 40px); opacity: .8; }
.nl-l::before, .nl-r::before { top: 0; bottom: 0; left: calc(50% - 1px); width: 2px;
  background: repeating-linear-gradient(180deg, var(--c-ink) 0 20px, transparent 20px 40px); opacity: .8; }
@media (min-width: 900px) {
  .nl-t::before, .nl-b::before { top: calc(50% - 1.5px); height: 3px; }
  .nl-l::before, .nl-r::before { left: calc(50% - 1.5px); width: 3px; }
}
.nl-c { position: absolute; display: none; font: 500 9px/1 var(--f-sans); font-stretch: 75%;
  letter-spacing: .06em; color: var(--c-ink); background: var(--c-paper); padding: 0 4px; }
@media (min-width: 900px) {
  .nl-c { display: block; }
  .nl-c-tl { top: 2px; left: 44px; }
  .nl-c-br { bottom: 2px; right: 44px; }
}

/* ── header ── */
.bar {
  position: fixed; z-index: 55; top: var(--frame); left: var(--frame); right: var(--frame);
  height: var(--bar); display: flex; align-items: center; gap: 14px;
  padding: 0 var(--gutter); color: var(--c-ink); background: var(--c-paper);
}
.mark { display: flex; align-items: center; gap: 9px; text-decoration: none; margin-right: auto; }
.mark-star { width: 15px; height: 15px; fill: var(--c-ink); }
.mark-word { font: 400 1.05rem/1 var(--f-title); letter-spacing: .28em; text-transform: uppercase; padding-top: 2px; }
/* at night Hesper's star is the evening star: it lights, isophase, four seconds */
html[data-lit="1"] .mark-star { fill: var(--c-mag); animation: iso 4s steps(1, end) infinite; }
@keyframes iso { 0%, 49.99% { opacity: 1; } 50%, 100% { opacity: .25; } }
.concept {
  font: 500 .72rem/1 var(--f-sans); font-stretch: 80%; letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-soft); border: 1px solid currentColor; padding: 5px 7px 4px;
}
.bar-act {
  font: 600 .74rem/1 var(--f-sans); font-stretch: 85%; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; color: var(--c-mag); border: 1px solid var(--c-mag); padding: 9px 12px 8px;
  transition: background .25s; /* no colour transition: the day moves this colour every frame, and a lag reads as low contrast */
}
.bar-act:hover { background: var(--c-mag); color: var(--c-paper); }
.concept-long { display: none; }
@media (min-width: 560px) { .concept-long { display: inline; } }

/* ── DAY: the pinned scene ── */
.day { position: relative; background: var(--c-paper); color: var(--c-ink); }
.day-stage {
  display: grid; gap: 14px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "plate" "cart" "notes";
  padding: calc(var(--frame) + var(--bar)) calc(var(--frame) + var(--gutter)) calc(var(--frame) + 18px);
}
.plate { grid-area: plate; position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 5;
  border: 1px solid var(--c-ink); background: #9aa6ad; }
.plate-still, .plate-gl { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 46% 55%; }
@media (max-width: 899px) { .plate-still { object-position: 30% 55%; } }
.plate-gl { opacity: 0; transition: opacity .9s var(--ease); }
.plate.gl-on .plate-gl { opacity: 1; }
.plate-cap {
  position: absolute; left: 8px; top: 8px; padding: 5px 8px 6px; max-width: calc(100% - 110px);
  font: 500 .74rem/1.3 var(--f-sans); font-stretch: 85%; letter-spacing: .02em;
  color: var(--c-ink); background: color-mix(in srgb, var(--c-paper) 92%, transparent); border: 1px solid var(--c-ink);
}
.tilt {
  position: absolute; left: 8px; top: 52px; z-index: 3;
  font: 600 .7rem/1 var(--f-sans); font-stretch: 85%; letter-spacing: .12em; text-transform: uppercase;
  background: var(--c-paper); color: var(--c-ink); border: 1px solid var(--c-ink); padding: 9px 11px 8px;
}

.rose { grid-area: plate; justify-self: end; align-self: start; z-index: 2; margin: 10px 10px 0 0; position: relative;
  width: 70px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.rose svg { width: 100%; height: auto; overflow: visible; }
.rose-ring { fill: none; stroke: currentColor; stroke-width: 1; }
.rose-tick { fill: none; stroke: currentColor; stroke-width: 3; stroke-dasharray: .35 4.65; }
.rose-tick-major { fill: none; stroke: currentColor; stroke-width: 7; stroke-dasharray: .5 29.5; }
.rose-north { fill: currentColor; }
.rose-n { fill: currentColor; font: 600 11px/1 var(--f-sans); text-anchor: middle; }
.rose-sun circle { fill: currentColor; }
.rose-sun path { stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.rose-sun { transform: rotate(var(--sun, 68deg)) translateY(-47px); transition: opacity .6s; }
html[data-lit="1"] .rose-sun { opacity: 0; }
.rose-read { position: absolute; right: calc(100% + 6px); bottom: 4px; margin: 0; display: flex; gap: 5px; white-space: nowrap;
  padding: 4px 6px; color: var(--c-ink); background: color-mix(in srgb, var(--c-paper) 92%, transparent); border: 1px solid var(--c-ink);
  font: 600 .72rem/1 var(--f-sans); font-stretch: 82%; letter-spacing: .08em; text-transform: uppercase;
  font-variant-numeric: tabular-nums lining-nums; }
.rose-what { font-weight: 400; }

.cartouche { grid-area: cart; border-top: 3px double var(--c-ink); border-bottom: 1px solid var(--c-ink); padding: 12px 0 11px; }
.title { margin: 0; font: 400 clamp(2.35rem, 11.2vw, 5.4rem)/.95 var(--f-title); letter-spacing: .07em;
  text-transform: uppercase; }
.place { margin: 8px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: 1.12rem; }
.place em { font-style: italic; }
.coords, .facts, .clock { font-family: var(--f-sans); font-stretch: 82%; font-variant-numeric: tabular-nums lining-nums; }
.coords { font-size: .8rem; letter-spacing: .08em; color: var(--c-soft); }
.facts { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 2px 0; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }
.facts span + span::before { content: ""; display: inline-block; width: 1px; height: .8em; margin: 0 10px; background: currentColor; vertical-align: -1px; opacity: .6; }
.clock { margin: 10px 0 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.clock-time { font-size: 1.7rem; font-weight: 600; letter-spacing: .02em; line-height: 1; }
.clock-label { font: italic 1.02rem/1 var(--f-serif); }
.clock-cue { margin-left: auto; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-soft); }

.notes { grid-area: notes; list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.note { font-size: 1rem; line-height: 1.45; }
.note-ref, .note-time { font-family: var(--f-sans); font-stretch: 82%; font-variant-numeric: tabular-nums lining-nums; }
.note-ref { display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; margin-right: 8px;
  border: 1px solid currentColor; font-size: .72rem; font-weight: 600; vertical-align: 1px; }
.note-time { font-size: .78rem; font-weight: 600; letter-spacing: .06em; margin-right: 8px; }

/* JavaScript on: the scene pins and the day plays over five screens */
.js .day { height: 520svh; }
.js .day-stage { position: sticky; top: 0; height: 100svh; min-height: 520px;
  grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "plate" "cart"; gap: 12px; }
.js .plate { aspect-ratio: auto; }
.js .notes { grid-area: plate; align-self: end; z-index: 2; margin: 10px; display: block; position: relative; }
.js .note { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px 11px;
  background: color-mix(in srgb, var(--c-paper) 92%, transparent); color: var(--c-ink);
  border: 1px solid var(--c-ink); opacity: 0; transform: translateY(8px);
  transition: opacity .45s var(--ease), transform .45s var(--ease); }
.js .note.on { opacity: 1; transform: none; }
.js .clock-cue { transition: opacity .4s; }
.js .day.moving .clock-cue { opacity: 0; }

@media (min-width: 900px) {
  .day-stage { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); column-gap: 44px;
    grid-template-areas: "plate cart" "plate notes"; }
  .plate { aspect-ratio: 16 / 11; }
  .js .day-stage { grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "plate rose" "plate cart" "plate notes"; row-gap: 0; }
  .js .plate { grid-row: 1 / -1; }
  .rose, .js .rose { grid-area: rose; justify-self: start; margin: 4px 0 0; width: 96px; color: var(--c-ink); filter: none; }
  .rose-read { position: static; justify-content: flex-start; padding: 0; background: none; border: 0; }
  .js .cartouche { align-self: center; }
  .js .notes { grid-area: notes; align-self: end; margin: 0 0 4px; min-height: 9.5rem; }
  .js .note { background: transparent; border: 0; border-top: 1px solid var(--c-ink); padding: 14px 0 0; font-size: 1.12rem; }
  .title { font-size: clamp(3rem, 5.2vw, 5.6rem); }
}
@media (min-width: 900px) and (max-height: 760px) {
  .title { font-size: clamp(2.6rem, 4.4vw, 4.4rem); }
  .js .notes { min-height: 8rem; }
}

/* ── SHEETS: the chart paper everything after the day is printed on ── */
.sheet { position: relative; z-index: 1; background: var(--s-paper); color: var(--s-ink);
  padding: calc(var(--bar) + 56px) calc(var(--frame) + var(--gutter)) 88px; border-top: 1px solid var(--s-ink); }
.sheet h2 { margin: 0; max-width: 13ch; font: 400 clamp(2.1rem, 9vw, 3.9rem)/1.02 var(--f-serif); letter-spacing: -.012em; text-wrap: balance; }
.lede { margin: 18px 0 0; max-width: 38ch; font-size: 1.14rem; line-height: 1.5; color: var(--s-soft); text-wrap: pretty; }
.fine { margin: 26px 0 0; max-width: 60ch; font-size: .92rem; color: var(--s-soft); }

/* chart */
.chart { margin: 34px calc(-1 * var(--gutter)) 0; border-top: 1px solid var(--s-ink); border-bottom: 1px solid var(--s-ink); }
.chart-svg { width: 100%; height: auto; }
.key { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 2px; }
.key-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--s-ink) 22%, transparent);
  padding: 11px 0; font-size: 1.02rem; line-height: 1.3; }
.key-item svg { flex: none; width: 22px; height: 22px; overflow: visible; }
.key-item[aria-pressed="true"] { color: var(--s-mag); }
.k-light { fill: currentColor; }
.k-path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-dasharray: 1.5 2.5; stroke-linecap: round; }
.k-road { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-dasharray: 5 3; }
.k-bearing { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-dasharray: 5 2 1 2; }
.c-deep { fill: var(--s-paper); }
.c-d50 { fill: var(--s-tint1); }
.c-d20 { fill: var(--s-tint2); }
.c-d10 { fill: var(--s-tint3); }
.c-land { fill: var(--s-land); }
.c-coast { fill: none; stroke: var(--s-ink); stroke-width: 1.8; }
.c-contour { fill: none; stroke: var(--s-ink); stroke-width: .7; opacity: .45; }
.c-soundings text { font: italic 17px var(--f-serif); fill: var(--s-soft); }
.c-sea { font: italic 30px var(--f-serif); letter-spacing: .32em; fill: var(--s-soft); }
.c-depth { font: 600 12px var(--f-sans); fill: var(--s-soft); }
.c-bearing { fill: none; stroke: var(--s-ink); stroke-width: 1.2; stroke-dasharray: 9 4 2 4; }
.c-bearing-t { font: italic 16px var(--f-serif); fill: var(--s-ink); }
.c-path { fill: none; stroke: var(--s-ink); stroke-width: 2; stroke-dasharray: 2 5; stroke-linecap: round; }
.c-road { fill: none; stroke: var(--s-ink); stroke-width: 3; stroke-dasharray: 10 5; }
.c-label { font: italic 20px var(--f-serif); fill: var(--s-ink); }
.c-label, .c-small, .c-bearing-t, .c-villa, .c-sea { paint-order: stroke; stroke: var(--s-paper); stroke-width: 4px; stroke-linejoin: round; }
.c-small { font: 500 13px var(--f-sans); font-stretch: 82%; letter-spacing: .04em; fill: var(--s-soft); }
.c-villa { font: 400 22px var(--f-title); letter-spacing: .12em; fill: var(--s-ink); }
.c-light { fill: var(--s-ink); }
.c-light-flare { fill: var(--s-ink); opacity: .75; }
.c-scale path { fill: none; stroke: var(--s-ink); stroke-width: 1.2; }
.c-scale-fill { fill: var(--s-ink); }
.c-scale text, .c-title-b { font: 500 12px var(--f-sans); font-stretch: 82%; fill: var(--s-soft); }
.c-title-a { font: 400 16px var(--f-title); letter-spacing: .1em; fill: var(--s-ink); }
.c-cart { fill: var(--s-paper); stroke: var(--s-ink); stroke-width: 1; }
.c-rose .rose-ring, .c-rose .rose-tick, .c-rose .rose-tick-major { stroke: var(--s-ink); color: var(--s-ink); }
.c-rose .rose-north { fill: var(--s-ink); }
.mk { transition: opacity .35s; }
.chart.focus .mk { opacity: .28; }
.chart.focus .mk.on { opacity: 1; }
.mk.on .c-bearing, .mk.on .c-path, .mk.on .c-road { stroke: var(--s-mag); }
.mk.on text { fill: var(--s-mag); }
.mk.on .c-light, .mk.on .c-light-flare { fill: var(--s-mag); }
.mk-villa.on .c-light-flare { animation: iso 4s steps(1, end) infinite; }

@media (min-width: 900px) {
  .sheet-chart { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 1.9fr); column-gap: 56px; align-items: start; }
  .sheet-chart .chart { margin: 0; border: 1px solid var(--s-ink); }
}

/* house: the plan walk */
.walk { margin-top: 34px; }
.walk-plan { margin: 0 calc(-1 * var(--gutter)); padding: 10px var(--gutter) 12px; position: sticky; z-index: 3;
  top: calc(var(--frame) + var(--bar) - 8px); background: var(--s-paper); border-bottom: 1px solid var(--s-ink); }
.plan-svg { width: 100%; height: auto; max-height: 33svh; margin: 0 auto; }
.pl-terrace { fill: var(--s-land); }
.pl-pool { fill: var(--s-tint3); }
.pl-coping { fill: none; stroke: var(--s-ink); stroke-width: 1; }
.pl-pergola rect { fill: none; stroke: var(--s-ink); stroke-width: 1; }
.pl-pergola path { stroke: var(--s-ink); stroke-width: .6; opacity: .7; }
.pl-room rect:first-child { fill: var(--s-paper); transition: fill .4s; }
.pl-room.on rect:first-child { fill: var(--s-tint1); }
.pl-store rect { fill: color-mix(in srgb, var(--s-ink) 6%, var(--s-paper)); }
.pl-vault { stroke: var(--s-ink); stroke-width: .7; stroke-dasharray: 4 3; }
.pl-furn { fill: none; stroke: var(--s-soft); stroke-width: 1; }
.pl-bath { fill: color-mix(in srgb, var(--s-tint2) 55%, var(--s-paper)); stroke: var(--s-soft); stroke-width: .8; }
.pl-tree { fill: none; stroke: var(--s-ink); stroke-width: 1; stroke-dasharray: 2 2; }
.pl-stair, .pl-stairdown { stroke: var(--s-ink); stroke-width: 1; }
.pl-wall { fill: none; stroke: var(--s-ink); stroke-width: 5; stroke-linejoin: miter; }
.pl-gap { stroke: var(--s-paper); stroke-width: 7; }
.pl-link { stroke: var(--s-ink); stroke-width: 1; stroke-dasharray: 2 3; }
.pl-t { font: 600 18px var(--f-sans); font-stretch: 80%; letter-spacing: .03em; fill: var(--s-ink); }
.pl-t-i { font: italic 21px var(--f-serif); letter-spacing: 0; }
.pl-t-s { font-size: 14px; font-weight: 500; fill: var(--s-soft); }
.pl-cap { font: 400 17px var(--f-title); letter-spacing: .14em; fill: var(--s-ink); text-transform: uppercase; }
.pl-track-base { fill: none; stroke: var(--s-soft); stroke-width: 1.2; stroke-dasharray: 3 4; }
.pl-track { fill: none; stroke: var(--s-mag); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pl-stop { fill: var(--s-paper); stroke: var(--s-ink); stroke-width: 1.5; transition: fill .3s, r .3s; }
.pl-stop.done { fill: var(--s-ink); }
.pl-stop.on { fill: var(--s-mag); stroke: var(--s-mag); }
.pl-scale path { fill: none; stroke: var(--s-ink); stroke-width: 1.2; }
.pl-scale text, .pl-northmark text { font: 500 14px var(--f-sans); fill: var(--s-soft); text-anchor: middle; }
.pl-northmark path { fill: var(--s-ink); }

.stops { list-style: none; margin: 0; padding: 0; }
.stop { padding: 26px 0 34px; border-bottom: 1px solid color-mix(in srgb, var(--s-ink) 20%, transparent); }
.stop picture, .stop img { display: block; width: 100%; height: auto; }
.stop img { aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid var(--s-ink); background: var(--s-tint1); }
.stop-text h3 { margin: 16px 0 0; font: 400 1.7rem/1.1 var(--f-serif); }
.stop-text p { margin: 8px 0 0; max-width: 44ch; }
.stop-ref { font: 600 .7rem/1 var(--f-sans) !important; font-stretch: 80% !important; letter-spacing: .14em;
  text-transform: uppercase; color: var(--s-soft); margin-top: 12px !important; }
.js .stop img { opacity: .35; transition: opacity .6s var(--ease); }
.js .stop.seen img { opacity: 1; }

@media (min-width: 768px) {
  .stop img { aspect-ratio: 4 / 3; }
}
@media (min-width: 900px) {
  .sheet-house { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; }
  .sheet-house .sheet-text { grid-column: 1 / -1; }
  .walk { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; }
  .walk-plan { margin: 0; padding: 0; top: calc(var(--frame) + var(--bar) + 30px); align-self: start; border: 0; background: none; }
  .plan-svg { max-height: none; }
  .stop { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; padding: 40px 0; }
}

/* rates: the almanac */
.almanac { margin-top: 30px; display: grid; gap: 26px; }
.month h3 { margin: 0 0 8px; font: 400 1.05rem/1 var(--f-title); letter-spacing: .16em; text-transform: uppercase;
  padding-bottom: 8px; border-bottom: 3px double var(--s-ink); }
.month ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.wk { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; cursor: pointer;
  text-align: left; padding: 11px 12px 10px; background: var(--s-paper); border: 1px solid color-mix(in srgb, var(--s-ink) 35%, transparent);
  transition: border-color .2s, background .2s, color .2s; min-height: 58px; }
.wk:hover:not(:disabled) { border-color: var(--s-ink); background: var(--s-tint1); }
.wk-d { font: 600 .92rem/1 var(--f-sans); font-stretch: 82%; letter-spacing: .04em; font-variant-numeric: tabular-nums lining-nums; }
.wk-r { font-size: .98rem; line-height: 1; font-variant-numeric: lining-nums; }
/* a booked week is hatched like a restricted area on a chart */
.wk:disabled { cursor: not-allowed; color: var(--s-soft);
  background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--s-ink) 14%, transparent) 6px 7px); }
.wk:disabled .wk-r { font-style: italic; }
.wk[aria-pressed="true"] { border: 2px solid var(--s-mag); padding: 10px 11px 9px; color: var(--s-mag); background: color-mix(in srgb, var(--s-mag) 6%, var(--s-paper)); }
@media (min-width: 900px) {
  .almanac { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
  .month ul { grid-template-columns: 1fr; }
}

/* passage plan: the enquiry */
.plan-form { margin-top: 30px; display: grid; gap: 22px; max-width: 34rem; }
.f { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.f-l { font: 600 .72rem/1 var(--f-sans); font-stretch: 82%; letter-spacing: .1em; text-transform: uppercase; color: var(--s-soft); padding: 0; }
.f select, .f textarea { width: 100%; border: 0; border-bottom: 1px solid var(--s-ink); border-radius: 0; background: transparent;
  padding: 10px 0; font-size: 1.1rem; }
.f select { appearance: none; -webkit-appearance: none; padding-right: 26px; cursor: pointer;
  background: linear-gradient(45deg, transparent 50%, var(--s-ink) 50%) right 8px center / 7px 7px no-repeat,
              linear-gradient(-45deg, transparent 50%, var(--s-ink) 50%) right 1px center / 7px 7px no-repeat; }
.f textarea { resize: vertical; min-height: 5.5rem; line-height: 1.45; }
.f textarea::placeholder { color: color-mix(in srgb, var(--s-soft) 80%, transparent); font-style: italic; }
.f select:focus-visible, .f textarea:focus-visible { outline: none; border-bottom: 2px solid var(--s-mag); }
.stepper { display: flex; align-items: center; gap: 0; }
.step { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--s-ink); background: var(--s-paper); cursor: pointer; }
.step svg { width: 16px; height: 16px; stroke: var(--s-ink); stroke-width: 1.5; fill: none; }
.step:hover { background: var(--s-tint1); }
.stepper output { min-width: 64px; text-align: center; font: 600 1.4rem/1 var(--f-sans); font-stretch: 82%; font-variant-numeric: tabular-nums lining-nums; }
.f-hint { font-size: .95rem; color: var(--s-soft); font-style: italic; }
.act { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 26px;
  background: var(--s-mag); color: var(--s-paper); border: 1px solid var(--s-mag); cursor: pointer; text-decoration: none;
  font: 600 .84rem/1 var(--f-sans); font-stretch: 85%; letter-spacing: .12em; text-transform: uppercase;
  transition: background .25s, color .25s; }
.act:hover { background: color-mix(in srgb, var(--s-mag) 82%, var(--s-ink)); }
.plan-form .act { width: 100%; }
.f-status { margin: 0; min-height: 1.5em; font-size: 1.02rem; }
.f-status.sent { border-top: 1px solid var(--s-ink); padding-top: 14px; }
.f-status.err { color: var(--s-mag); }
@media (min-width: 900px) {
  .sheet-passage { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 1.2fr); column-gap: 56px; align-items: start; }
  .plan-form { margin-top: 8px; }
  .plan-form .act { width: auto; justify-self: start; }
}

/* imprint */
.imprint { position: relative; z-index: 1; background: var(--s-paper); color: var(--s-ink); border-top: 3px double var(--s-ink);
  padding: 44px calc(var(--frame) + var(--gutter)) calc(var(--frame) + 44px); display: grid; gap: 26px; }
.imprint p { margin: 0; }
.imprint-mark { font: 400 1.3rem/1 var(--f-title); letter-spacing: .28em; text-transform: uppercase; }
.imprint-agency p + p { margin-top: 6px; font-style: italic; color: var(--s-soft); }
.imprint-fiction { max-width: 56ch; font-size: .95rem; color: var(--s-soft); }
.imprint-studio { display: grid; gap: 16px; border-top: 1px solid var(--s-ink); padding-top: 22px; }
.imprint-studio p { max-width: 40ch; font-size: 1.14rem; line-height: 1.45; }
.act-out { justify-self: start; max-width: 100%; text-align: center; background: transparent; color: var(--s-mag); padding: 14px 18px; line-height: 1.3;
  text-transform: none; letter-spacing: .01em; font-size: .98rem; font-stretch: 90%; }
.act-out:hover { background: var(--s-mag); color: var(--s-paper); }
@media (min-width: 900px) {
  .imprint { grid-template-columns: 1fr 1.2fr 1.4fr; align-items: start; column-gap: 48px; }
  .imprint-studio { border-top: 0; padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
}