/* Variable fonts, latin and latin-ext only: six files, every weight used. */
  @font-face{font-family:Cormorant;font-style:normal;font-weight:300 600;font-display:swap;
    src:url(/a/cormorant.woff2) format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face{font-family:Cormorant;font-style:normal;font-weight:300 600;font-display:swap;
    src:url(/a/cormorant-ext.woff2) format('woff2');
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  @font-face{font-family:Cormorant;font-style:italic;font-weight:300 600;font-display:swap;
    src:url(/a/cormorant-italic.woff2) format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face{font-family:Cormorant;font-style:italic;font-weight:300 600;font-display:swap;
    src:url(/a/cormorant-italic-ext.woff2) format('woff2');
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  @font-face{font-family:Karla;font-style:normal;font-weight:200 500;font-display:swap;
    src:url(/a/karla.woff2) format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face{font-family:Karla;font-style:normal;font-weight:200 500;font-display:swap;
    src:url(/a/karla-ext.woff2) format('woff2');
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

  :root{
    --ink:#080603; --ink-2:#120c05; --edge:#2a1d0f;
    --amber:#f0a93b; --amber-deep:#e09a32; --amber-soft:#f0b65c;
    --cream:#fbedd4; --cream-2:#ffe0ae; --cream-3:#ffd292;
    --muted:#a88a5c; --muted-2:#7e6a52;
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
  body{
    margin:0;background:var(--ink);color:var(--cream);
    font:300 17px/1.7 Karla,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    overflow-x:hidden;
  }
  /* Two pools rather than one wash, so the page has a direction of light. */
  body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
    background:
      radial-gradient(760px 520px at 78% 6%, rgba(240,169,59,.16), transparent 64%),
      radial-gradient(620px 460px at 6% 34%, rgba(240,169,59,.07), transparent 66%)}
  .wrap{position:relative;z-index:1;max-width:70rem;margin:0 auto;
        padding:1.5rem max(1.15rem, env(safe-area-inset-left)) 4rem}

  /* ---- the atmosphere layers ----
     Four fixed, pointer-events:none, stacked under the content. The order
     matters: vignette darkens the edges first, embers glow on top of it,
     grain sits over everything so it textures the light rather than sitting
     under it, and the cursor dot is above all of it. */
  #embers{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;
          z-index:0;mix-blend-mode:screen}
  #vign{position:fixed;inset:0;pointer-events:none;z-index:0;
    background:radial-gradient(140% 100% at 50% 50%,transparent 40%,rgba(0,0,0,.55) 100%)}
  /* Grain is one 160px SVG noise tile, repeated. At 5% over `overlay` it is
     texture, not a pattern you can see. Generated in the URL rather than
     shipped as a file: it costs no request and cannot 404. */
  #grain{position:fixed;inset:0;pointer-events:none;z-index:3;opacity:.05;
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}
  /* The aura trails the pointer slowly and the dot follows it almost exactly.
     Two speeds is what makes it feel like a light being carried rather than a
     graphic stuck to the mouse. */
  #aura{position:fixed;left:0;top:0;width:760px;height:760px;margin:-380px 0 0 -380px;
    border-radius:50%;pointer-events:none;z-index:0;opacity:0;transition:opacity .6s;
    background:radial-gradient(circle,rgba(255,176,72,.16),rgba(255,140,40,.06) 38%,transparent 66%);
    filter:blur(6px);will-change:transform}
  #dot{position:fixed;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;
    border-radius:50%;pointer-events:none;z-index:9;opacity:0;transition:opacity .3s;
    background:radial-gradient(circle,#ffe9c4,#f0a93b 45%,transparent 72%);
    box-shadow:0 0 18px 4px rgba(240,169,59,.7);will-change:transform}
  /* Hiding the real cursor is the design's call, and it is the one thing here
     that can genuinely cost someone. It is behind THREE conditions: JS ran,
     the device has a fine hovering pointer, and reduced motion is off. A
     keyboard press puts the real cursor back for the rest of the visit,
     because a hidden pointer next to a focus ring is a confusing pair.
     Delete this rule to keep the system cursor and lose nothing else. */
  @media (hover:hover) and (pointer:fine){
    .js:not(.keys) body{cursor:none}
    .js:not(.keys) a,.js:not(.keys) button{cursor:none}
  }

  /* ---- the theme's motion ----
     Six animations, lifted from the design with their own timings. Nothing
     here is on a fast loop: the slowest is a ring taking a full minute to
     come round. Long and out of phase with each other is what reads as a
     glow rather than as a page that will not sit still. */
  @keyframes ringDrift{0%{transform:rotate(0) scale(1)}
                       50%{transform:rotate(180deg) scale(1.04)}
                       100%{transform:rotate(360deg) scale(1)}}
  @keyframes rayspin{to{transform:rotate(360deg)}}
  @keyframes haloPulse{0%,100%{transform:scale(1);opacity:.45}
                       50%{transform:scale(1.09);opacity:.85}}
  @keyframes flick{0%,100%{opacity:.9} 43%{opacity:.55} 47%{opacity:1} 62%{opacity:.7}}
  @keyframes shimmerSweep{0%{background-position:220% 50%}100%{background-position:-120% 50%}}
  @keyframes riseSlow{from{transform:translateY(14px)}to{transform:translateY(-14px)}}

  /* ---- header ---- */
  header{display:flex;align-items:center;gap:.85rem;margin-bottom:clamp(3rem,9vw,6rem)}
  .brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:inherit}
  .mark{position:relative;width:46px;height:46px;flex:none}
  .mark::before{content:"";position:absolute;inset:-10px;border-radius:50%;
    background:conic-gradient(from 0deg,transparent,rgba(240,169,59,.55),transparent 55%);
    filter:blur(7px);animation:ringDrift 9s linear infinite}
  .brand img{position:relative;width:46px;height:46px;border-radius:50%;object-fit:cover;
             display:block;filter:drop-shadow(0 0 14px rgba(240,169,59,.55))}
  .brand b{font:400 1.4rem/1 Cormorant,Georgia,serif;letter-spacing:.01em;
           animation:flick 6s ease-in-out infinite}
  nav{margin-left:auto;display:flex;align-items:center;gap:1.5rem}
  nav a{color:var(--muted);text-decoration:none;font-size:.78rem;letter-spacing:.14em;
        text-transform:uppercase}
  nav a:hover{color:var(--cream-2)}
  @media(max-width:640px){nav .hideable{display:none}}

  /* ---- hero ---- */
  .hero{display:grid;gap:clamp(2rem,6vw,4rem);align-items:center;
        grid-template-columns:1fr;margin-bottom:clamp(3.5rem,10vw,7rem)}
  @media(min-width:900px){.hero{grid-template-columns:1.05fr .95fr}}
  .eyebrow{display:flex;align-items:center;gap:.6rem;color:var(--muted);
           font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;margin:0 0 1.6rem}
  .eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--amber);
             box-shadow:0 0 10px 2px rgba(240,169,59,.7);display:inline-block;
             animation:haloPulse 2.6s ease-in-out infinite}
  h1{font:300 clamp(2.6rem,8vw,4.6rem)/1.08 Cormorant,Georgia,serif;
     letter-spacing:-.01em;margin:0 0 1.5rem;color:var(--cream)}
  h1 em{display:block;font-style:italic;color:var(--cream-3)}
  /* Light travelling through the headline. Behind @supports on purpose: the
     text is painted transparent to let the gradient show, so a browser that
     cannot clip a background to text must never reach this rule or the
     headline disappears entirely. */
  @supports (background-clip:text) or (-webkit-background-clip:text){
    h1{background:linear-gradient(100deg,#e9d5b4 18%,#fff6e4 32%,#ffd08a 42%,#f0b65c 52%,#e9d5b4 70%);
       background-size:260% 100%;-webkit-background-clip:text;background-clip:text;
       color:transparent;animation:shimmerSweep 9s linear infinite}
    h1 em{color:inherit}
  }
  .lede{color:#c4ae8e;margin:0 0 2.2rem;max-width:42ch;font-size:1.03rem}

  .row{display:flex;flex-wrap:wrap;gap:.8rem}
  a.btn{display:inline-block;text-decoration:none;border-radius:999px;
        padding:.82rem 1.5rem;font-size:.96rem;font-weight:400;letter-spacing:.01em}
  a.go{background:linear-gradient(180deg,var(--amber-soft),var(--amber-deep));color:#1c1102;
       box-shadow:0 6px 26px -8px rgba(240,169,59,.75)}
  a.go:hover{filter:brightness(1.07)}
  a.ghost{border:1px solid var(--edge);color:var(--cream)}
  a.ghost:hover{border-color:#4a3418;background:rgba(240,169,59,.05)}
  a.btn:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
  /* Buttons and nav links lean toward the cursor. `translate` again, so a
     hover filter or a future transform cannot fight it. */
  [data-magnet]{display:inline-block;translate:var(--mgx,0) var(--mgy,0);
                transition:translate .35s cubic-bezier(.2,.8,.2,1),filter .2s}

  /* Sections arrive out of focus and sharpen, staggered in fours so a row of
     cards does not land as one block.
     Scoped to .js, which a one-line script in the head sets. The hidden state
     is what JS is FOR, so it must not exist without it: if the script never
     runs, this rule never applies and the page is simply there. Hiding
     content by default and relying on JS to bring it back means one blocked
     file shows a blank page. */
  .js [data-reveal]{opacity:0;transform:translateY(26px);filter:blur(6px);
    transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1),
               filter .9s ease}
  .js [data-reveal].seen{opacity:1;transform:none;filter:none}

  /* Four layers behind the logo, sized off one variable so they keep their
     proportions on a phone instead of hanging off the side. The design had
     them at fixed pixels: 640 rays, 430 glow, 470 and 560 rings. */
  .heroart{position:relative;display:grid;place-items:center;--art:min(430px,72vw)}
  .heroart span{position:absolute;top:50%;left:50%;translate:-50% -50%;
    border-radius:50%;pointer-events:none;display:block}
  /* Centring uses `translate`, not `transform`, so the rotate and scale in the
     keyframes compose with it rather than overwrite it. */
  .rays{width:calc(var(--art)*1.49);height:calc(var(--art)*1.49);border-radius:0;
    background:conic-gradient(from 0deg,transparent 0deg,rgba(255,178,80,.16) 18deg,
      transparent 40deg,transparent 120deg,rgba(255,178,80,.12) 140deg,transparent 168deg,
      transparent 250deg,rgba(255,178,80,.14) 268deg,transparent 300deg);
    filter:blur(14px);animation:rayspin 46s linear infinite}
  .glow{width:var(--art);height:var(--art);
    background:radial-gradient(circle,rgba(255,186,92,.34),transparent 62%);
    filter:blur(26px);animation:haloPulse 6s ease-in-out infinite}
  .ring1{width:calc(var(--art)*1.09);height:calc(var(--art)*1.09);
    border:1px solid rgba(240,169,59,.16);animation:ringDrift 34s linear infinite}
  .ring2{width:calc(var(--art)*1.3);height:calc(var(--art)*1.3);
    border:1px dashed rgba(240,169,59,.1);animation:ringDrift 60s linear infinite reverse}
  /* height:auto is required: the width/height attributes are there for the
     aspect-ratio hint, and the height one is a used value without it. */
  .heroart video,.heroart img{position:relative;width:100%;max-width:430px;
    height:auto;border-radius:26px;display:block;mix-blend-mode:screen;
    will-change:transform}

  /* ---- cards ---- */
  .cards{display:grid;gap:1.3rem;grid-template-columns:1fr;margin-bottom:3.4rem}
  @media(min-width:820px){.cards{grid-template-columns:1fr 1fr}}
  .card{position:relative;overflow:hidden;border:1px solid var(--edge);border-radius:1.1rem;
        padding:2rem 1.8rem;background:linear-gradient(165deg,rgba(42,29,15,.42),rgba(12,8,4,.5));
        display:flex;flex-direction:column}
  .card .deco,.also .deco{position:absolute;right:-52px;bottom:-52px;width:250px;opacity:.13;
              mix-blend-mode:screen;pointer-events:none;
              animation:riseSlow 11s ease-in-out infinite alternate}
  /* A light that follows the cursor across the card, and the card tilting
     very slightly toward it. Three and a half degrees is the whole effect:
     enough to feel, not enough to notice as a trick. */
  .card{--mx:50%;--my:50%;transform-style:preserve-3d;
        transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .5s}
  .card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
    transition:opacity .45s ease;
    background:radial-gradient(340px circle at var(--mx) var(--my),
      rgba(255,190,100,.17),transparent 70%)}
  .card:hover{border-color:rgba(240,169,59,.45)}
  .card:hover::after{opacity:1}
  .card h2{font:300 1.9rem/1.2 Cormorant,Georgia,serif;margin:0;color:var(--cream)}
  .cardtop{display:flex;align-items:center;gap:1rem;margin-bottom:1.2rem}
  .state{margin-left:auto;flex:none;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
         padding:.34rem .72rem;border-radius:999px;white-space:nowrap}
  .state i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--amber);
           box-shadow:0 0 9px 2px rgba(240,169,59,.75);margin-right:.45rem;
           vertical-align:middle;animation:haloPulse 2.2s ease-in-out infinite}
  .live{color:var(--amber);border:1px solid rgba(240,169,59,.42);
        background:rgba(240,169,59,.08)}
  .soon{color:var(--muted-2);border:1px solid var(--edge)}
  .card p{margin:0 0 1rem;color:#c4ae8e;position:relative}
  .card p.keep{color:var(--cream)}
  .card .fill{flex:1}
  .card .links{display:flex;gap:1.4rem;align-items:center;position:relative}
  .card .links a{color:var(--amber);text-decoration:none;font-size:.95rem}
  .card .links a.quiet{color:var(--muted)}
  .card .links a:hover{color:var(--cream-2)}

  /* ---- where it works ---- */
  .where{border-top:1px solid var(--edge);padding-top:2.6rem;margin-bottom:3.4rem}
  .where h2{font:300 1.9rem/1.2 Cormorant,Georgia,serif;margin:0 0 .7rem;color:var(--cream)}
  .where .lede{margin-bottom:2.2rem}
  .uses{display:grid;gap:1.6rem 2.2rem;grid-template-columns:1fr;margin-bottom:2.2rem}
  @media(min-width:760px){.uses{grid-template-columns:repeat(3,1fr)}}
  .uses h3{font:400 .74rem/1 Karla,sans-serif;letter-spacing:.18em;text-transform:uppercase;
           color:var(--amber-soft);margin:0 0 .7rem}
  .uses p{margin:0;color:#c4ae8e;font-size:.97rem}
  .where p.keep{color:var(--cream);margin:0 0 1rem;max-width:52ch}
  .where>p:last-child{margin:0;color:#c4ae8e;max-width:52ch}

  /* ---- close ---- */
  .close{display:grid;gap:1.6rem;grid-template-columns:1fr;
         border-top:1px solid var(--edge);padding-top:2.4rem}
  @media(min-width:820px){.close{grid-template-columns:1.6fr .9fr;align-items:end}}
  .close p{margin:0;font:300 1.22rem/1.6 Cormorant,Georgia,serif;color:var(--cream);max-width:46ch}
  .close small{color:var(--muted-2);font-size:.68rem;letter-spacing:.16em;
               text-transform:uppercase;line-height:1.8}
  footer{margin-top:3rem;color:#5c4c39;font-size:.82rem}

  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    #embers{display:none}
    #aura,#dot,#grain{display:none}
    .mark::before,.brand b,.eyebrow i,.state i,h1,
    .rays,.glow,.ring1,.ring2,.card .deco,.also .deco{animation:none}
    .card{transition:border-color .5s}
    /* The reveal has to end VISIBLE, not stay hidden: turning off the
       transition on an element that starts at opacity 0 would delete the
       page for the people who asked for less movement, not calm it. */
    .js [data-reveal]{opacity:1;transform:none;filter:none;transition:none}
    [data-magnet]{translate:none}
    .card::after{display:none}
  }

  /* ---- waiting list ---- */
  .wait{border:1px solid var(--edge);border-radius:1.1rem;padding:1.9rem 1.7rem;
        background:linear-gradient(165deg,rgba(42,29,15,.42),rgba(12,8,4,.5));
        position:relative;overflow:hidden}
  .wait h2{font:300 1.7rem/1.2 Cormorant,Georgia,serif;margin:0 0 .6rem;color:var(--cream)}
  .wait p{margin:0 0 1.3rem;color:#c4ae8e;max-width:52ch}
  .wait form{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
  .wait input[type=email]{flex:1 1 15rem;min-width:0;background:rgba(8,6,3,.6);
    border:1px solid var(--edge);border-radius:999px;padding:.82rem 1.2rem;
    color:var(--cream);font:300 .98rem Karla,sans-serif}
  .wait input[type=email]::placeholder{color:var(--muted-2)}
  .wait input[type=email]:focus{outline:none;border-color:rgba(240,169,59,.55)}
  .wait input[type=email]:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
  .wait button{border:0;cursor:pointer;border-radius:999px;padding:.84rem 1.6rem;
    font:400 .96rem Karla,sans-serif;color:#1c1102;
    background:linear-gradient(180deg,var(--amber-soft),var(--amber-deep));
    box-shadow:0 6px 26px -8px rgba(240,169,59,.75)}
  .wait button:hover{filter:brightness(1.07)}
  .wait button:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
  .wait small{display:block;margin-top:.9rem;color:var(--muted-2);font-size:.78rem}
  .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

  /* ---- panels: how the builder works ---- */
  .panels{display:grid;gap:1.6rem 2.2rem;grid-template-columns:1fr;margin-bottom:3.2rem}
  @media(min-width:760px){.panels{grid-template-columns:repeat(3,1fr)}}
  .panels h3{font:400 .74rem/1 Karla,sans-serif;letter-spacing:.18em;text-transform:uppercase;
             color:var(--amber-soft);margin:0 0 .7rem}
  .panels p{margin:0;color:#c4ae8e;font-size:.97rem}

  /* ---- own ---- */
  .own{border-top:1px solid var(--edge);padding-top:2.6rem;margin-bottom:3.4rem}
  .own h2{font:300 1.9rem/1.2 Cormorant,Georgia,serif;margin:0 0 1rem;color:var(--cream)}
  .own p{margin:0 0 1rem;max-width:54ch;color:#c4ae8e}
  .own p.keep{color:var(--cream)}

  /* ---- the other-product strip ---- */
  .also{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;
        border:1px solid var(--edge);border-radius:1.1rem;padding:1.5rem 1.7rem;
        background:linear-gradient(165deg,rgba(42,29,15,.34),rgba(12,8,4,.44));
        margin-bottom:3.4rem;position:relative;overflow:hidden}
  .also h2{font:300 1.5rem/1.2 Cormorant,Georgia,serif;margin:0;color:var(--cream);flex:none}
  .also p{margin:0;color:#c4ae8e;flex:1 1 20rem;min-width:0;font-size:.97rem}
  a.more{color:var(--amber);text-decoration:none;white-space:nowrap;font-size:.95rem}
  a.more:hover{color:var(--cream-2)}

  /* ---- back link on the second page ---- */
  .back{display:inline-block;color:var(--muted);text-decoration:none;font-size:.78rem;
        letter-spacing:.14em;text-transform:uppercase;margin-bottom:1.4rem}
  .back:hover{color:var(--cream-2)}

  .also .deco{right:-64px;bottom:-64px;width:210px;opacity:.11}
  .wait .wlmsg{margin:.9rem 0 0;min-height:1.2em;color:var(--amber-soft);font-size:.95rem}
  .wait .wlmsg.bad{color:#e59a7a}