/* FAQ LETTERS — scoped build for the assembled page.
   Generated from faq-letters.css: every rule is scoped under
   .letters (its :root vars moved onto the section, page globals
   dropped — index.css provides them). Design/behaviour identical
   to the approved standalone faq-letters.html. */
/* ============ FAQ "LETTERS" — FULL SECTION ============
   Thirteen answered letters in frosted glass over the
   animated atelier terrace above a plum-dusk cloud sea.
   This section's own world: the full-bleed scene stays on
   show (arched windows, terrace, clouds, the desk's gold
   panels) and the letters are translucent warm-cream glass,
   so the scene glows through every one of them; a plum
   scrim deepens toward the bottom of the section. The
   backdrop is the scene come alive (Veo loop, poster-first);
   beneath the video the still scene remains as the no-video
   fallback. One mist wisp and a few gold motes drift
   (transform/opacity only). Letters rise one by one as they
   scroll in, staggered, and settle into their slight resting
   rotations; no-JS and reduced-motion visitors get the still
   scene with every letter readable. No emblem of any kind:
   a letter is signed "— Sami" and that is all. */

.letters{
  --gold:#C9A96A;
  --gold-bright:#E9CE9A;
  --gold-line:rgba(201,169,106,.45);
  --desk:#14100D;
  --desk-2:#0D0A08;
  --plum:#24102C;
  --plum-deep:#180A20;
  --plum-black:#0D0510;
  --plum-veil:rgba(15,5,20,1);
  --paper:#F4EDDB;
  --ink:#2A2118;
  --ink-soft:rgba(42,33,24,.9);
  --ink-meta:#77664C;
  --cream:#F5EFE0;
  --font-d:"Fraunces",Georgia,serif;
  --font-b:"Manrope",system-ui,-apple-system,sans-serif;
  --font-h:"Courgette",cursive;
  --ease-out:cubic-bezier(.22,1,.36,1);
}





.letters{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:linear-gradient(180deg, var(--plum) 0%, var(--plum-deep) 46%, var(--plum-black) 100%);
  padding:clamp(90px,13vh,140px) 24px clamp(100px,14vh,150px);
}

/* --- the atelier scene (still fallback) ---
   Full-bleed backdrop, anchored to the top of the section and
   masked out toward its lower edge so the plum ground takes
   over seamlessly. It sits beneath the video and is the whole
   scene whenever the loop cannot or should not play. */
.letters .letters-scene{
  position:absolute; left:0; right:0; top:0; z-index:-6; pointer-events:none;
  height:clamp(620px, 124vh, 1260px);
  background:url("assets/faq-atelier.webp") 50% 14% / cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg, #000 58%, transparent 98%);
          mask-image:linear-gradient(180deg, #000 58%, transparent 98%);
}

/* --- the atelier scene, alive ---
   The Veo loop, framed exactly like the still (same height,
   position and mask) so the poster, the video and the fallback
   still are interchangeable. Sources are injected by the page
   controller only when motion is welcome; until then the
   poster (the same still) fills the frame. */
.letters .letters-video{
  position:absolute; left:0; right:0; top:0; z-index:-5; pointer-events:none;
  width:100%; height:clamp(620px, 124vh, 1260px);
  object-fit:cover; object-position:50% 14%;
  -webkit-mask-image:linear-gradient(180deg, #000 58%, transparent 98%);
          mask-image:linear-gradient(180deg, #000 58%, transparent 98%);
}

/* --- the plum-dusk scrim ---
   Sits over the scene: a soft local shade behind the header,
   then a gradient that stays light while the scene is the
   attraction and deepens to the solid plum ground lower down.
   The glass letters float over it; the scrim is what seats
   them in this world. */
.letters .letters-scrim{
  position:absolute; inset:0; z-index:-4; pointer-events:none;
  background:
    radial-gradient(ellipse 92% 30% at 50% 4%, rgba(13,4,18,.36) 0%, rgba(13,4,18,0) 72%),
    linear-gradient(180deg,
      rgba(18,6,24,.10) 0%,
      rgba(18,6,24,.08) 15%,
      rgba(18,6,24,.34) 27%,
      rgba(15,5,20,.74) 37%,
      rgba(13,5,16,.95) 45%,
      var(--plum-veil) 53%,
      var(--plum-veil) 100%);
}

/* --- mist over the cloud sea ---
   One wide, soft wisp (a radial gradient, no filters) drifting
   slowly across the upper half of the section where the
   clouds are. Very slow, low opacity; transform only. */
.letters .letters-mist{
  position:absolute; left:0; right:0; top:4%; height:54%;
  z-index:-3; pointer-events:none; overflow:hidden;
}
.letters .letters-mist i{
  position:absolute; left:-25%; width:150%; height:44%; border-radius:50%;
  background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(240,224,255,.55) 0%, rgba(240,224,255,0) 68%);
}
.letters .letters-mist .mist-a{top:4%; opacity:.13; animation:mist-drift-a 64s ease-in-out infinite alternate}
@keyframes mist-drift-a{
  from{transform:translate3d(-4%,0,0)}
  to  {transform:translate3d(4.5%,-1.5%,0)}
}

/* --- gold dust in the lamplight ---
   One small speck field (box-shadow dots on a 1px seed)
   drifting slowly. Transform/opacity only. */
.letters .dust{position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden}
.letters .dust i{
  position:absolute; border-radius:50%;
  background:rgba(233,206,150,.85);
}
.letters .dust .mote-a{
  width:2px; height:2px; left:6%; top:12%;
  box-shadow:
    90px 46px 0 0 rgba(233,206,150,.55),
    210px 130px 0 0 rgba(233,206,150,.75),
    340px 30px 0 0 rgba(233,206,150,.45),
    470px 170px 0 0 rgba(233,206,150,.65),
    620px 74px 0 0 rgba(233,206,150,.5),
    780px 210px 0 0 rgba(233,206,150,.7),
    950px 110px 0 0 rgba(233,206,150,.45);
  animation:mote-drift-a 26s ease-in-out infinite alternate;
}
@keyframes mote-drift-a{
  from{transform:translate3d(0,20px,0); opacity:.45}
  to  {transform:translate3d(-16px,-34px,0); opacity:.95}
}
/* mobile: the scene frames tighter on the windows and desk,
   the scrim deepens sooner to match, and the air stays calm */
@media (max-width:640px){
  .letters .letters-scene{
    height:104vh;
    background-position:60% 6%;
    -webkit-mask-image:linear-gradient(180deg, #000 55%, transparent 97%);
            mask-image:linear-gradient(180deg, #000 55%, transparent 97%);
  }
  .letters .letters-video{
    height:104vh;
    object-position:60% 6%;
    -webkit-mask-image:linear-gradient(180deg, #000 55%, transparent 97%);
            mask-image:linear-gradient(180deg, #000 55%, transparent 97%);
  }
  .letters .letters-scrim{
    background:
      radial-gradient(ellipse 110% 22% at 50% 3%, rgba(13,4,18,.3) 0%, rgba(13,4,18,0) 72%),
      linear-gradient(180deg,
        rgba(18,6,24,.05) 0%,
        rgba(18,6,24,.1) 9%,
        rgba(18,6,24,.42) 16%,
        rgba(15,5,20,.86) 22%,
        rgba(13,5,16,.97) 27%,
        var(--plum-veil) 32%,
        var(--plum-veil) 100%);
  }
  .letters .letters-mist{height:34%}
  .letters .dust .mote-a{opacity:.7}
}

.letters .letters-inner{
  position:relative;
  width:100%; max-width:760px; margin:0 auto;
}

/* --- header --- */
.letters .letters-head{text-align:center; margin-bottom:clamp(48px,7vh,68px)}
.letters .kicker{
  display:inline-flex; align-items:center; gap:14px;
  font-size:.72rem; font-weight:700; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold);
}
.letters .kicker::before, .letters .kicker::after{
  content:""; width:min(52px,12vw); height:1px;
}
.letters .kicker::before{background:linear-gradient(90deg, transparent, rgba(201,169,106,.65))}
.letters .kicker::after{background:linear-gradient(90deg, rgba(201,169,106,.65), transparent)}
.letters .letters-head h2{
  font-family:var(--font-d); font-weight:600;
  font-size:clamp(2.1rem,4.6vw,3.15rem); line-height:1.14; letter-spacing:-.01em;
  color:var(--cream); margin-top:20px;
  text-shadow:0 2px 34px rgba(10,2,14,.55), 0 1px 3px rgba(10,2,14,.45);
}
.letters .letters-intro{
  font-family:var(--font-h); font-weight:400;
  font-size:clamp(1.12rem,2.4vw,1.28rem); line-height:1.55;
  color:rgba(243,233,207,.88); margin-top:16px;
  text-shadow:0 1px 22px rgba(10,2,14,.55), 0 1px 3px rgba(10,2,14,.4);
}

/* --- the stack of letters: frosted glass now, not paper ---
   Translucent warm-cream panels with a moderate backdrop
   blur: the scene (or the deep plum it melts into) glows
   through each letter, while the tint keeps the ink fully
   readable. A champagne hairline and a soft shadow hold the
   letter shape; the glass still tilts like paper did. */
.letters .letters-list{list-style:none}
.letters .letter{
  --rot:0deg;
  position:relative;
  max-width:680px; margin:0 auto;
  background:linear-gradient(158deg, rgba(250,245,230,.84) 0%, rgba(244,237,219,.74) 52%, rgba(240,230,203,.8) 100%);
  -webkit-backdrop-filter:blur(12px) saturate(1.1);
          backdrop-filter:blur(12px) saturate(1.1);
  border:1px solid rgba(201,169,106,.55);
  border-radius:10px;
  padding:clamp(28px,4.6vw,44px) clamp(24px,4.6vw,46px) clamp(26px,4vw,38px);
  transform:rotate(var(--rot));
  box-shadow:
    0 1px 2px rgba(0,0,0,.35),
    0 14px 30px rgba(0,0,0,.42),
    0 34px 64px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,252,240,.65),
    inset 0 -1px 0 rgba(201,169,106,.18);
}
/* no backdrop-filter (older engines): raise the tint toward
   opaque so the words never sit on raw scene */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .letters .letter{background:linear-gradient(158deg, rgba(250,245,230,.96) 0%, rgba(244,237,219,.94) 52%, rgba(240,230,203,.96) 100%)}
  .letters .letter-invite{background:linear-gradient(160deg, rgba(35,16,32,.97) 0%, rgba(18,6,16,.98) 100%)}
}
.letters .letter + .letter{margin-top:clamp(38px,6vh,54px)}
.letters .letter:nth-child(1){--rot:-1.0deg}
.letters .letter:nth-child(2){--rot:.8deg}
.letters .letter:nth-child(3){--rot:-.5deg}
.letters .letter:nth-child(4){--rot:.9deg}
.letters .letter:nth-child(5){--rot:-.8deg}
.letters .letter:nth-child(6){--rot:.6deg}
.letters .letter:nth-child(7){--rot:-1.1deg}
.letters .letter:nth-child(8){--rot:.7deg}
.letters .letter:nth-child(9){--rot:-.6deg}
.letters .letter:nth-child(10){--rot:1.0deg}
.letters .letter:nth-child(11){--rot:-.9deg}
.letters .letter:nth-child(12){--rot:.5deg}
.letters .letter:nth-child(13){--rot:-.7deg}
/* a soft sheen across the glass, painted in gradients only */
.letters .letter::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(ellipse 90% 60% at 22% 0%, rgba(255,255,255,.5), rgba(255,255,255,0) 55%),
    linear-gradient(115deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 42%);
}
.letters .letter > *{position:relative}

/* sender meta — an unknown hand, the same on every letter */
.letters .letter-meta{
  font-size:.68rem; font-weight:700; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-meta);
  padding-bottom:12px;
  border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg, var(--gold-line), rgba(201,169,106,.12) 75%, transparent) 1;
}
.letters .letter-q{
  font-family:var(--font-h); font-weight:400;
  font-size:clamp(1.38rem,3.2vw,1.55rem); line-height:1.38;
  color:var(--ink);
  margin-top:20px;
}
.letters .letter-a{
  font-size:1.02rem; line-height:1.68;
  color:var(--ink-soft);
  margin-top:14px; max-width:56ch;
}
/* sign-off: a name in script, and one small gold rule — nothing else */
.letters .letter-sign{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  margin-top:24px;
}
.letters .letter-sign .name{
  font-family:var(--font-h); font-size:1.32rem; color:var(--ink);
}
.letters .letter-sign .flourish{
  flex:0 0 auto; width:46px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, transparent, rgba(176,138,72,.85), transparent);
}

/* --- the invitation: the letters' dark counterpart,
   deep plum glass with the same gold hairline --- */
.letters .letter-invite{
  max-width:680px; margin:clamp(44px,7vh,60px) auto 0;
  text-align:center;
  background:linear-gradient(160deg, rgba(38,17,36,.68) 0%, rgba(19,6,17,.78) 100%);
  -webkit-backdrop-filter:blur(12px) saturate(1.05);
          backdrop-filter:blur(12px) saturate(1.05);
  border:1px solid rgba(201,169,106,.55);
  border-radius:10px;
  padding:clamp(30px,5vw,44px) clamp(24px,5vw,46px);
  box-shadow:
    0 18px 40px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(233,206,150,.16);
}
.letters .letter-invite .line{
  font-family:var(--font-h); font-weight:400;
  font-size:clamp(1.3rem,3vw,1.5rem); line-height:1.4;
  color:#F3E9CF;
}
.letters .letter-invite .btn{
  display:inline-block; margin-top:22px;
  font-family:var(--font-b); font-size:.95rem; font-weight:800; letter-spacing:.01em;
  color:#241A08; text-decoration:none;
  background:linear-gradient(180deg, var(--gold-bright), var(--gold));
  padding:13px 28px; border-radius:999px;
  box-shadow:0 10px 24px rgba(201,169,106,.28);
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.letters .letter-invite .btn:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(201,169,106,.36);
}

/* --- mobile: the letters shrink, so thirteen of them
   do not turn the section into an endless scroll --- */
@media (max-width:640px){
  .letters .letter{
    padding:20px 18px 18px;
    border-radius:9px;
    -webkit-backdrop-filter:blur(10px) saturate(1.1);
            backdrop-filter:blur(10px) saturate(1.1);
  }
  .letters .letter + .letter{margin-top:24px}
  .letters .letter-meta{font-size:.62rem; letter-spacing:.26em; padding-bottom:9px}
  .letters .letter-q{font-size:1.22rem; line-height:1.34; margin-top:13px}
  .letters .letter-a{font-size:.94rem; line-height:1.6; margin-top:9px}
  .letters .letter-sign{margin-top:15px}
  .letters .letter-sign .name{font-size:1.16rem}
  .letters .letter-sign .flourish{width:36px}
  /* the invitation shrinks to the slider's scale: compact,
     left-aligned, one dense block instead of a tall dark slab.
     The headline drops a size so it sits on one line, the pill
     hugs it at natural width, and the dark glass reads as the
     last card of the row rather than a wall after it. */
  .letters .letter-invite{
    margin-top:22px;
    padding:13px 16px 14px;
    text-align:left;
    -webkit-backdrop-filter:blur(10px) saturate(1.05);
            backdrop-filter:blur(10px) saturate(1.05);
  }
  .letters .letter-invite .line{font-size:1.05rem; line-height:1.3}
  .letters .letter-invite .btn{margin-top:10px; padding:9px 19px; font-size:.88rem}
}

/* --- desktop: the letters rest in two columns side by side,
   so thirteen of them read as a spread, not a descent. Each
   column's letters keep their own height (align-items:start)
   and their resting tilts; pairs rise together in reading
   order, left to right. The invitation spans the full width
   of the spread beneath them. --- */
@media (min-width:900px){
  .letters .letters-inner{max-width:1240px}
  .letters .letters-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:clamp(28px,3.5vw,48px);
    row-gap:clamp(38px,6vh,54px);
    align-items:start;
  }
  .letters .letters-list .letter{max-width:none; margin:0}
  .letters .letters-list .letter + .letter{margin-top:0}
  .letters .letter-invite{max-width:none}
}

/* --- mobile: the letters ride in a horizontal slider row.
   One glass letter at a time (about 84vw, the next peeking
   in at the edge), native finger swipe with scroll-snap,
   and a JS auto-advancer that glides on its own, pauses
   under a held finger, and yields to any manual swipe. The
   row breaks out of the section padding so the swipe runs
   edge to edge, while each card still lands on the gutter.
   A thin gold track under the row fills as it travels. --- */
.letters .letters-progress{display:none}
@media (max-width:640px){
  .letters .letters-list{
    display:flex; flex-direction:row; align-items:stretch;
    gap:14px;
    margin:4px -24px 0;
    padding:20px 24px 46px;
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding-left:24px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .letters .letters-list::-webkit-scrollbar{display:none}
  .letters .letters-list .letter{
    flex:0 0 84vw; margin:0;
    scroll-snap-align:start;
  }
  .letters .letters-list .letter + .letter{margin-top:0}
  .letters .letters-progress{
    display:block; height:3px; border-radius:99px; overflow:hidden;
    margin:0 2px;
    background:rgba(201,169,106,.18);
  }
  .letters .letters-progress-fill{
    display:block; height:100%; border-radius:inherit;
    background:linear-gradient(90deg, var(--gold), var(--gold-bright));
    transform:scaleX(.03); transform-origin:left center;
  }
}

/* --- reveals ---
   Header and invitation use the site [data-reveal] contract.
   The letters have their own rise: the page script arms the
   section (.armed) only when motion is welcome, so without JS
   (or with reduced motion) nothing is ever hidden. Letters
   lift 28px, fade in and settle into their resting rotation,
   once each. */
.js .letters [data-reveal]{opacity:0; transform:translateY(28px); transition:opacity .7s ease,transform .7s var(--ease-out)}
.js .letters [data-reveal].in{opacity:1; transform:none}
.letters.armed .letter{
  opacity:0;
  transform:translateY(28px) rotate(0deg);
  transition:opacity .6s ease,transform .8s var(--ease-out);
}
.letters.armed .letter.in{opacity:1; transform:rotate(var(--rot))}
/* on mobile the whole slider row rises once as a single piece
   (the page script adds .armed-row there instead of .armed) */
.letters.armed-row .letters-list{
  opacity:0; transform:translateY(28px);
  transition:opacity .6s ease,transform .8s var(--ease-out);
}
.letters.armed-row .letters-list.in{opacity:1; transform:none}

/* reduced motion: the scene is still, the letters simply lie there */
@media (prefers-reduced-motion: reduce){
  .letters .letters-mist .mist-a, .letters .dust .mote-a{animation:none}
  .letters .letter-invite .btn{transition:none}
  .js .letters [data-reveal], .letters.armed .letter{transition:none}
  .letters.armed .letter{opacity:1; transform:rotate(var(--rot))}
  .letters.armed-row .letters-list{transition:none; opacity:1; transform:none}
}