/*
Theme Name: Kessine
Theme URI: https://kessine.com.au
Description: Config-driven single-page brand theme for Kessine. Kakadu Plum Vitamin C Serum.
Version: 1.0.0
Author: Kessine
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: kessine
*/

  /* ---------- Design tokens ---------- */
  :root{
    --cream:#F4ECDD;
    --sand:#E7D7BF;
    --bronze:#B0894C;
    --bronze-deep:#8A6A34;
    --bronze-light:#CBA469;
    --charcoal:#2C2A24;
    --charcoal-soft:#3A372F;
    --font-head:"Cormorant", Georgia, "Times New Roman", serif;
    --font-body:"Lato", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    --maxw:1240px;
    --gutter:clamp(1.25rem, 5vw, 4rem);
  }

  /* ---------- Reset / base ---------- */
  *,*::before,*::after{box-sizing:border-box;}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
  body{
    margin:0;
    font-family:var(--font-body);
    font-weight:400;
    color:var(--charcoal);
    background:var(--cream);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  img,video{display:block;max-width:100%;height:auto;}
  a{color:inherit;text-decoration:none;}
  h1,h2,h3{font-family:var(--font-head);font-weight:500;margin:0;letter-spacing:.005em;}

  /* ---------- Shared type ---------- */
  .eyebrow{
    font-family:var(--font-body);
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:var(--bronze);
    margin:0 0 1.4rem;
  }
  .eyebrow--on-dark{color:var(--bronze-light);}
  .lede{
    font-size:clamp(1.02rem,1.6vw,1.22rem);
    font-weight:300;
    max-width:34ch;
    margin:1.6rem 0 0;
    color:inherit;
    opacity:.9;
  }
  h1{font-size:clamp(2.9rem,8.5vw,6.1rem);line-height:1.02;}
  h2{font-size:clamp(2.2rem,5.5vw,4rem);line-height:1.06;}

  /* ---------- Bronze rule w/ centre dot (echoes the wordmark) ---------- */
  .rule{display:flex;align-items:center;gap:.9rem;width:clamp(120px,18vw,220px);}
  .rule::before,.rule::after{content:"";height:1px;flex:1;background:var(--bronze);opacity:.65;}
  .rule i{width:6px;height:6px;border-radius:50%;background:var(--bronze);flex:0 0 auto;}
  .rule--center{margin-inline:auto;}

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex;align-items:center;gap:.6rem;
    font-family:var(--font-body);
    font-size:.82rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
    background:var(--bronze);color:var(--cream);
    padding:1.05rem 2.4rem;border:0;border-radius:2px;cursor:pointer;
    transition:background .25s ease, transform .25s ease;
  }
  .btn:hover{background:var(--bronze-deep);transform:translateY(-2px);}
  .btn svg{width:14px;height:14px;}

  /* ---------- Focus states (a11y) ---------- */
  a:focus-visible,.btn:focus-visible,input:focus-visible,button:focus-visible{
    outline:3px solid var(--bronze);outline-offset:3px;border-radius:2px;
  }

  /* ---------- Header ---------- */
  .site-header{
    position:absolute;top:0;left:0;right:0;z-index:20;
    display:flex;align-items:center;justify-content:space-between;
    padding:1.5rem var(--gutter);
  }
  .brand{display:flex;align-items:center;gap:.7rem;color:var(--cream);}
  .brand__mark{width:34px;height:34px;flex:0 0 auto;}
  .brand__name{
    font-family:var(--font-head);font-size:1.5rem;font-weight:600;
    letter-spacing:.42em;text-indent:.42em;line-height:1;
  }
  .header-cta{
    font-family:var(--font-body);font-size:.72rem;font-weight:700;
    letter-spacing:.2em;text-transform:uppercase;color:var(--cream);
    padding:.7rem 1.3rem;border:1px solid rgba(244,236,221,.5);border-radius:2px;
    transition:background .25s ease, color .25s ease;
  }
  .header-cta:hover{background:var(--cream);color:var(--charcoal);}

  /* ---------- 1 · Origin hero ---------- */
  .hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:var(--charcoal);}
  .hero__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  .hero__scrim{
    position:absolute;inset:0;
    background:
      linear-gradient(90deg, rgba(20,19,16,.82) 0%, rgba(20,19,16,.45) 42%, rgba(20,19,16,0) 72%),
      linear-gradient(180deg, rgba(20,19,16,.35) 0%, rgba(20,19,16,0) 30%);
  }
  .hero__inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin-inline:auto;padding:0 var(--gutter);color:var(--cream);}
  .hero__inner h1{max-width:16ch;text-shadow:0 2px 30px rgba(0,0,0,.35);}
  .hero .lede{color:var(--cream);opacity:.86;}
  .hero__rule{margin-top:2.2rem;}

  /* ---------- Editorial split sections ---------- */
  .split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(2rem,6vw,5.5rem);
    max-width:var(--maxw);margin-inline:auto;padding:clamp(4.5rem,11vw,9rem) var(--gutter);}
  .split__text{max-width:40ch;}
  .split__media{position:relative;}
  .split__media img{width:100%;border-radius:3px;box-shadow:0 30px 70px -30px rgba(0,0,0,.55);}
  .split--reverse .split__media{order:-1;}
  @media (max-width:820px){
    .split{grid-template-columns:1fr;gap:2.4rem;}
    .split--reverse .split__media{order:0;}
  }

  .band{width:100%;}
  /* Fruit band: cool blue-slate sampled from fruit-macro.png so the photo melts into the section */
  .band--charcoal{
    background:radial-gradient(120% 130% at 40% 42%, #272c33 0%, #1a1f25 52%, #12161b 100%);
    color:var(--cream);
  }
  .band--charcoal .split__media img{
    box-shadow:0 0 110px 50px rgba(24,29,35,.95), 0 30px 70px -30px rgba(0,0,0,.6);
  }
  /* Drop band: warm near-black to bronze glow sampled from macro-drop.png */
  .band--drop{
    background:radial-gradient(95% 140% at 26% 48%, #191411 0%, #241b14 42%, #3b2d20 72%, #55412d 100%);
    color:var(--cream);
  }
  .band--drop .split__media img{
    box-shadow:0 0 110px 50px rgba(22,18,15,.95), 0 30px 70px -30px rgba(0,0,0,.6);
  }
  .band--charcoal .lede,.band--drop .lede{opacity:.85;}

  /* ---------- 3 · The turn (full-bleed) ---------- */
  .turn{position:relative;min-height:82vh;display:flex;align-items:center;overflow:hidden;background:var(--sand);}
  .turn__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center right;}
  .turn__scrim{position:absolute;inset:0;background:linear-gradient(90deg, rgba(244,236,221,.9) 0%, rgba(244,236,221,.55) 38%, rgba(244,236,221,0) 66%);}
  .turn__inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin-inline:auto;padding:0 var(--gutter);}
  .turn__inner h2{max-width:12ch;color:var(--charcoal);}

  /* ---------- 5 · The result ---------- */
  /* Caramel halo sampled from product-hero.png so the shot melts into the sand-to-cream fade */
  .result{
    background:
      radial-gradient(56% 40% at 50% 21%, rgba(190,143,99,.85) 0%, rgba(190,143,99,.45) 48%, rgba(231,215,191,0) 100%),
      linear-gradient(180deg, var(--sand) 0%, var(--cream) 62%);
    text-align:center;
    padding:clamp(4.5rem,11vw,9rem) var(--gutter);}
  .result__inner{max-width:760px;margin-inline:auto;display:flex;flex-direction:column;align-items:center;}
  .result__media{width:min(420px,80vw);margin:0 auto 2.6rem;}
  .result__media img{width:100%;border-radius:4px;
    box-shadow:0 0 110px 55px rgba(185,140,96,.75), 0 40px 80px -35px rgba(44,42,36,.35);}
  .result h2{max-width:16ch;}
  .product-meta{margin:1.9rem 0 .3rem;font-size:1.05rem;}
  .product-meta strong{font-weight:700;}
  .product-price{font-family:var(--font-head);font-size:1.7rem;color:var(--bronze-deep);margin:.2rem 0 2.1rem;}
  .product-ingredients{font-size:.9rem;opacity:.75;max-width:46ch;margin:0 auto 2.4rem;}

  /* ---------- 6 · The ritual ---------- */
  .ritual{background:var(--cream);padding:clamp(4rem,10vw,8rem) var(--gutter) clamp(4.5rem,11vw,9rem);}
  .ritual__head{max-width:var(--maxw);margin:0 auto clamp(2.5rem,5vw,4rem);text-align:center;display:flex;flex-direction:column;align-items:center;}
  .ritual__head h2{max-width:14ch;}
  .ritual__pair{max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,3vw,2rem);}
  .ritual__pair figure{margin:0;}
  .ritual__pair img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:3px;box-shadow:0 24px 60px -30px rgba(44,42,36,.4);}
  @media (max-width:640px){.ritual__pair{grid-template-columns:1fr;}}

  /* ---------- 7 · Founding list ---------- */
  .founding{background:var(--sand);padding:clamp(4.5rem,11vw,9rem) var(--gutter);text-align:center;}
  .founding__inner{max-width:600px;margin-inline:auto;display:flex;flex-direction:column;align-items:center;}
  .signup{display:flex;gap:.7rem;width:100%;max-width:460px;margin:2.2rem auto 1rem;}
  .signup input[type=email]{
    flex:1;font-family:var(--font-body);font-size:1rem;color:var(--charcoal);
    padding:1rem 1.1rem;border:1px solid var(--bronze);border-radius:2px;background:var(--cream);
  }
  .signup input[type=email]::placeholder{color:#8b8578;}
  .consent{font-size:.78rem;opacity:.72;max-width:42ch;margin:.6rem auto 0;line-height:1.5;}
  .consent a{color:var(--bronze-deep);text-decoration:underline;text-underline-offset:2px;}
  @media (max-width:520px){.signup{flex-direction:column;}}

  /* ---------- Footer ---------- */
  .site-footer{background:var(--cream);border-top:1px solid rgba(176,137,76,.35);
    padding:clamp(3rem,7vw,5rem) var(--gutter) 2.5rem;text-align:center;}
  .site-footer img{width:150px;height:auto;margin:0 auto 1.8rem;}
  .footer-nav{display:flex;flex-wrap:wrap;gap:.4rem 2rem;justify-content:center;
    font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:1.8rem;}
  .footer-nav a:hover{color:var(--bronze-deep);}
  .footer-legal{font-size:.78rem;opacity:.72;line-height:1.7;max-width:52ch;margin-inline:auto;}
  .footer-legal .made{font-weight:700;letter-spacing:.05em;opacity:.9;}

  /* ---------- Motion preference ---------- */
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;} *{transition:none!important;}}

  /* ---------- Theme additions (signup status, utilities) ---------- */
  .signup__status{font-size:.85rem;margin-top:.8rem;color:var(--charcoal);}
  .signup__status--error{color:#8a2f2b;}
  .visually-hidden{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
    border:0;padding:0;margin:-1px;
  }
  .signup-hp{position:absolute;left:-9999px;}