/* ==========================================================================
   THE ADORÉE — BASE
   Reset, typography, layout primitives, buttons and reveal motion.

   Moved verbatim from the approved prototype (adoree-prototype-v3.html).
   Declarations are unchanged. Every value that can be a token is a token;
   the tokens themselves live in tokens.css and are never edited here.
   ========================================================================== */


/* ---------- Reset, base typography and layout primitives ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--c-bg);color:var(--c-text);font-family:var(--f-body);font-weight:300;
  font-size:var(--t-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);-webkit-font-smoothing:antialiased}
/* ---------- Tactile paper grain texture overlay (lossless PNG, <12KB, zero GPU blending) ---------- */
body::before{content:'';position:fixed;inset:0;width:100vw;height:100vh;
  background-image:url('../assets/img/grain.png');background-repeat:repeat;
  opacity:.035;pointer-events:none;z-index:50}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a:visited{color:inherit}
a:hover,a:focus,a:active{color:var(--c-btn)}
p a:not(.btn), .prose a:not(.btn), .measure a:not(.btn){color:var(--c-text);text-decoration:underline;text-underline-offset:3px}
p a:not(.btn):hover, .prose a:not(.btn):hover, .measure a:not(.btn):hover{color:var(--c-btn)}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
:focus-visible{outline:2px solid var(--c-btn);outline-offset:3px}
h1,h2,h3,h4,h5,h6{font-weight:400;margin:0;letter-spacing:var(--ls-h);line-height:var(--lh-h);color:var(--c-text)}
h1{font-family:var(--f-h1);font-size:var(--t-h1)}
h2{font-family:var(--f-h2);font-size:var(--t-h2)}
h3{font-family:var(--f-h3);font-size:var(--t-h3)}
h4{font-family:var(--f-h4);font-size:var(--t-h4)}
h5,h6{font-family:var(--f-h4);font-size:var(--t-h4)}
/* Sub-28px heading floor protection: WooCommerce block headings sized below 28px fall back to Marcellus */
[class*="wc-block-"] h2,
[class*="wc-block-"] h3,
.wc-block-cart__empty-cart__title {
  font-family: var(--f-display-sub);
}
p{margin:0}
form,label,input,select,textarea{font-family:var(--f-body);color:var(--c-text)}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}

/* Section rhythm */
.sec{padding-block:var(--sec-y)}
.sec--tight,.sec-tight{padding-block:var(--sec-y-tight)}
.sec--standard{padding-block:var(--sec-y-standard)}
.sec--expansive{padding-block:var(--sec-y-expansive)}

/* Typography scale utilities */
.eyebrow{font-size:var(--t-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--c-muted);font-weight:400;display:block}
.lead{font-size:var(--t-lead);color:var(--c-muted);max-width:var(--measure)}
.t-hero{font-family:var(--f-hero);font-size:var(--t-hero);letter-spacing:var(--ls-display);line-height:var(--lh-display)}
.t-h1{font-family:var(--f-h1);font-size:var(--t-h1)}
.t-h2{font-family:var(--f-h2);font-size:var(--t-h2)}
.t-h3{font-family:var(--f-h3);font-size:var(--t-h3)}
.t-h4{font-family:var(--f-h4);font-size:var(--t-h4)}
.micro{font-size:var(--t-micro);letter-spacing:var(--ls-ui);text-transform:uppercase;color:var(--c-muted)}

/* Prose measure cap (62–68 characters) */
.measure,.article p,.article__body p,.article__content p,.prose p,.faq .body,.note{max-width:var(--measure)}

/* ---------- Parent theme variable overrides & buttons ---------- */
:root,
:root:root{
  --theme-palette-color-1:var(--c-accent);
  --theme-palette-color-2:var(--c-btn-hover);
  --theme-palette-color-3:var(--c-btn);
  --theme-link-initial-color:var(--c-text);
  --theme-link-hover-color:var(--c-btn);
  --wp--preset--color--palette-color-1:var(--c-accent);
  --wp--preset--color--palette-color-2:var(--c-btn-hover);
  --wp--preset--color--palette-color-3:var(--c-btn);
  --theme-headings-color:var(--c-text);
  --theme-heading-color:var(--c-text);
  --theme-text-color:var(--c-text);
  --theme-font-family:var(--f-body);
  --theme-form-font-family:var(--f-body);
  --theme-form-text-initial-color:var(--c-text);
  --theme-button-background-initial-color:var(--c-btn);
  --theme-button-background-hover-color:var(--c-white);
  --theme-button-text-initial-color:var(--c-white);
  --theme-button-text-hover-color:var(--c-btn);
}

/* 1. Dark buttons: dark fill + light text, hover inverses colors (light fill + dark text) */
.btn,
.button,
button[type="submit"],
input[type="submit"],
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce [type="submit"],
button.woocommerce-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);background:var(--c-btn);color:var(--c-white);
  padding:16px 42px;min-height:48px;font-size:var(--t-micro);letter-spacing:var(--ls-btn);text-transform:uppercase;
  border:1px solid var(--c-btn);border-radius:var(--r-none);transition:background var(--d-fast) var(--e-ui),transform var(--d-fast),
  border-color var(--d-fast) var(--e-ui),box-shadow var(--d-fast) var(--e-ui),color var(--d-fast) var(--e-ui)}
.btn:hover,
.button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce [type="submit"]:hover,
button.woocommerce-button:hover{background:var(--c-white);color:var(--c-btn);border-color:var(--c-btn)}
.btn:active,
.button:active,
.woocommerce button.button:active{transform:translateY(1px)}
.btn:disabled,.btn[aria-disabled="true"],
.button:disabled,.button[aria-disabled="true"],
.woocommerce button.button:disabled{background:var(--c-inactive);color:var(--c-text);
  border-color:var(--c-inactive);box-shadow:none;cursor:not-allowed;transform:none}

/* 2. Light buttons: light fill + dark text, hover inverses colors (dark fill + light text) */
.btn.light{background:var(--c-white);color:var(--c-text);border:1px solid var(--c-white)}
.btn.light:hover{background:var(--c-btn);color:var(--c-white);border-color:var(--c-btn)}

/* 3. Transparent buttons: transparent fill, hover has light color fill with dark text */
.btn.ghost{background:transparent;color:var(--c-text);border:1px solid var(--c-btn)}
.btn.ghost:hover{background:var(--c-white);color:var(--c-btn);border-color:var(--c-btn);box-shadow:none}
.btn.on-dk{background:transparent;color:var(--c-white);border:1px solid rgba(255,255,255,.55)}
.btn.on-dk:hover{background:var(--c-white);color:#332C2D;border-color:var(--c-white);box-shadow:none}
.btn.block{display:flex;width:100%}
.btn.sm{padding:12px 24px;min-height:44px}
.link-u{font-size:var(--t-micro);letter-spacing:var(--ls-ui);text-transform:uppercase;border-bottom:1px solid var(--c-accent);padding-bottom:3px}

/* ---------- Full-bleed image treatment (collapses to nothing if no image) ---------- */
.bleed{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;overflow:hidden}
figure.bleed:empty,figure.bleed:not(:has(img)){display:none!important}
.bleed:empty{display:none!important}
figure.bleed img{width:100%;height:auto;max-height:75vh;object-fit:cover;display:block}

/* ---------- Reveal motion — .rev / .stag / .word, and the reduced-motion escape hatch ---------- */
/* ---------- reveal motion ---------- */
.rev{opacity:0;transform:translateY(var(--rise));transition:opacity var(--d-slow) var(--e-out),transform var(--d-slow) var(--e-out)}
.rev.in{opacity:1;transform:none}
.stag>*{opacity:0;transform:translateY(var(--rise));transition:opacity var(--d-slow) var(--e-out),transform var(--d-slow) var(--e-out)}
.stag.in>*{opacity:1;transform:none}
.stag.in>*:nth-child(1){transition-delay:0ms}
.stag.in>*:nth-child(2){transition-delay:var(--stagger)}
.stag.in>*:nth-child(3){transition-delay:calc(var(--stagger)*2)}
.stag.in>*:nth-child(4){transition-delay:calc(var(--stagger)*3)}
.stag.in>*:nth-child(5){transition-delay:calc(var(--stagger)*4)}
.stag.in>*:nth-child(6){transition-delay:calc(var(--stagger)*5)}
.stag.in>*:nth-child(7){transition-delay:calc(var(--stagger)*6)}
.stag.in>*:nth-child(8){transition-delay:calc(var(--stagger)*7)}
.word{display:inline-block;opacity:0;transform:translateY(.36em);
  transition:opacity .7s var(--e-out),transform .7s var(--e-out)}
.word.in{opacity:1;transform:none}

/* Fail-open: when scripting is unavailable or printing, reveals are immediately visible */
@media (scripting: none), print {
  .rev, .stag > *, .word { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* ---------- Native CSS scroll-driven parallax (Desktop only: >=1024px & fine pointer) ---------- */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @keyframes parallax-subtle {
      from { transform: translateY(-5%); }
      to { transform: translateY(5%); }
    }
    .wordband,
    .news,
    .bleed.parallax {
      view-timeline: --bleed-timeline block;
      overflow: hidden;
    }
    .wordband > img,
    .wordband > picture img,
    .news > img,
    .news > picture img,
    .bleed.parallax img,
    .bleed.parallax picture img {
      will-change: transform;
      animation: parallax-subtle linear both;
      animation-timeline: --bleed-timeline;
      animation-range: entry 0% exit 100%;
      height: 110%;
      top: -5%;
    }
  }
}

@media(prefers-reduced-motion:reduce){
  /* 1. Kill decorative work and continuous ambient animations */
  html{scroll-behavior:auto!important}
  .marquee__track,.announce__track{animation:none!important}
  body::before{animation:none!important}
  .hero::before,.lx-hero::before,.pagehero::before{display:none!important;animation:none!important}
  .wordband, .news, .bleed.parallax,
  .wordband img, .wordband picture img,
  .news img, .news picture img,
  .bleed img, .parallax img,
  .bleed.parallax img, .bleed.parallax picture img{
    animation:none!important;
    transform:none!important;
    view-timeline:none!important;
  }
  .palette.has-bg, .luxe-teaser.has-bg{clip-path:none!important}
  .palette.has-bg .palette__bg, .luxe-teaser.has-bg .luxe-teaser__bg{
    position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
  }
  .edit__tile img,.cat img,.post__img img,.iggrid img{transform:none!important;transition:none!important}
  .card__img--alt,.card__shot picture:nth-of-type(2) img,.card__shot > img:nth-of-type(2){transform:none!important}

  /* 2. Scroll reveals appear immediately at full opacity — never stranded invisible */
  .rev,.stag>*,.word{opacity:1!important;transform:none!important;transition:none!important}

  /* 3. Retime short functional state transitions to 150ms */
  header,.bar,.brand img,
  .drawer__panel,.drawer::before,
  .btn,.button,button,a,.chip,.fopt,input,select,textarea{
    transition-duration:150ms!important;
    animation-duration:150ms!important;
  }
}

/* ---------- Page visibility — every page file marks its <main> as `page on` ---------- */
main.page{display:none}main.page.on{display:block}

/* ---------- Placeholder copy ---------- */
.lorem{color:var(--c-muted)}

/* ---------- Structural rules added by this build (not in the prototype) ----------
   The prototype inlined every image as a bare <img>. This build emits WebP with a
   JPEG/PNG fallback, which requires a <picture> wrapper. `display:contents` removes
   that wrapper from layout entirely, so every existing `.parent img { … }` rule
   resolves against the same containing block it did in the prototype. No design
   value is introduced here.                                                      */
picture{display:contents}
picture>source{display:none}   /* `display:contents` re-exposes <source>;
                                  without this it claims a grid/flex slot */