/* ============================================================
   Marraké — Interior Page Stylesheet  (page.css)
   Shared by: our-story.html · privacy.html
   ============================================================ */

  :root{
    --argan:#8B5E3C;   --argan-light:#C49A72; --argan-pale:#F5EDE3;
    --ivory:#FAF7F2;   --sand:#E8DDD0;        --line:#D4B896;
    --botanical:#7A8C6A; --gold:#B8914A;      --olive-mist:#EDF0E8;
    --ink:#1A1614;     --muted:#7A6756;       --warm:#5b4736;
    --maxw:1240px; --content-w:720px;
    --pad:clamp(1.5rem,5vw,4rem);
    --section-y:clamp(4rem,10vh,8rem);
  }

  *{box-sizing:border-box;}
  html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;}
  body{margin:0;background:var(--ivory);color:var(--ink);font-family:'Jost',sans-serif;font-weight:300;line-height:1.85;overflow-x:hidden;}
  img{display:block;max-width:100%;}
  a{color:inherit;text-decoration:none;}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

  /* ============================================================
     PAGE NAV
  ============================================================ */
  .page-nav{
    position:sticky;top:0;z-index:200;
    background:rgba(248,245,241,.96);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    padding:.9rem var(--pad);
    display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  }
  .nav-logo img{height:26px;width:auto;display:block;}
  .nav-links{display:flex;align-items:center;gap:1.8rem;flex-wrap:wrap;}
  .nav-links a{
    font-family:'Jost',sans-serif;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--muted);transition:color .3s ease;
  }
  .nav-links a:hover,.nav-links a:focus-visible{color:var(--argan);}
  .nav-links a:focus-visible{outline:2px solid var(--argan);outline-offset:3px;border-radius:1px;}
  /* CTA button inside nav must override the generic nav-links a colour */
  .nav-links .page-btn{color:var(--ivory);}
  .nav-links .page-btn:hover{background:transparent;color:var(--argan);}
  /* ============================================================
     PAGE HERO BANNER
  ============================================================ */
  .page-hero{
    background:var(--sand);padding:var(--section-y) var(--pad);text-align:center;
  }
  .page-eyebrow{
    font-family:'Jost',sans-serif;font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;
    color:var(--muted);margin-bottom:1.2rem;display:block;
  }
  .page-title{
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(2.6rem,6vw,5rem);font-weight:300;
    color:var(--ink);line-height:1.1;margin:0 0 1.2rem;
  }
  .page-subtitle{
    font-family:'Jost',sans-serif;font-size:1rem;color:var(--warm);
    max-width:52ch;margin:0 auto;line-height:1.7;
  }

  /* ============================================================
     LONG-FORM ARTICLE BODY
  ============================================================ */
  .page-content{
    max-width:var(--content-w);margin:0 auto;
    padding:var(--section-y) var(--pad);
  }
  .page-content h2{
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(1.7rem,3.5vw,2.5rem);font-weight:300;
    color:var(--ink);margin:3.2rem 0 1rem;line-height:1.2;
  }
  .page-content h3{
    font-family:'Cormorant Garamond',serif;font-size:1.35rem;font-weight:300;
    color:var(--argan);margin:2.2rem 0 .6rem;
  }
  .page-content p{
    font-family:'Jost',sans-serif;font-size:.95rem;color:var(--warm);
    line-height:1.9;margin:0 0 1.2rem;
  }
  .page-content a{color:var(--argan);text-decoration:underline;text-underline-offset:3px;}
  .page-content a:hover{opacity:.75;}
  .page-content ul,.page-content ol{
    font-family:'Jost',sans-serif;font-size:.95rem;color:var(--warm);
    line-height:1.9;padding-left:1.4rem;margin:0 0 1.2rem;
  }
  .article-meta{
    font-family:'Jost',sans-serif;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--muted);margin-bottom:2.6rem;display:flex;gap:1.4rem;flex-wrap:wrap;
  }

  /* Pull quote */
  blockquote.pull{
    margin:2.8rem 0;padding:1.6rem 2rem 1.6rem 2.2rem;
    border-left:3px solid var(--argan);background:var(--sand);
  }
  blockquote.pull p{
    font-family:'Cormorant Garamond',serif;font-style:italic;
    font-size:clamp(1.3rem,2.5vw,1.85rem);color:var(--ink);line-height:1.45;margin:0;
  }
  blockquote.pull cite{
    display:block;margin-top:.9rem;font-style:normal;
    font-family:'Jost',sans-serif;font-size:.7rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--muted);
  }

  .divider{width:60px;height:1px;background:var(--line);margin:2.8rem 0;}

  /* ============================================================
     TIMELINE
  ============================================================ */
  .timeline{max-width:var(--content-w);margin:0 auto;padding:0 var(--pad);}
  .timeline-item{
    display:grid;grid-template-columns:88px 1fr;gap:1.6rem;
    padding:1.8rem 0;border-top:1px solid var(--line);
  }
  .timeline-year{
    font-family:'Cormorant Garamond',serif;font-size:1.9rem;font-weight:600;
    color:var(--argan);line-height:1;padding-top:.1rem;
  }
  .timeline-body h3{
    font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-weight:300;
    color:var(--ink);margin:0 0 .4rem;
  }
  .timeline-body p{
    font-family:'Jost',sans-serif;font-size:.88rem;color:var(--warm);
    line-height:1.75;margin:0;
  }

  /* ============================================================
     INGREDIENT CARDS
  ============================================================ */
  .ingredient-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:1.8rem;margin:2.4rem 0;
  }
  .ingredient-card{
    background:var(--ivory);padding:2rem 1.6rem;border:1px solid var(--line);
  }
  .ingredient-icon{width:44px;height:44px;margin-bottom:1.2rem;color:var(--argan);}
  .ingredient-name{
    font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:300;
    color:var(--ink);margin:0 0 .25rem;
  }
  .ingredient-origin{
    font-family:'Jost',sans-serif;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--muted);margin:0 0 .9rem;display:block;
  }
  .ingredient-benefit{
    font-family:'Jost',sans-serif;font-size:.86rem;color:var(--warm);line-height:1.75;margin:0;
  }

  /* ============================================================
     PRESS KIT
  ============================================================ */
  .press-section{padding:var(--section-y) var(--pad);max-width:var(--maxw);margin:0 auto;}
  .press-two-col{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start;}
  .section-label{
    font-family:'Jost',sans-serif;font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;
    color:var(--muted);margin-bottom:1.2rem;display:block;
  }
  .section-heading{
    font-family:'Cormorant Garamond',serif;font-size:clamp(1.8rem,3vw,2.4rem);font-weight:300;
    color:var(--ink);margin:0 0 1.2rem;line-height:1.2;
  }
  .body-text{
    font-family:'Jost',sans-serif;font-size:.92rem;color:var(--warm);line-height:1.9;
  }
  .press-asset-list{list-style:none;padding:0;margin:0;}
  .press-asset-list li{
    display:flex;align-items:center;gap:.9rem;padding:.85rem 0;border-bottom:1px solid var(--line);
    font-family:'Jost',sans-serif;font-size:.88rem;color:var(--warm);
  }
  .press-asset-list li:first-child{border-top:1px solid var(--line);}
  .press-asset-list li svg{flex-shrink:0;color:var(--argan);}
  .press-asset-list a{color:var(--argan);text-decoration:underline;text-underline-offset:3px;}
  .press-bio{display:flex;gap:1.6rem;align-items:flex-start;padding:2rem 0;border-top:1px solid var(--line);}
  .press-bio-photo{width:80px;height:80px;border-radius:50%;object-fit:cover;object-position:top;flex-shrink:0;background:var(--sand);}
  .press-bio-text h3{font-family:'Cormorant Garamond',serif;font-size:1.3rem;color:var(--ink);margin:0 0 .25rem;}
  .press-bio-role{font-family:'Jost',sans-serif;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 .6rem;}
  .press-bio-text p{font-family:'Jost',sans-serif;font-size:.88rem;color:var(--warm);line-height:1.75;margin:0;}
  .press-contact{
    background:var(--sand);padding:2.4rem var(--pad);text-align:center;
    font-family:'Jost',sans-serif;
  }
  .press-contact h2{font-family:'Cormorant Garamond',serif;font-size:2rem;margin:0 0 .6rem;color:var(--ink);}
  .press-contact p{font-size:.9rem;color:var(--warm);margin:0 0 1.4rem;}
  .press-contact a{color:var(--argan);}

  /* ============================================================
     JOURNAL — LISTING PAGE
  ============================================================ */
  .journal-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:2.4rem;margin:2.4rem 0;
  }
  .journal-card{border:1px solid var(--line);overflow:hidden;}
  .journal-card-img{
    width:100%;aspect-ratio:16/9;background:var(--sand);
    display:flex;align-items:center;justify-content:center;overflow:hidden;
  }
  .journal-card-body{padding:1.6rem;}
  .journal-tag{
    font-family:'Jost',sans-serif;font-size:.64rem;letter-spacing:.18em;
    text-transform:uppercase;color:var(--muted);
  }
  .journal-card-title{
    font-family:'Cormorant Garamond',serif;font-size:1.45rem;font-weight:300;
    color:var(--ink);margin:.5rem 0 .7rem;line-height:1.3;
  }
  .journal-card-excerpt{
    font-family:'Jost',sans-serif;font-size:.84rem;color:var(--warm);
    line-height:1.7;margin:0 0 1.1rem;
  }
  .journal-read-more{
    font-family:'Jost',sans-serif;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--argan);display:inline-flex;align-items:center;gap:.5rem;
  }

  /* ============================================================
     SHARED BUTTON
  ============================================================ */
  .page-btn{
    display:inline-block;
    font-family:'Jost',sans-serif;font-size:.74rem;font-weight:400;
    letter-spacing:.2em;text-transform:uppercase;
    padding:.9rem 2.2rem;background:var(--argan);color:var(--ivory);
    border:1px solid var(--argan);transition:background .3s,color .3s;
    text-decoration:none;
  }
  .page-btn:hover{background:transparent;color:var(--argan);}
  .page-btn--outline{background:transparent;color:var(--argan);}
  .page-btn--outline:hover{background:var(--argan);color:var(--ivory);}

  /* ============================================================
     PAGE FOOTER
  ============================================================ */
  .page-footer{
    background:var(--ivory);border-top:1px solid var(--line);
    padding:1.8rem var(--pad);
    font-family:'Jost',sans-serif;font-size:.74rem;color:var(--muted);
    display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  }
  .page-footer a{color:var(--muted);transition:color .3s;}
  .page-footer a:hover{color:var(--argan);}
  .page-footer nav{display:flex;gap:2rem;flex-wrap:wrap;}
  .page-footer nav a{letter-spacing:.1em;text-transform:uppercase;}

  /* ============================================================
     PRIVACY — specific components
  ============================================================ */
  .page-meta{
    font-size:.76rem;letter-spacing:.1em;color:var(--muted);
    margin-bottom:2.8rem;display:block;
  }
  .highlight-box{
    background:var(--sand);border-left:3px solid var(--argan);
    padding:1.2rem 1.6rem;margin-bottom:2rem;
    font-family:'Jost',sans-serif;font-size:.92rem;line-height:1.75;color:var(--warm);
  }
  .highlight-box strong{color:var(--ink);font-weight:500;}
  .contact-block{
    background:var(--sand);padding:1.8rem 2rem;margin-top:3.2rem;
    font-family:'Jost',sans-serif;font-size:.9rem;line-height:1.9;color:var(--warm);
  }
  .contact-block strong{font-weight:500;color:var(--ink);}
  .contact-block a{color:var(--argan);text-decoration:underline;text-underline-offset:3px;}
  .contact-block a:hover{opacity:.75;}

  /* ============================================================
     COOKIE BANNER  (shared across interior pages)
  ============================================================ */
  .cookie-banner{
    position:fixed;bottom:0;left:0;right:0;z-index:8000;
    background:#1A1614;color:#FAF7F2;
    display:flex;align-items:center;justify-content:space-between;
    flex-wrap:wrap;gap:1rem;
    padding:1.1rem clamp(1.5rem,5vw,4rem);
    box-shadow:0 -2px 24px rgba(0,0,0,.35);
  }
  .cookie-banner[hidden]{display:none!important;}
  .cookie-banner p{
    font-family:'Jost',sans-serif;font-size:.82rem;
    line-height:1.6;color:rgba(250,247,242,.85);
    margin:0;max-width:65ch;
  }
  .cookie-banner a{color:#E8DDD0;text-decoration:underline;text-underline-offset:3px;}
  .cookie-actions{display:flex;gap:.8rem;flex-shrink:0;}
  .btn--cookie{
    font-family:'Jost',sans-serif;font-size:.7rem;font-weight:400;
    letter-spacing:.18em;text-transform:uppercase;
    padding:.65rem 1.5rem;border:1px solid rgba(250,247,242,.4);
    cursor:pointer;background:transparent;color:#FAF7F2;
    transition:background .3s ease,color .3s ease,border-color .3s ease;
  }
  .btn--cookie-accept{background:#8B5E3C;border-color:#8B5E3C;color:#FAF7F2;}
  .btn--cookie-accept:hover{background:transparent;color:#FAF7F2;}
  .btn--cookie-decline:hover{border-color:#FAF7F2;}

  /* ============================================================
     RESPONSIVE
  ============================================================ */
  @media(max-width:600px){
    .page-nav{flex-direction:column;align-items:flex-start;}
    .nav-links{gap:1.2rem;}
    .timeline-item{grid-template-columns:60px 1fr;gap:.8rem;}
    .press-two-col{grid-template-columns:1fr;}
    .press-bio{flex-direction:column;}
  }

  /* ============================================================
     DARK MODE
  ============================================================ */
  @media(prefers-color-scheme:dark-disabled){
    :root{
      --ivory:#F0EAE2;
      --sand:#2A1610;
      --argan:#C4784A;
      --ink:#F0EAE2;
      --muted:#B09A87;
      --warm:#D4B89A;
      --line:#3A2015;
    }
    body{background:#120604;}
    .page-nav{background:rgba(18,6,4,.94);border-color:#3A2015;}
    /* Button: argan bg becomes lighter in dark mode — use dark ink text for contrast */
    .page-btn,.nav-links .page-btn{color:#1A1614;}
    .page-btn:hover,.nav-links .page-btn:hover{background:transparent;color:var(--argan);}
    .page-btn--outline{background:transparent;color:var(--argan);}
    .page-btn--outline:hover{color:#1A1614;}
    .page-hero{background:#1A0A05;}
    blockquote.pull{background:#1A0A05;}
    .ingredient-card{background:#1A0A05;border-color:#3A2015;}
    .journal-card{border-color:#3A2015;}
    .page-footer{background:#1A0A05;border-color:#3A2015;}
    .press-contact{background:#1A0A05;}
    .nav-logo img{filter:brightness(0) invert(.9) sepia(.15) saturate(1.1);}
  }

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