/* ══ HOW IT WORKS, THE VISUAL PASS ══════════════════════════════════ 13 Oct 2026 (rp115), v1 ══
   Loaded after the page's own sheets (#hiw-day keeps the colours of 13 Oct, rp114). Sir, 13 Oct:
   "there can be glass effects as well, where you feel like it needs to be ... research ... all the
   effects and the transitions ... How it works ... needs a visual revamp. And I want you to use
   that information to do that." Chosen from the effects library (mason/effects, Mason ch. 60), by
   the job each one does; the player stays the page's one expressive moment:
     the room        "In short" becomes navy glass over a photograph of a finished room, the only
                     place on the page with something behind it to see through (G9, G7, G12; ch. 08:
                     glass needs something behind it). The photograph settles once (A10, 4s)
     the folios      each part's number set large, as a monograph's plates are (A6)
     the bar         a reading rule along the parts bar's foot (A35, M3)
     the hatch       Part two's checks drawn as section hatch, densest where the law sets it (A21)
     the calculator  Part three: try a quote, see the fee, the rest and the rate, and where the
                     cap begins on its own curve (T30); only the sentence is read aloud
     the road        Part four: how a dispute runs, drawn once as it arrives (M13, pathLength)
     the marks       each figure in "In short" carries a mark to its source and back (T25)
     the arrival     each part rises a little as it arrives, once (T33), its waiting state set
                     in the head before the first paint, and dropped if this sheet's script fails
   Every colour is a --hw-* token from the page's first :root, a company token, or an rgba of
   one. Photo durations are photo tokens (ch. 60.3); the rest the site's ladder. */
:root { --hw-settle: 4000ms; --hw-draw: 1200ms; --hw-rise: 700ms; --hw-ease: cubic-bezier(.16, 1, .3, 1); }

/* ── the room behind "In short" ── */
.hn-room { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(80px, 8vw, 140px) clamp(14px, 1.6vw, 24px) clamp(14px, 1.6vw, 24px); overflow: clip; }
.hn-room-ph { position: absolute; inset: 0; z-index: -1; background: var(--hw-cream-2) url('hiw-room.webp') 50% 38% / cover no-repeat; }
.hn-room::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(10,22,40,.08); }
@media (prefers-reduced-motion: no-preference) {
  .hn-room-ph { animation: hw-settle var(--hw-settle) var(--hw-ease) both; }
}
@keyframes hw-settle { from { transform: scale(1.05); } to { transform: scale(1); } }
/* the card: navy glass with a 1px ring before the blur (ch. 08), a gold head, light from above */
main#main .hn-short { background-color: rgba(10,22,40,.80); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(243,238,227,.14), inset 0 1px 0 rgba(243,238,227,.22), 0 1px 2px rgba(10,22,40,.25), 0 24px 48px -26px rgba(10,22,40,.7); }
main#main .hn-short::before { background: radial-gradient(120% 90% at 100% 0%, rgba(212,169,67,.12), transparent 60%), linear-gradient(180deg, rgba(21,34,56,.55), rgba(10,22,40,.25) 70%); }
@media (prefers-reduced-transparency: reduce) { main#main .hn-short { background-color: var(--hw-navy); -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (forced-colors: active) { main#main .hn-short { border: 1px solid CanvasText; -webkit-backdrop-filter: none; backdrop-filter: none; } .hn-room-ph { display: none; } }
@media (max-width: 1000px) { .hn-room { padding-top: clamp(150px, 40vw, 260px); } }

/* the marks: a figure, its source, and the way back (T25) */
.hw-fn { display: inline-block; margin-left: 6px; min-width: 1.4em; padding: 0 3px; font-family: var(--sans); font-size: 9.5px; font-weight: 600; line-height: 1.55; text-align: center; vertical-align: .55em;
  color: var(--gold-soft); text-decoration: none; border: 1px solid rgba(212,169,67,.5); border-radius: 2px; }
.hw-fn:hover { background: rgba(212,169,67,.18); }
.hw-fn:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 2px; }
.src-list { counter-reset: hw-src; }
.src-list li { counter-increment: hw-src; scroll-margin-top: 160px; transition: background-color var(--hw-rise) var(--hw-ease), box-shadow var(--hw-rise) var(--hw-ease); }
.src-list li:nth-child(-n+5) > b::before { content: counter(hw-src); display: inline-block; margin-right: 8px; min-width: 1.4em; padding: 0 3px; text-align: center; color: var(--hw-gold-ink); border: 1px solid rgba(131,99,44,.45); border-radius: 2px; letter-spacing: 0; }
.src-list li:target { background: rgba(212,169,67,.12); box-shadow: 0 0 0 10px rgba(212,169,67,.12); }
.hw-back { margin-left: 4px; text-decoration: none; }
.hn-short .r:has(> dd > .hw-fn:target) { background: rgba(212,169,67,.12); }

/* ── the folios (A6) ── */
main#main .hiw-ph { position: relative; }
/* the folio stands in the part's top margin, at the sheet's corner, clear of the words under it.
   Drawn as generated content with an empty alternative, so it is not read aloud or counted as text */
main#main .hiw-ph[data-fo]::after { content: attr(data-fo) / ""; position: absolute; right: 0; top: -66px; font-family: var(--serif-display); font-size: clamp(80px, 7.6vw, 112px); line-height: .8; letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1px rgba(131,99,44,.42); pointer-events: none; user-select: none; }
@supports not (-webkit-text-stroke: 1px black) { main#main .hiw-ph[data-fo]::after { color: rgba(131,99,44,.14); } }
@media (forced-colors: active) { main#main .hiw-ph[data-fo]::after { display: none; } }
@media (max-width: 760px) { main#main .hiw-ph[data-fo]::after { font-size: 72px; top: -6px; } }

/* ── the reading rule along the parts bar (A35, M3) ── */
main#main .tabs { position: sticky; }
main#main .tabs::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--hw-gold), var(--gold-soft)); transform-origin: 0 50%; transform: scaleX(var(--hw-read, 0)); }
@keyframes hw-read { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@supports (animation-timeline: scroll()) { main#main .tabs::after { animation: hw-read linear both; animation-timeline: scroll(root block); } }
@media (forced-colors: active) { main#main .tabs::after { background: Highlight; } }

/* ── Part two: the checks as section hatch, densest where the law sets it (A21) ── */
main#main .chk-rail { position: relative; }
main#main .chk-rail::before { content: ''; display: block; height: 10px; margin: 2px 0 12px; border: 1px solid rgba(10,22,40,.22);
  background: repeating-linear-gradient(-45deg, rgba(10,22,40,.45) 0 1px, transparent 1px var(--hw-hatch, 9px)); }
main#main .chk-law .chk-rail::before { --hw-hatch: 4px; border-color: rgba(131,99,44,.6); background: repeating-linear-gradient(-45deg, var(--hw-gold) 0 1px, transparent 1px 4px); }
main#main .chk-def .chk-rail::before { --hw-hatch: 8px; }
main#main .chk-you .chk-rail::before { --hw-hatch: 16px; border-style: dashed; }
@media (forced-colors: active) { main#main .chk-rail::before { display: none; } }

/* ── Part three: the calculator (T30) ── */
.fee-side { grid-row: 2 / span 3; }
.hw-calc { grid-column: 1; margin: 6px 0 28px; padding: 20px clamp(18px, 2vw, 26px) 18px; background: var(--hw-paper); position: relative;
  box-shadow: inset 0 0 0 1px var(--hw-line-2), 0 1px 2px rgba(10,22,40,.05), 0 18px 40px -30px rgba(10,22,40,.35); }
.hw-calc::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--gold-soft); }
.hw-calc-in { display: grid; grid-template-columns: auto minmax(150px, 220px) minmax(0, 1fr); gap: 10px 18px; align-items: center; }
.hw-calc-k { font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--hw-gold-ink); }
@media (max-width: 760px) { .hw-calc-k { font-size: 10.5px; } }  /* rp200 phone floor, was 10px */
.hw-calc-f { display: flex; align-items: center; gap: 6px; height: 48px; padding: 0 12px; border: 1px solid var(--hw-line-2); background: var(--hw-cream); }
.hw-calc-f:focus-within { border-color: var(--hw-navy); box-shadow: 0 0 0 3px rgba(10,22,40,.12); }
.hw-calc-f span { font-family: var(--serif-display); font-size: 22px; color: var(--hw-muted); }
.hw-calc-f input { width: 100%; min-width: 0; border: 0; background: transparent; outline: none; font-family: var(--serif-display); font-size: 24px; color: var(--hw-navy); font-variant-numeric: lining-nums tabular-nums; }
.hw-calc-pick { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.hw-calc-pick button { height: 34px; padding: 0 12px; border: 1px solid var(--hw-line-2); background: transparent; font: 600 12px/1 var(--sans); color: var(--hw-muted); cursor: pointer; transition: background-color 150ms, color 150ms, border-color 150ms; }
.hw-calc-pick button:hover { border-color: var(--hw-navy); color: var(--hw-navy); }
.hw-calc-pick button[aria-pressed="true"] { background: var(--hw-navy); border-color: var(--hw-navy); color: var(--hw-on-navy); }
.hw-calc-pick button:focus-visible { outline: 2px solid var(--hw-navy); outline-offset: 2px; }
.hw-calc-out { margin: 18px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hw-calc-out > div { display: flex; flex-direction: column-reverse; gap: 6px; padding-top: 10px; border-top: 1px solid var(--hw-line-2); }
.hw-calc-out > div:first-child { border-top: 2px solid var(--gold-soft); padding-top: 9px; }
.hw-calc-out dt { font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--hw-muted); }
@media (max-width: 760px) { .hw-calc-out dt { font-size: 10.5px; } }  /* rp200 phone floor, was 9.5px */
.hw-calc-out dd { margin: 0; font-family: var(--serif-display); font-size: clamp(26px, 2.4vw, 34px); line-height: 1; color: var(--hw-navy); font-variant-numeric: lining-nums tabular-nums; }
.hw-calc-out > div:first-child dd { color: var(--hw-gold); }
.hw-curve { margin: 18px 0 0; }
.hw-curve svg { display: block; width: 100%; height: 110px; overflow: visible; cursor: crosshair; touch-action: pan-y; }
.hw-curve-grid { fill: none; stroke: var(--hw-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hw-curve-line { fill: none; stroke: var(--hw-gold); stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.hw-curve-at { stroke: var(--hw-navy); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
/* the dot is drawn outside the stretched drawing, so it stays round */
.hw-curve { position: relative; }
.hw-curve-dot { position: absolute; left: 7%; top: 82%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; background: var(--hw-navy); box-shadow: 0 0 0 2px var(--hw-paper), 0 2px 6px rgba(10,22,40,.3); pointer-events: none; }
.hw-curve figcaption { margin-top: 8px; display: flex; justify-content: space-between; gap: 12px; font-family: var(--sans); font-size: 10.5px; letter-spacing: .04em; color: var(--hw-muted); }
.hw-calc-say { margin: 12px 0 0; font-family: var(--serif); font-size: 15px; line-height: 1.6; color: var(--hw-ink); }
@media (max-width: 760px) {
  .hw-calc-in { grid-template-columns: minmax(0, 1fr); }
  .hw-calc-pick { justify-content: flex-start; }
  .hw-calc-out { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hw-calc-out > div:last-child { grid-column: 1 / -1; }
}
@media (max-width: 1000px) { .fee-side { grid-row: auto; } }
@media (forced-colors: active) { .hw-curve-line, .hw-curve-at { stroke: CanvasText; } .hw-curve-dot { background: Highlight; } .hw-calc { border: 1px solid CanvasText; } }

/* ── Part four: how a dispute runs, drawn once (M13) ── */
.hw-road { list-style: none; margin: 34px 0 0; padding: 30px 0 0; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(16px, 2vw, 32px); }
.hw-road-line { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 12px; overflow: visible; }
.hw-road-line path { fill: none; stroke: var(--hw-navy); stroke-width: 2; } /* no non-scaling-stroke: it breaks a dash measured by pathLength */
.hw-road li { position: relative; padding-top: 4px; }
.hw-road li::before { content: ''; position: absolute; left: 0; top: -30px; width: 12px; height: 12px; border-radius: 50%; background: var(--hw-paper); box-shadow: inset 0 0 0 2px var(--hw-navy); }
.hw-road li:first-child::before { background: var(--hw-navy); }
.hw-road li.is-end::before { box-shadow: inset 0 0 0 2px var(--gold-soft); background: var(--gold-soft); }
.hw-road-d { display: block; font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--hw-gold-ink); }
@media (max-width: 760px) { .hw-road-d { font-size: 10.5px; } }  /* rp200 phone floor, was 10px */
.hw-road b { display: block; margin-top: 6px; font-family: var(--serif-display); font-weight: 400; font-size: 21px; line-height: 1.2; color: var(--hw-navy); }
.hw-road small { display: block; margin-top: 6px; font-family: var(--serif); font-size: 14.5px; line-height: 1.6; color: var(--hw-muted); }
.hw-road-src { margin: 18px 0 0; font-family: var(--sans); font-size: 11.5px; letter-spacing: .02em; color: var(--hw-muted); }
@media (max-width: 760px) { .hw-road-src { font-size: 12px; } }  /* rp200 phone floor, was 11.5px */
.hw-road-src a { color: var(--hw-navy); text-underline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  html.hw-rise .hw-road-line path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--hw-draw) var(--hw-ease); }
  html.hw-rise .hw-road li::before { transform: scale(0); transition: transform 300ms var(--hw-ease); }
  html.hw-rise .hw-road.is-in .hw-road-line path { stroke-dashoffset: 0; }
  html.hw-rise .hw-road.is-in li::before { transform: scale(1); }
  html.hw-rise .hw-road.is-in li:nth-child(2)::before { transition-delay: 300ms; }
  html.hw-rise .hw-road.is-in li:nth-child(3)::before { transition-delay: 600ms; }
  html.hw-rise .hw-road.is-in li:nth-child(4)::before { transition-delay: 900ms; }
}
@media (max-width: 760px) {
  /* on a phone the road runs down the left edge; it is drawn by a border, and not animated */
  .hw-road { grid-template-columns: minmax(0, 1fr); margin-left: 5px; padding: 0 0 0 24px; row-gap: 22px; border-left: 2px solid var(--hw-navy); }
  .hw-road-line { display: none; }
  .hw-road li::before { left: -31px; top: 4px; }
}
@media (forced-colors: active) { .hw-road-line path { stroke: CanvasText; } .hw-road li::before { box-shadow: inset 0 0 0 2px CanvasText; } }

/* ── each part rises a little as it arrives, once (T33). The waiting state is set in the head
   (html.hw-rise), and the head drops it after 2.5s unless this sheet's script has taken over ── */
@media (prefers-reduced-motion: no-preference) {
  html.hw-rise .hw-arrive { opacity: 0; transform: translateY(18px); transition: opacity var(--hw-rise) var(--hw-ease), transform var(--hw-rise) var(--hw-ease); }
  html.hw-rise .hw-arrive.is-in { opacity: 1; transform: none; }
}
@media print { main#main .hiw-ph[data-fo]::after, .hn-room-ph, .hw-curve { display: none; } html.hw-rise .hw-arrive { opacity: 1 !important; transform: none !important; } }