/* Wistmere: limewash and white grounds, green-black ink, leaf green for marks and one band.
   Frank Ruhl Libre for headings, Comme for reading. Every block hangs from the top of its band. */

@font-face { font-family: "Frank Ruhl Libre"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("/assets/fonts/specimen/frank-ruhl-libre-var.woff2") format("woff2"); }
@font-face { font-family: "Comme"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/specimen/comme-var.woff2") format("woff2"); }

@property --wm-w1 { syntax: "<number>"; inherits: true; initial-value: 820; }
@property --wm-w2 { syntax: "<number>"; inherits: true; initial-value: 640; }
@property --wm-w3 { syntax: "<number>"; inherits: true; initial-value: 470; }
@property --wm-w4 { syntax: "<number>"; inherits: true; initial-value: 320; }
@property --wm-wm { syntax: "<number>"; inherits: true; initial-value: 860; }

body.spec-wistmere { margin: 0; background: #E9E8E1; }
.spec-wistmere {
  --wm-lime: #E9E8E1;
  --wm-white: #FFFFFF;
  --wm-ink: #1A1C18;
  --wm-leaf: #3C9636;
  --wm-leaf-ink: #2B7327;
  --wm-ink-2: #5B5D57;
  --wm-hair: rgba(26, 28, 24, .2);
  --wm-tint: rgba(60, 150, 54, .14);
  --wm-serif: "Frank Ruhl Libre", "Iowan Old Style", Georgia, serif;
  --wm-sans: "Comme", "Segoe UI", system-ui, sans-serif;
  --wm-nav-h: 56px;
  --wm-bays: 7;
  --wm-pier: 24px;
  --wm-wrap: min(1296px, 100% - 64px);
  --wm-top: clamp(48px, 6vw, 96px);
  --wm-hang-s: clamp(40px, 4.5vw, 72px);
  --wm-hang-m: clamp(56px, 6.5vw, 104px);
  --wm-hang-l: clamp(72px, 8.5vw, 136px);
  --wm-ease: cubic-bezier(.2, .7, .1, 1);
}
.wm-page { background: var(--wm-lime); color: var(--wm-ink); font: 380 1.0625rem/1.62 var(--wm-sans); font-variation-settings: "wght" 380; -webkit-font-smoothing: antialiased; font-variant-numeric: lining-nums; }
.wm-page *, .wm-page *::before, .wm-page *::after { box-sizing: border-box; }
.wm-page :where(h1, h2, h3, p, ul, dl, dd, figure, fieldset) { margin: 0; padding: 0; }
.wm-page :where(ul) { list-style: none; }
.wm-page img { display: block; max-width: 100%; height: auto; }
.wm-page a { color: var(--wm-leaf-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; transition: text-underline-offset .2s var(--wm-ease); }
.wm-page a:hover { text-underline-offset: .34em; }
.wm-page button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.wm-page :focus-visible { outline: 2px solid var(--wm-leaf-ink); outline-offset: 3px; border-radius: 2px; }
.wm-page [id] { scroll-margin-top: calc(var(--bar-h, 40px) + var(--wm-nav-h) + 8px); }
.wm-page #wm-plan { scroll-margin-top: calc(var(--bar-h, 40px) + var(--wm-nav-h) + 72px); }
.wm-ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---- nav */
.wm-nav { position: sticky; top: var(--bar-h, 40px); z-index: 60; height: var(--wm-nav-h); display: flex; align-items: center; gap: 32px; padding: 0 max(32px, (100% - 1296px) / 2); background: rgba(233, 232, 225, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.wm-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--wm-ink) !important; text-decoration: none !important; font: 600 1.375rem/1 var(--wm-serif); font-variation-settings: "wght" 600; letter-spacing: -.01em; }
.wm-mark { height: 28px; width: auto; flex: none; color: var(--wm-ink); }
.wm-links { display: flex; gap: 28px; margin-left: auto !important; }
.wm-links a, .wm-nav-ask { font: 500 .9375rem/1 var(--wm-sans); font-variation-settings: "wght" 500; color: var(--wm-ink); text-decoration: none; }
.wm-links a:hover { text-decoration: underline; }
.wm-nav-ask { color: var(--wm-leaf-ink); text-decoration: underline; text-decoration-thickness: 1.5px; }

/* ---- hero: the walk. The wisteria hangs across the top; the words stand low at the right, over
   the lawn; a drag along the walk moves it through the year */
.wm-hero { position: relative; background: var(--wm-lime); isolation: isolate; --wm-region: calc(100svh - var(--bar-h, 40px) - var(--wm-nav-h)); min-height: max(var(--wm-region), 560px); touch-action: pan-y; cursor: grab; }
.wm-hero.wm-dragging { cursor: grabbing; }
.wm-fringe { position: absolute; left: 0; right: 0; top: 0; height: var(--wm-gl-h, calc(var(--wm-region) * .8)); z-index: 1; pointer-events: none; }
.wm-page .wm-fringe:focus-visible { outline: 2px solid var(--wm-leaf-ink); outline-offset: -8px; border-radius: 4px; }
.wm-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wm-poster { position: absolute; inset: 0 0 auto 0; height: 40%; display: block; transition: opacity .4s ease; -webkit-mask-image: linear-gradient(#000 45%, transparent); mask-image: linear-gradient(#000 45%, transparent); }
.wm-poster img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 0%; }
.wm-gl-on .wm-poster { opacity: 0; }
.wm-hero-top { position: relative; z-index: 2; width: var(--wm-wrap); margin: 0 auto; display: grid; grid-template-columns: repeat(var(--wm-bays), minmax(0, 1fr)); column-gap: var(--wm-pier); align-items: end; align-content: end; min-height: max(var(--wm-region), 560px); padding: 0 0 clamp(28px, 5svh, 56px); -webkit-user-select: none; user-select: none; }
.wm-hero-copy { grid-column: 3 / 8; grid-row: 1; cursor: auto; -webkit-user-select: text; user-select: text; }
.wm-note { max-width: 50ch; margin-bottom: clamp(14px, 2svh, 22px) !important; font: 420 1rem/1.45 var(--wm-sans); font-variation-settings: "wght" 420; view-transition-name: wm-note; }
.wm-note b { font-weight: 800; font-variation-settings: "wght" 800; }
.wm-note-ask { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; white-space: nowrap; font-weight: 600; font-variation-settings: "wght" 600; }
.wm-h1 { font: 400 clamp(2.125rem, 1rem + 3.1vw, 4.125rem)/1 var(--wm-serif); letter-spacing: -.018em; color: var(--wm-ink); }
.wm-ln { display: block; width: fit-content; white-space: nowrap; }
.wm-h1 { transition: --wm-w1 1.8s cubic-bezier(.3, .6, .2, 1), --wm-w2 1.8s cubic-bezier(.3, .6, .2, 1) .12s, --wm-w3 1.8s cubic-bezier(.3, .6, .2, 1) .24s, --wm-w4 1.8s cubic-bezier(.3, .6, .2, 1) .36s; }
/* Frank Ruhl Libre kerns the space before "w" in tight at the heavy end: open it back up */
.wm-l1 { font-variation-settings: "wght" var(--wm-w1); font-weight: 800; word-spacing: .2em; }
.wm-l2 { font-variation-settings: "wght" var(--wm-w2); font-weight: 600; }
.wm-l3 { font-variation-settings: "wght" var(--wm-w3); font-weight: 500; }
.wm-l4 { font-variation-settings: "wght" var(--wm-w4); font-weight: 300; }
.wm-sub { margin-top: clamp(12px, 2svh, 18px) !important; max-width: 46ch; font: 420 clamp(1.0625rem, .95rem + .35vw, 1.25rem)/1.45 var(--wm-sans); font-variation-settings: "wght" 420; color: var(--wm-ink); }
.wm-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.wm-hint { grid-column: 1 / 3; grid-row: 1; align-self: end; cursor: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; max-width: 30ch; font: 480 .9375rem/1.45 var(--wm-sans); font-variation-settings: "wght" 480; color: var(--wm-ink); }
.wm-hint-t { display: none; }
.wm-page .wm-breeze { display: inline-flex; align-items: center; gap: 6px; color: var(--wm-leaf-ink); font-weight: 600; font-variation-settings: "wght" 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
@media (pointer: coarse) { .wm-hint-p { display: none; } .wm-hint-t { display: inline; } }

.wm-hero-photo { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; z-index: 0; display: block; -webkit-mask-image: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .62) 20%, #000 46%); mask-image: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .62) 20%, #000 46%); }
.wm-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 100%; }
/* a thin limewash haze where the words stand, low over the flagstones and the lawn, and under the hint */
.wm-hero-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 50% 46% at 64% 81%, rgba(233, 232, 225, .9), rgba(233, 232, 225, .74) 50%, rgba(233, 232, 225, 0) 100%), radial-gradient(ellipse 24% 16% at 12% 94%, rgba(233, 232, 225, .82), rgba(233, 232, 225, 0)); }

/* ---- the bands */
.wm-bays { width: var(--wm-wrap); margin: 0 auto; display: grid; grid-template-columns: repeat(var(--wm-bays), minmax(0, 1fr)); column-gap: var(--wm-pier); align-items: start; }
.wm-band { padding-top: var(--wm-top); padding-bottom: var(--wm-hang-m); }
.wm-band[data-hang="short"] { padding-bottom: var(--wm-hang-s); }
.wm-band[data-hang="long"] { padding-bottom: var(--wm-hang-l); }
.wm-white { background: var(--wm-white); }
.wm-lime { background: var(--wm-lime); }
.wm-drop { min-width: 0; }
.wm-page h2 { font: 600 clamp(2rem, 1.3rem + 2.6vw, 4rem)/1.02 var(--wm-serif); font-variation-settings: "wght" 600; letter-spacing: -.01em; }
.wm-h-b, .wm-h-l { display: block; }
.wm-h-b { font-weight: 760; font-variation-settings: "wght" 760; }
.wm-h-l { font-weight: 300; font-variation-settings: "wght" 300; }
.wm-page h3, .wm-page dt { font: 600 clamp(1.2rem, 1.05rem + .5vw, 1.5rem)/1.15 var(--wm-serif); font-variation-settings: "wght" 600; word-spacing: .08em; }
.wm-drop p { max-width: 62ch; }
.wm-drop h2 + p, .wm-drop p + p { margin-top: 16px; }
.wm-lede { font: 380 clamp(1.125rem, 1rem + .4vw, 1.375rem)/1.45 var(--wm-sans); font-variation-settings: "wght" 380; }
.wm-drop figure, :where(figure.wm-drop) { margin: 0; }
.wm-drop img { width: 100%; }

/* things are lowered, never raised: each drop settles onto its hook as it comes up the screen,
   tied to the scroll, so whatever is on screen is always there to read */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .wm-drop { animation: wm-lower linear both; animation-timeline: view(); animation-range: entry 0% entry 30%; }
  }
}
@keyframes wm-lower { from { translate: 0 -14px; opacity: .55; } to { translate: 0 0; opacity: 1; } }

/* the season */
.wm-season { overflow-anchor: none; }
.wm-season-a { grid-column: 1 / 4; container-type: inline-size; }
.wm-season-b { grid-column: 4 / 6; }
.wm-season-c { grid-column: 6 / 8; }
/* sized so the widest month, "September" (4.85em at the heaviest weight), always fits its column */
.wm-month { font-size: min(clamp(3rem, 1.9rem + 4.4vw, 6rem), 19.8cqi) !important; white-space: nowrap; line-height: .86 !important; letter-spacing: -.02em !important; font-variation-settings: "wght" var(--wm-wm) !important; font-weight: 800 !important; transition: --wm-wm 1.8s cubic-bezier(.3, .6, .2, 1); view-transition-name: wm-month; }
.wm-season .wm-lede { margin-top: 20px; }
.wm-turn { margin-top: 28px !important; max-width: 30ch !important; font-size: .9375rem; color: var(--wm-ink-2); }
.wm-turn a { font-weight: 600; font-variation-settings: "wght" 600; }
.wm-col + .wm-col { margin-top: 40px; }
.wm-col p { margin-top: 12px; }
.wm-dishes { margin-top: 12px !important; }
.wm-dishes li { padding: 7px 0; border-top: 1px solid var(--wm-hair); font: 420 1.0625rem/1.4 var(--wm-serif); font-variation-settings: "wght" 420; }
.wm-dishes li:first-child { border-top: 0; padding-top: 0; }
.wm-jugs { margin-top: 16px !important; }
.wm-jugs b { font-weight: 700; font-variation-settings: "wght" 700; }
#wm-col-walk { view-transition-name: wm-col-walk; }
#wm-col-garden { view-transition-name: wm-col-garden; }
#wm-col-table { view-transition-name: wm-col-table; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-new(wm-note), ::view-transition-new(wm-month), ::view-transition-new(wm-col-walk), ::view-transition-new(wm-col-garden), ::view-transition-new(wm-col-table) { animation: wm-unfurl .52s cubic-bezier(.2, .7, .1, 1) both; }
::view-transition-old(wm-note), ::view-transition-old(wm-month), ::view-transition-old(wm-col-walk), ::view-transition-old(wm-col-garden), ::view-transition-old(wm-col-table) { animation: wm-fade .16s ease both; }
@keyframes wm-unfurl { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes wm-fade { to { opacity: 0; } }

/* the spaces: a drawn plan, the house at the top like the beam and the garden hanging down to the dam */
.wm-sp-a { grid-column: 1 / 4; }
.wm-sp-b { grid-column: 4 / 8; }
.wm-plan { position: relative; aspect-ratio: 5 / 6; --wm-labf: clamp(.9375rem, .85rem + .45vw, 1.25rem); }
.wm-plan-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.wm-plan-svg :where(path, line, rect) { fill: none; stroke: var(--wm-ink); stroke-width: 1.25px; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.wm-plan-svg .wm-pl-fill { fill: var(--wm-lime); stroke: none; }
.wm-plan-svg .wm-pl-room { fill: url(#wm-hatch); stroke: none; }
.wm-plan-svg .wm-pl-h { stroke: var(--wm-hair); stroke-width: 1px; }
.wm-plan-svg .wm-pl-up, .wm-plan-svg .wm-pl-terr { stroke-dasharray: 6 5; }
.wm-plan-svg .wm-pl-pier rect, .wm-plan-svg .wm-pl-fire, .wm-plan-svg .wm-pl-nf { fill: var(--wm-ink); }
.wm-plan-svg .wm-pl-post circle { fill: var(--wm-ink); stroke: none; }
.wm-plan-svg .wm-pl-path { stroke: rgba(26, 28, 24, .5); stroke-dasharray: 1 7; stroke-width: 2px; }
.wm-plan-svg .wm-pl-tree circle { fill: none; stroke: rgba(26, 28, 24, .55); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.wm-plan-svg .wm-pl-crown circle { fill: #F2F6EE; stroke: none; }
.wm-plan-svg .wm-pl-walk path, .wm-plan-svg .wm-pl-bed, .wm-plan-svg .wm-pl-esp { stroke: rgba(26, 28, 24, .42); stroke-width: 1px; }
.wm-plan-svg .wm-pl-dam, .wm-plan-svg .wm-pl-damr { stroke: var(--wm-leaf); stroke-width: 1px; }
.wm-plan-svg .wm-pl-dam { fill: rgba(60, 150, 54, .08); }
.wm-plan-svg .wm-pl-bank { stroke: rgba(26, 28, 24, .42); stroke-width: 1px; stroke-dasharray: 2 4; }
.wm-plan-svg .wm-pl-reed { stroke: var(--wm-leaf); stroke-width: 1px; }
.wm-plan-svg .wm-pl-edge { stroke: var(--wm-ink); stroke-width: 1.25px; }
.wm-plan-svg .wm-pl-lawn line { stroke: rgba(60, 150, 54, .28); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.wm-plan-svg .wm-pl-crown .wm-pl-trunk { fill: var(--wm-ink); }
.wm-plan-svg .wm-pl-north path { stroke-width: 1px; fill: var(--wm-white); }
.wm-plan-svg .wm-pl-north .wm-pl-nf { fill: var(--wm-ink); }
.wm-page .wm-spb { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); background: transparent; transition: background-color .2s ease; border-radius: 0; }
.wm-page .wm-spb:is(:hover, :focus-visible), .wm-page .wm-spb.wm-hot { background: var(--wm-tint); }
.wm-page .wm-spb:focus-visible { outline-offset: 0; }
#wm-sp-walk { anchor-name: --wm-a-walk; } #wm-lab-walk { position-anchor: --wm-a-walk; }
#wm-sp-loggia { anchor-name: --wm-a-loggia; } #wm-lab-loggia { position-anchor: --wm-a-loggia; }
#wm-sp-room { anchor-name: --wm-a-room; } #wm-lab-room { position-anchor: --wm-a-room; }
#wm-sp-terrace { anchor-name: --wm-a-terrace; } #wm-lab-terrace { position-anchor: --wm-a-terrace; }
#wm-sp-garden { anchor-name: --wm-a-garden; } #wm-lab-garden { position-anchor: --wm-a-garden; }
#wm-sp-rooms { anchor-name: --wm-a-rooms; } #wm-lab-rooms { position-anchor: --wm-a-rooms; }
#wm-sp-lawn { anchor-name: --wm-a-lawn; } #wm-lab-lawn { position-anchor: --wm-a-lawn; }
.wm-lab { display: none; }
@supports (anchor-name: --a) {
  .wm-page .wm-sp-list { display: none; }
  .wm-lab { --wm-hl: 18px; display: block; position: absolute; position-area: bottom; margin-top: var(--wm-hl); width: max-content; max-width: 14em; pointer-events: none; z-index: 2; font: 600 var(--wm-labf)/1.15 var(--wm-serif); color: var(--wm-ink); text-align: center; text-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 9px #fff; position-try-fallbacks: flip-block; }
  .wm-lab b { display: block; font-weight: 600; font-variation-settings: "wght" 600; transition: font-variation-settings .2s ease; }
  .wm-lab::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: calc(var(--wm-hl) - 3px); background: var(--wm-ink); }
  .wm-lab-l { position-area: bottom span-right; text-align: left; }
  .wm-lab-l::before { left: 0; }
  .wm-lab-rt { position-area: bottom span-left; text-align: right; }
  .wm-lab-rt::before { left: auto; right: 0; }
  .wm-lab-t { --wm-hl: 12px; position-area: top; margin: 0 0 var(--wm-hl); position-try-fallbacks: none; }
  .wm-lab-t.wm-lab-l { position-area: top span-right; }
  .wm-lab-t.wm-lab-rt { position-area: top span-left; }
  .wm-lab-t::before { bottom: auto; top: 100%; }
  .wm-lab-in { position-area: center; justify-self: start; align-self: start; margin: 7% 0 0 6%; text-align: left; position-try-fallbacks: none; }
  .wm-lab-in::before { display: none; }
  .wm-lab-in .wm-lab-d { margin-right: auto; }
  .wm-lab-r { position-area: right; margin: 0 0 0 var(--wm-hl); text-align: left; max-width: 9em; position-try-fallbacks: none; }
  .wm-lab-r::before { left: auto; right: 100%; bottom: auto; top: .6em; width: calc(var(--wm-hl) - 3px); height: 1px; }
  .wm-lab-d { display: none; max-width: 17em; margin-top: 4px; font: 420 .875rem/1.35 var(--wm-sans); font-variation-settings: "wght" 420; color: var(--wm-ink-2); opacity: 1; translate: 0 0; transition: opacity .2s ease, translate .2s ease, display .2s allow-discrete; }
  .wm-lab-l .wm-lab-d, .wm-lab-r .wm-lab-d { margin-right: auto; }
  .wm-lab-rt .wm-lab-d { margin-left: auto; }
  .wm-lab-b:not(.wm-lab-l):not(.wm-lab-rt) .wm-lab-d { margin-inline: auto; }
  .wm-spb:is(:hover, :focus-visible, .wm-hot) + .wm-lab { z-index: 3; }
  .wm-spb:is(:hover, :focus-visible, .wm-hot) + .wm-lab b { font-variation-settings: "wght" 700; font-weight: 700; }
  .wm-spb:is(:hover, :focus-visible, .wm-hot) + .wm-lab .wm-lab-d, .wm-lab:focus-within .wm-lab-d { display: block; }
  .wm-lab:focus-within { z-index: 3; }
  .wm-lab-go { pointer-events: auto; display: inline-block; margin-top: 2px; font-weight: 600; font-variation-settings: "wght" 600; text-shadow: none; }
  @starting-style { .wm-spb:is(:hover, :focus-visible, .wm-hot) + .wm-lab .wm-lab-d { opacity: 0; translate: 0 -6px; } }
}
.wm-sp-list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; margin-top: 32px !important; }
.wm-sp-list li { cursor: default; }
.wm-sp-list b { display: block; font: 600 clamp(1.2rem, 1.05rem + .5vw, 1.5rem)/1.15 var(--wm-serif); font-variation-settings: "wght" 600; }
.wm-sp-list span { display: block; margin-top: 4px; font-size: .9375rem; color: var(--wm-ink-2); }
.wm-sp-list .wm-lab-go { display: inline; margin-left: 4px; }

/* the kitchen */
.wm-k-a { grid-column: 1 / 4; }
.wm-k-b { grid-column: 4 / 6; }
.wm-k-b img { aspect-ratio: 4 / 3; object-fit: cover; }
.wm-k-c { grid-column: 6 / 8; }
.wm-k-c img { aspect-ratio: 1 / 2; object-fit: cover; object-position: 50% 55%; }
.wm-plate { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--wm-ink); font: 420 1rem/1.45 var(--wm-sans); font-variation-settings: "wght" 420; }
.wm-plate b { font-weight: 700; font-variation-settings: "wght" 700; }
.wm-taper { display: flow-root; font: 380 clamp(1.125rem, 1rem + .4vw, 1.375rem)/1.45 var(--wm-sans); font-variation-settings: "wght" 380; margin-top: 24px !important; }
.wm-taper-s { float: right; width: 46%; height: var(--wm-taper-h, 10em); shape-outside: polygon(100% 0, 100% 100%, 0 100%); }

/* if it rains: the photograph runs out of the left edge, the words hang at the right */
.wm-rain { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); padding-top: 0; }
.wm-rain-photo { margin: 0; grid-row: 1; grid-column: 1; width: calc((100% - var(--wm-wrap)) / 2 + (var(--wm-wrap) - 6 * var(--wm-pier)) * 4 / 7 + 3 * var(--wm-pier)); }
.wm-rain-photo img { width: 100%; height: min(46vw, 78svh); object-fit: cover; object-position: 38% 50%; }
.wm-rain .wm-bays { grid-row: 1; grid-column: 1; }
.wm-rain-a { grid-column: 5 / 8; padding-top: var(--wm-top); }
.wm-rain-cue { margin-top: 28px !important; padding-top: 14px; border-top: 1px solid var(--wm-ink); font: 380 clamp(1.125rem, 1rem + .4vw, 1.375rem)/1.45 var(--wm-sans); font-variation-settings: "wght" 380; }
.wm-rain-cue b { font-weight: 760; font-variation-settings: "wght" 760; }

/* the day: three places, each a full-bleed photograph with its hour and its words hanging from its
   foot at different lengths */
.wm-day-a { grid-column: 1 / 4; }
.wm-day-b { grid-column: 4 / 7; padding-top: 10px; font: 380 clamp(1.125rem, 1rem + .4vw, 1.375rem)/1.45 var(--wm-sans); font-variation-settings: "wght" 380; max-width: 40ch !important; }
.wm-place { background: var(--wm-white); }
.wm-place-ph { display: block; }
.wm-place-ph img { width: 100%; height: min(56.25vw, 90svh); object-fit: cover; object-position: 36% 50%; }
.wm-place-lawn .wm-place-ph img { height: min(40vw, 64svh); object-position: 50% 64%; }
.wm-place-room .wm-place-ph img { height: min(52vw, 80svh); object-position: 50% 62%; }
.wm-place-cap { padding-bottom: var(--wm-hang-l); }
.wm-place-lawn .wm-place-cap { padding-bottom: var(--wm-hang-m); }
.wm-hour { margin-top: clamp(14px, 1.6vw, 26px) !important; font: 300 clamp(4.5rem, 2rem + 7.4vw, 10rem)/.84 var(--wm-serif); font-variation-settings: "wght" 300; letter-spacing: -.035em; }
.wm-hour span { display: block; }
.wm-hour span + span { font-weight: 760; font-variation-settings: "wght" 760; }
.wm-place-a { padding-top: clamp(24px, 3vw, 44px); }
.wm-place-a h3 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); line-height: 1.08; font-weight: 700; font-variation-settings: "wght" 700; }
.wm-place-a h3 + p { margin-top: 16px; }
.wm-place-b { font: 420 1rem/1.5 var(--wm-sans); font-variation-settings: "wght" 420; border-top: 1px solid var(--wm-ink); padding-top: 12px; }
.wm-cue b { font-weight: 760; font-variation-settings: "wght" 760; }
.wm-place-walk .wm-hour { grid-column: 1 / 3; }
.wm-place-walk .wm-place-a { grid-column: 3 / 6; }
.wm-place-walk .wm-place-b { grid-column: 6 / 8; margin-top: clamp(80px, 9vw, 150px); }
.wm-place-lawn .wm-place-a { grid-column: 1 / 4; grid-row: 1; }
.wm-place-lawn .wm-hour { grid-column: 4 / 8; grid-row: 1; text-align: right; }
.wm-place-room .wm-hour { grid-column: 1 / 4; font-size: clamp(3.75rem, 1.8rem + 5.6vw, 8rem); }
.wm-place-room .wm-place-a { grid-column: 4 / 7; }
.wm-place-room .wm-place-b { grid-column: 1 / 3; grid-row: 2; margin-top: 28px; }

/* the plain line and plain answers */
.wm-plainline { grid-column: 1 / 7; grid-row: 1; max-width: 30ch !important; margin-bottom: clamp(48px, 5vw, 80px) !important; font: 500 clamp(1.625rem, 1.2rem + 1.6vw, 2.75rem)/1.18 var(--wm-serif); font-variation-settings: "wght" 500; letter-spacing: -.01em; }
.wm-ans-a, .wm-ans-b, .wm-ans-c { grid-row: 2; }
.wm-ans-a { grid-column: 1 / 3; }
.wm-ans-b { grid-column: 3 / 6; }
.wm-ans-c { grid-column: 6 / 8; }
.wm-page dl > div + div { margin-top: 28px; }
.wm-page dd { margin: 6px 0 0; }

/* ask */
.wm-ask-a { grid-column: 1 / 4; }
.wm-form { grid-column: 4 / 7; display: grid; gap: 28px; }
.wm-field label, .wm-set legend { display: block; font: 500 .9375rem/1.3 var(--wm-sans); font-variation-settings: "wght" 500; margin-bottom: 8px; }
.wm-field input, .wm-field select, .wm-field textarea { width: 100%; font: inherit; color: var(--wm-ink); background: transparent; border: 0; border-bottom: 1.5px solid var(--wm-hair); border-radius: 0; padding: 8px 0; }
.wm-field input:focus, .wm-field select:focus, .wm-field textarea:focus { outline: none; border-bottom-color: var(--wm-leaf-ink); }
.wm-set { border: 0; min-width: 0; }
.wm-set legend { padding: 0; }
.wm-set label, .wm-check label { display: inline-flex; align-items: center; gap: 8px; margin: 6px 20px 0 0; }
.wm-page input[type="radio"], .wm-page input[type="checkbox"] { accent-color: var(--wm-leaf-ink); width: 18px; height: 18px; margin: 0; }
.wm-btn { font: 700 1.0625rem/1 var(--wm-sans) !important; font-variation-settings: "wght" 700; color: var(--wm-leaf-ink) !important; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .3em; padding: 8px 0 !important; }
.wm-status { min-height: 1.6em; color: var(--wm-ink-2); }
.wm-ask-echo { margin-top: 20px !important; padding-top: 12px; border-top: 1px solid var(--wm-ink); max-width: 34ch !important; }
.wm-ask-echo b { font-weight: 760; font-variation-settings: "wght" 760; color: var(--wm-leaf-ink); }

/* footer */
.wm-foot { background: var(--wm-lime); padding: 48px 0 72px; font-size: .9375rem; }
.wm-foot-a { grid-column: 1 / 4; display: flex; align-items: center; gap: 10px; }
.wm-foot-links { grid-column: 4 / 7; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.wm-foot-echo { grid-column: 7; color: var(--wm-ink-2); }

/* ---- 1024 to 1180: five bays */
@media (max-width: 1180px) {
  .spec-wistmere { --wm-bays: 5; --wm-pier: 20px; --wm-wrap: min(100% - 64px, 1060px); }
  .wm-hero-copy { grid-column: 2 / 6; }
  .wm-hint { grid-column: 1 / 2; max-width: none; }
  .wm-season-a { grid-column: 1 / 3; } .wm-season-b { grid-column: 3 / 5; } .wm-season-c { grid-column: 5; }
  .wm-sp-a { grid-column: 1 / 3; } .wm-sp-b { grid-column: 3 / 6; }
  .wm-k-a { grid-column: 1 / 4; } .wm-k-b { grid-column: 4; grid-row: 1; } .wm-k-c { grid-column: 5; grid-row: 1; } .wm-k-c img { aspect-ratio: 1 / 3; }
  .wm-rain-photo { width: calc((100% - var(--wm-wrap)) / 2 + (var(--wm-wrap) - 4 * var(--wm-pier)) * 3 / 5 + 2 * var(--wm-pier)); }
  .wm-rain-a { grid-column: 4 / 6; }
  .wm-day-a { grid-column: 1 / 3; } .wm-day-b { grid-column: 3 / 6; }
  .wm-place-walk .wm-hour { grid-column: 1 / 3; } .wm-place-walk .wm-place-a { grid-column: 3 / 5; } .wm-place-walk .wm-place-b { grid-column: 5; }
  .wm-place-lawn .wm-place-a { grid-column: 1 / 4; } .wm-place-lawn .wm-hour { grid-column: 4 / 6; }
  .wm-place-room .wm-hour { grid-column: 1 / 3; } .wm-place-room .wm-place-a { grid-column: 3 / 6; } .wm-place-room .wm-place-b { grid-column: 1 / 3; }
  .wm-plainline { grid-column: 1 / 6; }
  .wm-ans-a { grid-column: 1 / 3; } .wm-ans-b { grid-column: 3 / 5; } .wm-ans-c { grid-column: 5; }
  .wm-ask-a { grid-column: 1 / 3; } .wm-form { grid-column: 3 / 6; }
  .wm-foot-a { grid-column: 1 / 3; } .wm-foot-links { grid-column: 3 / 5; } .wm-foot-echo { grid-column: 5; }
}
/* ---- 700 to 1023: four bays */
@media (max-width: 1023px) {
  .spec-wistmere { --wm-bays: 4; --wm-pier: 20px; --wm-wrap: calc(100% - 64px); }
  .wm-links { display: none; }
  .wm-nav-ask { margin-left: auto; }
  .wm-hero-copy { grid-column: 1 / 5; grid-row: 1; }
  .wm-hint { grid-column: 1 / 5; grid-row: 2; max-width: none; margin-top: 18px; }
  .wm-hero-photo img { object-position: 86% 100%; }
  .wm-hero-photo::after { background: radial-gradient(ellipse 80% 40% at 40% 84%, rgba(233, 232, 225, .86), rgba(233, 232, 225, .6) 55%, rgba(233, 232, 225, 0) 100%); }
  .wm-season-a { grid-column: 1 / 3; } .wm-season-b { grid-column: 3 / 5; } .wm-season-c { grid-column: 2 / 5; margin-top: 40px; }
  .wm-sp-a { grid-column: 1 / 5; } .wm-sp-b { grid-column: 1 / 5; margin-top: 40px; }
  .wm-k-a { grid-column: 1 / 3; } .wm-k-c { grid-column: 3 / 5; grid-row: 1 / span 2; } .wm-k-c img { aspect-ratio: 1 / 2; } .wm-k-b { grid-column: 1 / 3; grid-row: 2; margin-top: 40px; }
  .wm-rain { display: block; }
  .wm-rain-photo { width: 100%; }
  .wm-rain-photo img { height: auto; aspect-ratio: 3 / 2; }
  .wm-rain-a { grid-column: 1 / 4; }
  .wm-day-a { grid-column: 1 / 5; } .wm-day-b { grid-column: 1 / 4; margin-top: 24px; padding-top: 0; }
  .wm-place-walk .wm-hour { grid-column: 1 / 3; } .wm-place-walk .wm-place-a { grid-column: 3 / 5; } .wm-place-walk .wm-place-b { grid-column: 3 / 5; grid-row: 2; margin-top: 32px; }
  .wm-place-lawn .wm-place-a { grid-column: 1 / 3; } .wm-place-lawn .wm-hour { grid-column: 3 / 5; }
  .wm-place-room .wm-hour { grid-column: 1 / 3; } .wm-place-room .wm-place-a { grid-column: 3 / 5; } .wm-place-room .wm-place-b { grid-column: 1 / 3; }
  .wm-plainline { grid-column: 1 / 5; }
  .wm-ans-a { grid-column: 1 / 5; } .wm-ans-b { grid-column: 1 / 3; grid-row: 3; margin-top: 32px; } .wm-ans-c { grid-column: 3 / 5; grid-row: 3; margin-top: 32px; }
  .wm-ask-a { grid-column: 1 / 5; } .wm-form { grid-column: 1 / 4; margin-top: 40px; }
  .wm-foot-a { grid-column: 1 / 3; } .wm-foot-links { grid-column: 3 / 5; } .wm-foot-echo { grid-column: 1 / 5; margin-top: 16px; }
}

/* ---- phones: two bays. The photograph comes first, with the walk hanging over it, then the words */
@media (max-width: 699px) {
  .spec-wistmere { --wm-bays: 2; --wm-pier: 16px; --wm-wrap: calc(100% - 32px); }
  .wm-nav { padding: 0 16px; gap: 16px; }
  .wm-brand { font-size: 1.25rem; }
  .wm-hero { display: flex; flex-direction: column; min-height: 0; }
  .wm-hero-top { display: contents; }
  .wm-hero-photo { order: 1; position: relative; height: auto; margin-top: 30px; -webkit-mask-image: linear-gradient(rgba(0, 0, 0, .25), #000 26%); mask-image: linear-gradient(rgba(0, 0, 0, .25), #000 26%); }
  /* the upper wall is cropped away, so the photograph opens on the loggia's arches */
  .wm-hero-photo img { height: auto; aspect-ratio: 1 / 1; object-position: 50% 100%; }
  .wm-hero-photo::after { display: none; }
  .wm-hero-copy { order: 2; position: relative; z-index: 2; padding: 18px 16px 0; }
  .wm-h1 { font-size: 2.25rem; line-height: 1.02; }
  .wm-ln { display: inline; white-space: normal; }
  .wm-l { white-space: nowrap; }
  .wm-note { font-size: .9375rem; }
  .wm-sub { font-size: 1.0625rem; }
  .wm-hint { order: 3; position: relative; z-index: 2; margin: 14px 16px 18px; max-width: none; }
  .wm-season-a, .wm-season-b, .wm-season-c, .wm-sp-a, .wm-sp-b, .wm-k-a, .wm-k-b, .wm-k-c, .wm-rain-a, .wm-day-a, .wm-day-b, .wm-plainline, .wm-ans-a, .wm-ans-b, .wm-ans-c, .wm-ask-a, .wm-form, .wm-foot-a, .wm-foot-links, .wm-foot-echo { grid-column: 1 / 3; grid-row: auto; }
  .wm-season-b, .wm-season-c, .wm-sp-b, .wm-ans-b, .wm-ans-c, .wm-form, .wm-foot-links, .wm-foot-echo { margin-top: 32px; }
  .wm-month { font-size: 3rem !important; }
  .wm-place-ph img, .wm-place-lawn .wm-place-ph img { height: auto; aspect-ratio: 4 / 5; }
  .wm-place-room .wm-place-ph img { height: auto; aspect-ratio: 3 / 2; }
  .wm-page .wm-place-cap > * { grid-column: 1 / 3; grid-row: auto; text-align: left; }
  .wm-hour { font-size: 4.5rem; }
  .wm-place-room .wm-hour { font-size: 3.75rem; }
  .wm-place-lawn .wm-hour { order: -1; }
  .wm-page .wm-place-b { margin-top: 32px; }
  .wm-k-c { order: -1; margin-bottom: 48px; } .wm-k-c img { aspect-ratio: 4 / 5; }
  .wm-k-b { width: 60%; margin-top: 32px; }
  .wm-taper-s { width: 30%; }
  .wm-rain-a { padding-top: 32px; }
  .wm-ans-b, .wm-ans-c { grid-row: auto; }
  .wm-sp-list { grid-template-columns: 1fr; }
  .wm-plan { --wm-labf: .9375rem; }
  .wm-lab { --wm-hl: 10px !important; }
  /* on a phone the plan keeps only the lit space's label; the list under it is the legend */
  .wm-page .wm-sp-list { display: grid; gap: 12px; margin-top: 20px !important; }
  .wm-sp-list li { cursor: pointer; padding: 6px 0 6px 12px; border-left: 2px solid transparent; }
  .wm-sp-list li.wm-on { border-left-color: var(--wm-leaf); }
  .wm-lab { display: none !important; }
  .wm-spb:is(.wm-hot, :focus-visible) + .wm-lab { display: block !important; }
}
/* a short phone: a wider crop of the photograph, so the headline is on the first screen */
@media (max-width: 699px) and (max-height: 600px) {
  .wm-hero-photo img { aspect-ratio: 16 / 10; }
  .wm-h1 { font-size: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  @supports (anchor-name: --a) { .wm-page .wm-sp-list { display: grid; } }
  .wm-page *, .wm-page *::before, .wm-page *::after { transition: none !important; animation: none !important; }
}