/* ===================================================================
   BASE — fonts, design tokens, reset, shared typography
   Sueyi & William · 28 February 2027 · Sydney

   Type sizes are taken from the original Canva design measured at a
   1440px viewport, then written as clamp(phone, vw, design) so the
   page reflows on small screens instead of shrinking to nothing.
   =================================================================== */

/* ---------- FONTS (from the original design) ---------- */
@font-face{font-family:'Madelyn Rough';src:url('../fonts/Madelyn.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Amsterdam One';src:url('../fonts/AmsterdamOne.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Amsterdam One Slant';src:url('../fonts/AmsterdamOneSlant.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Copperplate Gothic';src:url('../fonts/Copperplate29BC.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Copperplate Gothic';src:url('../fonts/Copperplate30BC.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  /* palette — sampled straight off the original */
  --brown:#897663;    /* bands, headings, body copy      */
  --sage:#b4b49f;     /* "and", the invitation line      */
  --ink:#7b6a58;      /* card titles: the brown, bolder  */
  --ice:#e5eaf3;      /* artwork on the brown bands      */
  --paper:#fff;
  --line:#e7e0d6;     /* hairlines                       */

  /* the scroll vines wear the same ink as the corner sprays */
  --vine:#b8ada1;   /* baked into the floral corner artwork as well */
  --vine-soft:#c8bdb1;

  --maxw:1260px;   /* 1140px of content at 1440, starting at x=150 */
  --gutter:clamp(20px,5vw,60px);
  --track:.015em;   /* the original sets body copy at normal tracking */
  --nav-h:clamp(54px,6.4vw,72px);
  --corner-in:clamp(0px,1.1vw,16px);   /* the sprays sit just off the edge */
  --corner-in-l:clamp(0px,2.6vw,37px);

  /* type scale — max values are the design's own px at 1440 */
  --t-script-lg:clamp(38px,5.6vw,80px);   /* section + band titles   */
  --t-script-md:clamp(32px,4.6vw,66px);   /* the FAQ heading         */
  --t-script-xl:clamp(40px,7.6vw,109px);  /* the RSVP headline       */
  --t-lead:clamp(13.5px,1.53vw,22px);     /* section sub, band body  */
  --t-body:clamp(13.5px,1.4vw,20px);      /* card + answer copy      */
  --t-title:clamp(16px,1.95vw,28px);      /* card titles             */
  --t-place:clamp(15px,1.85vw,26.5px);    /* venue names             */
  --t-invite:clamp(13px,1.58vw,22.5px);   /* the hero invitation     */
  --t-fine:clamp(10px,1.05vw,14px);       /* notes, footer meta      */
  --t-q:clamp(17px,1.95vw,28px);          /* FAQ questions           */
  --t-a:clamp(13.5px,1.4vw,20px);         /* FAQ answers             */
  --t-time:clamp(12.5px,1.2vw,17px);      /* schedule times          */
  --t-event:clamp(18px,2.22vw,32px);      /* schedule event names    */
  --t-note:clamp(12.5px,1.2vw,17px);      /* schedule event copy     */
  --t-foot:clamp(13px,1.3vw,18.7px);      /* the schedule footnote   */

  /* motion */
  --ease-soft:cubic-bezier(.22,.61,.36,1);
  --ease-spring:cubic-bezier(.34,1.4,.5,1);
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  margin:0;background:var(--paper);color:var(--brown);
  font-family:'Copperplate Gothic',Copperplate,'Copperplate Gothic Light',Optima,Palatino,serif;
  letter-spacing:var(--track);line-height:1.45;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
picture{display:contents}
p{margin:0}
ol,ul{margin:0;padding:0;list-style:none}
[hidden]{display:none!important}
button{font:inherit;letter-spacing:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:#efe6dc;color:var(--brown)}

/* ---------- SHARED TYPE ----------
   Copperplate is a small-caps face: the design leans on that for every
   run of body copy, which is why nothing here is set in sentence case. */
.script{font-family:'Madelyn Rough',cursive;font-weight:400;letter-spacing:0;line-height:1.1}
.caps-inline{text-transform:uppercase}

/* ---------- LAYOUT HELPERS ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);position:relative;z-index:1}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- FOCUS ---------- */
:focus-visible{outline:2px solid var(--sage);outline-offset:4px;border-radius:2px}
.band :focus-visible,.rsvp :focus-visible{outline-color:var(--ice)}

/* ---------------------------------------------------------------
   FLORAL CORNERS
   The original frames most sections with a line-art spray in two
   opposite corners. Same two drawings throughout, flipped into place.
   --------------------------------------------------------------- */
.corner{
  position:absolute;z-index:0;pointer-events:none;user-select:none;
  width:clamp(130px,25.3vw,364px);height:auto;
}
/* The two asymmetric sprays are crops from one continuous generated
   illustration. They must keep the same width and inset so every flower,
   leaf and stem joins cleanly across adjacent section boundaries. */
.corner--tl{top:0;left:var(--corner-in-l)}
.corner--tr{top:0;right:var(--corner-in);transform:scaleX(-1)}
.corner--bl{bottom:0;left:var(--corner-in-l)}
.corner--br{bottom:0;right:var(--corner-in);transform:scaleX(-1)}

/* ---------- PRINT ---------- */
@media print{
  .band,.rsvp{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .nav,.menu,.vines,.to-top,.count__actions{display:none!important}
}