/* ============================================================
   coreyshay.com — editorial long-scroll
   ============================================================ */
:root{
  /* paper + ink */
  --paper:#F8F6F1;
  --paper-2:#F1ECE1;
  --ink:#1E1F1A;
  --ink-2:#43433B;
  --ink-soft:#6F6E62;
  --hair:rgba(30,31,26,.16);

  /* teal family */
  --t-900:#123E3B;
  --t-700:#1F5B57;
  --t-500:#2E7C77;
  --t-blue:#3E7E8C;
  --t-200:#A9CBC6;
  --t-100:#CFE0DC;

  /* wash master opacity (tweakable) */
  --wash-op:1;

  --serif:"Playfair Display",Georgia,serif;
  --sans:"DM Sans",system-ui,-apple-system,sans-serif;

  --maxw:1280px;
  --gutter:clamp(20px,5vw,76px);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* paper grain over everything */
body::after{
  content:"";position:fixed;inset:0;z-index:9;pointer-events:none;
  mix-blend-mode:multiply;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- type primitives ---------- */
.kicker{
  font-family:var(--sans);font-weight:500;text-transform:uppercase;
  letter-spacing:.4em;font-size:12px;color:var(--t-700);
}
.label{
  font-family:var(--sans);font-weight:500;text-transform:uppercase;
  letter-spacing:.36em;font-size:12px;color:var(--ink-soft);
}
.title{
  font-family:var(--serif);font-weight:900;line-height:.9;letter-spacing:-.02em;
  margin:0;color:var(--ink);font-size:clamp(58px,9vw,138px);
}
.title .dot{color:var(--t-700);}
.lede{
  font-family:var(--serif);font-weight:500;font-style:italic;
  font-size:clamp(20px,2.4vw,30px);line-height:1.34;color:var(--ink-2);
  letter-spacing:-.01em;
}
.body{
  font-size:clamp(16px,1.25vw,18px);line-height:1.62;color:var(--ink-soft);
  font-weight:400;max-width:42ch;text-wrap:pretty;
}
.meta{
  font-family:var(--sans);font-weight:500;text-transform:uppercase;
  letter-spacing:.26em;font-size:11px;color:var(--t-700);white-space:nowrap;
}
.no{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:15px;color:var(--ink-soft);letter-spacing:.02em;
}

/* ---------- watercolor wash ---------- */
.wash{
  position:absolute;border-radius:48% 52% 55% 45%/52% 46% 54% 48%;pointer-events:none;z-index:0;
  mix-blend-mode:multiply;
  filter:blur(14px);
  opacity:0;transform:scale(.6) rotate(-3deg);transform-origin:center;
  transition:transform 1.8s cubic-bezier(.2,.6,.25,1),opacity 1.4s ease;
}
.is-in .wash, .wash.bled{transform:scale(1) rotate(0deg);}
.wash.w1{opacity:calc(.52*var(--wash-op));background:radial-gradient(closest-side,var(--t-500) 0%,rgba(46,124,119,.55) 48%,transparent 78%);}
.wash.w2{opacity:calc(.4*var(--wash-op));background:radial-gradient(closest-side,var(--t-blue) 0%,rgba(62,126,140,.5) 48%,transparent 78%);}
.wash.w3{opacity:calc(.6*var(--wash-op));background:radial-gradient(closest-side,var(--t-200) 0%,rgba(169,203,198,.55) 50%,transparent 80%);}
.wash.w4{opacity:calc(.4*var(--wash-op));background:radial-gradient(closest-side,var(--t-700) 0%,rgba(31,91,87,.5) 48%,transparent 78%);}
@media (prefers-reduced-motion:reduce){
  .wash{transition:opacity .6s ease;transform:none;}
}

/* ---------- photo / image slots ---------- */
.frame{position:relative;z-index:1;background:var(--t-900);overflow:hidden;}
image-slot{display:block;width:100%;height:100%;
  background:radial-gradient(125% 105% at 28% 18%,#2f746f 0%,#173f3d 55%,#0d2c2b 100%);
  color:rgba(248,246,241,.72);font-family:var(--sans)!important;}
/* torn deckle edge via displaced-rect alpha mask */
body.imgs-torn .deckle{
  -webkit-mask-image:var(--deckle);mask-image:var(--deckle);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
body.imgs-rounded .frame{border-radius:14px;}
body.imgs-rect .frame{border-radius:0;}
.frame .cap{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  color:rgba(248,246,241,.45);font-family:var(--sans);font-weight:500;
  letter-spacing:.34em;font-size:12px;text-transform:uppercase;text-align:center;pointer-events:none;
}
/* fallback texture when slot empty */
.frame .tex{position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(135deg,rgba(255,255,255,.045) 0 1px,transparent 1px),
    radial-gradient(120% 90% at 30% 20%,#2c6f6b 0%,#163f3d 55%,#0e2d2c 100%);
  background-size:14px 14px,100% 100%;}

/* ---------- layout shell ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}
section{position:relative;}

/* ---------- top nav ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--gutter);
  background:linear-gradient(180deg,rgba(248,246,241,.92),rgba(248,246,241,0));
  backdrop-filter:blur(2px);
  opacity:0;transform:translateY(-8px);transition:opacity .5s ease,transform .5s ease;
  pointer-events:none;
}
.topbar.show{opacity:1;transform:none;pointer-events:auto;}
.topbar .word{font-family:var(--serif);font-weight:800;font-size:18px;letter-spacing:.01em;}
.topbar .word .dot{color:var(--t-700);}
.topbar .mailto{font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hair);padding-bottom:2px;}
.topbar .mailto:hover{color:var(--t-700);border-color:var(--t-500);}

/* ---------- right dot index ---------- */
.dots{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:38;
  display:flex;flex-direction:column;gap:14px;opacity:0;transition:opacity .5s ease;}
.dots.show{opacity:1;}
.dots a{position:relative;width:9px;height:9px;border-radius:50%;border:1px solid var(--t-700);
  background:transparent;transition:background .3s ease,transform .3s ease;}
.dots a.active{background:var(--t-700);transform:scale(1.25);}
.dots a .tip{position:absolute;right:18px;top:50%;transform:translateY(-50%);
  white-space:nowrap;font-family:var(--sans);font-weight:500;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink);opacity:0;pointer-events:none;transition:opacity .25s ease;
  background:var(--paper);padding:3px 7px;border:1px solid var(--hair);}
.dots a:hover .tip{opacity:1;}
@media (max-width:760px){.dots{display:none;}}

/* reading progress hairline */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--t-700);z-index:41;}

/* ---------- HERO ---------- */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(22px,4vh,40px) 0 clamp(40px,7vh,72px);position:relative;overflow:hidden;}
.hero .runner{display:flex;justify-content:space-between;gap:16px;}
.hero .runner span{flex:1;}
.hero .runner span:nth-child(2){text-align:center;}
.hero .runner span:last-child{text-align:right;}
.hero .center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;position:relative;}
.hero .descriptor{margin-bottom:clamp(20px,3.2vh,34px);font-size:clamp(10px,1vw,12.5px);
  letter-spacing:.34em;color:var(--ink-2);max-width:760px;text-wrap:balance;}
.hero h1{font-family:var(--serif);font-weight:900;line-height:.84;letter-spacing:-.025em;
  margin:0;font-size:clamp(72px,15.5vw,260px);color:var(--ink);position:relative;z-index:2;}
.masthead-wrap{position:relative;display:flex;align-items:center;justify-content:center;}
.hero-portrait{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);
  width:min(560px,64vw);aspect-ratio:1/1;z-index:0;pointer-events:none;
  background:url("assets/sketch3.png") center/contain no-repeat;
  mix-blend-mode:darken;opacity:.20;filter:grayscale(1) contrast(.92);
  -webkit-mask-image:radial-gradient(58% 60% at 50% 42%,#000 52%,transparent 88%);
          mask-image:radial-gradient(58% 60% at 50% 42%,#000 52%,transparent 88%);
}
.hero h1 .dot{color:var(--t-700);}
.hero .scrollcue{position:relative;z-index:2;text-align:center;}
.hero .scrollcue .line{width:1px;height:46px;background:var(--ink);opacity:.4;margin:14px auto 0;
  transform-origin:top;animation:cue 2.4s ease-in-out infinite;}
@keyframes cue{0%,100%{transform:scaleY(.4);opacity:.2;}50%{transform:scaleY(1);opacity:.5;}}

/* ---------- opening note ---------- */
.note{padding:clamp(70px,11vh,150px) 0 clamp(50px,8vh,110px);position:relative;}
.note .inner{max-width:880px;}
.note p{font-family:var(--serif);font-weight:500;font-size:clamp(24px,3.4vw,46px);
  line-height:1.28;letter-spacing:-.015em;color:var(--ink);margin:.5em 0 0;text-wrap:balance;}
.note .em{font-style:italic;color:var(--t-700);}

/* ---------- feature section ---------- */
.feature{padding:clamp(64px,10vh,128px) 0;position:relative;}
.feat-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(28px,4vh,48px);flex-wrap:wrap;}
.feat-head .l{display:flex;flex-direction:column;gap:18px;}
.feat-grid{display:grid;gap:clamp(28px,4vw,64px);align-items:center;}
.feat-grid.std{grid-template-columns:1.05fr .95fr;}
.feat-grid.std.rev{grid-template-columns:.95fr 1.05fr;}
.feat-grid .col-text{display:flex;flex-direction:column;gap:22px;}
.feat-grid .col-text.pad{padding:0 clamp(0px,2vw,30px);}
.tagrow{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;}
.divider{height:1px;background:var(--hair);width:100%;}

/* aspect helpers for frames */
.ar-3x4{aspect-ratio:3/4;}
.ar-4x3{aspect-ratio:4/3;}
.ar-1x1{aspect-ratio:1/1;}
.ar-16x9{aspect-ratio:16/9;}
.ar-21x9{aspect-ratio:21/9;}

/* gallery (photography) */
.gallery{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:auto auto;gap:clamp(16px,2vw,26px);}
.gallery .g-main{grid-row:1 / span 2;}

/* books row */
.shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,30px);}

/* full-bleed family */
.bleed{position:relative;min-height:92vh;display:flex;align-items:flex-end;overflow:hidden;}
.bleed .frame{position:absolute;inset:0;z-index:0;}
.bleed .scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,30,29,.1) 0%,rgba(10,30,29,0) 35%,rgba(10,30,29,.62) 100%);}
.bleed .bleed-inner{position:relative;z-index:2;width:100%;color:var(--paper);padding-bottom:clamp(40px,7vh,80px);}
.bleed .title{color:var(--paper);}
.bleed .title .dot{color:var(--t-200);}
.bleed .kicker{color:var(--t-200);}
.bleed .body{color:rgba(248,246,241,.86);}
.bleed .meta{color:var(--t-200);}

/* wander panorama */
.pano .frame{width:100%;}
.pano .cols{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,5vw,76px);margin-top:clamp(26px,4vh,46px);}
.dropcap::first-letter{font-family:var(--serif);font-weight:800;float:left;font-size:4.1em;line-height:.74;
  padding:6px 12px 0 0;color:var(--t-700);}

/* reveal animation — visible by default; hidden start state only once JS confirms it can animate */
.reveal{transition:opacity .9s cubic-bezier(.2,.6,.25,1),transform .9s cubic-bezier(.2,.6,.25,1);}
html.js-anim .reveal{opacity:0;transform:translateY(26px);}
html.js-anim .reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.08s;}
.reveal.d2{transition-delay:.16s;}
.reveal.d3{transition-delay:.24s;}
@media (prefers-reduced-motion:reduce){html.js-anim .reveal{opacity:1;transform:none;}}

/* ---------- footer ---------- */
.foot{position:relative;padding:clamp(90px,15vh,190px) 0 clamp(40px,6vh,64px);overflow:hidden;text-align:center;}
.foot .hello{font-family:var(--serif);font-weight:900;font-size:clamp(64px,13vw,200px);line-height:.86;
  letter-spacing:-.025em;margin:0;color:var(--ink);}
.foot .hello .dot{color:var(--t-700);}
.foot .email{display:inline-block;margin-top:clamp(22px,3.4vh,40px);font-family:var(--sans);
  font-weight:500;font-size:clamp(15px,1.6vw,21px);letter-spacing:.04em;color:var(--ink);text-decoration:none;
  border-bottom:1.5px solid var(--t-500);padding-bottom:4px;transition:color .3s ease,border-color .3s ease;}
.foot .email:hover{color:var(--t-700);border-color:var(--t-700);}
.foot .sign{margin-top:clamp(48px,8vh,90px);display:flex;justify-content:space-between;align-items:center;
  gap:16px;flex-wrap:wrap;border-top:1px solid var(--hair);padding-top:24px;}
.foot .sign .word{font-family:var(--serif);font-weight:800;font-size:18px;}
.foot .sign .word .dot{color:var(--t-700);}

/* responsive */
@media (max-width:880px){
  .feat-grid.std,.feat-grid.std.rev{grid-template-columns:1fr;}
  .feat-grid .col-text.pad{padding:0;}
  .gallery{grid-template-columns:1fr 1fr;}
  .gallery .g-main{grid-row:auto;grid-column:1 / span 2;}
  .shelf{grid-template-columns:1fr;}
  .pano .cols{grid-template-columns:1fr;}
  .hero h1{font-size:clamp(56px,19vw,120px);}
}