/* ===================================================================
   LAYOUT — the six sections, element by element

   Every left/top/width/height below is the original's own coordinate
   on the 1366 x 768 artboard, divided by 13.66 (or 7.68) to become a
   percentage. Keeping them in one place makes the design easy to
   check against the source: x=291.6 becomes 21.35%, and so on.
   =================================================================== */

.stage{
  position:relative;width:100%;
  aspect-ratio:var(--art-w)/var(--art-h);
  container-type:inline-size;
  overflow:hidden;
}
/* everything on a stage is placed, never flowed */
.stage>*{position:absolute;margin:0}

/* the section grounds */
#home    {background:var(--cream)}
#story   {background:var(--maroon)}
#details {background:var(--cream-2)}
#schedule{background:var(--maroon)}
#faqs    {background:var(--sand)}
#contact {background:var(--maroon)}

/* ---------------------------------------------------------------
   The frame that repeats on every section: four corner frets, and
   on all but Home and Contact a magnolia spray top-right and
   bottom-left. Only the ink changes from section to section.
   --------------------------------------------------------------- */
.fret{width:15.33%;height:27.27%}
.fret.tl{left:.83%;top:1.47%}
.fret.tr{top:1.47%}
.fret.bl{left:.83%}
.fret.br{}

/* Home and Contact hang the frets a touch wider than the inner four
   sections do, and Home sits them slightly higher. */
#home .fret.tr,#home .fret.br{left:83.53%}
#home .fret.bl,#home .fret.br{top:70.52%}
#contact .fret.tr,#contact .fret.br{left:83.87%}
#contact .fret.bl,#contact .fret.br{top:70.52%}
.framed .fret.tr,.framed .fret.br{left:83.87%}
.framed .fret.bl,.framed .fret.br{top:70.52%}

/* the sprays are set 20% transparent in the original, which is what
   keeps them behind the copy rather than competing with it */
.mag{opacity:.8}
.mag.tr{left:85.42%;top:1.72%;width:16.90%;height:30.99%}
.mag.bl{left:-.10%;top:60.74%;width:17.19%;height:31.52%}

/* per-section ink for the frame — the artwork carries the colour, so
   the section picks the file rather than a tint */
#home .fret{background-image:url('../assets/fret-maroon.png')}
#story .fret,
#schedule .fret,
#contact .fret{background-image:url('../assets/fret-blush.png')}
#details .fret,
#faqs .fret{background-image:url('../assets/fret-red.png')}

#story .mag,
#schedule .mag{background-image:url('../assets/magnolia-gold.png')}
#details .mag,
#faqs .mag{background-image:url('../assets/magnolia-red.png')}

/* ===============================================================
   1 · HOME
   The couple's portrait fills the right half; the title, rings and
   RSVP stack down the left.
   =============================================================== */
#home .happiness{
  left:21.35%;top:23.40%;width:11.41%;height:21.59%;
}
#home .rings{
  left:12.58%;top:63.15%;width:25.69%;height:9.14%;
}
/* the portrait is wrapped in a <picture>, so that is the element the
   stage places; the image just fills it */
#home picture{
  left:50%;top:4.36%;width:46.08%;height:91.91%;
  display:block;opacity:.8;   /* 20% transparent in the original */
}
#home .portrait{
  width:100%;height:100%;
  object-fit:contain;object-position:center;
}
#home .mark    {left:19.05%;top:50.26%;width:16.00%;color:var(--maroon)}
#home .mark-sub{left:19.79%;top:56.88%;width:14.52%;color:var(--maroon)}
#home .rsvp    {left:19.79%;top:74.36%;width:14.52%;color:var(--maroon)}

/* ===============================================================
   2 · OUR STORY
   =============================================================== */
#story .story-head{
  left:34.69%;top:20.48%;width:32.86%;
  font-size:var(--s-story);--lh:1;text-align:center;color:var(--white);
}
#story .story-copy{
  left:32.84%;top:57.67%;width:36.55%;
  --lh:1.5;text-align:center;color:var(--white);
}

/* ===============================================================
   3 · DETAILS
   A headline and lead across the top, then three loose groups —
   venue, reception, dress code — each an icon over a title over a
   paragraph. The groups are not boxes in the original and are not
   boxes here; every part keeps its own coordinate.
   =============================================================== */
#details{color:var(--maroon)}
#details .sec-head{
  left:31.53%;top:9.14%;width:38.16%;
  font-size:var(--s-section);--lh:1;text-align:center;
}
#details .sec-lead{left:29.66%;top:21.64%;width:40.70%;text-align:center}

#details .i-venue    {left:19.17%;top:34.01%;width:10.97%;height:21.93%}
#details .i-reception{left:45.64%;top:41.55%;width: 8.73%;height:19.90%}
#details .i-dress    {left:70.34%;top:35.86%;width: 6.26%;height:17.15%}

/* venue */
#details .c1-title{left:14.58%;top:58.23%;width:20.15%}
#details .c1-place{left:14.58%;top:62.88%;width:20.15%}
#details .c1-copy {left:13.84%;top:68.85%;width:21.63%}
/* reception */
#details .c2-title{left:39.93%;top:65.59%;width:20.15%}
#details .c2-copy {left:39.08%;top:72.29%;width:21.84%}
/* dress code */
#details .c3-title{left:64.50%;top:58.53%;width:19.29%}
#details .c3-copy {left:64.50%;top:64.47%;width:19.29%}

/* ===============================================================
   4 · SCHEDULE
   Four moments on a loose two-by-two, a lantern top-left and a fan
   bottom-right, and a closing note along the foot.
   =============================================================== */
#schedule{color:var(--sand-2)}
#schedule .sched-head{
  left:30.74%;top:8.06%;width:38.52%;
  font-size:var(--s-section);--lh:.73;text-align:center;color:var(--sand);
}
#schedule .d-lantern{left:12.10%;top:10.00%;width:6.82%;height:17.83%}
#schedule .d-fan    {left:82.25%;top:73.19%;width:12.13%;height:16.81%}

/* 3:30 — tea ceremony */
#schedule .s1-time{left:19.25%;top:28.88%;width:27.23%}
#schedule .s1-name{left:19.25%;top:33.15%;width:27.23%}
#schedule .s1-note{left:17.94%;top:39.99%;width:31.33%}
/* 7:00 — dinner reception */
#schedule .s2-time{left:55.67%;top:28.88%;width:27.19%}
#schedule .s2-name{left:55.67%;top:33.02%;width:27.19%}
#schedule .s2-note{left:54.96%;top:39.09%;width:28.59%}
/* 5:30 — canapes & photos */
#schedule .s3-time{left:19.99%;top:54.96%;width:27.23%}
#schedule .s3-name{left:19.99%;top:59.23%;width:27.23%}
#schedule .s3-note{left:18.68%;top:64.73%;width:29.85%}
/* 9:00 — music */
#schedule .s4-time{left:54.65%;top:54.96%;width:29.22%}
#schedule .s4-name{left:54.65%;top:59.22%;width:29.22%}
#schedule .s4-note{left:56.44%;top:64.73%;width:25.64%}

#schedule .sched-foot{left:22.99%;top:90.08%;width:54.03%;color:var(--sand)}

/* ===============================================================
   5 · FAQs
   Four question-and-answer pairs, ranged left. The <dl> is
   display:contents so the pairs stay semantic while each part keeps
   the coordinate it was drawn at.
   =============================================================== */
#faqs{color:var(--maroon)}
#faqs .faq-head{
  left:13.78%;top:13.63%;width:44.85%;
  font-size:var(--s-faq);--lh:1;
}
/* the <dl> itself draws no box, so the pairs are placed against the
   stage directly — they are not ".stage > *", so they need saying */
#faqs .faq-list{display:contents}
#faqs .faq-q,#faqs .faq-a{position:absolute;margin-inline:0;margin-bottom:0}
#faqs .q1{left:14.52%;top:28.76%;width:31.00%}
#faqs .a1{left:14.52%;top:34.28%;width:53.29%}
#faqs .q2{left:14.52%;top:48.16%;width:33.23%}
#faqs .a2{left:14.52%;top:53.92%;width:49.34%}
#faqs .q3{left:14.40%;top:64.17%;width:28.70%}
#faqs .a3{left:14.40%;top:70.36%;width:55.29%}
#faqs .q4{left:14.52%;top:75.18%;width:28.70%}
#faqs .a4{left:14.52%;top:81.39%;width:52.83%}

/* ===============================================================
   6 · CONTACT
   The double-happiness roundel keeps its own red; the sprig laid
   over it is painted in the ground colour, so it reads as a notch
   cut out of the seal — which is how the original builds it.
   =============================================================== */
#contact{color:var(--sand)}
#contact .seal {left:38.46%;top:33.37%;width:23.08%;height:41.05%}
#contact .sprig{left:43.37%;top:53.89%;width: 6.63%;height:20.52%}
#contact .rsvp-head{
  left:13.78%;top:13.67%;width:72.45%;
  font-size:var(--s-rsvp);--lh:1.4;text-align:center;
}
#contact .rsvp-foot{
  left:22.99%;top:86.98%;width:54.03%;
  font-size:var(--t-body);--lh:1.09;text-align:center;
}

/* ===================================================================
   NARROW SCREENS
   Below 900px the artboard is abandoned: a 1366-wide stage squeezed
   into a phone would put body copy at about five pixels. The stage
   becomes an ordinary column, the placed coordinates are dropped,
   and type switches from cqw to a viewport scale. The frame stays —
   the frets and sprays are what make the page feel like the design —
   but they move to the edges of the column.
   =================================================================== */
@media (max-width:900px){
  .stage{
    aspect-ratio:auto;
    display:flex;flex-direction:column;align-items:center;
    /* the block padding is the frame's room: the corner art lives in
       it, so it has to clear the artwork rather than merely look airy */
    padding:clamp(86px,23vw,120px) clamp(22px,6vw,44px);
    gap:clamp(14px,3.4vw,22px);
    text-align:center;
  }
  .stage>*{position:static;width:auto !important;max-width:100%}

  /* The frame is pinned back to the corners of the section.
     These have to out-rank the artboard placement above, and two of
     those rules are written against #home and #contact — an id beats
     any number of classes, so the same ids are named here. Without
     this the phone keeps the desktop coordinates and the lower frets
     land in the middle of the section. */
  :is(#home,#story,#details,#schedule,#faqs,#contact) :is(.fret,.mag){
    position:absolute;height:auto;
  }
  :is(#home,#story,#details,#schedule,#faqs,#contact) .fret{
    width:clamp(64px,17vw,120px) !important;aspect-ratio:1;
  }
  :is(#home,#story,#details,#schedule,#faqs,#contact) .fret.tl{left:8px;right:auto;top:10px;bottom:auto}
  :is(#home,#story,#details,#schedule,#faqs,#contact) .fret.tr{right:8px;left:auto;top:10px;bottom:auto}
  :is(#home,#story,#details,#schedule,#faqs,#contact) .fret.bl{left:8px;right:auto;bottom:10px;top:auto}
  :is(#home,#story,#details,#schedule,#faqs,#contact) .fret.br{right:8px;left:auto;bottom:10px;top:auto}

  /* The sprays are a wide-canvas flourish. Kept at phone width they
     sit squarely under the section headline, so they are pulled in to
     a corner accent and faded to a watermark that the copy can cross
     without becoming hard to read. */
  :is(#home,#story,#details,#schedule,#faqs,#contact) .mag{
    width:clamp(58px,15vw,104px) !important;
    aspect-ratio:2333/2400;opacity:.45;
  }
  :is(#home,#story,#details,#schedule,#faqs,#contact) .mag.tr{
    right:0;left:auto;top:4px;bottom:auto;
  }
  :is(#home,#story,#details,#schedule,#faqs,#contact) .mag.bl{
    left:0;right:auto;bottom:4px;top:auto;
  }

  /* type: the artboard sizes re-expressed against the viewport */
  :root{
    --t-hero:clamp(30px,8.6vw,46px);
    --t-lg:clamp(21px,5.6vw,30px);
    --t-title:clamp(18px,4.9vw,26px);
    --t-place:clamp(17px,4.7vw,25px);
    --t-lead:clamp(15px,4.1vw,21px);
    --t-body:clamp(14px,3.7vw,18px);
    --t-foot:clamp(13px,3.4vw,17px);
    --s-story:clamp(38px,11vw,62px);
    --s-section:clamp(38px,11vw,62px);
    --s-faq:clamp(32px,9vw,52px);
    --s-rsvp:clamp(42px,12.5vw,72px);
  }

  /* the portrait leads the home section, the words follow */
  #home{padding-top:clamp(92px,25vw,132px)}
  #home picture{order:-2;width:min(78%,340px) !important;height:auto}
  #home .portrait{width:100%;height:auto}
  #home .happiness{order:-1;width:clamp(64px,17vw,104px) !important;aspect-ratio:359.5/382.6;height:auto}
  /* keep the original's reading order down the column: the roundel,
     the title, then the rings, then the link */
  #home .mark{order:0;margin-top:.1em}
  #home .mark-sub{order:0}
  #home .rings{
    order:1;width:min(66%,290px) !important;
    aspect-ratio:2400/479;height:auto;margin-top:.2em;
  }
  #home .rsvp{order:2;margin-top:.35em}

  #details .i-venue,#details .i-reception,#details .i-dress{
    width:clamp(56px,15vw,92px) !important;height:auto;margin-top:clamp(16px,4vw,26px);
  }
  #details .i-venue    {aspect-ratio:2139/2400}
  #details .i-reception{aspect-ratio:656/840}
  #details .i-dress    {aspect-ratio:407/627}

  #schedule .d-lantern,#schedule .d-fan{display:none}
  /* on a phone the four moments read in the order they happen */
  #schedule .s1-time,#schedule .s1-name,#schedule .s1-note{order:1}
  #schedule .s3-time,#schedule .s3-name,#schedule .s3-note{order:2}
  #schedule .s2-time,#schedule .s2-name,#schedule .s2-note{order:3}
  #schedule .s4-time,#schedule .s4-name,#schedule .s4-note{order:4}
  #schedule .sched-foot{order:5;margin-top:clamp(18px,5vw,30px)}
  #schedule .sched-name{margin-top:.15em}
  #schedule .sched-note{margin-bottom:clamp(12px,3.4vw,20px)}
  #schedule .sched-head{--lh:1}

  #faqs{text-align:left;align-items:flex-start}
  #faqs .faq-q,#faqs .faq-a{position:static;width:auto !important}
  #faqs .faq-q{margin-top:clamp(16px,4.4vw,26px)}
  #faqs .faq-a{margin-top:.4em}

  #contact .rsvp-head{order:-2;--lh:1.2}
  #contact .seal{order:-1;width:min(58%,240px) !important;height:auto}
  #contact .sprig{display:none}
  #contact .rsvp-foot{margin-top:clamp(18px,5vw,30px)}

  #story .story-head{--lh:1.05}
}

/* a hair more room on the smallest phones */
@media (max-width:380px){
  .stage{padding-inline:16px}
}