/* ===================================================================
   COMPONENTS — the pieces each section is assembled from
   =================================================================== */

/* ---------------------------------------------------------------
   ORNAMENTS

   Canva ships this line art as "recolourable" sprites — a tile sheet
   whose last tile is a coverage mask, tinted at render time. That
   maps neatly onto a CSS mask painted with background-colour, and
   that is how this was built first, but a CSS mask is subject to
   cross-origin rules and every file:// document is its own opaque
   origin: opened straight off disk, every ornament silently
   disappeared. Ordinary background images carry no such restriction,
   so the ink is baked into the artwork instead and the page works
   the same whether it is served or double-clicked. The only cost is
   one file per colour, and only the fret and the magnolia need more
   than one.
   --------------------------------------------------------------- */
.orn{
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:center;
  pointer-events:none;
}
.fx{transform:scaleX(-1)}
.fy{transform:scaleY(-1)}
.fxy{transform:scale(-1,-1)}

/* the fret and the magnolia change ink from section to section, so
   their artwork is chosen in layout.css alongside the section */
.rings      {background-image:url('../assets/rings.png')}
.happiness  {background-image:url('../assets/happiness.svg')}
.i-venue    {background-image:url('../assets/icon-venue.png')}
.i-reception{background-image:url('../assets/icon-reception.svg')}
.i-dress    {background-image:url('../assets/icon-dress.svg')}
.d-fan      {background-image:url('../assets/deco-fan.svg')}
.d-lantern  {background-image:url('../assets/deco-lantern.svg')}
.sprig      {background-image:url('../assets/sprig.png')}

/* ---------------------------------------------------------------
   TEXT BLOCKS

   Two things have to be right for a block to land where the original
   puts it.

   Leading. Where the design names a line height it is used as given;
   where it names none the original falls back to 1.4, not to the 1.5
   that looks like a reasonable guess. The difference is only 2px a
   line at body size, but over the five lines of the venue paragraph
   it walks the last line 8px down the page.

   The first line. Canva measures a text block from the top of the
   first line's em box, not the top of its line box, so the half-
   leading CSS puts above the first line is leading the original does
   not have. Every block therefore pulls itself up by that half
   -leading — (1.2em - leading) / 2, the 1.2 being the em box Canva
   reports for both faces at every size on this page. Blocks set
   tighter than 1.2 get pushed down instead, which is the same sum.
   --------------------------------------------------------------- */
.mark,.mark-sub,.rsvp,
.story-head,.story-copy,
.sec-head,.sec-lead,
.card-title,.card-place,.card-copy,
.sched-head,.sched-time,.sched-name,.sched-note,.sched-foot,
.faq-head,.faq-q,.faq-a,
.rsvp-head,.rsvp-foot{
  --lh:1.4;
  line-height:calc(var(--lh) * 1em);
  margin:calc((1.2 - var(--lh)) * .5em) 0 0;
}

.script{font-family:var(--script);font-weight:400;letter-spacing:0}
.lead{font-size:var(--t-lead)}
.body{font-size:var(--t-body)}

/* Home's stacked title: WEDDING over RECEPTION */
.mark{
  --lh:1.86;
  font-size:var(--t-hero);font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;text-align:center;
}
.mark-sub{
  --lh:1.86;
  font-size:var(--t-lead);font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;text-align:center;
}

/* the one link on the page */
.rsvp{
  --lh:1.86;
  font-size:var(--t-lead);font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;text-align:center;
  text-decoration:underline;text-underline-offset:.18em;
  transition:opacity .25s var(--ease-soft);
}
.rsvp:hover{opacity:.68}

/* ---------------------------------------------------------------
   DETAIL CARDS — icon above a title above a paragraph
   The original draws each as a loose group rather than a box, so the
   parts keep their own coordinates instead of being packed together.
   --------------------------------------------------------------- */
.card-title{font-size:var(--t-title);font-weight:700;text-align:center}
.card-place{font-size:var(--t-place);font-weight:700;text-align:center}
.card-copy {font-size:var(--t-body);text-align:center}
/* the venue name inside the paragraph points at the map */
.card-copy a{text-decoration:underline;text-underline-offset:.15em}

/* ---------------------------------------------------------------
   SCHEDULE — time, event name, note
   --------------------------------------------------------------- */
.sched-time{--lh:1.5;font-size:var(--t-body);letter-spacing:.015em;text-align:center}
.sched-name{--lh:1.09;font-size:var(--t-lg);font-weight:700;text-align:center}
.sched-note{--lh:1.5;font-size:var(--t-body);letter-spacing:.015em;text-align:center}
.sched-foot{--lh:1.09;font-size:var(--t-foot);text-align:center}

/* ---------------------------------------------------------------
   FAQ — question and answer, both ranged left
   --------------------------------------------------------------- */
.faq-q{font-size:var(--t-title);font-weight:700}
.faq-a{font-size:var(--t-body)}
.faq-a a{text-decoration:underline;text-underline-offset:.15em}