/* NorthWood Round 42: colour tokens, dark mode, owner card in the hero. (Round 45: the homepage catalogue cards are gone; PDFs are links inside each product page.)
   Light mode is unchanged: every token below holds the value the page already used.
   Dark mode follows the device setting, and the sun/moon button (assets/nw-theme.js) can override it.
   The two dark blocks are identical on purpose (one for "follow the device", one for "chosen by hand"); a test checks that. */

:root {
  color-scheme: light;
  --surface: #fff; --surface-2: #fffdf9; --cream-2: #f3ebdf; --cream-3: #f5f3ef;
  --inv-bg: #251b13; --inv-fg: #fff;
  --deep: #251b13; --box: #251b13;
  --glass: rgba(255, 253, 249, .94);
  --accent-text: #9c5318;
  --nav-bg: rgba(250, 246, 240, .9); --nav-bg-solid: rgba(250, 244, 236, .96); --nav-shadow: 0 1px 0 rgba(236, 223, 208, .9), 0 10px 30px rgba(48, 34, 20, .05);
  --menu-bg: rgba(250, 246, 240, .98); --ws-bg: rgba(255, 253, 249, .94);
  --ok-bg: #e8f5ee; --ok-fg: #18794e; --blue-bg: #e8f0fb; --blue-fg: #1e5aa8; --warn-bg: #fff4e5; --warn-fg: #b45309;
  --muted2: #6b5d50; --card-shadow: rgba(37, 27, 19, .05);
  --img-dim: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --cream: #14100c; --ink: #f2e9de; --gray: #b9ad9f; --line: #3a2f26;
    --surface: #1c1611; --surface-2: #211a14; --cream-2: #17120e; --cream-3: #19140f;
    --inv-bg: #f0e4d4; --inv-fg: #1b130e;
    --deep: #0e0a07; --box: #241c15;
    --glass: rgba(28, 22, 17, .9);
    --accent-text: #e9ab6e;
    --nav-bg: rgba(20, 16, 12, .88); --nav-bg-solid: rgba(20, 16, 12, .96); --nav-shadow: 0 1px 0 #3a2f26, 0 10px 30px rgba(0, 0, 0, .35);
    --menu-bg: rgba(20, 16, 12, .98); --ws-bg: rgba(24, 19, 15, .94);
    --ok-bg: #12301f; --ok-fg: #7fd6a4; --blue-bg: #14263f; --blue-fg: #93b9f2; --warn-bg: #3a2610; --warn-fg: #f0b56f;
    --muted2: #b9ad9f; --card-shadow: rgba(0, 0, 0, .35);
    --img-dim: brightness(.92) contrast(1.03);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --cream: #14100c; --ink: #f2e9de; --gray: #b9ad9f; --line: #3a2f26;
  --surface: #1c1611; --surface-2: #211a14; --cream-2: #17120e; --cream-3: #19140f;
  --inv-bg: #f0e4d4; --inv-fg: #1b130e;
  --deep: #0e0a07; --box: #241c15;
  --glass: rgba(28, 22, 17, .9);
  --accent-text: #e9ab6e;
  --nav-bg: rgba(20, 16, 12, .88); --nav-bg-solid: rgba(20, 16, 12, .96); --nav-shadow: 0 1px 0 #3a2f26, 0 10px 30px rgba(0, 0, 0, .35);
  --menu-bg: rgba(20, 16, 12, .98); --ws-bg: rgba(24, 19, 15, .94);
  --ok-bg: #12301f; --ok-fg: #7fd6a4; --blue-bg: #14263f; --blue-fg: #93b9f2; --warn-bg: #3a2610; --warn-fg: #f0b56f;
  --muted2: #b9ad9f; --card-shadow: rgba(0, 0, 0, .35);
  --img-dim: brightness(.92) contrast(1.03);
}

/* ---------- surfaces and text, written with tokens (identical in light mode) ---------- */
html { background: var(--cream); }
nav { background-color: var(--nav-bg-solid); box-shadow: var(--nav-shadow); }
nav.scrolled { background: var(--nav-bg); }
.lgs { background: var(--surface); }
.burger { background: var(--surface) !important; color: var(--ink); }
.lg { color: var(--gray); }
.lg.on, .btn-dark, .workspace-cta, .mat .price, .chip.on, .chip:hover, .coll-head span, .btn-ghost:hover { background: var(--inv-bg); color: var(--inv-fg); }
.workspace-cta { color: var(--inv-fg) !important; }
.btn-dark:hover { background: var(--wood-d); color: #fff; }
.chip.on, .chip:hover { border-color: var(--inv-bg); }
.chip { color: var(--ink); }
.trust, .gallery, .reviews { background: var(--surface); }
.photo-showcase { background: var(--cream-3); }
.photo-tile { background: var(--cream-3); }
.mat, .coll, .safe, .visit .card, .wg-card, .nw-faq details { background: var(--surface); }
.nw-pcard { background: var(--surface-2); border-color: var(--line); }
.nw-pimg { background: var(--cream-3); }
.nw-pnone { color: var(--gray); }
.nw-pcat { color: var(--gray); }
.nw-plink { color: var(--accent-text); }
.est-box { background: var(--box); }
footer { background: var(--deep); }
.hero-chip, .quote-cap { background: var(--glass); }
.navlinks { background: var(--menu-bg); }
@media (min-width: 1024px) { .navlinks { background: transparent; } }
.desktop-workspace { background: var(--ws-bg); }
.wg-ok .wg-badge { background: var(--ok-bg); color: var(--ok-fg); }
.wg-blue .wg-badge { background: var(--blue-bg); color: var(--blue-fg); }
.wg-warn .wg-badge { background: var(--warn-bg); color: var(--warn-fg); }
.wg-card small, .nw-faq p { color: var(--muted2); }
.nw-faq summary::after { color: var(--accent-text); }
.nw-pwater { background: var(--ok-bg); color: var(--ok-fg); }
.nw-pwater.laminate_resistant { background: var(--warn-bg); color: var(--warn-fg); }
.owner-photo figcaption span { color: var(--gray); }
.tag, .hero h1 em, .hero-chip b, .step b, .visit .card dd a, .badge, .hero-badges span, .safe .ic, .desktop-workspace-inner a:hover,
.workspace-label, .wg-note a { color: var(--accent-text); }

/* ---------- dark mode only ---------- */
:root[data-theme="dark"] .est-box { border: 1px solid var(--line); }
:root[data-theme="dark"] .mat:hover, :root[data-theme="dark"] .coll:hover  { box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7); }
:root[data-theme="dark"] .work img, :root[data-theme="dark"] .photo-showcase img, :root[data-theme="dark"] .hero-media > img, :root[data-theme="dark"] .quote-media img, :root[data-theme="dark"] .nw-pimg img { filter: var(--img-dim); }
:root[data-theme="dark"] .owner-photo img { box-shadow: 0 18px 40px rgba(0, 0, 0, .55); filter: var(--img-dim); }
:root[data-theme="dark"] .sws span { border-color: rgba(255, 255, 255, .18); }
:root[data-theme="dark"] .nw-dock { background: rgba(33, 26, 20, .97); border-color: rgba(255, 255, 255, .16); }
:root[data-theme="dark"] .b2b { box-shadow: none; background: linear-gradient(120deg, #6e3a12, #9a5218); }
:root[data-theme="dark"] .btn-ghost { border-color: rgba(242, 233, 222, .55); }
:root[data-theme="dark"] .hero-media { box-shadow: 0 44px 88px -32px rgba(0, 0, 0, .7); }
:root[data-theme="dark"] .ba { box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); }
:root[data-theme="dark"] ::selection { background: #e2a268; color: #14100c; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .est-box { border: 1px solid var(--line); }
  :root:not([data-theme="light"]) .mat:hover, :root:not([data-theme="light"]) .coll:hover { box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7); }
  :root:not([data-theme="light"]) .work img, :root:not([data-theme="light"]) .photo-showcase img, :root:not([data-theme="light"]) .hero-media > img, :root:not([data-theme="light"]) .quote-media img, :root:not([data-theme="light"]) .nw-pimg img { filter: var(--img-dim); }
  :root:not([data-theme="light"]) .owner-photo img { box-shadow: 0 18px 40px rgba(0, 0, 0, .55); filter: var(--img-dim); }
  :root:not([data-theme="light"]) .sws span { border-color: rgba(255, 255, 255, .18); }
  :root:not([data-theme="light"]) .nw-dock { background: rgba(33, 26, 20, .97); border-color: rgba(255, 255, 255, .16); }
  :root:not([data-theme="light"]) .b2b { box-shadow: none; background: linear-gradient(120deg, #6e3a12, #9a5218); }
  :root:not([data-theme="light"]) .btn-ghost { border-color: rgba(242, 233, 222, .55); }
  :root:not([data-theme="light"]) .hero-media { box-shadow: 0 44px 88px -32px rgba(0, 0, 0, .7); }
  :root:not([data-theme="light"]) .ba { box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); }
  :root:not([data-theme="light"]) ::selection { background: #e2a268; color: #14100c; }
}

/* ---------- theme button ---------- */
.theme-toggle {
  display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); cursor: pointer;
  transition: background .25s, border-color .25s, transform .25s;
}
.theme-toggle:hover { border-color: var(--wood); transform: translateY(-1px); }
.theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .i-moon { display: none; }
.theme-toggle[aria-pressed="true"] .i-sun { display: none; }
.theme-toggle[aria-pressed="true"] .i-moon { display: block; }
.theme-row { display: none; }
@media (max-width: 1023px) {
  .nav-cta > .theme-toggle { display: none; }
  .navlinks .theme-row {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 13px 4px; border: 0; border-top: 1px solid var(--line);
    background: transparent; color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; text-align: left; cursor: pointer;
  }
  .navlinks .theme-row svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  .navlinks .theme-row .i-moon { display: none; }
  .navlinks .theme-row[aria-pressed="true"] .i-sun { display: none; }
  .navlinks .theme-row[aria-pressed="true"] .i-moon { display: block; }
}

/* ---------- Alice in the first screen ---------- */
.hero-owner { display: flex; align-items: center; gap: 14px; color: var(--ink); text-decoration: none; min-width: 0; }
.hero-owner img {
  flex: none; display: block; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: #bb7b58;
  border: 3px solid var(--surface-2); box-shadow: 0 0 0 2px var(--wood), 0 6px 16px rgba(37, 27, 19, .25);
}
.hero-owner .who { display: flex; flex-direction: column; min-width: 0; }
.hero-owner .who b { font-family: var(--serif); font-size: 18px; font-weight: 600; line-height: 1.15; }
.hero-owner .who small { font-size: 12.5px; color: var(--gray); line-height: 1.4; }
.hero-owner .go { margin-left: auto; flex: none; font-size: 13px; font-weight: 700; color: var(--accent-text); white-space: nowrap; }
.hero-owner:focus-visible { outline: 3px solid var(--wood-l); outline-offset: 3px; border-radius: 999px; }
/* A: a pill above the headline (phones and tablets, where the big photo sits below the text) */
.hero-owner--pill {
  display: inline-flex; margin: 0 0 20px; padding: 7px 18px 7px 7px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); box-shadow: 0 8px 24px rgba(var(--shadow-rgb, 37, 27, 19), .08); max-width: 100%;
}
.hero-owner--pill .who small { max-width: 24ch; }
/* B: a card laid over the TOP of the hero photo (desktop), so it is inside the first screen even on a 768 px tall laptop */
.hero-owner--card {
  position: absolute; left: 16px; right: 16px; top: 16px; padding: 12px 20px 12px 12px; border-radius: 22px;
  background: var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 14px 34px rgba(40, 20, 5, .32);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.hero-owner--card img { width: 88px; height: 88px; border-width: 4px; }
.hero-owner--card .who b { font-size: 22px; }
.hero-owner--card .who small { font-size: 13px; }
.hero-owner--card .proof { margin-top: 6px; font-size: 12.5px; color: var(--gray); }
.hero-owner--card .proof b { font-family: var(--serif); font-size: 15px; color: var(--accent-text); }
@media (min-width: 1024px) { .hero-owner--pill { display: none; } }
@media (max-width: 1023px) { .hero-owner--card { display: none; } }
@media (max-width: 420px) { .hero-owner--pill .go { display: none; } .hero-owner--pill { padding-right: 16px; } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) { .theme-toggle { transition: none !important; } }

/* ---------- small accessibility helper ---------- */
.nw-skip { position: absolute; left: 12px; top: -60px; z-index: 400; padding: 10px 16px; border-radius: 10px; background: var(--inv-bg); color: var(--inv-fg); font-weight: 700; text-decoration: none; transition: top .2s; }
.nw-skip:focus { top: 10px; outline: 3px solid var(--wood-l); }

/* ---------- /terms/ and the 404 page ---------- */
:root[data-theme="dark"] .nw-doc, :root[data-theme="dark"] body.nw-doc { --cream: #14100c; --ink: #f2e9de; --wood: #e9ab6e; --line: #3a2f26; --mut: #b9ad9f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.nw-doc { --cream: #14100c; --ink: #f2e9de; --wood: #e9ab6e; --line: #3a2f26; --mut: #b9ad9f; } }
:root[data-theme="dark"] body.nw-doc header { background: #0e0a07; border-bottom: 1px solid #3a2f26; }
:root[data-theme="dark"] body.nw-doc .wp { background: #1c1611; }
:root[data-theme="dark"] body.nw-doc .wp .limit { background: #14100c; color: #d9cdbf; }
:root[data-theme="dark"] body.nw-doc .wp.ok .rating { color: #7fd6a4; }
:root[data-theme="dark"] body.nw-doc .wp.warn .rating { color: #f0b56f; }
:root[data-theme="dark"] body.nw-doc .wp.blue .rating { color: #93b9f2; }
:root[data-theme="dark"] body.nw-doc .notice { background: #3a2610; border-color: #8a5a2a; color: #f2e9de; }
:root[data-theme="dark"] body.nw-doc .a, :root[data-theme="dark"] body.nw-doc .langs a[aria-current="true"] { color: #14100c; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.nw-doc header { background: #0e0a07; border-bottom: 1px solid #3a2f26; }
  :root:not([data-theme="light"]) body.nw-doc .wp { background: #1c1611; }
  :root:not([data-theme="light"]) body.nw-doc .wp .limit { background: #14100c; color: #d9cdbf; }
  :root:not([data-theme="light"]) body.nw-doc .wp.ok .rating { color: #7fd6a4; }
  :root:not([data-theme="light"]) body.nw-doc .wp.warn .rating { color: #f0b56f; }
  :root:not([data-theme="light"]) body.nw-doc .wp.blue .rating { color: #93b9f2; }
  :root:not([data-theme="light"]) body.nw-doc .notice { background: #3a2610; border-color: #8a5a2a; color: #f2e9de; }
  :root:not([data-theme="light"]) body.nw-doc .a, :root:not([data-theme="light"]) body.nw-doc .langs a[aria-current="true"] { color: #14100c; }
}

/* ---------- printing the terms page is always dark text on white, even from dark mode ---------- */
@media print {
  body.nw-doc { --cream: #faf4ec !important; --ink: #251b13 !important; --wood: #9c5318 !important; --line: #ecdfd0 !important; --mut: #6b5d50 !important; background: #fff !important; color: #251b13 !important; }
  body.nw-doc header { background: #fff !important; border: 0 !important; }
  body.nw-doc .wp { background: #fff !important; }
  body.nw-doc .wp .limit { background: #faf4ec !important; color: #4a3b2e !important; }
  body.nw-doc .wp.ok .rating { color: #18794e !important; } body.nw-doc .wp.warn .rating { color: #b45309 !important; } body.nw-doc .wp.blue .rating { color: #1e5aa8 !important; }
  body.nw-doc .notice { background: #fff4e5 !important; border-color: #e2a268 !important; color: #251b13 !important; }
}