/* ============================================================
   coreyshay.com · "Life on a Rock" — sun-faded scrapbook reskin
   warm sand ground · ocean + sunset accents · pinned polaroids
   ============================================================ */
:root{
  /* paper · warm sand */
  --paper:#EEE3CC;
  --paper-2:#E2D2B2;
  --card:#FBF5E6;          /* polaroid / note stock */
  --card-2:#F2E7D0;

  /* ink · warm brown-black */
  --ink:#2A2114;
  --ink-2:#4A3D28;
  --ink-soft:#7C6B4E;
  --hair:rgba(42,33,20,.18);

  /* ocean (faded teal-blue) */
  --sea-900:#123A42;
  --sea-700:#1C525E;
  --sea-500:#2C7382;
  --sea-200:#9CC0C6;

  /* sunset gold / amber */
  --sun-700:#B07320;
  --sun-500:#D89A3A;
  --sun-200:#EDCB89;

  /* terracotta + sage */
  --clay:#B0532C;
  --sage:#7C8451;

  /* roles */
  --accent:var(--sea-500);     /* primary accent (dots, links) */
  --accent-2:var(--clay);      /* handwritten kickers */

  /* tunables (Tweaks) */
  --wash-op:1;
  --sunfade:.62;               /* photo sun-fade strength 0–1 */
  --tiltk:1;                   /* polaroid tilt multiplier */

  --serif:"Playfair Display",Georgia,serif;
  --sans:"DM Sans",system-ui,-apple-system,sans-serif;
  --hand:"Caveat",ui-rounded,cursive;
  --type:"Special Elite","Courier New",monospace;

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

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  background:var(--paper);
  background-image:
    radial-gradient(120% 90% at 50% -12%, rgba(255,250,238,.65) 0%, rgba(255,250,238,0) 46%),
    radial-gradient(90% 70% at 108% 4%, rgba(216,154,58,.10) 0%, transparent 50%),
    radial-gradient(80% 70% at -8% 96%, rgba(44,115,130,.08) 0%, transparent 52%);
}

/* warm paper grain over everything */
body::after{
  content:"";position:fixed;inset:0;z-index:9;pointer-events:none;
  mix-blend-mode:multiply;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' 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(--hand);font-weight:600;font-size:clamp(24px,2.5vw,34px);
  line-height:1;letter-spacing:.01em;color:var(--accent-2);
  transform:rotate(-2.2deg);transform-origin:left center;display:inline-block;
}
.label{
  font-family:var(--type);font-weight:400;text-transform:uppercase;
  letter-spacing:.22em;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,140px);
}
.title .dot{color:var(--accent);}
.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;text-wrap:balance;
}
.body{
  font-size:clamp(16px,1.25vw,18px);line-height:1.64;color:var(--ink-soft);
  font-weight:400;max-width:42ch;text-wrap:pretty;
}
.meta{
  font-family:var(--type);font-weight:400;text-transform:uppercase;
  letter-spacing:.16em;font-size:11.5px;color:var(--sea-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;
}
.em{font-style:italic;color:var(--accent-2);}

/* ---------- watercolor wash (warmed) ---------- */
.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(16px);
  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(.42*var(--wash-op));background:radial-gradient(closest-side,var(--sun-500) 0%,rgba(216,154,58,.5) 48%,transparent 78%);}
.wash.w2{opacity:calc(.40*var(--wash-op));background:radial-gradient(closest-side,var(--sea-500) 0%,rgba(44,115,130,.5) 48%,transparent 78%);}
.wash.w3{opacity:calc(.42*var(--wash-op));background:radial-gradient(closest-side,var(--clay) 0%,rgba(176,83,44,.45) 50%,transparent 80%);}
.wash.w4{opacity:calc(.36*var(--wash-op));background:radial-gradient(closest-side,var(--sage) 0%,rgba(124,132,81,.5) 48%,transparent 78%);}
@media (prefers-reduced-motion:reduce){
  .wash{transition:opacity .6s ease;transform:none;}
}

/* ---------- photo slots · sun-faded ---------- */
image-slot{display:block;width:100%;height:100%;background:transparent;color:var(--ink-soft);font-family:var(--type)!important;}
image-slot::part(frame){
  background:
    linear-gradient(135deg, rgba(216,154,58,.20), rgba(44,115,130,.18)),
    linear-gradient(0deg,#d9caac,#e6dabf);
}
image-slot::part(image){
  filter:
    sepia(calc(var(--sunfade)*.34))
    saturate(calc(1 + var(--sunfade)*.10))
    contrast(calc(1 - var(--sunfade)*.05))
    brightness(calc(1 + var(--sunfade)*.045));
}

/* ---------- polaroid ---------- */
.polaroid{
  position:relative;z-index:1;
  background:linear-gradient(168deg,var(--card),var(--card-2));
  padding:clamp(10px,1vw,16px);
  padding-bottom:clamp(40px,3.4vw,58px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 2px 3px rgba(42,33,20,.12),
    0 18px 34px -12px rgba(42,33,20,.42);
  transform:rotate(calc(var(--r,-2deg) * var(--tiltk)));
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease;
}
.polaroid .pic{position:relative;overflow:hidden;background:#cdbfa3;}
.polaroid .hand{
  position:absolute;left:0;right:0;bottom:clamp(8px,1vw,16px);
  text-align:center;font-family:var(--hand);font-weight:500;
  font-size:clamp(19px,1.7vw,26px);line-height:1;color:var(--ink-2);
  padding:0 12px;
}
.polaroid:hover{transform:rotate(0deg) translateY(-6px) scale(1.012);
  box-shadow:0 4px 6px rgba(42,33,20,.16),0 30px 50px -14px rgba(42,33,20,.5);}

/* a strip of translucent "tape" */
.tape{
  position:absolute;z-index:3;width:clamp(64px,7vw,104px);height:clamp(22px,2.2vw,30px);
  background:linear-gradient(180deg,rgba(236,203,137,.5),rgba(216,154,58,.32));
  box-shadow:0 1px 2px rgba(42,33,20,.18);
  top:-12px;left:50%;transform:translateX(-50%) rotate(-4deg);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6px,#000 calc(100% - 6px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 6px,#000 calc(100% - 6px),transparent 100%);
}
.tape.tl{top:-10px;left:8%;transform:rotate(-26deg);}
.tape.tr{top:-10px;left:auto;right:8%;transform:rotate(22deg);}
.tape.blue{background:linear-gradient(180deg,rgba(156,192,198,.5),rgba(44,115,130,.3));}

/* push-pin */
.pin{
  position:absolute;z-index:3;width:18px;height:18px;border-radius:50%;
  top:-7px;left:50%;transform:translateX(-50%);
  background:radial-gradient(circle at 34% 30%,#e8895f 0%,var(--clay) 48%,#7e3a1f 100%);
  box-shadow:0 3px 5px rgba(42,33,20,.4);
}
.pin.sea{background:radial-gradient(circle at 34% 30%,#79b3bd 0%,var(--sea-500) 48%,#143a42 100%);}
.pin.sun{background:radial-gradient(circle at 34% 30%,#f2d597 0%,var(--sun-500) 48%,#8a5615 100%);}

/* aspect helpers */
.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;}
.ar-5x4{aspect-ratio:5/4;}

/* ---------- layout shell ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:1;}
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:16px var(--gutter);
  background:linear-gradient(180deg,rgba(238,227,204,.94),rgba(238,227,204,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(--accent);}
.topbar .mailto{font-family:var(--type);font-weight:400;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hair);padding-bottom:2px;}
.topbar .mailto:hover{color:var(--accent);border-color:var(--accent);}

/* ---------- 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(--sea-700);
  background:transparent;transition:background .3s ease,transform .3s ease;}
.dots a.active{background:var(--sea-700);transform:scale(1.3);}
.dots a .tip{position:absolute;right:18px;top:50%;transform:translateY(-50%);
  white-space:nowrap;font-family:var(--type);font-weight:400;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);opacity:0;pointer-events:none;transition:opacity .25s ease;
  background:var(--card);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:linear-gradient(90deg,var(--sea-500),var(--sun-500));z-index:41;}

/* ---------- HERO ---------- */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(190px,27vh,360px) 0 clamp(40px,7vh,72px);position:relative;overflow:hidden;}
.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(18px,2.6vh,30px);font-size:clamp(10px,1vw,12.5px);
  letter-spacing:.24em;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,250px);color:var(--ink);position:relative;z-index:2;}
.hero h1 .dot{color:var(--accent);}
.masthead-wrap{position:relative;display:flex;align-items:center;justify-content:center;}
.hero-portrait{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-60%);
  width:min(760px,84vw);aspect-ratio:1/1;z-index:0;pointer-events:none;
  background:url("assets/sketch3.png") center/contain no-repeat;
  mix-blend-mode:multiply;opacity:.26;filter:sepia(.4) 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 collage cluster */
.cluster{position:relative;z-index:2;margin-top:clamp(26px,4.5vh,52px);
  display:flex;align-items:flex-start;justify-content:center;gap:clamp(8px,2vw,30px);flex-wrap:wrap;}
.cluster .polaroid{width:clamp(132px,15vw,196px);}
.cluster .polaroid:nth-child(1){--r:-6deg;margin-top:14px;}
.cluster .polaroid:nth-child(2){--r:3deg;}
.cluster .polaroid:nth-child(3){--r:-3deg;margin-top:22px;}
.cluster .polaroid:nth-child(4){--r:5deg;margin-top:6px;}

/* round embroidered "patch" badge */
.badge{position:relative;width:clamp(108px,12vw,150px);height:clamp(108px,12vw,150px);
  align-self:center;flex:0 0 auto;color:var(--sea-700);}
.badge svg{width:100%;height:100%;display:block;}
.badge .b-ring{fill:none;stroke:var(--sea-700);stroke-width:1.4;stroke-dasharray:2 3;opacity:.8;}
.badge .b-fill{fill:var(--card);stroke:var(--clay);stroke-width:1.6;}
.badge .b-text{font-family:var(--type);font-size:8.2px;letter-spacing:2.4px;
  fill:var(--clay);text-transform:uppercase;}
.badge .b-core{font-family:var(--serif);font-weight:900;font-size:22px;fill:var(--sea-700);}
.badge .b-sun{font-family:var(--hand);font-weight:600;font-size:13px;fill:var(--sun-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 · typed on a torn card ---------- */
.note{padding:clamp(60px,10vh,140px) 0 clamp(50px,8vh,110px);position:relative;}
.note .inner{max-width:880px;}
.notecard{
  position:relative;max-width:760px;margin:0 auto;
  background:linear-gradient(176deg,var(--card),var(--card-2));
  padding:clamp(34px,5vw,68px) clamp(30px,5vw,72px) clamp(40px,6vw,72px);
  transform:rotate(-1.1deg);
  box-shadow:0 2px 3px rgba(42,33,20,.1),0 22px 44px -16px rgba(42,33,20,.4);
}
.notecard .kicker{margin-bottom:18px;}
.notecard p{font-family:var(--type);font-weight:400;font-size:clamp(17px,2vw,24px);
  line-height:1.72;letter-spacing:0;color:var(--ink);margin:0;text-wrap:pretty;}
.notecard .em{font-style:normal;color:var(--clay);border-bottom:2px solid rgba(176,83,44,.35);}

/* torn deckle edge for the note card (driven by site.js) */
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;
}

/* ---------- feature section ---------- */
.feature{padding:clamp(56px,9vh,120px) 0;position:relative;}
.feat-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  margin-bottom:clamp(30px,4.5vh,54px);flex-wrap:wrap;}
.feat-head .l{display:flex;flex-direction:column;gap:14px;}
.feat-grid{display:grid;gap:clamp(28px,4vw,68px);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);}
.feat-grid .polaroid.single{max-width:clamp(300px,34vw,440px);width:100%;margin:0 auto;}
.tagrow{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;}
.divider{height:1px;background:var(--hair);width:100%;}

/* gallery (photography) */
.gallery{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:auto auto;
  gap:clamp(20px,2.4vw,34px);align-items:start;}
.gallery .g-main{grid-row:1 / span 2;align-self:center;}
.gallery .polaroid:nth-child(1){--r:-3deg;}
.gallery .polaroid:nth-child(2){--r:3.5deg;}
.gallery .polaroid:nth-child(3){--r:-4deg;}

/* books shelf */
.shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,40px);align-items:start;}
.shelf .polaroid:nth-child(1){--r:-4deg;margin-top:10px;}
.shelf .polaroid:nth-child(2){--r:2.5deg;}
.shelf .polaroid:nth-child(3){--r:-2deg;margin-top:16px;}

/* full-bleed family */
.bleed{position:relative;min-height:92vh;display:flex;align-items:flex-end;overflow:hidden;}
.bleed .photo{position:absolute;inset:0;z-index:0;}
.bleed image-slot::part(image){
  filter:sepia(calc(var(--sunfade)*.3)) saturate(calc(1 + var(--sunfade)*.12)) brightness(calc(1 + var(--sunfade)*.03));
}
.bleed .scrim{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(20,40,42,.12) 0%,rgba(20,40,42,0) 30%,rgba(60,30,12,.2) 64%,rgba(40,18,6,.72) 100%);}
.bleed .bleed-inner{position:relative;z-index:2;width:100%;color:var(--card);padding-bottom:clamp(40px,7vh,80px);}
.bleed .title{color:var(--card);}
.bleed .title .dot{color:var(--sun-200);}
.bleed .kicker{color:var(--sun-200);}
.bleed .body{color:rgba(251,245,230,.9);}
.bleed .meta{color:var(--sun-200);}
.bleed .no{color:rgba(251,245,230,.78);}

/* wander panorama */
.pano .polaroid{width:100%;}
.pano .cols{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,5vw,76px);margin-top:clamp(30px,4.5vh,52px);}
.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(--accent-2);}

/* reveal animation */
.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;}}

/* ---------- "more" link ---------- */
.more{
  display:inline-flex;align-items:center;gap:13px;align-self:flex-start;text-decoration:none;
  font-family:var(--type);font-weight:400;text-transform:uppercase;letter-spacing:.14em;font-size:12px;
  color:var(--ink);margin-top:6px;
}
.more .ml{position:relative;display:inline-block;width:30px;height:1px;background:currentColor;
  transition:width .32s cubic-bezier(.2,.6,.25,1);}
.more .ml::after{content:"";position:absolute;right:0;top:50%;width:7px;height:7px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:translateY(-50%) rotate(45deg);}
.more:hover{color:var(--accent);}
.more:hover .ml{width:44px;}
.bleed .more{color:var(--card);}
.bleed .more:hover{color:var(--sun-200);}

/* ---------- footer ---------- */
.foot{position:relative;padding:clamp(86px,14vh,180px) 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(--accent);}
.foot .signoff{font-family:var(--hand);font-weight:600;font-size:clamp(26px,3.4vw,42px);
  color:var(--accent-2);transform:rotate(-2deg);display:inline-block;margin-top:18px;}
.foot .email{display:inline-block;margin-top:clamp(18px,2.6vh,30px);font-family:var(--type);
  font-weight:400;font-size:clamp(15px,1.6vw,20px);letter-spacing:.02em;color:var(--ink);text-decoration:none;
  border-bottom:1.5px solid var(--sea-500);padding-bottom:4px;transition:color .3s ease,border-color .3s ease;}
.foot .email:hover{color:var(--accent);border-color:var(--accent);}
.foot .sign{margin-top:clamp(44px,7vh,84px);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(--accent);}
.foot .sign .label{font-size:11px;}

/* 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 1fr;}
  .shelf .polaroid:nth-child(3){grid-column:1 / span 2;width:60%;margin:0 auto;}
  .pano .cols{grid-template-columns:1fr;}
  .hero h1{font-size:clamp(56px,19vw,120px);}
  .cluster .badge{order:-1;}
}
@media (max-width:560px){
  .cluster .polaroid:nth-child(4){display:none;}
  .shelf{grid-template-columns:1fr;}
  .shelf .polaroid{width:78%;margin:0 auto !important;}
}