:root{
    /* dark-first: bare :root carries the dark palette */
    --ink:#efe6d6;           /* primary text on dark */
    --ink-dim:#b9ac97;       /* secondary text on dark */
    --paper:#161009;         /* page ground, deep walnut-black */
    --surface:#1f170f;       /* raised panels */
    --line: rgba(239,230,214,0.14);
    --gold:#c39a5c;          /* antique brass accent, from the bottle's foil */
    --gold-soft: rgba(195,154,92,0.35);
    --amber:#8a4420;         /* cognac, from the glass */
    --walnut:#3a2718;        /* cap wood */
    --ember:#f7e6c4;         /* lit centre of the Tantra Aura figure */
    --rose:#cf8f9a;          /* Roohani's heart of rose */
    --rose-deep:#7a3c4a;
    --flame-tip:#f6c14b;     /* Agni Fiero's fire, from the base of the */
    --flame:#e0662a;         /* flame out to its tips */
    --flame-deep:#9b2c12;
    --char:#24160d;          /* its logs */
    --flame-text:#e98a4c;
    --shadow: 0 30px 60px -25px rgba(0,0,0,0.65);
  }
  @media (prefers-color-scheme: light){
    :root:not([data-theme="light"]){
      --ink:#211a10;
      --ink-dim:#5c5140;
      --paper:#f2ead9;
      --surface:#e9dfca;
      --line: rgba(33,26,16,0.14);
      --gold:#96703a;
      --gold-soft: rgba(150,112,58,0.28);
      --amber:#8a4420;
      --walnut:#c9b48c;
    --ember:#f0d49a;
      --ember:#f0d49a;
      --shadow: 0 30px 60px -30px rgba(60,45,20,0.35);
      --rose:#b46676;
      --rose-deep:#8e4656;
      --flame-text:#b4471c;
    }
  }
  :root[data-theme="light"]{
    --ink:#211a10;
    --ink-dim:#5c5140;
    --paper:#f2ead9;
    --surface:#e9dfca;
    --line: rgba(33,26,16,0.14);
    --gold:#96703a;
    --gold-soft: rgba(150,112,58,0.28);
    --amber:#8a4420;
    --walnut:#c9b48c;
    --shadow: 0 30px 60px -30px rgba(60,45,20,0.35);
    --rose:#b46676;
    --rose-deep:#8e4656;
    --flame-text:#b4471c;
  }
  :root[data-theme="dark"]{
    --ink:#efe6d6;
    --ink-dim:#b9ac97;
    --paper:#161009;
    --surface:#1f170f;
    --line: rgba(239,230,214,0.14);
    --gold:#c39a5c;
    --gold-soft: rgba(195,154,92,0.35);
    --amber:#8a4420;
    --walnut:#3a2718;
    --ember:#f7e6c4;
    --flame-text:#e98a4c;
    --shadow: 0 30px 60px -25px rgba(0,0,0,0.65);
  }

  *{box-sizing:border-box;}
  html{color-scheme:light dark;}
  @media (prefers-reduced-motion: no-preference){
    html{scroll-behavior:smooth;}
  }
  /* The header is pinned (see below), so anchored sections stop just under
     it. site-header.js keeps --header-h in step with its real height. */
  section[id]{scroll-margin-top:calc(var(--header-h, 120px) + 16px);}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Jost',ui-sans-serif,system-ui,sans-serif;
    padding-inline:20px;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,.serif{
    font-family:'Instrument Serif', Georgia, 'Times New Roman', serif;
    font-weight:400;
    text-wrap:balance;
  }
  a{color:inherit;}
  .page{
    max-width:1040px;
    margin-inline:auto;
  }

  /* ---------- pinned header ----------
     The header stays at the top of the screen while the page scrolls under
     it. A paper-coloured layer behind it runs past the page column to both
     edges of the screen, so nothing shows through at the sides on wide
     screens. That overhang is painted as a box-shadow rather than by
     stretching the layer itself: a stretched layer made phones treat the
     page as ~1200px wide, so they let it pan sideways and zoomed it out,
     dragging the bottles and boxes off-centre. A shadow takes up no room.
     Once the page is scrolled, site-header.js adds .is-scrolled and the
     header tightens up; the nav row's hairline keeps it separate from the
     page below. */
  header#top{
    position:sticky;
    top:0;
    z-index:60;
  }
  header#top::before{
    content:"";
    position:absolute;
    z-index:-1;
    inset:0;
    background:var(--paper);
    box-shadow:0 0 0 100vmax var(--paper);
    clip-path:inset(0 -100vmax);
  }
  html{overflow-x:hidden;overflow-x:clip;}
  header#top .topbar,
  header#top .nav-row{transition:padding .3s ease;}
  header#top .brand-logo{transition:height .3s ease;}
  header#top.is-scrolled .topbar{padding-block:12px 8px;}
  header#top.is-scrolled .nav-row{padding-block:0 10px;}
  header#top.is-scrolled .brand-logo{height:32px;}
  .brand{text-decoration:none;cursor:pointer;}
  .brand:hover{color:var(--gold);}
  .brand:focus-visible{outline:1px solid var(--gold);outline-offset:6px;border-radius:2px;}
  @media (prefers-reduced-motion: reduce){
    header#top .topbar,
    header#top .nav-row,
    header#top .brand-logo{transition:none;}
  }

  /* ---------- top bar ---------- */
  /* Three columns: logo, the house motto in the true centre, then the
     language switch and cart. The outer columns share the leftover space
     equally, so the motto stays centred whatever their widths. */
  .topbar{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:16px;
    padding-block:28px 20px;
  }
  .topbar-right{justify-self:end;}
  .topbar-motto{
    margin:0;
    font-family:'Bodoni Moda', Georgia, 'Times New Roman', serif;
    font-weight:500;
    font-size:clamp(0.95rem, 1.7vw, 1.2rem);
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--ink);
    white-space:nowrap;
    text-align:center;
  }
  @media (max-width:640px){
    /* Phones keep the motto in the middle, as on larger screens: a tighter
       gap and smaller type, and it may break onto two centred lines. */
    .topbar{gap:10px;}
    .topbar-motto{
      font-size:clamp(0.68rem, 2.9vw, 0.9rem);
      letter-spacing:0.1em;
      line-height:1.35;
      white-space:normal;
      text-wrap:balance;
    }
  }
  .topbar-left{
    display:flex;
    align-items:flex-end;
    gap:16px;
    flex-wrap:wrap;
  }
  .cart-icon{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    color:var(--ink);
    flex-shrink:0;
    text-decoration:none;
  }
  .cart-icon svg{width:23px;height:23px;}
  .cart-icon:hover{color:var(--gold);}
  .cart-badge{
    position:absolute;
    top:0px;
    right:-2px;
    background:var(--gold);
    color:var(--paper);
    font-size:0.66rem;
    font-weight:600;
    min-width:17px;
    height:17px;
    border-radius:9px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 4px;
    font-family:'Jost',sans-serif;
  }
  .cart-badge[hidden]{display:none;}
  .nav-row{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;
    padding-block:0 22px;
    border-bottom:1px solid var(--line);
    font-family:'Jost',sans-serif;
    font-size:0.72rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
  }
  .nav-row a{
    color:var(--ink-dim);
    text-decoration:none;
    transition:color 0.2s ease;
  }
  .nav-row a:hover{color:var(--gold);}
  .nav-row .nav-dot{color:var(--gold-soft);}
  .nav-social{
    position:relative;
    display:inline-block;
  }
  .nav-social summary{
    cursor:pointer;
    list-style:none;
    color:var(--ink-dim);
    transition:color 0.2s ease;
  }
  .nav-social summary::-webkit-details-marker{display:none;}
  .nav-social summary::marker{content:"";}
  .nav-social summary:hover,
  .nav-social[open] summary{color:var(--gold);}
  .social-dropdown{
    position:absolute;
    top:calc(100% + 16px);
    left:50%;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:170px;
    padding:10px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:6px;
    box-shadow:var(--shadow);
    z-index:20;
  }
  .social-dropdown a{
    display:flex;
    align-items:center;
    gap:10px;
    padding:9px 10px;
    border-radius:4px;
    color:var(--ink-dim);
    text-decoration:none;
    font-size:0.72rem;
    letter-spacing:0.08em;
    transition:background 0.2s ease, color 0.2s ease;
  }
  .social-dropdown a:hover{
    background:var(--gold-soft);
    color:var(--ink);
  }
  .social-dropdown svg{width:16px;height:16px;flex-shrink:0;}
  .brand{
    display:flex;
    align-items:flex-end;
    line-height:1;
    color:var(--ink);
    transition:color .2s ease;
  }
  .brand-logo{
    display:block;
    height:44px;
    width:auto;
  }
  .entry{
    font-size:0.72rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--ink-dim);
  }

  /* ---------- hero ---------- */
  .hero{
    display:grid;
    grid-template-columns:minmax(240px,380px) 1fr;
    gap:clamp(28px,5vw,72px);
    align-items:center;
    padding-block:clamp(28px,4vw,56px);
  }
  /* Kavach's hero opens the page, so it needs no rule above it. Tantra Aura's
     sits mid-page and starts a new product, so it takes the same hairline
     every other section boundary here uses -- without it the pyramid above
     and this hero read as one block. */
  #tantra-aura.hero{
    border-top:1px solid var(--line);
    /* Kavach leads with its bottle on the left. Tantra Aura mirrors it: the
       text leads and the bottle sits in the right-hand column, so the two
       heroes alternate down the page instead of repeating the same side. The
       image column keeps the same width cap, just in the second track -- the
       media is first in the markup, so `order` below moves it across. */
    grid-template-columns:1fr minmax(240px,380px);
  }
  .hero-media{
    position:relative;
    /* definite box for the image: width from the grid column, height from the ratio */
    aspect-ratio: 4 / 5;
  }
  .hero-media picture{
    display:block;
    width:100%;
    height:100%;
  }
  /* Tantra Aura's bottle is squat and round-capped where Kavach's is tall and
     narrow. Filling the same 4/5 well edge to edge, it towered over Kavach's,
     so it sits at 80% of the well's height -- the two then read as one set.
     The height is the only lever here: object-fit:contain keeps the bottle's
     ratio, and at this size the height is what binds, so easing the percentage
     down is what trims its width. */
  #tantra-aura .hero-media{order:2;display:flex;align-items:center;}
  #tantra-aura .hero-media > picture{height:80%;}
  /* The picture box spans the full column, so nudging the bottle sideways is
     not a justify-content question: object-fit:contain letterboxes the photo
     inside that box, and object-position decides where it lands in the spare
     width. 25% draws it in from the centre toward the text on its left --
     lower it toward 0% to close the gap further, 50% is dead centre. */
  #tantra-aura .hero-media img{object-position:25% center;}
  /* Kavach's bottle used to fill its well top to bottom, so it stood a fifth
     taller than Tantra Aura's and Roohani's and broke the set. Its photo also
     carries more empty space under the glass (the floor shadow), so it needs a
     slightly taller box than their 80% for the glass itself to come out the
     same height: 84% here puts all three bottles at ~76% of the well.
     The bottle is narrow, so it leaves spare width; 29% lands its centre on
     the same line as Roohani's, the other bottle in the left-hand column. */
  #kavach .hero-media{display:flex;align-items:center;}
  #kavach .hero-media > picture{height:84%;}
  #kavach .hero-media img{object-position:29% center;}
  /* Roohani is the third hero, so it takes the same hairline as Tantra
     Aura's and returns its bottle to the left, keeping the heroes
     alternating. Its bottle is the same squat, round-capped shape as Tantra
     Aura's, so it sits at the same 80% of the well and the three read as one
     set; 25% pulls it toward the outer edge, as Kavach's is. */
  #roohani.hero{border-top:1px solid var(--line);}
  #roohani .hero-media{display:flex;align-items:center;}
  #roohani .hero-media > picture{height:80%;}
  #roohani .hero-media img{object-position:25% center;}
  /* Agni Fiero is the fourth hero: the same hairline, and its bottle moves
     back to the right-hand column like Tantra Aura's, so the heroes keep
     alternating. Its photo is cropped tight to the glass with no floor
     shadow, so 76% of the well brings it to the same height as the other
     three. It is tall and narrow, so it leaves a lot of spare width; 39% puts
     its centre on the same line as Tantra Aura's, the other bottle in the
     right-hand column. */
  #agni-fiero.hero{
    border-top:1px solid var(--line);
    grid-template-columns:1fr minmax(240px,380px);
  }
  #agni-fiero .hero-media{order:2;display:flex;align-items:center;}
  #agni-fiero .hero-media > picture{height:76%;}
  #agni-fiero .hero-media img{object-position:39% center;}
  .hero-media img{
    /* fill the well and let object-fit scale the bottle. avoids percentage
       heights, which resolve inconsistently against an aspect-ratio parent */
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
  }
  .hero-text{min-width:0;}

  /* ---------- product photography ----------
     The bottles and gift boxes are shown still, with nothing moving on or
     around them: a soft shadow grounds each one and the page's own space
     does the rest. */
  .hero-media img,
  .story-media img{
    filter:drop-shadow(0 18px 24px rgba(0,0,0,.22));
  }
  /* Kavach's bottle and box were photographed with their own soft floor
     shadow. Adding the page's shadow on top of that doubled it into a muddy
     halo -- a dark cloud on the dark theme, a grey smudge on the light one --
     so the two stood out as pasted-on pictures. They keep only their own. */
  #kavach .hero-media img,
  #kavach + .story .story-media img{filter:none;}
  /* Agni Fiero's box carries the soft floor shadow from its own photo, kept
     as transparency so it falls on either theme's background. Like Kavach's,
     it doesn't take the page's shadow on top. */
  .story-agni-fiero .story-media img{filter:none;}

  .eyebrow{
    margin:0 0 10px;
    font-size:0.72rem;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--gold);
    font-weight:500;
  }
  .hero-title-row{
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:14px;
  }
  .hero-text h1,
  .hero-text h2{
    margin:0;
    font-size:clamp(3.2rem,9vw,5.6rem);
    line-height:0.95;
  }
  .gender-tag{
    font-family:'Jost',sans-serif;
    font-size:0.72rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--gold);
    border:1px solid var(--gold-soft);
    border-radius:20px;
    padding:5px 14px;
    white-space:nowrap;
  }
  .translit{
    margin:14px 0 0;
    font-size:0.98rem;
    color:var(--ink-dim);
  }
  .translit em{
    font-style:italic;
    color:var(--ink);
  }
  .tagline{
    margin:22px 0 0;
    font-size:1.2rem;
    max-width:32ch;
    color:var(--ink-dim);
  }
  .hero-meta{
    margin-top:28px;
    display:flex;
    align-items:center;
    gap:10px;
    font-variant-numeric:tabular-nums;
    letter-spacing:0.04em;
  }
  .hero-meta .dot{color:var(--gold);}
  .cta{
    display:inline-block;
    margin-top:30px;
    padding:14px 30px;
    border:1px solid var(--gold);
    border-radius:2px;
    text-decoration:none;
    font-size:0.78rem;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--ink);
    transition:background 0.2s ease, color 0.2s ease;
  }
  .cta:hover{
    background:var(--gold);
    color:var(--paper);
  }

  /* ---------- story ---------- */
  .story{
    display:grid;
    grid-template-columns:1fr minmax(220px,360px);
    gap:clamp(28px,5vw,64px);
    align-items:center;
    padding-block:clamp(24px,4vw,40px);
    border-top:1px solid var(--line);
  }
  .story-text{min-width:0;}
  .story-text p{
    max-width:60ch;
    font-size:1.12rem;
    line-height:1.75;
    color:var(--ink-dim);
  }
  .dropcap{
    float:left;
    font-family:'Instrument Serif', serif;
    font-size:4.2rem;
    line-height:0.8;
    padding-right:10px;
    padding-top:6px;
    color:var(--gold);
  }
  .story-media{
    display:flex;
    justify-content:center;
    align-items:center;
  }
  .story-media picture{
    display:block;
    width:100%;
    max-width:320px;
  }
  /* The Tantra Aura carton is a tall cylinder where Kavach's is a squat box.
     Left at the same width the cylinder towers over it, so it takes a
     narrower cap -- the two photographs then carry the same visual weight.
     It also sits on the opposite side to Kavach's carton: the image column
     moves to the first track and the carton leads, so the two stories
     alternate the way the two heroes above them do. */
  .story-tall{grid-template-columns:minmax(220px,360px) 1fr;}
  .story-tall .story-media{order:-1;}
  .story-tall .story-media picture{max-width:230px;}
  /* Kavach's carton is wide enough to fill most of its column, which left it
     pressed up against the story beside it where Tantra Aura's narrower
     carton floats with room to spare. Without shrinking the box, it is pinned
     to the column's outer edge and the gutter is widened, so it stands as far
     from the text as Tantra Aura's does. */
  #kavach + .story{column-gap:clamp(40px,7vw,88px);}
  #kavach + .story .story-media{justify-content:flex-end;}
  /* Roohani's carton is a tall cylinder like Tantra Aura's, so it takes the
     same narrower cap; it stays on the right, alternating with the carton
     above it. */
  .story-roohani .story-media picture{max-width:230px;}
  /* Agni Fiero's carton moves to the left, alternating with Roohani's above
     it. It is a rectangular box rather than a cylinder, so it is allowed a
     little more width than the other left-hand carton. */
  .story-agni-fiero .story-media picture{max-width:260px;}
  .story-media img{
    display:block;
    width:100%;
    height:auto;
  }

  /* ---------- pyramid ---------- */
  .pyramid{
    padding-block:clamp(24px,4vw,44px);
    border-top:1px solid var(--line);
  }
  .pyramid h2{
    margin:0 0 8px;
    font-size:2rem;
  }
  .pyramid > p{
    margin:0 0 40px;
    color:var(--ink-dim);
    max-width:52ch;
  }
  .pyramid-wrap{
    display:grid;
    /* The pyramid artwork fills its 280x320 viewBox exactly, so its rendered
       height is the column width x 320/280. Capping the column at 280px puts
       it at 320px tall -- the same height as Tantra Aura's aura circle, whose
       viewBox is 320x320 in a column that caps at 320px. The two diagrams then
       sit at a matched height instead of the pyramid overtopping the circle. */
    grid-template-columns: minmax(200px,280px) 1fr;
    gap:clamp(24px,5vw,56px);
    align-items:center;
  }
  .pyramid-figure{margin:0;}
  .pyramid-svg{display:block;width:100%;height:auto;overflow:visible;}
  .tier-label{
    font-family:'Jost',sans-serif;
    font-size:11.5px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    fill:var(--paper);
  }
  .pyr-label-base{fill:var(--ink);}
  /* The peak is lit to pale gold in both themes, so its label stays dark. */
  .pyr-label[data-tier="top"]{fill:#211a10;}
  /* Each band is lit from above, like the brass foil it takes its colour
     from: gold at the peak, cognac through the heart, walnut at the base. */
  .pyr-top-a{stop-color:var(--ember); stop-opacity:0.95;}
  .pyr-top-b{stop-color:var(--gold);}
  .pyr-heart-a{stop-color:var(--gold); stop-opacity:0.85;}
  .pyr-heart-b{stop-color:var(--amber);}
  .pyr-base-a{stop-color:var(--amber); stop-opacity:0.7;}
  .pyr-base-b{stop-color:var(--walnut);}
  .pyr-tier{
    cursor:pointer;
    stroke:var(--ember);
    stroke-width:0;
    stroke-linejoin:round;
    transition:opacity 0.35s ease, stroke-width 0.35s ease;
  }
  .pyr-label{cursor:pointer;transition:opacity 0.35s ease;}
  .pyr-seam{stroke:var(--paper);stroke-width:1.5px;opacity:0.4;pointer-events:none;}

  /* The top notes leaving the skin: wisps rise off the peak and fade. */
  .pyr-wisp{
    fill:none;
    stroke:var(--gold);
    stroke-width:1.2;
    stroke-linecap:round;
    opacity:0;
    pointer-events:none;
  }
  @media (prefers-reduced-motion: no-preference){
    .pyr-wisp{animation:pyr-rise 7.5s ease-out infinite;}
    .pyr-wisp:nth-child(2){animation-delay:2.5s;}
    .pyr-wisp:nth-child(3){animation-delay:5s;}
  }
  @keyframes pyr-rise{
    0%   {transform:translateY(8px); opacity:0;}
    18%  {opacity:0.6;}
    100% {transform:translateY(-22px); opacity:0;}
  }

  .notes-legend{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:22px;
  }
  .notes-legend li{
    display:grid;
    grid-template-columns:96px 1fr;
    gap:16px;
    align-items:baseline;
    border-bottom:1px solid var(--line);
    padding-bottom:18px;
    font-size:1.02rem;
    cursor:pointer;
    transition:opacity 0.3s ease;
  }
  .notes-legend li:last-child{border-bottom:none;}
  .notes-legend li:focus-visible,
  .aura-tier:focus-visible{outline:1px solid var(--gold);outline-offset:6px;border-radius:2px;}
  .tier{
    font-family:'Instrument Serif', serif;
    font-style:italic;
    font-size:1.15rem;
  }
  .tier.gold{color:var(--gold);}
  .tier.amber{color:var(--amber);}
  .tier.walnut{color:var(--ink-dim);}
  .tier-notes{display:block;}
  .tier-when{
    display:block;
    margin-top:5px;
    font-size:0.76rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--ink-dim);
    opacity:0.75;
  }

  /* note-tiers.js marks the tier being pointed at, tapped or focused. That
     band of the pyramid is outlined, the others and their rows recede. */
  .pyramid-wrap[data-active] .pyr-row:not(.is-active){opacity:0.45;}
  .pyramid-wrap[data-active] .pyr-tier,
  .pyramid-wrap[data-active] .pyr-label{opacity:0.3;}
  .pyramid-wrap[data-active="top"] [data-tier="top"],
  .pyramid-wrap[data-active="heart"] [data-tier="heart"],
  .pyramid-wrap[data-active="base"] [data-tier="base"]{opacity:1;}
  .pyramid-wrap[data-active="top"] .pyr-tier-top,
  .pyramid-wrap[data-active="heart"] .pyr-tier-heart,
  .pyramid-wrap[data-active="base"] .pyr-tier-base{stroke-width:2.4;}
  /* The wisps belong to the top notes, so they brighten with them. */
  .pyramid-wrap[data-active="top"] .pyr-wisps{filter:brightness(1.4);}
  .pyramid-wrap[data-active]:not([data-active="top"]) .pyr-wisps{opacity:0.3;}

  /* ---------- bloom (Roohani notes) ----------
     Kavach's notes are a pyramid and Tantra Aura's an aura; Roohani is a
     floral, so its notes are a flower. Every petal is one note: three wide
     outer petals for the top, four inner petals for the heart, three seeds at
     the centre for the base. The flower sits in the middle with the tiers in a
     row beneath it, so this block doesn't repeat either layout above. */
  .bloom{
    padding-block:clamp(24px,4vw,44px);
    border-top:1px solid var(--line);
  }
  .bloom h2{margin:0 0 8px;font-size:2rem;}
  .bloom > p{margin:0 0 32px;color:var(--ink-dim);max-width:60ch;}
  .bloom-wrap{display:flex;flex-direction:column;align-items:center;gap:28px;}
  .bloom-figure{margin:0;width:100%;max-width:320px;text-align:center;}
  .bloom-svg{display:block;width:100%;height:auto;overflow:visible;}
  .bloom-caption{
    margin-top:14px;
    min-height:1.6em;
    font-family:'Instrument Serif', serif;
    font-style:italic;
    font-size:1.25rem;
    color:var(--ink-dim);
    transition:color 0.3s ease;
  }
  .bloom-caption.is-note{color:var(--ink);}
  /* Lit from the centre outward, the way a flower catches light: pale at
     each petal's base, deepening toward its tip. */
  .bloom-top-a{stop-color:var(--ember);}
  .bloom-top-b{stop-color:var(--gold); stop-opacity:0.85;}
  .bloom-heart-a{stop-color:var(--rose);}
  .bloom-heart-b{stop-color:var(--rose-deep);}
  .bloom-base-a{stop-color:var(--ember);}
  .bloom-base-b{stop-color:var(--amber);}
  .bloom-petal{
    cursor:pointer;
    stroke:var(--paper);
    stroke-width:1.5;
    stroke-opacity:0.55;
    /* Each petal's path starts at the flower's centre, so scaling about its
       own origin makes it grow outward from the middle. */
    transform-origin:0 0;
    transition:opacity 0.35s ease, transform 0.35s ease, stroke 0.35s ease;
  }
  .bloom-seed{stroke-opacity:0.8;}

  .bloom-notes{
    list-style:none;
    margin:0;
    padding:0;
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:clamp(16px,3vw,32px);
  }
  .bloom-tier{
    border-top:1px solid var(--line);
    padding-top:16px;
    text-align:center;
    font-size:1.02rem;
    cursor:pointer;
    transition:opacity 0.3s ease;
  }
  .bloom-tier:focus-visible{outline:1px solid var(--gold);outline-offset:6px;border-radius:2px;}
  .bloom-tier-name{
    display:block;
    margin-bottom:6px;
    font-family:'Instrument Serif', serif;
    font-style:italic;
    font-size:1.15rem;
  }
  .bloom-tier[data-tier="top"] .bloom-tier-name{color:var(--gold);}
  .bloom-tier[data-tier="heart"] .bloom-tier-name{color:var(--rose);}
  .bloom-tier[data-tier="base"] .bloom-tier-name{color:var(--ink-dim);}
  .bloom-tier[data-tier="top"]{border-top-color:var(--gold-soft);}
  .bloom-tier-notes{display:block;}
  .bloom-tier-when{
    display:block;
    margin-top:6px;
    font-size:0.76rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--ink-dim);
    opacity:0.75;
  }

  /* note-tiers.js marks the tier being pointed at, tapped or focused: its
     petals lift slightly and the rest of the flower recedes. */
  .bloom-wrap[data-active] .bloom-petal{opacity:0.25;}
  .bloom-wrap[data-active] .bloom-tier:not(.is-active){opacity:0.45;}
  .bloom-wrap[data-active="top"] .bloom-petal[data-tier="top"],
  .bloom-wrap[data-active="heart"] .bloom-petal[data-tier="heart"],
  .bloom-wrap[data-active="base"] .bloom-petal[data-tier="base"]{opacity:1;transform:scale(1.04);stroke:var(--ember);stroke-opacity:1;}

  /* The flower opens once as it scrolls into view, petals unfurling from the
     centre outward. note-tiers.js adds .will-bloom first and clears it once
     the flower is open, so without the script (or with reduced motion) the
     flower is simply shown open. */
  @media (prefers-reduced-motion: no-preference){
    .bloom-wrap.will-bloom .bloom-petal{
      opacity:0;
      transform:scale(0.15) rotate(-25deg);
      transition:opacity 0.9s var(--lm-ease, ease), transform 1.3s var(--lm-ease, ease);
      transition-delay:calc(var(--d,0) * 70ms);
    }
    .bloom-wrap.will-bloom.is-open .bloom-petal{opacity:1;transform:none;}
  }

  /* ---------- flame (Agni Fiero notes) ----------
     Kavach's notes are a pyramid, Tantra Aura's an aura and Roohani's a
     flower. Agni means fire, so its notes are a fire, read from the ground up
     the way one is built: two logs and two embers for the base, three tongues
     of flame for the heart, and the sparks and smoke that fly off first for
     the top. Every shape is one note. The fire stands in the middle and each
     tier sits level with its own part of it -- top and base on the right,
     heart on the left -- so this block repeats none of the layouts above. */
  .flame{
    padding-block:clamp(24px,4vw,44px);
    border-top:1px solid var(--line);
  }
  .flame h2{margin:0 0 8px;font-size:2rem;}
  .flame > p{margin:0 0 32px;color:var(--ink-dim);max-width:60ch;}
  .flame-wrap{
    display:grid;
    grid-template-columns:1fr minmax(220px,280px) 1fr;
    grid-template-rows:repeat(3,auto);
    column-gap:clamp(20px,4vw,48px);
    row-gap:12px;
  }
  .flame-figure{grid-column:2;grid-row:1 / span 3;margin:0;text-align:center;}
  .flame-svg{display:block;width:100%;height:auto;overflow:visible;}
  .flame-caption{
    margin-top:14px;
    min-height:1.6em;
    font-family:'Instrument Serif', serif;
    font-style:italic;
    font-size:1.25rem;
    color:var(--ink-dim);
    transition:color 0.3s ease;
  }
  .flame-caption.is-note{color:var(--ink);}

  /* Hottest where the flame meets the wood, deepening to red at the tips. */
  .flame-heart-a{stop-color:var(--flame-tip);}
  .flame-heart-b{stop-color:var(--flame);}
  .flame-heart-c{stop-color:var(--flame-deep); stop-opacity:0.9;}
  .flame-log-a{stop-color:var(--amber);}
  .flame-log-b{stop-color:var(--char);}
  .flame-ember-a{stop-color:var(--flame-tip);}
  .flame-ember-b{stop-color:var(--flame-deep);}
  .flame-spark{fill:var(--flame-tip);}
  .flame-smoke{
    fill:none;
    stroke:var(--ink-dim);
    stroke-width:2.4;
    stroke-linecap:round;
    stroke-opacity:0.6;
  }
  /* Sparks and smoke are thin; an invisible halo makes them easy to hit. */
  .flame-hit{fill:transparent;stroke:transparent;}
  .flame-log,
  .flame-tongue,
  .flame-ember{stroke:var(--paper);stroke-width:1.2;stroke-opacity:0.5;}

  /* Each shape is its own group, so the group carries the dimming and the
     lighting-up while the shape inside it is free to flicker. */
  .flame-part{
    cursor:pointer;
    transform-box:fill-box;
    transform-origin:50% 100%;
    transition:opacity 0.35s ease, filter 0.35s ease;
  }

  .flame-tier{
    position:relative;
    border-top:1px solid var(--line);
    padding-top:16px;
    font-size:1.02rem;
    cursor:pointer;
    transition:opacity 0.3s ease;
  }
  .flame-tier[data-tier="top"]{grid-column:3;grid-row:1;align-self:start;margin-top:8px;border-top-color:var(--flame);}
  .flame-tier[data-tier="heart"]{grid-column:1;grid-row:2;align-self:center;text-align:right;}
  /* Level with the embers, not with the caption below them. */
  .flame-tier[data-tier="base"]{grid-column:3;grid-row:3;align-self:end;margin-bottom:2.6em;}
  .flame-tier:focus-visible{outline:1px solid var(--gold);outline-offset:6px;border-radius:2px;}
  .flame-tier-name{
    display:block;
    margin-bottom:6px;
    font-family:'Instrument Serif', serif;
    font-style:italic;
    font-size:1.15rem;
  }
  .flame-tier[data-tier="top"] .flame-tier-name{color:var(--gold);}
  .flame-tier[data-tier="heart"] .flame-tier-name{color:var(--flame-text);}
  .flame-tier[data-tier="base"] .flame-tier-name{color:var(--ink-dim);}
  .flame-tier-notes{display:block;}
  .flame-tier-when{
    display:block;
    margin-top:6px;
    font-size:0.76rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--ink-dim);
    opacity:0.75;
  }

  /* note-tiers.js marks the tier being pointed at, tapped or focused: its
     shapes flare and the rest of the fire burns low. */
  .flame-wrap[data-active] .flame-part{opacity:0.25;}
  .flame-wrap[data-active] .flame-tier:not(.is-active){opacity:0.45;}
  .flame-wrap[data-active="top"] .flame-part[data-tier="top"],
  .flame-wrap[data-active="heart"] .flame-part[data-tier="heart"],
  .flame-wrap[data-active="base"] .flame-part[data-tier="base"]{opacity:1;filter:drop-shadow(0 0 6px var(--flame));}

  @media (prefers-reduced-motion: no-preference){
    /* The fire is alive: the flames flicker out of step with one another,
       the sparks glint, the smoke sways and the embers breathe. */
    .flame-tongue,
    .flame-spark,
    .flame-smoke,
    .flame-ember{transform-box:fill-box;transform-origin:50% 100%;}
    .flame-tongue{animation:flame-flicker 2.8s ease-in-out infinite alternate;}
    .flame-part:nth-of-type(4) .flame-tongue{animation-duration:3.4s;animation-delay:-1.2s;}
    .flame-tongue-lead{animation-duration:2.3s;animation-delay:-0.6s;}
    .flame-spark{transform-origin:50% 50%;animation:flame-glint 2.6s ease-in-out infinite;}
    .flame-spark-late{animation-delay:-1.3s;}
    .flame-smoke{animation:flame-sway 6s ease-in-out infinite alternate;}
    .flame-ember{animation:flame-breathe 3.6s ease-in-out infinite;}
    .flame-part:nth-of-type(7) .flame-ember{animation-delay:-1.8s;}

    /* The fire lights once as it scrolls into view, from the logs upward.
       note-tiers.js adds .will-ignite first and clears it once it's alight,
       so without the script the fire is simply shown burning. */
    .flame-wrap.will-ignite .flame-part{
      opacity:0;
      transform:scale(0.7,0.2);
      transition:opacity 0.8s var(--lm-ease, ease), transform 1.1s var(--lm-ease, ease);
      transition-delay:calc(var(--d,0) * 90ms);
    }
    .flame-wrap.will-ignite.is-open .flame-part{opacity:1;transform:none;}
  }
  @keyframes flame-flicker{
    0%   {transform:scale(1,1) skewX(0deg);}
    35%  {transform:scale(0.97,1.05) skewX(1.6deg);}
    70%  {transform:scale(1.02,0.96) skewX(-1.4deg);}
    100% {transform:scale(0.99,1.03) skewX(0.8deg);}
  }
  @keyframes flame-glint{
    0%, 100% {transform:scale(1) rotate(0deg); opacity:1;}
    50%      {transform:scale(0.7) rotate(20deg); opacity:0.55;}
  }
  @keyframes flame-sway{
    from {transform:translateX(-3px) skewX(-4deg);}
    to   {transform:translateX(3px) skewX(4deg);}
  }
  @keyframes flame-breathe{
    0%, 100% {filter:brightness(1);}
    50%      {filter:brightness(1.3);}
  }

  /* ---------- collection ---------- */
  .collection{
    padding-block:clamp(24px,4vw,44px);
    border-top:1px solid var(--line);
  }
  .collection h2{
    margin:0 0 8px;
    font-size:2rem;
  }
  .collection > p{
    margin:0 0 32px;
    color:var(--ink-dim);
    max-width:52ch;
  }
  .collection-card{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    padding:22px 26px;
    border:1px solid var(--line);
    border-radius:4px;
    text-decoration:none;
    color:var(--ink);
    transition:border-color 0.2s ease;
  }
  .collection-card + .collection-card{margin-top:14px;}
  .collection-card:hover{border-color:var(--gold);}
  .collection-card-name{
    font-family:'Instrument Serif', serif;
    font-size:1.6rem;
  }
  .collection-card-meta{
    font-size:0.85rem;
    color:var(--ink-dim);
    flex:1;
    min-width:200px;
  }
  .collection-card-link{
    font-size:0.72rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--gold);
    white-space:nowrap;
  }

  /* ---------- aura (Tantra Aura notes) ----------
     Kavach's notes are a pyramid: built upward, like the shield the name
     means. Tantra Aura is an aura, so its notes radiate instead -- one core
     with rings emanating from it, read from the outside in. Same palette and
     type as the pyramid above; deliberately the opposite geometry. */
  .aura{
    padding-block:clamp(24px,4vw,44px);
    border-top:1px solid var(--line);
  }
  .aura h2{
    margin:0 0 8px;
    font-size:2rem;
  }
  .aura > p{
    margin:0 0 40px;
    color:var(--ink-dim);
    max-width:58ch;
  }
  .aura-wrap{
    display:grid;
    /* Mirrored against the pyramid's layout -- notes lead, diagram answers --
       so the two fragrances don't read as the same block twice. */
    grid-template-columns:1fr minmax(220px,320px);
    gap:clamp(24px,5vw,56px);
    align-items:center;
  }
  .aura-notes{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:22px;
  }
  .aura-tier{
    display:grid;
    grid-template-columns:104px 1fr;
    gap:16px;
    align-items:baseline;
    border-bottom:1px solid var(--line);
    padding-bottom:18px;
    font-size:1.02rem;
    transition:opacity 0.3s ease;
  }
  .aura-tier:last-child{border-bottom:none;}
  .aura-tier-name{
    font-family:'Instrument Serif', serif;
    font-style:italic;
    font-size:1.15rem;
  }
  .aura-tier[data-tier="top"] .aura-tier-name{color:var(--gold);}
  .aura-tier[data-tier="heart"] .aura-tier-name{color:var(--amber);}
  .aura-tier[data-tier="base"] .aura-tier-name{color:var(--ink-dim);}
  .aura-tier-notes{display:block;}
  .aura-tier-when{
    display:block;
    margin-top:5px;
    font-size:0.76rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--ink-dim);
    opacity:0.75;
  }
  /* Pointing at or tapping one tier (note-tiers.js) quiets the others, so
     the eye follows a single layer of the scent at a time. */
  .aura-tier{cursor:pointer;}
  .aura-wrap[data-active] .aura-tier:not(.is-active){opacity:0.45;}

  .aura-figure{
    margin:0;
    position:relative;
  }
  .aura-svg{
    display:block;
    width:100%;
    height:auto;
    overflow:visible;
  }
  /* Gradient stops are styled here rather than set as attributes so they can
     read the palette variables. The core is lit from the middle out: --ember
     into gold into cognac. It has to be the brightest thing in the figure,
     because it is the part of the scent still there hours later. */
  .aura-core-in{stop-color:var(--ember); stop-opacity:0.95;}
  .aura-core-mid{stop-color:var(--gold); stop-opacity:0.95;}
  .aura-core-out{stop-color:var(--amber); stop-opacity:0.88;}
  .aura-glow-in{stop-color:var(--gold); stop-opacity:0.2;}
  .aura-glow-out{stop-color:var(--gold); stop-opacity:0;}
  .aura-haze-in{stop-color:var(--gold); stop-opacity:0.26;}
  .aura-haze-mid{stop-color:var(--gold); stop-opacity:0.05;}
  .aura-haze-out{stop-color:var(--gold); stop-opacity:0;}

  .aura-ring{
    fill:none;
    transition:stroke-width 0.35s ease, opacity 0.35s ease;
  }
  .aura-ring-top{stroke:var(--gold); stroke-width:1.1; opacity:0.8; stroke-dasharray:2 7;}
  .aura-ring-drift{stroke:var(--gold); stroke-width:1; opacity:0.3; stroke-dasharray:1 9;}
  .aura-ring-heart{stroke:var(--amber); stroke-width:1.6; opacity:0.9;}
  .aura-core{
    stroke:var(--gold);
    stroke-width:1;
    stroke-opacity:0.5;
    transition:stroke-width 0.35s ease, stroke-opacity 0.35s ease;
  }
  .aura-svg-label{
    font-family:'Jost',sans-serif;
    font-size:10.5px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    fill:var(--ink-dim);
    transition:fill 0.35s ease;
  }

  /* The scent leaving the skin: echo rings swell out of the core and fade. */
  .aura-echo{
    fill:none;
    stroke:var(--gold);
    stroke-width:1.2;
    transform-box:fill-box;
    transform-origin:center;
    opacity:0;
  }
  @media (prefers-reduced-motion: no-preference){
    .aura-echo{animation:aura-diffuse 9s ease-out infinite;}
    .aura-echo:nth-child(2){animation-delay:3s;}
    .aura-echo:nth-child(3){animation-delay:6s;}
  }
  @keyframes aura-diffuse{
    0%   {transform:scale(1);   opacity:0;}
    12%  {opacity:0.42;}
    100% {transform:scale(2.6); opacity:0;}
  }

  /* The active tier in the list lifts its ring in the diagram. */
  .aura-wrap[data-active="top"] .aura-ring-top,
  .aura-wrap[data-active="heart"] .aura-ring-heart{
    stroke-width:2.6;
    opacity:1;
  }
  .aura-wrap[data-active="top"] .aura-ring-drift{opacity:0.7;}
  .aura-wrap[data-active="heart"] .aura-ring-drift,
  .aura-wrap[data-active="base"] .aura-ring-drift{opacity:0.12;}
  .aura-wrap[data-active="base"] .aura-core{
    stroke-width:2.4;
    stroke-opacity:1;
  }
  .aura-wrap[data-active="top"] .aura-ring-heart,
  .aura-wrap[data-active="heart"] .aura-ring-top,
  .aura-wrap[data-active="base"] .aura-ring-top,
  .aura-wrap[data-active="base"] .aura-ring-heart{
    opacity:0.25;
  }
  .aura-wrap[data-active="top"] .aura-svg-label-top,
  .aura-wrap[data-active="heart"] .aura-svg-label-heart,
  .aura-wrap[data-active="base"] .aura-svg-label-base{
    fill:var(--ink);
  }

  /* ---------- our story ---------- */
  .our-story{
    padding-block:clamp(24px,4vw,44px);
    border-top:1px solid var(--line);
  }
  .our-story h2{
    margin:0 0 24px;
    font-size:2rem;
  }
  .our-story p{
    max-width:64ch;
    font-size:1.05rem;
    line-height:1.75;
    color:var(--ink-dim);
  }
  .our-story p + p{margin-top:18px;}
  .our-story strong{font-weight:600;color:var(--ink);}
  .our-story .story-closing{
    margin-top:48px;
    font-family:'Bodoni Moda', Georgia, 'Times New Roman', serif;
    font-style:normal;
    font-weight:500;
    font-size:1.2rem;
    line-height:1.6;
    letter-spacing:0.02em;
    color:var(--ink);
  }

  /* ---------- contact section ---------- */
  .contact-section{
    padding-block:clamp(24px,4vw,44px);
    border-top:1px solid var(--line);
  }
  .contact-section h2{
    margin:0 0 24px;
    font-size:2rem;
  }
  .contact-grid{
    display:flex;
    justify-content:space-between;
    gap:32px;
    flex-wrap:wrap;
  }
  /* No leading margin, so the email sits level with the first social link
     across the grid instead of a line below it. */
  .contact-email{
    margin-top:0;
  }
  .contact-email a{
    font-family:'Bodoni Moda', Georgia, 'Times New Roman', serif;
    font-size:1.4rem;
    text-decoration:none;
    color:var(--ink);
    border-bottom:1px solid var(--gold);
  }
  .contact-phone{
    margin:0;
    font-size:0.95rem;
    line-height:1.7;
    color:var(--ink-dim);
  }
  .contact-phone a{
    color:var(--ink);
    text-decoration:none;
    border-bottom:1px solid var(--gold-soft);
  }
  .contact-phone a:hover{border-bottom-color:var(--gold);}
  .contact-address{
    font-size:0.95rem;
    line-height:1.7;
    color:var(--ink-dim);
  }
  /* Vipps sits between the address and the social links, with the QR directly
     under it, so the number and the thing you scan read as one instruction. */
  .contact-vipps{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    text-align:center;
    flex-shrink:0;
  }
  .contact-vipps p{
    margin:0;
    font-size:0.95rem;
    line-height:1.7;
    color:var(--ink-dim);
  }
  /* The QR carries its own cream plaque rather than inheriting the page
     ground: it has to stay dark-on-light to scan in the dark theme too. */
  .contact-vipps img{
    display:block;
    width:clamp(132px,13vw,158px);
    height:auto;
  }

  /* The same four channels as the nav dropdown, set opposite the address so
     the contact block reads as one place to find us. Sized and tracked to
     match the dropdown's links, since they are the same links. */
  .contact-social{
    display:flex;
    flex-direction:column;
    gap:2px;
    flex-shrink:0;
  }
  .contact-social a{
    display:flex;
    align-items:center;
    gap:10px;
    padding:7px 0;
    color:var(--ink-dim);
    text-decoration:none;
    font-size:0.72rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    transition:color 0.2s ease;
  }
  .contact-social a:hover{color:var(--gold);}
  .contact-social svg{width:16px;height:16px;flex-shrink:0;}

  .social-row{
    display:flex;
    gap:16px;
    margin-top:22px;
  }
  .social-row a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    border:1px solid var(--line);
    border-radius:50%;
    color:var(--ink-dim);
    transition:color 0.2s ease, border-color 0.2s ease;
  }
  .social-row a:hover{
    color:var(--gold);
    border-color:var(--gold);
  }
  .social-row svg{width:16px;height:16px;fill:currentColor;}

  @media (max-width:640px){
    .contact-grid{flex-direction:column;}
    .contact-vipps{align-items:flex-start;text-align:left;}
  }

  /* ---------- footer ---------- */
  footer{
    padding-block:clamp(22px,4vw,40px);
    border-top:1px solid var(--line);
    display:flex;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;
    color:var(--ink-dim);
    font-size:0.92rem;
  }
  footer p{margin:0;max-width:46ch;}
  .contact{
    font-family:'Bodoni Moda', Georgia, 'Times New Roman', serif;
    font-style:normal;
    font-weight:500;
    font-size:1.05rem;
    letter-spacing:0.02em;
    color:var(--ink);
  }

  @media (max-width:640px){
    /* Four nav items at full letter-spacing ran past the right edge of small
       phones (the Norwegian labels most of all), which let the whole page pan
       sideways. Tighter spacing keeps the row inside the screen. */
    .nav-row{gap:8px;letter-spacing:0.08em;}
    /* Discover Your Fragrance comes last and takes a line of its own below the other four
       items, so five never have to squeeze into one row. */
    .nav-row{flex-wrap:wrap;row-gap:10px;}
    .nav-row .nav-discover{flex-basis:100%;}
    .nav-row .nav-discover-dot{display:none;}
    /* The other four then sit on one line, as before, each label free to
       break onto two lines rather than the row wrapping mid-way. */
    .nav-row > :not(.nav-discover){flex:0 1 auto;min-width:0;}
    .nav-row > a:not(.nav-discover),
    .nav-row > .nav-social{flex-basis:min-content;}
    .nav-row a,
    .nav-social summary{text-align:center;}
    .hero{grid-template-columns:1fr;}
    /* Every bottle and box sits in the middle of the screen here. */
    .hero-media{width:100%;max-width:280px;margin-inline:auto;justify-self:center;}
    /* One column here, so both heroes collapse the same way: the bottle above
       its text. The id selector that swaps Tantra Aura's columns outranks the
       rule above, so it has to be unwound by name, and the order that moved
       the bottle across goes back to the markup's own. */
    #tantra-aura.hero{grid-template-columns:1fr;}
    #tantra-aura .hero-media{order:0;}
    /* Nothing sits beside the bottle here, so it returns to dead centre. */
    #tantra-aura .hero-media img{object-position:center;}
    #kavach .hero-media img{object-position:center;}
    #roohani .hero-media img{object-position:center;}
    #agni-fiero.hero{grid-template-columns:1fr;}
    #agni-fiero .hero-media{order:0;}
    #agni-fiero .hero-media img{object-position:center;}
    .aura-wrap{grid-template-columns:1fr;}
    .aura-figure{order:-1;max-width:300px;margin-inline:auto;}
    .story{grid-template-columns:1fr;}
    /* Same for the stories: text first, then the carton, on both of them. */
    .story-tall .story-media{order:0;}
    #kavach + .story .story-media{justify-content:center;}
    .story-media{justify-self:center;width:100%;}
    .story-media picture{max-width:280px;margin-inline:auto;}
    .story-tall .story-media picture{max-width:230px;}
    .pyramid-wrap{grid-template-columns:1fr;}
    .pyramid-figure{max-width:280px;width:100%;margin-inline:auto;}
    .bloom-notes{grid-template-columns:1fr;gap:18px;}
    .bloom-figure{max-width:280px;}
    /* One column: the fire first, then its tiers top to bottom. */
    .flame-wrap{grid-template-columns:1fr;grid-template-rows:none;row-gap:18px;}
    .flame-figure{grid-column:auto;grid-row:auto;width:100%;max-width:240px;margin-inline:auto;}
    .flame-tier[data-tier]{grid-column:auto;grid-row:auto;align-self:auto;margin:0;text-align:left;}
    footer{flex-direction:column;}
  }

  /* ---------- inquiry modal ---------- */
  .modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(10,7,4,0.55);
    backdrop-filter:blur(2px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    z-index:100;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.2s ease;
  }
  .modal-overlay.is-open{
    opacity:1;
    pointer-events:auto;
  }
  .modal-card{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:4px;
    box-shadow:var(--shadow);
    width:100%;
    max-width:440px;
    max-height:90vh;
    overflow-y:auto;
    padding:clamp(24px,4vw,36px);
    transform:translateY(12px);
    transition:transform 0.2s ease;
  }
  .modal-overlay.is-open .modal-card{
    transform:translateY(0);
  }
  .modal-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:6px;
  }
  .modal-head h3{
    margin:0;
    font-family:'Instrument Serif', serif;
    font-size:1.7rem;
    font-weight:400;
    color:var(--ink);
  }
  .modal-close{
    appearance:none;
    background:none;
    border:none;
    color:var(--ink-dim);
    font-size:1.4rem;
    line-height:1;
    cursor:pointer;
    padding:4px;
    margin:-4px -4px 0 0;
  }
  .modal-close:hover{color:var(--ink);}
  .modal-sub{
    margin:0 0 22px;
    font-size:0.9rem;
    color:var(--ink-dim);
    line-height:1.5;
  }
  .form-row{margin-bottom:16px;}
  .form-row label{
    display:block;
    font-size:0.72rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--ink-dim);
    margin-bottom:7px;
  }
  .form-row input,
  .form-row textarea{
    width:100%;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:2px;
    color:var(--ink);
    font-family:'Jost', sans-serif;
    font-size:0.95rem;
    padding:11px 13px;
    resize:vertical;
  }
  .form-row input:focus,
  .form-row textarea:focus{
    outline:none;
    border-color:var(--gold);
  }
  .form-row-split{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
  }
  .form-submit{
    display:block;
    width:100%;
    margin-top:6px;
    padding:14px 30px;
    border:1px solid var(--gold);
    border-radius:2px;
    background:none;
    cursor:pointer;
    font-family:'Jost', sans-serif;
    font-size:0.78rem;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--ink);
    transition:background 0.2s ease, color 0.2s ease;
  }
  .form-submit:hover{
    background:var(--gold);
    color:var(--paper);
  }
  .form-note{
    margin:14px 0 0;
    font-size:0.78rem;
    color:var(--ink-dim);
    text-align:center;
  }
  @media (max-width:480px){
    .form-row-split{grid-template-columns:1fr;}
  }

  /* ---------- language switch (EN / NO) ---------- */
  .lang-switch{
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-family:'Jost',ui-sans-serif,sans-serif;
    font-size:0.68rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    white-space:nowrap;
  }
  .lang-switch a{color:var(--ink-dim);text-decoration:none;transition:color 0.2s ease;}
  .lang-switch a:hover{color:var(--gold);}
  .lang-switch .lang-current{color:var(--ink);}
  .lang-switch .lang-sep{color:var(--gold-soft);}
  .topbar-right{
    display:flex;
    align-items:center;
    gap:16px;
  }
  @media (max-width:640px){
    /* Phones: EN / NO and the cart sit closer together, and both side
       columns share one fixed minimum width, so the motto between them
       lands in the true centre even though the logo is narrower. */
    .topbar{grid-template-columns:minmax(86px,1fr) auto minmax(86px,1fr);}
    .topbar-right{gap:2px;}
    .topbar-right .lang-switch{gap:4px;letter-spacing:0.1em;}
    .topbar-right .cart-icon{width:32px;}
  }