/* ---------------------------------------------------------------
   THE GIFT CARD
   Three cards, shared by the card's own page and by the preview on
   the buying page, so what someone sees while choosing is the very
   thing that gets made.

   The card is drawn 80em wide and everything inside is set in em, so
   the whole design scales from a single font-size — which is taken
   from the card's own width, never the window's.

   What the card does NOT say is the price. A card that shouts the
   amount tells the person exactly what was spent on them; the session
   is named instead, and the money stays on the buyer's receipt.
---------------------------------------------------------------- */

.cardwrap{ width:min(100%, 900px); container-type:inline-size; flex:0 0 auto; }
.card{
  width:100%; aspect-ratio:1.6/1; font-size:1.25cqw;
  position:relative; overflow:hidden; border-radius:1.1em;
  box-shadow:0 24px 60px rgba(38,37,31,.20);
}
/* for anything too old for container queries — the card is capped at 900px,
   so this lands on the same number down to a 940px window */
@supports not (font-size:1cqw){ .card{ font-size:min(1.25vw, 11.25px); } }

/* ---- what every card says ---- */
.card .mark{ width:19em; height:auto; display:block; }
.card .lead{ font-size:1.05em; letter-spacing:.32em; text-transform:uppercase; color:var(--muted); }
.card .name{
  font-family:var(--display); font-weight:300; font-size:4.6em; color:var(--ink);
  line-height:1.04; margin:.14em 0 .12em;
}
.card .for{ font-family:var(--script); font-size:2.1em; color:var(--gold-deep); line-height:1; }
.card .what{ font-family:var(--display); font-size:1.95em; color:var(--ink); letter-spacing:.02em; }
.card .msg{
  font-family:var(--display); font-style:italic; font-size:1.5em; color:var(--muted);
  line-height:1.55; max-width:32ch; margin-top:.85em;
}
.card .foot{
  display:flex; justify-content:space-between; align-items:flex-end; gap:1.6em;
  font-size:.82em; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.card .foot b{ font-weight:400; color:var(--ink); }
.card .reach{ text-align:right; line-height:1.9; }
/* a web address and a handle are read, not shouted */
.card .reach__u{ text-transform:none; letter-spacing:.1em; }

/* ---- one: plain, no photograph ---- */
.s-one{ background:var(--card); display:grid; grid-template-rows:auto 1fr auto;
        padding:3.2em 4.4em; text-align:center; }
.s-one .mark{ margin:0 auto; }
.s-one .mid{ display:flex; flex-direction:column; align-items:center; justify-content:center; }
.s-one .rule{ width:5em; height:1px; background:var(--gold); margin:1.3em 0; }

/* ---- two: the washing line, for a family or a mother ---- */
.s-two{ background:#fff; padding:2.2em; display:grid; grid-template-columns:1.02fr .98fr; gap:2.4em; }
.s-two .mat{ border-radius:.7em; overflow:hidden; background:var(--sand); }
.s-two .mat img{ width:100%; height:100%; object-fit:cover; object-position:50% 52%; display:block; }
.s-two .side{ display:grid; grid-template-rows:auto 1fr auto; padding:1em 1.2em 1em 0; }
.s-two .mid{ display:flex; flex-direction:column; justify-content:center; }
.s-two .name{ font-size:3.6em; }
.s-two .what{ font-size:1.02em; letter-spacing:.16em; text-transform:uppercase;
              color:var(--gold-deep); font-family:var(--sans); }
.s-two .msg{ font-size:1.4em; max-width:24ch; }
.s-two .foot{ border-top:1px solid var(--line); padding-top:.9em; }

/* ---- three: the shore, with the message given the room ---- */
.s-three{ background:#fff; position:relative; padding:3em 4em;
          display:grid; grid-template-rows:auto 1fr auto; }
.s-three .bg{ position:absolute; right:0; top:0; width:46%; height:100%;
              object-fit:cover; object-position:50% 50%; }
.s-three .fade{
  position:absolute; right:46%; top:0; width:24%; height:100%; z-index:1;
  background:linear-gradient(90deg, #fff 0%, rgba(255,255,255,.86) 45%, rgba(255,255,255,0) 100%);
}
.s-three > *:not(.bg):not(.fade){ position:relative; z-index:2; }
.s-three .mid{ display:flex; flex-direction:column; justify-content:center; max-width:23em; }
.s-three .msg{
  font-family:var(--display); font-style:italic; font-weight:300; font-size:2.9em;
  color:var(--ink); line-height:1.34; max-width:none; margin:0;
}
.s-three .sign{ font-family:var(--script); font-size:1.9em; color:var(--gold-deep); margin-top:.5em; }
.s-three .what{ font-size:.82em; letter-spacing:.2em; text-transform:uppercase;
                color:var(--ink); font-family:var(--sans); }
.s-three .foot{ max-width:29em; border-top:1px solid var(--line); padding-top:.9em; white-space:nowrap; }
.s-three .reach{ line-height:1.7; }

/* a card already spent, or out of time, says so across itself */
.stamp{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-11deg);
  font-family:var(--display); font-size:5em; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(140,60,32,.30); border:3px solid rgba(140,60,32,.26); padding:.14em .3em;
  white-space:nowrap; z-index:3;
}