:root{
    /* ================= BRAND =================
       Two colours only: turquoise and maroon. Identical in both themes. */
    --turquoise:#4EBAC6;
    --turquoise-bright:#7FD3DC;
    --maroon:#57100C;
    --maroon-deep:#3A0A07;
    --on-accent:#10201F;   /* text sitting on a turquoise fill */
    --on-maroon:#F6EAE6;   /* text sitting on a maroon block — fixed in both themes */

    /* ---- Our Story type scale (adjustable from the Type tab of the editor) ---- */
    --h-size:6.7rem; --h-weight:600; --h-italic:italic; --h-track:-0.012em;
    --h-lead:0.85; --h-color:#FFFDFC; --h-shadow:0.85;
    --b-size:1.7rem; --b-weight:400; --b-color:255,235,228; --b-alpha:0.79;
    --b-lead:2.2; --b-width:78ch;
    --gap:20px; --rule-w:180px; --rule-h:10px; --t-width:110em; --veil-k:1.8;
    --h-width:70em; --h-ws:normal; --h-tw:wrap; --scene-w:1580px; --scene-pad:260px;
    --b-ws:normal; --b-tw:wrap;

    /* ---- Headings: Playfair (free, SIL Open Font License, unlimited use)
            Weight 300–900 · italics · width axis · optical size 5–1200 ---- */
    --font-display:'Playfair',Georgia,serif;
    /* ---- Body + UI: Inter ---- */
    --font-body:'Inter',system-ui,-apple-system,sans-serif;
    --font-ui:'Inter',system-ui,-apple-system,sans-serif;
  }

  /* ================= DARK THEME =================
     Maroon-tinted rather than neutral black, so maroon stays present
     as a surface colour and turquoise reads as the accent. */
  html[data-theme="dark"]{
    --bg-0:#180706;   /* page */
    --bg-1:#240C09;   /* raised card */
    --bg-2:#30110D;   /* highest / hover */
    --text:#F6EAE6;
    --text-soft:#CDAFA9;
    --text-faint:#9A7C77;
    --accent-text:#4EBAC6;          /* turquoise is legible on dark as-is */
    --rule:rgba(246,234,230,0.14);
    --rule-strong:rgba(246,234,230,0.26);
    --shadow:0 18px 48px rgba(0,0,0,0.45);
    --nav-bg:rgba(24,7,6,0.88);
    --overlay:rgba(10,3,2,0.8);
  }

  /* ================= LIGHT THEME =================
     Warm off-white surfaces, maroon as the text colour, and a
     darkened turquoise for accent text so it still clears WCAG AA. */
  html[data-theme="light"]{
    --bg-0:#FDF8F1;
    --bg-1:#F5EBDF;
    --bg-2:#EBDECE;
    --text:#2A0D09;
    --text-soft:#6B443C;
    --text-faint:#87615A;
    --accent-text:#1B6570;          /* turquoise darkened for legibility */
    --rule:rgba(42,13,9,0.16);
    --rule-strong:rgba(42,13,9,0.3);
    --shadow:0 18px 48px rgba(87,16,12,0.14);
    --nav-bg:rgba(253,248,241,0.9);
    --overlay:rgba(42,13,9,0.55);
  }
  *,*::before,*::after{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;background:var(--bg-0);color:var(--text);
    font-family:var(--font-body);font-size:17px;line-height:1.7;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{font-family:var(--font-display);color:var(--text);margin:0 0 .4em;}
  h1{font-size:clamp(2.8rem,6vw,4.6rem);line-height:1.02;font-weight:400;letter-spacing:-0.015em;}
  h2{font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1.12;font-weight:400;letter-spacing:-0.01em;}
  h3{font-size:1.3rem;font-weight:600;font-style:italic;}
  h4{font-size:1.05rem;font-weight:600;}
  p{margin:0 0 1em;}
  a{color:inherit;}
  ul{margin:0;padding:0;list-style:none;}
  button{font-family:var(--font-ui);cursor:pointer;}
  :focus-visible{outline:2.5px solid var(--turquoise);outline-offset:3px;}
  img{max-width:100%;}
  .container{max-width:1100px;margin:0 auto;padding:0 28px;}
  .note{font-size:.86rem;color:var(--text-soft);}
  .badge{
    display:inline-block;font-family:var(--font-ui);font-size:.72rem;font-weight:600;
    text-transform:uppercase;letter-spacing:.06em;padding:.3em .7em;border-radius:100px;
    background:rgba(78,186,198,0.16);color:var(--accent-text);
    border:1px solid rgba(78,186,198,0.4);margin-bottom:.8em;
  }


  /* ---------- Nav ---------- */
  .nav{
    position:sticky;top:0;z-index:40;
    background:var(--nav-bg);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--rule);
  }
  .nav__inner{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 28px;max-width:1100px;margin:0 auto;
  }
  .nav__brand{background:none;border:none;padding:0;display:flex;align-items:center;}
  .nav__brand img{display:block;height:40px;width:auto;}
  .nav__actions{display:flex;align-items:center;gap:10px;}
  .theme-toggle{
    background:none;border:1px solid var(--rule-strong);border-radius:100px;
    padding:8px 10px;color:var(--text);display:inline-flex;align-items:center;
    transition:background .15s,border-color .15s;
  }
  .theme-toggle:hover{background:var(--bg-2);border-color:var(--accent-text);}
  .theme-toggle svg{width:17px;height:17px;display:block;}
  html[data-theme="dark"] .icon-moon,
  html[data-theme="light"] .icon-sun{display:none;}
  .nav__links{display:flex;gap:4px;}
  .nav__link{
    background:none;border:none;font-size:.92rem;font-weight:500;color:var(--text-soft);
    padding:9px 15px;border-radius:8px;transition:background .15s,color .15s;
  }
  .nav__link:hover{background:var(--bg-2);color:var(--text);}
  .nav__link.is-active{color:var(--accent-text);background:rgba(78,186,198,0.12);font-weight:600;}
  .nav__toggle{display:none;background:none;border:1px solid var(--rule-strong);border-radius:8px;padding:8px 12px;color:var(--text);}
  @media (max-width:860px){
    .nav__links{
      display:none;position:absolute;top:100%;left:0;right:0;background:var(--bg-1);
      flex-direction:column;gap:0;border-bottom:1px solid var(--rule);padding:8px;box-shadow:var(--shadow);
    }
    .nav__links.is-open{display:flex;}
    .nav__link{width:100%;text-align:left;padding:13px 14px;}
    .nav__toggle{display:block;}
  }

  /* ---------- Page scaffolding ---------- */
  .page{display:none;}
  .page.is-active{display:block;}
  section.block{padding:96px 0;}
  .block--tint{background:var(--bg-1);}
  .block--maroon{background:var(--maroon);}
  .block--center{text-align:center;}
  .block--center .prose{margin-left:auto;margin-right:auto;}
  .prose{max-width:64ch;font-size:1.06rem;}

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex;align-items:center;gap:.55em;
    font-family:var(--font-ui);font-weight:600;font-size:.92rem;
    padding:13px 26px;border-radius:100px;border:1.5px solid transparent;
    text-decoration:none;transition:transform .15s,background .15s,border-color .15s,color .15s;
  }
  .btn:hover{transform:translateY(-1px);}
  .btn--primary{background:var(--turquoise);color:var(--on-accent);}
  .btn--primary:hover{background:var(--turquoise-bright);}
  .btn--ghost{border-color:var(--accent-text);color:var(--accent-text);background:transparent;}
  .btn--ghost:hover{background:var(--turquoise);color:var(--on-accent);}
  .btn--quiet{border-color:var(--rule-strong);color:var(--text);background:transparent;}
  .btn--quiet:hover{background:var(--bg-2);}
  .btn--sm{padding:9px 18px;font-size:.85rem;}
  .btn-row{display:flex;flex-wrap:wrap;gap:14px;}
  .btn-row--center{justify-content:center;}

  /* ---------- Home hero ---------- */
  .hero{padding:132px 0 108px;text-align:center;}
  .hero__mark{height:72px;width:auto;opacity:.9;margin-bottom:34px;}
  .hero__lede{font-size:1.2rem;color:var(--text-soft);max-width:50ch;margin:0 auto 2.2em;}

  /* ---------- Products ---------- */
  .product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
  @media (max-width:880px){.product-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:540px){.product-grid{grid-template-columns:1fr;}}
  .product-grid--featured{display:flex;justify-content:center;flex-wrap:wrap;gap:26px;}
  .product-grid--featured .product-card{max-width:320px;}
  .product-card{
    background:var(--bg-1);border:1px solid var(--rule);border-radius:18px;padding:18px;
    text-align:left;cursor:pointer;width:100%;font:inherit;color:inherit;
    transition:transform .2s,box-shadow .2s,border-color .2s;
  }
  .product-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--turquoise);}
  .product-card svg,.product-card .product-img{
    width:100%;height:auto;border-radius:10px;display:block;border:1px solid var(--rule);
  }
  .product-card h3{font-size:1.12rem;font-style:normal;font-weight:500;margin:1em 0 .5em;line-height:1.25;}
  .tag{
    display:inline-block;font-family:var(--font-ui);font-size:.74rem;font-weight:600;letter-spacing:.03em;
    padding:.3em .8em;border-radius:100px;background:rgba(78,186,198,0.14);color:var(--accent-text);
  }
  .tag--muted{background:var(--bg-2);color:var(--text-soft);}
  .empty-state{
    text-align:center;padding:60px 20px;background:var(--bg-1);
    border:1px dashed var(--rule-strong);border-radius:18px;color:var(--text-soft);
  }

  /* ---------- Collection filters ---------- */
  .filter-bar{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;
    padding:22px;background:var(--bg-1);border:1px solid var(--rule);
    border-radius:16px;margin-bottom:14px;align-items:end;text-align:left;
  }
  .filter-bar label{
    display:block;font-family:var(--font-ui);font-size:.74rem;font-weight:600;
    color:var(--text-soft);text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px;
  }
  .filter-bar select,.filter-bar input{
    width:100%;font-family:var(--font-ui);font-size:.9rem;padding:10px 13px;border-radius:9px;
    border:1px solid var(--rule-strong);background:var(--bg-0);color:var(--text);
  }
  .filter-search{grid-column:1 / -1;}
  .filter-actions{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:34px;}
  .result-count{font-family:var(--font-ui);font-size:.86rem;color:var(--text-soft);}

  /* ---------- Product detail ---------- */
  .product-layout{display:grid;grid-template-columns:320px 1fr;gap:48px;align-items:start;text-align:left;}
  @media (max-width:840px){.product-layout{grid-template-columns:1fr;}}
  .product-media svg,.product-media .product-img{
    width:100%;height:auto;border-radius:14px;box-shadow:var(--shadow);display:block;border:1px solid var(--rule);
  }
  .product-title{margin-bottom:.1em;}
  .product-author{font-family:var(--font-ui);font-size:.95rem;color:var(--text-soft);margin-bottom:1em;}
  .section-label{
    font-family:var(--font-ui);font-size:.76rem;font-weight:600;color:var(--text-soft);
    text-transform:uppercase;letter-spacing:.08em;margin:2em 0 .6em;
    padding-bottom:.5em;border-bottom:1px solid var(--rule);
  }
  .format-list{display:flex;gap:10px;flex-wrap:wrap;}
  .retailer-list{display:flex;flex-direction:column;gap:12px;}
  .retailer-row{
    display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
    background:var(--bg-1);border:1px solid var(--rule);border-radius:14px;padding:16px 20px;
  }
  .retailer-name{font-family:var(--font-ui);font-weight:600;font-size:.95rem;}
  .retailer-price{font-family:var(--font-display);font-size:1.4rem;color:var(--accent-text);font-weight:600;}
  .sync-note{font-family:var(--font-ui);font-size:.78rem;color:var(--text-faint);margin-top:10px;}
  .detail-table{width:100%;border-collapse:collapse;font-size:.95rem;}
  .detail-table th{
    text-align:left;font-family:var(--font-ui);font-size:.82rem;font-weight:600;
    color:var(--text-soft);padding:10px 16px 10px 0;vertical-align:top;width:34%;
  }
  .detail-table td{padding:10px 0;border-bottom:1px solid var(--rule);}
  .detail-table tr:last-child td,.detail-table tr:last-child th{border-bottom:none;}
  .foreword{background:var(--bg-1);border-left:3px solid var(--turquoise);border-radius:0 14px 14px 0;padding:24px 28px;}
  .back-link{
    background:none;border:none;font-family:var(--font-ui);font-size:.88rem;font-weight:600;
    color:var(--accent-text);padding:0;margin-bottom:1.8em;
  }

  /* ============================================================
     OUR STORY — full-bleed scenes
     One phrase per photograph. A shared brand veil unifies them and
     is weighted toward whichever side the words sit on, so the type
     always lands on the darkest part of the frame.
     ============================================================ */
  .scene{
    position:relative;min-height:92vh;display:flex;align-items:center;
    overflow:hidden;isolation:isolate;
  }
  /* The scroll blow-up lives on the wrapper, the manual framing on the photo,
     so the two never fight each other. */
  .scene__bg{
    position:absolute;inset:0;z-index:0;overflow:hidden;
    transform:scale(var(--s,1)) translate3d(0,var(--iy,0px),0);
    will-change:transform;
  }
  /* A blurred copy fills the frame, so pulling the photo back past "fill"
     never leaves empty bars. */
  .scene__blur{
    position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;
    filter:blur(38px) brightness(0.55) saturate(0.8);transform:scale(1.06);
  }
  /* contain, not cover — the whole frame is available; --z decides how much
     of it you see, and can go below fill. */
  .scene__photo{
    position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
    transform:translate(var(--px,0px),var(--py,0px)) scale(var(--z,1)) scaleX(var(--flip,1));
    transform-origin:center center;will-change:transform;
  }
  /* Shared treatment. --dir flips the wash toward the text side.
     Many stops so the wash reads as a smooth field, never a visible edge. */
  .scene__veil{
    position:absolute;inset:0;z-index:1;pointer-events:none;opacity:var(--veil-k,1);
    background:
      linear-gradient(180deg, rgba(20,6,5,0.86) 0%, rgba(20,6,5,0.26) 24%,
                              rgba(20,6,5,0.30) 72%, rgba(20,6,5,0.90) 100%),
      linear-gradient(calc(90deg * var(--dir,1)),
        rgba(38,9,7,0.97) 0%,  rgba(38,9,7,0.94) 14%, rgba(40,10,7,0.86) 28%,
        rgba(42,10,7,0.70) 42%, rgba(36,9,7,0.48) 58%, rgba(28,8,6,0.30) 74%,
        rgba(24,7,6,0.20) 88%, rgba(24,7,6,0.16) 100%);
  }
  .scene__inner{position:relative;z-index:2;width:100%;max-width:var(--scene-w,1240px);margin:0 auto;padding:0 clamp(20px,5vw,var(--scene-pad,116px));}
  .scene__text{
    position:relative;max-width:var(--t-width,16.5em);
    opacity:var(--t-o,1);
    transform:translate3d(var(--nx,0px),calc(var(--t-y,0px) + var(--ny,0px)),0) scale(var(--t-s,1));
    will-change:transform,opacity;
  }
  .scene--right .scene__text{margin-left:auto;}
  .scene--center .scene__text{margin-left:auto;margin-right:auto;}
  /* veil weighted to the middle rather than to one side */
  .scene--veilcenter .scene__veil{
    background:
      radial-gradient(ellipse 64% 60% at 50% 50%,
        rgba(34,9,7,0.88) 0%, rgba(28,8,6,0.64) 55%, rgba(20,6,5,0.82) 100%),
      linear-gradient(180deg, rgba(20,6,5,0.74) 0%, rgba(20,6,5,0.20) 30%,
                              rgba(20,6,5,0.30) 70%, rgba(20,6,5,0.88) 100%);
  }
  /* the accent rule follows whatever the text alignment is */
  .scene__text[data-align="center"] .scene__rule{margin-left:auto;margin-right:auto;transform-origin:center center;}
  .scene__text[data-align="right"]  .scene__rule{margin-left:auto;transform-origin:right center;}
  /* The headline and body each have their own max-width. Without this they
     stay pinned to the left of the block while their text aligns right,
     so their edges never line up with each other or with the rule. */
  .scene__text[data-align="right"] .scene__pull,
  .scene__text[data-align="right"] .scene__body{margin-left:auto;margin-right:0;}
  .scene__text[data-align="center"] .scene__pull,
  .scene__text[data-align="center"] .scene__body{margin-left:auto;margin-right:auto;}

  /* brand accent rule — separates the two type levels */
  .scene__rule{
    display:block;width:var(--rule-w,64px);height:var(--rule-h,3px);border-radius:99px;background:var(--turquoise);
    margin-bottom:clamp(20px,2.4vw,32px);
    transform:scaleX(var(--r-s,0));transform-origin:left center;
    transition:transform .9s cubic-bezier(.16,1,.3,1) .1s;
  }
  .scene.is-in .scene__rule{--r-s:1;}

  /* HEADLINE — large, near-white, tight */
  .scene__pull{
    font-size:clamp(2.1rem,6.2vw,var(--h-size,5.4rem));
    line-height:var(--h-lead,0.98);font-weight:var(--h-weight,400);
    font-style:var(--h-italic,normal);letter-spacing:var(--h-track,-0.022em);
    margin:0 0 var(--gap,22px);color:var(--h-color,#FFFDFC);
    max-width:var(--h-width,60em);white-space:var(--h-ws,normal);text-wrap:var(--h-tw,wrap);
    text-shadow:0 4px calc(44px * var(--h-shadow,1)) rgba(0,0,0,calc(0.72 * var(--h-shadow,1))),
                0 1px 4px rgba(0,0,0,calc(0.5 * var(--h-shadow,1)));
  }
  /* SUB — much smaller, quieter, wider tracking */
  .scene__body{
    font-size:clamp(0.92rem,1.05vw,var(--b-size,1.1rem));
    line-height:var(--b-lead,1.75);margin:0;max-width:var(--b-width,34ch);
    font-weight:var(--b-weight,400);
    color:rgba(var(--b-color,255,235,228),var(--b-alpha,0.78));letter-spacing:0.012em;
    white-space:var(--b-ws,normal);text-wrap:var(--b-tw,wrap);
    text-shadow:0 1px calc(16px * var(--h-shadow,1)) rgba(0,0,0,calc(0.7 * var(--h-shadow,1)));
  }

  /* word-by-word reveal */
  .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.1em;margin-bottom:-.1em;}
  .w i{
    display:inline-block;font-style:inherit;transform:translateY(118%);
    transition:transform 1.05s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0s);
  }
  .scene.is-in .w i{transform:translateY(0);}
  .scene__body{
    opacity:0;transform:translateY(30px);
    transition:opacity 1s cubic-bezier(.16,1,.3,1) .38s,transform 1s cubic-bezier(.16,1,.3,1) .38s;
  }
  .scene.is-in .scene__body{opacity:1;transform:none;}

  /* Closing scene — centred, and treated differently from the five
     story scenes so it reads as the end rather than another beat. */
  .scene--finale .finale-logo{margin-left:auto;margin-right:auto;}
  .scene--finale .scene__pull{white-space:nowrap;font-size:clamp(2.3rem,5vw,4.6rem);}
  .scene--finale .scene__body{max-width:40ch;margin-left:auto;margin-right:auto;}
  /* centred vignette instead of the side wash */
  .scene--finale .scene__veil{
    background:
      radial-gradient(ellipse 62% 58% at 50% 50%,
        rgba(34,9,7,0.86) 0%, rgba(28,8,6,0.62) 55%, rgba(20,6,5,0.80) 100%),
      linear-gradient(180deg, rgba(20,6,5,0.72) 0%, rgba(20,6,5,0.18) 30%,
                              rgba(20,6,5,0.28) 70%, rgba(20,6,5,0.86) 100%);
  }
  @media (max-width:640px){
    .scene--finale .scene__pull{white-space:normal;}
  }

  .scene--finale .finale-logo{
    height:56px;width:auto;display:block;margin-bottom:26px;
    opacity:0;transform:translateY(18px);
    transition:opacity .8s ease .15s,transform .8s cubic-bezier(.16,1,.3,1) .15s;
  }
  .scene--finale.is-in .finale-logo{opacity:1;transform:none;}
  .scene--finale .btn{
    margin-top:clamp(24px,3vw,36px);
    opacity:0;transform:translateY(18px);
    transition:opacity .8s ease .62s,transform .8s cubic-bezier(.16,1,.3,1) .62s;
  }
  .scene--finale.is-in .btn{opacity:1;transform:none;}

  @media (max-width:880px){
    .scene{min-height:82vh;}
    .scene__text,.scene--right .scene__text{max-width:none;margin:0;}
    /* the stacked layout has no room to push text sideways */
    .scene__text{--nx:0% !important;}
    .scene__veil{
      background:
        linear-gradient(180deg, rgba(20,6,5,0.80) 0%, rgba(20,6,5,0.34) 26%,
                                rgba(20,6,5,0.52) 62%, rgba(20,6,5,0.94) 100%),
        linear-gradient(90deg, rgba(64,11,8,0.72), rgba(40,9,7,0.55));
    }
    .scene__bg img{object-position:var(--focus-sm,var(--focus,50% 50%));}
  }

  /* Reduced motion: keep the fades, drop the movement. */
  @media (prefers-reduced-motion: reduce){
    .scene__bg{transform:none !important;}
    .scene__text{transform:none !important;}
    .w i{transform:none !important;transition:none;}
    .scene__rule{transform:scaleX(1) !important;}
    .scene__body,.scene--finale .finale-logo,.scene--finale .btn{
      transform:none !important;transition:opacity .4s linear;
    }
    html{scroll-behavior:auto;}
  }


  /* ---------- Contact ---------- */
  .reach-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;text-align:left;}
  @media (max-width:860px){.reach-grid{grid-template-columns:1fr;}}
  .contact-line{display:flex;gap:12px;margin-bottom:1.1em;font-family:var(--font-ui);font-size:.96rem;flex-wrap:wrap;}
  .contact-line .k{color:var(--text-soft);min-width:82px;font-weight:600;}
  .contact-line a{color:var(--accent-text);text-decoration:none;}
  .contact-line a:hover{text-decoration:underline;}
  .form-card{background:var(--bg-1);border:1px solid var(--rule);border-radius:20px;padding:34px;}
  .field{margin-bottom:20px;}
  .field label{display:block;font-family:var(--font-ui);font-size:.85rem;font-weight:600;margin-bottom:7px;}
  .field input,.field textarea{
    width:100%;font-family:var(--font-ui);font-size:.95rem;padding:12px 14px;
    border:1px solid var(--rule-strong);border-radius:10px;background:var(--bg-0);color:var(--text);
  }
  .field input::placeholder,.field textarea::placeholder{color:var(--text-faint);}
  .field textarea{resize:vertical;min-height:120px;}
  .field small{display:block;margin-top:6px;color:var(--text-faint);font-size:.8rem;}
  .form-status{
    font-family:var(--font-ui);font-size:.84rem;line-height:1.55;
    margin:14px 0 0;text-align:center;color:var(--text-soft);min-height:1.2em;
  }
  .form-status.is-ok{color:var(--accent-text);}
  .form-status.is-error{color:#E5836F;}
  html[data-theme="light"] .form-status.is-error{color:#A32D14;}
  .btn[disabled]{opacity:.55;cursor:progress;transform:none;}

  /* ---------- Toast / cookie ---------- */
  .toast{
    position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);
    background:var(--turquoise);color:var(--on-accent);font-family:var(--font-ui);font-size:.9rem;font-weight:600;
    padding:14px 24px;border-radius:100px;box-shadow:var(--shadow);opacity:0;
    transition:opacity .25s,transform .25s;pointer-events:none;z-index:120;
  }
  .toast.is-visible{opacity:1;transform:translateX(-50%) translateY(0);}
  .cookie-bar{
    position:fixed;left:20px;right:20px;bottom:20px;z-index:90;
    background:var(--bg-2);border:1px solid var(--rule-strong);color:var(--text);
    border-radius:16px;padding:18px 24px;box-shadow:var(--shadow);
    display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
    font-family:var(--font-ui);font-size:.88rem;max-width:1060px;margin:0 auto;
  }
  .cookie-bar.is-hidden{display:none;}
  .cookie-bar a{color:var(--accent-text);}

  /* ---------- Policy ---------- */
  .policy h3{margin-top:1.8em;}
  .policy .prose{font-size:1rem;}
  .policy a{color:var(--accent-text);}

  /* ---------- Footer ---------- */
  /* z-index keeps the footer above the full-bleed scenes above it */
  .site-footer{background:var(--bg-1);border-top:1px solid var(--rule);padding:64px 0 28px;position:relative;z-index:10;}
  .footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.2fr;gap:36px;text-align:left;}
  @media (max-width:820px){.footer-grid{grid-template-columns:1fr 1fr;}}
  .footer-logo{height:104px;width:auto;display:block;margin-bottom:18px;}
  .site-footer h4{
    font-family:var(--font-ui);font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;
    color:var(--accent-text);margin-bottom:1.1em;
  }
  .site-footer a{
    font-family:var(--font-ui);font-size:.9rem;color:var(--text-soft);display:block;
    margin-bottom:.7em;text-decoration:none;background:none;border:none;padding:0;text-align:left;cursor:pointer;
  }
  .site-footer a:hover{color:var(--text);text-decoration:underline;}
  .footer-slogan{color:var(--accent-text);font-style:italic;font-family:var(--font-display);font-size:1.1rem;}
  .footer-bottom{
    border-top:1px solid var(--rule);margin-top:48px;padding-top:22px;
    font-family:var(--font-ui);font-size:.78rem;color:var(--text-faint);
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
  }


  /* ====== Heading-font comparison tool — review aid, delete before launch ====== */