/* ============================================================
   TRADE FLOORING ONTARIO — guide.css
   Editorial styles for the flooring resource guides (/hardwood).
   Loaded only on guide pages. Inherits all tokens from style.css.
   ============================================================ */

/* ── 0. STICKY ENABLEMENT ─────────────────────────────────────
   style.css sets `overflow-x: hidden` on html/body. That makes them
   scroll containers, which silently breaks `position: sticky` for
   descendants — the guide nav would scroll away instead of pinning.
   `clip` prevents horizontal scrolling exactly the same way but does
   NOT create a scroll container, so sticky works. Scoped here because
   guide.css only loads on guide pages; the rest of the site is untouched. */
html:has(body.guide),
body.guide {
  overflow-x: clip;
}

/* ── 0b. STAGGER TIMING ───────────────────────────────────────
   The guides' staggered reveals used to take their timing from the generic
   .reveal-stagger rule in style.css. That rule is now a keyframe animation
   (it had to be, to stop it disabling card hover lifts), which the guides opt
   out of — so the old transition timing is restated here. It sits at the very
   top of this file on purpose: the original loaded before every guide rule,
   and any guide component with its own transition must keep winning ties
   against it exactly as before. */
.reveal-stagger > * {
  transition: opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0.06s; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.15s; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.24s; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.33s; }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.42s; }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.51s; }

/* ── 1. GUIDE-WIDE RHYTHM ─────────────────────────────────────
   Guides breathe more than the marketing pages: a wider vertical
   rhythm and a narrower reading measure. */
.guide {
  --guide-pad: clamp(3.75rem, 7.5vw, 6.5rem);
  --guide-measure: 62ch;
  --guide-rule: 1px solid var(--color-border);
  /* fixed nav (80px) + sticky guide nav — anchors must clear both */
  --guide-offset: 148px;
  /* Chapter band. The site's --color-cream sits at 1.107:1 against linen:
     technically alternating, perceptually invisible, which made a 13,700px
     guide read as one unbroken scroll. This lands at 1.27:1 — a visible
     band without looking striped. Scoped here so the rest of the site,
     where cream sits next to other colours, is untouched. */
  --guide-band: #E8DBC8;
  /* Readable muted text. --color-greige (#9A8878) is the site's muted
     tone but measures 3.16:1 on linen and 2.50:1 on the band — below AA
     for small text, and these guides lean heavily on small labels and
     captions. This clears 5.97:1 on linen and 4.71:1 on the band. */
  --guide-muted: #6B5C4E;
}

.guide-section { padding-block: var(--guide-pad); }
.guide-section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
/* Extra air around the two chapters that carry the most weight:
   the choosing decision, and the note from Trade Flooring. */
.guide-section--feature { padding-block: clamp(4.75rem, 9.5vw, 8.5rem); }

/* Anchor targets sit below both navs when jumped to */
.guide-section[id] { scroll-margin-top: var(--guide-offset); }
/* the price drivers deep-link to individual options in the Styles chapter */
.guide-option[id] { scroll-margin-top: var(--guide-offset); }

.guide-measure { max-width: var(--guide-measure); }

/* Section label — smaller and quieter than .eyebrow, sits above rules */
.guide-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  /* oak-dark, not oak: oak measured 4.37:1 on linen and 3.45:1 on the
     band — both below AA for small text. This clears 5.3:1 on both. */
  color: var(--color-oak-dark);
  display: block;
  margin-bottom: 1.25rem;
}
.theme-near-black .guide-label,
.theme-espresso .guide-label { color: var(--color-terracotta); }

/* A hairline that introduces a chapter */
.guide-rule {
  border: 0;
  border-top: var(--guide-rule);
  margin-bottom: 2.5rem;
}

/* ── 2. HERO ──────────────────────────────────────────────────
   Full-bleed photograph, copy anchored to the bottom-left.
   Establishes "guide", not "landing page". */
.guide-hero {
  position: relative;
  min-height: min(88svh, 780px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-color: var(--color-near-black);
}
.guide-hero__picture {
  position: absolute;
  inset: 0;
  display: block;
}
.guide-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}
/* The copy block is tall (h1 + supporting + standfirst), so the lower scrim
   has to reach well up the frame — otherwise the supporting line lands on a
   bright part of the photograph and drops below readable contrast.
   Verified by compositing the photo and this gradient on a canvas and
   sampling the result: the brightest of the four heroes still clears AA. */
.guide-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(20,16,12,0.50) 0%, transparent 28%),
    linear-gradient(to top,
      rgba(18,14,10,0.92) 0%,
      rgba(18,14,10,0.84) 28%,
      rgba(18,14,10,0.68) 50%,
      rgba(18,14,10,0.50) 68%,
      rgba(18,14,10,0.22) 84%,
      transparent 96%);
}
.guide-hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
/* The H1 is the plain subject of the page — "Hardwood Flooring" — with the
   poetic line supporting it underneath. Semantic and visual order agree, so
   it reads like the title page of a guide rather than an SEO headline. */
.guide-hero__title {
  color: #FFFFFF;
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  margin-bottom: 0.85rem;
  text-shadow: 0 2px 24px rgba(0,0,0,0.35);
}
.guide-hero__supporting {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.35rem, 2.9vw, 2.1rem);
  line-height: 1.3;
  /* A lifted terracotta — the brand accent, light enough to clear WCAG AA
     against the scrimmed photograph on all four guide heroes (5.83:1 on the
     brightest of them, measured by canvas composite). */
  color: #E3BD99;
  max-width: 22ch;
  margin-bottom: 1.6rem;
  text-shadow: 0 0 20px rgba(0,0,0,0.45);
}
.guide-hero__standfirst {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.75;
  color: rgba(255,255,255,0.82);
  max-width: 54ch;
}

/* ── 3. AT A GLANCE ───────────────────────────────────────────
   Rule-separated data strip. Deliberately not cards. */
.guide-glance {
  background-color: var(--guide-band);
  border-bottom: var(--guide-rule);
}
.guide-glance__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.guide-glance__item {
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1rem, 2.5vw, 2rem);
  border-left: var(--guide-rule);
}
.guide-glance__item:first-child { border-left: 0; padding-left: 0; }
.guide-glance__item:last-child { padding-right: 0; }
.guide-glance__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--guide-muted);
  display: block;
  margin-bottom: 0.6rem;
}
.guide-glance__value {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.9vw, 1.4rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-charcoal);
}
/* qualifier beside the relative $ rating in the glance strip */
.guide-glance__note {
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--guide-muted);
  margin-top: 0.25rem;
}

/* ── 4. STICKY GUIDE NAV ──────────────────────────────────────
   Quiet, but it has to be *seen*. The first version read as decorative
   text and reviewers missed it entirely, so: white bar + shadow so it
   reads as a control, and link text that clears WCAG AA (the old greige
   sat at 3.16:1). Still no backdrop blur — that cost was removed from
   the site nav for good reason. */
.guide-nav {
  position: sticky;
  top: 80px;
  z-index: 40;
  /* White rather than near-linen: the bar must separate from BOTH the
     linen sections and the sand chapter bands passing behind it. */
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 2px 14px rgba(44, 34, 24, 0.07);
}
.guide-nav__inner {
  display: flex;
  align-items: baseline;
  gap: clamp(1.1rem, 2.6vw, 2rem);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-block: 0.95rem;
}
.guide-nav__inner::-webkit-scrollbar { display: none; }

/* Names the bar's purpose so it can't be mistaken for decoration.
   Desktop only — on phones that width is better spent on the links. */
.guide-nav__label {
  flex: 0 0 auto;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--guide-muted);
  padding-right: clamp(1.1rem, 2.6vw, 2rem);
  border-right: 1px solid var(--color-border);
  white-space: nowrap;
}
@media (max-width: 900px) { .guide-nav__label { display: none; } }

.guide-nav__link {
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--guide-muted);   /* was 3.16:1 greige — failing AA */
  padding-bottom: 3px;
  white-space: nowrap;
  /* underline is drawn as a background gradient so it can animate its
     width — see the motion section at the end of this file */
}
.guide-nav__link:hover { color: var(--color-charcoal); }
.guide-nav__link.is-active { color: var(--color-charcoal); }

/* Chapter bands — alternating sections must actually be distinguishable */
.guide-section.theme-cream { background-color: var(--guide-band); }

/* ── 5. EDITORIAL PROSE ───────────────────────────────────────*/
.guide-lede {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.9vw, 2rem);
  line-height: 1.45;
  font-weight: 400;
  color: var(--color-charcoal);
  max-width: 30ch;
}
.guide-prose p {
  font-size: clamp(1rem, 1.5vw, 1.08rem);
  line-height: 1.85;
  color: var(--color-espresso);
  margin-bottom: 1.35rem;
  max-width: var(--guide-measure);
}
.guide-prose p:last-child { margin-bottom: 0; }
.guide-prose strong { color: var(--color-charcoal); font-weight: 600; }

/* Asymmetric editorial split: lede left, body right */
.guide-split {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

/* Key facts — rule-separated, no cards */
.guide-facts {
  margin-top: 3rem;
  border-top: var(--guide-rule);
}
.guide-facts__item {
  display: grid;
  grid-template-columns: minmax(140px, 0.32fr) 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: 1.35rem;
  border-bottom: var(--guide-rule);
}
.guide-facts__term {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-charcoal);
  line-height: 1.35;
}
.guide-facts__desc {
  font-size: 0.97rem;
  line-height: 1.75;
  color: var(--color-espresso);
}

/* Contained material moment — real texture, not full-bleed */
.guide-material {
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
.guide-material__frame {
  border-radius: var(--radius-md);
  overflow: hidden;
}
.guide-material__frame img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.guide-caption {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--guide-muted);
  margin-top: 0.85rem;
  line-height: 1.6;
}

/* ── 6. DECISION COLUMNS ──────────────────────────────────────
   Honest advisory layout: two columns divided by a rule. */
.guide-decision {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 4.5rem);
  margin-top: 3rem;
}
.guide-decision__col + .guide-decision__col {
  border-left: var(--guide-rule);
  padding-left: clamp(2rem, 6vw, 4.5rem);
}
.guide-decision__head {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.65rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-charcoal);
  margin-bottom: 1.75rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--color-oak);
}
.guide-decision__col--alt .guide-decision__head {
  border-bottom-color: var(--color-greige-light);
}
.guide-decision__list li {
  font-size: 0.97rem;
  line-height: 1.7;
  color: var(--color-espresso);
  padding-left: 1.4rem;
  margin-bottom: 1.1rem;
  position: relative;
}
.guide-decision__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--color-oak);
}
.guide-decision__col--alt .guide-decision__list li::before {
  background-color: transparent;
  border: 1px solid var(--color-greige);
}
.guide-decision__note {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: var(--guide-rule);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--guide-muted);
  font-style: italic;
}

/* ── 7. FULL-BLEED MATERIAL STATEMENT ─────────────────────────*/
.guide-statement {
  position: relative;
  min-height: min(68svh, 560px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-color: var(--color-near-black);
}
.guide-statement__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.guide-statement__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(18,14,10,0.86) 0%, rgba(18,14,10,0.2) 48%, transparent 75%);
}
.guide-statement__content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.guide-statement__words {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4.2vw, 3.1rem);
  font-weight: 500;
  line-height: 1.2;
  color: #FFFFFF;
  letter-spacing: 0.01em;
  margin-bottom: 1.25rem;
}
.guide-statement__caption {
  font-size: 0.85rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.62);
  max-width: 46ch;
}

/* Where a guide has no dedicated photography, the statement reuses the hero
   image framed lower so the floor fills the band rather than the room.
   Remove this modifier once that guide has its own photograph. */
.guide-statement__img--floor { object-position: center 88%; }

/* Projects placeholder for guides without photography yet. Dashed so it
   reads unmistakably as pending during review, and offers a real next
   step rather than an empty box. */
/* Sample callout. Was .guide-project-pending, a dashed "photography to come"
   box; the laminate guide now argues that a photograph is the wrong way to
   judge laminate at all, so this is a real invitation rather than a gap —
   hence a solid border instead of the dashed placeholder one. */
.guide-samples {
  margin-top: 2.25rem;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  max-width: 620px;
}
.guide-samples .guide-samples__lead {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-charcoal);
  margin-bottom: 0.75rem;
}
.guide-samples p {
  font-size: 0.94rem;
  line-height: 1.75;
  color: var(--guide-muted);
  margin-bottom: 1.5rem;
}
.guide-samples .btn { margin-bottom: 0; }

/* ── 8. MATERIAL LIBRARY (styles & options) ───────────────────
   Rows, not cards — reads like a specimen book. */
.guide-options { margin-top: 1rem; }
.guide-option {
  display: grid;
  grid-template-columns: minmax(150px, 0.28fr) 1fr;
  gap: clamp(1.25rem, 4vw, 3.5rem);
  padding-block: clamp(2rem, 4vw, 2.75rem);
  border-top: var(--guide-rule);
  align-items: start;
}
.guide-option:last-child { border-bottom: var(--guide-rule); }
.guide-option__name {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 600;
  color: var(--color-charcoal);
  line-height: 1.25;
}
.guide-option__body p {
  font-size: 0.97rem;
  line-height: 1.8;
  color: var(--color-espresso);
  margin-bottom: 0.9rem;
}
.guide-option__body p:last-child { margin-bottom: 0; }

/* Inline spec chips — quiet, not buttons */
.guide-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.1rem;
}
.guide-specs span {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--color-oak-dark);
  background-color: var(--color-cream);
  border: 1px solid var(--color-border);
  border-radius: 100px;
  padding: 0.32rem 0.85rem;
}

/* Grade swatches — real material photography */
.guide-swatches {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.guide-swatch img {
  width: 100%;
  height: clamp(64px, 9vw, 86px);
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}
.guide-swatch figcaption {
  margin-top: 0.7rem;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--guide-muted);
}
.guide-swatch strong {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-charcoal);
  margin-bottom: 0.25rem;
}

/* Inline prose links. oak-dark, not oak: oak is 4.37:1 at this size. */
.guide-inline-link {
  color: var(--color-oak-dark);
  border-bottom: 1px solid var(--color-border);
  transition: border-color 0.2s ease;
}
.guide-inline-link:hover { border-bottom-color: var(--color-oak-dark); }

/* Sibling-guide link on the alternative side of a comparison row. The row
   already argues for the other material; this gives the reader somewhere
   to go, and gives the four guides a link to each other. */
.guide-compare__side .guide-compare__link {
  margin-top: 0.9rem;
  font-size: 0.85rem;
  font-weight: 500;
}

/* ── 9. COST ──────────────────────────────────────────────────
   The figure and its price drivers share one white panel. Against the
   sand chapter band that reads as the page's answer box — the thing
   someone arriving from a "hardwood flooring cost" search came for.
   One panel, not a set of cards. It also retires the heavy 2px charcoal
   rule that used to open this block and crowd the prose above it, so
   the spacing above can come back down without the old collision. */
.guide-cost { margin-top: clamp(2.5rem, 4.5vw, 3.5rem); }

.guide-cost__panel {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 18px rgba(44, 34, 24, 0.05);
  overflow: hidden;
}
.guide-cost__figure {
  padding: clamp(1.6rem, 3.2vw, 2.4rem);
  border-bottom: var(--guide-rule);
}
.guide-cost__body { padding: clamp(1.6rem, 3.2vw, 2.4rem); }
.guide-cost__subhead { margin-bottom: 1.25rem; }

/* Relative cost scale. Not a substitute for a real per-sq-ft range, but it is
   real published data — the same $ / $$$$ ranking already in the comparison
   table on /resources — and it answers "is this the expensive one?", which is
   most of what someone wants at this point. */
.guide-cost__lead {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.9vw, 2rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-charcoal);
  margin-bottom: 1.4rem;
  max-width: 24ch;
}
.guide-cost__scale-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--guide-muted);
  margin-bottom: 0.4rem;
}
.guide-cost__scale { margin-bottom: 1.4rem; }
.guide-cost__scale-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: baseline;
  padding-block: 0.62rem;
  border-bottom: var(--guide-rule);
}
.guide-cost__scale-item:last-child { border-bottom: none; }
.guide-cost__scale-name {
  font-size: 0.95rem;
  color: var(--guide-muted);
}
/* the material this guide is about */
.guide-cost__scale-item.is-current .guide-cost__scale-name {
  color: var(--color-charcoal);
  font-weight: 600;
}
.guide-cost__scale-dollars {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  line-height: 1;
}
.guide-cost__scale-dollars b    { color: var(--color-oak-dark); font-weight: 600; }
.guide-cost__scale-dollars span { color: var(--color-greige-light); font-weight: 400; }
.guide-cost__scale-item.is-current .guide-cost__scale-dollars b { color: var(--color-oak); }
.guide-cost__amount {
  /* The real figure, once Trade Flooring confirmed it. Sits between the
     plain-language lead and the relative scale, so it reads as the answer
     and the scale reads as context. */
  margin-bottom: 1.1rem;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 4.2vw, 2.8rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--color-charcoal);
  letter-spacing: -0.01em;
}
.guide-cost__unit {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--guide-muted);
  letter-spacing: 0.02em;
}
.guide-cost__qualifier {
  margin-top: 0.9rem;
  font-size: 0.9rem;
  color: var(--guide-muted);
  line-height: 1.7;
  max-width: 52ch;
}

/* Two-column: what's included vs not */
.guide-costsplit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 5vw, 3.5rem);
  margin-top: clamp(2.5rem, 4.5vw, 3.5rem);
  padding-top: clamp(2rem, 3.5vw, 2.75rem);
  border-top: var(--guide-rule);
}
.guide-costsplit h3 {
  font-size: 1.1rem;
  margin-bottom: 0.9rem;
  color: var(--color-charcoal);
}
.guide-costsplit p {
  font-size: 0.94rem;
  line-height: 1.75;
  color: var(--color-espresso);
}

/* Price-driver list */
.guide-drivers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* gap wide enough that neighbouring hover surfaces never touch */
  gap: 0 clamp(2.75rem, 5vw, 4rem);
  margin-top: 0.5rem;
}
.guide-drivers__item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  padding-block: 1.05rem;
  border-bottom: var(--guide-rule);
  align-items: baseline;
}
/* no trailing rules against the panel edge — 2 columns, so the last row is two */
.guide-drivers__item:nth-last-child(-n+2) { border-bottom: none; }

/* Hover surface. Absolutely positioned so it can bleed past the text
   without touching layout — no negative margins fighting the grid gap. */
.guide-drivers__item::before {
  content: '';
  position: absolute;
  inset: 0 -0.75rem;
  background-color: var(--color-linen);
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: opacity 0.32s ease;
}
/* An oak rule that draws itself down the edge. This is the "animation" —
   one property, one direction, no lift and no bounce. A list of six that
   each jumped on hover would read as a widget, not a guide. */
.guide-drivers__item::after {
  content: '';
  position: absolute;
  left: -0.75rem;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 2px;
  border-radius: 2px;
  background-color: var(--color-oak);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.guide-drivers__item:hover::before,
.guide-drivers__item:focus-visible::before { opacity: 1; }
.guide-drivers__item:hover::after,
.guide-drivers__item:focus-visible::after  { transform: scaleY(1); }
.guide-drivers__item:focus-visible {
  outline: 2px solid var(--color-oak-dark);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Each driver cross-references the chapter that explains it, so the whole
   row is a link — a large, forgiving tap target. The underline is the part
   that matters on touch, where hover doesn't exist at all: it's what tells
   someone on a phone that this goes somewhere. */
.guide-drivers__item {
  color: inherit;
  text-decoration: none;
}
.guide-drivers__t strong {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-greige-light);
  transition: text-decoration-color 0.32s ease;
}
.guide-drivers__item:hover .guide-drivers__t strong,
.guide-drivers__item:focus-visible .guide-drivers__t strong {
  text-decoration-color: var(--color-oak-dark);
}

/* content paints above the hover surface */
.guide-drivers__n,
.guide-drivers__t { position: relative; }

.guide-drivers__n {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--color-oak-dark);
  font-weight: 600;
  transition: color 0.32s ease;
}
/* Darkens rather than warms on hover. Terracotta was the first instinct but
   measures 2.48:1 on the wash — text has to hold contrast in every state,
   and firming up reads more deliberate than lighting up. */
.guide-drivers__item:hover .guide-drivers__n,
.guide-drivers__item:focus-visible .guide-drivers__n { color: var(--color-charcoal); }
.guide-drivers__t strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-charcoal);
  margin-bottom: 0.15rem;
}
.guide-drivers__t span {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--guide-muted);
}

/* ── 10. COMPARISON ───────────────────────────────────────────*/
.guide-compare { margin-top: 1rem; }
.guide-compare__row {
  display: grid;
  grid-template-columns: minmax(170px, 0.3fr) 1fr 1fr;
  gap: clamp(1.25rem, 3.5vw, 3rem);
  padding-block: clamp(1.35rem, 2.2vw, 1.75rem);
  border-top: var(--guide-rule);
}
.guide-compare__row:last-child { border-bottom: var(--guide-rule); }
.guide-compare__vs {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 600;
  color: var(--color-charcoal);
  line-height: 1.3;
}
.guide-compare__side h4 {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-oak-dark);
  margin-bottom: 0.55rem;
}
.guide-compare__side--alt h4 { color: var(--guide-muted); }
.guide-compare__side p {
  font-size: 0.94rem;
  line-height: 1.75;
  color: var(--color-espresso);
  margin: 0;
}

/* ── 11. EXPERT NOTE ──────────────────────────────────────────
   Authored guidance — deliberately not styled like a testimonial. */
.guide-note {
  display: grid;
  grid-template-columns: 0.32fr 1fr;
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: start;
}
.guide-note__side {
  border-top: 2px solid var(--color-terracotta);
  padding-top: 1.25rem;
}
.guide-note__from {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-terracotta);
  margin-bottom: 0.6rem;
  display: block;
}
.guide-note__who {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 1.35;
}
.guide-note__role {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
  margin-top: 0.3rem;
  line-height: 1.6;
}
.guide-note__body {
  margin: 0;                      /* blockquote reset */
}
/* Reuses the oversized quote glyph already used on the homepage
   testimonials — an existing site idiom, not a new one. */
.guide-note__mark {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 6vw, 4rem);
  line-height: 0.7;
  color: var(--color-terracotta);
  opacity: 0.55;
  margin-bottom: 1rem;
}
.guide-note__body p {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3vw, 2.15rem);
  line-height: 1.5;
  font-weight: 400;
  color: rgba(255,255,255,0.94);
  margin-bottom: 1.25rem;
}
/* Aaron's notes came back longer and more detailed than a pull quote — which
   is the point of the section, but four paragraphs of 30px display type is a
   wall. The opening keeps the quote treatment; the rest steps down to
   something you can actually read on a dark band. */
.guide-note__body p + p {
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.82);
  max-width: 64ch;
}
.guide-note__body p:last-child { margin-bottom: 0; }
/* Needs to out-specify `.guide-note__body p` above */
.guide-note__body .guide-note__pending {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.6;
  color: rgba(255,255,255,0.34);
  margin-top: 2rem;
}

/* ── 12. GALLERY ──────────────────────────────────────────────
   Was a project case study: lead image plus Project / Material / Location
   rows. Nobody knows which house these photographs came from, so the rows
   could only ever say "Private residence, Ontario" — the shape of a case
   study with nothing in it. It's a captioned gallery now, claiming only what
   the photographs show. */
.guide-gallery__lead { margin: 2.25rem 0 0; }
.guide-gallery__lead .guide-caption {
  margin-top: 1rem;
  max-width: 62ch;
}
.guide-project__media {
  border-radius: var(--radius-md);
  overflow: hidden;
}
.guide-project__media img {
  width: 100%;
  aspect-ratio: 2 / 1;    /* full-width now, so a wider frame than the old 16/10 half-column */
  object-fit: cover;
}
/* Supporting shots. Columns follow the number of photos rather than a fixed
   three, so a guide with two (luxury vinyl) fills the row instead of leaving
   an empty slot. */
.guide-project__more {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 1.25rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.guide-project__more img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

/* ── 13. FAQ ──────────────────────────────────────────────────
   Uses the site's existing accordion component (same one as /resources)
   so this is a familiar pattern, not a new one. Only two overrides are
   needed: h3 instead of the component's h4 (keeps the heading order
   h2 -> h3 intact for search), and readable answer text. */
.guide-faq { margin-top: 1rem; }

.guide-faq .accordion__trigger h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-charcoal);
  margin-bottom: 0;
}
.guide-faq .accordion__body-inner p {
  /* the component's default greige is 3.4:1 on white — below AA */
  color: var(--guide-muted);
  margin-bottom: 0;
}

/* ── 14. CLOSING CTA ──────────────────────────────────────────*/
.guide-cta { text-align: center; }
.guide-cta h2 {
  color: #FFFFFF;
  max-width: 18ch;
  margin-inline: auto;
  margin-bottom: 1.1rem;
}
.guide-cta p {
  color: rgba(255,255,255,0.7);
  max-width: 48ch;
  margin-inline: auto;
  margin-bottom: 2.25rem;
  font-size: clamp(1rem, 1.6vw, 1.1rem);
  line-height: 1.8;
}

/* ── 16. RESPONSIVE ───────────────────────────────────────────
   Deliberate mobile decisions — not just a stacked desktop. */

@media (max-width: 900px) {
  /* Prose reflows to a single column; lede becomes an intro, not a sidebar */
  .guide-split { grid-template-columns: 1fr; gap: 2rem; }
  .guide-lede { max-width: 24ch; }

  /* Decision columns stack — the dividing rule moves to the top */
  .guide-decision { grid-template-columns: 1fr; gap: 2.5rem; }
  .guide-decision__col + .guide-decision__col {
    border-left: 0;
    padding-left: 0;
  }

  /* Comparison: label on its own line, the two sides sit side by side */
  .guide-compare__row { grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; }
  .guide-compare__vs { grid-column: 1 / -1; margin-bottom: 0.25rem; }

  .guide-note { grid-template-columns: 1fr; gap: 1.75rem; }
  .guide-costsplit { grid-template-columns: 1fr; gap: 1.75rem; }
  .guide-drivers { grid-template-columns: 1fr; }
  .guide-drivers__item:nth-last-child(-n+2) { border-bottom: var(--guide-rule); }
  .guide-drivers__item:last-child { border-bottom: none; }
}

@media (max-width: 720px) {
  /* Both navs keep their desktop heights (80px + 56px), so --guide-offset
     stays as-is. Overriding it here previously tucked 4px of each section
     under the sticky bar. */

  /* At-a-glance: 2×2 grid with rules on both axes */
  .guide-glance__grid { grid-template-columns: 1fr 1fr; }
  .guide-glance__item {
    padding: 1.4rem 1.1rem;
    border-left: var(--guide-rule);
    border-top: var(--guide-rule);
  }
  .guide-glance__item:nth-child(-n+2) { border-top: 0; }
  .guide-glance__item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .guide-glance__item:nth-child(even) { padding-right: 0; }

  /* Hero uses a portrait, floor-forward source at this width (see <picture>),
     so a centred crop is correct here. */
  .guide-hero { min-height: min(82svh, 640px); }
  .guide-hero__img { object-position: center center; }
  .guide-hero h1 { max-width: 14ch; }

  /* Term/definition rows stack so long text isn't squeezed into a sliver */
  .guide-facts__item,
  .guide-option {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }


  /* Swatches read better stacked wide than as three slivers */
  .guide-swatches { grid-template-columns: 1fr; gap: 1rem; }
  .guide-swatch img { height: 72px; }

  .guide-project__more { grid-auto-flow: row; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  /* two-up on a phone: drop anything past the second rather than orphan a third.
     (This used to hide :last-child, which left a two-photo guide with one.) */
  .guide-project__more figure:nth-child(n+3) { display: none; }
  .guide-project__media img { aspect-ratio: 4 / 3; }

  .guide-statement { min-height: min(62svh, 440px); }
  .guide-statement__words { max-width: 12ch; }
}

@media (max-width: 420px) {
  .guide-glance__grid { grid-template-columns: 1fr; }
  .guide-glance__item {
    border-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-top: var(--guide-rule);
  }
  .guide-glance__item:first-child { border-top: 0; }
  .guide-compare__row { grid-template-columns: 1fr; }
}

/* ── 17. MOTION ───────────────────────────────────────────────
   Deliberately the site's existing language and nothing more:
   the same .reveal fade-and-rise used elsewhere, and the same
   scale(1.04) image hover used in the gallery. Roughly one reveal
   per screen — enough to feel considered, not enough to notice. */

/* Content must never depend on JS to be visible. Reveals start ARMED
   only once we know scripts are running (see the inline head script),
   so with JS off or broken the guide still reads normally. */
.reveal,
.reveal-stagger > * { opacity: 1; transform: none; }

.guide-js .reveal { opacity: 0; transform: translateY(14px); }
.guide-js .reveal.visible { opacity: 1; transform: translateY(0); }
.guide-js .reveal-stagger > * { opacity: 0; transform: translateY(14px); }
.guide-js .reveal-stagger.visible > * { opacity: 1; transform: translateY(0); }
/* style.css now drives .reveal-stagger with a keyframe animation; the guides
   keep their own JS-gated transition reveal, so opt them out of it. */
.guide .reveal-stagger.visible > * { animation: none; }

/* Photography responds to the cursor exactly as it does in the gallery */
.guide-material__frame,
.guide-project__media,
.guide-project__more figure {
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.guide-material__frame img,
.guide-project__media img,
.guide-project__more img,
.guide-swatch img {
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.guide-material__frame:hover img,
.guide-project__media:hover img,
.guide-project__more figure:hover img { transform: scale(1.04); }
.guide-swatch img { transform-origin: center; }
.guide-swatch:hover img { transform: scale(1.02); }

/* The one genuinely new touch: the active chapter's underline grows in
   rather than snapping, so the sticky nav feels tracked, not switched. */
.guide-nav__link {
  background-image: linear-gradient(var(--color-oak), var(--color-oak));
  background-repeat: no-repeat;
  background-position: left 100%;
  background-size: 0% 1px;
  transition: color 0.25s ease, background-size 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.guide-nav__link.is-active { background-size: 100% 1px; }

@media (prefers-reduced-motion: reduce) {
  .guide-nav__link { transition: none; }
  .guide-nav__link.is-active { background-size: 100% 1px; }
  .guide-js .reveal,
  .guide-js .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
  .guide-material__frame img,
  .guide-project__media img,
  .guide-project__more img,
  .guide-swatch img { transition: none; }
  .guide-material__frame:hover img,
  .guide-project__media:hover img,
  .guide-project__more figure:hover img,
  .guide-swatch:hover img { transform: none; }
  /* keep the wash (it aids orientation) but drop the drawing motion */
  .guide-drivers__item::before { transition: none; }
  .guide-drivers__item::after { transition: none; transform: scaleY(1); opacity: 0; }
  .guide-drivers__item:hover::after { opacity: 1; }
}