/* Strainpost: stone, galvanised wire and canola. */
@font-face { font-family: Aleo; src: url("/assets/fonts/specimen/aleo-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: Aleo; src: url("/assets/fonts/specimen/aleo-var-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Pontano Sans"; src: url("/assets/fonts/specimen/pontano-sans-var.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }

.spec-strainpost {
  --stp-stone: #CFCDC4; --stp-ink: #1C1B17; --stp-canola: #F2D50D; --stp-galv: #6F736C; --stp-galv-hi: #B4B7AF;
  --stp-plaster: #F1EEE6; --stp-timber: #6E4B33;
  --stp-slab: Aleo, Rockwell, "Roboto Slab", Georgia, serif;
  --stp-sans: "Pontano Sans", "Segoe UI", system-ui, sans-serif;
  --stp-m: clamp(16px, 4.2vw, 64px); --stp-g: clamp(12px, 1.7vw, 24px);
  --stp-ease: cubic-bezier(.2, .7, .2, 1);
}
body.spec-strainpost { margin: 0; background: var(--stp-stone) url("/assets/work/strainpost/grain.svg"); }
.stp-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.stp-nav, .stp-hero, .stp-band, .stp-foot {
  font-family: var(--stp-sans); color: var(--stp-ink); font-size: clamp(1.0625rem, 1.016rem + .19vw, 1.1875rem); line-height: 1.62;
  font-variant-numeric: tabular-nums lining-nums; -webkit-font-smoothing: antialiased;
}
.spec-strainpost :is(.stp-nav, .stp-hero, .stp-band, .stp-foot) :focus-visible { outline: 2px solid var(--stp-ink); outline-offset: 3px; }
.stp-in { box-sizing: border-box; max-width: calc(1328px + 2 * var(--stp-m)); margin: 0 auto; padding: 0 var(--stp-m); }

/* ── nav ─────────────────────────────────────────────────────────────────────────────── */
.stp-nav {
  position: sticky; top: var(--bar-h, 40px); z-index: 50; box-sizing: border-box; height: 56px;
  display: flex; align-items: center; gap: 24px; padding: 0 var(--stp-m);
  background: rgba(207, 205, 196, .96);
}
.stp-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--stp-ink); text-decoration: none; font-family: var(--stp-slab); font-weight: 760; font-size: 1.375rem; letter-spacing: -.01em; line-height: 1; }
.stp-mk { width: 28px; height: 28px; fill: var(--stp-ink); flex: none; }
.stp-mk .stp-mk-w, .stp-foot-mk .stp-mk-w { fill: var(--stp-galv); }
.stp-links { display: flex; gap: clamp(16px, 2vw, 30px); margin: 0 0 0 auto; padding: 0; list-style: none; }
.stp-links a { color: var(--stp-ink); text-decoration: none; font-weight: 500; font-size: 15px; line-height: 56px; background: linear-gradient(var(--stp-ink), var(--stp-ink)) 0 calc(50% + 12px) / 0 1.5px no-repeat; transition: background-size .3s var(--stp-ease); }
.stp-links a:hover, .stp-links a:focus-visible { background-size: 100% 1.5px; }
.stp-links .stp-links-ask { padding: 0 2px; }
.stp-menu { display: none; margin-left: auto; font: 500 15px/1 var(--stp-sans); color: var(--stp-ink); background: none; border: 0; border-bottom: 1.5px solid var(--stp-ink); padding: 6px 0; cursor: pointer; }
@media (max-width: 900px) {
  .stp-nav { height: 48px; }
  .stp-menu { display: block; }
  .stp-links { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; padding: 8px var(--stp-m) 18px; background: rgba(207, 205, 196, .98); }
  .stp-nav.is-open .stp-links { display: flex; }
  .stp-links a { line-height: 44px; display: block; }
}

/* ── hero: the table model ──────────────────────────────────────────────────────────────── */
.stp-hero { position: relative; overflow-x: clip; height: max(600px, calc(100svh - var(--bar-h, 40px) - var(--nav-h, 56px) - 56px)); }
.stp-hero-copy { position: absolute; z-index: 4; left: var(--stp-m); top: 18%; width: min(47%, 700px); }
.stp-h1 { margin: 0; font-family: var(--stp-slab); font-weight: 820; font-size: clamp(2.25rem, 1.527rem + 2.97vw, 4rem); line-height: .98; letter-spacing: -.018em; }
.stp-h1:focus { outline: none; }
.stp-l { display: block; white-space: nowrap; }
.stp-light { margin: 22px 0 0; max-width: 34ch; font-family: var(--stp-slab); font-style: italic; font-weight: 300; font-size: clamp(1.0625rem, .9rem + .667vw, 1.5rem); line-height: 1.3; }
.stp-hero-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; color: var(--stp-ink); font-weight: 600; font-size: 1rem; text-decoration: none; border-bottom: 1.5px solid var(--stp-ink); padding-bottom: 4px; }
.stp-hero-link svg { width: 20px; height: 20px; transition: translate .3s var(--stp-ease); }
.stp-hero-link:hover svg { translate: 4px 0; }

.stp-model { position: absolute; z-index: 1; left: 49%; width: 49%; top: 2%; bottom: 150px; container-type: size; outline: none; cursor: crosshair; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.spec-strainpost .stp-model:focus-visible { outline: none; }
.stp-poster { position: absolute; right: 0; bottom: 0; width: min(100cqw, 121.9cqh); height: auto; aspect-ratio: 1219 / 1000; pointer-events: none; transition: opacity .4s ease; }
.stp-cv { position: absolute; inset: -16% 0 -6% -3%; width: 103%; height: 122%; display: block; opacity: 0; transition: opacity .4s ease; }
.stp-model.is-live .stp-cv { opacity: 1; }
.stp-model.is-live .stp-poster { opacity: 0; }
.stp-model.is-sizing .stp-cv, .stp-model.is-sizing .stp-poster { transition: none; }

/* the gauge: stood on the stone under the slab's front corner */
.stp-gauge { position: absolute; z-index: 4; left: var(--stp-gx, 58%); top: var(--stp-gy, calc(100% - 150px)); translate: 0 18px; display: flex; align-items: center; gap: 14px; width: max-content; max-width: min(560px, calc(100vw - 2 * var(--stp-m))); }
.stp-rain {
  flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px 0 14px; box-sizing: border-box;
  font: 600 1rem/1 var(--stp-sans); color: var(--stp-stone); background: var(--stp-ink); border: 1.5px solid var(--stp-ink); border-radius: 2px;
  cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  box-shadow: 0 3px 0 #000; transition: translate .12s ease, box-shadow .12s ease, background-color .12s ease, color .12s ease;
}
.stp-rain svg { width: 22px; height: 22px; color: var(--stp-canola); }
.stp-rain:hover { background: #33322c; }
.stp-rain.is-down, .stp-rain:active { translate: 0 3px; box-shadow: 0 0 0 #000; background: var(--stp-galv-hi); color: var(--stp-ink); }
.stp-rain.is-down svg, .stp-rain:active svg { color: var(--stp-ink); }
.spec-strainpost .stp-rain:focus-visible { outline: 2px solid var(--stp-ink); outline-offset: 4px; }
.stp-tube { flex: none; position: relative; width: 10px; height: 44px; box-sizing: border-box; border: 1.5px solid var(--stp-ink); border-top: 0; border-radius: 0 0 4px 4px; background: repeating-linear-gradient(to top, transparent 0 7.5px, rgba(28, 27, 23, .45) 7.5px 8.5px); }
.stp-tube i { position: absolute; left: 1px; right: 1px; bottom: 1px; height: calc(var(--stp-mm, 0) * (100% - 2px)); background: #3b4543; border-radius: 0 0 2px 2px; transition: height .5s var(--stp-ease); }
.stp-read { min-width: 0; width: 290px; }
.stp-say { margin: 0; font-weight: 600; font-size: .9375rem; line-height: 1.35; }
.stp-fine { margin: 4px 0 0; font-weight: 400; font-size: .8125rem; line-height: 1.35; color: #3d3c36; }
.stp-hint-k { display: none; }
.stp-model:focus-visible ~ .stp-gauge .stp-hint-k { display: inline; }
.stp-model:focus-visible ~ .stp-gauge .stp-rain { outline: 2px solid var(--stp-ink); outline-offset: 4px; }
.stp-dry { font: inherit; color: var(--stp-ink); background: none; border: 0; border-bottom: 1px solid var(--stp-ink); padding: 0; margin-left: 4px; cursor: pointer; }

@media (max-width: 1180px) and (min-width: 901px) {
  .stp-h1 { font-size: clamp(2.5rem, 4.4vw, 3.25rem); }
  .stp-hero-copy { width: 46%; }
}
/* phones and portrait tablets: the object first, the gauge on its foot, then the words and the way in */
@media (max-width: 900px), (max-aspect-ratio: 1/1) {
  .stp-hero { height: auto; display: flex; flex-direction: column; padding-bottom: 72px; }
  .stp-model { position: relative; order: 1; left: 0; width: 100%; top: 0; bottom: auto; height: clamp(260px, 40svh, 520px); }
  .stp-cv { inset: -8% 0 -2% 0; width: 100%; height: 110%; }
  .stp-poster { right: auto; left: 50%; translate: -50% 0; width: min(94cqw, calc(90cqh * 1.219)); bottom: 2cqh; }
  .stp-gauge { position: relative; order: 2; left: auto; top: auto; translate: none; width: auto; max-width: none; margin: 10px var(--stp-m) 0; gap: 12px; }
  .stp-rain { min-height: 44px; padding: 0 16px 0 12px; font-size: .9375rem; }
  .stp-tube { height: 40px; }
  .stp-read { width: auto; flex: 1; }
  .stp-say { font-size: .875rem; }
  .stp-fine { font-size: .75rem; }
  .stp-hero-copy { position: relative; order: 3; left: auto; top: auto; width: auto; padding: 22px var(--stp-m) 0; }
  .stp-light { margin-top: 10px; }
  .stp-hero-link { margin-top: 18px; font-size: .9375rem; }
}
@media (max-width: 900px) and (min-width: 701px), (max-aspect-ratio: 1/1) and (min-width: 701px) {
  .stp-model { height: clamp(360px, 46svh, 600px); }
  .stp-hero-copy { width: 78%; }
  .stp-gauge { margin-left: auto; margin-right: auto; width: min(620px, calc(100% - 2 * var(--stp-m))); }
}
@media (max-width: 480px) { .stp-h1 { font-size: 2.125rem; } .stp-light { font-size: 1.0625rem; } }
@media (max-width: 359px) { .stp-h1 { font-size: 1.875rem; } .stp-tube { display: none; } }
@media (max-width: 700px) and (max-height: 700px) {
  .stp-model { height: 36svh; min-height: 200px; }
  .stp-h1 { font-size: 1.9375rem; }
  .stp-light { font-size: 1rem; }
}

/* ── bands: the way the water runs ─────────────────────────────────────────────────────────────────── */
.stp-band { position: relative; padding: clamp(80px, 9.5vw, 140px) 0; scroll-margin-top: calc(var(--bar-h, 40px) + var(--nav-h, 56px)); }
.stp-state, .stp-cut, .stp-ls, .stp-map, .stp-damph, .stp-creekph, .stp-ver, .stp-wool { scroll-margin-top: calc(var(--bar-h, 40px) + var(--nav-h, 56px) + 32px); }
.stp-h2 { margin: 0; font-family: var(--stp-slab); font-weight: 760; font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem); line-height: 1.02; letter-spacing: -.012em; max-width: 18ch; }
.stp-h2:focus { outline: none; }
.stp-it { margin: 14px 0 0; max-width: 44ch; font-family: var(--stp-slab); font-style: italic; font-weight: 300; font-size: clamp(1.125rem, 1.009rem + .476vw, 1.5rem); line-height: 1.35; }
.stp-body { max-width: 60ch; margin: 18px 0 0; }
.stp-lead-it { margin: 48px 0 0; max-width: 44ch; font-family: var(--stp-slab); font-style: italic; font-weight: 340; font-size: clamp(.9375rem, .891rem + .19vw, 1.0625rem); line-height: 1.4; }
.stp-fine { color: #3d3c36; }
.stp-band a:focus-visible, .stp-foot a:focus-visible { outline: 2px solid var(--stp-ink); outline-offset: 3px; }

.stp-2c { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--stp-g); align-items: start; }
.stp-h3 { margin: 0; font-family: var(--stp-slab); font-weight: 780; font-size: clamp(1.375rem, 1.143rem + .952vw, 2rem); line-height: 1.1; }

/* the long section: the model cut along the way its water runs */
.stp-ls svg { display: block; width: 100%; height: auto; overflow: hidden; }
.stp-ls-gd { fill: url(#stp-lsh); stroke: var(--stp-ink); stroke-width: 2.6; stroke-linejoin: round; }
.stp-ls-hw, .stp-ls-cw { fill: #2e3634; transform-box: fill-box; transform-origin: 50% 100%; transition: transform 1.2s var(--stp-ease); }
.stp-ls-hw { transform: scaleY(var(--stp-hd, .85)); }
.stp-ls-cw { transform: scaleY(var(--stp-cd, .7)); }
.stp-ls-run { fill: none; stroke: #2e3634; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: calc(.14 + .86 * var(--stp-run, 0)); transition: opacity 1.2s ease; }
.stp-ls-hs { fill: var(--stp-ink); }
.stp-ls-tr { fill: none; stroke: var(--stp-ink); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.stp-ls-rain { fill: none; stroke: var(--stp-galv); stroke-width: 2.4; stroke-linecap: round; }
.stp-ls-flow { fill: none; stroke: var(--stp-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stp-ls-flow2, .stp-ls-roof { fill: none; stroke: var(--stp-ink); stroke-width: 2.4; stroke-dasharray: 8 7; stroke-linecap: round; }
.stp-ls-bd { stroke: var(--stp-ink); stroke-width: 5; }
.stp-ls-lb text { font: 600 30px var(--stp-sans); fill: var(--stp-ink); }
.stp-ls-lb-s text { font-size: 23px; }
.stp-ls figcaption, .stp-ls-cap { font-family: var(--stp-slab); font-style: italic; font-weight: 340; font-size: clamp(.9375rem, .891rem + .19vw, 1.0625rem); line-height: 1.4; }

/* the water: where the rain lands */
.stp-catch { padding-bottom: clamp(88px, 9vw, 136px); }
.stp-catch-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--stp-g); }
.stp-catch .stp-h2 { grid-column: 1 / 9; font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4.5rem); max-width: 14ch; letter-spacing: -.02em; }
.stp-catch .stp-it { grid-column: 1 / 8; }
.stp-weigh { grid-column: 3 / 12; margin: 64px 0 0; max-width: 26ch; font-family: var(--stp-slab); font-size: clamp(1.625rem, 1.114rem + 2.095vw, 3rem); line-height: 1.12; letter-spacing: -.01em; }
.stp-wt1 { font-weight: 900; font-variation-settings: "wght" 900; } .stp-wt2 { font-weight: 740; font-variation-settings: "wght" 740; }
.stp-wt3 { font-weight: 580; font-variation-settings: "wght" 580; } .stp-wt4 { font-weight: 420; font-variation-settings: "wght" 420; }
.stp-wt5 { font-weight: 240; font-variation-settings: "wght" 240; font-style: italic; }
.stp-ls-all { margin: clamp(64px, 7vw, 112px) 0 0; view-timeline: --stp-ls block; }
.stp-ls-sc { padding: 0 clamp(8px, 1.5vw, 24px); }
.stp-ls-all figcaption { margin-top: 18px; }
.stp-ls-all figcaption span { display: block; max-width: 60ch; }
.stp-catch-2 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--stp-g); align-items: start; margin-top: clamp(72px, 8vw, 128px); }
.stp-map { grid-column: 1 / 6; margin: 0; }
.stp-map svg { display: block; width: 100%; height: auto; overflow: visible; }
.stp-map-c { fill: rgba(28, 27, 23, .045); stroke: var(--stp-ink); stroke-width: 1.6; stroke-dasharray: 7 5; }
.stp-map-h { fill: rgba(46, 54, 52, .12); stroke: var(--stp-ink); stroke-width: 2.6; stroke-dasharray: 1 5; stroke-linecap: round; }
.stp-map-k { fill: none; stroke: #2e3634; stroke-width: 4; stroke-linecap: round; opacity: .8; }
.stp-map-d { fill: #2e3634; }
.stp-map-f { fill: none; stroke: var(--stp-galv); stroke-width: 1.4; stroke-linejoin: round; }
.stp-map-hs { fill: var(--stp-ink); } .stp-map-s { fill: var(--stp-galv); }
.stp-map-n { cursor: pointer; }
.stp-map-n circle { fill: var(--stp-canola); stroke: var(--stp-ink); stroke-width: 2; transition: stroke-width .2s ease; }
.stp-map-n text { font: 700 15px var(--stp-sans); text-anchor: middle; fill: var(--stp-ink); pointer-events: none; }
.stp-map-n:hover circle, .stp-map-n:focus-visible circle { stroke-width: 3.5; }
.spec-strainpost .stp-map-n:focus-visible { outline: none; }
.stp-catch-t { grid-column: 7 / 13; }
.stp-catch-t .stp-body:first-child { margin-top: 0; font-size: clamp(1.125rem, 1.05rem + .3vw, 1.375rem); line-height: 1.55; }
.stp-key { margin: 36px 0 0; padding: 0; list-style: none; }
.stp-key li + li { margin-top: 10px; }
.stp-key a { display: inline-flex; align-items: center; gap: 14px; color: var(--stp-ink); font-family: var(--stp-slab); font-style: italic; font-weight: 400; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.stp-key a:hover { text-decoration-thickness: 2px; }
.stp-key-n { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--stp-ink); border-radius: 50%; font: 700 .875rem/1 var(--stp-sans); font-style: normal; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .stp-wt { animation: stp-wt linear both; animation-timeline: view(); animation-range: entry 20% cover 40%; }
    .stp-ls-all .stp-ls-flow { stroke-dasharray: 1 1; animation: stp-flow linear both; animation-timeline: --stp-ls; animation-range: entry 55% cover 62%; }
    .stp-ls-all .stp-ls-rain { animation: stp-rainin linear both; animation-timeline: --stp-ls; animation-range: entry 10% entry 90%; }
    .stp-ls-all .stp-ls-lb { animation: stp-lbin linear both; animation-timeline: --stp-ls; animation-range: cover 35% cover 55%; }
  }
}
@keyframes stp-wt { from { font-variation-settings: "wght" 500; } }
@keyframes stp-flow { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes stp-rainin { from { opacity: 0; translate: 16px -60px; } to { opacity: 1; translate: 0 0; } }
@keyframes stp-lbin { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 900px) {
  .stp-catch-2 { display: block; }
  .stp-map { width: min(88%, 440px); }
  .stp-catch-t { margin-top: 48px; }
  .stp-weigh { grid-column: 1 / 13; }
}
@media (max-width: 700px) {
  .stp-ls-all .stp-ls-sc { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding: 0 var(--stp-m) 8px; }
  .stp-ls-all svg { width: 1040px; max-width: none; }
  .stp-catch .stp-h2 { font-size: 2.5rem; }
}

/* the dams: the photograph, the section, and a dry spring worked on it */
.stp-dams { padding-top: 0; }
.stp-damph { margin: 0 0 clamp(64px, 7vw, 112px) auto; width: min(100%, 76vw); }
.stp-damph img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.stp-dams-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--stp-g); align-items: start; }
.stp-state { grid-column: 1 / 10; margin: 0; max-width: 30ch; font-family: var(--stp-slab); font-style: italic; font-weight: 300; font-size: clamp(1.625rem, 1.114rem + 2.095vw, 3rem); line-height: 1.12; }
.stp-dams .stp-h2 { grid-column: 1 / 8; margin-top: 28px; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem); max-width: 26ch; }
.stp-cut { grid-column: 1 / 13; grid-row: 3; container-type: inline-size; width: 100%; max-width: 1180px; margin: 56px 0 0; }
.stp-cut svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.stp-cut figcaption { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: var(--stp-g); align-items: start; margin-top: 22px; }
.stp-cut figcaption .stp-dry-say { grid-row: 1 / 3; }
.stp-cut figcaption .stp-stock { margin-top: 0; }
.stp-cut-gs { fill: #c3c1b7; } .stp-cut-g { fill: url(#stp-hatch); } .stp-cut-edge { fill: none; stroke: var(--stp-ink); stroke-width: 2.4; stroke-linejoin: round; }
.stp-cut-water rect { fill: #2e3634; transition: y .7s var(--stp-ease), height .7s var(--stp-ease); }
.stp-cut-rain { fill: none; stroke: var(--stp-galv); stroke-width: 1.5; stroke-linecap: round; }
.stp-cut-bd { stroke: var(--stp-ink); stroke-width: 6; }
.stp-cut-tree { fill: none; stroke: var(--stp-ink); stroke-width: 2; stroke-linejoin: round; }
.stp-cut-tide { fill: none; stroke: var(--stp-ink); stroke-width: 1.5; stroke-dasharray: 3 4; opacity: 0; transition: opacity .4s ease; }
.stp-cut-tide.is-on { opacity: .75; }
.stp-cut-sunpath { fill: none; stroke: var(--stp-galv); stroke-width: 1.5; stroke-dasharray: 2 7; stroke-linecap: round; cursor: pointer; }
.stp-sun { cursor: grab; transition: translate .35s var(--stp-ease); touch-action: none; }
.stp-sun.is-drag { cursor: grabbing; transition: none; }
.stp-sun-hit { fill: transparent; stroke: none; }
.stp-sun-d { fill: var(--stp-stone); stroke: var(--stp-ink); stroke-width: 2.4; }
.stp-sun-r { fill: none; stroke: var(--stp-ink); stroke-width: 2.4; stroke-linecap: round; }
.spec-strainpost .stp-sun:focus-visible { outline: none; }
.stp-sun:focus-visible .stp-sun-hit { stroke: var(--stp-ink); stroke-width: 2; stroke-dasharray: 4 4; }
.stp-sun:hover .stp-sun-d { stroke-width: 3.4; }
.stp-cut-1, .stp-cut-2, .stp-cut-3 { opacity: .55; transition: opacity .3s ease; }
.stp-cut-ar, .stp-cut-by { fill: none; stroke: var(--stp-ink); stroke-width: 2.4; stroke-dasharray: 7 6; stroke-linecap: round; }
.stp-cut-ah, .stp-cut-br, .stp-cut-lead { fill: none; stroke: var(--stp-ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.stp-cut-dry { stroke: var(--stp-ink); stroke-width: 3; stroke-dasharray: 10 6; }
.stp-cut-dot { fill: var(--stp-ink); }
.stp-cut[data-q="0"] :is(.stp-cut-1, .stp-cut-2, .stp-cut-3), .stp-cut[data-q="1"] .stp-cut-1, .stp-cut[data-q="2"] .stp-cut-2, .stp-cut[data-q="3"] .stp-cut-3 { opacity: 1; }
/* the questions, set in the cut ground under the part each one asks about */
.stp-notes { display: grid; grid-template-columns: 60fr 360fr 230fr 250fr; background: #c3c1b7; padding: 4px 0 clamp(26px, 3.2cqw, 44px); }
.stp-note { position: relative; padding: 0 clamp(14px, 2cqw, 30px) 0 clamp(12px, 1.4cqw, 20px); border-left: 1.5px solid var(--stp-ink); transition: opacity .3s ease; }
.stp-note-1 { grid-column: 2; } .stp-note-3 { grid-column: 3; } .stp-note-2 { grid-column: 4; }
.stp-note h3 { margin: 0; font-family: var(--stp-slab); font-weight: 820; font-size: clamp(1.0625rem, .6rem + 1.25cqw, 1.625rem); line-height: 1.1; letter-spacing: -.005em; text-wrap: balance; }
.stp-note p { margin: 10px 0 0; max-width: 40ch; font-size: clamp(.875rem, .74rem + .38cqw, 1.0625rem); line-height: 1.5; }
.stp-cut:is([data-q="1"], [data-q="2"], [data-q="3"]) .stp-note { opacity: .5; }
.stp-cut[data-q="1"] .stp-note-1, .stp-cut[data-q="2"] .stp-note-2, .stp-cut[data-q="3"] .stp-note-3 { opacity: 1; }
.stp-dry-say { margin: 0; max-width: 56ch; min-height: 4.4em; font-weight: 600; font-size: clamp(.9375rem, .914rem + .095vw, 1.0625rem); line-height: 1.45; }
.stp-stock { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin: 12px 0 0; padding: 0; border: 0; min-width: 0; }
.stp-stock legend { float: left; margin-right: 6px; padding: 0; font-family: var(--stp-slab); font-style: italic; font-weight: 400; }
.stp-stock label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 500; }
.stp-stock input { appearance: none; margin: 0; width: 18px; height: 18px; border: 1.5px solid var(--stp-ink); border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.stp-stock input::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--stp-ink); opacity: 0; }
.stp-stock input:checked::after { opacity: 1; }
.stp-stock input:focus-visible { outline: 2px solid var(--stp-ink); outline-offset: 2px; }
.stp-cut .stp-fine { margin-top: 10px; font-size: .8125rem; }
.stp-again { grid-column: 1 / 13; grid-row: 4; justify-self: start; display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; color: var(--stp-ink); font-family: var(--stp-slab); font-style: italic; font-weight: 400; font-size: 1.125rem; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.stp-again svg { width: 20px; height: 20px; color: var(--stp-canola); stroke: var(--stp-ink); }
@media (max-width: 900px) {
  .stp-dams-in { display: block; }
  .stp-damph { width: 100%; }
  .stp-cut { margin-top: 44px; }
  .stp-cut figcaption { display: block; }
  .stp-cut figcaption .stp-stock { margin-top: 12px; }
}
@media (max-width: 700px) {
  .stp-notes { grid-template-columns: 1fr; row-gap: 26px; padding: 8px 18px 28px; }
  .stp-note-1, .stp-note-2, .stp-note-3 { grid-column: 1; }
  .stp-note h3 { font-size: 1.25rem; }
  .stp-note p { font-size: .9375rem; }
  .stp-cut .stp-cut-lead, .stp-cut .stp-cut-dot { display: none; }
}

/* the creek: where it goes when the dams are full */
.stp-creek { padding-top: clamp(24px, 3vw, 48px); }
.stp-creek-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--stp-g); align-items: start; }
.stp-creekph { grid-column: 1 / 8; grid-row: 1 / 3; margin: 0 0 0 calc(var(--stp-m) * -1); }
.stp-creekph img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 42% 60%; }
.stp-creek-t { grid-column: 9 / 13; padding-top: clamp(8px, 3vw, 48px); }
.stp-creek .stp-h2 { font-size: clamp(2rem, 1.3rem + 2.8vw, 4rem); max-width: 10ch; }
.stp-ls-creek { grid-column: 8 / 13; grid-row: 2; align-self: end; margin: 48px 0 0; }
@media (max-width: 900px) {
  .stp-creek-in { display: block; }
  .stp-creekph { margin: 0 calc(var(--stp-m) * -1); }
  .stp-creek-t { padding-top: 40px; }
  .stp-ls-creek { margin-top: 40px; max-width: 620px; }
}

/* this spring: the canola in its own colour, then the places */
.stp-spring { padding-top: 0; }
.stp-canola { margin: 0 0 clamp(64px, 7vw, 112px); }
.stp-canola img { display: block; width: 100%; height: min(56.25vw, 84svh); object-fit: cover; object-position: 50% 62%; }
.stp-spring .stp-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--stp-g); align-items: start; }
.stp-spring .stp-h2 { grid-column: 1 / 8; font-size: clamp(2rem, 1.3rem + 2.8vw, 4rem); max-width: 12ch; }
.stp-spring .stp-it { grid-column: 8 / 13; align-self: end; margin: 0; }
.stp-list { grid-column: 1 / 13; margin-top: 64px; }
.stp-place { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--stp-g); padding: 30px 0; align-items: start; border-top: 1.5px solid var(--stp-galv); }
.stp-plan { grid-column: 1 / 3; grid-row: 1 / 4; width: 100%; max-width: 132px; height: auto; overflow: visible; }
.stp-plan-b { fill: rgba(28, 27, 23, .06); stroke: var(--stp-ink); stroke-width: 2.2; stroke-linejoin: round; }
.stp-plan-f { fill: none; stroke: var(--stp-ink); stroke-width: 1.1; opacity: .7; }
.stp-plan-k { fill: none; stroke: #5f6360; stroke-width: 2.6; stroke-linecap: round; }
.stp-plan-p { fill: none; stroke: var(--stp-ink); stroke-width: 1.2; stroke-dasharray: 4 3; }
.stp-plan-d { fill: #2e3634; }
.stp-plan-o { fill: none; stroke: #2e3634; stroke-width: 1.4; stroke-dasharray: 2 2.5; }
.stp-plan-h { fill: var(--stp-ink); }
.stp-plan-s { fill: none; stroke: var(--stp-ink); stroke-width: 1.3; }
.stp-plan-c rect { fill: var(--stp-ink); }
.stp-place h3 { grid-column: 3 / 8; margin: 0; font-family: var(--stp-slab); font-weight: 780; font-size: clamp(1.375rem, 1.143rem + .952vw, 2rem); line-height: 1.1; max-width: 16ch; }
.stp-place p, .stp-place .stp-see { grid-column: 8 / 13; }
.stp-place p { margin: 4px 0 0; max-width: 42ch; font-weight: 500; font-size: clamp(.9375rem, .914rem + .095vw, 1rem); line-height: 1.45; }
.stp-place-big { padding: 40px 0 48px; border-top-width: 3px; border-top-color: var(--stp-ink); }
.stp-place-big .stp-plan { grid-column: 9 / 13; grid-row: 1 / 4; max-width: 260px; justify-self: end; }
.stp-place-big h3 { grid-column: 1 / 8; font-weight: 840; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); line-height: 1; max-width: 15ch; letter-spacing: -.012em; }
.stp-place-big p, .stp-place-big .stp-see { grid-column: 1 / 8; }
.stp-place-big p { margin-top: 18px; font-size: clamp(1.0625rem, 1.016rem + .19vw, 1.1875rem); line-height: 1.55; max-width: 48ch; }
.stp-see { justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--stp-ink); font-family: var(--stp-slab); font-style: italic; font-weight: 400; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.stp-see:hover { text-decoration-thickness: 2px; }
@media (max-width: 1180px) {
  .stp-place h3 { grid-column: 3 / 13; max-width: 22ch; }
  .stp-place p, .stp-place .stp-see { grid-column: 3 / 13; }
  .stp-place p { margin-top: 8px; }
}
@media (max-width: 900px) {
  .stp-spring .stp-in { display: block; }
  .stp-spring .stp-it { margin-top: 14px; }
  .stp-canola img { height: auto; aspect-ratio: 4 / 5; }
  .stp-place { padding: 24px 0; }
  .stp-place-big h3, .stp-place-big p, .stp-place-big .stp-see { grid-column: 1 / 9; }
  .stp-place-big .stp-plan { grid-column: 9 / 13; }
}
@media (max-width: 520px) {
  .stp-place .stp-plan { grid-column: 1 / 4; max-width: 84px; }
  .stp-place h3, .stp-place p, .stp-place .stp-see { grid-column: 4 / 13; }
  .stp-place-big .stp-plan { grid-column: 1 / 13; grid-row: auto; justify-self: start; max-width: 150px; margin-top: 18px; order: 9; }
  .stp-place-big h3, .stp-place-big p, .stp-place-big .stp-see { grid-column: 1 / 13; }
}

/* and last, the house */
.stp-house-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--stp-g); align-items: start; }
.stp-house .stp-h2 { grid-column: 1 / 9; font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4.5rem); max-width: 14ch; letter-spacing: -.02em; }
.stp-house .stp-it { grid-column: 1 / 8; }
.stp-ver { grid-column: 1 / 9; grid-row: 3; margin: 56px 0 0; }
.stp-ver img, .stp-wool img { display: block; width: 100%; height: auto; }
.stp-ver figcaption, .stp-wool figcaption { margin-top: 14px; max-width: 46ch; font-family: var(--stp-slab); font-style: italic; font-weight: 340; font-size: clamp(.9375rem, .891rem + .19vw, 1.0625rem); line-height: 1.4; }
.stp-ls-house { grid-column: 9 / 13; grid-row: 3; align-self: end; margin: 0 0 88px; }
.stp-sell { grid-column: 1 / 8; grid-row: 4; margin-top: clamp(64px, 7vw, 104px); }
.stp-runin { margin-top: 20px; font-size: clamp(1.125rem, 1.05rem + .3vw, 1.375rem); line-height: 1.6; max-width: 46ch; }
.stp-runin b { font-family: var(--stp-slab); font-weight: 820; }
.stp-fix { margin: 48px 0 0 clamp(0px, 8vw, 120px); }
.stp-fix .stp-lead-it { margin: 0; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.75rem); font-weight: 700; font-style: italic; line-height: 1.15; }
.stp-fix .stp-body { margin-top: 12px; }
.stp-wool { grid-column: 9 / 13; grid-row: 4; margin: clamp(64px, 7vw, 104px) 0 0; }
@media (max-width: 900px) {
  .stp-house-in { display: block; }
  .stp-ver { margin: 44px calc(var(--stp-m) * -1) 0; }
  .stp-ver figcaption { padding: 0 var(--stp-m); }
  .stp-ls-house { margin: 44px 0 0; max-width: 460px; }
  .stp-wool { width: 72%; margin: 56px 0 0 auto; }
}

/* the back ridge: ask for a walk */
.stp-ask { padding-bottom: clamp(72px, 8vw, 120px); }
.stp-ask .stp-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--stp-g); }
.stp-ask-copy { grid-column: 1 / 6; }
.stp-post-ph { margin: 48px 0 0; width: 80%; }
.stp-post-ph img { display: block; width: 100%; height: auto; }
.stp-form { grid-column: 7 / 12; display: grid; grid-template-columns: 1fr 1fr; gap: 26px var(--stp-g); align-content: start; padding-top: 8px; }
.stp-fld { margin: 0; display: grid; gap: 6px; border: 0; padding: 0; min-width: 0; grid-column: 1 / -1; }
.stp-fld-h { grid-column: auto; }
.stp-fld label, .stp-fld legend { font-weight: 500; font-size: 1rem; line-height: 1.35; padding: 0; }
.stp-fld input[type="text"], .stp-fld input[type="email"], .stp-fld select, .stp-fld textarea {
  width: 100%; box-sizing: border-box; font: 500 1rem/1.4 var(--stp-sans); color: var(--stp-ink); background: transparent; border: 0; border-bottom: 1px solid var(--stp-galv); border-radius: 0; padding: 8px 0; appearance: none;
}
.stp-fld textarea { resize: vertical; }
.stp-fld :is(input, select, textarea):focus-visible { outline: none; border-bottom: 2px solid var(--stp-ink); padding-bottom: 7px; }
.stp-fld select { padding-right: 22px; background: linear-gradient(45deg, transparent 50%, var(--stp-ink) 50%) calc(100% - 10px) 55% / 6px 6px no-repeat, linear-gradient(-45deg, transparent 50%, var(--stp-ink) 50%) calc(100% - 4px) 55% / 6px 6px no-repeat; }
.stp-checks { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.stp-checks legend { margin-bottom: 10px; }
.stp-checks label { display: inline-flex; align-items: center; gap: 10px; font-weight: 400; cursor: pointer; }
.stp-checks input { appearance: none; width: 20px; height: 20px; margin: 0; border: 1.5px solid var(--stp-galv); display: grid; place-items: center; cursor: pointer; }
.stp-checks input::after { content: ""; width: 12px; height: 12px; background: linear-gradient(45deg, transparent 44%, var(--stp-ink) 44% 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, var(--stp-ink) 44% 56%, transparent 56%); opacity: 0; }
.stp-checks input:checked { border-color: var(--stp-ink); }
.stp-checks input:checked::after { opacity: 1; }
.stp-checks input:focus-visible { outline: 2px solid var(--stp-ink); outline-offset: 2px; }
.stp-send { grid-column: 1 / 2; justify-self: stretch; margin-top: 8px; font: 600 1rem/1 var(--stp-sans); color: var(--stp-stone); background: var(--stp-ink); border: 0; border-radius: 2px; padding: 17px 28px; cursor: pointer; }
.stp-send:hover { background: #33322c; }
.stp-send:focus-visible { outline: 2px solid var(--stp-ink); outline-offset: 3px; }
.stp-status { grid-column: 1 / -1; margin: 0; min-height: 1.4em; font-weight: 500; }
@media (max-width: 1180px) { .stp-form { grid-column: 6 / 13; } }
@media (max-width: 900px) { .stp-ask .stp-in { display: block; } .stp-form { margin-top: 56px; } .stp-post-ph { width: 60%; margin-left: auto; } }
@media (max-width: 520px) { .stp-form { grid-template-columns: 1fr; } .stp-fld-h, .stp-send { grid-column: 1 / -1; } }

/* the foot */
.stp-foot { position: relative; padding: clamp(72px, 8vw, 112px) 0 64px; border-top: 1.5px solid var(--stp-galv); }
.stp-foot-mk { grid-column: 1 / -1; width: 56px; height: 56px; margin-bottom: 28px; fill: var(--stp-ink); }
.stp-foot .stp-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--stp-g); align-items: end; }
.stp-foot-t { grid-column: 1 / 7; margin: 0; max-width: 34ch; font-family: var(--stp-slab); font-weight: 700; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem); line-height: 1.2; }
.stp-foot-t span { display: block; font-weight: 300; font-style: italic; }
.stp-foot-links { grid-column: 8 / 13; display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 0; padding: 0; list-style: none; justify-content: flex-end; }
.stp-foot-links a { color: var(--stp-ink); font-weight: 500; font-size: 15px; line-height: 2; }
@media (max-width: 900px) { .stp-foot .stp-in { display: block; } .stp-foot-links { justify-content: flex-start; margin-top: 28px; } }

/* photographs fade up once */
.stp-js :is(.stp-canola, .stp-damph, .stp-creekph, .stp-ver, .stp-wool, .stp-post-ph) img { opacity: 0; scale: 1.02; transition: opacity .7s var(--stp-ease), scale .7s var(--stp-ease); }
.stp-js :is(.stp-canola, .stp-damph, .stp-creekph, .stp-ver, .stp-wool, .stp-post-ph).is-in img { opacity: 1; scale: 1; }
:is(.stp-canola, .stp-damph, .stp-creekph, .stp-ver, .stp-wool, .stp-post-ph) picture { display: block; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .stp-cv, .stp-poster, .stp-hero-link svg, .stp-sun, .stp-cut-water rect, .stp-ls-hw, .stp-ls-cw, .stp-ls-run { transition: none; }
}
@media (scripting: none) { .stp-rain, .stp-tube { display: none; } }