/* =====================================================================
   XAYSAY — warm editorial / "heartfelt letter from a neighbor"
   ===================================================================== */

:root{
  --paper:      #f6efe1;   /* warm cream base            */
  --paper-deep: #ece1cb;   /* deeper panel               */
  --paper-card: #fbf6ec;   /* lifted card                */
  --ink:        #2a221a;   /* warm near-black            */
  --ink-soft:   #6a5d4c;   /* muted brown                */
  --ink-faint:  #9a8c77;
  --clay:       #bf5430;   /* terracotta — primary accent*/
  --clay-deep:  #9c3f22;
  --honey:      #d99a2b;   /* warm gold — secondary      */
  --sage:       #7c8a6a;   /* grounding green, sparing   */
  --line:       #d9ccb2;   /* hairline on paper          */

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --display: "Fraunces", Georgia, serif;

  --wrap: 1120px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--serif);
  background:var(--paper);
  color:var(--ink);
  font-size:clamp(17px,1.05vw + 14px,20px);
  line-height:1.6;
  font-optical-sizing:auto;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
em{ font-style:italic; }

/* paper grain overlay */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.4; mix-blend-mode:multiply;
  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' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ---------- shared bits ---------- */
.eyebrow{
  font-family:var(--serif);
  text-transform:uppercase; letter-spacing:.28em;
  font-size:.72rem; font-weight:600; color:var(--clay);
}
.eyebrow.light{ color:var(--honey); }

.sec-head{ max-width:var(--wrap); margin:0 auto; padding:0 clamp(20px,5vw,48px); }
.sec-head .eyebrow{ display:block; margin-bottom:.9rem; }
.sec-head h2{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(2rem,4.5vw,3.4rem);
  line-height:1.04;
  letter-spacing:-.015em;
  font-variation-settings:"SOFT" 30, "WONK" 1;
  max-width:14ch;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-weight:600;
  font-size:1rem; text-decoration:none;
  padding:.85em 1.5em; border-radius:999px;
  border:1.5px solid transparent;
  cursor:pointer; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s;
}
.btn-primary{
  background:var(--clay); color:#fff6ec;
  box-shadow:0 8px 22px -10px rgba(159,63,34,.7);
}
.btn-primary:hover{ transform:translateY(-2px) rotate(-.4deg); background:var(--clay-deep); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-ghost:hover{ transform:translateY(-2px); background:var(--ink); color:var(--paper); }
.btn-block{ width:100%; padding:1em; font-size:1.05rem; margin-top:.4rem; }

/* ============================ HEADER ============================ */
.site-head{
  position:relative; z-index:5;
  max-width:var(--wrap); margin:0 auto;
  padding:clamp(18px,3vw,30px) clamp(20px,5vw,48px);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.wordmark{ text-decoration:none; color:var(--ink); display:flex; align-items:baseline; gap:.55rem; }
.wordmark-main{
  font-family:var(--display); font-weight:600; font-size:1.5rem;
  letter-spacing:-.01em; font-variation-settings:"SOFT" 40,"WONK" 1;
}
.wordmark-say{
  font-style:italic; color:var(--clay); font-size:.85rem; letter-spacing:.02em;
}
.nav-cta{
  font-weight:600; font-size:.95rem; text-decoration:none; color:var(--ink);
  border-bottom:2px solid var(--honey); padding-bottom:2px;
  transition:color .2s;
}
.nav-cta:hover{ color:var(--clay); }

/* ============================= HERO ============================= */
.hero{
  position:relative; z-index:2;
  max-width:var(--wrap); margin:0 auto;
  padding:clamp(32px,5vw,72px) clamp(20px,5vw,48px) clamp(30px,6vw,64px);
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.92fr);
  gap:clamp(24px,4vw,56px);
  align-items:center;
}
.hero-inner{ position:relative; z-index:3; }
.kicker{
  font-family:var(--display); font-style:italic; font-weight:400;
  color:var(--clay); font-size:1.5rem; margin-bottom:.4rem;
}
.hero-title{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(2.7rem,5.6vw,4.9rem);
  line-height:1;
  letter-spacing:-.022em;
  font-variation-settings:"SOFT" 25,"WONK" 1,"opsz" 144;
}
.hero-title span{ display:block; }
.hero-title .hl{ position:relative; color:var(--clay); width:fit-content; }
.underline{
  position:absolute; left:-1%; bottom:-.34em; width:102%; height:.32em;
  fill:none; stroke:var(--honey); stroke-width:6; stroke-linecap:round;
  stroke-dasharray:340; stroke-dashoffset:340;
  animation:draw 1s var(--ease) 1.1s forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0; } }

.hero-sub{
  margin-top:1.7rem; max-width:30ch;
  font-size:clamp(1.15rem,1.4vw,1.4rem); line-height:1.5; color:var(--ink-soft);
}
.hero-sub em{ color:var(--clay); font-style:italic; }
.hero-actions{ margin-top:2.2rem; display:flex; flex-wrap:wrap; gap:.9rem; }

/* floating overheard notes — live in the right-hand hero column */
.hero-notes{ position:relative; min-height:clamp(320px,34vw,420px); z-index:2; }
.note{
  position:absolute; z-index:2;
  font-family:var(--serif); font-style:italic;
  background:var(--paper-card);
  color:var(--ink); font-size:.95rem; line-height:1.35;
  padding:1rem 1.1rem; width:clamp(180px,16vw,210px);
  border:1px solid var(--line);
  box-shadow:0 14px 30px -14px rgba(42,34,26,.4);
  opacity:0; animation:notePop .7s var(--ease) forwards;
}
.note .tape{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%) rotate(-3deg);
  width:64px; height:22px; background:rgba(217,154,43,.45);
  border:1px solid rgba(217,154,43,.5); border-radius:2px;
  box-shadow:0 2px 5px -2px rgba(42,34,26,.3);
}
.note-1{ top:1%;  left:5%;   transform:rotate(-3.5deg); animation-delay:1.3s; }
.note-2{ top:33%; right:1%;  transform:rotate(3deg);    animation-delay:1.5s; }
.note-3{ top:64%; left:15%;  transform:rotate(-2deg);   animation-delay:1.7s; }
@keyframes notePop{
  from{ opacity:0; transform:translateY(14px) rotate(var(--r,0)) scale(.96); }
  to{ opacity:1; }
}

/* ============================ MARQUEE ============================ */
.marquee-wrap{
  position:relative; z-index:2;
  margin-top:clamp(20px,4vw,40px);
  border-top:1.5px solid var(--ink);
  border-bottom:1.5px solid var(--ink);
  background:var(--clay);
  padding:.9rem 0 .5rem;
}
.marquee{ overflow:hidden; }
.marquee-track{
  display:flex; align-items:center; gap:1.4rem; width:max-content;
  animation:scroll 38s linear infinite;
}
.marquee-track span{
  font-family:var(--display); font-style:italic; font-weight:400;
  color:#fbe8d8; font-size:clamp(1.1rem,2vw,1.6rem); white-space:nowrap;
}
.marquee-track .dot{ color:var(--honey); font-style:normal; }
@keyframes scroll{ to{ transform:translateX(-50%); } }
.marquee-cap{
  text-align:center; color:#f6dfc4; font-style:italic;
  font-size:.8rem; letter-spacing:.04em; opacity:.85; padding-top:.35rem;
}

/* ============================= STEPS ============================ */
.steps{ position:relative; z-index:2; padding:clamp(60px,9vw,120px) 0; }
.step-grid{
  list-style:none; max-width:var(--wrap); margin:clamp(28px,4vw,52px) auto 0;
  padding:0 clamp(20px,5vw,48px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,3vw,40px);
}
.step{
  position:relative; padding-top:1.5rem; border-top:2px solid var(--ink);
}
.step-num{
  font-family:var(--display); font-weight:600; font-size:1.05rem;
  color:var(--clay); display:block; margin-bottom:1.1rem;
  font-variation-settings:"WONK" 1;
}
.step h3{
  font-family:var(--display); font-weight:500; font-size:clamp(1.4rem,2.4vw,1.85rem);
  line-height:1.05; letter-spacing:-.01em; margin-bottom:.7rem;
  font-variation-settings:"SOFT" 30,"WONK" 1;
}
.step p{ color:var(--ink-soft); font-size:1.02rem; }

/* ============================== WHY ============================= */
.why{
  position:relative; z-index:2; background:var(--ink); color:var(--paper);
  padding:clamp(70px,11vw,150px) clamp(20px,5vw,48px);
}
.why-inner{ max-width:var(--wrap); margin:0 auto; }
.why-line{
  font-family:var(--display); font-weight:500;
  font-size:clamp(2.6rem,7vw,5.5rem); line-height:.98; letter-spacing:-.02em;
  margin:1.1rem 0 1.6rem; color:var(--paper);
  font-variation-settings:"SOFT" 20,"WONK" 1,"opsz" 144;
}
.why-body{ max-width:46ch; color:#d7c8b0; font-size:clamp(1.1rem,1.4vw,1.35rem); line-height:1.55; }

/* ============================== WHO ============================= */
.who{ position:relative; z-index:2; padding:clamp(60px,9vw,120px) 0; }
.who-list{
  list-style:none; max-width:var(--wrap); margin:clamp(28px,4vw,48px) auto 0;
  padding:0 clamp(20px,5vw,48px);
  display:grid; gap:0;
}
.who-list li{
  display:flex; align-items:center; gap:1.1rem;
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.3rem,3.2vw,2.2rem); line-height:1.25;
  letter-spacing:-.01em; color:var(--ink);
  padding:clamp(.9rem,2vw,1.4rem) 0; border-bottom:1px solid var(--line);
  font-variation-settings:"SOFT" 40;
}
.who-list li:first-child{ border-top:1px solid var(--line); }
.check{
  flex:none; width:1.5rem; height:1.5rem; position:relative;
}
.check::before{
  content:""; position:absolute; inset:0;
  border:2px solid var(--clay); border-radius:50%;
}
.check::after{
  content:""; position:absolute; left:30%; top:14%; width:34%; height:62%;
  border:solid var(--clay); border-width:0 3px 3px 0;
  transform:rotate(42deg);
}

/* ========================== NOMINATE =========================== */
.nominate{
  position:relative; z-index:2; background:var(--paper-deep);
  padding:clamp(60px,9vw,120px) clamp(20px,5vw,48px);
}
.nom-card{
  max-width:760px; margin:0 auto; background:var(--paper-card);
  border:1.5px solid var(--line);
  border-radius:6px;
  box-shadow:0 30px 60px -30px rgba(42,34,26,.35);
  padding:clamp(28px,5vw,56px);
}
.nom-head h2{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.9rem,4vw,3rem); line-height:1.02; letter-spacing:-.015em;
  font-variation-settings:"SOFT" 30,"WONK" 1;
}
.nom-head p{ color:var(--ink-soft); margin-top:.8rem; max-width:48ch; }

.toggle{
  display:inline-flex; margin:1.8rem 0 1.6rem; padding:4px;
  background:var(--paper-deep); border:1px solid var(--line); border-radius:999px;
  flex-wrap:wrap;
}
.toggle-btn{
  font-family:var(--serif); font-weight:600; font-size:.92rem;
  border:none; background:transparent; color:var(--ink-soft);
  padding:.55em 1.2em; border-radius:999px; cursor:pointer;
  transition:background .2s, color .2s;
}
.toggle-btn.is-on{ background:var(--ink); color:var(--paper); }

.nom-form{ display:flex; flex-direction:column; gap:1.1rem; }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
label{
  font-family:var(--serif); font-weight:600; font-size:.82rem;
  text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft);
}
label .opt{ text-transform:none; letter-spacing:0; font-weight:400; color:var(--ink-faint); }
input, textarea{
  font-family:var(--serif); font-size:1.02rem; color:var(--ink);
  background:var(--paper); border:1.5px solid var(--line); border-radius:4px;
  padding:.75em .85em; width:100%; transition:border-color .2s, box-shadow .2s;
}
input::placeholder, textarea::placeholder{ color:var(--ink-faint); font-style:italic; }
input:focus, textarea:focus{
  outline:none; border-color:var(--clay);
  box-shadow:0 0 0 3px rgba(191,84,48,.14);
}
textarea{ resize:vertical; }
.hp{ position:absolute; left:-9999px; opacity:0; height:0; width:0; }
.form-note{ font-size:.88rem; color:var(--ink-faint); font-style:italic; text-align:center; margin-top:.2rem; }
.form-note.err{ color:var(--clay-deep); font-style:normal; font-weight:600; }
.form-note.ok{ color:var(--sage); font-style:normal; font-weight:600; }

/* ============================ FOOTER =========================== */
.site-foot{
  position:relative; z-index:2; text-align:center;
  padding:clamp(50px,7vw,90px) clamp(20px,5vw,48px) clamp(36px,5vw,60px);
}
.foot-mark{
  font-family:var(--display); font-weight:600; font-size:1.7rem; color:var(--ink);
  font-variation-settings:"SOFT" 40,"WONK" 1; letter-spacing:-.01em;
}
.foot-line{ margin-top:.5rem; color:var(--ink-soft); }
.foot-line a{ color:var(--clay); text-decoration:none; border-bottom:1px solid var(--honey); }
.foot-line a:hover{ color:var(--clay-deep); }
.foot-fine{ margin-top:1rem; font-style:italic; font-size:.85rem; color:var(--ink-faint); }
.foot-fine .yr{ font-style:normal; }

/* ========================== REVEAL ============================= */
.reveal{ opacity:0; transform:translateY(18px); animation:rise .8s var(--ease) forwards; animation-delay:calc(var(--d) * .12s + .1s); }
@keyframes rise{ to{ opacity:1; transform:none; } }

/* in-view reveals for lower sections */
.io{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.io.in{ opacity:1; transform:none; }

/* ========================= RESPONSIVE ========================== */
@media (max-width:920px){
  .hero{ grid-template-columns:1fr; gap:0; }
  .hero-notes{ display:none; }
}
@media (max-width:820px){
  .step-grid{ grid-template-columns:1fr; gap:0; }
  .step{ border-top:none; border-bottom:1px solid var(--line); padding:1.6rem 0; }
  .step:first-child{ border-top:2px solid var(--ink); }
}
@media (max-width:560px){
  .field-row{ grid-template-columns:1fr; }
  .toggle{ width:100%; }
  .toggle-btn{ flex:1; text-align:center; }
  .hero-actions{ flex-direction:column; }
  .hero-actions .btn{ width:100%; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal,.io{ opacity:1; transform:none; }
  .underline{ stroke-dashoffset:0; }
  .note{ opacity:1; }
}