/* ============================================================
   v3 sample page — /last-minute-christmas-gifts only.
   Cream / deep pine / muted gold. Playfair Display headings.
   Loaded AFTER style.css; every rule scoped to body.v3 so the
   other pages and production are untouched.
   Reference notes: reference-notes.md (Uncommon Goods /
   McGee & Co / Aesop takeaways).
   ============================================================ */
:root{
  --v3-cream:#FAF6EE;
  --v3-card:#FFFDF8;
  --v3-pine:#1F4D3A;
  --v3-pine-deep:#16382A;
  --v3-gold:#A98B4F;
  --v3-gold-soft:#C6AC77;
  --v3-ink:#2E3A33;
  --v3-muted:#5F6E63;
  --v3-line:#E2DAC6;
  --v3-serif:"Playfair Display",Georgia,"Times New Roman",serif;
}

body.v3{
  background:var(--v3-cream);
  color:var(--v3-ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
}
body.v3 .candy{display:none}
body.v3 main{max-width:1060px;padding:64px 24px 8px}
body.v3 .band-inner{max-width:1060px;padding:0 24px}

/* ---------- headline block ---------- */
body.v3 main h1{
  font-family:var(--v3-serif);
  font-weight:500;
  font-size:clamp(38px,5vw,56px);
  line-height:1.14;
  letter-spacing:-.01em;
  color:var(--v3-pine-deep);
  text-align:center;
  max-width:820px;
  margin:0 auto;
  text-wrap:balance;
}
body.v3 main .sub{
  text-align:center;
  font-size:17px;
  line-height:1.65;
  color:var(--v3-muted);
  max-width:560px;
  margin:20px auto 0;
}

/* ---------- date strip → hairline table ---------- */
body.v3 .date-strip{
  background:transparent;
  color:var(--v3-ink);
  border-top:1px solid var(--v3-line);
  border-bottom:1px solid var(--v3-line);
  border-radius:0;
  justify-content:center;
  gap:0;
  padding:22px 0 20px;
  margin:48px auto 0;
  max-width:780px;
}
body.v3 .date-strip .ds-label{
  flex:1 0 100%;
  text-align:center;
  color:var(--v3-gold);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.3em;
  margin-bottom:14px;
}
body.v3 .date-strip span{
  flex:1;
  text-align:center;
  font-size:11px;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--v3-muted);
  padding:2px 8px;
}
body.v3 .date-strip span + span{border-left:1px solid var(--v3-line)}
body.v3 .date-strip strong{
  display:block;
  font-family:var(--v3-serif);
  font-size:30px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  color:var(--v3-pine);
  margin-top:7px;
}

/* ---------- hero photo ---------- */
body.v3 .hero-photo{
  margin:48px 0 0;
  border:0;
  border-bottom:0;
  border-radius:10px;
  box-shadow:0 36px 64px -34px rgba(22,56,42,.35);
}
body.v3 .hero-photo img{aspect-ratio:16/8.4;object-position:center 72%}

/* ---------- gift grid: the photo is the card ---------- */
body.v3 .gift-grid{gap:52px 36px;margin-top:64px}
body.v3 a.gift-card{
  background:transparent;
  border:0;
  border-radius:0;
  overflow:visible;
  box-shadow:none;
}
body.v3 a.gift-card:hover{
  border-color:transparent;
  box-shadow:none;
  transform:none;
}
body.v3 .gift-card img{
  border-radius:8px;
  transition:box-shadow .45s ease;
}
body.v3 a.gift-card:hover img{
  box-shadow:0 26px 46px -24px rgba(22,56,42,.38);
}
body.v3 .gift-card-body{padding:22px 2px 0}
body.v3 .gift-card .gift-name{
  font-family:var(--v3-serif);
  font-size:25px;
  font-weight:600;
  line-height:1.2;
  color:var(--v3-pine-deep);
}
body.v3 .gift-card .gift-cap{
  font-size:15.5px;
  line-height:1.55;
  color:var(--v3-muted);
  margin-top:8px;
}
body.v3 .gift-card .gift-btn{
  display:inline-block;
  background:var(--v3-pine);
  color:var(--v3-cream);
  border:1.5px solid var(--v3-pine);
  border-radius:999px;
  padding:13px 27px;
  margin-top:18px;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
body.v3 a.gift-card:hover .gift-btn{
  background:transparent;
  color:var(--v3-pine);
  border-color:var(--v3-gold);
}
body.v3 .gift-disclosure{
  text-align:center;
  margin-top:46px;
  color:var(--v3-muted);
}

/* ---------- mid photo ---------- */
body.v3 .mid-photo{
  margin:80px 0 0;
  border:0;
  border-radius:10px;
  box-shadow:0 36px 64px -34px rgba(22,56,42,.32);
}
body.v3 .mid-photo img{
  aspect-ratio:16/7.4;
  object-position:center 30%;
}

/* ---------- tail cards ---------- */
body.v3 main .card{
  background:var(--v3-card);
  border:1px solid var(--v3-line);
  border-radius:12px;
  box-shadow:0 14px 30px -26px rgba(22,56,42,.25);
  padding:36px 40px;
  margin-top:22px;
}
body.v3 main .card:first-of-type{margin-top:64px}
body.v3 main .card h2{
  font-family:var(--v3-serif);
  font-size:26px;
  font-weight:600;
  color:var(--v3-pine-deep);
  margin:0 0 10px;
}
body.v3 main .card p{font-size:16px;line-height:1.6;color:var(--v3-muted)}
body.v3 main .card a{
  color:var(--v3-pine);
  text-decoration-color:var(--v3-gold-soft);
  text-underline-offset:3px;
}
body.v3 main .card ul{list-style:none;padding-left:2px !important;line-height:2.05 !important}
body.v3 main .card ul a{
  font-family:var(--v3-serif);
  font-size:19.5px;
  font-weight:500;
  text-decoration:none;
}
body.v3 main .card ul a:hover{color:var(--v3-gold)}

/* ---------- footer ---------- */
body.v3 .footer-band{
  background:transparent;
  border-top:1px solid var(--v3-line);
  margin-top:84px;
  padding:34px 0 46px;
  color:var(--v3-muted);
}
body.v3 .footer-band a{color:var(--v3-pine)}

/* ---------- responsive ---------- */
@media (max-width:760px){
  body.v3 main{padding-top:44px}
  body.v3 .gift-grid{grid-template-columns:1fr;gap:44px;margin-top:48px}
  body.v3 main .card{padding:28px 24px}
  body.v3 .mid-photo img{aspect-ratio:4/3;object-position:center 30%}
}
@media (max-width:480px){
  body.v3 .gift-grid{grid-template-columns:1fr}
  body.v3 .date-strip strong{font-size:24px}
  body.v3 .hero-photo img{aspect-ratio:16/10}
}

/* ============================================================
   v3 full-site rollout (preview only) — index, the three other
   guide pages, privacy, terms. Same system as the sample page:
   cream ground, one pine accent, muted gold detail, Playfair
   Display headings, hairlines instead of boxes. All rules stay
   scoped to body.v3; style.css is untouched.
   ============================================================ */

/* ---------- base ---------- */
body.v3 a{color:var(--v3-pine)}
body.v3 a:hover{color:var(--v3-gold)}
body.v3 a:focus-visible,body.v3 button:focus-visible,
body.v3 select:focus-visible,body.v3 input:focus-visible{
  outline:3px solid rgba(169,139,79,.55);outline-offset:2px;
}
body.v3 .foot{color:var(--v3-muted)}
body.v3 h2{
  font-family:var(--v3-serif);font-weight:600;
  color:var(--v3-pine-deep);letter-spacing:0;
}

/* ---------- homepage hero: cream editorial header ---------- */
body.v3 .hero{
  background:var(--v3-cream);
  color:var(--v3-ink);
  border-bottom:1px solid var(--v3-line);
}
body.v3[data-holiday="valentine"] .hero,
body.v3[data-holiday="mothers"] .hero,
body.v3[data-holiday="fathers"] .hero{background:var(--v3-cream);border-bottom-color:var(--v3-line)}
body.v3 .hero-inner{max-width:1060px;padding:56px 24px 48px}
body.v3 .hero h1{
  font-family:var(--v3-serif);font-weight:500;
  font-size:clamp(40px,5.6vw,58px);line-height:1.12;letter-spacing:-.01em;
  color:var(--v3-pine-deep);margin:0 0 14px;
}
body.v3 .hero .sub{color:var(--v3-muted);font-size:18px}
body.v3 .hero-snow svg g{stroke:var(--v3-gold-soft)}
body.v3 .hero-snow svg circle{fill:var(--v3-gold-soft);stroke:none}
body.v3 .countdown .big{
  font-family:var(--v3-serif);font-weight:600;
  color:var(--v3-pine);letter-spacing:-.01em;
}
body.v3 .countdown p,
body.v3[data-holiday="valentine"] .countdown p,
body.v3[data-holiday="mothers"] .countdown p,
body.v3[data-holiday="fathers"] .countdown p{color:var(--v3-gold)}

/* hero illustration recoloured to the pine / gold / cream palette */
body.v3 .hero-art [fill="#FFFFFF"]{fill:var(--v3-gold-soft)}
body.v3 .hero-art [fill="#000"]{fill:var(--v3-pine-deep)}
body.v3 .hero-art [stroke="#FFFFFF"]{stroke:var(--v3-gold-soft)}
body.v3 .hero-art [stroke="#8FB4DD"]{stroke:var(--v3-gold-soft)}
body.v3 .hero-art [fill="#8FB4DD"]{fill:var(--v3-gold-soft)}
body.v3 .hero-art [fill="#F2F5F9"]{fill:#FFFDF8}
body.v3 .hero-art [fill="#DCE8F6"]{fill:#E9E1CB}
body.v3 .hero-art [stroke="#0A1F44"]{stroke:var(--v3-pine-deep)}
body.v3 .hero-art [fill="#D22630"]{fill:var(--v3-gold)}
body.v3 .hero-art [fill="#E85D75"]{fill:#B76E5A}
body.v3 .hero-art [fill="#F5A8BC"]{fill:#D9A08C}
body.v3 .hero-art [fill="#E8A0BF"]{fill:#C99A6B}
body.v3 .hero-art [fill="#D8B8E8"]{fill:var(--v3-gold-soft)}
body.v3 #art-fathers [fill="#8FB4DD"]{fill:#5F7A6A}

/* holiday switch chips */
body.v3 button.hol-chip{
  background:transparent;color:var(--v3-pine);
  border:1.5px solid var(--v3-gold-soft);border-radius:999px;
  padding:9px 16px;font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;box-shadow:none;
}
body.v3 button.hol-chip:hover{background:transparent;border-color:var(--v3-gold);transform:none}
body.v3 button.hol-chip.active{background:var(--v3-pine);color:var(--v3-cream);border-color:var(--v3-pine)}

/* ---------- honesty banner ---------- */
body.v3 .banner{
  background:var(--v3-card);border:1px solid var(--v3-line);
  border-left:3px solid var(--v3-gold);border-radius:12px;
  box-shadow:0 14px 30px -26px rgba(22,56,42,.25);color:var(--v3-ink);
}
body.v3 .banner strong{color:var(--v3-pine)}

/* ---------- generic cards on index / legal pages ---------- */
body.v3 main .card,body.v3 .band .card{
  background:var(--v3-card);border:1px solid var(--v3-line);
  border-radius:12px;box-shadow:0 14px 30px -26px rgba(22,56,42,.25);
}
/* keep the index link lists out of the sample page's serif list style */
body.v3 main .card ul.links{padding-left:0 !important;line-height:1.55 !important}
body.v3 main .card ul.links a{font-family:inherit;font-size:inherit;font-weight:600}

/* ---------- checker form ---------- */
body.v3 .field{
  background:#FFFDF8;border:1px solid var(--v3-line);border-radius:12px;
}
body.v3 .field-ic{background:var(--v3-pine);color:var(--v3-cream);border-radius:9px}
body.v3 .field-body label{color:var(--v3-muted)}
body.v3 .field-step{
  font-family:var(--v3-serif);font-weight:600;color:var(--v3-gold);
}
body.v3 select,body.v3 input{
  border:1.5px solid #D9D0B9;border-radius:10px;background-color:#fff;color:var(--v3-ink);
}
body.v3 select:hover,body.v3 input:hover{border-color:var(--v3-gold-soft)}
body.v3 .hint{color:var(--v3-muted)}
body.v3 button#check,body.v3 .picker button{
  background:var(--v3-pine);color:var(--v3-cream);
  border:1.5px solid var(--v3-pine);border-radius:999px;box-shadow:none;
  font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  padding:17px 16px;
}
body.v3 button#check:hover,body.v3 .picker button:hover{
  background:var(--v3-pine-deep);border-color:var(--v3-gold);transform:none;
}

/* ---------- result ---------- */
body.v3 #result{border-top:3px solid var(--v3-gold-soft)}
body.v3 #result.is-late{border-top-color:#B76E5A}
body.v3 #result-head{color:var(--v3-gold);letter-spacing:.22em}
body.v3 #result .cutoff{
  font-family:var(--v3-serif);font-weight:600;font-size:34px;
  color:var(--v3-pine-deep);letter-spacing:0;line-height:1.25;
}
body.v3 #result .ok{background:rgba(31,77,58,.09);color:var(--v3-pine)}
body.v3 #result .late{background:#F6E9E0;color:#9A4A2B}
body.v3 .tl-track{background:#EAE2CC}
body.v3 .tl-fill{background:linear-gradient(90deg,var(--v3-gold-soft),var(--v3-pine))}
body.v3 .tl-dot{border-color:var(--v3-pine);background:var(--v3-cream);box-shadow:none}
body.v3 .tl-dot-xmas{border-color:var(--v3-pine);background:var(--v3-pine)}
body.v3 .tl-dot-cutoff{background:var(--v3-gold);border-color:#FFFDF8}
body.v3 .tl-dot-cutoff.passed{background:#B76E5A;border-color:#B76E5A}
body.v3 .tl-labels{color:var(--v3-muted)}
body.v3 .tl-lab-today,body.v3 .tl-lab-cutoff,body.v3 .tl-lab-xmas{color:var(--v3-ink)}
body.v3 .alt{background:#FBF7EC;border:1px solid var(--v3-line);border-radius:12px}
body.v3 .alt-card{background:#FFFDF8;border:1px solid var(--v3-line);border-radius:10px}
body.v3 .alt-ic{background:rgba(31,77,58,.09);color:var(--v3-pine);border-radius:8px}
body.v3 .verify a{color:var(--v3-pine)}
body.v3 .result-card .disclaimer{border-top:1px solid var(--v3-line);color:var(--v3-muted)}

/* ---------- shop buttons & gift links ---------- */
body.v3 a.btn-shop{
  background:var(--v3-pine);color:var(--v3-cream);
  border:1.5px solid var(--v3-pine);border-radius:999px;box-shadow:none;
  font-size:14px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:16px 20px;
}
body.v3 a.btn-shop:hover{background:var(--v3-pine-deep);color:var(--v3-cream);border-color:var(--v3-gold);transform:none}
body.v3 a.btn-shop-sm{padding:12px 14px;font-size:12.5px}
body.v3 .shop-tag{
  border:1px solid var(--v3-line);color:var(--v3-muted);background:transparent;
}
body.v3 .shop-disclosure{color:var(--v3-muted)}
body.v3 .gift-ideas{border-top:1px solid var(--v3-line)}
body.v3 .gift-title{
  font-family:var(--v3-serif);font-size:21px;font-weight:600;color:var(--v3-pine-deep);
}
body.v3 a.gift-link{
  border:1.5px solid var(--v3-gold-soft);background:transparent;color:var(--v3-pine);
}
body.v3 a.gift-link:hover{background:#FFFDF8;border-color:var(--v3-gold);color:var(--v3-pine)}

/* ---------- bands, table, link lists ---------- */
body.v3 .band-white,body.v3 .band-cream{background:transparent}
body.v3 th{color:var(--v3-muted)}
body.v3 th,body.v3 td{border-bottom:1px solid var(--v3-line)}
body.v3 tbody tr:nth-child(even) td{background:#FBF8F0}
body.v3 td.date-cell{color:var(--v3-pine-deep)}
body.v3 .cbadge{
  background:transparent;color:var(--v3-pine);
  border:1px solid var(--v3-gold-soft);font-weight:700;letter-spacing:.06em;
}
body.v3 .links a{
  background:#FFFDF8;border:1px solid var(--v3-line);color:var(--v3-ink);border-radius:12px;
}
body.v3 .links a:hover{border-color:var(--v3-gold);box-shadow:0 14px 26px -22px rgba(22,56,42,.35);color:var(--v3-ink)}
body.v3 .link-badge{
  background:var(--v3-pine);color:var(--v3-cream);border-radius:9px;
  font-family:var(--v3-serif);font-weight:600;
}

/* ---------- guide pages: date cards ---------- */
body.v3 .date-group-title{color:var(--v3-gold);letter-spacing:.26em;font-weight:700}
body.v3 .date-card{
  background:var(--v3-card);border:1px solid var(--v3-line);
  border-top:3px solid var(--v3-gold-soft);border-radius:12px;
  box-shadow:0 14px 30px -26px rgba(22,56,42,.25);
}
body.v3 .date-card .big-date{
  font-family:var(--v3-serif);font-weight:600;color:var(--v3-pine-deep);letter-spacing:0;
}
body.v3 .date-card .big-date em{color:var(--v3-gold)}
body.v3 .date-card .note{color:var(--v3-muted)}

/* ---------- responsive ---------- */
@media (max-width:820px){
  body.v3 .hero-inner{padding:44px 20px 36px}
}
@media (max-width:480px){
  body.v3 #result .cutoff{font-size:27px}
}

/* legal pages: quiet in-main footer follows the system */
body.v3 main > footer{
  border-top:1px solid var(--v3-line);
  margin-top:56px;padding:26px 0 40px;
  color:var(--v3-muted);font-size:13.5px;
}

/* fixes after first full-site QA pass:
   - the sample section's `main .card a` link colour outranks the
     shop-button rule, which hid the button label on pine; restate
     it at higher specificity.
   - the hero envelope's stamp uses a red stroke, not a fill. */
body.v3 main .card a.btn-shop,
body.v3 main .card a.btn-shop:hover{color:var(--v3-cream)}
body.v3 .hero-art [stroke="#D22630"]{stroke:var(--v3-gold)}

/* ---------- homepage: banner + guide cards (2026-10-30) ----------
   Sits directly under the checker. Banner first (one wide photo,
   one anxious headline, one button), three guide cards below it. */
body.v3 .home-cta-band{padding:26px 0 10px}
body.v3 a.cta-banner{
  position:relative;display:block;border-radius:12px;overflow:hidden;
  text-decoration:none;
  box-shadow:0 36px 64px -34px rgba(22,56,42,.4);
}
body.v3 .cta-banner img{
  display:block;width:100%;height:auto;aspect-ratio:16/6.4;object-fit:cover;
  object-position:center 68%;
}
body.v3 .cta-banner-shade{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(18,43,32,.82) 0%,rgba(18,43,32,.55) 46%,rgba(18,43,32,.05) 78%);
}
body.v3 .cta-banner-text{
  position:absolute;left:0;top:0;bottom:0;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  max-width:600px;padding:36px 44px;
}
body.v3 .cta-kicker{
  color:var(--v3-gold-soft);font-size:12px;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;
}
body.v3 .cta-title{
  font-family:var(--v3-serif);font-size:36px;font-weight:600;line-height:1.18;
  color:var(--v3-cream);margin-top:12px;
}
body.v3 .cta-sub{
  font-size:15.5px;line-height:1.55;color:rgba(250,246,238,.85);margin-top:12px;
}
body.v3 .cta-btn{
  display:inline-block;background:var(--v3-gold);color:var(--v3-pine-deep);
  border:1.5px solid var(--v3-gold);border-radius:999px;
  padding:13px 28px;margin-top:22px;
  font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  transition:background .25s ease,color .25s ease;
}
body.v3 a.cta-banner:hover .cta-btn{background:transparent;color:var(--v3-cream)}
body.v3 .guide-cards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:52px;
}
body.v3 a.guide-card{display:block;text-decoration:none}
body.v3 .guide-card img{
  display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:8px;transition:box-shadow .45s ease;
}
body.v3 a.guide-card:hover img{box-shadow:0 26px 46px -24px rgba(22,56,42,.38)}
body.v3 .guide-card-body{display:block;padding:18px 2px 0}
body.v3 .guide-card-title{
  display:block;font-family:var(--v3-serif);font-size:21.5px;font-weight:600;
  line-height:1.25;color:var(--v3-pine-deep);
}
body.v3 .guide-card-sub{
  display:block;font-size:14.5px;line-height:1.5;color:var(--v3-muted);margin-top:6px;
}
body.v3 .guide-card-link{
  display:inline-block;margin-top:10px;font-size:11.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--v3-pine);
}
body.v3 a.guide-card:hover .guide-card-link{color:var(--v3-gold)}
@media (max-width:760px){
  body.v3 .cta-banner img{aspect-ratio:4/3.4;object-position:center 60%}
  body.v3 .cta-banner-shade{background:linear-gradient(180deg,rgba(18,43,32,.28) 0%,rgba(18,43,32,.86) 62%)}
  body.v3 .cta-banner-text{top:auto;max-width:none;padding:26px 24px;justify-content:flex-end}
  body.v3 .cta-title{font-size:27px}
  body.v3 .guide-cards{grid-template-columns:1fr;gap:40px;margin-top:44px}
}

/* ---------- teardown additions (2026-10-30): top nav, banner
   fact line, card arrival microcopy ---------- */
body.v3 .top-nav{border-bottom:1px solid var(--v3-line)}
body.v3 .top-nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px 28px;flex-wrap:wrap;padding-top:15px;padding-bottom:15px;
}
body.v3 .top-nav-brand{
  font-family:var(--v3-serif);font-size:20px;font-weight:600;
  color:var(--v3-pine-deep);text-decoration:none;white-space:nowrap;
}
body.v3 .top-nav-links{display:flex;gap:12px 26px;flex-wrap:wrap}
body.v3 .top-nav-links a{
  font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--v3-pine);text-decoration:none;
}
body.v3 .top-nav-links a:hover{color:var(--v3-gold)}
body.v3 .cta-fact{
  display:block;margin-top:20px;padding-top:15px;
  border-top:1px solid rgba(250,246,238,.35);
  font-size:15px;font-weight:600;color:#F3E9CF;
}
body.v3 .gift-card .gift-ship{
  display:block;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--v3-gold);margin-top:10px;
}
@media (max-width:760px){
  body.v3 .top-nav-inner{flex-direction:column;align-items:flex-start}
}
