/* ===================================================================
   BASE — fonts, design tokens, reset, shared typography
   Sueyi & William · Kuala Lumpur reception

   The original is a six-page Canva design drawn on a 1366 x 768
   artboard, every element absolutely placed. Rather than re-invent
   that layout, each section here is a "stage" of the same aspect
   ratio and the children keep the original coordinates, expressed as
   percentages of the artboard. Type is sized in cqw against the same
   stage, so a section scales as one piece at any width — exactly the
   way Canva scales it — and the line breaks stay where they were
   drawn. Below --bp the stage is abandoned for a normal stacked flow.
   =================================================================== */

/* ---------- FONTS (the two faces the original uses) ---------- */
@font-face{
  font-family:'Copperplate Gothic 29BC';
  src:url('../fonts/Copperplate29BC.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Copperplate Gothic 29BC';
  src:url('../fonts/Copperplate29BC-Bold.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Madelyn Rough';
  src:url('../fonts/MadelynRough.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  /* ---- palette, sampled straight off the original ---- */
  --cream:#fff6ef;        /* Home ground                          */
  --cream-2:#fef5ee;      /* Details ground                       */
  --sand:#f1dfd2;         /* FAQ ground; light type on maroon     */
  --sand-2:#f8ece2;       /* Schedule body type                   */
  --blush:#fadac2;        /* the fret border on maroon grounds    */
  --maroon:#701818;       /* the dark ground, and Home's ink      */
  --maroon-deep:#390707;  /* rings, Details icons                 */
  --red:#9b0e0e;          /* fret + magnolia on Details / FAQ     */
  --red-2:#890f10;        /* Home's double-happiness roundel      */
  --gold:#d89a3e;         /* magnolia on the maroon grounds       */
  --white:#fff;

  /* ---- the artboard ---- */
  --art-w:1366;
  --art-h:768;

  /* ---- faces ---- */
  --cop:'Copperplate Gothic 29BC','Copperplate Gothic Light','Copperplate',
        'Optima',Georgia,serif;
  --script:'Madelyn Rough','Segoe Script','Brush Script MT',cursive;

  /* ---- type scale ----
     Every value is the original's px at 1366 divided by 13.66, so
     1cqw of the stage == 1% of the artboard width.

     Copperplate renders about 1.2% wider here than in the original,
     which walks the last line of a long paragraph a few pixels down.
     Scaling it back was tried and rejected: at 0.9875 the leading
     matched almost exactly, but the Our Story paragraph then fitted
     into five lines where the original takes six. Line breaks are
     more visible than a couple of pixels of leading, so the sizes
     are left at the design's own values. */
  --t-hero:3.123cqw;      /* 42.67px  "WEDDING"                   */
  --t-lg:2.343cqw;        /* 32px     schedule event names        */
  --t-title:2.050cqw;     /* 28px     card titles, FAQ questions  */
  --t-place:1.952cqw;     /* 26.67px  the venue name              */
  --t-lead:1.757cqw;      /* 24px     leads, RSVP, Our Story body */
  --t-body:1.464cqw;      /* 20px     body copy, schedule times   */
  --t-foot:1.367cqw;      /* 18.67px  the schedule footnote       */

  /* Madelyn Rough comes out about 2% narrower here than it does in
     the original render at the same declared size — measured off two
     single-line headings, at 80px and at 106.67px. The factor brings
     the script back onto the original's widths, which is what keeps
     the Our Story headline breaking after "close" rather than after
     "close to". Copperplate needs no such help and gets none. */
  --script-fit:1.02;

  --s-story:calc(6.052cqw * var(--script-fit));   /* 82.67px  Our Story  */
  --s-section:calc(5.857cqw * var(--script-fit)); /* 80px     About/Sched*/
  --s-faq:calc(4.685cqw * var(--script-fit));     /* 64px     FAQ        */
  --s-rsvp:calc(7.809cqw * var(--script-fit));    /* 106.67px closing    */

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

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--maroon);color:var(--maroon);
  font-family:var(--cop);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%}
p{margin:0}
h1,h2,h3{margin:0;font-weight:400;font-size:inherit}
a{color:inherit}

/* Copperplate is a caps face: its lowercase glyphs are small capitals,
   which is what gives the original its two-tier look. The copy is
   therefore reproduced with the author's own casing and never folded
   to uppercase, except where the design explicitly asks for it. */
.u{text-transform:uppercase}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--cream);color:var(--maroon);
  padding:.7em 1.1em;font-size:14px;letter-spacing:.05em;
}
.skip:focus{left:8px;top:8px}

:focus-visible{outline:2px solid currentColor;outline-offset:3px}