/* Tortoise Time signature palette: pale sage, warm ivory and light-oak accents.
   Loaded last. Light surfaces always have dark text; pine remains a DARK result surface.
   Presentation only: no calculator values, thresholds, order or storage changes. */
@media screen {
  :root, :root[data-theme="light"] {
    color-scheme: light;
    --cream: #FCFAF6; --paper: #FFFEFB; --pine: #193E34; --pine-2: #3D5D4B;
    --ink: #34483C; --ink-2: #536052; --on-pine: #FCFBF7;
    --sage: #C7D6BF; --sage-soft: #F5F8F1; --line: #D9E1D2;
    --brand-surface: #EEF4E8; --brand-soft: #F5F8F1; --brand-strong: #DCE8D4;
    --control-line: #637562; --selection-line: #466653;
    --action-bg: #3D5D4B; --action-hover: #334F40; --action-text: #FCFBF7;
    --secondary-bg: #EDF3E7; --secondary-hover: #DCE8D4; --secondary-text: #344F3E;
    --on-accent: #173A2D; --amber: #DCE8D4; --amber-ink: #355C48;
    --sun: #C8D5CB; --sun-soft: #EEF3EF; --grape-soft: #F5F8F1;
    --focus: #416D56; --error-text: #743B32; --error-line: #87534A;
    --safety-surface: #F1EAE0; --safety-text: #5C3D30; --safety-line: #80604B;
    --wood-soft: #F8F3EC; --wood-surface: #F3EADF; --wood-line: #D8C3AA; --wood-ink: #6A503B;
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --cream: #18251D; --paper: #223329; --pine: #193E34; --pine-2: #BCD4C2;
    --ink: #F1F3E9; --ink-2: #CCD8C9; --on-pine: #FCFBF7;
    --sage: #A9C2A3; --sage-soft: #2B4132; --line: #506551;
    --brand-surface: #2D4236; --brand-soft: #24382C; --brand-strong: #BDD1C3;
    --control-line: #A9BDAF; --selection-line: #173A2D;
    --action-bg: #BDD1C3; --action-hover: #D0E0D5; --action-text: #173A2D;
    --secondary-bg: #BDD1C3; --secondary-hover: #D0E0D5; --secondary-text: #173A2D;
    --on-accent: #173A2D; --amber: #ABC4B2; --amber-ink: #C6DACD;
    --sun: #ABC4B2; --sun-soft: #283B30; --grape-soft: #2B4132;
    --focus: #C0D9C8; --error-text: #F0BDB2; --error-line: #E3AFA3;
    --safety-surface: #3A3028; --safety-text: #E8D6C5; --safety-line: #CEB296;
    --wood-soft: #302D27; --wood-surface: #38342D; --wood-line: #9B856B; --wood-ink: #E5D0B6;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --cream: #18251D; --paper: #223329; --pine: #193E34; --pine-2: #BCD4C2;
      --ink: #F1F3E9; --ink-2: #CCD8C9; --on-pine: #FCFBF7;
      --sage: #A9C2A3; --sage-soft: #2B4132; --line: #506551;
      --brand-surface: #2D4236; --brand-soft: #24382C; --brand-strong: #BDD1C3;
      --control-line: #A9BDAF; --selection-line: #173A2D;
      --action-bg: #BDD1C3; --action-hover: #D0E0D5; --action-text: #173A2D;
      --secondary-bg: #BDD1C3; --secondary-hover: #D0E0D5; --secondary-text: #173A2D;
      --on-accent: #173A2D; --amber: #ABC4B2; --amber-ink: #C6DACD;
      --sun: #ABC4B2; --sun-soft: #283B30; --grape-soft: #2B4132;
      --focus: #C0D9C8; --error-text: #F0BDB2; --error-line: #E3AFA3;
      --safety-surface: #3A3028; --safety-text: #E8D6C5; --safety-line: #CEB296;
      --wood-soft: #302D27; --wood-surface: #38342D; --wood-line: #9B856B; --wood-ink: #E5D0B6;
    }
  }
  /* Alternate sage feature areas with ivory reading areas, not green everywhere. */
  body { background: var(--cream); color: var(--ink); }
  .hero, .newsletter-page-hero { background: var(--brand-soft); }
  .site-header { background: var(--paper); }
  .site-header { border-bottom-color: var(--line); }
  .reading-start, .band-paper { background: var(--paper); }
  .reading-choice, .reading-guide, .qa-editorial, .challenge,
  .learn-library .article-featured { background: var(--brand-soft); border-color: var(--line); }
  .tile, .panel, .newsletter-card, .newsletter-issue { background: var(--paper); border-color: var(--line); }
  /* Local on-pine remapping fixes legacy pale text inside these newly light sections.
     Dark result cards retain the global cream-on-pine pairing. */
  :is(.newsletter-home,.newsletter-signup,.band-pine,.learn-newsletter,.qa-newsletter) {
    --on-pine: var(--ink);
    background: var(--brand-surface); color: var(--ink);
  }
  :is(.newsletter-home,.newsletter-signup,.band-pine,.learn-newsletter,.qa-newsletter) :is(h2,h3) { color: var(--ink); }
  .newsletter-home .lede, .newsletter-benefits span, .newsletter-signup p,
  .band-pine p, .learn-newsletter p, .qa-newsletter p { color: var(--ink-2); }
  .newsletter-benefits strong { color: var(--ink); }
  .newsletter-benefits li, .principles li { border-top-color: var(--control-line); }
  :is(.newsletter-home,.newsletter-signup,.band-pine,.learn-newsletter,.qa-newsletter) .eyebrow { color: var(--pine-2); }
  html body .newsletter-status { color: var(--ink-2) !important; }
  html body :is(.newsletter-home,.newsletter-signup,.band-pine,.learn-newsletter,.qa-newsletter) a:not(.btn) { color: var(--pine-2); }
  html body :is(.newsletter-home,.newsletter-signup,.band-pine,.learn-newsletter,.qa-newsletter) a:not(.btn):hover { color: var(--ink); }
  /* A pale footer removes the last large forest-green block in light mode.
     Explicit child colors prevent the legacy cream-on-dark footer rules from leaking in. */
  .site-footer { --on-pine: var(--ink); background: var(--brand-soft); color: var(--ink); border-top: 1px solid var(--line); }
  .site-footer .foot-brand .serif { color: var(--ink); }
  .site-footer :is(p,.copyright) { color: var(--ink-2); opacity: 1; }
  .site-footer a { color: var(--pine-2); }
  .site-footer a:hover { color: var(--ink); }
  .site-footer .copyright { border-top-color: var(--line); }
  /* Light-oak undertones are decorative room accents, never control or safety colors.
     Keep most surfaces sage/ivory; no texture images or additional network requests. */
  .reading-choice:nth-child(2), .newsletter-card {
    background: var(--wood-soft); border-color: var(--wood-line);
    border-top: 3px solid var(--wood-line);
  }
  .newsletter-card-rule { background: var(--wood-line); }
  .hero-eyebrow, .reading-start > .wrap > .eyebrow { color: var(--wood-ink); }
  html body .newsletter-card .newsletter-card-kicker { color: var(--wood-ink) !important; }
  .seal { background: var(--wood-surface); }
  .site-header { border-bottom-color: var(--wood-line); }
  .site-footer, .site-footer .copyright { border-top-color: var(--wood-line); }
  /* Explicit foreground/background pairs beat inherited link and hover colors. */
  html body .btn.btn-primary,
  html body .btn.btn-amber,
  html body .newsletter-home-copy > .btn-row > .btn-primary,
  html body .learn-newsletter .btn,
  html body .qa-newsletter .btn,
  html body .band-pine .btn.btn-primary {
    background: var(--action-bg); color: var(--action-text); border-color: var(--action-bg);
  }
  html body .btn.btn-primary:is(:hover,:active),
  html body .btn.btn-amber:is(:hover,:active),
  html body .newsletter-home-copy > .btn-row > .btn-primary:is(:hover,:active),
  html body .learn-newsletter .btn:is(:hover,:active),
  html body .qa-newsletter .btn:is(:hover,:active),
  html body .band-pine .btn.btn-primary:is(:hover,:active) {
    background: var(--action-hover); color: var(--action-text); border-color: var(--action-hover);
  }
  html body .btn.btn-ghost,
  html body .btn.btn-light {
    background: var(--secondary-bg); color: var(--secondary-text); border-color: var(--control-line);
  }
  html body .btn.btn-ghost:is(:hover,:active),
  html body .btn.btn-light:is(:hover,:active) {
    background: var(--secondary-hover); color: var(--secondary-text); border-color: var(--control-line);
  }
  html body .nav-links a[aria-current="page"]:not(.btn) {
    background: var(--brand-strong); color: var(--on-accent);
  }
  html body :is(.chips button,.norm-tabs button)[aria-pressed="true"],
  html body .seg input:checked + label,
  html body .qa-subnav a[aria-current="page"] {
    background: var(--brand-strong); color: var(--on-accent); border-color: var(--selection-line);
    box-shadow: inset 0 0 0 2px var(--selection-line);
  }
  html body :is(.result .band,.featured-label,.you-tag,.tag-exp) {
    background: var(--brand-strong); color: var(--on-accent); border-color: var(--selection-line);
  }
  html body .newsletter-card .text-link { color: var(--pine-2); }
  html body .newsletter-card .text-link:hover { color: var(--ink); }
  html body :is(.newsletter-home,.newsletter-signup,.band-pine,.learn-newsletter,.qa-newsletter) :focus-visible { outline-color: var(--focus); }
  html body .result :focus-visible { outline-color: #C8DCCF; }
  html body .site-footer :focus-visible { outline-color: var(--focus); }
  /* Safety/error meaning remains explicit in words; never hide it in a decorative sage tint. */
  .callout { background: var(--safety-surface); border-left-color: var(--safety-line); color: var(--safety-text); }
  .callout p, .callout strong { color: var(--safety-text); }
  .callout a:not(.btn) { color: var(--safety-text); }
  html body .form-error { color: var(--error-text); }
  html body input[aria-invalid="true"] { border-color: var(--error-line); }
  /* Keep the informative low-to-high scale order and its written labels. */
  .scale-bar i:nth-child(1) { background: #B49087; }
  .scale-bar i:nth-child(2) { background: #B9AA94; }
  .scale-bar i:nth-child(3) { background: #C8C5A5; }
  .scale-bar i:nth-child(4) { background: #ABC7B1; }
  .scale-bar i:nth-child(5) { background: #7FA38C; }
  .scale-marker { background: var(--amber); box-shadow: 0 0 0 1px #173A2D; }
  @media (forced-colors: active) {
    html body .btn { border-color: ButtonText; forced-color-adjust: auto; }
    html body :is(.chips button,.norm-tabs button)[aria-pressed="true"],
    html body .seg input:checked + label,
    html body .qa-subnav a[aria-current="page"] { outline: 2px solid Highlight; }
  }
}
/* Equipment photograph only, not a full-posture demonstration. Keep the gauge/handle. */
html body img.grip-measurement-photo {
  object-fit: contain !important; object-position: center !important; background: #E9E9E1;
}
.grip-image-caption { font: 1rem/1.6 var(--sans); color: var(--ink-2); margin: -.75rem 0 1.5rem; }
.grip-image-credit { padding-top: 1rem; margin-bottom: 1.5rem; }
.grip-image-credit p { font: .95rem/1.6 var(--sans); color: var(--ink-2); }
@media print { .grip-image-credit { display: none; } }

/* Editorial finish: understated, not ornamental. Reuse the approved palette/fonts.
   Keep the reading scale, controls, images and assessment feedback unchanged. */
@media screen {
  .brand-name {
    font-size: 1.7rem; font-weight: 500; letter-spacing: .015em; line-height: 1.25;
  }
  :is(.hero,.newsletter-page-hero,.page-head,.article-head) h1 {
    font-family: var(--serif); font-weight: 500; letter-spacing: -.018em;
    line-height: 1.16; text-wrap: balance;
  }
  :is(.section-head,.newsletter-home-copy,.reading-start,.newsletter-card) :is(h2,h3) {
    font-family: var(--serif); font-weight: 500; line-height: 1.25; text-wrap: balance;
  }
  .hero .lede, .newsletter-page-hero .lede { max-width: 48ch; }
  .hero .btn-row, .newsletter-page-hero .btn-row { margin-top: 1.75rem; gap: .9rem; }
  .hero-proof { margin-top: 1.4rem; }
  :is(.hero-eyebrow,.newsletter-card-kicker,.reading-start > .wrap > .eyebrow) {
    letter-spacing: .08em; line-height: 1.6;
  }
  /* A short champagne/oak rule, not a pale text color or a metallic texture. */
  .hero-eyebrow::before {
    content: ""; display: block; width: 2.75rem; max-width: 100%; height: 1px;
    background: var(--wood-line); margin-bottom: 1.15rem;
  }
  .reading-start { padding-block: clamp(2.25rem,4vw,3.5rem); }
  .reading-start h2 { max-width: 30ch; margin-bottom: 1.75rem; }
  .reading-choices { gap: 1.25rem; }
  .reading-choice {
    padding: clamp(1.4rem,2.8vw,2rem); border-radius: 10px; gap: 1rem;
  }
  .reading-choice:nth-child(2), .newsletter-card { border-top-width: 1px; }
  .newsletter-card {
    padding: clamp(1.5rem,3.2vw,2.6rem); border-radius: 10px;
    box-shadow: 0 10px 28px rgba(25,62,52,.045);
  }
  .newsletter-card-rule { margin-block: 1.75rem; }
  /* A fine photo mount uses the existing image and crop, not a new photograph. */
  .hero-photo {
    box-sizing: border-box; padding: clamp(6px,1vw,10px);
    border: 1px solid var(--wood-line); border-radius: 10px;
    background: var(--paper); box-shadow: 0 10px 28px rgba(25,62,52,.045);
  }
  .hero-photo img { border-radius: 4px; }
  .tile { border-radius: 10px; }
  .tile:hover { transform: none; box-shadow: none; }
  html body .btn {
    border-radius: 8px; min-height: 52px; letter-spacing: .01em; box-shadow: none;
  }
  html body .btn:is(:hover,:active) { transform: none; }
  .site-footer .foot-brand .serif { font-weight: 500; letter-spacing: .015em; }
  @media (min-width: 1121px) {
    .nav-links a:not(.btn) { border-radius: 6px; }
  }
  @media (max-width: 600px) {
    .brand-name { font-size: 1.5rem; }
    .hero-eyebrow::before { margin-bottom: .9rem; }
    .hero .btn-row, .newsletter-page-hero .btn-row { margin-top: 1.25rem; }
  }
}