/* drei. v8 — one long letterhead page. Ivory/ink. Local fonts only. No scripts. */
@font-face{font-family:"Sanchez";src:url(fonts/sanchez.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"CG";src:url(fonts/cormorant-garamond.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
:root{--ivory:#F6F1E7;--ink:#1A1814;--mute:#5E574C;--soft:#6E675B;--brass:#9C8656;--hair:rgba(26,24,20,.22);
 --serif:"CG","Cormorant Garamond",Georgia,serif;--logo:"Sanchez",Georgia,serif;--slow:cubic-bezier(.25,.6,.3,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ivory);scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--ivory);color:var(--ink);font-family:var(--serif);font-size:19px;line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;font-kerning:normal;text-align:center}
::selection{background:var(--ink);color:var(--ivory)}
.sc{font-family:var(--serif);font-weight:500;font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--soft)}

/* opening */
.opening{position:relative;min-height:100svh;display:grid;place-items:center;padding:80px 24px}
.cue{position:absolute;left:50%;bottom:clamp(34px,6vh,60px);bottom:clamp(34px,6svh,60px);width:1px;height:clamp(52px,8vh,72px);height:clamp(52px,8svh,72px);margin-left:-.5px;background:rgba(26,24,20,.10);overflow:hidden;animation:fade 3s var(--slow) 3.6s both}
.cue i{position:absolute;inset:0;background:rgba(26,24,20,.55);transform-origin:top;transform:scaleY(0);animation:cue 3.8s cubic-bezier(.45,0,.25,1) 4.2s infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.mark{font-family:var(--logo);font-weight:400;font-size:clamp(44px,4.4vw,62px);line-height:1;letter-spacing:-.01em;animation:lift 3.6s var(--slow) .4s both}
.mark span{color:var(--brass)}
.motto{margin-top:clamp(22px,3.2vh,30px);margin-top:clamp(22px,3.2svh,30px);font-family:var(--serif);font-weight:500;font-size:11.5px;letter-spacing:.42em;text-transform:uppercase;color:var(--soft);padding-left:.42em;animation:fade 3.4s var(--slow) 1.6s both}
.opening .rule{width:40px;height:1px;background:var(--hair);margin:clamp(30px,4.6vh,44px) auto 0;margin:clamp(30px,4.6svh,44px) auto 0;animation:fade 3s var(--slow) 2.8s both}

/* sections */
.sec{max-width:720px;margin:0 auto;padding:clamp(140px,22vh,230px) 24px;padding:clamp(140px,22svh,230px) 24px}
.sec>.sc{display:block;margin-bottom:22px}
.sec h2{font-weight:300;font-size:clamp(44px,5vw,72px);line-height:1.08;letter-spacing:.005em}
.entries{list-style:none;margin-top:clamp(84px,13vh,128px);margin-top:clamp(84px,13svh,128px)}
.entries li+li{margin-top:clamp(52px,8vh,76px);margin-top:clamp(52px,8svh,76px)}
.entries .sc{display:block;font-size:11px;margin-bottom:12px}
.entries h3{font-weight:300;font-size:clamp(30px,2.7vw,40px);line-height:1.15;letter-spacing:.015em}
.entries p{margin-top:14px;color:var(--mute);font-size:clamp(18px,1.35vw,20px);line-height:1.75}
.entries p span{display:block}
.divider{width:40px;height:1px;background:var(--hair);margin:0 auto}

/* close */
.close{padding:clamp(60px,10vh,110px) 24px clamp(48px,8vh,72px);padding:clamp(60px,10svh,110px) 24px clamp(48px,8svh,72px)}
.seal{display:inline-block;width:38px;height:38px;color:var(--ink)}
.seal svg{display:block;width:100%;height:100%;overflow:visible}
.seal circle{fill:none;stroke:currentColor;stroke-width:.9;opacity:.55}
.seal text{font-family:var(--serif);font-size:40px;fill:currentColor}
.close .line{margin-top:clamp(30px,5vh,44px);margin-top:clamp(30px,5svh,44px);font-weight:300;font-size:clamp(22px,1.9vw,27px)}
.close .mail{margin-top:0;font-weight:500;font-size:14px;letter-spacing:.26em}
.close .mail a{color:var(--soft);text-decoration:none;padding-bottom:4px;border-bottom:1px solid transparent;transition:color 1.4s var(--slow),border-color 1.4s var(--slow)}
.close .mail a:hover{color:var(--ink);border-bottom-color:var(--hair)}
.close .mail a:focus-visible{outline:1px solid var(--ink);outline-offset:6px}
.close .copy{display:block;margin-top:clamp(90px,15vh,150px);margin-top:clamp(90px,15svh,150px)}

@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes lift{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* scroll-driven reveal, CSS only; content stays visible where unsupported */
@media (prefers-reduced-motion:no-preference){
 @supports (animation-timeline:view()){
  .reveal{animation:lift linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
 }
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}.cue i{transform:scaleY(.55)}}

@media (max-width:600px){
 body{font-size:18px}
 .sc{font-size:11px;letter-spacing:.28em}
 .sec h2{font-size:clamp(40px,11vw,52px)}
}

/* responsive pass (v8d) — desktop 1100–1599px unchanged */
/* phones */
@media (max-width:600px){
 .mark{font-size:clamp(46px,12.5vw,54px)}
 .sec{padding:clamp(96px,16vh,140px) 22px;padding:clamp(96px,16svh,140px) 22px}
 .entries{margin-top:clamp(60px,9vh,84px);margin-top:clamp(60px,9svh,84px)}
 .entries li+li{margin-top:clamp(40px,6vh,56px);margin-top:clamp(40px,6svh,56px)}
 .entries h3{font-size:clamp(28px,8vw,32px)}
 .close .mail{font-size:13px;letter-spacing:.22em}
}
/* tablets */
@media (min-width:601px) and (max-width:1099px){
 .mark{font-size:clamp(52px,7.2vw,60px)}
 .sec h2{font-size:clamp(48px,6.4vw,60px)}
 .entries h3{font-size:clamp(32px,4.2vw,36px)}
 .motto{font-size:12.5px}
 .sc{font-size:12.5px}
 .entries .sc{font-size:11.5px}
}
/* short landscape screens (phones on their side) */
@media (orientation:landscape) and (max-height:520px){
 .opening{padding:44px 24px 76px}
 .mark{font-size:clamp(40px,6vw,50px)}
 .motto{margin-top:16px}
 .opening .rule{margin-top:22px}
 .cue{bottom:16px;height:40px}
 .sec{padding:84px 24px;max-width:640px}
 .sec h2{font-size:clamp(38px,5vw,46px)}
 .entries{margin-top:52px}
 .entries li+li{margin-top:34px}
 .entries h3{font-size:clamp(26px,3.4vw,30px)}
 .close{padding:48px 24px 36px}
 .close .copy{margin-top:56px}
}
/* large screens */
@media (min-width:1600px){
 body{font-size:20px}
 .mark{font-size:clamp(62px,3.9vw,84px)}
 .motto{font-size:clamp(11.5px,.68vw,15px)}
 .sc{font-size:clamp(12px,.66vw,15px)}
 .entries .sc{font-size:clamp(11px,.6vw,14px)}
 .sec{max-width:clamp(720px,42vw,980px)}
 .sec h2{font-size:clamp(72px,4.4vw,100px)}
 .entries h3{font-size:clamp(40px,2.3vw,54px)}
 .close .mail{font-size:clamp(14px,.78vw,17px)}
 .opening .rule,.divider{width:clamp(40px,2.4vw,56px)}
 .cue{height:clamp(72px,8vh,96px);height:clamp(72px,8svh,96px)}
}