/*------------------------------------------
EVERWARDROBE — COMPLETE STYLESHEET
Project: EverWardrobe Style Persona Quiz & Results
Author: Fasika Kelile
Date Created: December 2024
Version: 1.0
Description: Comprehensive CSS for quiz page, persona result pages, and footer
Contains: Reset, typography, layout, responsive design, accessibility
---------------------------------------------*/

/* Font Imports */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;900&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/*------------------------------------------
CSS RESET BEGINS
Reference: http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126 | License: none (public domain)
---------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  display: block;
}

/*------------------------------------------
CSS RESET END
---------------------------------------------*/

/* =========================
   GLOBAL UTILITIES
   ========================= */
[hidden] {
  display: none !important;
}

/* =========================
   PAGE-SCOPED TOKENS & ROOT
   ========================= */
html:has(body#quiz-page){
  --ink:#482B17;
  --sub:#4a4038;

  --bg-1:#FFF7F0;
  --bg-2:#FDF1E7;

  --hero-dot:#EADFD5;

  --outer-bg:#F7DDBA;
  --inner-bg:#F3E6C8;
  --inner-sel:#ECB378;
  --tile-border:#E6D7C7;
  --burnt:#D86235;

  --badge-muted:#E8D8C6;
  --badge-muted-b:#D6C4B1;

  --track:#3E362E;
  --stroke:#EADFD5;

  --brown:#3F2E23;
  --wrap: min(100%, 1240px);
  --shadow-1:0 6px 18px rgba(0,0,0,.08);
  --shadow-2:0 16px 40px rgba(0,0,0,.12);

  --header-h: 68px;

  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--header-h) + 14px);
}
@media (min-width:1030px){
  html:has(body#quiz-page){ --header-h:76px; }
}

/* Reduced-motion: remove animation/hover lift/smooth scroll */
@media (prefers-reduced-motion: reduce){
  html:has(body#quiz-page){ scroll-behavior:auto; }
  #quiz-page *{
    animation: none !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }
  #quiz-page .options > label > .tile:hover{ transform:none; box-shadow: var(--shadow-1); }
}

/* =============
   PAGE DEFAULTS
   ============= */
#quiz-page,
#quiz-page *{ box-sizing:border-box; }

#quiz-page{
  margin:0; color:var(--ink);
  font-family:"Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:17px; line-height:1.65;
  background:linear-gradient(180deg,var(--bg-1),var(--bg-2));
}
#quiz-page h1,
#quiz-page h2{ font-family:"Playfair Display",serif; font-weight:700; margin:.2em 0; }
#quiz-page header,
#quiz-page main,
#quiz-page section,
#quiz-page figure{ width:100%; }
#quiz-page a{ color:inherit; text-decoration:none; }

/* Focus ring (scoped) */
#quiz-page :where(a,button,[role="button"],input,select,textarea):focus-visible{
  outline:2px solid color-mix(in oklab, var(--burnt), black 10%);
  outline-offset:2px; border-radius:10px;
}

/* Shared wrappers */
#quiz-page header > div,
#quiz-page main > section,
#quiz-page .quiz-wrap,
#site-footer .container {               /* keep footer width aligned */
  width:var(--wrap);
  margin-inline:auto;
  padding-inline:clamp(14px,5vw,28px);
}

/* ===============
   SITE FOOTER (page-level)
   =============== */
#site-footer {
  background:#FFFAF6;
  border-top:1px solid #EFE5DC;
  color:#482B17;
}
#site-footer .container{
  display:flex;
  align-items:center;
  justify-content:center;
  padding-block:18px;
  text-align:center;
  font-weight:600;
}

/* =========
   INTRO HERO
   ========= */
#quiz-page main{ padding-block:22px 28px; }

#quiz-page .hero{
  min-height: calc(100svh - var(--header-h));
  display:flex; flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:36px;
}

#quiz-page .hero-copy{
  text-align:center;
  max-width: 860px;
  margin-inline:auto;
  padding-inline:2px;
  inline-size:100%;
  max-inline-size:min(860px,100%);
}

#quiz-page .hero-copy h1{
  font-size: clamp(40px, 7.5vw, 104px);
  line-height:.95;
  letter-spacing:-0.02em;
  margin:.6rem 0 1.3rem;
  text-wrap: balance;
  overflow-wrap:anywhere;
}

@media (max-width:360px){
  #quiz-page .hero{ gap:24px; }
}

#quiz-page .hero-copy .tagline{
  color:var(--burnt);
  font-weight:800;
  margin:.3rem 0 1rem;
  font-size: clamp(1.1rem, 1.6vw, 1.75rem);
}

#quiz-page .hero-copy .lead{
  color:#482B17; line-height:1.8;
  font-size: clamp(1rem, 1.05vw, 1.22rem);
  max-width:62ch; margin-inline:auto; margin-bottom:1.4rem;
  text-wrap: pretty;
  overflow-wrap:anywhere;
  word-break: break-word;
  hyphens: auto;
}

#quiz-page .cta-row{ display:flex; justify-content:center; gap:1.3rem; margin:1.2rem 0 1.7rem; }
#quiz-page .btn{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:22px;
  padding:.95rem 1.6rem; font-weight:800; font-size:clamp(1rem, 1vw, 1.1rem);
  border:1px solid #E5DAD0; box-shadow:0 8px 18px rgba(0,0,0,.14);
  transition: all 0.2s ease;
  cursor: pointer;
}
#quiz-page .btn.primary{ 
  background: #EF923F;
  color: #fff; 
  border-color: #EF923F;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
#quiz-page .btn.primary:hover {
  background: #D97929;
  border-color: #D97929;
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(239, 146, 63, 0.35);
}
#quiz-page .btn.primary:active {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(239, 146, 63, 0.25);
}
#quiz-page .btn.dark{ background:#2B1D15; color:#fff; border-color: #2B1D15; }
#quiz-page .btn.dark:hover {
  background: #482B17;
  border-color: #482B17;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(72, 43, 23, 0.3);
}
#quiz-page .btn.dark:active {
  transform: translateY(0);
  box-shadow: 0 6px 12px rgba(72, 43, 23, 0.2);
}

/* Facts (pills) */
#quiz-page .facts{
  list-style:none; padding:0; margin:1.4rem auto 0;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
  max-width: 900px;
}
#quiz-page .facts li{
  background:#fff; border:1px solid var(--stroke); border-radius: 10rem;
  padding:clamp(1rem, 1.2vw, 1.35rem);
  box-shadow:var(--shadow-1);
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  text-align:center;
}
#quiz-page .facts li strong{
  font-weight:800;
  font-size: clamp(1rem, 1.15vw, 1.2rem);
}
#quiz-page .facts li span{
  color:#482B17;
  font-size: clamp(.95rem, 1.05vw, 1.08rem);
}
@media (min-width:880px){
  #quiz-page .facts{ max-width: 1080px; gap:18px; }
  #quiz-page .facts li span br{ display:none; }
}

/* Hero visual card */
#quiz-page .hero-card{
  margin:0;
  align-self:center;
  max-width:96vw;
}
#quiz-page .hero-card figcaption{
  text-align:center;
  font-family:"Playfair Display",serif; font-weight:800; color:var(--burnt);
  font-size:clamp(20px, 2.4vw, 28px);
  border-bottom:2px dotted var(--hero-dot);
  padding-bottom:6px; margin:4px 8px 12px;
}
#quiz-page .hero-card figcaption em{ 
    font-style:normal; 
    opacity:.9; 
    margin-left:.35rem; }
#quiz-page .hero-card img{
  width:100%; height:auto; /*aspect-ratio:4/5*/; 
  display:block; 
  border-radius:22px; 
  background:#fff;
  border:1px dashed #E5D7C9; 
  object-fit:cover;
  object-position:center;
  box-shadow: var(--shadow-2);
}
#quiz-page .hero-card .card-foot{
  text-align:center; 
  color:var(--burnt); 
  font-weight:800; 
  margin:.9rem 0 .3rem;
}

/* Desktop intro layout */
@media (min-width:1030px){
  #quiz-page .hero{
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(40px, 6vw, 100px);
  }
  #quiz-page .hero-copy{
    flex: 1 1 clamp(560px, 58%, 760px);
    max-width: none;
  }
  #quiz-page .hero-card{
    flex: 0 1 clamp(400px, 42%, 600px);
    max-width: none;
  }
  #quiz-page .hero-card img{
    max-width: 100%;
    margin-inline: auto;
  }
}

/* =========================
   QUIZ SECTIONS (scoped)
   ========================= */
#quiz-page .quiz-section{
  display:none;
  width:100%;
  min-height:calc(100svh - var(--header-h));
  padding-block: clamp(24px, 6vh, 56px);
}
#quiz-page .quiz-section:target{
  display:grid;
  place-items:center;
}
#quiz-page .quiz-section:target .quiz-wrap{
  animation: flipIn .44s cubic-bezier(.19,.8,.25,1) both;
}
@keyframes flipIn{
  from{opacity:0; transform: rotateY(-7deg) translateY(6px);}
  to{opacity:1; transform: rotateY(0) translateY(0);}
}
#quiz-page:has(.quiz-section:target) #intro{ display:none; }

/* Quiz inner */
#quiz-page .quiz-wrap{
  width:var(--wrap);
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:clamp(14px, 3vh, 24px);
}

/* Top row */
#quiz-page .quiz-top{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px; width:100%;
}
#quiz-page .quiz-top .quiz-title{
  display:flex; flex-direction:column; align-items:flex-start;
}
#quiz-page .quiz-title h2{
  font-family:"Playfair Display",serif;
  font-size: clamp(26px, 6vw, 42px);
  line-height:1.15; margin:0 0 6px; text-align:left;
}
#quiz-page .note{
  color:var(--burnt); font-weight:600;
  margin-top:1.2rem; text-align:left; font-size: clamp(1rem, 1.90vw, 1.4rem);
}
#quiz-page .step{
  font-weight:800; color:var(--burnt); white-space:nowrap; display:none;
}
@media (min-width:1030px){
  #quiz-page .step{ display:block; }
}

/* Stage */
#quiz-page .quiz-stage{ 
    display:block; width:100%; 
}

/* =========================
   OPTIONS GRID — base
   ========================= */
#quiz-page .options{
  display:grid; grid-template-columns:1fr; gap:18px; align-content:start;
}
@media (min-width:600px){
  #quiz-page .options{ grid-template-columns:1fr 1fr; gap:20px; }
}
@media (min-width:1320px){
  #quiz-page .quiz-section .quiz-wrap{ width: min(1560px, 100vw); }
  #quiz-page .options{ grid-template-columns: repeat(4, minmax(300px, 1fr)); gap: 28px; }
}
@media (min-width:1440px){
  #quiz-page .quiz-section .quiz-wrap{ width: min(1640px, 98vw); }
  #quiz-page .options{ grid-template-columns: repeat(4, minmax(320px, 1fr)); gap: 32px; }
}

/* =========================
   OPTIONS GRID — variants
   (column steering)
   ========================= */

/* grid-4: mirrors base (2 cols ≥600px, 4 cols ≥1320px) */

/* grid-3: 1 → 2 → 3 cols */
#quiz-page .quiz-section--grid-3 .options{ grid-template-columns:1fr; }
@media (min-width:600px){
  #quiz-page .quiz-section--grid-3 .options{ grid-template-columns:1fr 1fr; }
}
@media (min-width:1030px){
  #quiz-page .quiz-section--grid-3 .options{ grid-template-columns:repeat(3, 1fr); }
}

/* grid-5: 1 → 2 → 3 → 5 cols */
#quiz-page .quiz-section--grid-5 .options{ grid-template-columns:1fr; }
@media (min-width:600px){
  #quiz-page .quiz-section--grid-5 .options{ grid-template-columns:1fr 1fr; }
}
@media (min-width:1030px){
  #quiz-page .quiz-section--grid-5 .options{ grid-template-columns:repeat(3, 1fr); }
}
@media (min-width:1440px){
  #quiz-page .quiz-section--grid-5 .options{ grid-template-columns:repeat(5, minmax(220px, 1fr)); }
}

/* grid-2x3 (gallery): 1 → 2 → 3 cols */
#quiz-page .quiz-section--grid-2x3 .options{ grid-template-columns:1fr; }
@media (min-width:600px){
  #quiz-page .quiz-section--grid-2x3 .options{ grid-template-columns:1fr 1fr; }
}
@media (min-width:1030px){
  #quiz-page .quiz-section--grid-2x3 .options{ grid-template-columns:repeat(3, 1fr); }
}

/* list: single-column stacked */
#quiz-page .quiz-section--list .options{
  grid-template-columns:1fr; gap:12px;
}

/* Each option card */
#quiz-page .options > label{
  display:grid; grid-template-rows: auto auto; gap:12px; cursor:pointer;
  background:var(--outer-bg);
  border-radius:22px;
  padding:14px;
}
@media (min-width:1030px){
  #quiz-page .options > label{ padding:22px; border-radius:26px; }
}

/* Checkbox/radio hidden but focusable; move focus ring to tile */
#quiz-page .options > label > input[type="checkbox"],
#quiz-page .options > label > input[type="radio"]{
  position:absolute; opacity:0; pointer-events:none;
}
#quiz-page .options > label:has(> input[type="checkbox"]:focus-visible),
#quiz-page .options > label:has(> input[type="radio"]:focus-visible){
  /* keep tile highlight for a11y */
}
#quiz-page .options > label:has(> input[type="checkbox"]:focus-visible) > .tile,
#quiz-page .options > label:has(> input[type="radio"]:focus-visible) > .tile{
  outline:3px solid color-mix(in oklab, var(--burnt), black 10%);
  outline-offset:3px;
}

/* Image tile wrapper */
#quiz-page .options > label > .tile{
  position:relative;
  background:var(--inner-bg);
  border:3px solid var(--tile-border);
  border-radius:18px;
  padding:12px;

  box-shadow: var(--shadow-1);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
#quiz-page .options > label > .tile:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}
@media (min-width:1030px){
  #quiz-page .options > label > .tile{ padding:18px; border-radius:24px; }
}

/* Image in tile */
#quiz-page .options > label > .tile > img{
  width: 100%;
  height: 300px;
  /*aspect-ratio:3/4; */
  object-fit: contain;
  display:block;
  border-radius:14px;
  background:#988372;
  border:1px dashed #E5D7C9;
  box-shadow: 0 0 0 10px #fff;
}

/* q6 base*/
img[src*="base-outfit-1.jpg"] {
    border-radius: 12px;
  }
@media (min-width:1030px){
  #quiz-page .options > label > .tile > img{ border-radius:18px; box-shadow:0 0 0 14px #fff; }
}

/* Badge overlay */
#quiz-page .options > label > .tile > .badge{
  position:absolute; top:12px; right:12px;
  width:28px; height:28px; border-radius:50%;
  background:var(--badge-muted); border:1.5px solid var(--badge-muted-b);
  display:grid; place-items:center;
}
#quiz-page .options > label > .tile > .badge::before{
  content:"+"; font-weight:800; color:#8D7A69; font-size:17px; line-height:1;
}

/* Selected states */
#quiz-page .options > label:has(> input[type="checkbox"]:checked) > .tile,
#quiz-page .options > label:has(> input[type="radio"]:checked) > .tile{
  background:var(--inner-sel);
  border-color:var(--burnt);
  box-shadow: 0 12px 24px rgba(216,98,53,.18);
}
#quiz-page .options > label:has(> input[type="checkbox"]:checked) > .tile > .badge,
#quiz-page .options > label:has(> input[type="radio"]:checked) > .tile > .badge{
  background: var(--burnt);
  border-color: color-mix(in oklab, var(--burnt), black 10%);
}
#quiz-page .options > label:has(> input[type="checkbox"]:checked) > .tile > .badge::before,
#quiz-page .options > label:has(> input[type="radio"]:checked) > .tile > .badge::before{
  content:"✓"; color:#fff;
}

/* Label pill under image (last span) */
#quiz-page .options > label > span:last-child{
  display:flex; align-items:center; justify-content:center;
  min-height:60px;
  padding: 12px 16px;
  text-align:center; line-height:1.25;
  border:2px solid #D7C6B6; background:#F2E6D9; color:#482B17;
  border-radius:16px; font-weight:800;
  transition: background .18s, border-color .18s, color .18s, box-shadow .18s;
}
@media (min-width:1030px){
  #quiz-page .options > label > span:last-child{
    min-height:72px;
    border-radius:20px;
    font-size: clamp(1rem, 1.15vw, 1.25rem);
  }
}
#quiz-page .options > label:has(> input[type="checkbox"]:checked) > span:last-child,
#quiz-page .options > label:has(> input[type="radio"]:checked) > span:last-child{
  background:var(--burnt); color:#fff;
  border-color: color-mix(in oklab, var(--burnt), black 10%);
  box-shadow: 0 6px 14px rgba(216,98,53,.26);
}

/* =========================
   STICKY FOOTER
   ========================= */
#quiz-page .quiz-bottom{
  position: sticky; bottom: 0;
  display:flex; flex-direction:column; gap:14px;
  padding: 14px 0;
  width:100%;
  background: linear-gradient(
    180deg,
    rgba(253,241,231,0) 0%,
    rgba(253,241,231,.85) 24%,
    rgba(253,241,231,1) 70%
  );
  backdrop-filter: saturate(120%) blur(2px);
  border-top:1px solid #efdcca;
  border-radius: 10px 10px 0 0;
}

/* =========================
   PROGRESS (5 sections with partial fill)
   ========================= */
#quiz-page .progress{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  width:100%;
}
#quiz-page .progress-label{
  color:#482B17;
  font-weight:800;
}
#quiz-page .progress-dots{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:14px;
  width:100%;
  max-width:560px;
  padding-inline:8px;
}
#quiz-page .progress-dots .dot{
  flex:1 1 0;
  height:8px;
  border-radius:8px;
  background:var(--track);
}
#quiz-page .progress-dots .dot.is-complete{
  background:var(--burnt);
}
#quiz-page .progress-dots .dot.is-current{
  background:
    linear-gradient(
      90deg,
      var(--burnt) var(--fill, 0%),
      var(--track) var(--fill, 0%)
    );
}
#quiz-page .progress-dots .dot.is-current[aria-current="step"]{ outline:0; }
@media (prefers-reduced-motion: no-preference){
  #quiz-page .progress-dots .dot,
  #quiz-page .progress-dots .dot.is-complete,
  #quiz-page .progress-dots .dot.is-current{
    transition: background .25s ease;
  }
}

/* =========================
   NAV BUTTONS
   ========================= */
#quiz-page .nav-buttons{ display:flex; justify-content:center; gap:14px; }
#quiz-page .chip{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:18px; padding:1rem 1.4rem; font-weight:800; font-size:1.05rem;
  border:1px solid #E5DAD0; background:#fff; color:var(--ink);
  box-shadow: 0 10px 22px rgba(0,0,0,.14);
  transition: all 0.2s ease;
  cursor: pointer;
}
#quiz-page .chip:hover {
  background: #F8F6F3;
  border-color: #482B17;
  color: #482B17;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.16);
}
#quiz-page .chip:active {
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}
#quiz-page .chip.dark{
  background:var(--brown); color:#fff; border-color:var(--brown);
  box-shadow: 0 12px 26px rgba(63,46,35,.28);
}
#quiz-page .chip.dark:hover {
  background: #482B17;
  border-color: #482B17;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(72, 43, 23, 0.35);
}
#quiz-page .chip.dark:active {
  transform: translateY(0);
  box-shadow: 0 8px 16px rgba(72, 43, 23, 0.25);
}
#quiz-page .chip.primary{
  background:var(--burnt); color:#fff;
  border-color: color-mix(in oklab, var(--burnt), black 10%);
  box-shadow: 0 12px 26px rgba(216,98,53,.30);
}
#quiz-page .chip.primary:hover {
  background: #C24E2A;
  border-color: #C24E2A;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(194, 78, 42, 0.35);
}
#quiz-page .chip.primary:active {
  transform: translateY(0);
  box-shadow: 0 8px 16px rgba(194, 78, 42, 0.25);
}

/* Enable Next visually when any selection exists (CSS-only) */
#quiz-page .nav-buttons a:last-child{
  opacity:.55; pointer-events:none;
}
#quiz-page .quiz-section:has(.options input[type="checkbox"]:checked),
#quiz-page .quiz-section:has(.options input[type="radio"]:checked){
  /* when any option is selected in the section, enable Next */
}
#quiz-page .quiz-section:has(.options input[type="checkbox"]:checked) .nav-buttons a:last-child,
#quiz-page .quiz-section:has(.options input[type="radio"]:checked) .nav-buttons a:last-child{
  opacity:1; pointer-events:auto;
}

/* =========================
   QUOTE LIST LAYOUT (final, consolidated)
   Used by: .quiz-section--quotes (e.g., Q4)
   ========================= */

/* 1) Container: stack → two columns */
#quiz-page .quiz-section--quotes .options{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
@media (min-width:760px){
  #quiz-page .quiz-section--quotes .options{
    grid-template-columns:1fr 1fr; /* two columns on tablet/desktop */
    gap:16px;
  }
}

/* 2) Clickable option (label) */
#quiz-page .quiz-section--quotes .quote-option{
  display:block;
  cursor:pointer;
  height:100%;
}

/* 3) Card: grid so badge has its own space (no overlap) */
#quiz-page .quiz-section--quotes .quote-card{
  display:grid;
  grid-template-columns: 1fr 36px; /* text | badge */
  align-items:center;
  column-gap:12px;
  background:#F2E6D9;
  border:2px solid #D7C6B6;
  border-radius:14px;
  padding:14px;
  box-shadow: var(--shadow-1);
  transition: background .18s, border-color .18s, box-shadow .18s;
  min-height: var(--quote-card-min-h, auto); /* equalizer hook */
  height:100%;
}
@media (min-width:1030px){
  #quiz-page .quiz-section--quotes .quote-card{
    border-radius:18px;
    padding:16px;
    column-gap:14px;
  }
}

/* 4) Quote text */
#quiz-page .quiz-section--quotes .quote-text{
  color:#482B17;
  font-weight:700;
  line-height:1.45;
  overflow-wrap:anywhere;
}

/* 5) Badge: not absolute */
#quiz-page .quiz-section--quotes .quote-badge{
  position:static;
  width:30px; height:30px;
  border-radius:50%;
  background:var(--badge-muted);
  border:1.5px solid var(--badge-muted-b);
  display:grid; place-items:center;
  flex:0 0 auto;
}
#quiz-page .quiz-section--quotes .quote-badge::before{
  content:"+"; font-weight:800; color:#8D7A69; font-size:17px; line-height:1;
}

/* 6) Hover lift */
#quiz-page .quiz-section--quotes .quote-option:hover .quote-card{
  box-shadow:0 10px 22px rgba(0,0,0,.08);
}

/* 7) Route focus ring to the card */
#quiz-page .quiz-section--quotes .quote-option > input[type="radio"]{
  position:absolute; opacity:0; pointer-events:none;
}
#quiz-page .quiz-section--quotes .quote-option:has(> input[type="radio"]:focus-visible) .quote-card{
  outline:3px solid color-mix(in oklab, var(--burnt), black 10%);
  outline-offset:3px;
}

/* 8) Selected state */
#quiz-page .quiz-section--quotes .quote-option:has(> input[type="radio"]:checked) .quote-card{
  background:var(--inner-sel);
  border-color:var(--burnt);
  box-shadow: 0 12px 24px rgba(216,98,53,.18);
}
#quiz-page .quiz-section--quotes .quote-option:has(> input[type="radio"]:checked) .quote-badge{
  background: var(--burnt);
  border-color: color-mix(in oklab, var(--burnt), black 10%);
}
#quiz-page .quiz-section--quotes .quote-option:has(> input[type="radio"]:checked) .quote-badge::before{
  content:"✓"; color:#fff;
}

/* Make each grid item stretch so the card can fill the track */
#quiz-page .quiz-section--quotes .options{ align-items: stretch; }
#quiz-page .quiz-section--quotes .quote-option{ height: 100%; }
#quiz-page .quiz-section--quotes .quote-card{ height: 100%; }

/* Dim unselected quotes in single-select after a choice */
#quiz-page .quiz-section--quotes.single-select .options:has(input[type="radio"]:checked)
  .quote-option:not(:has(> input[type="radio"]:checked)) .quote-card{
  opacity:.70;
}

/* =========================
   Dimming rules (generic)
   ========================= */

/* A) MULTI-SELECT MAX (checkbox cap): dim disabled, unchecked options */
#quiz-page .quiz-section[data-max-select] .options > label:has(> input[disabled]:not(:checked)){
  opacity:.58; cursor:not-allowed;
}

/* GLOBAL: when restrictions disable other choices, mute color AND text */
#quiz-page .quiz-section[data-max-select] .options
  > label:has(> input[disabled]:not(:checked)){
  opacity:.50;
  filter:saturate(.55) contrast(.96);
  cursor:not-allowed;
}
#quiz-page .quiz-section[data-max-select] .options
  > label:has(> input[disabled]:not(:checked)) > span:last-child{
  color: color-mix(in oklab, var(--ink), white 45%);
}

/* =========================================================
   LOOKBOARD LAYOUT (shared) — Q6, Q7, Q9
   Use class: .quiz-section--lookboard
   ========================================================= */

/* Mobile-first: reference full-width; answers stack */
#quiz-page .quiz-section--lookboard .lookboard{
  display:grid;
  gap:18px;
}

/* Reference card styling */
#quiz-page .quiz-section--lookboard .ref-look{
  margin:0;
  padding:10px;
  border-radius:16px;
  background:#F9EAD8;
  border:6px solid var(--brown);
  box-shadow: var(--shadow-1);
}
#quiz-page .quiz-section--lookboard .ref-frame{
  border-radius:12px;
  background:#F3E6C8;
  padding:10px;
}
#quiz-page .quiz-section--lookboard .ref-canvas{
  aspect-ratio:3 / 4;
  display:grid; place-items:center;
}
#quiz-page .quiz-section--lookboard .ref-canvas img{
  width:100%; height:100%;
  object-fit: contain; /* never crop the reference */
}

/* Answers grid: lock to 1 → 2 columns only */
#quiz-page .quiz-section--lookboard .options{
  grid-template-columns: 1fr;
  gap:16px;
}
@media (min-width:600px){
  #quiz-page .quiz-section--lookboard .options{ grid-template-columns: 1fr 1fr; }
}

/* Slightly larger tiles on mobile for lookboard */
#quiz-page .quiz-section--lookboard .options > label > .tile{
  padding:14px; border-radius:20px;
}


/* ≥750px: ref LEFT, right single-column; leftovers wrap under ref */
@media (min-width: 750px){
  #quiz-page .quiz-section--lookboard{
    --qL-gap:        clamp(16px, 2vw, 24px);
    --qL-card-pad:   clamp(14px, 1.6vw, 20px);
    --qL-tile-pad:   clamp(12px, 1.2vw, 18px);
    --qL-caption-min:clamp(56px, 4vw, 76px);
    --ref-max-h:     72dvh;
    --qL-row-h: calc((var(--ref-max-h) - var(--qL-gap)) / 2);
  }

  #quiz-page .quiz-section--lookboard .lookboard{
    --refW: clamp(280px, 36vw, 380px);
    display: grid;
    grid-template-columns: var(--refW) 1fr;
    grid-auto-rows: minmax(240px, 1fr);
    gap: var(--qL-gap);
    align-items: start;
    grid-auto-flow: row dense;
  }

  /* Reference occupies left (two rows high) */
  #quiz-page .quiz-section--lookboard .ref-look{
    grid-column: 1;
    grid-row: 1 / span 2;
    height: 100%;
    padding: 12px;
    border-width: 8px;
    border-radius: 18px;
  }
  #quiz-page .quiz-section--lookboard .ref-frame{ height:100%; padding:12px; border-radius:14px; }
  #quiz-page .quiz-section--lookboard .ref-canvas{ height:100%; aspect-ratio:auto; }
  #quiz-page .quiz-section--lookboard .ref-canvas img{
    width:100%; height:100%;
    object-fit: cover; object-position: top center;
  }

  /* Make the options become direct grid items of .lookboard */
  #quiz-page .quiz-section--lookboard .options{ display: contents; }

  /* Default: options sit in RIGHT column, one per row */
  #quiz-page .quiz-section--lookboard .options > label{
    grid-column: 2;
    align-self: center;
    height: 100%;
    padding: var(--qL-card-pad);
    border-radius: 24px;
  }
  #quiz-page .quiz-section--lookboard .options > label > .tile{ padding:var(--qL-tile-pad); border-radius:22px; }
  #quiz-page .quiz-section--lookboard .options > label > .tile > img{ aspect-ratio: 3 / 4; }
  #quiz-page .quiz-section--lookboard .options > label > span:last-child{
    min-height: var(--qL-caption-min);
    border-radius: 20px; font-size: clamp(1rem, 1.1vw, 1.2rem);
  }

  /* Place first two beside ref; leftovers under ref (row 3) */
  #quiz-page .quiz-section--lookboard .options > label:nth-of-type(1){ grid-row: 1; }
  #quiz-page .quiz-section--lookboard .options > label:nth-of-type(2){ grid-row: 2; }
  #quiz-page .quiz-section--lookboard .options > label:nth-of-type(3){ grid-column: 1; grid-row: 3; }
  #quiz-page .quiz-section--lookboard .options > label:nth-of-type(4){ grid-column: 2; grid-row: 3; }

  /* Equal-row sizing against reference height */
  #quiz-page .quiz-section--lookboard .lookboard{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: var(--qL-row-h) var(--qL-row-h);
    grid-auto-rows: auto;
  }
  #quiz-page .quiz-section--lookboard .ref-look{
    max-block-size: var(--ref-max-h);
    overflow: clip;
  }
  #quiz-page .quiz-section--lookboard .options > label > .tile > img{
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    max-height: calc(
      var(--qL-row-h)
      - var(--qL-card-pad) * 2
      - var(--qL-tile-pad) * 2
      - var(--qL-caption-min)
      - 8px
    );
    object-fit: contain;
    object-position: center top;
    display: block;
  }
  #quiz-page .quiz-section--lookboard .options > label > span:last-child{
    min-height: var(--qL-caption-min);
  }
}

/* ≥1100px: ref LEFT, answers on RIGHT (2 cols) */
@media (min-width: 1100px){
  /* let lookboard sections scroll normally (not center-grid) */
  #quiz-page .quiz-section.quiz-section--lookboard:target { display:block; }

  /* 3 columns total: [ref] | [answers col 1] | [answers col 2] */
  #quiz-page .quiz-section--lookboard .lookboard{
    display:grid;
    grid-template-columns:
      minmax(320px, 1.1fr)           /* reference panel */
      repeat(2, minmax(260px, 1fr)); /* two answer columns on the RIGHT */
    grid-auto-rows:auto;
    align-items:start;
    gap: clamp(20px, 2vw, 32px);
  }

  /* Reference occupies the entire LEFT column */
  #quiz-page .quiz-section--lookboard .ref-look{
    grid-column: 1;
    grid-row: 1 / -1;
    height:auto !important;
    max-height:none !important;
    margin:0;
    overflow:clip;
  }
  #quiz-page .quiz-section--lookboard .ref-frame{ height:auto !important; }
  #quiz-page .quiz-section--lookboard .ref-canvas{
    width:100%;
    height:auto !important;
    aspect-ratio: var(--ref-aspect, 1 / 2);
  }
  #quiz-page .quiz-section--lookboard .ref-canvas img{
    width:100%; height:100%;
    object-fit: cover; object-position: top center; display:block;
  }

  /* ALL options live ONLY in the RIGHT two columns */
  #quiz-page .quiz-section--lookboard .options{
    display:grid !important;         /* override the 750px 'contents' */
    grid-column: 2 / 4;              /* right side only */
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    grid-auto-rows:auto;
    gap: clamp(20px, 2vw, 32px) !important;
  }
  /* clear any earlier explicit placements */
  #quiz-page .quiz-section--lookboard .options > label{
    grid-column:auto !important;
    grid-row:auto !important;
    align-self:start;
    height:auto;
    padding: clamp(16px, 1.5vw, 24px);
    border-radius: clamp(18px, 1.8vw, 24px);
  }
  #quiz-page .quiz-section--lookboard .options > label > .tile{
    padding: clamp(14px, 1.2vw, 20px);
    border-radius: clamp(16px, 1.8vw, 22px);
  }
  #quiz-page .quiz-section--lookboard .options > label > .tile > img{
    width:100%; height:auto;
    object-fit: contain; object-position: top center;
  }

  /* Extra spacer so sticky nav never overlap */
  #quiz-page .quiz-section--lookboard .quiz-stage{
    padding-bottom: var(--lookboard-sticky-spacer, clamp(140px, 16vh, 220px));
  }

  /* Safety: avoid accidental horizontal scroll */
  html, body { overflow-x: hidden; }
  #quiz-page .quiz-section--lookboard .quiz-wrap { max-width: 100vw; }
}

/* ≥1800px: keep same layout, centered by wrapper cap */
@media (min-width:1800px){
  #quiz-page .quiz-section--lookboard .quiz-wrap{ max-width: var(--wrap); margin-inline:auto; }
  #quiz-page .quiz-section--lookboard .lookboard{
    grid-template-columns:
      minmax(320px, 1.1fr)
      repeat(2, minmax(260px, 1fr));
    gap: clamp(20px, 2vw, 32px);
    justify-content: stretch;
  }
  #quiz-page .quiz-section--lookboard .options{
    display:grid !important;
    grid-column: 2 / 4;
    grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
    gap: clamp(20px, 2vw, 32px) !important;
    justify-content: stretch;
  }
  #quiz-page .quiz-section--lookboard .options > label{ max-width: none; }
}

/* =========================================
   GLOBAL: make ALL question headers non-sticky
   ========================================= */
#quiz-page .quiz-section .quiz-top,
#quiz-page .quiz-section .quiz-title,
#quiz-page .quiz-section .quiz-title > *{
  position: static !important;
  top: auto !important;
}
#quiz-page .quiz-section .quiz-stage{
  overflow: visible !important;
}
#quiz-page .quiz-section:target{
  display: block !important;        /* instead of the centered grid */
  place-items: initial !important;
}
/* Center opt-in */
#quiz-page .quiz-section.quiz-section--center:target{
  display: grid !important;
  place-items: center !important;
}

/* Always show the Prev/Next bar while scrolling — single subtle gradient */
#quiz-page .quiz-bottom{
  position: sticky !important;
  bottom: 0;
  z-index: 30;
  background: linear-gradient(
    180deg,
    rgba(253,241,231,0) 0%,
    rgba(253,241,231,.82) 26%,
    rgba(253,241,231,.97) 70%
  ) !important;
  backdrop-filter: saturate(120%) blur(4px) !important;
  border-top: 1px solid #efdcca;
  border-radius: 10px 10px 0 0;
}
/* Kill any old full-bleed pseudo backgrounds */
#quiz-page .quiz-bottom::before,
#quiz-page .quiz-section--lookboard .quiz-bottom::before{
  content: none !important;
}
/* Make sure content never hides behind the sticky buttons while you scroll */
#quiz-page .quiz-section .quiz-stage{
  padding-bottom: clamp(120px, 16vh, 220px);
}

/* Safety: avoid accidental horizontal scroll caused by sticky/footer tricks */
body#quiz-page{ overflow-x: clip; }

/* =========================================================
   CLEAN, SINGLE SOURCE OF TRUTH
   - Site container = 1240px max
   - Consistent centered wrappers
   - One-line answers ≥1250px (except Q4 + lookboard + special grids)
   - No gap "stretch" or jolt near the cap
   ========================================================= */

/* 1) Container: 1240px max for all pages */
#quiz-page header > div,
#quiz-page main > section,
#quiz-page .quiz-wrap,
#site-footer .container{
  width: 100% !important;
  max-width: 1240px !important;
  margin-inline: auto !important;
  padding-inline: clamp(14px, 5vw, 28px) !important;
}

/* =========================================================
   ONE horizontal row of answers ≥1250px (Q4/lookboard excluded)
   ========================================================= */
@media (min-width:1250px){
  #quiz-page
  .quiz-section:not(.quiz-section--lookboard):not(.quiz-section--quotes)
  :not(.quiz-section--grid-3):not(.quiz-section--grid-5)
  :not(.quiz-section--grid-2x3):not(.quiz-section--list)
  .options{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:stretch;
    justify-content:center;
    --opt-gap: clamp(16px, calc(12px + 0.6vw), 24px);
    gap: var(--opt-gap);
  }

  /* EXACTLY 2 options */
  #quiz-page
  .quiz-section:not(.quiz-section--lookboard):not(.quiz-section--quotes)
  :not(.quiz-section--grid-3):not(.quiz-section--grid-5)
  :not(.quiz-section--grid-2x3):not(.quiz-section--list)
  .options:has(> label:nth-of-type(2)):not(:has(> label:nth-of-type(3))) > label{
    flex: 0 0 clamp(240px, calc((100% - var(--opt-gap))/2), 780px);
  }

  /* EXACTLY 3 options */
  #quiz-page
  .quiz-section:not(.quiz-section--lookboard):not(.quiz-section--quotes)
  :not(.quiz-section--grid-3):not(.quiz-section--grid-5)
  :not(.quiz-section--grid-2x3):not(.quiz-section--list)
  .options:has(> label:nth-of-type(3)):not(:has(> label:nth-of-type(4))) > label{
    flex: 0 0 clamp(220px, calc((100% - 2*var(--opt-gap))/3), 520px);
  }

  /* EXACTLY 4 options */
  #quiz-page
  .quiz-section:not(.quiz-section--lookboard):not(.quiz-section--quotes)
  :not(.quiz-section--grid-3):not(.quiz-section--grid-5)
  :not(.quiz-section--grid-2x3):not(.quiz-section--list)
  .options:has(> label:nth-of-type(4)):not(:has(> label:nth-of-type(5))) > label{
    flex: 0 0 clamp(200px, calc((100% - 3*var(--opt-gap))/4), 380px);
  }

  /* EXACTLY 5 options */
  #quiz-page
  .quiz-section:not(.quiz-section--lookboard):not(.quiz-section--quotes)
  :not(.quiz-section--grid-3):not(.quiz-section--grid-5)
  :not(.quiz-section--grid-2x3):not(.quiz-section--list)
  .options:has(> label:nth-of-type(5)):not(:has(> label:nth-of-type(6))) > label{
    flex: 0 0 clamp(180px, calc((100% - 4*var(--opt-gap))/5), 300px);
  }

  /* Gentle chrome scaling */
  #quiz-page
  .quiz-section:not(.quiz-section--lookboard):not(.quiz-section--quotes)
  :not(.quiz-section--grid-3):not(.quiz-section--grid-5)
  :not(.quiz-section--grid-2x3):not(.quiz-section--list)
  .options > label{
    padding: clamp(12px, 1.1vw, 18px);
    border-radius: clamp(16px, 1.2vw, 22px);
  }
  #quiz-page
  .quiz-section:not(.quiz-section--lookboard):not(.quiz-section--quotes)
  :not(.quiz-section--grid-3):not(.quiz-section--grid-5)
  :not(.quiz-section--grid-2x3):not(.quiz-section--list)
  .options > label > .tile{
    padding: clamp(10px, 1vw, 16px);
    border-radius: clamp(14px, 1.1vw, 20px);
  }
  #quiz-page
  .quiz-section:not(.quiz-section--lookboard):not(.quiz-section--quotes)
  :not(.quiz-section--grid-3):not(.quiz-section--grid-5)
  :not(.quiz-section--grid-2x3):not(.quiz-section--list)
  .options > label > span:last-child{
    min-height: clamp(56px, 4.2vw, 72px);
    font-size: clamp(1rem, .9vw, 1.08rem);
  }
}

/* =========================
   Q4 — Bigger cards, more padding, min 2 lines (no clipping)
   ========================= */
#quiz-page #quiz4.quiz-section--quotes{
  --q4-gap:        clamp(14px, 1.4vw, 22px);
  --q4-pad:        clamp(18px, 2vw, 28px);
  --q4-badge:      clamp(28px, 2.2vw, 34px);
  --q4-fs:         clamp(1.05rem, 0.45vw + 1rem, 1.35rem);
  --q4-lh:         1.45;
  --q4-line:       clamp(28ch, 1.2vw + 34ch, 42ch);
  --q4-card-min:   clamp(150px, 12vw, 230px);
}
#quiz-page #quiz4.quiz-section--quotes .options{
  gap: var(--q4-gap);
  align-items: stretch;
}
#quiz-page #quiz4.quiz-section--quotes .quote-card{
  padding: var(--q4-pad);
  grid-template-columns: minmax(0, 1fr) var(--q4-badge);
  column-gap: var(--q4-gap);
  border-radius: clamp(16px, 1vw, 22px);
  min-block-size: var(--q4-card-min);
  min-inline-size: 0;
}
#quiz-page #quiz4.quiz-section--quotes .quote-badge{
  width: var(--q4-badge);
  height: var(--q4-badge);
}
#quiz-page #quiz4.quiz-section--quotes .quote-text{
  font-size: var(--q4-fs);
  line-height: var(--q4-lh);
  text-wrap: balance;
  overflow-wrap: anywhere;
  hyphens: auto;
  max-inline-size: var(--q4-line);
  width: min(100%, var(--q4-line));
  min-inline-size: 0;
  min-block-size: calc(2 * var(--q4-lh) * 1em);
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  -webkit-box-orient: initial;
  overflow: visible;
}
@media (min-width:760px){
  #quiz-page #quiz4.quiz-section--quotes .options{ grid-template-columns: 1fr 1fr; }
}

/* Single-select: dim unselected options while one choice is picked */
#quiz-page .quiz-section.single-select
  .options:has(input[type="radio"]:checked)
  > label:not(:has(> input[type="radio"]:checked)){
  opacity: .50 !important;
  filter: saturate(.55) contrast(.96) !important;
}

/* Quotes (Q4) nested dimming */
#quiz-page .quiz-section--quotes.single-select
  .options:has(input[type="radio"]:checked)
  > .quote-option:not(:has(> input[type="radio"]:checked)){
  opacity: .50 !important;
  filter: saturate(.55) contrast(.96) !important;
}

/* Quotes (checkbox support for multi-select) */
#quiz-page .quiz-section--quotes .quote-option > input[type="checkbox"]{
  position:absolute; opacity:0; pointer-events:none;
}
#quiz-page .quiz-section--quotes .quote-option:has(> input[type="checkbox"]:focus-visible) .quote-card{
  outline:3px solid color-mix(in oklab, var(--burnt), black 10%);
  outline-offset:3px;
}
#quiz-page .quiz-section--quotes .quote-option:has(> input[type="checkbox"]:checked) .quote-card{
  background:var(--inner-sel);
  border-color:var(--burnt);
  box-shadow:0 12px 24px rgba(216,98,53,.18);
}
#quiz-page .quiz-section--quotes .quote-option:has(> input[type="checkbox"]:checked) .quote-badge{
  background:var(--burnt);
  border-color: color-mix(in oklab, var(--burnt), black 10%);
}
#quiz-page .quiz-section--quotes .quote-option:has(> input[type="checkbox"]:checked) .quote-badge::before{
  content:"✓"; color:#fff;
}

/* =========================================================
   INTRO (hero) — mobile-first reorder only (<1030px)
   ========================================================= */
@media (max-width: 1029.98px){
  #quiz-page .hero{
    display: grid;
    grid-template-areas:
      "title"
      "image"
      "pills"
      "tagline"
      "lead"
      "cta";
    row-gap: clamp(12px, 3.6vw, 20px);
    align-items: start;
    min-height: auto;
    padding-block-start: clamp(10px, 4vh, 26px);
    padding-block-end: clamp(32px, 8vh, 64px);
  }
  #quiz-page .hero-copy{ display: contents; }

  #introTitle{ grid-area: title; margin-top: clamp(22px, 6vh, 56px); }

  #quiz-page .hero-card{
    grid-area: image;
    justify-self: center;
    max-inline-size: clamp(240px, 64vw, 460px);
  }
  #quiz-page .hero-card img{ aspect-ratio: 4 / 5; }

  /* Only assign area here; layout handled below in <450 / ≥450 rules */
  #quiz-page .facts{
    grid-area: pills;
    margin: 6px 0;
    margin-inline: 0;
    max-width: none;
    width: 100%;
  }

  #quiz-page .hero-copy .tagline{
    grid-area: tagline;
    margin-top: 6px; /* tiny extra breathing room from pills */
    margin-bottom: .25rem; /* tighter to the lead */
    font-size: clamp(1rem, 1.9vw, 1.25rem);
  }
  #quiz-page .hero-copy .lead{
    grid-area: lead;
    max-width: 48ch;               /* comfortable measure */
    margin-inline: auto;
    margin-top: .2rem;             /* tighten under tagline */
    margin-bottom: clamp(6px, 1.2vh, 12px); /* tighter to buttons */
    font-size: clamp(.98rem, 1.6vw, 1.08rem);
  }

  #quiz-page .cta-row{
    grid-area: cta;
    margin-top: clamp(6px, 1.8vh, 16px);     /* tight gap from lead */
    margin-bottom: clamp(28px, 8vh, 72px);   /* footer breathing room */
  }
}

/* =========================================================
   PILLS LAYOUT
   - <450px: vertical stack
   - ≥450px: single horizontal row, no scrollbar
   ========================================================= */
@media (max-width: 449.98px){
  #quiz-page .facts{
    display: grid;
    grid-template-columns: 1fr;      /* vertical */
    row-gap: clamp(8px, 2.8vw, 12px);
    overflow-x: visible;
    padding-bottom: 0;
  }
  #quiz-page .facts li{ white-space: normal; }
}

@media (min-width: 450px){
  #quiz-page .facts{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* exactly one row */
    gap: clamp(8px, 2vw, 16px);
    margin: 6px 0;
    margin-inline: 0;
    max-width: none;
    overflow-x: visible;  /* no scroll bar */
    padding-bottom: 0;
  }
  #quiz-page .facts li{
    min-width: 0;          /* allow shrinking inside cell */
    white-space: normal;   /* wrap labels instead of forcing overflow */
    display: flex; align-items: center; justify-content: center;
  }
}

/* ===================================================
   FOOTER STYLES
   =================================================== */
/* Root + palette (mobile-first) */
.site-footer{
  --cream:#FFF6F0;
  --cocoa:#3A2A21;
  --ink:#482B17;
  --muted:#5B4E45;
  --accent:#EF923F;      /* brand orange */
  --accent-dark:#D97929;
  --shadow:0 12px 28px rgba(0,0,0,.12), 0 3px 8px rgba(0,0,0,.06);

  background:var(--cream);
  color:var(--ink);
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  padding:10px clamp(16px,4vw,28px) clamp(16px,4vw,28px);
  position:relative;
}

.site-footer::before{
  content:"";
  position:absolute; inset:-12px 0 0 0;
  background:var(--cream);
  border-radius:22px;
  box-shadow:0 0 0 1px rgba(0,0,0,.04) inset;
  z-index:0;
}

.site-footer .intro{
  position:relative;
  z-index:1;
  max-width:1120px;
  margin-inline:auto;
  padding:clamp(26px,5vw,40px) clamp(16px,4vw,28px) 0;
  display:grid;
  gap:16px;
  align-items:center;
}
@media (min-width:900px){
  .site-footer .intro{ grid-template-columns:1.3fr 1fr; }
}

.site-footer .intro h2{
  font:700 clamp(32px,6vw,64px) "Playfair Display",Georgia,serif;
  color:var(--cocoa);
  line-height:1.05;
  margin:0 0 .25rem;
}

.site-footer .intro p{
  margin:0;
  color:var(--muted);
  font-size:clamp(15px,2.6vw,18px);
}

.site-footer .intro figure{
  position:relative;
  height:clamp(120px,22vw,170px);
  margin:0;
}
.site-footer .intro figure > span{
  position:absolute;
  background:#fff;
  border-radius:6px;
  width:clamp(120px,22vw,180px);
  height:clamp(90px,16vw,130px);
  box-shadow:0 6px 14px rgba(0,0,0,.15);
}
.site-footer .intro figure > span:first-child{ left:10%; bottom:16%; transform:rotate(-6deg); }
.site-footer .intro figure > span:last-child { left:34%; bottom:0; transform:rotate(8deg); }

.site-footer .content{
  position:relative;
  z-index:1;
  max-width:1120px;
  margin:0 auto;
  background:var(--cocoa);
  color:#FDF8F3;
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:clamp(18px,3.8vw,28px);
  display:grid;
  gap:24px;
  border-top:8px solid var(--accent);
  align-items:flex-start;
}
@media (min-width:900px){
  .site-footer .content{
    grid-template-columns:1fr 1.2fr 1fr;
    align-items:flex-start;
    gap:clamp(18px,2.5vw,24px);
  }
}

.site-footer .content > section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
}

.site-footer .content section > p {
  margin: 0;
  padding: 0;
}

.site-footer picture{ display:block; }
.site-footer picture img{
  display:block;
  width:min(240px,100%);
  height:auto;
  border-radius:10px;
 
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}

.site-footer .content section > p{
  margin:0 0 8px;
  color:#F7F2EC;
  font-size:16px;
}


.site-footer form{ display:flex; gap:8px; margin:0; }
.site-footer input[type="email"]{
  flex:1;
  padding:10px 12px;
  border:none;
  border-radius:8px;
  font-size:14px;
}
.site-footer button{
  background:var(--accent);
  color:#fff;
  border:none;
  padding:10px 14px;
  border-radius:8px;
  font-weight:600;
  cursor:pointer;
  transition:background .15s;
}
.site-footer button:hover{ background:var(--accent-dark); }

.site-footer nav[aria-label="Social media"]{ display:flex; gap:12px; }
.site-footer nav[aria-label="Social media"] a{
  display:inline-grid; place-items:center;
  width:32px; height:32px;
  border-radius:50%;
  text-decoration:none;
}
.site-footer nav[aria-label="Social media"] a span{
  width:22px; height:22px;
  border-radius:4px;
  outline:2px dashed rgba(255,255,255,.5);
}

.site-footer nav[aria-label="Footer navigation"] ul{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}
.site-footer nav[aria-label="Footer navigation"] a{
  color:#FDF8F3;
  text-decoration:none;
  font-size:18px;
  font-weight:600;
}
.site-footer nav[aria-label="Footer navigation"] a:hover{ text-decoration:underline; }

.site-footer .legal{
  position:relative;
  z-index:1;
  max-width:1120px;
  margin:16px auto 0;
  padding:16px 0 20px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:space-between;
  align-items:center;
}
.site-footer .legal nav{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
}
.site-footer .legal nav a{
  color:var(--ink);
  text-decoration:none;
  font-size:14px;
}
.site-footer .legal nav a:hover{ text-decoration:underline; }
.site-footer .legal p{
  margin:0;
  font-size:14px;
  color:var(--ink);
}

@media (max-width:600px){
  .site-footer .legal{
    flex-direction:column;
    align-items:center;
    gap:8px;
    text-align:center;
  }
  .site-footer .legal nav{ justify-content:center; }
}

.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

@media (prefers-reduced-motion:reduce){ .site-footer button{ transition:none; } }
@media (prefers-contrast:more){ .site-footer .content{ box-shadow:none; } }

/* ===================================================
   PERSONA RESULT PAGES – UNIVERSAL + PERSONA-SPECIFIC
   =================================================== */

/* Base header styling (all persona results) */
[id^="persona-result-"] {
  margin: 0;
  background: var(--result-cream);
  color: var(--result-ink);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  height: 100vh;
  overflow: visible;
  display: grid;
  grid-template-rows: auto 1fr;
}

[id^="persona-result-"] > main {
  min-height: calc(100vh - 100px);
  display: grid;
  grid-template-rows: auto 1fr;
}

[id^="persona-result-"] .lede {
  width: 90%;
  margin-inline: auto;
  padding-top: clamp(1rem, 3vh, 1.8rem);
  padding-bottom: clamp(1.5rem, 4vh, 2.5rem);
  z-index: 20;
  position: relative;
}

[id^="persona-result-"] .lede h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 900;
  color: var(--result-accent);
  font-size: clamp(2.2rem, 10vw, 8rem);
  line-height: 1.05;
  margin-block: clamp(0.8rem, 2vh, 1.6rem) clamp(1.1rem, 3vh, 3rem);
  text-align: left;
}

#persona-result-effortlessly-polished h1, #persona-result-romantic-dreamer h1 {
    font-size: clamp(2.2rem, 10vw, 6rem);
}

[id^="persona-result-"] .lede h2 {
  font-weight: 800;
  font-size: clamp(1.2rem, 3.8vw, 1.5rem);
  margin: 0 0 clamp(0.8rem, 2.4vh, 1.1rem);
}

[id^="persona-result-"] .lede p {
  margin: 0 0 clamp(0.8rem, 2.2vh, 1.1rem);
  font-size: clamp(0.95rem, 3vw, 1.05rem);
  max-width: 800px;
  font-weight: 500;
}

[id^="persona-result-"] .lede .lede-grid {
  margin-top: clamp(0.2rem, 1vh, 0.6rem);
}

[id^="persona-result-"] .lede .token {
  font-weight: 700;
  color: var(--result-accent);
}

[id^="persona-result-"] .lede .actions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 2.6vw, 1.2rem);
  margin-top: clamp(1.1rem, 3vh, 1.6rem);
  margin-bottom: clamp(0.6rem, 1.6vh, 1rem);
}

[id^="persona-result-"] .lede .actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.55rem, 2vw, 0.75rem) clamp(0.9rem, 3vw, 1.2rem);
  border-radius: 14px;
  border: 1.5px solid var(--result-accent);
  background: rgba(216, 98, 53, 0.06);
  font-weight: 600;
  font-size: clamp(0.9rem, 2.8vw, 1rem);
  text-decoration: none;
  color: var(--result-ink);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

[id^="persona-result-"] .lede .actions .btn:hover {
  background: var(--result-accent);
  color: #fff;
  border-color: var(--result-accent);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0,0,0,.16);
}

[id^="persona-result-"] .lede .actions .btn:active {
  transform: translateY(0);
  box-shadow: 0 6px 12px rgba(0,0,0,.12);
}

[id^="persona-result-"] .bottom-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}

[id^="persona-result-"] .bottom-wrap .film-strip {
  position: absolute;
  left: 50%;
  bottom: 0rem;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  width: 100%;
  height: clamp(12vh, 22vh, 32vh);
  border: 8px solid var(--result-brown);
  background: #f8f4f1;
  z-index: 1;
}

[id^="persona-result-"] .bottom-wrap .film-strip .frame {
  flex: 0 0 220px;
  border-right: 8px solid var(--result-brown);
}

[id^="persona-result-"] .bottom-wrap .film-strip .frame:last-child {
  border-right: 0;
}

[id^="persona-result-"] .bottom-wrap .film-strip .frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

[id^="persona-result-"] .bottom-wrap .portrait-wrap {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 100;
  width: clamp(300px, 60vw, 600px);
  height: 100%;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}

[id^="persona-result-"] .bottom-wrap .portrait-wrap img {
  width: 100%;
  height: auto;
  max-height: 100%;
  display: block;
  object-fit: contain;
}

[id^="persona-result-"] .bottom-wrap .cta {
  position: absolute;
  bottom: 3vh;
  left: 50%;
  transform: translateX(-50%);
  background: var(--result-accent);
  color: #fff;
  font-weight: 700;
  font-size: clamp(1rem, 3vw, 1.1rem);
  border-radius: 12px;
  width: calc(100% - 20%);
  padding: 0.9rem 1.6rem;
  text-align: center;
  display: block;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(72, 43, 23, 0.3);
  z-index: 700;
  transition: background 0.18s ease, transform 0.08s ease;
}

[id^="persona-result-"] .bottom-wrap .cta:hover {
  background: var(--result-accent-dark);
}

[id^="persona-result-"] .bottom-wrap .cta:active {
  background: var(--result-accent-dark);
  transform: translateX(-50%) translateY(1px);
}

@media (min-width: 1000px) {
  [id^="persona-result-"] .lede .lede-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.45fr);
    column-gap: clamp(2rem, 4vw, 3rem);
    align-items: flex-start;
  }

  [id^="persona-result-"] .bottom-wrap {
    overflow: visible;
  }

  [id^="persona-result-"] .bottom-wrap .film-strip {
    height: clamp(22vh, 28vh, 34vh);
  }

  [id^="persona-result-"] .bottom-wrap .portrait-wrap {
    left: 24%;
    bottom: 0;
    width: clamp(26vw, 50vw, 38vw);
    height: auto;
    transform: translateX(-50%);
    align-items: flex-end;
  }

  [id^="persona-result-"] .bottom-wrap .portrait-wrap img {
    width: 100%;
    height: auto;
    max-height: clamp(400px, 80vh, 840px);
    object-fit: contain;
  }

  [id^="persona-result-"] .bottom-wrap .cta {
    left: auto;
    right: 2%;
    transform: translateY(0);
    width: calc(100% - 50%);
    text-align: center;
  }

  [id^="persona-result-"] .bottom-wrap .cta:active {
    transform: translateY(1px);
  }
}

#persona-result-street-muse {
  --result-ink: #1d1b19;
  --result-cream: #f6efe9;
  --result-accent: #D86235;
  --result-accent-dark: #B94A24;
  --result-brown: #482B17;
}

#persona-result-style-rebel {
    --result-ink: #1d1b19;
    --result-cream: #f6efe9;
    --result-accent: #D86235;
    --result-accent-dark: #B94A24;
    --result-brown: #482B17;
}

#persona-result-effortlessly-polished {
    --result-ink: #1d1b19;
    --result-cream: #f6efe9;
    --result-accent: #D86235;
    --result-accent-dark: #B94A24;
    --result-brown: #482B17;
}

#persona-result-romantic-dreamer {
    --result-ink: #1d1b19;
    --result-cream: #f6efe9;
    --result-accent: #D86235;
    --result-accent-dark: #B94A24;
    --result-brown: #482B17;
}

/* ==========================================================================
   CAPSULE ROOM STYLING — Shared across all persona capsule pages
   Sustainable, mobile-first, accessible, page-scoped
   ========================================================================== */

/* ========== CAPSULE TOKENS (page-scoped) ========== */
#capsule-persona {
  --burnt: #D86235;
  --cream: #F8F6F3;
  --rail: #FBF2E3;
  --ink: #482B17;
  --ink-strong: #482B17;
  --line: #E6D7C4;

  --btn-outline: #482B17;
  --btn-fill: #482B17;
  --btn-fill-hover: #3E2413;

  --r-xl: 20px;
  --r-lg: 14px;

  --shadow-sm: 0 6px 18px rgba(0,0,0,.06);
  --shadow-md: 0 12px 30px rgba(0,0,0,.10);

  --h1: clamp(28px, 6vw, 72px);
  --h2: clamp(20px, 3vw, 36px);
  --h3: clamp(15px, 2vw, 20px);
  --body: clamp(14px, 1.3vw, 17px);

  /* Offset for your future fixed PHP header */
  --sticky-top: 0px;
}

/* ========== CAPSULE BASE / A11Y ========== */
#capsule-persona {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.55;
  scroll-behavior: smooth;
}
#capsule-persona * {
  box-sizing: border-box;
}
#capsule-persona img {
  display: block;
  max-width: 100%;
  height: auto;
  content-visibility: auto;
}
#capsule-persona a {
  color: inherit;
  text-decoration: none;
}
#capsule-persona :focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(216,98,53,.32);
  border-radius: 10px;
}
#capsule-persona .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ========== CAPSULE LAYOUT ========== */
#capsule-persona [data-capsule="cap-layout"] {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  #capsule-persona,
  #capsule-persona [data-capsule="cap-layout"] {
    height: 100vh;
  }
  #capsule-persona {
    overflow: hidden;
  }
  #capsule-persona [data-capsule="cap-layout"] {
    grid-template-columns: min(520px, 36%) 1fr;
  }
}

/* ========== CAPSULE LEFT: PERSONA PANEL ========== */
#capsule-persona [data-capsule="cap-persona"] {
  background: var(--rail);
  border-bottom: 1px solid var(--line);
  padding-inline: clamp(10px, 4vw, 20px);
  display: grid;
  grid-template-rows: min-content minmax(0,1fr) min-content min-content;
}
@media (min-width: 900px) {
  #capsule-persona [data-capsule="cap-persona"] {
    position: sticky;
    top: 0;
    height: 100vh;
    border-bottom: none;
    border-right: 1px solid var(--line);
    padding-inline: clamp(14px, 2.6vw, 28px);
  }
}

/* persona heading */
#capsule-persona [data-capsule="cap-persona"] > header {
  margin-block: 2rem .5rem;
}
#capsule-persona [data-role="persona-label"] {
  color: var(--burnt);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 .5rem 0;
}
#persona-title {
  display: inline-flex;
  align-items: flex-end;
  gap: 10px;
  margin: .25rem 0 .5rem;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.012em;
  color: var(--ink-strong);
  font-size: var(--h1);
}
#capsule-persona [data-role="title-accent"] {
  width: 48px;
  height: 6px;
  background: var(--burnt);
  border-radius: 6px;
  transform: translateY(-6px);
  display: inline-block;
}
#capsule-persona [data-role="persona-tagline"] {
  margin: 0;
  font-size: var(--body);
  color: var(--ink);
  opacity: .95;
}

/* portrait */
#capsule-persona [data-role="persona-portrait"] {
  margin: 0;
  padding-top: 8px;
}
#capsule-persona [data-role="portrait-frame"] {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}
#capsule-persona [data-role="persona-portrait"] img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 64vh;
  object-fit: cover;
  border-radius: var(--r-xl);
}
@media (min-width: 600px) and (max-width: 899.98px) {
  #capsule-persona [data-role="persona-portrait"] img {
    max-height: 70vh;
  }
}
@media (min-width: 800px) { 
    #capsule-persona [data-role="persona-portrait"] img {
        max-height: 48vh;
        align-self: flex-start;
    }
}
@media (min-width: 900px) {
  #capsule-persona [data-role="persona-portrait"] img {
    max-height: 58vh;
    align-self: flex-start;
  }
}

/* persona actions (buttons) */
#capsule-persona [aria-label="Persona actions"] {
  display: flex;
  gap: clamp(10px, 2.5vw, 16px);
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  margin-top: clamp(14px, 3.5vw, 22px);
  margin-bottom: 12px;
}
@media (min-width: 820px) and (max-width: 900px) {
  #capsule-persona [aria-label="Persona actions"] {
    margin-top: 24px;
  }
}
#capsule-persona [data-button="primary"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5ch;
  min-height: 42px;
  padding: clamp(10px, 1.2vw, 12px) clamp(14px, 1.8vw, 18px);
  border-radius: 12px;
  font-weight: 800;
  letter-spacing: .01em;
  border: 2px solid var(--btn-outline);
  background: transparent;
  color: var(--btn-outline);
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
#capsule-persona [data-button="primary"]:hover {
  transform: translateY(-1px);
  background: var(--btn-fill);
  color: #fff;
  border-color: var(--btn-fill);
}

/* persona meta + retake link */
#capsule-persona [data-role="persona-meta"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-block: 10px 14px;
}
#capsule-persona [data-role="quiz-retake"] {
  font-weight: 800;
  border-bottom: 2px solid var(--burnt);
  padding: 0;
  line-height: 1.1;
  color: var(--ink-strong);
  transition: color .2s ease;
}
#capsule-persona [data-role="quiz-retake"]:hover,
#capsule-persona [data-role="quiz-retake"]:focus-visible {
  color: var(--burnt);
}

/* ========== CAPSULE RIGHT: CATALOG ========== */
#capsule-persona [data-capsule="cap-catalog"] {
  padding-block: 14px 40px;
  padding-inline: clamp(10px, 4vw, 20px);
  min-width: 0;
  scroll-behavior: smooth;
}
@media (min-width: 900px) {
  #capsule-persona [data-capsule="cap-catalog"] {
    height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-inline: clamp(14px, 3vw, 32px);
  }
}

/* sticky theme tabs */
#capsule-persona [data-capsule="cap-tabs"] {
  position: sticky;
  top: calc(var(--sticky-top) + env(safe-area-inset-top));
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 8px;
  background: linear-gradient(180deg, rgba(248,246,243,.96), rgba(248,246,243,.82));
  backdrop-filter: saturate(1.1) blur(6px);
  border-bottom: 1px solid var(--line);
}
#capsule-persona [data-capsule="cap-tabs"] [data-role="tabs-label"] {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  color: var(--ink-strong);
  padding: 6px 6px;
  border-radius: 8px;
  font-size: clamp(14px, 1.2vw, 18px);
}
#capsule-persona [data-capsule="cap-tabs"] [data-role="tabs-divider"] {
  height: 26px;
  border-left: 1px solid var(--line);
  flex: 0 0 1px;
  margin-inline: 4px;
}
#capsule-persona [data-capsule="cap-tabs"] button[role="tab"] {
  appearance: none;
  border: 2px solid var(--ink-strong);
  background: transparent;
  color: var(--ink-strong);
  font-weight: 900;
  font-size: clamp(13px, 1.1vw, 16px);
  padding: clamp(7px, 0.7vw, 12px) clamp(11px, 1.2vw, 18px);
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s, color .2s, transform .12s, box-shadow .2s, border-color .2s;
}
#capsule-persona [data-capsule="cap-tabs"] button[role="tab"][aria-selected="true"],
#capsule-persona [data-capsule="cap-tabs"] button[role="tab"]:hover {
  background: var(--ink-strong);
  color: #fff;
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
@media (min-width: 1500px) {
  #capsule-persona [data-capsule="cap-tabs"] {
    gap: 10px;
    padding: 14px 10px;
  }
  #capsule-persona [data-capsule="cap-tabs"] button[role="tab"] {
    font-size: clamp(15px, 0.9vw, 18px);
    padding: clamp(9px, 0.6vw, 14px) clamp(14px, 1vw, 22px);
  }
}

/* Prevent sticky overlap when jumping to anchors */
#capsule-start,
#capsule-persona [data-capsule="cap-theme"] {
  scroll-margin-top: calc(var(--sticky-top) + env(safe-area-inset-top) + 56px);
}

/* themes + titles */
#capsule-persona [data-capsule="cap-themes"] {
  display: grid;
  gap: 36px;
  width: 100%;
  margin-top: 16px;
}
#capsule-persona [data-capsule="cap-theme"] {
  border-top: 1px solid rgba(72,43,23,.08);
  padding-top: 16px;
}
#capsule-persona [data-capsule="cap-theme"]:first-of-type {
  border-top: none;
  padding-top: 0;
}
#capsule-persona [data-role="theme-head"] h2 {
  margin: 0 0 8px 0;
  font-family: "Playfair Display", serif;
  font-size: var(--h2);
  color: var(--ink-strong);
}

/* grid of looks */
#capsule-persona [data-role="theme-grid"] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 600px) {
  #capsule-persona [data-role="theme-grid"] {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 18px;
  }
}
@media (min-width: 1500px) {
  #capsule-persona [data-role="theme-grid"] {
    grid-template-columns: repeat(3, minmax(280px, 1fr));
    gap: 18px;
  }
}

/* look card */
#capsule-persona [data-capsule="cap-look"] {
  display: grid;
  gap: 10px;
  padding: 4px 2px 8px;
}
#capsule-persona [data-capsule="cap-look"] > h3 {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-size: var(--h3);
  color: var(--ink-strong);
  text-align: center;
}
#capsule-persona [data-role="look-image"] {
  margin: 0;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-lg);
  border: 4px solid var(--ink-strong);
  background: #fff;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform .16s, box-shadow .2s, border-color .2s;
}
#capsule-persona [data-capsule="cap-look"]:hover [data-role="look-image"],
#capsule-persona [data-capsule="cap-look"] > h3:hover ~ [data-role="look-image"] {
  transform: translateY(-2px);
  border-color: #3A2213;
  box-shadow: 0 16px 32px rgba(0,0,0,.12);
}
#capsule-persona [data-role="look-image"] img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* center CTA */
#capsule-persona [data-role="cta"] {
  margin: 0;
  display: flex;
  justify-content: center;
}
#capsule-persona [data-role="cta"] [data-button="primary"] {
  margin-inline: auto;
}

#capsule-persona [data-capsule="cap-tabs"] {
  top: 0;
  padding: 1.5rem 0 0.9rem; 
}

#capsule-persona [data-capsule="cap-catalog"] {
  padding-top: 0;
}

.lookboard img {
    border-radius: 16px;
}

/* ===== ABOUT US PAGE CSS ===== */
:root{
  --ink:#1a1a1a; --sub:#5a4b40; --muted:#8a7a6e;
  --paper:#fff7ef; --cream:#faf2e9; --cta:#2b1d15; --accent:#ef923f;

  --r-lg:24px; --r-md:14px;
  --max:1240px; --pad:clamp(16px,6vw,56px);

  /* Placeholder art tokens (unify SVG styling) */
  --ph-fill:#efe5da; --ph-stroke:#d7c6b7;
  --ph-dark:#3b2a20; --ph-dark-stroke:#6b5346;

  /* Focus ring */
  --ring: 0 0 0 3px rgba(239,146,63,.35);
}

body#about{
  margin:0; color:var(--ink);
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial;
  line-height:1.65; background:#fff;
}
body#about h1,body#about h2,body#about h3{font-family:"Playfair Display",serif;margin:.2em 0}
body#about h1{font-size:clamp(2.4rem,8vw,6.6rem);line-height:1.02;font-weight:700}
body#about h2{font-size:clamp(1.8rem,4.2vw,3rem);line-height:1.05;font-weight:700}
body#about h3{font-size:1.15rem;font-weight:700}
body#about p{margin:.6rem 0}
body#about .container{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
body#about section{padding-block:clamp(2.2rem,7vw,6rem)}
body#about .eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;color:#b6a496}

body#about ::selection{background:rgba(239,146,63,.18)}
body#about :where(a,button,[role="button"]):focus-visible{outline:none;box-shadow:var(--ring);border-radius:12px}

body#about .skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
body#about .skip:focus{left:12px;top:12px;width:auto;height:auto;background:#fff;border:2px solid #000;padding:.5rem .75rem;border-radius:10px;z-index:999}

/* ===== Header (UNIVERSAL — all pages) ===== */
/* Removed page-specific overrides */

/* ===== HERO ===== */
body#about .hero {
  background: radial-gradient(80% 120% at 100% 0%, #ffe9d5 0, rgba(255, 233, 213, 0) 60%), var(--paper);
}

body#about .hero > .container {
  display: grid;
  gap: clamp(1.25rem, 4vw, 3rem);
  align-items: flex-start;
  padding-top: clamp(3rem, 6vh, 5rem);
}

body#about .hero .hero-text  {
    padding-top: 4rem;
}

body#about .hero .lede {
  color: var(--sub);
}

body#about .hero :where(.chips, .stats) {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  padding: 0;
  margin: .9rem 0 0;
}

body#about .hero .chips li {
  list-style: none;
  background: #f9eee5;
  border: 1px solid #f0e0d4;
  padding: .46rem .95rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .92rem;
}

body#about .hero .stats li {
  list-style: none;
  background: #fff;
  border: 1px solid #efe4d9;
  padding: .5rem .95rem;
  border-radius: 999px;
}

body#about .hero-visual {
  display: grid;
  gap: .9rem;
  justify-items: end;
  align-items: flex-start;
}

body#about .hero-visual figure {
  margin: 0;
  width: min(560px, 40vw);
}

body#about .hero-visual img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 22px;
}

body#about .hero-tiles {
  display: flex;
  gap: .9rem;
  max-width: min(560px, 40vw);
}

body#about .hero-tiles > img {
  flex: 1;
  min-width: 0;
  border-radius: 22px;
  background: #F5F1E7;
}

body#about .hero-tiles > img:first-child {
  transform: rotate(-2deg);
}

body#about .hero-tiles > img:last-child {
  transform: rotate(2deg);
}

/* ===== STORY ===== */
body#about .story {
  background: var(--paper);
}

body#about .story > .container {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

body#about .story .media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
  align-items: stretch;
}

body#about .story .media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  background-color: #F5F1E7;
}

body#about .story .media img:last-child {
  grid-column: 1 / -1;
}

body#about .story .label {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: #8f7f73;
  font-weight: 700;
  margin: .25rem 0;
}

body#about .story .label svg {
  width: 10px;
  height: 10px;
}

body#about .story .label circle {
  fill: var(--accent);
}

body#about .checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  padding: 0;
  margin: 1rem 0;
}

body#about .checklist li {
  list-style: none;
}

body#about .checklist li::before {
  content: "✔ ";
  color: #0a7a37;
  font-weight: 800;
}

body#about .signature {
  color: var(--muted);
}

/* ===== BUILD ===== */
body#about .build {
  background: var(--cream);
}

body#about .build .frame {
  position: relative;
  border: 3px solid #3a2a1f;
  border-radius: 34px;
  background: #f8efe6;
  padding: 32px;
}

body#about .build .frame::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 2px solid #3a2a1f;
  border-radius: 26px;
  opacity: .35;
  pointer-events: none;
}

body#about .build .left {
  text-align: center;
  max-width: 60ch;
  margin-inline: auto;
  padding: clamp(1rem, 3vw, 1.6rem);
}

body#about .build .steps {
  display: flex;
  justify-content: center;
  gap: .6rem;
  margin: .9rem 0;
}

body#about .build .steps a {
  text-decoration: none;
  color: #2b1d15;
  background: #fff;
  border: 1px solid #ead9c7;
  border-radius: 999px;
  padding: .6rem 1rem;
  font-weight: 700;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .06);
}

body#about .build .note {
  color: #6f6156;
  margin: .25rem 0 0;
}

body#about .build .cards {
  display: grid;
  gap: .9rem;
  margin-top: clamp(.75rem, 2vw, 1rem);
}

body#about .build .cards article {
  background: #fff;
  border: 1px solid #efdfcf;
  border-radius: 18px;
  padding: 16px;
  display: grid;
  gap: .5rem;
  text-align: center;
}

body#about .build .cards .icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #ef923f;
  display: grid;
  place-items: center;
  margin-inline: auto;
}

body#about .build .cards a {
  color: #2b1d15;
  text-decoration: none;
  border-bottom: 1px solid #e7d3c2;
  font-weight: 700;
  justify-self: center;
}

/* ===== VALUES ===== */
body#about .values {
  background: var(--paper);
}

body#about .values .container {
  max-width: calc(var(--max) - 40px);
}

body#about .values .grid {
  display: grid;
  gap: clamp(1.25rem, 4vw, 2.5rem);
  align-items: center;
}

body#about .values .value-list {
  display: grid;
  gap: 18px;
  margin-top: .8rem;
  padding: 0;
}

body#about .values .value-list li {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 1.22rem;
}

body#about .values .value-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #ffe2cc;
  border: 1px solid #f1cfb2;
}

body#about .values .value-icon svg {
  width: 40px;
  height: 40px;
  fill: #EF923F;
}

body#about .values .value-icon svg path,
body#about .values .value-icon svg circle {
  stroke: #2b1d15;
  stroke-width: 3;
}

body#about .values .numbers {
  background: #fff;
  border: 2px solid #3a2a1f;
  border-radius: 26px;
  padding: 22px;
  position: relative;
}

body#about .values .numbers::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1.6px solid #3a2a1f;
  border-radius: 18px;
  opacity: .3;
}
body#about .values .numbers-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:12px;margin-top:12px
}
body#about .values .numbers-grid>div{
  background:#fff9f3;border:1px solid #ebdcca;
  border-radius:16px;padding:16px;display:grid
}
body#about .values .numbers-grid strong{
  font-family:"Playfair Display";font-size:2.1rem;line-height:1
}

/* ===== PERSONAS ===== */
body#about .personas header {
  max-width: 80ch;
  display: grid;
  gap: .5rem;
}

body#about .personas .view-analysis {
  display: inline-block;
  margin-top: .25rem;
  color: #2b1d15;
  text-decoration: none;
  border-bottom: 1px solid #e7d3c2;
  font-weight: 700;
}

body#about .personas .persona-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  margin-top: .9rem;
  align-items: stretch;
}

body#about .personas .persona-grid article {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 16px;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .04);
  text-align: center;
}
body#about .personas .persona-grid article img {
    width: 100%;        
    height: 300px;      
    object-fit: cover;  
    object-position: top; 
    overflow: hidden;
    
}

body#about .personas .persona-grid article a{
  padding: 0.75rem 1.5rem;
  background-color: #D86235;
  color: #fdf9f2;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.2s ease;
  text-align: center;
}


body#about .personas .persona-grid article a:hover {
    background-color: #c5562b;
    transform: translateY(-2px);
  }
  

body#about .personas .persona-grid article a:active {
    transform: translateY(0);
  }

body#about .personas h3 {
  font-family: "Playfair Display", serif;
  font-size: 1.6rem;
  line-height: 1.1;
  margin: .2rem 0 .5rem;
  letter-spacing: -.01em;
}

body#about .personas img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: .6rem;
  border-radius: 14px;
}

body#about .personas ul {
  padding: 0;
  margin: 0 0 .8rem;
  display: grid;
  gap: .5rem;
  line-height: 1.45;
}

body#about .personas li {
  list-style: none;
}

body#about .personas a[href*="capsule"] {
  align-self: start;
  background: #ef923f;
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  font-weight: 700;
  padding: .52rem .98rem;
  font-size: .875rem;
  line-height: 1;
  letter-spacing: .01em;
  border: none;
}

/* ===== CTA ===== */
body#about .cta {
  background: var(--cta);
  color: #fff;
}

body#about .cta .container {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

body#about .cta .cta-actions {
  display: flex;
  gap: .9rem;
  margin-top: .6rem;
  flex-wrap: wrap;
}

body#about .cta .primary {
  background: #ef923f;
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  padding: .85rem 1.25rem;
  font-weight: 700;
  border: none;
}

body#about .cta .outline {
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  border: 1.8px solid #fff;
  padding: .85rem 1.25rem;
  font-weight: 700;
  background: transparent;
}

body#about .cta .cta-visual {
  display: grid;
  gap: .9rem;
  align-content: start;
}

body#about .cta .tall,
body#about .cta .row img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 22px;
}

body#about .cta .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
}

/* ===== Responsive ===== */
@media (min-width: 760px) {
  body#about .hero > .container {
    grid-template-columns: 1.1fr .9fr;
  }

  body#about .story > .container {
    grid-template-columns: 1fr 1fr;
  }

  body#about .build .cards {
    grid-template-columns: 1fr 1fr;
  }

  body#about .values .grid {
    grid-template-columns: 1.1fr .9fr;
  }

  body#about .personas .persona-grid {
    grid-template-columns: 1fr 1fr;
  }

  body#about .cta .container {
    grid-template-columns: 1.05fr .95fr;
    column-gap: 32px;
  }
}

@media (min-width: 1080px) {
  body#about .personas .persona-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
  }
}

@media (min-width: 1400px) {
  body#about .hero-visual {
    justify-items: center;
  }

  body#about .hero-visual figure {
    width: 560px;
  }

  body#about .hero-tiles {
    max-width: 560px;
  }

  body#about .cta .cta-visual {
    width: 600px;
    justify-self: start;
  }
}

@media (prefers-reduced-motion:reduce){
  body#about *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

@media (prefers-reduced-motion:reduce){ .site-footer button{ transition:none; } }
@media (prefers-contrast:more){ .site-footer .content{ box-shadow:none; } }


/* -------------------------------------------------
   EverWardrobe — Capsule Room (scoped to #capsule-room)
   Clean, semantic, WCAG-friendly; minimal hooks
--------------------------------------------------*/
:root {
    --ink: #1A1A1A;
    --ink-2: #4A403B;
    --cream: #FFF0E2;
    --paper: #FFF7EE;
    --brown: #664630;
    --accent: #E65C27;
  
    --r: 14px;
    --r-lg: 18px;
  
    --shadow-1: 0 22px 40px rgba(34,21,13,.18), 0 6px 14px rgba(34,21,13,.12);
    --ring: 0 0 0 3px rgba(230,92,39,.38);
  
    /* Card sizing / layout */
    --card-min: 240px;
    /* wider on desktop so 4-up doesn’t feel cramped */
    --card-max: clamp(280px, 21vw, 430px);
  
    /* Vertical rhythm */
    --previews-gap: clamp(16px, 2.4vw, 28px);
    --grid-gap: clamp(18px, 2.4vw, 28px);
  }
  a, p, h1,h2{
    text-decoration: none;
  }
  
    #capsule-room a {
        font-family: "Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial;
        font-weight: 300;
    }
  #capsule-room .container {
    width: 80%;
    margin: 0 auto;
  }
  
  /* =================== HERO =================== */
  #capsule-room .hero {
    position: relative;
    z-index: 0; /* sits under the next section, prevents overlap-on-top */
    padding-block: clamp(32px, 8vw, 100px) 0;
    background:
      linear-gradient(180deg, rgba(239,146,63,.14) 0%, rgba(239,146,63,.08) 40%, rgba(239,146,63,0) 75%),
      linear-gradient(180deg, var(--paper), var(--cream));
    overflow: hidden;
  }
  
  #capsule-room .hero > .container {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(16px, 4vw, 28px);
    align-items: center;
    min-height: clamp(520px, 64vh, 860px);
  }
  
  #capsule-room .hero :is(.eyebrow) {
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .8rem;
    color: var(--ink-2);
  }
  
  #capsule-room h1 {
    font-family: "Playfair Display", serif;
    font-weight: 700;
    line-height: 1.05;
    font-size: clamp(40px, 6.5vw, 72px);
    margin: 6px 0 10px;
    color: var(--accent);
  }
  
  #capsule-room .lead {
    color: var(--ink-2);
    font-size: clamp(16px, 2.4vw, 20px);
    max-width: 48ch;
  }
  
  #capsule-room .cta-row {
    display: flex;
    gap: 12px;
    margin-top: clamp(16px, 3vw, 24px);
    flex-wrap: wrap;
  }
  
  #capsule-room .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 36px;
    min-height: 44px;
    border: 2px solid var(--brown);
    background: transparent;
    color: var(--brown);
    font-weight: 700;
    border-radius: 12px;
    font-size: clamp(16px, 1.2vw, 18px);
    transition: transform .12s ease, background .2s, border-color .2s, color .2s;
  }
  
  #capsule-room .btn:hover {
    transform: translateY(-1px);
    background: var(--brown);
    color: #fff;
  }
  
  #capsule-room .btn:active {
    transform: translateY(0);
    background: #4b3328;
    color: #fff;
  }
  
  /* hero media */
  #capsule-room .hero figure img {
    width: clamp(300px, 48vw, 700px);
    max-height: clamp(420px, 60vh, 760px);
    aspect-ratio: 3 / 4;
    object-fit: contain;
    border-radius: var(--r-lg);
    filter: drop-shadow(0 24px 40px rgba(34,21,13,.18));
    background: #F7EFE8;
    margin-inline: auto;
  }
  
  @media (min-width: 1030px) {
    #capsule-room .hero > .container {
      grid-template-columns: 1.05fr .95fr;
    }
  
    /* keep the image BELOW the brown section in stacking, not overlapping it */
    #capsule-room .hero > .container > figure {
      justify-self: end;
      align-self: end;
      /* removed old negative margin that caused overlap */
      margin-bottom: 0;
      z-index: 0;
    }
  }
  
  /* ================ PICKER ================ */
  #capsule-room .picker {
    position: relative;
    z-index: 1; /* ensures it sits above the hero if sections touch */
    background: var(--brown);
    color: #F8EFE6;
    /* remove the old negative margin; add solid spacing */
    margin-top: 0;
    padding-block: clamp(80px, 11vw, 160px);
  }
  
  #capsule-room .picker > .container > h2 {
    font-family: "Playfair Display", serif;
    font-weight: 700;
    text-align: center;
    font-size: clamp(28px, 4.6vw, 52px);
    /* more breathing room below the section title */
    margin: 0 0 clamp(44px, 7.5vw, 72px);
    color: #FFF7EE;
  }
  
  /* Grid */
  #capsule-room .capsule-grid {
    display: grid;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    grid-template-columns: 1fr;
    gap: var(--grid-gap);
    justify-content: center;
  }

  @media (min-width: 600px) {
    #capsule-room .capsule-grid {
      grid-template-columns: repeat(2, minmax(var(--card-min), 1fr));
    }
  }
  
  @media (min-width: 1200px) {
    #capsule-room .capsule-grid {
      /* 4 cols, wider cards, and a bigger inter-card gap */
      grid-template-columns: repeat(4, minmax(var(--card-min), var(--card-max)));
      gap: clamp(24px, 2.6vw, 36px);
    }
  }
  
  /* Card (anchor as card) */
  #capsule-room .capsule-grid > li > a {
    position: relative;
    display: grid;
    grid-template-rows: auto auto;
    row-gap: clamp(14px, 1.6vw, 20px);
    width: 100%;
    border-radius: var(--r-lg);
    background: var(--paper);
    box-shadow: var(--shadow-1);
    transition: transform .22s ease;
    overflow: visible;
  
    /* Slightly more left padding to balance visuals without centering text */
    padding-block: clamp(18px, 2.4vw, 28px);
    padding-inline: clamp(20px, 2.2vw, 32px) clamp(14px, 1.8vw, 24px);
  }
  
  #capsule-room .capsule-grid > li > a:hover {
    transform: translateY(-3px);
  }
  
  #capsule-room .capsule-grid > li > a::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: calc(var(--r-lg) + 8px);
    border: 4px solid transparent;
    transition: border-color .18s ease, box-shadow .18s ease;
    pointer-events: none;
  }
  
  #capsule-room .capsule-grid > li > a:is(:hover, :focus-visible)::after {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(230,92,39,.18);
  }
  
  /* Card header text block */
  #capsule-room .capsule-grid > li > a > header {
    text-align: center;
  }
  
  @media (min-width: 600px) {
    #capsule-room .capsule-grid > li > a > header {
      text-align: left;
    }
  }
  
  /* Title + description with more spacing */
  #capsule-room .capsule-grid h3 {
    font-family: "Playfair Display", serif;
    color: var(--accent);
    font-weight: 700;
    line-height: 1.08;
    font-size: clamp(22px, 2.6vw, 30px);
    margin: 0 0 6px;
  }
  
  #capsule-room .capsule-grid h3 + p {
    color: var(--ink-2);
    font-size: clamp(16px, 1.2vw, 19px);
    line-height: 1.45;
    font-weight: 500;
    letter-spacing: .005em;
    /* ↑ more space below description before previews */
    margin: 0 0 clamp(12px, 1.4vw, 18px);
  }
  
  /* Previews (small look tiles) */
  #capsule-room .previews {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(10px, 1.4vw, 16px);
    /* base spacing + per-row compensation from JS */
    margin-bottom: calc(var(--previews-gap) + var(--head-gap-comp, 0px));
  }
  
  #capsule-room .previews img {
    width: 68%;
    max-width: 140px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--r);
    background: #F3ECE6;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
  }
  
  @media (min-width: 600px) {
    #capsule-room .previews {
      flex-direction: row;
      align-items: flex-start;
      justify-content: flex-start;
    }
  
    #capsule-room .previews img {
      width: 36%;
      max-width: none;
    }
  }
  
  /* Hero image inside each card (last figure) */
  #capsule-room .capsule-grid > li > a > figure:last-child {
    display: grid;
    place-items: end center;
    margin: 0;
  }
  
  #capsule-room .capsule-grid > li > a > figure:last-child img {
    height: clamp(210px, 14vw, 300px);
    width: auto;
    max-width: 86%;
    object-fit: contain;
    transform-origin: bottom center;
    filter: drop-shadow(0 12px 18px rgba(34,21,13,.14));
    transition: transform .25s ease;
  }
  
  @media (min-width: 500px) {
    #capsule-room .capsule-grid > li > a > figure:last-child img {
      height: clamp(240px, 18vw, 340px);
    }
  }
  
  @media (min-width: 900px) and (max-width: 1099.98px) {
    #capsule-room .previews img {
      width: 34%;
    }
  
    #capsule-room .capsule-grid > li > a > figure:last-child img {
      height: clamp(260px, 20vw, 360px);
    }
  }
  
  /* Motion safety */
  @media (prefers-reduced-motion: reduce) {
    #capsule-room .capsule-grid > li > a {
      transition: none;
    }
  
    #capsule-room .capsule-grid > li > a > figure:last-child img {
      transition: none;
    }
  
    #capsule-room .btn {
      transition: none;
    }
  }
  #capsule-room .capsule-grid > li > a > figure:last-child {
    margin: 0;
    height: 400px;              /* how tall you want the “window” */
    overflow: hidden;           /* this is what crops it */
    display: flex;
    justify-content: center;
    align-items: flex-start;    /* keep top of image visible */
  }
  #capsule-room .capsule-grid > li > a > figure:last-child img {
    width: 100%;
    height: 100%;
    max-width: none;            /* override 86% */
    object-fit: cover;          /* crop instead of shrink */
    object-position: top center;/* show top of outfit */
    transform-origin: center bottom;
    
  }
    


/* =========================
   SITE HEADER
   Mobile-first responsive design
   ========================= */

.site-header {
    background: #FFFAF6;
    border-bottom: 1px solid #EFE5DC;
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
  }
  
  .site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem clamp(14px, 5vw, 28px);
  }
  
  /* Logo */
  .site-header .logo {
    flex-shrink: 0;
  }
  
  .site-header .brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
  }
  
  .site-header .brand img {
    width: 100px;
    height: auto;
    max-width: 150px;
    display: block;
  }
  
  .site-header .brand:hover {
    opacity: 0.8;
    transition: opacity 0.2s ease;
  }
  
  /* Navigation - Desktop (≥900px) */
  .site-header .primary-nav {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  .site-header .primary-nav a {
    color: #482B17;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.2s ease;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
  }
  
  .site-header .primary-nav a:hover {
    color: #D86235;
    border-bottom-color: #D86235;
  }
  
  /* Hamburger Menu Button */
  .site-header .hamburger {
    display: none;
    appearance: none;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 32px;
    height: 24px;
    position: relative;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
  
  }
  
  .site-header .hamburger span {
    position: absolute;
    left: 0;
    right: 0;
    height: 2.5px;
    background: #482B17;
    border-radius: 2px;
    transition: all 0.3s ease;
  }
  
  .site-header .hamburger span:nth-child(1) {
    top: 4px;
  }
  
  .site-header .hamburger span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
  }
  
  .site-header .hamburger span:nth-child(3) {
    bottom: 4px;
  }
  
  .site-header .hamburger[aria-expanded="true"] span:nth-child(1) {
    transform: rotate(45deg) translateY(11px);
  }
  
  .site-header .hamburger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  
  .site-header .hamburger[aria-expanded="true"] span:nth-child(3) {
    transform: rotate(-45deg) translateY(-11px);
  }
  
  /* Mobile: Show hamburger, hide nav */
  @media (max-width: 899px) {
    .site-header .hamburger {
      display: block;
    }
  
  
  
    .site-header .primary-nav {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      flex-direction: column;
      gap: 0;
      background: #FFFAF6;
      border-bottom: 1px solid #EFE5DC;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
    }
  
    .site-header .primary-nav[aria-expanded="true"] {
      max-height: 500px;
    }
  
    .site-header .primary-nav a {
      display: block;
      padding: 1rem clamp(14px, 5vw, 28px);
      border-bottom: 1px solid #F0E8E0;
      font-weight: 600;
      font-size: 16px;
      color: #482B17;
      transition: all 0.2s ease;
    }
  
    .site-header .primary-nav a:hover {
      background-color: #F8F6F3;
      color: #D86235;
    }
  
  
  }

  #capsule-room .site-header a {
    font-weight: 400;

  }