/* Timeless Tales v2 theme for the inner pages (guides, about, disclosure, 404).
   Loads after style.css: swaps the old tokens for the home-v2 palette and fonts,
   and styles the shared v2 header and footer (tt-* classes). */

@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url(../assets/fonts/barlow-condensed-700.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-display: swap; src: url(../assets/fonts/barlow-condensed-800.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-display: swap; src: url(../assets/fonts/atkinson-hyperlegible-400.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-display: swap; src: url(../assets/fonts/atkinson-hyperlegible-700.woff2) format("woff2"); }

:root {
  --paper: #F9EFDC;
  --paper-2: #FFF8EA;
  --paper-3: #F2E0C0;
  --ink: #0F1B33;
  --ink-soft: #3B4761;
  --ink-faint: #4A556E;
  --line: rgba(15, 27, 51, .14);
  --line-strong: rgba(15, 27, 51, .28);
  --gold: #E7AD47;
  --gold-soft: #E7AD47;
  --gold-ink: #7F5208;
  --navy: #14264A;
  --navy-2: #1D3260;
  --panel-ink: #F6EAD0;
  --f-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --f-body: "Atkinson Hyperlegible", system-ui, sans-serif;
  --f-mono: "Atkinson Hyperlegible", system-ui, sans-serif;
  --radius-m: 16px;
  --radius-l: 20px;
  --shadow-card: 0 18px 40px -22px rgba(15, 27, 51, .4);
  --shadow-lift: 0 24px 48px -20px rgba(15, 27, 51, .45);
  --bar: 68px;
}

body { font-size: 1.0625rem; }
body::before { display: none; }
h1, h2, h3, h4 { font-weight: 800; text-transform: uppercase; letter-spacing: .005em; line-height: .95; }
h1 { font-size: clamp(2.8rem, 6.5vw, 5.2rem); }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); }
h4 { font-size: 1.35rem; }
.eyebrow { font-family: var(--f-body); font-weight: 700; letter-spacing: .06em; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

/* Sample banner: navy strip, as on the homepage */
.sample-banner { background: var(--navy); color: var(--panel-ink); font-size: .9rem; }
.sample-banner b { color: var(--gold); }

/* Navy blocks use the v2 cream text */
.method-band, .verdict-scroll { color: var(--panel-ink); }
.method-band h2, .method-band h4 { color: var(--panel-ink); }

/* ---------- Header ---------- */
.tt-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.tt-bar { max-width: 1320px; margin-inline: auto; padding: 0 var(--gutter); height: var(--bar); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.tt-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--f-display); font-weight: 800; font-size: 1.55rem; text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; color: var(--ink); }
.tt-brand img { width: 40px; height: auto; }
.tt-nav { display: flex; gap: clamp(16px, 2.4vw, 34px); }
.tt-nav a { position: relative; padding: 8px 2px; font-weight: 700; color: var(--ink-soft); transition: color .2s; }
.tt-nav a:hover, .tt-nav a[aria-current="page"] { color: var(--ink); }
.tt-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 3px; border-radius: 3px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.tt-nav a:hover::after, .tt-nav a:focus-visible::after, .tt-nav a[aria-current="page"]::after { transform: scaleX(1); }
.tt-btn { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--gold); color: #0F1B33; font-weight: 700; box-shadow: 0 10px 20px -14px rgba(15, 27, 51, .55); transition: transform .35s cubic-bezier(.16,1,.3,1); }
.tt-btn:hover { transform: translateY(-3px); }
@media (max-width: 860px) { .tt-nav { display: none; } }
@media (max-width: 420px) { .tt-brand span { display: none; } }

/* ---------- Footer ---------- */
.tt-footer { border-top: 1px solid var(--line); padding: 40px 0 48px; margin-top: clamp(40px, 6vw, 80px); }
.tt-foot { max-width: 1320px; margin-inline: auto; padding-inline: var(--gutter); display: grid; gap: 20px; justify-items: start; }
.tt-foot nav, .tt-socials { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.tt-foot nav a { font-weight: 700; }
.tt-socials a { color: var(--ink-soft); }
.tt-foot nav a:hover, .tt-socials a:hover { color: var(--gold-ink); }
.tt-foot p { color: var(--ink-soft); font-size: .95rem; max-width: 70ch; }

/* ---------- Offer page (Ecovacs code) ---------- */
.offer-wrap { max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }
.offer-hero { padding: clamp(36px, 6vw, 80px) 0; }
.offer-hero .offer-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.offer-lede { margin-top: 18px; max-width: 46ch; font-size: 1.15rem; color: var(--ink-soft); }
.code-box { margin: 28px 0 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 18px 20px; background: var(--paper-2); border: 3px dashed var(--ink); border-radius: var(--radius-l); max-width: 460px; }
.code-label { width: 100%; font-weight: 700; color: var(--ink-soft); font-size: .95rem; }
.code { font-family: var(--f-display); font-size: clamp(2.4rem, 5vw, 3.2rem); font-weight: 800; letter-spacing: .06em; line-height: 1; }
.code-copy { margin-left: auto; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 2px solid var(--ink); font-weight: 700; }
.code-copy:hover { background: var(--ink); color: var(--paper); }
.tt-btn-lg { min-height: 52px; padding: 0 28px; font-size: 1.05rem; }
.offer-art { background: #FFF9EC; padding: 12px 12px 0; border-radius: var(--radius-l); rotate: 2deg; box-shadow: var(--shadow-lift); }
.offer-art video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; }
.offer-art figcaption { padding: 12px 6px 14px; font-weight: 700; }
.offer-list, .offer-how { padding: clamp(30px, 5vw, 64px) 0; }
.offer-note { margin-top: 12px; color: var(--ink-soft); }
.deals { margin-top: 28px; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; }
.deal { display: grid; grid-template-rows: auto auto 1fr auto auto auto; gap: 10px; padding: 18px; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-card); }
.deal img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 12px; }
.deal h3 { font-size: 1.6rem; margin-top: 4px; }
.deal p { color: var(--ink-soft); font-size: .98rem; }
.deal .deal-price { color: var(--ink); font-weight: 700; }
.deal .deal-price s { color: var(--ink-faint); font-weight: 400; }
.deal .deal-code-price { font-family: var(--f-display); font-size: 2rem; font-weight: 800; color: var(--ink); line-height: 1; }
.deal .deal-code-price span { display: block; font-family: var(--f-body); font-size: .9rem; font-weight: 700; color: var(--gold-ink); margin-top: 4px; }
.deal .tt-btn { margin-top: 6px; }
.steps { margin-top: 22px; display: grid; gap: 14px; counter-reset: s; max-width: 60ch; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; font-size: 1.1rem; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--gold); color: #0F1B33; font-family: var(--f-display); font-weight: 800; font-size: 1.4rem; }
.offer-how .fine { margin-top: 22px; color: var(--ink-soft); font-size: .95rem; }
.offer-how .fine a { text-decoration: underline; }
@media (max-width: 860px) { .offer-hero .offer-wrap { grid-template-columns: 1fr; } .offer-art { rotate: 0deg; } }
.offer-strip { max-width: 1240px; margin: 24px auto 0; padding: 14px 18px 14px 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; background: var(--paper-2); border: 3px dashed var(--ink); border-radius: var(--radius-l); width: calc(100% - 2 * var(--gutter)); }

/* ---------- Kindle guide ---------- */
.answer-box { margin-top: 26px; display: grid; gap: 12px; padding: 22px 24px; background: var(--paper-2); border: 1px solid var(--line-strong); border-radius: var(--radius-m); max-width: 56ch; box-shadow: var(--shadow-card); }
.answer-box a { text-decoration: underline; text-underline-offset: 3px; }
.mine { margin-top: 20px; padding: 24px; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-l); max-width: 70ch; }
.mine-lede { font-size: 1.15rem; font-weight: 700; }
.todo { margin-top: 12px; color: var(--ink-soft); font-style: italic; }
.table-scroll { margin-top: 24px; overflow-x: auto; }
.compare { border-collapse: collapse; width: 100%; min-width: 720px; background: var(--paper-2); border-radius: var(--radius-m); overflow: hidden; }
.compare th, .compare td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.compare thead th { background: var(--navy); color: var(--panel-ink); font-family: var(--f-display); text-transform: uppercase; font-size: 1.1rem; letter-spacing: .02em; }
.compare tbody th { font-weight: 700; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.models { margin-top: 26px; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.model { display: grid; align-content: start; gap: 10px; padding: 22px; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-card); }
.model .owned, .model .pick-tag { justify-self: start; padding: 5px 12px; border-radius: 999px; font-size: .85rem; font-weight: 700; }
.model .owned { background: var(--gold); color: #0F1B33; }
.model .pick-tag { background: transparent; border: 2px solid var(--line-strong); color: var(--ink-soft); }
.model-price { font-family: var(--f-display); font-size: 2.1rem; font-weight: 800; line-height: 1; }
.model-verdict { color: var(--ink-soft); }
.model-specs { display: grid; gap: 6px; margin-top: 4px; font-size: .96rem; color: var(--ink-soft); }
.model-specs b { color: var(--ink); margin-right: 6px; }
.model .tt-btn { justify-self: start; margin-top: 8px; }
.accs { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.acc { display: grid; align-content: start; gap: 10px; padding: 22px; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-l); }
.acc .tt-btn { justify-self: start; }
.qa { margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px 40px; }
.qa h3 { font-size: 1.4rem; }
.qa p { margin-top: 8px; color: var(--ink-soft); max-width: 46ch; }
.model .shot, .acc .shot { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; border-radius: 14px; padding: 10px; }
.guide-card-media .card-shot { width: 100%; height: 100%; object-fit: contain; padding: 18px; background: #fff; }
.offer-art img { display: block; width: 100%; height: auto; border-radius: 12px; }
.mine-shot { margin: 18px 0; }
.mine-shot img { display: block; width: 100%; height: auto; border-radius: var(--radius-m); }
.mine-shot figcaption { margin-top: 10px; font-size: .95rem; color: var(--ink-soft); }

.stars { font-size: .92rem; font-weight: 700; color: var(--gold-ink); }

/* ---------- About page ---------- */
.story { margin-top: 22px; display: grid; gap: 16px; max-width: 62ch; font-size: 1.1rem; }
.story p { color: var(--ink-soft); }
.story p:first-child { color: var(--ink); font-weight: 700; }
.method-band .offer-wrap { padding-block: clamp(40px, 6vw, 72px); }
.method-band .offer-lede { color: color-mix(in srgb, var(--panel-ink) 85%, transparent); }
.rules { margin-top: 26px; display: grid; gap: 16px; counter-reset: r; max-width: 68ch; }
.rules li { counter-increment: r; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 16px; align-items: baseline; color: color-mix(in srgb, var(--panel-ink) 88%, transparent); }
.rules li::before { content: counter(r, decimal-leading-zero); font-family: var(--f-display); font-weight: 800; font-size: 1.8rem; color: var(--gold); line-height: 1; }
.rules b { color: var(--panel-ink); }
.story-note { margin-top: 16px; max-width: 68ch; color: var(--ink-soft); }
.story-note a { text-decoration: underline; text-underline-offset: 3px; }