/* ============================================================
   YES, I DO — Events & Decor
   Hand-written CSS. No build step, no framework, no utilities.
   ============================================================ */

/* ---------- 1. TOKENS ------------------------------------- */
:root{
  /* palette */
  --ecru:#F4EFE6;
  --sand:#E4D9C6;
  --olive:#6B7250;          /* rules, fills, large type only — 4.42:1 on ecru */
  --olive-text:#5A6142;     /* accessible sibling — 5.69:1 on ecru, 4.67 on sand */
  --terracotta:#B96D4E;     /* decorative / large only — 3.42:1 on ecru */
  --terracotta-text:#8F4F33;/* accessible sibling — 5.50:1 on ecru, 4.51 on sand */
  --blue:#1F3A5F;           /* the only accent — 10.03:1 on ecru */
  --ink:#211D19;            /* 14.62:1 on ecru */
  --scrim:20 17 14;         /* rgb() channels for the film overlay */

  /* white never appears as a surface: ecru on white is 1.15:1 */

  /* type */
  --display-font:"Petrona", Georgia, "Times New Roman", serif;
  --body-font:"Newsreader", Georgia, "Times New Roman", serif;

  /* modular scale, base 17px, ratio 1.25 */
  --step--2:0.68rem;
  --step--1:0.85rem;
  --step-0:1.0625rem;
  --step-1:1.33rem;
  --step-2:1.66rem;
  --step-3:2.08rem;
  --step-4:2.6rem;
  --display:clamp(2.6rem, 7vw, 6.5rem);
  --display-2:clamp(2rem, 4.4vw, 3.6rem);

  /* space */
  --sp-1:0.5rem;  --sp-2:1rem;   --sp-3:1.5rem; --sp-4:2.5rem;
  --sp-5:4rem;    --sp-6:6rem;   --sp-7:9rem;
  --gutter:clamp(1.4rem, 5vw, 4rem);
  --section-y:clamp(4.5rem, 13vh, 9rem);
  --measure:60ch;

  /* motion — one curve for the entire site */
  --ease:cubic-bezier(0.16, 1, 0.3, 1);
  --dur:760ms;

  --focus:var(--blue);

  /* paper grain — no texture files shipped, so this is generated */
  --grain: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.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 2. RESET -------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
body{
  margin:0;
  background:var(--ecru);
  color:var(--ink);
  font:400 var(--step-0)/1.65 var(--body-font);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,p,figure,ol,ul,fieldset,legend{margin:0;padding:0}
ol,ul{list-style:none}
img,video{display:block;max-inline-size:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px}

.skip{
  position:absolute; inset-block-start:-100px; inset-inline-start:var(--gutter);
  z-index:20; background:var(--blue); color:var(--ecru);
  padding:0.9em 1.4em; text-decoration:none;
  font-size:var(--step--1); letter-spacing:.1em; text-transform:uppercase;
}
.skip:focus{inset-block-start:var(--sp-2)}

/* ---------- 3. TYPE --------------------------------------- */
/* Petrona has no optical-size axis, so tracking is set per size by hand. */
.display{
  font-family:var(--display-font); font-weight:400;
  font-size:var(--display); line-height:0.98; letter-spacing:-0.022em;
  text-wrap:balance;
}
.display-2{
  font-family:var(--display-font); font-weight:400;
  font-size:var(--display-2); line-height:1.06; letter-spacing:-0.018em;
  text-wrap:balance;
}
.label{
  font-family:var(--body-font); font-weight:500;
  font-size:var(--step--2); letter-spacing:0.18em; text-transform:uppercase;
  color:var(--olive-text);
}
.wordmark{
  font-family:var(--display-font); font-weight:500;
  font-size:var(--step--1); letter-spacing:0.32em; text-transform:uppercase;
}
.body-copy{max-inline-size:var(--measure); line-height:1.72}
.body-copy + .body-copy{margin-block-start:var(--sp-3)}

/* ---------- 4. BUTTONS ------------------------------------ */
.btn{
  display:inline-flex; align-items:center; gap:0.7em;
  background:var(--blue); color:var(--ecru);
  border:0; border-radius:2px; padding:1.05em 1.7em;
  font:500 var(--step--1)/1 var(--body-font);
  letter-spacing:0.13em; text-transform:uppercase; text-decoration:none;
  cursor:pointer; inline-size:max-content;
  transition:transform 160ms var(--ease), background-color 200ms ease;
}
.btn:active{transform:scale(0.97)}
.btn .arw{transition:transform 240ms var(--ease)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:#17304f}
  .btn:hover .arw{transform:translateX(4px)}
}
.btn-quiet{
  display:inline-flex; align-items:center; gap:0.7em;
  background:none; border:0; padding:0 0 0.45em;
  color:var(--ecru); border-block-end:1px solid rgb(244 239 230 / 0.45);
  font:500 var(--step--1)/1 var(--body-font);
  letter-spacing:0.13em; text-transform:uppercase; text-decoration:none;
  cursor:pointer;
  transition:border-color 240ms var(--ease), transform 160ms var(--ease);
}
.btn-quiet:active{transform:scale(0.98)}
@media (hover:hover) and (pointer:fine){ .btn-quiet:hover{border-color:var(--ecru)} }

/* ---------- 5. REVEALS (Phase 2: deliberately minimal) ----- */
[data-reveal]{
  opacity:0; transform:translateY(16px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay:var(--d, 0ms);
}
[data-reveal].is-in{opacity:1; transform:none}

/* ---------- 6. GRAIN -------------------------------------- */
.grain{position:relative; isolation:isolate}
.grain::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background-image:var(--grain); opacity:0.04;
  pointer-events:none;
}

/* ============================================================
   SECTION 1 — HERO  ("Title Card")
   ============================================================ */
.hero{position:relative; block-size:200vh; background:var(--ink)}
.hero-stage{position:sticky; inset-block-start:0; block-size:100vh; overflow:hidden}
.hero-media{position:absolute; inset:0}
.hero-media img,.hero-media video{inline-size:100%; block-size:100%; object-fit:cover}
.hero-video{position:absolute; inset:0; opacity:0; transition:opacity 700ms var(--ease)}
.hero-video.is-playing{opacity:1}
.hero-overlay{position:absolute; inset:0; background:rgb(var(--scrim) / 0.28)}
.hero-type{position:absolute; inset:0; color:var(--ecru)}
.hero .wordmark{
  position:absolute; inset-block-start:2.6rem; inset-inline-start:var(--gutter);
  color:rgb(244 239 230 / 0.78);
}
.hero-lead{
  position:absolute; inset-inline-start:var(--gutter);
  inset-block-end:clamp(3.4rem, 9vh, 6rem);
  max-inline-size:34ch;
}
.hero-rule{inline-size:44px; block-size:1px; background:var(--terracotta); margin-block-end:1.6rem}
.hero-titles{
  font-family:var(--display-font); font-weight:400;
  font-size:clamp(1.5rem, 2.2vw, 2rem); line-height:1.34; letter-spacing:0.004em;
  margin-block-end:2.2rem;
}
.hero-titles span{display:block}
.hero-titles span + span{color:rgb(244 239 230 / 0.7)}
.hero-closing{
  position:absolute; inset:0; display:grid; place-content:center;
  padding-inline:7vw; text-align:center; opacity:0; pointer-events:none;
}
.hero-progress{
  position:absolute; inset-inline:0; inset-block-end:0; block-size:1px;
  background:var(--terracotta); transform:scaleX(0); transform-origin:0 50%;
}
/* focus ring must be visible over film */
.hero :focus-visible,.cta-final :focus-visible{outline-color:var(--ecru)}

/* entrance — the only non-scroll motion in the hero */
.enter{opacity:0; transform:translateY(14px); animation:enter 900ms var(--ease) forwards}
@keyframes enter{to{opacity:1; transform:none}}
.d1{animation-delay:120ms} .d2{animation-delay:300ms} .d3{animation-delay:480ms}

/* ============================================================
   SECTION 2 — CATEGORIES
   Phase 2: normal flow, image above words. Phase 3 adds the pin.
   ============================================================ */
.panels{padding-block:var(--section-y)}
.panel + .panel{margin-block-start:var(--section-y)}
.panel-stage{display:grid; gap:clamp(2rem, 5vw, 3.4rem)}
.panel figure{margin:0; overflow:hidden}
.panel img{inline-size:100%; block-size:auto; object-fit:cover}
.panel-text{padding-inline:var(--gutter); max-inline-size:46ch}
.panel-text .label{display:block; margin-block-end:var(--sp-3)}
.panel-line{margin-block-end:var(--sp-3)}
.panel-story{line-height:1.72}

@media (min-width:769px){
  .panel-stage{
    grid-template-columns:repeat(12, 1fr);
    align-items:center;
    gap:clamp(2rem, 4vw, 4rem);
    padding-inline:var(--gutter);
  }
  .panel figure{grid-column:1 / span 7}
  .panel-text{grid-column:8 / span 5; padding-inline:0}
  /* alternate: image settles left / right / left */
  .panel[data-side="right"] figure{grid-column:6 / span 7; grid-row:1}
  .panel[data-side="right"] .panel-text{grid-column:1 / span 5; grid-row:1}
}

/* ============================================================
   SECTION 3 — ABOUT (typography only, no imagery by design)
   ============================================================ */
.statement{
  min-block-size:100svh; display:grid; place-content:center;
  padding:var(--section-y) var(--gutter); text-align:center;
}
.statement .display{max-inline-size:16ch}

.story{padding:var(--section-y) var(--gutter)}
.story-inner{max-inline-size:70ch; margin-inline:auto}
.timeline{position:relative; padding-inline-start:clamp(1.6rem, 4vw, 3.4rem)}
.timeline::before{
  content:""; position:absolute; inset-block:0.4em 0; inset-inline-start:0;
  inline-size:1px; background:var(--olive); opacity:0.55;
}
.timeline li + li{margin-block-start:var(--sp-5)}
.timeline li::before{
  content:""; position:absolute; inset-inline-start:0;
  inline-size:clamp(0.8rem, 2vw, 1.5rem); block-size:1px;
  background:var(--olive); opacity:0.55; margin-block-start:0.85em;
}
.tl-title{
  font-family:var(--display-font); font-weight:500;
  font-size:var(--step-2); line-height:1.2; letter-spacing:-0.005em;
  color:var(--olive-text); margin-block-end:var(--sp-2);
}
.who{padding:0 var(--gutter) var(--section-y)}
/* same indent as .timeline, so body copy aligns with body copy above it */
.who-inner{max-inline-size:70ch; margin-inline:auto; padding-inline-start:clamp(1.6rem, 4vw, 3.4rem)}
.who .label{display:block; margin-block-end:var(--sp-3)}

/* ============================================================
   SECTION 4 — HOW WE WORK
   ============================================================ */
.how{background:var(--sand); padding:var(--section-y) var(--gutter)}
.how-inner{max-inline-size:78ch; margin-inline:auto}
.how h2{margin-block-end:var(--sp-6)}
.steps li{display:grid; grid-template-columns:auto 1fr; gap:clamp(1.2rem, 3vw, 2.6rem); align-items:start}
.steps li + li{margin-block-start:var(--sp-5)}
.step-num{
  font-family:var(--display-font); font-weight:600;
  font-size:clamp(2.4rem, 6vw, 4.2rem); line-height:0.9;
  color:var(--olive);           /* fallback where text-stroke is unsupported */
}
@supports (-webkit-text-stroke: 1px currentColor){
  .step-num{color:transparent; -webkit-text-stroke:1px var(--olive)}
}
.step-title{
  font-family:var(--display-font); font-weight:500;
  font-size:var(--step-2); line-height:1.2; letter-spacing:-0.008em;
  margin-block-end:var(--sp-1);
}
.step-body{max-inline-size:52ch; line-height:1.7}

/* ============================================================
   SECTION 5 — CLOSING CTA
   Phase 2: single viewport, film plays. Phase 3 adds the pin.
   ============================================================ */
.cta-final{position:relative; background:var(--ink)}
.cta-stage{position:relative; block-size:100svh; overflow:hidden}
.cta-final .hero-media img,.cta-final .hero-media video{inline-size:100%; block-size:100%; object-fit:cover}
/* The closing frame is a bright sky. A flat scrim would either wash out the
   bouquet or leave the text unreadable, so the darkness is weighted to the
   lower third, where the type lives. */
.cta-overlay{
  position:absolute; inset:0;
  background:linear-gradient(to bottom,
    rgb(var(--scrim) / 0.10) 0%,
    rgb(var(--scrim) / 0.18) 42%,
    rgb(var(--scrim) / 0.62) 100%);
}
.cta-type{
  position:absolute; inset:0; color:var(--ecru);
  display:flex; flex-direction:column; justify-content:flex-end;
  align-items:center; gap:var(--sp-4);
  padding:0 var(--gutter) clamp(4rem, 14vh, 8rem); text-align:center;
}
.cta-type .display-2{max-inline-size:14ch}

/* ============================================================
   SECTION 6 — INQUIRY
   ============================================================ */
.inquiry{padding:var(--section-y) var(--gutter)}
.inquiry-inner{
  max-inline-size:88rem; margin-inline:auto;
  display:grid; gap:clamp(2.6rem, 6vw, 5rem);
}
.inquiry h2{margin-block-end:var(--sp-5)}
@media (min-width:861px){
  .inquiry-inner{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
}
.field{display:grid; gap:0.5rem; margin-block-end:var(--sp-3)}
.field label{
  font-size:var(--step--2); letter-spacing:0.16em; text-transform:uppercase;
  font-weight:500; color:var(--olive-text);
}
.field input,.field select,.field textarea{
  background:rgb(228 217 198 / 0.42);   /* sand wash — never white */
  border:0; border-block-end:1px solid rgb(33 29 25 / 0.28);
  border-radius:0; padding:0.8em 0.2em;
  font-size:var(--step-0); line-height:1.5;
  transition:border-color 200ms ease, background-color 200ms ease;
}
.field textarea{min-block-size:8rem; resize:vertical}
.field select{appearance:none; padding-inline-end:2em;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),
                   linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-size:5px 5px,5px 5px;
  background-position:calc(100% - 14px) calc(50% + 1px),calc(100% - 9px) calc(50% + 1px);
  background-repeat:no-repeat;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--blue); background:rgb(228 217 198 / 0.62);
}
.field-row{display:grid; gap:0 var(--sp-3)}
@media (min-width:561px){ .field-row{grid-template-columns:1fr 1fr} }
.err{
  font-size:var(--step--1); color:var(--terracotta-text);
  min-block-size:1.4em; line-height:1.4;
}
.err:empty{min-block-size:0}
[aria-invalid="true"]{border-block-end-color:var(--terracotta-text)}
.form-note{margin-block-start:var(--sp-3); font-size:var(--step--1); color:var(--olive-text)}
.form-status{margin-block-start:var(--sp-3); font-size:var(--step--1)}

.contacts a{color:var(--blue); text-decoration:none; border-block-end:1px solid rgb(31 58 95 / 0.32)}
@media (hover:hover) and (pointer:fine){ .contacts a:hover{border-block-end-color:var(--blue)} }
.contacts .label{display:block; margin-block-end:var(--sp-2)}
.contact-group + .contact-group{margin-block-start:var(--sp-4)}
.contact-group p + p{margin-block-start:0.35rem}

/* ============================================================
   SECTION 7 — FOOTER
   ============================================================ */
.site-footer{
  background:var(--ink); color:var(--ecru);
  padding:var(--section-y) var(--gutter) var(--sp-5);
}
.footer-inner{
  max-inline-size:88rem; margin-inline:auto;
  display:grid; gap:var(--sp-5);
}
@media (min-width:861px){
  .footer-inner{grid-template-columns:1fr auto; align-items:end}
}
.site-footer .wordmark{display:block; margin-block-end:var(--sp-3)}
.footer-tag{
  font-family:var(--display-font); font-size:var(--step-2);
  letter-spacing:-0.008em; color:rgb(244 239 230 / 0.82);
}
.site-footer a{color:var(--ecru); text-decoration:none; border-block-end:1px solid rgb(244 239 230 / 0.32)}
@media (hover:hover) and (pointer:fine){ .site-footer a:hover{border-block-end-color:var(--ecru)} }
.footer-meta{
  margin-block-start:var(--sp-5); padding-block-start:var(--sp-3);
  border-block-start:1px solid rgb(244 239 230 / 0.18);
  font-size:var(--step--1); color:rgb(244 239 230 / 0.62);
}
.site-footer .label{color:rgb(244 239 230 / 0.62)}
.site-footer :focus-visible{outline-color:var(--ecru)}

/* ============================================================
   STATIC MODE — ≤768px and prefers-reduced-motion
   No pinning, no film, everything readable at once.
   ============================================================ */
.hero[data-static]{block-size:auto}
.hero[data-static] .hero-stage{position:relative; block-size:auto; min-block-size:100svh}
.hero[data-static] .hero-overlay{block-size:100%; background:rgb(var(--scrim) / 0.52)}
.hero[data-static] .hero-type{
  position:relative; inset:auto; min-block-size:100svh;
  display:flex; flex-direction:column; justify-content:flex-end; gap:var(--sp-4);
  padding:6rem var(--gutter) 3.4rem;
}
.hero[data-static] .wordmark,
.hero[data-static] .hero-lead{position:static; max-inline-size:none}
.hero[data-static] .hero-closing{
  position:static; opacity:1; transform:none;
  display:block; padding-inline:0; text-align:start;
}
.hero[data-static] .hero-closing .display{font-size:clamp(1.7rem, 7vw, 3.4rem)}
.hero[data-static] .hero-progress{display:none}
.hero[data-static] .enter{opacity:1; transform:none; animation:none}

@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1; transform:none; transition:none}
  .enter{opacity:1; transform:none; animation:none}
  .hero-video{transition:none}
}