/* The invitation: the matchbook (css/strike.css) above, the details and responses below. */

@font-face { font-family: "Young Serif"; src: url("../assets/fonts/young-serif.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Libre Baskerville"; src: url("../assets/fonts/libre-baskerville.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --cream-2: rgba(233, 221, 207, .62);
  --cream-3: rgba(233, 221, 207, .28);
  --display: "Young Serif", Georgia, serif;
  --text: "Libre Baskerville", Georgia, serif;
  --gutter: max(16px, env(safe-area-inset-left));
  --u: min(1vw, .56svh); /* layout unit: scales with the smaller of width and height */
}

/* One screen, no scrolling: the matchbook is the title, centred in the space above the responses
   (js/strike.js, data-strike-above), which sit at the bottom. */
html, body { overscroll-behavior: none; }
body {
  font-family: var(--text);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
a { color: inherit; }
:focus-visible { outline: 1px solid var(--cream); outline-offset: 4px; }

/* Darken only under the type; the matchbook keeps its light. The last 6% is solid, so the
   matchbook can rise that far (js/strike.js, frameBook) without showing the render's edge. */
.scrim {
  position: fixed; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(5,4,3,.35), rgba(5,4,3,0) 16%, rgba(5,4,3,0) 60%, rgba(5,4,3,.62) 74%, rgba(5,4,3,.9) 88%, rgb(5,4,3) 94%);
}
/* The render waits for the script to frame it, so it doesn't jump into place. */
.still { transition: opacity .25s ease; }
body:not(.is-framed) .still { opacity: 0; }
.hint { z-index: 1; }
/* The music control only exists once there is music. */
body:not(.is-playing) [data-reveal] { display: none; }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The details and responses, pinned to the bottom of the screen. */
.card {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 0 var(--gutter) max(24px, env(safe-area-inset-bottom));
  touch-action: manipulation;
}

/* Two pairs, when and where: tight inside each, a clear break between, and a wider one again
   before the buttons. */
.details p { line-height: 1.3; }
.date {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(15px, calc(var(--u) * 4.4), 20px); letter-spacing: .16em;
  font-variant-numeric: lining-nums;
}
.hour { font-style: italic; font-size: clamp(14px, calc(var(--u) * 3.9), 17px); color: var(--cream-2); margin-top: 3px; }
.venue {
  margin-top: calc(var(--u) * 6.5);
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  font-size: clamp(10px, calc(var(--u) * 2.9), 12px); letter-spacing: .26em; text-transform: uppercase;
}
.venue__addr { font-style: italic; font-size: clamp(13px, calc(var(--u) * 3.6), 15px); letter-spacing: 0; text-transform: none; color: var(--cream-2); }
.venue__addr i { font-style: normal; margin: 0 .6em; opacity: .7; }
.venue__addr a { text-decoration: none; border-bottom: 1px solid var(--cream-3); padding-bottom: 1px; }

/* The reply, as words above the buttons it belongs with. */
.reply { margin-top: calc(var(--u) * 8); font-style: italic; font-size: 14px; color: var(--cream-2); }
.reply:empty { display: none; }

.actions { display: flex; gap: 10px; margin-top: calc(var(--u) * 8); width: min(100%, 360px); }
.reply:not(:empty) + .actions { margin-top: 12px; }
.btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 16px;
  border: 1px solid var(--cream-3); border-radius: 2px;
  font-family: var(--display); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  text-decoration: none;
  transition: background-color .3s, border-color .3s, color .3s;
}
.btn:hover { border-color: var(--cream); }
.btn--primary { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.btn--primary:hover { background: #f4ece2; }
/* Replied: the filled button moves to what's next. Attending, that's the calendar; either way,
   changing the reply is the quiet one. Declined, there's nothing to add to a calendar. */
body[data-reply] .btn--primary[data-rsvp] { background: none; color: inherit; border-color: var(--cream-3); }
body[data-reply] .btn--primary[data-rsvp]:hover { border-color: var(--cream); }
body[data-reply="yes"] [data-calendar] { order: -1; background: var(--cream); color: var(--ink); border-color: var(--cream); }
body[data-reply="no"] [data-calendar] { display: none; }

/* Short phones: the same groups, packed closer, so the matchbook and its hint keep their room. */
@media (max-height: 620px) {
  .card { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .venue { margin-top: 14px; gap: 3px; }
  .actions, .reply { margin-top: 14px; }
  .reply:not(:empty) + .actions { margin-top: 8px; }
  .btn { min-height: 44px; }
}

/* The keyboard strike button shows on focus; keep it clear of the links at the bottom. */
.sr { top: max(18px, env(safe-area-inset-top)); bottom: auto; }

/* The restaurant's own script, in place of its name set in type. */
.venue__mark {
  display: block; width: clamp(132px, calc(var(--u) * 41), 178px); aspect-ratio: 440 / 82; margin: 0 auto 2px;
  background: var(--cream);
  -webkit-mask: url("../assets/img/mister-charles.png") center / contain no-repeat;
  mask: url("../assets/img/mister-charles.png") center / contain no-repeat;
}

/* RSVP (js/rsvp.js): the scene flies in through the matchbook's frame to the reply card. */
.window-scene { position: fixed; inset: 0; transform-origin: 0 0; }
.window-hole { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.window-hole polygon { fill: #000; opacity: 0; }
.window-view { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; background: #000; pointer-events: none; display: none; }
.window-view img { position: absolute; max-width: none; }
.window-view.is-flat { position: fixed; z-index: 5; } /* landed: out of the warp, see js/rsvp.js */
body.is-rsvp .card, body.is-rsvp .hint { pointer-events: none; }

.rsvp { position: fixed; inset: 0; z-index: 6; opacity: 0; transition: opacity .35s ease; }
.rsvp.is-in { opacity: 1; }
.rsvp__marks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rsvp__marks path { fill: none; stroke: #4a1418; stroke-linecap: round; stroke-linejoin: round; opacity: .92; }
/* Each reply line on the card is the button: invisible, the card's own print is its face. */
.rsvp__reply {
  position: absolute; background: none; border: 0; border-radius: 6px; padding: 0;
  color: transparent; font-size: 1px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.rsvp__reply:focus-visible { outline: 1px solid rgba(74, 20, 24, .5); outline-offset: 2px; }
.rsvp__note {
  position: absolute; left: var(--gutter); right: var(--gutter); top: calc(var(--below) + 22px);
  text-align: center; font-style: italic; font-size: 15px; color: var(--cream);
}
.rsvp__back {
  position: absolute; left: 50%; bottom: max(28px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  font: italic 13px/1 var(--text); color: var(--cream-2); background: none; border: 0; cursor: pointer;
  border-bottom: 1px solid var(--cream-3); padding: 0 0 2px; white-space: nowrap;
}
.rsvp:focus { outline: none; }