:root{
    --bg-0:#16140F;
    --bg-1:#0C0B09;
    --ivory:#F7F3EC;
    --ink:#1B1813;
    --gold:#C2A977;
    --gold-soft:#DBC8A4;
    --muted:#A89C89;
    --line:rgba(194,169,119,.45);
    --ease:cubic-bezier(.22,.61,.36,1);
  }

  *{box-sizing:border-box;margin:0;padding:0}

  html{
    /* allow scroll on very short viewports instead of clipping */
    height:100%;
    scroll-behavior:smooth;
  }

  body{
    font-family:'Jost',sans-serif;
    background:
      radial-gradient(120% 90% at 50% 18%, #221F18 0%, var(--bg-0) 42%, var(--bg-1) 100%);
    background-attachment:fixed;
    color:var(--ivory);
    min-height:100svh;
    display:flex;
    align-items:center;
    justify-content:center;
    /* overflow:auto instead of hidden so short phones can scroll */
    overflow-x:hidden;
    overflow-y:auto;
    position:relative;
    padding:clamp(28px,6vw,64px) clamp(16px,5vw,32px);
    -webkit-font-smoothing:antialiased;
  }

  /* faint film grain */
  body::after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    opacity:.05;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode:overlay;
    z-index:0;
  }

  /* ambient glow */
  .ambient{
    position:fixed;
    width:clamp(260px,70vmin,600px);
    height:clamp(260px,70vmin,600px);
    top:50%;left:50%;
    border-radius:50%;
    transform:translate(-50%,-58%);
    background:radial-gradient(circle, rgba(216,196,160,.22) 0%, rgba(194,169,119,.08) 38%, transparent 68%);
    filter:blur(8px);
    pointer-events:none;
    z-index:0;
  }

  /* ─── Layout ─── */
  .stage{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    max-width:600px;
    width:100%;
    /* ensure content is never tightly clipped on tiny screens */
    padding-bottom:clamp(16px,4vw,32px);
  }

  /* ─── Logo disc ─── */
  .disc{
    --size:clamp(180px,min(74vw,74vh),320px);
    width:var(--size);
    height:var(--size);
    flex-shrink:0;
    border-radius:50%;
    background:radial-gradient(120% 120% at 50% 30%, #FFFFFF 0%, var(--ivory) 70%, #ECE6DB 100%);
    box-shadow:
      0 0 0 1px rgba(255,255,255,.04),
      0 40px 90px -30px rgba(0,0,0,.7),
      0 0 80px -10px rgba(194,169,119,.18);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:clamp(8px,2.4vmin,18px);
    position:relative;
    overflow:hidden;
  }
  .disc::before{
    content:"";
    position:absolute;
    inset:-40%;
    background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);
    transform:translateX(-120%);
  }

  /* ─── Sprig / ornament ─── */
  .sprig-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(6px,2.2vmin,16px);
  }
  .sprig-row .rule{
    width:clamp(20px,8vmin,52px);
    height:1px;
    background:var(--line);
    transform:scaleX(0);
  }
  .sprig-row .rule.left{transform-origin:right}
  .sprig-row .rule.right{transform-origin:left}

  .sprig{
    width:clamp(22px,8vmin,42px);
    height:auto;
    overflow:visible;
  }
  .sprig path{
    fill:none;
    stroke:var(--gold);
    stroke-width:1.4;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  /* ─── Wordmark ─── */
  .wordmark{
    font-family:'Cormorant Garamond',serif;
    font-weight:400;
    color:var(--ink);
    font-size:clamp(2rem,10vmin,3.6rem);
    line-height:1;
    letter-spacing:.22em;
    padding-left:.22em;
    display:flex;
  }
  .wordmark span{display:inline-block}

  .subline{
    font-family:'Jost',sans-serif;
    font-weight:400;
    color:var(--gold);
    font-size:clamp(.55rem,2vmin,.72rem);
    letter-spacing:.58em;
    padding-left:.58em;
    display:flex;
    align-items:center;
    gap:.8em;
  }
  .subline .dot{
    width:3px;height:3px;border-radius:50%;
    background:var(--gold);
    display:inline-block;
    transform:rotate(45deg);
  }

  /* ─── Copy block ─── */
  .copy{margin-top:clamp(24px,5vh,52px)}
  .eyebrow{
    font-size:clamp(.58rem,.9vw,.66rem);
    letter-spacing:.52em;
    padding-left:.52em;
    text-transform:uppercase;
    color:var(--gold);
    font-weight:400;
  }
  .tagline{
    font-family:'Cormorant Garamond',serif;
    font-weight:300;
    font-size:clamp(1.3rem,5vw,2.1rem);
    line-height:1.34;
    color:var(--ivory);
    margin-top:clamp(12px,2vh,18px);
    letter-spacing:.01em;
  }
  .tagline em{
    font-style:italic;
    color:var(--gold-soft);
  }
  .note{
    font-size:clamp(.8rem,2.2vw,.88rem);
    font-weight:300;
    line-height:1.7;
    color:var(--muted);
    margin-top:clamp(10px,1.8vh,16px);
    max-width:34ch;
    margin-left:auto;margin-right:auto;
  }

  /* ─── Email signup ─── */
  .signup{
    margin-top:clamp(20px,4vh,40px);
    width:100%;
    max-width:400px;
    margin-left:auto;margin-right:auto;
  }
  .field{
    display:flex;
    align-items:flex-end;
    gap:14px;
    border-bottom:1px solid rgba(168,156,137,.35);
    padding-bottom:10px;
    transition:border-color .4s var(--ease);
  }
  .field:focus-within{border-color:var(--gold)}
  .field input{
    flex:1;
    min-width:0; /* prevent overflow in flex */
    background:transparent;
    border:0;
    outline:0;
    color:var(--ivory);
    font-family:'Jost',sans-serif;
    font-weight:300;
    font-size:clamp(.88rem,2.2vw,.95rem);
    letter-spacing:.04em;
    padding:8px 0; /* taller for touch */
  }
  .field input::placeholder{color:rgba(168,156,137,.65)}
  .notify{
    flex-shrink:0;
    background:var(--gold);
    color:var(--ink);
    border:0;
    cursor:pointer;
    font-family:'Jost',sans-serif;
    font-weight:500;
    font-size:.7rem;
    text-transform:uppercase;
    letter-spacing:.18em;
    /* min touch target 44px height */
    padding:12px 20px;
    min-height:44px;
    border-radius:2px;
    transition:transform .35s var(--ease),background .35s var(--ease),letter-spacing .35s var(--ease);
    -webkit-tap-highlight-color:transparent;
  }
  .notify:hover{background:var(--gold-soft);transform:translateY(-2px);letter-spacing:.22em}
  .notify:active{transform:translateY(0)}
  .notify:focus-visible,.field input:focus-visible{outline:2px solid var(--gold-soft);outline-offset:4px}

  .confirm{
    font-family:'Cormorant Garamond',serif;
    font-style:italic;
    font-size:clamp(1rem,3vw,1.15rem);
    color:var(--gold-soft);
    opacity:0;
    transform:translateY(6px);
    transition:opacity .6s var(--ease),transform .6s var(--ease);
    min-height:1.4em;
    margin-top:10px;
  }
  .confirm.show{opacity:1;transform:none}
  .signup.done .field{opacity:0;transform:translateY(-6px);pointer-events:none;height:0;overflow:hidden;margin:0;padding:0;border:0;transition:all .5s var(--ease)}

  /* ─── Socials ─── */
  .social{
    margin-top:clamp(24px,4vh,44px);
    display:flex;
    gap:clamp(14px,3vw,22px);
    justify-content:center;
  }
  .social a{
    color:var(--muted);
    display:grid;place-items:center;
    /* 44px min touch target */
    width:clamp(44px,6vw,44px);
    height:clamp(44px,6vw,44px);
    border-radius:50%;
    border:1px solid rgba(168,156,137,.22);
    transition:color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
    -webkit-tap-highlight-color:transparent;
  }
  .social a:hover{color:var(--gold);border-color:var(--line);transform:translateY(-3px)}
  .social svg{width:18px;height:18px;fill:currentColor}
  .social a:focus-visible{outline:2px solid var(--gold-soft);outline-offset:3px}

  .footer{
    margin-top:clamp(24px,4vh,50px);
    font-size:clamp(.58rem,.8vw,.62rem);
    letter-spacing:.32em;
    text-transform:uppercase;
    color:rgba(168,156,137,.5);
    padding-bottom:4px;
  }

  /* ════════════════════════════════════════════
     RESPONSIVE BREAKPOINTS
  ════════════════════════════════════════════ */

  /* ── Large desktops & TVs (≥1280px) ── */
  @media (min-width:1280px){
    .stage{max-width:640px}
    .disc{--size:340px}
    .tagline{font-size:2.2rem}
    .note{max-width:36ch}
  }

  /* ── Tablets portrait & large phones landscape (≤1024px) ── */
  @media (max-width:1024px){
    .stage{max-width:520px}
  }

  /* ── Tablets portrait (≤768px) ── */
  @media (max-width:768px){
    body{padding:clamp(20px,5vw,40px) clamp(16px,5vw,24px)}
    .stage{max-width:480px}
    .disc{--size:clamp(180px,60vw,280px)}
    .tagline{font-size:clamp(1.25rem,5.5vw,1.8rem)}
    .copy{margin-top:clamp(20px,4vh,40px)}
    .signup{max-width:380px}
  }

  /* ── Mobile phones (≤480px) ── */
  @media (max-width:480px){
    body{padding:24px 18px}
    .disc{--size:clamp(160px,72vw,240px)}
    .wordmark{font-size:clamp(1.8rem,12vmin,2.8rem)}
    .subline{font-size:clamp(.52rem,2.8vmin,.68rem);letter-spacing:.48em;padding-left:.48em}
    .tagline{font-size:clamp(1.2rem,6vw,1.6rem);margin-top:12px}
    .note{font-size:.82rem;max-width:30ch}
    .signup{max-width:100%}
    .field{flex-direction:column;align-items:stretch;gap:14px;border:0;padding-bottom:0}
    .field input{
      border-bottom:1px solid rgba(168,156,137,.35);
      padding-bottom:10px;
      font-size:.95rem;
    }
    .notify{width:100%;text-align:center;padding:14px 20px;font-size:.72rem}
    .social a{width:44px;height:44px}
    .footer{letter-spacing:.22em;font-size:.6rem}
  }

  /* ── Very small phones (≤360px) ── */
  @media (max-width:360px){
    body{padding:20px 14px}
    .disc{--size:clamp(148px,74vw,200px)}
    .wordmark{font-size:clamp(1.6rem,13vmin,2.4rem)}
    .tagline{font-size:clamp(1.1rem,6.5vw,1.4rem)}
    .note{font-size:.78rem}
    .eyebrow{font-size:.58rem;letter-spacing:.38em;padding-left:.38em}
    .sprig{width:clamp(18px,7vmin,32px)}
    .sprig-row .rule{width:clamp(16px,6vmin,36px)}
  }

  /* ── Landscape phones (short & wide) ── */
  @media (max-height:500px) and (orientation:landscape){
    body{
      align-items:flex-start;
      padding:16px clamp(16px,4vw,32px);
      overflow-y:auto;
    }
    .stage{
      flex-direction:row;
      flex-wrap:wrap;
      justify-content:center;
      align-items:flex-start;
      gap:clamp(16px,3vw,28px);
      max-width:900px;
    }
    .disc{
      --size:clamp(130px,28vh,200px);
      flex-shrink:0;
    }
    .content-col{
      flex:1;
      min-width:220px;
      text-align:left;
      display:flex;
      flex-direction:column;
      align-items:flex-start;
    }
    .copy{margin-top:0}
    .tagline{font-size:clamp(1.1rem,3.5vh,1.6rem)}
    .note{margin-left:0;margin-right:0;max-width:38ch}
    .signup{margin-left:0;margin-right:0;max-width:100%}
    .social{justify-content:flex-start}
    .footer{text-align:left}
    .ambient{display:none} /* simplify on tiny landscape */
  }

  /* ────────── MOTION ────────── */
  @media (prefers-reduced-motion: no-preference){
    .ambient{animation:drift 16s var(--ease) infinite alternate}
    @keyframes drift{
      0%{transform:translate(-58%,-62%) scale(1)}
      100%{transform:translate(-42%,-54%) scale(1.12)}
    }

    .disc{opacity:0;transform:scale(.94);animation:rise 1.1s var(--ease) .15s forwards}
    .disc::before{animation:sheen 1.3s var(--ease) 1.5s forwards}
    @keyframes sheen{to{transform:translateX(120%)}}

    .sprig path{stroke-dasharray:240;stroke-dashoffset:240;animation:draw 1.4s var(--ease) .55s forwards}
    @keyframes draw{to{stroke-dashoffset:0}}

    .sprig-row .rule{animation:extend .9s var(--ease) 1.35s forwards}
    @keyframes extend{to{transform:scaleX(1)}}

    .wordmark span{opacity:0;transform:translateY(14px);animation:rise 0.7s var(--ease) forwards}
    .subline{opacity:0;transform:translateY(10px);animation:rise .7s var(--ease) 1.55s forwards}

    .copy,.signup,.social,.footer{opacity:0;transform:translateY(16px)}
    .copy{animation:rise .9s var(--ease) 1.75s forwards}
    .signup{animation:rise .9s var(--ease) 1.95s forwards}
    .social{animation:rise .9s var(--ease) 2.15s forwards}
    .footer{animation:rise .9s var(--ease) 2.3s forwards}

    @keyframes rise{to{opacity:1;transform:none}}
  }