/* Stairholm v2: editorial layer on top of stairholm.css. Scoped to body.sh2. */

.sh2 { font-size: 1.0625rem; line-height: 1.65; }
.sh2 h1 { line-height: 1.02; letter-spacing: -0.03em; }
.sh2 h2 { line-height: 1.06; letter-spacing: -0.025em; max-width: 20ch; }
.sh2 .sh-wrap { max-width: 1360px; }

/* Header: quieter, a little taller */
.sh2 .sh-header { background: var(--paper); }
.sh2 .sh-header-inner { min-height: 84px; }
.sh2 .sh-nav a { font-size: var(--text-sm); letter-spacing: 0.01em; }
.sh2 .sh-header-btn { min-height: 44px; padding: 0.5rem 1.125rem; font-size: var(--text-sm); }

/* Section labels: number, name, hairline */
.v2-label {
  display: flex; align-items: baseline; gap: var(--space-2);
  font-size: var(--text-sm); color: var(--spruce-soft); letter-spacing: 0.01em;
  padding-top: var(--space-2); border-top: 1px solid var(--line);
}
.v2-label span { font-variant-numeric: tabular-nums; color: var(--spruce); font-weight: 500; }
.v2-label-dark { color: var(--mist); border-top-color: color-mix(in srgb, var(--mist) 30%, transparent); }
.v2-label-dark span { color: var(--oak); }
.v2-eyebrow { font-size: var(--text-sm); color: var(--spruce-soft); letter-spacing: 0.01em; }

.v2-section { padding: var(--space-7) 0; }
.v2-head { display: grid; gap: var(--space-4); margin-bottom: var(--space-6); }
.v2-intro { color: var(--spruce-soft); font-size: var(--text-lg); max-width: 46ch; }

/* Hero: headline with a contained photo beside it */
.v2-hero { padding: var(--space-6) 0 var(--space-7); }
.v2-hero-grid { display: grid; gap: var(--space-5); align-items: center; }
.v2-hero-text { display: grid; gap: var(--space-4); justify-items: start; }
.v2-hero h1 { max-width: 15ch; }
.v2-hero .sh-lead { max-width: 42ch; }
.v2-hero-img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--line); }

/* Stair types */
.v2-types { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6) var(--space-4); }
.v2-type { display: grid; gap: var(--space-3); align-content: start; }
.v2-type img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--line); }
.v2-type-text { display: grid; gap: var(--space-1); border-top: 1px solid var(--line); padding-top: var(--space-2); }
.v2-type-text p { color: var(--spruce-soft); }

/* Statement: detail photo + one sentence */
.v2-statement-grid { display: grid; gap: var(--space-5); align-items: center; }
.v2-detail-img { width: 100%; max-width: 280px; height: auto; aspect-ratio: 3 / 4; object-fit: cover; background: var(--line); }
.v2-statement-text { display: grid; gap: var(--space-4); }
.v2-statement-text h2 { max-width: 18ch; }
.v2-statement-text p { color: var(--spruce-soft); font-size: var(--text-lg); max-width: 44ch; }

/* How it works: big numerals on the ascending steps */
.v2-steps .sh-step { border-top-color: var(--spruce); gap: var(--space-2); }
.v2-num { font-size: var(--h2); font-weight: 400; line-height: 1; letter-spacing: -0.03em; color: var(--spruce-soft); margin-bottom: var(--space-2); }

/* Why */
.v2-why { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.v2-why li { display: grid; gap: var(--space-2); border-top: 1px solid var(--spruce); padding-top: var(--space-3); }
.v2-why p { color: var(--spruce-soft); }

/* Trade */
.v2-trade { padding: var(--space-6) 0; }
.v2-trade-inner { display: grid; gap: var(--space-4); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--space-5) 0; }
.v2-trade h2 { font-size: var(--h3); max-width: none; }
.v2-trade-side { display: grid; gap: var(--space-3); justify-items: start; }
.v2-trade-side p { color: var(--spruce-soft); }

/* FAQ */
.v2-faq-grid { display: grid; gap: var(--space-4); }
.v2-faq-head { margin-bottom: 0; }
.sh2 .sh-faq { max-width: none; border-top-color: var(--spruce); }
.sh2 .sh-faq summary { font-size: var(--text-lg); padding: var(--space-3) 0; }

/* Quote */
.v2-quote { padding: var(--space-7) 0; }
.v2-quote .sh-quote-intro h2 { max-width: 14ch; }
.v2-quote .sh-motif { width: 78%; right: -24%; bottom: -16%; }

/* Footer */
.sh2 .sh-footer { background: var(--paper); padding-top: var(--space-6); }

@media (min-width: 700px) {
  .sh2 .sh-header { position: sticky; top: 0; z-index: 5; }
  .sh2 section[id] { scroll-margin-top: 84px; }
  .v2-types { grid-template-columns: repeat(3, 1fr); }
  .v2-why { grid-template-columns: repeat(3, 1fr); }
  .v2-trade-inner { grid-template-columns: 1fr 1fr; align-items: center; }
  .v2-trade-side { grid-template-columns: 1fr auto; align-items: center; }
}

@media (min-width: 1000px) {
  .v2-hero-grid { grid-template-columns: 7fr 5fr; column-gap: var(--space-6); }
  .v2-hero-img { aspect-ratio: 4 / 5; max-height: 600px; }
  .v2-head { grid-template-columns: 7fr 5fr; column-gap: var(--space-6); align-items: start; }
  .v2-head .v2-label { grid-column: 1 / -1; }
  .v2-head h2 { grid-column: 1 / 2; grid-row: 2; }
  .v2-head .v2-intro { grid-column: 2; grid-row: 2; align-self: end; justify-self: end; }
  .v2-types { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
  .v2-statement-grid { grid-template-columns: 280px 1fr; gap: var(--space-6); }
  .v2-faq-grid { grid-template-columns: 4fr 8fr; column-gap: var(--space-6); align-items: start; }
  .v2-faq-head { position: sticky; top: 120px; }
  .v2-faq-head h2 { grid-column: auto; }
  .v2-faq-head { grid-template-columns: 1fr; }
}

@media (max-width: 699px) {
  .v2-section, .v2-quote { padding: var(--space-6) 0; }
  .v2-hero { padding-top: var(--space-5); padding-bottom: var(--space-6); }
  .v2-detail-img { max-width: 200px; }
  .v2-head { margin-bottom: var(--space-5); }
}

/* 02 How it works: the steps drawn as a staircase in profile.
   Each step is a block with an oak tread on top; on desktop the blocks rise left to right. */
.sh2 .v2-steps { gap: var(--space-2); }
.sh2 .v2-steps .sh-step {
  margin-top: 0; min-height: 0;
  background: var(--mist);
  border-top: 6px solid var(--oak);
  padding: var(--space-3) var(--space-3) var(--space-4);
}
.sh2 .v2-steps .v2-num { font-size: var(--h3); margin-bottom: 0; }
.sh2 .v2-steps .v2-num { color: var(--spruce); }
.sh2 .v2-steps .sh-step:nth-child(2) { margin-left: var(--space-4); }
.sh2 .v2-steps .sh-step:nth-child(3) { margin-left: calc(var(--space-4) * 2); }
.sh2 .v2-steps .sh-step:nth-child(4) { margin-left: calc(var(--space-4) * 3); }

@media (min-width: 1000px) {
  .sh2 .v2-steps { gap: 0; align-items: end; }
  .sh2 .v2-steps .sh-step { margin-left: 0; padding: var(--space-3) var(--space-4) var(--space-3); }
  .sh2 .v2-steps .sh-step + .sh-step { border-left: 1px solid var(--paper); }
  .sh2 .v2-steps .sh-step:nth-child(1) { margin: 0; min-height: 18rem; }
  .sh2 .v2-steps .sh-step:nth-child(2) { margin: 0; min-height: 22rem; }
  .sh2 .v2-steps .sh-step:nth-child(3) { margin: 0; min-height: 26rem; }
  .sh2 .v2-steps .sh-step:nth-child(4) { margin: 0; min-height: 30rem; }
}

/* Railing over the 02 staircase (desktop only): oak handrail, spruce spindles, a newel post. */
/* The SVG viewBox (0 0 100 40) is x = % of width, y = rem: 10rem top padding + 30rem tallest step.
   If the step heights (18/22/26/30rem) change, update the viewBox and line coordinates to match;
   tools/stepcheck.mjs checks the heights. */
.v2-railing { display: none; }
@media (min-width: 1000px) {
  .v2-stair { position: relative; padding-top: 10rem; }
  .v2-railing { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
  .v2-railing line { vector-effect: non-scaling-stroke; stroke-linecap: round; }
  .v2-rail-spindles line { stroke: var(--spruce); stroke-width: 2; }
  .v2-rail-post { stroke: var(--spruce); stroke-width: 7; stroke-linecap: square; }
  .v2-rail-top { stroke: var(--oak); stroke-width: 9; }
}

/* How to measure guide */
.g-intro { padding-top: var(--space-6); }
.g-intro-grid { display: grid; gap: var(--space-5); align-items: end; }
.g-intro-text { display: grid; gap: var(--space-4); justify-items: start; }
.g-intro h1 { max-width: 14ch; font-size: var(--h2); }
.g-intro .sh-lead { max-width: 52ch; }
.g-need { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); border-top: 1px solid var(--spruce); padding-top: var(--space-3); }
.g-need li { color: var(--spruce-soft); }
.g-need strong { color: var(--spruce); font-weight: 500; }

.g-measure-grid { display: grid; gap: var(--space-5); align-items: start; }
.g-figure { margin: 0; background: var(--paper); padding: var(--space-3); display: grid; gap: var(--space-2); }
.g-figure figcaption { font-size: var(--text-sm); color: var(--spruce-soft); }
.g-diagram { width: 100%; height: auto; color: var(--spruce); }
.g-floor { stroke: currentColor; stroke-width: 3; }
.g-slab { fill: var(--line); stroke: currentColor; stroke-width: 1.5; }
.g-stair { fill: var(--mist); }
.g-tread { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.g-dim { stroke: var(--oak); stroke-width: 2; }
.g-ext { stroke: var(--spruce-soft); stroke-width: 1; stroke-dasharray: 3 3; }
.g-key { fill: var(--spruce); }
.g-key-text { fill: var(--paper); font: 600 13px var(--font); text-anchor: middle; }
.g-note { fill: var(--spruce-soft); font: 400 13px var(--font); }
.g-diagram marker path { fill: var(--oak); }

.g-keys { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.g-keys li { display: grid; grid-template-columns: 32px 1fr; gap: var(--space-2); align-items: start; border-top: 1px solid var(--line); padding-top: var(--space-2); }
.g-keys p { color: var(--spruce-soft); }
.g-keys h3 { font-size: var(--text-lg); }
.g-key-badge { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--spruce); color: var(--paper); font-size: var(--text-sm); font-weight: 600; margin-top: 2px; }

.g-calc-grid { display: grid; gap: var(--space-5); align-items: start; }
.g-calc-head { margin-bottom: 0; }
.g-calc-head h2 { grid-column: 1 / -1 !important; }
.g-calc-head .v2-intro { grid-column: 1 / -1 !important; grid-row: auto !important; justify-self: start !important; }
.g-calc { display: grid; gap: var(--space-3); background: var(--mist); padding: var(--space-4); border-top: 6px solid var(--oak); }
.g-field { display: grid; gap: 0.375rem; }
.g-field label { font-weight: 500; }
.g-opt { font-weight: 400; color: var(--spruce-soft); font-size: var(--text-sm); }
.g-field input { width: 100%; max-width: 280px; min-height: 44px; padding: 0.625rem 0.75rem; font: inherit; color: var(--spruce); background: var(--paper); border: 1px solid var(--field-border); border-radius: var(--radius-sm); }
.g-field input[aria-invalid="true"] { border-color: var(--error); border-width: 2px; }
.g-calc .sh-btn { justify-self: start; }
.g-result { display: grid; gap: var(--space-2); }
.g-result:empty { display: none; }
.g-result h3 { font-size: var(--text-lg); margin-top: var(--space-2); }
.g-result .sh-btn { justify-self: start; }
.g-flag { border-left: 3px solid var(--error); padding-left: var(--space-2); }
.g-fit { border-left: 3px solid var(--spruce); padding-left: var(--space-2); }

.g-limits { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.g-limits div { display: flex; justify-content: space-between; gap: var(--space-3); padding: 0.625rem 0; border-bottom: 1px solid var(--line); }
.g-limits dt { color: var(--spruce-soft); }
.g-limits dd { margin: 0; font-weight: 500; text-align: right; }

.g-photos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); counter-reset: ph; }
.g-photos li { border-top: 1px solid var(--spruce); padding-top: var(--space-3); display: grid; gap: var(--space-1); counter-increment: ph; }
.g-photos li::before { content: counter(ph); font-size: var(--h3); color: var(--spruce-soft); line-height: 1; margin-bottom: var(--space-1); }
.g-photos p { color: var(--spruce-soft); }

.g-two { display: grid; gap: var(--space-6); }
.g-two > div { display: grid; gap: var(--space-3); align-content: start; }
.g-h2-sm { font-size: var(--h3); max-width: none; }
.g-list { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--space-2); color: var(--spruce-soft); }
.g-small { color: var(--spruce-soft); font-size: var(--text-sm); }

.g-cta-inner { position: relative; z-index: 1; display: grid; gap: var(--space-3); justify-items: start; }
.g-cta-inner p { color: var(--mist); font-size: var(--text-lg); }
.g-btn-light, .g-btn-light:visited { background: var(--mist); color: var(--spruce); border-color: var(--mist); }
.g-btn-light:hover { background: var(--paper); }

@media (min-width: 700px) {
  .g-photos { grid-template-columns: repeat(2, 1fr); }
  .g-two { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .g-intro-grid { grid-template-columns: 8fr 4fr; column-gap: var(--space-6); }
  .g-measure-grid { grid-template-columns: 7fr 5fr; column-gap: var(--space-5); }
  .g-calc-grid { grid-template-columns: 5fr 7fr; column-gap: var(--space-6); }
  .g-photos { grid-template-columns: repeat(4, 1fr); }
}

/* Calculator drawing */
.g-calc-fig { margin: var(--space-2) 0 0; background: var(--paper); padding: var(--space-2); display: grid; gap: var(--space-1); }
.g-calc-fig figcaption { font-size: var(--text-sm); color: var(--spruce-soft); }
.g-calc-svg { width: 100%; height: auto; }
.g-c-floor { stroke: var(--spruce); stroke-width: 3; }
.g-c-fill { fill: var(--mist); }
.g-c-steps { fill: none; stroke: var(--spruce); stroke-width: 2.5; stroke-linejoin: round; }
.g-c-dim { stroke: var(--oak); stroke-width: 2.5; }
.g-c-tick { stroke: var(--oak); stroke-width: 2.5; }
.g-c-limit { stroke: var(--spruce-soft); stroke-width: 1.5; stroke-dasharray: 5 4; }
.g-c-label { fill: var(--spruce); font: 500 20px var(--font); text-anchor: middle; }
.g-c-note { fill: var(--spruce-soft); font: 400 17px var(--font); }

/* Plan-view sketches on the stair types: outline and treads in spruce, walking line in oak */
.v2-type-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); }
.v2-plan { flex: none; width: 64px; height: 64px; }
.v2-plan-treads rect, .v2-plan-treads line { fill: none; stroke: var(--spruce); stroke-width: 1.5; }
.v2-plan-treads rect { stroke-width: 2; }
.v2-plan-walk { fill: none; stroke: var(--oak); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.v2-plan-head { fill: var(--oak); }
.v2-plan-start { fill: var(--oak); }

/* Signature: section labels sit on an oak dimension line with end ticks */
.sh2 .v2-label { position: relative; border-top: 0; padding-top: calc(var(--space-2) + 1px); }
.sh2 .v2-label::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--oak); }
.sh2 .v2-label::after { content: ""; position: absolute; left: 0; right: 0; top: -4px; height: 9px; border-left: 1px solid var(--oak); border-right: 1px solid var(--oak); }

/* Hero photo carries one dimension line along its foot */
.v2-hero-fig { margin: 0; display: grid; gap: var(--space-2); }
.v2-dim { position: relative; height: 18px; border-left: 1px solid var(--oak); border-right: 1px solid var(--oak); display: flex; align-items: center; justify-content: center; }
.v2-dim::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--oak); }
.v2-dim span { position: relative; background: var(--paper); padding: 0 var(--space-1); font-size: var(--text-sm); color: var(--spruce-soft); letter-spacing: 0.01em; }

/* Menu hover: thin oak underline */
.sh2 .sh-nav a:hover { color: var(--spruce); text-decoration: underline; text-decoration-color: var(--oak); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.g-c-end { text-anchor: end; }
@media (max-width: 699px) {
  .g-c-label { font-size: 30px; }
  .g-c-note { font-size: 26px; }
}