/* Headlap. Storm ground, rain-white ink, one terracotta tile.
   Antonio set heavy for what is said loud; Public Sans for reading.
   The page is laid like a roof: each course laps over the one below. */

@font-face { font-family: "Antonio"; font-style: normal; font-weight: 100 700; font-display: swap; src: url("/assets/fonts/specimen/antonio-var.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/specimen/public-sans-var.woff2") format("woff2"); }

.spec-headlap {
  --hl-storm: #2F3E4A;
  --hl-rain: #F2F1EC;
  --hl-tile: #E0663F;
  --hl-mist: #A9BDCB;
  --hl-soffit: #1E2A33;
  --hl-slate: #141C22;
  --hl-shade: rgb(12 18 22 / .45);
  --hl-hair: rgb(169 189 203 / .45);
  --hl-display: "Antonio", "Arial Narrow", "Roboto Condensed", sans-serif;
  --hl-text: "Public Sans", system-ui, "Segoe UI", sans-serif;
  --fs-h1: clamp(3.5rem, 1.2rem + 7.8vw, 8.5rem);
  --fs-h2: clamp(2.5rem, 1rem + 5.4vw, 6.5rem);
  --fs-list: clamp(2rem, .9rem + 3.6vw, 4.5rem);
  --fs-answer: clamp(2.25rem, 1rem + 4vw, 5.25rem);
  --fs-h3: clamp(1.625rem, 1.1rem + 1.6vw, 2.75rem);
  --fs-label: clamp(.8125rem, .75rem + .2vw, .9375rem);
  --fs-lead: clamp(1.1875rem, 1.05rem + .45vw, 1.4375rem);
  --fs-body: clamp(1rem, .95rem + .15vw, 1.0625rem);
  --fs-small: .875rem;
  --hl-m: clamp(16px, 4.45vw, 64px);
  --hl-gap: clamp(12px, 1.67vw, 24px);
  --g: clamp(8px, calc(.42vw + 6.4px), 14px);
  --lap: calc(3 * var(--g));
  --nav-h: 56px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  background: var(--hl-storm);
  color: var(--hl-rain);
}
body.spec-headlap { margin: 0; background: var(--hl-storm); }
.spec-headlap #spec-main { display: block; background: var(--hl-storm); }
.hl-page { font: 400 var(--fs-body)/1.6 var(--hl-text); color: var(--hl-rain); background: var(--hl-storm); overflow-x: clip; -webkit-font-smoothing: antialiased; }
.hl-page *, .hl-page *::before, .hl-page *::after { box-sizing: border-box; }
.hl-page :where(h1, h2, h3, p, ul, ol, figure) { margin: 0; }
.hl-page :where(ul, ol) { padding: 0; list-style: none; }
.hl-page img { display: block; max-width: 100%; height: auto; }
.hl-page a { color: inherit; }
.hl-page :focus-visible { outline: 3px solid var(--hl-tile); outline-offset: 3px; }
.hl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hl-wrap { width: min(100%, calc(1312px + 2 * var(--hl-m))); margin: 0 auto; padding: 0 var(--hl-m); }
[id^="hl-"] { scroll-margin-top: calc(var(--bar-h, 40px) + var(--nav-h)); }

/* ---------- type ---------- */
.hl-h1, .hl-h2, .hl-h3, .hl-page h3 { font-family: var(--hl-display); text-wrap: balance; }
.hl-h1 { font-size: var(--fs-h1); font-weight: 700; line-height: .9; letter-spacing: -.01em; }
.hl-h2 { font-size: var(--fs-h2); font-weight: 700; line-height: .9; letter-spacing: -.005em; }
.hl-h3, .hl-page h3 { font-size: var(--fs-h3); font-weight: 650; line-height: .95; }
.hl-lead { font-size: var(--fs-lead); line-height: 1.45; max-width: 36ch; text-wrap: pretty; }
.hl-page p { text-wrap: pretty; }

/* ---------- plates, links ---------- */
.hl-plate {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border: 0; border-radius: 0;
  font: 600 1rem/1 var(--hl-text); letter-spacing: .01em; text-decoration: none; cursor: pointer;
  box-shadow: inset 0 -2px 0 rgb(0 0 0 / .28);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s;
}
.hl-plate:active { transform: translateY(2px); box-shadow: inset 0 0 0 rgb(0 0 0 / .28); }
.hl-page .hl-plate--tile { background: var(--hl-tile); color: var(--hl-slate); }
.hl-page .hl-plate--tile:hover { background: #E8764F; }
.hl-plate--mist { background: var(--hl-mist); color: var(--hl-slate); }
.hl-plate--mist:hover { background: #BCCCD8; }
.hl-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px;
  font-weight: 600; text-decoration: none;
  background: url("edge-corrugate.svg") 0 100% / 10px 4px repeat-x;
  background-size: 0 0;
}
.hl-link:hover { background-color: transparent; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-style: wavy; text-decoration-color: var(--hl-tile); }
.hl-arrow { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; transform: rotate(22.5deg); }

/* ---------- nav ---------- */
.hl-nav { position: sticky; top: var(--bar-h, 40px); z-index: 60; height: var(--nav-h); background: rgb(47 62 74 / .94); border-bottom: 1px solid rgb(169 189 203 / .18); }
.hl-nav-in { height: 100%; display: flex; align-items: center; gap: clamp(12px, 2vw, 32px); width: min(100%, calc(1312px + 2 * var(--hl-m))); margin: 0 auto; padding: 0 var(--hl-m); }
.hl-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; }
.hl-mark { width: 28px; height: 24px; flex: none; }
.hl-brand-word { font: 600 20px/1 var(--hl-display); letter-spacing: .12em; text-transform: uppercase; }
.hl-nav-list { display: flex; gap: clamp(14px, 1.8vw, 28px); margin-left: auto; }
.hl-nav-list a { font: 500 15px/1 var(--hl-text); text-decoration: none; color: var(--hl-rain); padding: 12px 0; display: inline-block; }
.hl-nav-list a:hover { color: var(--hl-mist); }
.hl-nav-cta { min-height: 40px; padding: 0 18px; font-size: .9375rem; }
.hl-menu { display: none; margin-left: auto; min-height: 40px; padding: 0 14px; background: transparent; color: var(--hl-rain); border: 1px solid var(--hl-hair); border-radius: 0; font: 600 13px/1 var(--hl-display); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
@media (max-width: 900px) {
  .hl-menu { display: inline-flex; align-items: center; margin-left: 0; }
  .hl-nav-cta { margin-left: auto; }
  .hl-nav-list {
    display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0;
    padding: 8px var(--hl-m) calc(24px + 20px); background: var(--hl-storm);
    -webkit-mask: url("edge-ridge.svg") bottom left / 168px 20px repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - 20px) no-repeat;
            mask: url("edge-ridge.svg") bottom left / 168px 20px repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - 20px) no-repeat;
  }
  .hl-nav.is-open .hl-nav-list { display: flex; }
  .hl-nav-list a { font: 600 1.75rem/1 var(--hl-display); padding: 12px 0; }
}
@media (max-width: 420px) { .hl-nav-cta { display: none; } .hl-menu { margin-left: auto; } }

/* ---------- courses and laps ---------- */
.hl-course { position: relative; --course-bg: var(--hl-storm); background: var(--course-bg); padding-block: calc(12 * var(--g)); timeline-scope: --lap; }
.hl-course + .hl-course { padding-top: calc(12 * var(--g) + var(--lap)); }
.hl-lapline { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; visibility: hidden; pointer-events: none; view-timeline: --lap block; }
.hl-lip {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 3; pointer-events: none;
  --edge-w: 76px; --edge-h: 24px;
  height: calc(var(--lap) + var(--edge-h));
}
.hl-lip::before, .hl-lip::after { content: ""; position: absolute; left: 0; right: 0; }
.hl-lip::before {
  z-index: 1; top: 0; height: 100%; background: var(--course-bg);
  -webkit-mask: var(--edge) bottom left / var(--edge-w) var(--edge-h) repeat-x, linear-gradient(#000 0 0) top / 100% var(--lap) no-repeat;
          mask: var(--edge) bottom left / var(--edge-w) var(--edge-h) repeat-x, linear-gradient(#000 0 0) top / 100% var(--lap) no-repeat;
}
.hl-lip::after {
  z-index: 0; top: calc(var(--lap) - var(--edge-h) * .25 + .6 * var(--g)); height: calc(var(--edge-h) * 1.5);
  background: var(--shade) 0 0 / var(--edge-w) 100% repeat-x;
}
.hl-lip--ridge { --edge: url("edge-ridge.svg"); --shade: url("shade-ridge.svg"); --edge-w: 168px; }
.hl-lip--corrugate { --edge: url("edge-corrugate.svg"); --shade: url("shade-corrugate.svg"); --edge-h: 20px; }
.hl-lip--wide { --edge-w: 122px; --edge-h: 30px; }
.hl-lip--roll { --edge: url("edge-roll.svg"); --shade: url("shade-roll.svg"); }
.hl-lip--butt { --edge: url("edge-butt.svg"); --shade: url("shade-butt.svg"); --edge-w: 120px; }
.hl-lip--step { --edge: url("edge-step.svg"); --shade: url("shade-step.svg"); --edge-w: 48px; }
.hl-lip--ceiling { --edge: url("edge-ceiling.svg"); --shade: url("shade-ceiling.svg"); --edge-w: 16px; }
.hl-top { z-index: 9; }
.hl-find { z-index: 8; }
.hl-roofs { z-index: 7; --course-bg: var(--hl-mist); color: var(--hl-slate); }
.hl-layers { z-index: 6; --course-bg: var(--hl-soffit); }
.hl-detail { z-index: 5; }
.hl-hear { z-index: 4; --course-bg: var(--hl-soffit); }
.hl-gutter { z-index: 3; }
.hl-where { z-index: 2; --course-bg: var(--hl-tile); color: var(--hl-slate); }
.hl-ask { z-index: 1; }
.hl-roofs :focus-visible, .hl-where :focus-visible { outline-color: var(--hl-slate); }

/* drips off a lip while the gutter up top is choked */
.hl-drip {
  position: absolute; z-index: 2; top: calc(100% - 6px); width: 5px; height: 8px; margin-left: -2.5px;
  border-radius: 50% 50% 50% 50% / 38% 38% 62% 62%;
  background: radial-gradient(circle at 35% 30%, var(--hl-rain) 0 1px, transparent 1.5px), rgb(169 189 203 / .85);
  transform-origin: 50% 0;
}
.hl-drip[hidden] { display: none; }

/* the lap: each course's lip is laid down over the next as it scrolls into place */
@keyframes hl-lay { from { transform: translateY(calc(-1 * var(--lap))); } to { transform: none; } }
@keyframes hl-shade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hl-drop { from { transform: translateY(calc(-1 * var(--g))); } to { transform: none; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hl-lip { animation: hl-lay linear both; animation-timing-function: var(--ease); animation-timeline: --lap; animation-range: entry 0% cover 30%; }
    .hl-lip::after { animation: hl-shade linear both; animation-timeline: --lap; animation-range: entry 0% cover 30%; }
    .hl-course:not(.hl-top) .hl-h2, .hl-course:not(.hl-top) > .hl-wrap > .hl-h3 { animation: hl-drop linear both; animation-timing-function: var(--ease); animation-timeline: view(); animation-range: entry 0% entry 100%; }
  }
}

/* ---------- 1 · the ridge (hero) ---------- */
.hl-top {
  --hero-h: max(420px, calc(100svh - var(--bar-h, 40px) - var(--nav-h)));
  --gut: .56;
  --fascia: calc(var(--hero-h) * var(--gut));
  --course-bg: var(--hl-soffit);
  padding: 0; min-height: var(--hero-h);
  isolation: isolate;
}
.hl-rain { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--hl-soffit); touch-action: pan-y; cursor: crosshair; outline-offset: -6px; }
.hl-poster, .hl-poster img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hl-poster img { object-fit: cover; object-position: 50% 42%; }
.hl-poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 0 calc(var(--fascia) + 4px), rgb(30 42 51 / .72) calc(var(--fascia) + 60px), rgb(30 42 51 / .9)); }
.hl-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s linear; }
.hl-rain.is-live .hl-canvas { opacity: 1; }
.hl-rain.is-live .hl-poster { visibility: hidden; transition: visibility 0s .6s; }
.hl-rain:not(.is-live) ~ .hl-fascia { opacity: 0; }
.hl-fascia { position: absolute; left: 0; right: 0; top: var(--fascia); height: 4px; background: var(--hl-mist); z-index: 1; pointer-events: none; box-shadow: 0 6px 14px rgb(12 18 22 / .5); }

.hl-chooser { position: absolute; z-index: 4; top: calc(var(--hero-h) * .06 + 12px); right: var(--hl-m); display: flex; gap: 6px; }
.hl-tab {
  width: 72px; height: 44px; padding: 4px 6px 5px; display: grid; grid-template-rows: 1fr auto; justify-items: center; gap: 1px;
  background: rgb(30 42 51 / .82); color: var(--hl-rain); border: 0; border-radius: 0; cursor: pointer;
  box-shadow: inset 0 -2px 0 rgb(0 0 0 / .35), inset 0 0 0 1px rgb(169 189 203 / .28);
  font: 500 13px/1 var(--hl-text); transition: transform .18s var(--ease), background-color .18s;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hl-tab svg { width: 40px; height: 20px; }
.hl-saw { fill: var(--hl-mist); }
.hl-cut { fill: none; stroke: var(--hl-rain); stroke-width: 1.5; }
.hl-tab:hover { background: rgb(47 62 74 / .9); }
.hl-tab:active { transform: translateY(2px); }
.hl-tab[aria-pressed="true"] { background: var(--hl-tile); color: var(--hl-slate); box-shadow: inset 0 -2px 0 rgb(0 0 0 / .3); }
.hl-tab[aria-pressed="true"] .hl-saw { fill: var(--hl-slate); }
.hl-tab[aria-pressed="true"] .hl-cut { stroke: #F5B49C; }
.hl-tab:focus-visible { outline-color: var(--hl-rain); }

.hl-clear { position: absolute; z-index: 4; right: var(--hl-m); top: calc(var(--fascia) + 4px); min-height: 40px; padding: 0 16px; font-size: .9375rem; }
.hl-clear::before { content: ""; width: 10px; height: 10px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
.hl-clear:disabled { background: transparent; color: var(--hl-mist); box-shadow: inset 0 0 0 1px var(--hl-hair); cursor: default; transform: none; }
.hl-clear:disabled::before { width: 6px; height: 11px; transform: translateY(-2px) rotate(45deg); }

.hl-hero-in {
  position: relative; z-index: 2; pointer-events: none;
  width: min(100%, calc(1312px + 2 * var(--hl-m))); margin: 0 auto; padding: calc(var(--fascia) + 4px + 2 * var(--g)) var(--hl-m) calc(4 * var(--g));
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hl-gap); align-items: start;
}
.hl-hero-in a, .hl-hero-in button { pointer-events: auto; }
.hl-h1 { grid-column: 1 / 9; text-shadow: 0 2px 24px rgb(20 28 34 / .55); }
.hl-h1 > span { display: inline; }
.hl-l1 { display: block !important; }
.hl-hero-side { grid-column: 9 / 13; padding-top: calc(40px + 2 * var(--g)); display: grid; gap: calc(2 * var(--g)); }
.hl-hero-lead { font-size: var(--fs-body); line-height: 1.55; max-width: 40ch; color: var(--hl-rain); }
.hl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.hl-hint { font: 500 var(--fs-small)/1.45 var(--hl-text); color: var(--hl-mist); font-variant-numeric: tabular-nums; max-width: 40ch; }
.hl-hint-t, .hl-hint-k { display: none; }
.hl-rain:focus-visible ~ .hl-hero-in .hl-hint-k, .hl-top.is-kbd .hl-hint-k { display: inline; }
@media (hover: none) and (pointer: coarse) { .hl-hint-a { display: none; } .hl-hint-t { display: inline; } }

@supports (transition-behavior: allow-discrete) {
  .hl-h1 > span { transition: transform .42s var(--ease), opacity .42s var(--ease); }
  @starting-style { .hl-h1 > span { transform: translateY(calc(-1 * var(--g))); opacity: 0; } }
  .hl-l2 { transition-delay: 80ms !important; }
  .hl-l3 { transition-delay: 160ms !important; }
}

@media (min-width: 1024px) and (max-width: 1180px) {
  .hl-top { --gut: .54; }
  .hl-h1 { grid-column: 1 / 10; font-size: clamp(6rem, 9.6vw, 7rem); }
  .hl-hero-side { grid-column: 1 / 13; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hl-gap); padding-top: calc(3 * var(--g)); }
  .hl-hero-lead { grid-column: 1 / 8; }
  .hl-actions, .hl-hint { grid-column: 8 / 13; }
  .hl-actions { grid-row: 1; align-self: start; }
  .hl-hint { grid-row: 2; }
}
@media (max-height: 800px) and (min-width: 1024px) { .hl-top { --gut: .5; } }
@media (min-width: 701px) and (max-width: 1023px) {
  .hl-top { --gut: .5; }
  .hl-h1 { grid-column: 1 / 13; }
  .hl-hero-side { grid-column: 1 / 13; padding-top: calc(3 * var(--g)); grid-template-columns: 1fr 1fr; column-gap: var(--hl-gap); }
  .hl-hero-lead { grid-row: span 2; }
}
@media (max-width: 700px) {
  .hl-top { --gut: .42; }
  .hl-hero-in { display: block; }
  .hl-h1 { font-size: 3.5rem; }
  .hl-l2 { display: block !important; }
  .hl-hero-side { padding-top: calc(3 * var(--g)); }
  .hl-hero-lead { font-size: 1.0625rem; }
  .hl-actions { flex-direction: column; align-items: stretch; }
  .hl-actions .hl-plate, .hl-actions .hl-link { min-height: 48px; }
  .hl-chooser { left: var(--hl-m); right: auto; top: 12px; }
  .hl-tab { width: 64px; height: 40px; }
  .hl-tab svg { width: 34px; height: 17px; }
  .hl-clear { top: calc(var(--fascia) + 4px + var(--g)); right: var(--hl-m); }
  .hl-hero-in { padding-top: calc(var(--fascia) + 4px + 40px + 3 * var(--g)); }
}
@media (max-width: 700px) and (max-height: 600px) {
  .hl-top { --gut: .36; }
  .hl-h1 { font-size: 3rem; }
  .hl-tab { width: 56px; height: 30px; padding: 3px; }
  .hl-tab span { display: none; }
  .hl-hint { display: none; }
  .hl-chooser { top: 8px; }
}


/* ---------- shared bits ---------- */
.hl-label { font: 600 var(--fs-label)/1 var(--hl-display); letter-spacing: .14em; text-transform: uppercase; }
.hl-small { font: 500 var(--fs-small)/1.45 var(--hl-text); color: var(--hl-mist); max-width: 52ch; }
.hl-close { font-size: var(--fs-lead); line-height: 1.4; max-width: 38ch; }
.hl-page fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.hl-page legend { padding: 0; }
.hl-plate--line { background: transparent; color: var(--hl-rain); box-shadow: inset 0 0 0 1px var(--hl-mist); }
.hl-plate--line:hover:not(:disabled) { background: rgb(169 189 203 / .14); }
.hl-plate:disabled { cursor: default; }
.hl-plate--line:disabled { color: var(--hl-mist); box-shadow: inset 0 0 0 1px rgb(169 189 203 / .4); }
.hl-ico { width: 14px; height: 14px; fill: currentColor; flex: none; }
.hl-page input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; }
.hl-page input[type="range"]::-webkit-slider-runnable-track { height: 6px; background: linear-gradient(90deg, var(--hl-mist) 0 var(--v, 50%), rgb(169 189 203 / .28) var(--v, 50%)); }
.hl-page input[type="range"]::-moz-range-track { height: 6px; background: rgb(169 189 203 / .28); }
.hl-page input[type="range"]::-moz-range-progress { height: 6px; background: var(--hl-mist); }
.hl-page input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 30px; margin-top: -12px; background: var(--hl-rain); border: 0; border-radius: 0; box-shadow: inset 0 -2px 0 rgb(0 0 0 / .25), 0 1px 3px rgb(0 0 0 / .4); }
.hl-page input[type="range"]::-moz-range-thumb { width: 14px; height: 30px; background: var(--hl-rain); border: 0; border-radius: 0; }
.hl-page input[type="range"]:focus-visible { outline-offset: 0; }
.hl-rtab { position: relative; display: inline-grid; justify-items: center; align-content: center; gap: 2px; min-width: 64px; min-height: 48px; padding: 6px 10px; cursor: pointer;
  background: rgb(30 42 51 / .7); box-shadow: inset 0 -2px 0 rgb(0 0 0 / .35), inset 0 0 0 1px rgb(169 189 203 / .3); font: 500 13px/1 var(--hl-text); color: var(--hl-rain); }
.hl-rtab input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.hl-rtab svg { width: 36px; height: 18px; }
.hl-rtab:has(input:checked) { background: var(--hl-tile); color: var(--hl-slate); box-shadow: inset 0 -2px 0 rgb(0 0 0 / .3); }
.hl-rtab:has(input:checked) .hl-saw { fill: var(--hl-slate); }
.hl-rtab:has(input:focus-visible) { outline: 3px solid var(--hl-tile); outline-offset: 3px; }
.hl-rtab:has(input:checked:focus-visible) { outline-color: var(--hl-rain); }
.hl-rtab:active { transform: translateY(2px); }

/* ---------- 2 · what we find ---------- */
.hl-find-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hl-gap); align-items: start; }
.hl-find-head { grid-column: 1 / 7; grid-row: 1; display: grid; gap: calc(2 * var(--g)); }
.hl-find-head .hl-h3 { color: var(--hl-mist); }
.hl-find-head .hl-lead { max-width: 40ch; }
.hl-findings { grid-column: 1 / 9; grid-row: 2; margin-top: calc(6 * var(--g)); }
.hl-found { --sheet: #364855; position: relative; background: var(--sheet); box-shadow: inset 0 1px 0 rgb(242 241 236 / .12); }
.hl-found + .hl-found { margin-top: -2px; }
.hl-found:nth-child(1) { z-index: 5; } .hl-found:nth-child(2) { z-index: 4; } .hl-found:nth-child(3) { z-index: 3; } .hl-found:nth-child(4) { z-index: 2; } .hl-found:nth-child(5) { z-index: 1; }
.hl-found::before, .hl-found::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; }
.hl-found::before { top: calc(100% + 1px); height: 18px; background: url("shade-corrugate.svg") 0 0 / 46px 18px repeat-x; }
.hl-found::after { top: 100%; height: 12px; background: var(--sheet); -webkit-mask: url("edge-corrugate.svg") 0 0 / 46px 12px repeat-x; mask: url("edge-corrugate.svg") 0 0 / 46px 12px repeat-x; }
.hl-found:last-child::before, .hl-found:last-child::after { display: none; }
.hl-found summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--hl-gap);
  min-height: 48px; padding: calc(2 * var(--g)) calc(2 * var(--g)) calc(2 * var(--g) + 6px);
  font: 600 var(--fs-list)/.92 var(--hl-display); letter-spacing: .005em; text-wrap: balance;
}
.hl-found summary::-webkit-details-marker { display: none; }
.hl-found summary:hover .hl-found-t { color: #fff; }
.hl-found summary:focus-visible { outline-offset: -3px; }
.hl-found-k { position: relative; width: 32px; height: 32px; box-shadow: inset 0 0 0 1px rgb(169 189 203 / .5); }
.hl-found-k::before, .hl-found-k::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: var(--hl-rain); }
.hl-found-k::after { transform: rotate(90deg); transition: transform .18s var(--ease); }
.hl-found[open] .hl-found-k { background: var(--hl-rain); }
.hl-found[open] .hl-found-k::before, .hl-found[open] .hl-found-k::after { background: var(--hl-slate); }
.hl-found[open] .hl-found-k::after { transform: rotate(0deg); }
.hl-found-body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1.5fr); gap: var(--hl-gap); padding: 0 calc(2 * var(--g)) calc(3 * var(--g)); }
.hl-found-body p:first-child { max-width: 52ch; }
.hl-gloss { font: 500 var(--fs-small)/1.45 var(--hl-text); color: var(--hl-mist); border-left: 1px solid var(--hl-mist); padding-left: 12px; align-self: start; }
.hl-gloss b { color: var(--hl-rain); font-weight: 600; }
.hl-find .hl-close { grid-column: 1 / 8; grid-row: 3; margin-top: calc(6 * var(--g)); }
.hl-find-fig { grid-column: 9 / 13; grid-row: 1 / 4; position: sticky; top: calc(var(--bar-h, 40px) + var(--nav-h) + 3 * var(--g)); }
.hl-find-fig img { width: 100%; aspect-ratio: 4 / 5.6; object-fit: cover; object-position: 50% 60%; }
.hl-find-fig figcaption, .hl-roofs-fig figcaption { margin-top: 10px; font: 500 var(--fs-small)/1.45 var(--hl-text); color: var(--hl-mist); max-width: 34ch; }

/* ---------- 3 · the roofs ---------- */
.hl-roofs { padding-top: 0; }
.hl-roofs.hl-course { padding-top: 0; }
.hl-roofs-fig { position: relative; margin: 0 0 calc(8 * var(--g)); }
.hl-roofs-fig img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 40%; }
.hl-roofs-over { position: absolute; left: 0; right: 0; bottom: 0; padding: calc(16 * var(--g)) 0 calc(5 * var(--g)); background: linear-gradient(to bottom, rgb(30 42 51 / 0), rgb(30 42 51 / .78) 60%, rgb(30 42 51 / .9)); }
.hl-roofs-over .hl-h2 { width: min(100%, calc(1312px + 2 * var(--hl-m))); margin: 0 auto; padding: 0 var(--hl-m); color: var(--hl-rain); max-width: calc(14ch + 2 * var(--hl-m)); margin-left: max(0px, calc((100% - 1312px) / 2 - var(--hl-m))); }
.hl-roofs-fig figcaption { position: absolute; right: var(--hl-m); top: 100%; margin: 0; padding-top: 10px; background: var(--hl-mist); color: var(--hl-slate); text-align: right; }
.hl-roof-cols { display: grid; grid-template-columns: 5fr 4fr 3fr; gap: calc(2 * var(--hl-gap)); align-items: start; }
.hl-roof { display: grid; gap: calc(2 * var(--g)); align-content: start; }
.hl-roof--tile { margin-top: calc(4 * var(--g)); }
.hl-roof--slate { margin-top: calc(8 * var(--g)); }
.hl-roof h3 { font-size: var(--fs-list); font-weight: 700; line-height: .9; }
.hl-roof p { max-width: 40ch; }
.hl-saw-btn { justify-self: start; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .18s var(--ease); }
.hl-saw-btn svg { display: block; height: auto; }
.hl-roof--steel .hl-saw-btn svg { width: 200px; }
.hl-roof--tile .hl-saw-btn svg { width: 160px; }
.hl-roof--slate .hl-saw-btn svg { width: 120px; }
.hl-saw-btn .hl-saw { fill: var(--hl-slate); transition: fill .18s; }
.hl-saw-btn .hl-cut { stroke: #D6E1E9; stroke-width: 2; }
.hl-saw-btn:hover .hl-saw { fill: #26343F; }
.hl-saw-btn:active { transform: translateY(2px); }
.hl-saw-btn[aria-pressed="true"] .hl-saw { fill: var(--hl-tile); }
.hl-saw-btn[aria-pressed="true"] .hl-cut { stroke: var(--hl-slate); }
.hl-roofs-note { margin-top: calc(6 * var(--g)); font: 500 var(--fs-small)/1.45 var(--hl-text); max-width: 60ch; padding-left: 12px; border-left: 1px solid var(--hl-slate); }

/* ---------- 4 · off, down to the battens, and back on ---------- */
.hl-layers { timeline-scope: --lap, --build; }
.hl-h2--big { font-size: var(--fs-h2); max-width: 15ch; }
.hl-layers-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hl-gap); margin-top: calc(6 * var(--g)); }
.hl-frame { grid-column: 1 / 9; grid-row: 1; align-self: start; position: sticky; top: calc(var(--bar-h, 40px) + var(--nav-h) + 3 * var(--g)); display: grid; gap: calc(2 * var(--g)); background: var(--hl-soffit); padding-bottom: calc(2 * var(--g)); }
.hl-draw { position: relative; }
.hl-sec { display: block; width: 100%; height: auto; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: square; color: var(--hl-rain); }
.hl-sec-base { stroke: var(--hl-mist); stroke-width: 1.5; opacity: .55; }
.hl-sec-faint { opacity: .25; }
.hl-sec-hatch { stroke-width: 1; opacity: .5; }
.hl-sec-thin { stroke-width: 1.25; }
.hl-sec-heavy { stroke-width: 5; stroke-linecap: butt; }
.hl-sec-water { fill: var(--hl-mist); stroke: none; }
.hl-ld { stroke-width: 1; }
.hl-ld circle { fill: currentColor; stroke: none; }
.hl-lbl { position: absolute; left: var(--x); top: var(--y); transform: translateY(-50%); margin: 0; white-space: nowrap; font: 600 var(--fs-label)/1.1 var(--hl-display); letter-spacing: .14em; text-transform: uppercase; color: var(--hl-rain); }
.hl-lbl--end { transform: translate(-100%, -50%); text-align: right; }
.hl-lbl small { display: block; margin-top: 4px; font: 500 12px/1.2 var(--hl-text); letter-spacing: 0; text-transform: none; color: var(--hl-mist); }
.hl-strip { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: calc(2 * var(--g)); max-width: 560px; }
.hl-strip-l { font: 600 var(--fs-label)/1 var(--hl-display); letter-spacing: .14em; text-transform: uppercase; color: var(--hl-mist); }
.hl-strip-ends { grid-column: 2; display: flex; justify-content: space-between; font: 500 12px/1 var(--hl-text); color: var(--hl-mist); margin-top: -6px; }
.hl-then { font: 650 var(--fs-h3)/.98 var(--hl-display); max-width: 24ch; text-wrap: balance; }
.hl-steps { grid-column: 9 / 13; grid-row: 1; padding: 22vh 0 26vh; view-timeline: --build block; }
.hl-steps li { min-height: 40vh; display: grid; align-content: center; gap: var(--g); padding-left: calc(2 * var(--g)); border-left: 1px solid var(--hl-hair); }
.hl-steps h3 { font: 600 var(--fs-label)/1 var(--hl-display) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--hl-mist); }
.hl-steps p { max-width: 34ch; font-size: var(--fs-lead); line-height: 1.45; }

@keyframes hl-layer-on { 0% { color: var(--hl-mist); opacity: .14; transform: translateY(-10px); } 55% { color: var(--hl-tile); opacity: 1; transform: none; } 100% { color: var(--hl-rain); opacity: 1; transform: none; } }
@keyframes hl-label-on { 0% { color: var(--hl-mist); opacity: .5; } 55% { color: var(--hl-tile); opacity: 1; } 100% { color: var(--hl-rain); opacity: 1; } }
@keyframes hl-step-on { from { border-left-color: rgb(169 189 203 / .3); } to { border-left-color: var(--hl-tile); } }
.hl-frame .hl-ly, .hl-frame .hl-ld, .hl-frame .hl-lbl { transition: opacity .24s var(--ease), color .24s, transform .24s var(--ease); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-height: 621px) {
    .hl-frame:not(.is-manual) :is(.hl-ly, .hl-ld) { animation: hl-layer-on linear both; animation-timeline: --build; }
    .hl-frame:not(.is-manual) .hl-lbl { animation: hl-label-on linear both; animation-timeline: --build; }
    .hl-frame:not(.is-manual) :is(.hl-ly1, .hl-ld1, .hl-lbl1) { animation-range: cover 16% cover 24%; }
    .hl-frame:not(.is-manual) :is(.hl-ly2, .hl-ld2, .hl-lbl2) { animation-range: cover 26% cover 34%; }
    .hl-frame:not(.is-manual) :is(.hl-ly3, .hl-ld3, .hl-lbl3) { animation-range: cover 36% cover 44%; }
    .hl-frame:not(.is-manual) :is(.hl-ly4, .hl-ld4, .hl-lbl4) { animation-range: cover 47% cover 55%; }
    .hl-frame:not(.is-manual) :is(.hl-ly5, .hl-ld5, .hl-lbl5) { animation-range: cover 57% cover 65%; }
    .hl-frame:not(.is-manual) :is(.hl-ly6, .hl-ld6, .hl-lbl6) { animation-range: cover 67% cover 75%; }
    .hl-frame:not(.is-manual) .hl-ly7 { animation-range: cover 78% cover 84%; }
  }
}
.hl-frame.is-manual .is-off { opacity: .12; color: var(--hl-mist); transform: translateY(-10px); }
.hl-frame.is-manual .hl-lbl.is-off { opacity: .45; transform: translateY(-50%); }
.hl-frame.is-manual .hl-lbl--end.is-off { transform: translate(-100%, -50%); }
.hl-frame.is-manual .is-new { color: var(--hl-tile); }

/* ---------- 5 · where water gets in ---------- */
.hl-detail-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hl-gap); align-items: end; }
.hl-detail-fig { grid-column: 1 / 8; }
.hl-detail-fig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 45%; }
.hl-detail-text { grid-column: 9 / 13; display: grid; gap: calc(4 * var(--g)); padding-bottom: calc(2 * var(--g)); }
.hl-detail-text .hl-h2 { font-size: clamp(2.5rem, 1rem + 4.2vw, 5.5rem); }
.hl-joins { display: grid; gap: calc(3 * var(--g)); margin: 0; }
.hl-joins div { display: grid; gap: var(--g); padding-top: calc(1.5 * var(--g)); border-top: 1px solid var(--hl-hair); }
.hl-joins dt { font: 600 var(--fs-label)/1 var(--hl-display); letter-spacing: .14em; text-transform: uppercase; color: var(--hl-mist); }
.hl-joins dd { margin: 0; max-width: 36ch; }

/* ---------- 6 · from the room below ---------- */
.hl-hear { min-height: max(700px, 92svh); }
.hl-hear-fig { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hl-hear-fig img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.hl-hear-fig::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(30 42 51 / .92) 0, rgb(30 42 51 / .8) 36%, rgb(30 42 51 / 0) 58%); }
.hl-cornice { position: absolute; z-index: 1; left: 0; right: 0; top: calc(var(--lap) + 2 * var(--g)); height: 64px; pointer-events: none; }
.hl-cornice svg { width: 100%; height: 100%; display: block; }
.hl-wave { fill: none; stroke: var(--hl-mist); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: .75; display: none; }
.hl-hear[data-roof="steel"] .hl-wave--steel, .hl-hear[data-roof="tile"] .hl-wave--tile, .hl-hear[data-roof="slate"] .hl-wave--slate { display: inline; }
.hl-hear.is-live .hl-wave { display: none; }
.hl-hear.is-live .hl-wave--live { display: inline; stroke: var(--hl-rain); opacity: .9; }
.hl-hear-in { position: relative; z-index: 2; display: grid; gap: calc(2 * var(--g)); padding-top: calc(64px + 3 * var(--g)); }
.hl-hear-in > * { max-width: 36rem; }
.hl-hear-in .hl-h2 { max-width: 9ch; }
.hl-desk { display: grid; gap: calc(2 * var(--g)); margin-top: calc(2 * var(--g)); }
.hl-desk[hidden] { display: none; }
.hl-desk-row { display: flex; flex-wrap: wrap; gap: 8px; }
.hl-hear-roofs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hl-hear-roofs legend { float: left; width: 100%; margin-bottom: 8px; color: var(--hl-mist); }
.hl-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border: 0; border-radius: 0; cursor: pointer; font: 600 .9375rem/1 var(--hl-text);
  background: rgb(30 42 51 / .7); color: var(--hl-rain); box-shadow: inset 0 -2px 0 rgb(0 0 0 / .35), inset 0 0 0 1px rgb(169 189 203 / .3); transition: transform .18s var(--ease); }
.hl-toggle:active { transform: translateY(2px); }
.hl-toggle i { width: 26px; height: 12px; flex: none; }
.hl-toggle--batt i { background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 5px); opacity: .7; clip-path: polygon(0 20%, 100% 0, 100% 80%, 0 100%); }
.hl-toggle--hail i { background: radial-gradient(circle, currentColor 0 1.6px, transparent 2.2px) 0 0 / 9px 6px; }
.hl-toggle[aria-pressed="true"] { background: var(--hl-mist); color: var(--hl-slate); box-shadow: inset 0 -2px 0 rgb(0 0 0 / .25); }
.hl-tube { display: grid; gap: 4px; max-width: 26rem; }
.hl-tube .hl-label { color: var(--hl-mist); }
.hl-tube input[type="range"]::-webkit-slider-runnable-track { height: 14px; background: linear-gradient(90deg, rgb(169 189 203 / .85) 0 var(--v, 45%), transparent var(--v, 45%)), rgb(20 28 34 / .5); box-shadow: inset 0 0 0 1px var(--hl-mist); }
.hl-tube input[type="range"]::-webkit-slider-thumb { width: 6px; height: 22px; margin-top: -4px; }
.hl-hear-status { font: 500 var(--fs-small)/1.45 var(--hl-text); color: var(--hl-rain); min-height: 1.45em; }
.hl-hear-words { display: grid; gap: 6px; font-size: var(--fs-small); color: var(--hl-mist); max-width: 30rem; }
.hl-hear-words li { padding-left: 14px; position: relative; }
.hl-hear-words li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 1px; background: var(--hl-mist); }

/* ---------- 7 · will your gutters keep up? ---------- */
.hl-gutter-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hl-gap); row-gap: calc(4 * var(--g)); align-items: start; }
.hl-gutter-in > .hl-h3 { grid-column: 1 / 6; color: var(--hl-mist); }
.hl-calc { grid-column: 1 / 5; grid-row: 2; display: grid; gap: calc(3 * var(--g)); font-variant-numeric: tabular-nums; }
.hl-field { display: grid; gap: 6px; }
.hl-flabel { font: 500 var(--fs-small)/1.35 var(--hl-text); color: var(--hl-rain); }
.hl-flabel span { color: var(--hl-mist); }
.hl-range-row { display: grid; grid-template-columns: minmax(0, 1fr) 4ch; align-items: center; gap: 12px; }
.hl-num { font: 600 1.25rem/1 var(--hl-text); font-variant-numeric: tabular-nums; text-align: right; }
.hl-stepper { display: inline-grid; grid-template-columns: 48px 4ch 48px; align-items: center; justify-items: center; justify-self: start; box-shadow: inset 0 0 0 1px var(--hl-hair); }
.hl-step { width: 48px; height: 48px; border: 0; border-radius: 0; background: rgb(169 189 203 / .12); color: var(--hl-rain); font: 500 1.375rem/1 var(--hl-text); cursor: pointer; }
.hl-step:hover:not(:disabled) { background: rgb(169 189 203 / .24); }
.hl-step:disabled { color: rgb(169 189 203 / .45); cursor: default; }
.hl-stepper .hl-num { text-align: center; }
.hl-rates { display: grid; gap: 6px; }
.hl-rates legend { margin-bottom: 6px; }
.hl-rates label { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; cursor: pointer; box-shadow: inset 0 0 0 1px var(--hl-hair); }
.hl-rates input { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin: 0; border: 1.5px solid var(--hl-mist); border-radius: 0; flex: none; }
.hl-rates input:checked { background: var(--hl-tile); border-color: var(--hl-tile); box-shadow: inset 0 0 0 3px var(--hl-storm); }
.hl-rates label:has(input:checked) { box-shadow: inset 0 0 0 1px var(--hl-mist); background: rgb(169 189 203 / .08); }
.hl-rates span { font-weight: 600; }
.hl-rates small { font-weight: 400; color: var(--hl-mist); margin-left: 6px; font-size: var(--fs-small); }
.hl-answer-wrap { grid-column: 6 / 13; grid-row: 1 / 3; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); column-gap: calc(2 * var(--hl-gap)); row-gap: calc(3 * var(--g)); align-items: start; }
.hl-answer { grid-column: 1 / -1; font: 700 var(--fs-answer)/.95 var(--hl-display); max-width: 16ch; text-wrap: balance; font-variant-numeric: tabular-nums; }
.hl-answer b, .hl-hoses b { display: inline-block; min-width: 2.2ch; text-align: right; color: var(--hl-tile); font-weight: 700; }
.hl-answer b#hl-n { min-width: 0; }
.hl-hoses { grid-column: 1 / -1; font-size: var(--fs-lead); line-height: 1.4; font-variant-numeric: tabular-nums; }
.hl-hoses b { font: 700 1.2em/1 var(--hl-display); min-width: 1.4ch; }
.hl-quad { grid-column: 2; grid-row: 3 / 5; width: 100%; max-width: 320px; justify-self: end; overflow: visible; }
.hl-quad-line, .hl-quad-bead { fill: none; stroke: var(--hl-rain); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.hl-quad-fascia { fill: rgb(169 189 203 / .18); }
.hl-quad-water { fill: rgb(169 189 203 / .55); transition: transform .26s ease; }
.hl-quad-spill { fill: none; stroke: rgb(169 189 203 / .75); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 3 11; opacity: 0; transition: opacity .26s, stroke-width .26s; }
.hl-quad.is-over .hl-quad-spill { opacity: 1; }
.hl-answer-wrap .hl-body { grid-column: 1; max-width: 40ch; }
.hl-answer-wrap .hl-close { grid-column: 1; color: var(--hl-mist); font-size: var(--fs-body); line-height: 1.6; }

/* ---------- 8 · where we work ---------- */
.hl-where .hl-h3 { max-width: 26ch; }
.hl-bond { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); margin: calc(6 * var(--g)) calc(-1 * var(--hl-m)) calc(6 * var(--g)); font: 600 clamp(1.375rem, .55rem + 2.55vw, 3rem)/1 var(--hl-display); letter-spacing: .005em; }
.hl-bond li { grid-column: span 2; position: relative; white-space: nowrap; padding: calc(1.4 * var(--g)) clamp(12px, 1.6vw, 24px) calc(1.6 * var(--g)); box-shadow: inset 1px 0 0 rgb(20 28 34 / .3), inset 0 -3px 0 rgb(20 28 34 / .2), 0 3px 0 rgb(20 28 34 / .06); }
.hl-bond li:nth-child(7n + 5) { grid-column: 2 / span 2; }
.hl-bond li:is(:nth-child(7n + 5), :nth-child(7n + 6), :nth-child(7n)) { background: rgb(20 28 34 / .06); }
.hl-where .hl-lead { max-width: 30ch; font-weight: 500; }

/* ---------- 9 · ask us up ---------- */
.hl-ask { padding-bottom: calc(10 * var(--g)); }
.hl-ask-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hl-gap); align-items: end; }
.hl-ask-head .hl-h2 { grid-column: 1 / 7; }
.hl-ask-head .hl-lead { grid-column: 7 / 12; max-width: 34ch; }
.hl-form { margin-top: calc(6 * var(--g)); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hl-gap); }
.hl-channel { grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) 16px; column-gap: calc(2 * var(--g)); padding-right: calc(100% / 12 - 8px); }
.hl-channel::before { content: ""; position: absolute; left: 36px; right: calc(100% / 12 - 8px + 16px); bottom: 0; height: 58px; pointer-events: none;
  background: linear-gradient(var(--hl-mist) 0 0) 0 100% / 100% 3px no-repeat, linear-gradient(rgb(169 189 203 / .5) 0 0) 0 38px / 100% 1px no-repeat, linear-gradient(rgb(169 189 203 / .35) 0 0) 0 16px / 100% 1px no-repeat, linear-gradient(var(--hl-mist) 0 0) 0 2px / 100% 2px no-repeat; }
.hl-channel::after { content: ""; position: absolute; left: 10px; right: calc(100% / 12 - 8px + 16px); top: 0; bottom: 60px; border-top: 1px solid var(--hl-hair); border-left: 1px solid var(--hl-hair); pointer-events: none; }
.hl-channel-end { grid-column: 1; align-self: end; width: 40px; height: 64px; fill: none; stroke: var(--hl-mist); stroke-width: 3; stroke-linecap: round; overflow: visible; }
.hl-fields { padding-bottom: calc(4 * var(--g) + 58px) !important; }
.hl-fields { grid-column: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(3 * var(--g)) var(--hl-gap); padding: calc(3 * var(--g)) 0 calc(4 * var(--g)); }
.hl-f { display: grid; gap: 6px; align-content: start; }
.hl-f-wide { grid-column: span 1; }
.hl-fhint { font: 400 13px/1.35 var(--hl-text); color: var(--hl-mist); }
.hl-page :is(.hl-f input[type="text"], .hl-f textarea, .hl-f select) {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 0; border-radius: 0; background: var(--hl-soffit); color: var(--hl-rain);
  box-shadow: inset 0 -1px 0 var(--hl-mist); font: 400 1rem/1.4 var(--hl-text); font-variant-numeric: tabular-nums;
}
.hl-f textarea { resize: vertical; min-height: 96px; }
.hl-f textarea::placeholder { color: rgb(169 189 203 / .8); }
.hl-f select { -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--hl-mist) 50%), linear-gradient(-45deg, transparent 50%, var(--hl-mist) 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.hl-page :is(.hl-f input, .hl-f textarea, .hl-f select):focus-visible { outline: 3px solid var(--hl-tile); outline-offset: 2px; }
.hl-f-roof { display: flex; flex-wrap: wrap; gap: 6px; align-content: start; }
.hl-f-roof legend { float: left; width: 100%; margin-bottom: 8px; color: var(--hl-mist); }
.hl-rtab--unsure { padding: 6px 12px; }
.hl-pipe { grid-column: 3; position: relative; align-self: stretch; margin-bottom: calc(-4 * var(--g)); width: 16px; box-shadow: inset 2px 0 0 var(--hl-mist), inset -2px 0 0 var(--hl-mist); background: rgb(20 28 34 / .35); }
.hl-pipe::before { content: ""; position: absolute; left: -6px; right: -6px; top: -3px; height: 8px; background: var(--hl-mist); }
.hl-pipe svg { position: absolute; inset: 0 4px; width: 8px; height: 100%; }
.hl-pipe-water { stroke: var(--hl-rain); stroke-width: 5; stroke-dasharray: 3 7; stroke-linecap: round; opacity: 0; vector-effect: non-scaling-stroke; transition: opacity .6s; }
.hl-ask.is-running .hl-pipe-water { opacity: .85; }
.hl-still { margin-top: 10px; font: 500 var(--fs-small)/1.45 var(--hl-text); color: var(--hl-mist); }
.hl-still a { color: var(--hl-rain); text-underline-offset: 4px; }
.hl-send { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 12px 24px; margin-top: calc(4 * var(--g)); padding-right: max(0px, calc(100% / 12 - 90px)); }
.hl-send-btn { min-width: 180px; }
.hl-status { font: 500 var(--fs-small)/1.45 var(--hl-text); color: var(--hl-rain); min-height: 1.45em; text-align: right; }

/* ---------- the foot ---------- */
.hl-foot { background: var(--hl-soffit); padding: calc(8 * var(--g)) 0 calc(6 * var(--g)); color: var(--hl-mist); font-size: var(--fs-small); box-shadow: inset 0 3px 0 var(--hl-mist); }
.hl-foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.hl-foot .hl-brand { color: var(--hl-rain); }
.hl-foot-nav { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-left: auto; }
.hl-foot-nav a { text-decoration: none; color: var(--hl-rain); padding: 12px 0; display: inline-block; }
.hl-foot-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- widths ---------- */
@media (max-width: 1180px) {
  .hl-find-fig { position: static; }
  .hl-frame { grid-column: 1 / 8; }
  .hl-steps { grid-column: 8 / 13; }
  .hl-lbl small { display: none; }
  .hl-answer-wrap { grid-column: 5 / 13; }
  .hl-bond { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .hl-bond li:nth-child(n) { grid-column: auto / span 2; background: none; }
  .hl-bond li:nth-child(5n + 4) { grid-column: 2 / span 2; }
  .hl-bond li:is(:nth-child(5n + 4), :nth-child(5n)) { background: rgb(20 28 34 / .06); }
  .hl-calc { grid-column: 1 / 5; }
  .hl-roofs-fig img { aspect-ratio: 2 / 1; }
}
@media (max-width: 900px) {
  .hl-find-head, .hl-findings, .hl-find .hl-close { grid-column: 1 / -1; }
  .hl-find-fig { grid-column: 1 / -1; grid-row: auto; order: -1; margin: 0 calc(-1 * var(--hl-m)) calc(6 * var(--g)); }
  .hl-find-fig img { aspect-ratio: 4 / 5; max-height: 80svh; }
  .hl-find-fig figcaption { padding: 0 var(--hl-m); }
  .hl-find-head { grid-row: auto; }
  .hl-findings { grid-row: auto; margin-inline: calc(-1 * var(--hl-m)); }
  .hl-find .hl-close { grid-row: auto; }
  .hl-found summary, .hl-found-body { padding-inline: var(--hl-m); }
  .hl-found-body { grid-template-columns: 1fr; }
  .hl-roof-cols { grid-template-columns: 1fr; gap: calc(4 * var(--g)); }
  .hl-roof { grid-template-columns: 120px minmax(0, 1fr); column-gap: calc(2 * var(--g)); margin-top: 0 !important; align-items: start; }
  .hl-roof .hl-saw-btn { grid-row: 1 / 3; }
  .hl-roof .hl-saw-btn svg { width: 120px !important; }
  .hl-roof--tile .hl-saw-btn svg { width: 104px !important; }
  .hl-roof--slate .hl-saw-btn svg { width: 88px !important; }
  .hl-detail-fig, .hl-detail-text { grid-column: 1 / -1; }
  .hl-detail-fig { margin: 0 calc(-1 * var(--hl-m)) calc(4 * var(--g)); }
  .hl-gutter-in > .hl-h3, .hl-calc, .hl-answer-wrap { grid-column: 1 / -1; grid-row: auto; }
  .hl-answer-wrap { order: -1; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
  .hl-gutter-in > .hl-h3 { order: -2; }
  .hl-ask-head .hl-h2, .hl-ask-head .hl-lead { grid-column: 1 / -1; }
  .hl-ask-head .hl-lead { margin-top: calc(2 * var(--g)); }
  .hl-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .hl-roofs-fig img { aspect-ratio: 4 / 3; }
  .hl-roofs-fig { margin-bottom: calc(8 * var(--g)); }
  .hl-roofs-over { position: static; padding: calc(4 * var(--g)) 0 0; background: var(--hl-mist); }
  .hl-roofs-over .hl-h2 { color: var(--hl-slate); }
  .hl-roofs-fig figcaption { position: static; text-align: left; padding: 8px var(--hl-m) 0; background: var(--hl-mist); }
  .hl-roofs-fig { background: var(--hl-mist); display: flex; flex-direction: column; }
  .hl-roofs-fig figcaption { order: 1; }
  .hl-roofs-over { order: 2; }
  .hl-layers-in { display: block; }
  .hl-frame { top: calc(var(--bar-h, 40px) + var(--nav-h)); z-index: 2; margin: 0 calc(-1 * var(--hl-m)); padding: calc(2 * var(--g)) var(--hl-m); box-shadow: 0 10px 18px -12px rgb(12 18 22 / .9); gap: var(--g); }
  .hl-then { font-size: 1.25rem; }
  .hl-lbl { font-size: 10px; letter-spacing: .1em; }
  .hl-steps { padding: 14svh 0 18svh; }
  .hl-steps li { min-height: 34svh; }
  .hl-steps p { font-size: var(--fs-body); }
  .hl-hear { min-height: 0; padding-top: 0 !important; }
  .hl-hear-fig { position: relative; inset: auto; height: 60svh; min-height: 360px; }
  .hl-hear-fig img { object-position: 50% 50%; }
  .hl-hear-fig::after { background: linear-gradient(to bottom, rgb(30 42 51 / .5), transparent 30%, transparent 70%, var(--hl-soffit)); }
  .hl-cornice { top: calc(60svh - 40px); height: 48px; }
  .hl-hear-in { padding-top: calc(4 * var(--g)); }
  .hl-answer-wrap { grid-template-columns: 1fr; }
  .hl-quad { grid-column: 1; grid-row: auto; justify-self: start; max-width: 240px; }
  .hl-answer-wrap .hl-body, .hl-answer-wrap .hl-close { grid-column: 1; }
  .hl-bond { grid-template-columns: repeat(4, minmax(0, 1fr)); font-size: clamp(1.25rem, .6rem + 3.2vw, 1.75rem); }
  .hl-bond li, .hl-bond li:nth-child(n) { grid-column: auto / span 2; background: none; }
  .hl-bond li:nth-child(3n) { grid-column: 2 / span 2; background: rgb(20 28 34 / .06); }
  .hl-channel { grid-template-columns: 22px minmax(0, 1fr) 16px; column-gap: 12px; padding-right: 0; }
  .hl-channel::before { left: 16px; right: 16px; }
  .hl-channel::after { left: 20px; right: 16px; }
  .hl-channel-end { width: 22px; }
  .hl-fields { grid-template-columns: 1fr; }
  .hl-send { padding-right: 0; justify-content: stretch; }
  .hl-send-btn { width: 100%; order: -1; }
  .hl-status { text-align: left; }
  .hl-pipe { margin-bottom: 0; }
  .hl-channel::before { left: 26px; }
  .hl-channel::after { left: 6px; }
  .hl-foot-nav { margin-left: 0; }
}
@media (max-height: 620px) {
  .hl-frame { position: static; }
  .hl-steps { padding: calc(4 * var(--g)) 0 0; }
  .hl-steps li { min-height: 0; padding-block: calc(1.5 * var(--g)); }
}

@media (prefers-reduced-motion: reduce) {
  .hl-page *, .hl-page *::before, .hl-page *::after { transition-duration: 0s !important; animation: none !important; }
  .hl-canvas { transition: none; }
}