/* A focused proposal: the current production implementation is unchanged.
   The letter becomes an offset paper insert; identity lives outside the text. */
.letter{position:relative;isolation:isolate;overflow:hidden;background:var(--letter-stock);padding:40px 5% 90px}



.letter-margin{position:absolute;left:0;top:165px;bottom:80px;width:27%;overflow:hidden;z-index:0}
.letter-margin canvas{position:absolute;width:750px;height:1040px;right:-135px;top:100px;opacity:.8}
.letter-page{position:relative;z-index:1;background:var(--paper);max-width:none;width:78%;margin:0 0 0 22%;padding:72px clamp(35px,5vw,78px) 56px;box-shadow:12px 12px 0 var(--blue)}
.letter-page>h2,.letter-body,.letter-access{max-width:690px;margin-left:auto;margin-right:auto}
.letter-page>h2{font-size:48px;margin-bottom:34px}
.letter-body{font-size:20px;line-height:1.72;letter-spacing:-.16px}
.letter-body>p:first-child{font-size:24px;line-height:1.56;letter-spacing:-.35px;margin-bottom:31px}
.letter-access{margin-top:44px}
.letter .encie-button:focus-visible{outline:2px solid var(--blue);outline-offset:5px}
@media(min-width:1750px){.letter-page{width:75%;margin-left:25%;padding-top:85px;padding-bottom:72px}.letter-margin{width:32%}.letter-margin canvas{width:1000px;height:1250px;right:-150px}}
@media(min-width:701px) and (max-width:1100px){.letter{padding:35px 4% 64px}.letter-page{width:87%;margin-left:13%;padding:50px 38px 42px}.letter-margin{width:19%;top:150px}.letter-margin canvas{width:550px;height:850px;right:-220px;top:50px}.letter-page>h2{font-size:43px}.letter-body{font-size:19px}.letter-body>p:first-child{font-size:22px}}
@media(max-width:700px){.letter{padding:28px 22px 40px 16px}.letter-page{width:100%;margin:0;padding:37px 25px 30px;box-shadow:7px 7px 0 var(--blue)}.letter-page>h2{font-size:35px;letter-spacing:-1.4px;margin-bottom:27px}.letter-body{font-size:18px;line-height:1.65}.letter-body>p:first-child{font-size:21px;line-height:1.5;margin-bottom:26px}.letter-margin{display:none}.letter-access{margin-top:35px;padding-top:23px;gap:14px}.letter-access .rf-label{font-size:9px}.letter-access .encie-button{font-size:12px}}

/* Blue tape marks the transition from lavender cover to paper pages. */
.hero-band{position:absolute;z-index:2;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:13px var(--home-inset);background:var(--blue);color:var(--paper);font:12px/1.2 var(--rf-sans);letter-spacing:.025em}
.hero-band span{white-space:nowrap}
.site-footer{background:var(--letter-stock)}
@media(max-width:1100px){.hero-band span:last-child{display:none}}
@media(max-width:700px){.hero-band{font-size:11px}.hero-band span[aria-hidden]{display:none}}

:root{--letter-stock:#e5e0d6}
/* The cover fills the opening viewport, with room reserved for the tape. */
.hero{display:flex;flex-direction:column;justify-content:flex-end;min-height:100svh;height:auto;padding-top:clamp(160px,30svh,340px);padding-bottom:clamp(76px,10svh,112px)}
.hero h1{padding-top:0}
.hero h1,.hero-mission,.hero-waitlist{flex-shrink:0}
.hero-waitlist{align-self:flex-start}
/* Portrait covers need a larger artwork field, not a desktop corner crop. */
@media(min-width:701px) and (max-width:1100px) and (orientation:portrait){
  .hero-art{width:118vw;height:88vw;right:-25vw;top:-9vw}
  .hero h1{font-size:clamp(64px,8.5vw,82px)}
  .hero{padding-bottom:80px}
  .hero-mission{margin-top:24px}
}
@media(max-width:700px){
  :root{--home-inset:24px}
  .hero{padding-top:220px;padding-bottom:76px}
  .hero-art{width:160vw;height:min(125vw,55svh);right:-48vw;top:0}
  .hero h1{font-size:clamp(36px,11.4vw,64px);line-height:1.02}
  .hero-mission{font-size:17px;line-height:1.5;margin-top:22px}
  .hero-waitlist{margin-top:22px;padding:14px 18px}
}
@media(max-width:700px) and (max-height:700px){
  .hero{padding-top:160px;padding-bottom:66px}
  .hero-art{width:125vw;height:78vw;right:-42vw;top:36px}
  .hero-mission{margin-top:18px}
  .hero-waitlist{margin-top:18px}
}
@media(min-width:701px) and (max-width:900px){
  .letter{padding:40px 40px 60px 32px}
  .letter-page{width:100%;margin-left:0;padding:48px 42px}
  .letter-margin{display:none}
}

/* A hand-smeared paint gesture crosses the paper corner, clear of the text. */
.letter-spray{position:absolute;z-index:2;pointer-events:none;left:calc(24.8% - 110px);top:12px;width:280px;height:auto;transform:rotate(-4deg)}
@media(min-width:1750px){.letter-spray{left:calc(27.5% - 110px)}}
@media(min-width:901px) and (max-width:1100px){.letter-spray{left:calc(15.44% - 90px);width:240px;top:6px}}
@media(min-width:701px) and (max-width:900px){.letter-spray{left:-26px;top:6px;width:240px}}
@media(max-width:700px){.letter-spray{left:-24px;top:4px;width:180px;transform:rotate(-4deg)}}

/* Phone adjustments: align the tape with the letter text and keep paint in view. */
@media(max-width:700px){
  .hero-band{justify-content:flex-start;text-align:left;padding-left:41px;padding-right:var(--home-inset)}
  .letter-spray{left:8px;top:8px}
}

/* Anchor the dense paint cluster to the paper, across all layouts. */
.letter-splatter{left:12px;top:12px;width:280px;transform:translate(-44%,-59%)}
@media(min-width:901px) and (max-width:1100px){.letter-splatter{width:220px}}
/* Reserve the full paint box above the text, including on mobile Safari. */
@media(min-width:701px) and (max-width:900px){.letter-page{padding-top:104px}.letter-splatter{left:-62.8px;top:-88.3px;width:170px;height:170px;transform:none}}
@media(max-width:700px){.letter-page{padding-top:90px}.letter-splatter{left:-58px;top:-80.5px;width:150px;height:150px;transform:none}}