:root{
    --bg:#EBB49F; --ink:#2A1610; --soft:#F3CDBE;
    --ease: cubic-bezier(0.65, 0, 0.35, 1);
    --dur: .9s;
    --step: 18deg;                       /* angle between products on the wheel */
    --R: clamp(720px, 92vw, 1700px);     /* wheel radius */
    --H: clamp(260px, 44vh, 470px);      /* product height */
    --display: "Krona One", system-ui, sans-serif;
    --body: "Josefin Sans", system-ui, sans-serif;
  }
  *{ box-sizing:border-box; margin:0; padding:0 }
  /* colours change by transitioning real properties on the few elements that use them (cheap),
     instead of animating inherited variables (forces the whole page to restyle every frame) */
  html.lenis, html.lenis body{ height:auto }
  .lenis.lenis-smooth{ scroll-behavior:auto !important }
  body{
    background-color:var(--bg); color:var(--ink);
    font-family:var(--body); font-weight:400;
    transition: background-color .6s ease, color .6s ease;
    -webkit-font-smoothing:antialiased;
    overflow-x:clip;
  }
  img{ display:block; max-width:100% }
  button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
  a{ color:inherit; text-decoration:none }

  /* ---------- NAV ---------- */
  .nav{
    position:absolute; inset:0 0 auto 0; z-index:50;
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
    padding:22px clamp(16px,4vw,56px);
  }
  .brand{ display:flex; align-items:center; gap:12px; font-family:var(--display); font-size:15px; letter-spacing:.18em }
  .brand .mark{ width:26px; height:26px; background:var(--ink); transition: background-color .6s ease;
    -webkit-mask:url(../img/logo-mark.png) center/contain no-repeat; mask:url(../img/logo-mark.png) center/contain no-repeat }
  .links{ display:flex; gap:34px; font-size:13px; letter-spacing:.2em; text-transform:uppercase }
  .links a{ position:relative; padding:4px 0 }
  .links a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease) }
  .links a:hover::after{ transform:scaleX(1); transform-origin:left }
  .bag{ justify-self:end; display:flex; align-items:center; gap:10px; font-size:13px; letter-spacing:.2em; text-transform:uppercase }
  .bag .count{ display:grid; place-items:center; min-width:24px; height:24px; padding:0 6px; border-radius:99px; background:var(--ink); color:var(--bg); font-size:11px; letter-spacing:0; transition:transform .3s var(--ease), background-color .6s ease, color .6s ease }
  .bag .count.bump{ transform:scale(1.35) }

  /* ---------- HERO ---------- */
  .hero{ position:relative; height:100svh; min-height:640px; overflow:hidden; --py:47% }

  /* giant product name behind the bottle */
  .bigname{
    position:absolute; left:0; right:0; top:var(--py); transform:translateY(-50%);
    text-align:center; font-family:var(--display); text-transform:uppercase;
    font-size:clamp(44px, 10.5vw, 190px); line-height:.92; letter-spacing:-.02em;
    color:var(--soft); pointer-events:none; user-select:none; z-index:1; transition: color .6s ease;
    padding:0 2vw;
  }

  /* the wheel is a zero-size point = circle centre, far below the hero */
  .wheel, .ring{
    position:absolute; left:50%; top:calc(var(--py) + var(--R));
    width:0; height:0; z-index:2;
    transition: transform var(--dur) var(--ease);
  }
  .slot{
    position:absolute; left:0; top:0;
    transform: translate(-50%,-50%) rotate(calc(var(--i) * var(--step))) translateY(calc(-1 * var(--R)));
    cursor:pointer; width:max-content;
  }
  .slot .float{
    animation: float 5s ease-in-out infinite alternate;
    animation-delay: calc(var(--d) * -1.3s);
  }
  .slot img{
    height:var(--H); width:auto; max-width:none;
    filter: drop-shadow(0 30px 30px rgba(0,0,0,.25));
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
    transform: scale(.82); opacity:.9;
    -webkit-user-drag:none; user-select:none;
  }
  .slot.active img{ transform:scale(1); opacity:1 }
  .slot.far img{ opacity:0 }
  .slot.active{ cursor:default }
  @keyframes float{
    from{ transform:translateY(-5px) rotate(-1deg) }
    to  { transform:translateY( 5px) rotate( 1deg) }
  }

  /* curved text ring, concentric with the wheel, half speed */
  .ring{ z-index:1 }
  .ring svg{
    position:absolute; overflow:visible;
    width:var(--S); height:var(--S); left:calc(var(--S) / -2); top:calc(var(--S) / -2);
    --S: calc((var(--R) + var(--H) * .5 + 5vh) * 2 / .94);
  }
  .ring text{ font-family:var(--display); font-size:7px; letter-spacing:.32em; fill:var(--ink); opacity:.55; text-transform:uppercase; transition: fill .6s ease }
  .hero-off .slot .float{ animation-play-state:paused }
  .slot.far{ visibility:hidden; transition: visibility 0s var(--dur) }
  .slot:not(.far){ transition: visibility 0s }

  /* bottom info bar */
  .info{
    position:absolute; left:0; right:0; bottom:0; z-index:5;
    display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:24px;
    padding:0 clamp(16px,4vw,56px) clamp(22px,4vh,44px);
  }
  .meta .counter{ font-family:var(--display); font-size:12px; letter-spacing:.2em; margin-bottom:14px; display:flex; align-items:center; gap:12px }
  .meta .counter i{ display:block; width:46px; height:1px; background:currentColor; opacity:.5 }
  .meta h1{ font-family:var(--display); font-weight:400; font-size:clamp(20px,2.1vw,30px); line-height:1.1; text-transform:uppercase; margin-bottom:8px }
  .meta .sub{ font-size:16px; margin-bottom:12px; opacity:.85 }
  .meta .notes{ font-weight:600; font-size:12px; letter-spacing:.2em; text-transform:uppercase; max-width:38ch; line-height:1.6 }

  .controls{ display:flex; align-items:center; gap:14px }
  .arrow{
    width:56px; height:56px; border-radius:50%; border:1px solid currentColor;
    display:grid; place-items:center; transition: background-color .3s, color .3s, transform .3s var(--ease);
  }
  .arrow:hover{ background:var(--ink); color:var(--bg) }
  .arrow:active{ transform:scale(.92) }
  .arrow svg{ width:18px; height:18px }
  .dots{ display:flex; gap:6px }
  .dots button{ width:6px; height:6px; border-radius:99px; background:currentColor; opacity:.3; transition: width .5s var(--ease), opacity .5s }
  .dots button.on{ width:22px; opacity:1 }

  .buy{ justify-self:end; text-align:right }
  .buy .price{ font-family:var(--display); font-size:clamp(18px,1.6vw,24px); margin-bottom:14px; letter-spacing:.04em }
  .btn{
    display:inline-flex; align-items:center; gap:14px; height:58px; padding:0 34px;
    background:var(--ink); color:var(--bg); font-family:var(--display); font-size:13px; letter-spacing:.08em; text-transform:uppercase;
    transition: background-color .6s ease, color .6s ease, transform .3s var(--ease);
  }
  .btn:hover{ transform:translateY(-2px) }
  .btn .dot{ width:4px; height:4px; border-radius:50%; background:currentColor }

  /* text swap animation */
  .swap{ transition: opacity .35s ease, transform .45s var(--ease) }
  .swapping .swap{ opacity:0; transform:translateY(12px) }
  .bigname.swap{ transition: opacity .45s ease, transform .6s var(--ease) }
  .swapping .bigname.swap{ transform:translateY(-44%) }

  /* ---------- SCROLL STORY (palette per fragrance) ---------- */
  .story{ position:relative; height:100svh; min-height:720px; overflow:hidden; display:grid; place-items:center }
  .story .word{
    position:absolute; left:50%; top:50%; z-index:1; white-space:nowrap; pointer-events:none;
    font-family:var(--display); font-size:clamp(70px,16.5vw,300px); line-height:.8; letter-spacing:-.03em;
    color:var(--ink); transform:translate(-50%,-50%); will-change:transform; transition: color .6s ease;
  }
  .story .card2{
    position:relative; z-index:2; width:clamp(210px,21vw,310px); aspect-ratio:3/4.2;
    border-radius:18px; padding:16px; display:flex; flex-direction:column; justify-content:space-between;
    /* frosted look without backdrop-filter (that re-blurs every frame while the text behind moves) */
    background:linear-gradient(160deg, rgba(255,255,255,.82), rgba(255,255,255,.6));
    border:1px solid rgba(255,255,255,.85);
    box-shadow:0 40px 70px -30px rgba(0,0,0,.35); color:#1d1712;
  }
  .card2 .top{ display:flex; align-items:center; gap:8px; font-size:10px; letter-spacing:.18em; text-transform:uppercase }
  .card2 .top .mark{ width:18px; height:18px; background:#1d1712;
    -webkit-mask:url(../img/logo-mark.png) center/contain no-repeat; mask:url(../img/logo-mark.png) center/contain no-repeat }
  .card2 .bottom h4{ font-family:var(--display); font-weight:400; font-size:13px; text-transform:uppercase; line-height:1.2 }
  .card2 .bottom p{ font-size:12px; opacity:.75; margin-top:4px }
  .card2 .bottom .r{ display:flex; justify-content:space-between; margin-top:12px; padding-top:10px; border-top:1px solid rgba(0,0,0,.15); font-size:11px; letter-spacing:.14em; text-transform:uppercase }
  .story .sbottle{
    position:absolute; left:50%; top:50%; z-index:3; height:clamp(200px,32vh,340px); width:auto; max-width:none;
    filter:drop-shadow(0 30px 30px rgba(0,0,0,.28)); will-change:transform; pointer-events:none;
  }
  .ing{ position:absolute; z-index:0; will-change:transform; pointer-events:none }
  .ing.front{ z-index:4 }
  .ing svg{ width:100%; height:100%; display:block; overflow:visible; filter:drop-shadow(0 14px 14px rgba(0,0,0,.18)) }
  .ing.blur svg{ filter:blur(2.5px) }
  .ing img{ width:100%; height:100%; object-fit:contain; display:block; max-width:none; filter:drop-shadow(0 16px 16px rgba(0,0,0,.2)); user-select:none }
  .ing.blur img{ filter:blur(2.5px) }
  .story .smeta{
    position:absolute; left:clamp(16px,4vw,56px); bottom:clamp(24px,6vh,60px); z-index:5; max-width:34ch;
  }
  .smeta .k{ font-family:var(--display); font-size:11px; letter-spacing:.2em; margin-bottom:12px }
  .smeta p{ font-size:15px; line-height:1.5 }
  .story .sact{
    position:absolute; right:clamp(16px,4vw,56px); bottom:clamp(24px,6vh,60px); z-index:5;
    display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; align-items:center; max-width:48vw;
  }
  .chip{ height:40px; padding:0 16px; border-radius:99px; border:1px solid currentColor; display:inline-flex; align-items:center; font-size:11px; letter-spacing:.16em; text-transform:uppercase; background:rgba(255,255,255,.35) }
  .pill{ height:46px; padding:0 22px; border-radius:99px; background:var(--ink); color:var(--bg); display:inline-flex; align-items:center; gap:10px; font-family:var(--display); font-size:11px; letter-spacing:.08em; text-transform:uppercase; transition: background-color .6s ease, color .6s ease, transform .3s var(--ease) }
  .pill:hover{ transform:translateY(-2px) }

  /* ---------- COLLECTION ---------- */
  .section{ padding:clamp(80px,12vw,160px) clamp(16px,4vw,56px) }
  .eyebrow{ font-size:12px; letter-spacing:.3em; text-transform:uppercase; margin-bottom:22px; opacity:.75 }
  .section h2{ font-family:var(--display); font-weight:400; font-size:clamp(30px,4.6vw,72px); line-height:1.02; text-transform:uppercase; max-width:14ch; margin-bottom:clamp(40px,6vw,80px) }
  .grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.6vw,24px) }
  .card{ background:var(--c); color:#1d1712; padding:18px 18px 20px; display:flex; flex-direction:column; text-align:left }
  .card[hidden]{ display:none }
  #collection, footer{ background:#F3EFE8; color:#1d1712 }
  .filters{ display:flex; flex-wrap:wrap; gap:8px; margin:-30px 0 34px }
  .filters .chip{ cursor:pointer; background:transparent; transition: background-color .3s, color .3s }
  .filters .chip.on, .filters .chip:hover{ background:#1d1712; color:#F3EFE8 }
  .card .pic{ aspect-ratio:4/5; position:relative; margin-bottom:18px; overflow:hidden }
  .card .pic .box{ position:absolute; inset:0; margin:auto; max-height:76%; max-width:78%; filter:drop-shadow(0 22px 22px rgba(0,0,0,.22)); transition: transform .7s var(--ease), opacity .5s }
  .card .pic .mood{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.06); transition: opacity .6s ease, transform 1.2s var(--ease) }
  .card:hover .pic .mood{ opacity:1; transform:scale(1) }
  .card:hover .pic .box{ opacity:0; transform:translateY(-10px) rotate(-3deg) }
  .card .tag{ position:absolute; left:10px; top:10px; z-index:1; font-size:10px; letter-spacing:.16em; text-transform:uppercase; padding:5px 9px; border-radius:99px; background:rgba(255,255,255,.7) }
  .card h3{ font-family:var(--display); font-weight:400; font-size:15px; text-transform:uppercase; line-height:1.2; margin-bottom:6px }
  .card .key{ font-size:14px; opacity:.85; margin-bottom:14px }
  .pyr{ display:grid; gap:7px; margin-bottom:12px; font-size:13px; line-height:1.4 }
  .pyr div{ display:grid; grid-template-columns:52px 1fr; gap:8px }
  .pyr dt{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; padding-top:2px }
  .pyr dd{ opacity:.85 }
  .card .perf{ font-size:12px; opacity:.65; margin-bottom:14px; font-style:italic }
  .card .acts{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px }
  .card .acts button{ height:40px; border-radius:99px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; border:1px solid #1d1712; transition: background-color .3s, color .3s }
  .card .acts .add, .card .acts button:hover{ background:#1d1712; color:var(--c) }
  .card .row{ margin-top:auto; display:flex; justify-content:space-between; align-items:center; font-size:12px; letter-spacing:.2em; text-transform:uppercase; border-top:1px solid rgba(0,0,0,.18); padding-top:14px }
  .card .row b{ font-family:var(--display); font-weight:400; letter-spacing:.04em; font-size:13px }

  /* ---------- FOOTER ---------- */
  footer{ padding:0 clamp(16px,4vw,56px) 36px }
  .foot-top{ display:flex; justify-content:space-between; align-items:end; gap:24px; flex-wrap:wrap; border-top:1px solid currentColor; padding-top:36px }
  .wordmark{ font-family:var(--display); font-size:clamp(46px,12.5vw,230px); line-height:.85; letter-spacing:-.02em; margin-top:clamp(30px,5vw,70px) }
  .foot-links{ display:flex; gap:28px; font-size:12px; letter-spacing:.2em; text-transform:uppercase }
  .small{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; opacity:.7 }
  .credits{ margin-top:28px; font-size:10px; line-height:1.8; text-transform:none; letter-spacing:.04em; max-width:90ch }
  .credits a{ text-decoration:underline }

  .toast{
    position:fixed; left:50%; bottom:28px; z-index:60; transform:translate(-50%, calc(100% + 60px));
    background:var(--ink); color:var(--bg); padding:14px 22px; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
    transition: transform .5s var(--ease);
  }
  .toast.show{ transform:translate(-50%,0) }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 960px){
    .links{ display:none }
    .nav{ grid-template-columns:1fr auto }
    .grid{ grid-template-columns:repeat(2,1fr) }
  }
  @media (max-width: 720px){
    :root{ --H: clamp(220px, 36vh, 330px) }
    .hero{ --py:42% }
    .info{ grid-template-columns:1fr auto; grid-template-areas:"meta buy" "ctl ctl"; row-gap:18px }
    .meta{ grid-area:meta } .buy{ grid-area:buy } .controls{ grid-area:ctl; justify-content:space-between }
    .meta .sub, .meta .notes{ display:none }
    .btn{ height:48px; padding:0 18px; font-size:11px }
    .btn .dot, .btn .p2{ display:none }
    .arrow{ width:48px; height:48px }
  }
  @media (max-width: 720px){
    .story{ height:auto; min-height:100svh; padding:90px 0 200px }
    .story .word{ font-size:21vw; top:42% }
    .story .card2{ margin-top:-40px; width:230px }
    .story .sbottle{ height:165px }
    .story .smeta{ bottom:120px; right:16px }
    .smeta p{ font-size:14px }
    .story .sact{ left:16px; right:16px; bottom:24px; max-width:none; justify-content:flex-start }
    .chip{ height:34px; padding:0 12px; font-size:10px }
  }
  @media (max-width: 480px){ .grid{ grid-template-columns:1fr } }
  @media (prefers-reduced-motion: reduce){
    .slot .float{ animation:none }
    :root{ --dur:.01s }
  }

  /* ---------- shared bits added for the 2-page layout ---------- */
  .story .word{ font-size:var(--fs, clamp(70px,16.5vw,300px)) }
  .story{ scroll-margin-top:0 }
  .cta{ display:inline-flex; align-items:center; gap:12px; height:52px; padding:0 26px; border-radius:99px;
        border:1px solid currentColor; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
        transition: background-color .3s, color .3s }
  .cta:hover{ background:#1d1712; color:#F3EFE8 }
  .cta svg{ width:16px; height:16px }
  .section .head{ display:flex; justify-content:space-between; align-items:end; gap:24px; flex-wrap:wrap; margin-bottom:clamp(40px,6vw,80px) }
  .section .head h2{ margin-bottom:0 }
  .card .acts a{ height:40px; border-radius:99px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; border:1px solid #1d1712;
        display:grid; place-items:center; transition: background-color .3s, color .3s }
  .card .acts a:hover{ background:#1d1712; color:var(--c) }

  /* collection page intro */
  .intro{ min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
          padding:120px clamp(16px,4vw,56px) clamp(40px,7vh,80px) }
  .intro h1{ font-family:var(--display); font-weight:400; font-size:clamp(46px,9vw,170px); line-height:.88; letter-spacing:-.02em; text-transform:uppercase; margin:18px 0 clamp(30px,5vh,56px) }
  .index{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:0 28px; border-top:1px solid currentColor }
  .index a{ display:flex; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px solid rgba(0,0,0,.14);
            font-size:13px; line-height:1.45; letter-spacing:.12em; text-transform:uppercase; transition: padding .3s var(--ease) }
  .index a:hover{ padding-left:10px }
  .index a span{ opacity:.55 }
  .scroll-hint{ margin-top:28px; font-size:11px; letter-spacing:.24em; text-transform:uppercase; opacity:.6 }
  @media (max-width: 720px){
    .story .word{ font-size:var(--fsm, 21vw) }
  }
  .buy .more{ display:block; font-size:12px; letter-spacing:.16em; text-transform:uppercase; margin-bottom:14px; text-decoration:underline; text-underline-offset:5px }
  #intro{ background:#F3EFE8; color:#1d1712 }
  @media (max-width: 720px){ .buy .more{ display:none } }
  .toast:not(.show){ visibility:hidden; transition: transform .5s var(--ease), visibility 0s .5s }
  .more-chip{ cursor:pointer; transition: background-color .3s, color .3s }
  .more-chip:hover{ background:var(--ink); color:var(--bg) }

  /* ---------- FOOTER (simple) ---------- */
  .fs{ display:flex; align-items:center; justify-content:space-between; gap:18px 32px; flex-wrap:wrap;
       padding:26px clamp(16px,4vw,56px); background:#1d1712; color:#F3EFE8; font-size:12px; letter-spacing:.16em; text-transform:uppercase }
  .fs a{ color:inherit }
  .fs-brand{ display:flex; align-items:center; gap:10px; font-family:var(--display); letter-spacing:.18em }
  .fs .mark{ width:20px; height:20px; background:#F3EFE8;
    -webkit-mask:url(../img/logo-mark.png) center/contain no-repeat; mask:url(../img/logo-mark.png) center/contain no-repeat }
  .fs-links{ display:flex; gap:26px; flex-wrap:wrap }
  .fs-links a{ opacity:.75; transition: opacity .3s }
  .fs-links a:hover{ opacity:1; text-decoration:underline; text-underline-offset:4px }
  .fs-copy{ opacity:.5 }
  @media (max-width: 720px){ .fs{ flex-direction:column; align-items:flex-start } }
  /* autoplay progress on the active dot */
  .dots button{ position:relative; overflow:hidden }
  .dots button.on{ width:34px; background:transparent; box-shadow:inset 0 0 0 1px currentColor }
  .dots button.on::after{ content:""; position:absolute; inset:0; background:currentColor; transform-origin:left; transform:scaleX(1) }
  .dots button.on.timer::after{ animation: dotfill 5s linear both }
  @keyframes dotfill{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
  .hero-off .dots button.on.timer::after{ animation-play-state:paused }

  /* ---------- phones: story sections flow top-to-bottom so long text never collides ---------- */
  .ing, .story .word, .story .sbottle{ will-change:auto }   /* layers are created only while a section is on screen */
  @media (max-width: 720px){
    .story{ display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
            height:auto; min-height:0; padding:92px 16px 52px }
    .story .card2{ margin-top:0; width:min(240px, 64vw); flex:0 0 auto }
    .story .word{ top:250px }
    .story .sbottle{ top:215px; height:150px }
    .story .smeta, .story .sact{ position:relative; left:auto; right:auto; bottom:auto; z-index:6; width:100%; max-width:none }
    .story .smeta{ margin-top:30px }
    .story .smeta p{ font-size:14px; line-height:1.6 }
    .story .sact{ margin-top:18px; justify-content:flex-start }
    .ing.front{ z-index:3 }
  }

  /* ---------- phone menu ---------- */
  .menu-btn{ display:none }
  @media (max-width: 960px){
    .nav{ grid-template-columns:1fr auto auto; gap:14px }
    .menu-btn{ display:grid; place-content:center; gap:6px; width:42px; height:42px; border-radius:50%; border:1px solid currentColor; position:relative; z-index:2 }
    .menu-btn span{ display:block; width:16px; height:1.5px; background:currentColor; transition: transform .4s var(--ease) }
    .menu-open .menu-btn span:first-child{ transform:translateY(3.75px) rotate(45deg) }
    .menu-open .menu-btn span:last-child{ transform:translateY(-3.75px) rotate(-45deg) }
    .links{ display:flex; position:fixed; inset:0; z-index:1; flex-direction:column; justify-content:center; gap:6px;
            padding:0 clamp(24px,8vw,56px); background:#1d1712; color:#F3EFE8;
            clip-path:inset(0 0 100% 0); transition: clip-path .6s cubic-bezier(.76,0,.24,1) }
    .links a{ font-family:var(--display); font-size:clamp(28px,8vw,44px); letter-spacing:0; padding:8px 0;
              opacity:0; transform:translateY(20px); transition: opacity .4s, transform .5s var(--ease) }
    .links a::after{ display:none }
    .menu-open .links{ clip-path:inset(0) }
    .menu-open .links a{ opacity:1; transform:none }
    .menu-open .links a:nth-child(2){ transition-delay:.05s } .menu-open .links a:nth-child(3){ transition-delay:.1s }
    .menu-open .links a:nth-child(4){ transition-delay:.15s }
    .menu-open .nav{ position:fixed; color:#F3EFE8 }
    .menu-open .brand .mark{ background:#F3EFE8 }
    .menu-open .bag .count{ background:#F3EFE8; color:#1d1712 }
  }
  @media (max-width: 960px){ .brand, .bag{ position:relative; z-index:2 } }