/* The Staci Method, v5 (2026-10-25). Built from README_HANDOFF.md (FINAL BUILD BRIEF v2).
   One responsive layout: desktop 4 cards in a row, tablet 2x2, phone 1 per row.
   Copy is verbatim from the brief. No em dashes anywhere. */
:root{
  --cloud:#FCFAF7; --ivory:#F8F3EC; --cream:#F3ECE2; --lav-wash:#F4EFF7; --lavender:#B9A3CF; --lav-mid:#9C80BE;
  --plum:#3E2A52; --violet:#55358A; --ink:#463D4C; --muted:#6E6375;
  --gold:#B88A57; --gold-deep:#8F6638; --gold-soft:#E7D6BF; --hairline:rgba(62,42,82,.13);
  --display:"Cormorant Garamond","Iowan Old Style",Georgia,serif;
  --caps:"Jost","Avenir Next","Segoe UI",system-ui,sans-serif;
  --script:"Allura","Snell Roundhand",cursive;
  --gutter:clamp(16px,4vw,40px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cloud);color:var(--ink);font-family:var(--display);
  font-size:clamp(1.13rem,1.08rem + .25vw,1.3rem);line-height:1.55;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--violet)}
h1,h2,h3{font-family:var(--display);font-weight:400;color:var(--plum);margin:0;line-height:1.1;text-wrap:balance}
h1{font-size:clamp(2.4rem,1.7rem + 3.2vw,4.2rem)}
h2{font-size:clamp(2.1rem,1.6rem + 2.4vw,3.4rem)}
h3{font-size:clamp(1.5rem,1.35rem + .6vw,1.8rem)}
p{margin:0 0 1em}
.wrap{width:min(1240px,100% - 2*var(--gutter));margin-inline:auto}
.rule{display:block;width:90px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:1.1rem auto}
.lede{font-style:italic;color:var(--violet)}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:.6em 1em;z-index:99}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px}

/* Review-build marks: everything not yet approved for publishing */
.review-bar{background:#FFF4D6;border-bottom:1px dashed #D9B25F;font-family:var(--caps);font-size:.8rem;color:#6b4700;
  padding:.55rem var(--gutter);display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;justify-content:center;text-align:center}
.review-bar button{font:inherit;background:#fff;border:1px solid #D9B25F;border-radius:999px;padding:.35em 1em;cursor:pointer;color:#6b4700}
.flag{display:inline-block;font-family:var(--caps);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#7a4f00;
  background:#FFF4D6;border:1px dashed #D9B25F;border-radius:999px;padding:.3em .9em;margin:0 0 .9rem}
body.hide-review .review-bar .note, body.hide-review .flag{display:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;min-height:52px;
  font-family:var(--caps);font-size:.86rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;line-height:1.35;
  color:#fff;background:linear-gradient(180deg,#CDA373,var(--gold) 55%,var(--gold-deep));padding:.9em 1.8em;border-radius:999px;
  border:1px solid var(--gold-deep);box-shadow:0 6px 18px -8px rgba(143,102,56,.6);transition:transform .2s,box-shadow .2s;cursor:pointer}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px -8px rgba(143,102,56,.7)}
.btn.ghost{background:transparent;color:var(--gold-deep);box-shadow:none}
.btn.ghost:hover{background:#fff}

/* Image slots: show a labeled box until the real file is dropped into images/ */
.slot{position:relative;overflow:hidden;background:repeating-linear-gradient(135deg,var(--lav-wash) 0 14px,var(--ivory) 14px 28px);
  border:1px dashed var(--lavender);display:grid;place-items:center}
.slot::before{content:attr(data-label);font-family:var(--caps);font-size:.75rem;letter-spacing:.06em;color:var(--muted);
  text-align:center;padding:1rem;max-width:30ch;line-height:1.45}
.slot.filled{border:0;background:none}
.slot.filled::before{display:none}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--focus,50% 50%)}

/* Header */
.site-head{position:sticky;top:0;z-index:20;background:rgba(252,250,247,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--hairline)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:76px}
/* Wordmark from the approved master: "The" + script "Staci" + gold "METHOD" */
.mark{display:inline-grid;text-decoration:none;line-height:.8;font-family:var(--display);font-weight:400}
.mark .t{font-size:1em;color:var(--plum);grid-area:1/1;align-self:start}
.mark .s{font-family:var(--script);font-size:2.6em;color:var(--lav-mid);grid-area:1/1;margin:-.18em 0 0 .7em;line-height:1}
.mark .m{font-size:1.5em;letter-spacing:.08em;font-weight:500;grid-area:2/1;margin-top:-.32em;background:linear-gradient(180deg,#CDA373,#8F6638);-webkit-background-clip:text;background-clip:text;color:transparent}
.mark .m sup{font-family:var(--caps);font-size:.28em;color:var(--gold-deep);-webkit-text-fill-color:var(--gold-deep);vertical-align:top;letter-spacing:0}
.mark .sw{grid-area:3/1;width:85%;height:.5em;margin:.15em 0 0 .3em;color:var(--gold)}
.site-head .mark{font-size:clamp(17px,1rem + .4vw,21px)}
.hero-mark{font-size:clamp(30px,1.4rem + 3vw,58px);margin-bottom:1.4rem}
.nav{display:flex;align-items:center;gap:clamp(1rem,2vw,2rem)}
.nav a{font-family:var(--caps);font-size:.86rem;letter-spacing:.06em;color:var(--plum);text-decoration:none;padding:.5em 0}
.nav a:hover{color:var(--gold-deep)}
.nav .btn{color:#fff;padding:.75em 1.3em;font-size:.76rem;min-height:46px}
.menu-btn{display:none;font-family:var(--caps);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--plum);
  background:none;border:1px solid var(--hairline);border-radius:999px;min-height:46px;padding:0 1.1rem;cursor:pointer}

/* Hero: copy and journal portrait side by side on desktop, stacked on phones */
.hero{background:linear-gradient(180deg,var(--cloud),var(--lav-wash))}
.hero-in{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:center;padding-block:clamp(2.5rem,6vw,5rem)}
.hero-copy .lede{font-size:1.2em;color:var(--violet);margin-top:1.3rem}
.hero-copy .body{max-width:36em}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.6rem}
.hero-photo{aspect-ratio:4/5;border-radius:6px;--focus:50% 30%}

/* Four foundations */
.foundations{padding-block:clamp(3rem,7vw,6rem);text-align:center}
.foundations .intro{max-width:44em;margin:0 auto 2.6rem}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,1.6vw,1.6rem);text-align:center}
.card{background:#fff;border:1px solid var(--hairline);border-radius:8px;padding:2rem 1.5rem 1.8rem;display:flex;flex-direction:column;align-items:center;
  box-shadow:0 18px 40px -30px rgba(62,42,82,.35)}
.card .art{width:150px;height:100px;margin:0 auto 1.2rem;background:none;border-color:var(--lavender)}
.card .art img{object-fit:contain}
.card h3{margin-bottom:.4rem}
.card p{margin:0}

/* How We Begin */
.begin{background:var(--ivory);padding-block:clamp(3rem,7vw,6rem)}
.begin-in{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(1.5rem,4vw,4rem);align-items:start}
.begin-photo{aspect-ratio:1/1;border-radius:6px;position:sticky;top:100px;--focus:62% 50%}
.begin .lede{font-size:1.15em;margin:1rem 0 1.4rem}
.details{font-family:var(--caps);font-size:.95rem;letter-spacing:.06em;color:var(--plum);margin:1.6rem 0;font-weight:500}
.details span{color:var(--gold)}

/* Testimonials */
.words{padding-block:clamp(3rem,7vw,6rem);text-align:center}
.words .lede{margin:1rem auto 2.6rem;max-width:40em}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,1.6vw,1.6rem);text-align:left}
.quote{background:#fff;border:1px solid var(--hairline);border-radius:8px;padding:1.8rem 1.6rem;display:flex;flex-direction:column}
.quote blockquote{margin:0 0 1.2rem;flex:1;color:var(--muted);font-style:italic}
.quote .who{font-size:1.25em;color:var(--plum);margin:0}

/* Coastal closer: candles, flowers, ocean and bed */
.closer{position:relative;min-height:clamp(600px,50vw,720px);display:grid;align-items:center}
.closer-photo{position:absolute;inset:0;border:0;--focus:50% 75%}
.closer-copy{position:relative;margin:clamp(2rem,5vw,4rem) auto;width:min(620px,100% - 2*var(--gutter));
  background:rgba(252,250,247,.88);backdrop-filter:blur(3px);border-radius:8px;padding:clamp(1.6rem,3vw,2.6rem);text-align:center;
  box-shadow:0 20px 50px -30px rgba(62,42,82,.4)}
.closer-copy h2{font-size:clamp(1.9rem,1.5rem + 1.8vw,2.8rem);margin-bottom:1.2rem}
.closer-copy p{margin-bottom:.7em}
.closer-copy .btn{margin-top:1rem}

/* Footer */
.site-foot{background:var(--plum);color:#EDE6F2;padding-block:3rem;text-align:center;font-family:var(--caps);font-size:.92rem}
.site-foot .brand{font-family:var(--display);font-size:1.5rem;color:#fff;margin-bottom:1.2rem}
.site-foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.6rem;margin-bottom:1.2rem}
.site-foot a{color:#EDE6F2;text-decoration:none;display:inline-block;padding:.5em 0}
.site-foot a:hover{color:var(--gold-soft)}
.site-foot .legal{font-size:.82rem;opacity:.85}

/* Simple inner pages */
.page{padding-block:clamp(2.5rem,6vw,5rem)}
.page .wrap{max-width:760px}
.form{display:grid;gap:1.2rem;margin-top:2rem}
.form label{display:grid;gap:.4rem;font-family:var(--caps);font-size:.9rem;color:var(--plum)}
.form .opt{color:var(--muted);font-size:.85em}
.form input,.form textarea,.form select{font:inherit;font-family:var(--caps);font-size:1rem;padding:.8em .9em;border:1px solid var(--hairline);border-radius:6px;background:#fff;color:var(--ink);min-height:48px}
.form textarea{min-height:120px;resize:vertical}
.form fieldset{border:1px solid var(--hairline);border-radius:8px;padding:1.2rem;display:grid;gap:1.2rem}
.form legend{font-family:var(--caps);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);padding:0 .4rem}
.disclosure{font-family:var(--caps);font-size:.85rem;color:var(--muted)}
.steps{font-family:var(--caps);font-size:.9rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;margin:1rem 0 0;padding:0;list-style:none}
.steps li[aria-current]{color:var(--plum);font-weight:500}
.notice{background:#FFF4D6;border:1px dashed #D9B25F;border-radius:8px;padding:1.2rem;font-family:var(--caps);font-size:.95rem;color:#6b4700}

/* Tablet: 2x2 cards, testimonials stack */
@media (max-width:1080px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .quotes{grid-template-columns:1fr;max-width:760px;margin-inline:auto}
}
/* Phone and small tablet */
@media (max-width:820px){
  .menu-btn{display:inline-flex;align-items:center}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--cloud);flex-direction:column;align-items:stretch;
    padding:.5rem var(--gutter) 1.2rem;border-bottom:1px solid var(--hairline);gap:0}
  .nav.open{display:flex}
  .nav a{padding:.9em 0;border-bottom:1px solid var(--hairline);font-size:1rem}
  .nav .btn{margin-top:1rem;border-bottom:0}
  .hero-in{grid-template-columns:1fr}
  .hero-photo{order:-1;aspect-ratio:4/4.4;--focus:50% 28%}
  .hero-ctas .btn{width:100%}
  .begin-in{grid-template-columns:1fr}
  .begin-photo{position:relative;top:auto;aspect-ratio:4/4.2}
  .begin .btn{width:100%}
  /* Closer: photo sits above the copy so the bed and the sea stay visible and the text stays readable */
  .closer{display:block;min-height:0}
  .closer-photo{position:relative;aspect-ratio:3/2;--focus:88% 60%}
  .closer-copy{margin:0;width:100%;border-radius:0;box-shadow:none;background:var(--cloud);backdrop-filter:none}
  .closer-copy .btn{width:100%}
}
@media (max-width:640px){
  .cards{grid-template-columns:1fr}
  .card{padding:1.8rem 1.4rem}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}