/* The opening is isolated. All existing Home/case styling stays in its files. */
html:has(#letter-intro[open]) { scrollbar-gutter:auto; }
#letter-intro {
  position:fixed; inset:0; margin:0; padding:0; border:0;
  width:100%; height:100dvh; max-width:none; max-height:none;
  background:#f3dce4; color:#242020; overflow:hidden;
  font-family:'Archivo',Arial,sans-serif;
  transition:opacity .5s ease, visibility .5s;
}
#letter-intro:not([open]) { display:none; }
#letter-intro:focus { outline:none; }
#letter-intro[open] { display:grid; grid-template-rows:auto 1fr auto; }
#letter-intro::backdrop { background:#f3dce4; }
#letter-intro button { min-height:42px; }
.letter-top {
  position:relative; z-index:8; display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px; gap:20px; font-size:10px; letter-spacing:.04em;
}
.letter-monogram { font:32px/.9 'Archivo Black',sans-serif; letter-spacing:-.09em; white-space:nowrap; flex-shrink:0; }
.letter-top-caption { margin-right:auto; margin-left:18px; font-size:9px; }
.letter-controls { display:flex; align-items:center; gap:20px; }
.letter-sound { display:flex; gap:8px; align-items:center; font-size:10px; padding:0; }
.letter-sound svg { width:18px; height:18px; }
.letter-sound[aria-pressed=false] .sound-wave { opacity:.2; }
.letter-languages { display:flex; gap:4px; font-size:10px; }
.letter-languages button { opacity:.4; padding:0 4px; }
.letter-languages button[aria-pressed=true] { opacity:1; text-decoration:underline; text-underline-offset:4px; }
.letter-stage { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:0; position:relative; padding:12px 20px 6px; }
.letter-paper {
  position:relative; flex:none; width:min(570px, calc(100vw - 52px), calc((100dvh - 245px) * 1.05));
  aspect-ratio:1.05; container-type:inline-size;
  background:#fffefa;
  box-shadow:0 24px 60px -25px #5b253b59, 0 3px 8px #6d3a5014;
  transform:rotate(-2deg); transition:transform .7s cubic-bezier(.2,.7,.2,1), opacity .5s;
  isolation:isolate;
}
#letter-intro[data-stage=scratch] .letter-paper,
#letter-intro[data-stage=revealed] .letter-paper { transform:rotate(0); }
.letter-inside { position:absolute; inset:0; overflow:hidden; }
.letter-inside::after {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.45;
  background:linear-gradient(90deg, transparent 49.75%, #927e6420 49.95%, #fff 50.1%,transparent 50.4%),
             linear-gradient(0deg,transparent 49.7%,#927e6426 49.95%,#fff 50.25%,transparent 50.6%);
}
.letter-inside-meta { position:absolute; z-index:1; top:5.6%; left:7%; right:7%; display:flex; justify-content:space-between; font-size:1.55cqw; letter-spacing:.09em; text-transform:uppercase; }
.letter-lockup {
  position:absolute; z-index:1; top:12%; left:6%; width:88%; margin:0;
  font:400 16.2cqw/.72 'Archivo Black',Arial,sans-serif;
  letter-spacing:-.09em; color:#ffa4c5;
}
.letter-lockup>span { display:block; position:relative; width:max-content; white-space:nowrap; }
.letter-lockup .letter-ten { margin-left:48%; font-size:1.23em; line-height:.69; letter-spacing:-.105em; }
.letter-lockup .letter-things { margin-left:21%; font-size:1.04em; line-height:.75; }
.letter-lockup .letter-hate {
  margin:.035em 0 .035em 1%; font:500 1.31em/.77 'Cormorant Garamond',Georgia,serif;
  padding:.07em .08em .085em .045em; color:#fff; background:#181818; letter-spacing:-.055em;
}
.letter-lockup .letter-about { margin-left:16%; font-size:1.03em; line-height:.73; }
.letter-lockup .letter-marketing { margin-left:1%; font-size:.79em; line-height:.8; letter-spacing:-.085em; }
.letter-signoff { position:absolute; bottom:4.5%; left:7%; right:7%; display:flex; align-items:center; justify-content:space-between; font-size:1.8cqw; }
.letter-signoff em { font-family:'Cormorant Garamond',Georgia,serif; font-size:3.3cqw; font-weight:500; }
.letter-scratch {
  position:absolute; inset:0; width:100%; height:100%; z-index:6;
  touch-action:none; cursor:crosshair; transition:opacity .55s;
}
.letter-scratch:focus-visible { outline:2px dashed #b93f73; outline-offset:6px; }
.scratch-hint {
  position:absolute; inset:0; z-index:7; pointer-events:none; display:flex; justify-content:center; align-items:center;
  font:400 1.8cqw/1.2 'Archivo',sans-serif; color:#e0d2d6; letter-spacing:.03em; transition:opacity .2s;
}
#letter-intro[data-scratching=true] .scratch-hint { opacity:0; }
#letter-intro[data-stage=revealed] .letter-scratch { opacity:0; pointer-events:none; }
#letter-intro[data-stage=revealed] .scratch-hint { opacity:0; }
.letter-fold { position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:10; pointer-events:none; }
.letter-fold text { fill:#33232a; }
.fold-serif { font-family:'Cormorant Garamond',Georgia,serif; font-weight:500; letter-spacing:-3px; }
.fold-small { font-family:'Archivo',Arial,sans-serif; font-size:10px; letter-spacing:1.3px; }
.fold-name { font-family:'Archivo Black',Arial,sans-serif; font-size:13px; letter-spacing:-.3px; }
.letter-corner {
  position:absolute; bottom:-10px; right:-10px; width:90px; height:90px; z-index:15;
  border-radius:50%; cursor:grab; touch-action:none; outline-offset:2px!important; background:none;
}
.letter-corner:active { cursor:grabbing; }
.letter-corner svg { width:26px; height:26px; position:absolute; right:28px; bottom:28px; color:#824c60; opacity:.85; }
#letter-intro[data-dragging=true] .letter-corner svg { opacity:0; }
.letter-drag-note {
  position:absolute; right:-115px; bottom:28px; width:95px;
  font-size:10px; line-height:1.6; color:#78475b; transform:rotate(2deg); pointer-events:none;
}
.letter-drag-note svg { display:block; width:46px; height:30px; margin:10px 0 0 -16px; }
#letter-intro[data-stage=scratch] .letter-fold,
#letter-intro[data-stage=revealed] .letter-fold { display:none; }
#letter-intro:not([data-stage=fold]) .letter-corner,
#letter-intro:not([data-stage=fold]) .letter-drag-note { display:none; }
.letter-instructions { text-align:center; margin-top:30px; min-height:71px; z-index:2; max-width:100%; }
.letter-status { font-size:13px; line-height:1.5; margin:0 0 4px; }
.letter-alternative { font-size:10px; color:#754456; text-decoration:underline; text-underline-offset:4px; padding:6px 10px; }
.letter-read { font-size:13px; background:#242020; color:#fffefa; padding:12px 22px; border-radius:0; }
.letter-read span:last-child { margin-left:28px; }
.letter-bottom { display:flex; align-items:center; justify-content:space-between; padding:12px 32px 20px; z-index:2; font-size:10px; }
.letter-steps { display:flex; align-items:center; gap:14px; }
.letter-step { opacity:.4; display:flex; align-items:center; gap:6px; }
.letter-step::before { content:""; width:4px; height:4px; border:1px solid currentColor; border-radius:50%; }
.letter-step.active { opacity:1; }
.letter-step.active::before { background:currentColor; }
.letter-skip { font-size:10px; text-decoration:underline; text-underline-offset:4px; }
.letter-replay { font-family:'Barlow Condensed',sans-serif; font-size:11px; text-decoration:underline; text-underline-offset:4px; padding:6px; }
#letter-intro.is-leaving { opacity:0; pointer-events:none; }
#letter-intro.is-leaving .letter-paper { transform:translateY(-70px) rotate(0); opacity:.25; }
.hero .title-hate { color:#fff; }
.site-header .brand { white-space:nowrap; flex-shrink:0; padding-right:0; }
@media(max-width:850px) { .letter-drag-note, .letter-top-caption { display:none; } }
@media(max-width:600px) {
  .site-header { padding-inline:18px; gap:8px; }
  .site-header .brand { font-size:clamp(18px,5.1vw,22px); }
  .site-header nav { gap:8px; white-space:nowrap; }
  .letter-top { padding:16px 20px; gap:12px; }
  .letter-monogram { font-size:clamp(18px,5.1vw,22px); }
  .letter-top-caption { display:none; }
  .letter-controls { gap:14px; }
  .letter-bottom { padding:10px 20px 16px; }
  .letter-paper { width:min(calc(100vw - 44px), calc((100dvh - 235px) * 1.05)); }
  .letter-inside-meta { font-size:1.8cqw; letter-spacing:.04em; }
  .scratch-hint { font-size:2.4cqw; }
  .letter-status { font-size:12px; }
  .letter-corner { width:76px; height:76px; }
  .letter-corner svg { width:23px; height:23px; right:25px; bottom:25px; }
  .letter-instructions { margin-top:27px; }
  .letter-bottom, .letter-skip { font-size:9px; }
  .letter-steps { gap:10px; }
}
@media(max-height:530px) and (min-width:600px) {
  .letter-top { padding:5px 22px; }
  .letter-bottom { padding:3px 22px; }
  .letter-paper { width:calc((100dvh - 175px) * 1.05); }
  .letter-instructions { margin-top:12px; min-height:60px; }
  .letter-stage { padding:0; }
}
@media(prefers-reduced-motion:reduce) {
  #letter-intro, .letter-paper, .letter-scratch { transition:none; }
}