:root{
    --ink:#10151a;
    --ink-2:#171e24;
    --ink-soft:#232b31;
    --clay:#c2542e;
    --gold:#c99a44;
    --gold-light:#e9cf94;
    --sand:#efe6d3;
    --sand-dim:rgba(239,230,211,0.62);
    --magenta:#a13358;
    --ease:cubic-bezier(.22,.7,.2,1);
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--ink);
    color:var(--sand);
    font-family:'Sora',sans-serif;
    font-weight:400;
    line-height:1.5;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{background:var(--gold);color:var(--ink);}

  h1,h2,h3{
    font-family:'Petrona',serif;
    font-weight:700;
    letter-spacing:-0.01em;
    line-height:1.04;
  }
  em{font-style:italic;font-weight:500;color:var(--gold-light);}

  a{color:inherit;text-decoration:none;}
  img{display:block;max-width:100%;}

  .eyebrow{
    font-family:'Sora',sans-serif;
    font-size:0.72rem;
    font-weight:600;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--gold);
  }

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

  /* ---------- NAV ---------- */
  .nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    display:flex;align-items:center;justify-content:space-between;
    padding:1.6rem clamp(1.25rem,4vw,3.5rem);
    transition:background .5s var(--ease),padding .5s var(--ease),border-color .5s var(--ease);
    border-bottom:1px solid transparent;
  }
  .nav.scrolled{
    background:rgba(16,21,26,0.86);
    backdrop-filter:blur(10px);
    padding-top:1.05rem;padding-bottom:1.05rem;
    border-bottom:1px solid rgba(201,154,68,0.18);
  }
  .wordmark{
    font-family:'Petrona',serif;
    font-size:1.15rem;
    font-weight:700;
    letter-spacing:0.02em;
  }
  .wordmark .dot{color:var(--clay);}
  .nav-pill{
    display:inline-flex;align-items:center;gap:0.5rem;
    font-size:0.68rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;
    border:1px solid rgba(201,154,68,0.45);
    padding:0.5rem 0.9rem;border-radius:100px;
    color:var(--gold-light);
  }
  .nav-pill::before{
    content:"";width:6px;height:6px;border-radius:50%;
    background:var(--clay);
    box-shadow:0 0 0 0 rgba(194,84,46,.6);
    animation:pulse 2.4s infinite;
  }
  @keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(194,84,46,.55);}
    70%{box-shadow:0 0 0 8px rgba(194,84,46,0);}
    100%{box-shadow:0 0 0 0 rgba(194,84,46,0);}
  }

  .nav-right{display:flex;align-items:center;gap:0.8rem;}
  .lang-switch{
    display:flex;align-items:center;gap:0.15rem;
    border:1px solid rgba(239,230,211,0.22);
    border-radius:100px;padding:0.22rem;
  }
  .lang-switch button{
    appearance:none;border:none;cursor:pointer;background:transparent;
    font-family:'Sora',sans-serif;font-size:0.68rem;font-weight:700;letter-spacing:0.06em;
    color:var(--sand-dim);
    padding:0.35rem 0.7rem;border-radius:100px;
    transition:background .3s var(--ease),color .3s var(--ease);
  }
  .lang-switch button.active{background:var(--gold);color:var(--ink);}
  .lang-switch button:not(.active):hover{color:var(--sand);}
  @media (max-width:420px){
    .nav-pill{display:none;}
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    height:100svh;min-height:560px;
    display:flex;flex-direction:column;justify-content:flex-end;
    overflow:hidden;
    isolation:isolate;
  }
  .hero-slides{position:absolute;inset:0;z-index:-2;}
  .hero-slides img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    opacity:0;
    animation:slideshow 18s infinite;
    transform:scale(1.08);
  }
  .hero-slides img:nth-child(1){animation-delay:0s;}
  .hero-slides img:nth-child(2){animation-delay:6s;}
  .hero-slides img:nth-child(3){animation-delay:12s;}
  @keyframes slideshow{
    0%{opacity:0;transform:scale(1.08);}
    6%{opacity:1;transform:scale(1.13);}
    30%{opacity:1;transform:scale(1.16);}
    36%{opacity:0;transform:scale(1.18);}
    100%{opacity:0;}
  }
  .hero::after{
    content:"";position:absolute;inset:0;z-index:-1;
    background:
      linear-gradient(0deg, var(--ink) 0%, rgba(16,21,26,0.55) 42%, rgba(16,21,26,0.35) 62%, rgba(16,21,26,0.55) 100%),
      linear-gradient(100deg, rgba(16,21,26,0.55) 0%, rgba(16,21,26,0.05) 55%);
  }

  .hero-content{
    position:relative;
    padding:0 clamp(1.25rem,4vw,3.5rem) clamp(3.5rem,9vh,6.5rem);
    max-width:920px;
  }
  .hero-content .eyebrow{
    opacity:0;transform:translateY(14px);
    animation:rise .9s var(--ease) .25s forwards;
  }
  .hero h1{
    margin-top:0.65rem;
    font-size:clamp(2.9rem,8.5vw,6.4rem);
    color:var(--sand);
  }
  .hero h1 span{
    display:block;overflow:hidden;
  }
  .hero h1 span b{
    display:block;font-weight:700;font-style:normal;
    transform:translateY(105%);
    animation:rise-in 1s var(--ease) forwards;
  }
  .hero h1 span:nth-child(1) b{animation-delay:.4s;}
  .hero h1 span:nth-child(2) b{animation-delay:.55s;color:var(--gold-light);font-style:italic;font-weight:500;}
  @keyframes rise-in{to{transform:translateY(0);}}

  .hero .lede{
    margin-top:1.6rem;
    max-width:34rem;
    font-size:clamp(1rem,1.6vw,1.15rem);
    color:var(--sand-dim);
    opacity:0;transform:translateY(14px);
    animation:rise .9s var(--ease) .75s forwards;
  }
  @keyframes rise{to{opacity:1;transform:translateY(0);}}

  .scroll-cue{
    margin-top:2.4rem;
    display:inline-flex;align-items:center;gap:0.7rem;
    font-size:0.75rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;
    color:var(--sand);
    opacity:0;animation:rise .9s var(--ease) 1s forwards;
  }
  .scroll-cue .line{
    width:34px;height:1px;background:var(--gold);
    position:relative;overflow:hidden;
  }
  .scroll-cue .line::after{
    content:"";position:absolute;left:-100%;top:0;width:100%;height:100%;
    background:var(--sand);
    animation:travel 1.8s ease-in-out infinite;
  }
  @keyframes travel{
    0%{left:-100%;}50%{left:100%;}100%{left:100%;}
  }

  .hero-coords{
    position:absolute;top:6.6rem;right:clamp(1.25rem,4vw,3.5rem);
    font-size:0.7rem;letter-spacing:0.1em;color:var(--sand-dim);
    text-align:right;font-variant-numeric:tabular-nums;
    display:none;
  }
  @media (min-width:720px){ .hero-coords{display:block;} }

  /* ---------- THREAD / WAYPOINTS ---------- */
  .thread-section{
    position:relative;
    padding:clamp(4.5rem,10vh,7rem) clamp(1.25rem,4vw,3.5rem) 2rem;
    background:var(--ink);
  }
  .thread-intro{max-width:40rem;margin:0 auto 4.5rem;text-align:center;}
  .thread-intro .eyebrow{display:block;margin-bottom:0.9rem;}
  .thread-intro p{color:var(--sand-dim);font-size:1.02rem;max-width:32rem;margin:0.9rem auto 0;}
  .thread-intro h2{font-size:clamp(1.7rem,3.4vw,2.3rem);}

  .thread-wrap{
    position:relative;
    max-width:1180px;margin:0 auto;
  }
  .thread-svg{
    position:absolute;top:0;bottom:0;left:50%;
    width:64px;height:100%;
    transform:translateX(-50%);
    z-index:1;
    display:none;
  }
  @media (min-width:860px){ .thread-svg{display:block;} }
  .thread-path{
    fill:none;stroke:var(--gold);stroke-width:2;
    stroke-linecap:round;
    filter:drop-shadow(0 0 6px rgba(201,154,68,0.35));
  }

  .waypoints{list-style:none;display:flex;flex-direction:column;gap:clamp(3rem,7vw,5.5rem);position:relative;z-index:2;}
  .waypoint{
    display:grid;grid-template-columns:1fr;gap:1.6rem;align-items:center;
    opacity:0;transform:translateY(36px);
    transition:opacity .9s var(--ease),transform .9s var(--ease);
  }
  .waypoint.in-view{opacity:1;transform:translateY(0);}

  @media (min-width:860px){
    .waypoint{grid-template-columns:1fr 88px 1fr;gap:0;}
    .waypoint .wp-figure{grid-column:1;}
    .waypoint .wp-text{grid-column:3;padding-left:2.6rem;}
    .waypoint.flip .wp-figure{grid-column:3;}
    .waypoint.flip .wp-text{grid-column:1;padding-left:0;padding-right:2.6rem;text-align:right;}
    .waypoint.flip .wp-text .wp-tagline{justify-content:flex-end;}
  }

  .wp-marker{
    display:none;
    grid-column:2;
    justify-self:center;
    width:15px;height:15px;border-radius:50%;
    background:var(--ink);
    border:2px solid var(--gold);
    position:relative;
  }
  .wp-marker::after{
    content:"";position:absolute;inset:-9px;border-radius:50%;
    border:1px solid rgba(201,154,68,0.35);
    opacity:0;transition:opacity .6s var(--ease);
  }
  .waypoint.in-view .wp-marker::after{opacity:1;}
  @media (min-width:860px){ .wp-marker{display:block;} }

  .wp-figure{
    position:relative;
    border-radius:2px;
    overflow:hidden;
    aspect-ratio:4/3;
  }
  .wp-figure img{width:100%;height:100%;object-fit:cover;
    transition:transform 1.2s var(--ease);
  }
  .waypoint:hover .wp-figure img{transform:scale(1.05);}
  .wp-figure .wp-num{
    position:absolute;top:0.9rem;left:0.9rem;
    font-family:'Petrona',serif;font-style:italic;font-size:0.95rem;
    color:var(--sand);
    background:rgba(16,21,26,0.55);
    padding:0.2rem 0.6rem;border-radius:100px;
    backdrop-filter:blur(4px);
  }

  .wp-tagline{
    display:flex;align-items:center;gap:0.6rem;
    color:var(--clay);
    font-size:0.7rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
    margin-bottom:0.6rem;
  }
  .wp-tagline .rule{width:22px;height:1px;background:var(--clay);}
  .wp-text h3{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:0.65rem;}
  .wp-text p{color:var(--sand-dim);max-width:26rem;}
  .waypoint.flip .wp-text p{margin-left:auto;}

  /* ---------- SIGNUP ---------- */
  .signup{
    position:relative;
    margin:clamp(5rem,10vh,7.5rem) clamp(1.25rem,4vw,3.5rem) 0;
    padding:clamp(3.5rem,8vw,6rem) clamp(1.5rem,5vw,4.5rem);
    background:linear-gradient(160deg,var(--ink-2),var(--ink-soft));
    border-radius:6px;
    border:1px solid rgba(201,154,68,0.16);
    text-align:center;
    max-width:1180px;margin-left:auto;margin-right:auto;
    overflow:hidden;
  }
  .signup::before{
    content:"";position:absolute;top:-40%;left:50%;
    width:120%;aspect-ratio:1;
    transform:translateX(-50%);
    background:radial-gradient(circle,rgba(201,154,68,0.14),transparent 60%);
    pointer-events:none;
  }
  .signup .eyebrow{display:block;margin-bottom:1rem;}
  .signup h2{font-size:clamp(1.9rem,4.4vw,3rem);position:relative;}
  .signup .lede{
    color:var(--sand-dim);max-width:32rem;margin:1.3rem auto 0;
    position:relative;
  }

  .signup-form{
    margin:2.4rem auto 0;
    display:flex;gap:0.7rem;flex-wrap:wrap;justify-content:center;
    max-width:30rem;position:relative;
  }
  .signup-form input[type="email"]{
    flex:1 1 220px;
    background:rgba(239,230,211,0.06);
    border:1px solid rgba(239,230,211,0.22);
    border-radius:100px;
    padding:0.95rem 1.35rem;
    color:var(--sand);
    font-family:'Sora',sans-serif;font-size:0.95rem;
    outline:none;
    transition:border-color .3s var(--ease),background .3s var(--ease);
  }
  .signup-form input[type="email"]::placeholder{color:rgba(239,230,211,0.4);}
  .signup-form input[type="email"]:focus{
    border-color:var(--gold);
    background:rgba(239,230,211,0.09);
  }
  .btn-gold{
    appearance:none;border:none;cursor:pointer;
    position:relative;overflow:hidden;
    background:var(--gold);
    color:var(--ink);
    font-family:'Sora',sans-serif;font-weight:700;font-size:0.85rem;
    letter-spacing:0.03em;
    padding:0.95rem 1.7rem;
    border-radius:100px;
    transition:transform .35s var(--ease),box-shadow .35s var(--ease);
  }
  .btn-gold:hover{transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(201,154,68,0.55);}
  .btn-gold:active{transform:translateY(0);}
  .btn-gold:focus-visible, .signup-form input:focus-visible, a:focus-visible{
    outline:2px solid var(--gold-light);outline-offset:3px;
  }

  .form-micro{
    margin-top:1.1rem;font-size:0.75rem;color:var(--sand-dim);
    position:relative;
  }
  .form-success{
    display:none;margin-top:2.4rem;
    font-family:'Petrona',serif;font-style:italic;font-size:1.15rem;
    color:var(--gold-light);position:relative;
  }
  .signup.sent .signup-form,
  .signup.sent .form-micro{display:none;}
  .signup.sent .form-success{display:block;}

  /* ---------- FOOTER ---------- */
  footer{
    padding:clamp(3rem,6vw,4.5rem) clamp(1.25rem,4vw,3.5rem) 2.2rem;
    display:flex;flex-direction:column;gap:2.2rem;
  }
  .footer-top{
    display:flex;flex-wrap:wrap;gap:1.6rem;
    justify-content:space-between;align-items:center;
    padding-bottom:2rem;
    border-bottom:1px solid rgba(239,230,211,0.1);
  }
  .footer-brand .wordmark{display:block;}
  .footer-brand .domain{font-size:0.8rem;color:var(--sand-dim);margin-top:0.25rem;}
  .footer-coords{font-size:0.75rem;color:var(--sand-dim);letter-spacing:0.05em;text-align:center;}
  .socials{display:flex;gap:0.9rem;}
  .socials a{
    width:38px;height:38px;border-radius:50%;
    border:1px solid rgba(239,230,211,0.22);
    display:flex;align-items:center;justify-content:center;
    transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease);
  }
  .socials a:hover{border-color:var(--gold);background:rgba(201,154,68,0.1);transform:translateY(-2px);}
  .socials svg{width:16px;height:16px;fill:var(--sand);}

  .footer-bottom{
    display:flex;flex-wrap:wrap;gap:0.8rem;justify-content:space-between;
    font-size:0.72rem;color:var(--sand-dim);
  }

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important;}
    .hero h1 span b{transform:none;}
    .hero-slides img{opacity:1 !important;animation:none;transform:none;}
    .hero-slides img:not(:first-child){display:none;}
  }