/* ==========================================================================
   Find your seat - Ivan & Maria, 5 September 2026
   --------------------------------------------------------------------------
   Palette and type are taken from ivantuallymaria.ca itself, sampled from
   the site's own PDF rather than approximated:

     forest    #223A2B   the ground - a true dark forest, not a tint
     ink       #EDF3E9   body text, cream
     ink-2     #AFC4A8   secondary text, dimmed cream
     gold      #D4AF37   every gold thing on the page is this ONE value:
                         headings, the eyebrow, the date line, rules, the
                         monogram. There used to be two golds (a heading
                         shade and a lighter "gilt" for hairlines) - on this
                         dark ground that split isn't needed, so it's gone.
     brick     #E2775C   the accent: numerals, the button, tablemate "you"
     sun       #F6A327   marks your table on the map and nothing else
     on-warm   #24140C   text set ON TOP of brick or sun fills (a button
                         label, the highlighted table's number) - cream text
                         would wash out on either, so this is a fixed dark
                         warm colour just for that job

   The exact red from the earlier draft (#782415) does not survive a true
   forest ground: it measures 1.2:1, below the 3:1 floor for large text and
   nowhere near the 4.5:1 floor for body text. It is lifted to the terracotta
   above, which holds 4.1:1+ everywhere it is used.

   Balsamiq Sans is the site's real typeface and is on Google Fonts, so this
   is the same face rather than a lookalike. Caveat stands in for Biro Script
   Plus, the site's handwriting font, which is Canva-only.
   ========================================================================== */

:root {
  --paper:   #223A2B;
  --paper-2: #2C4936;   /* raised cards */
  --paper-3: #38583F;   /* hovers, wells */
  --rule:    #47694E;
  --ink:     #EDF3E9;
  --ink-2:   #AFC4A8;   /* secondary text */
  --olive:   #D4AF37;   /* gold - var names kept so selectors stay put */
  --moss:    #D4AF37;   /* same gold, see comment above */
  --brick:   #E2775C;   /* terracotta - stands in for the red on this ground */
  --sun:     #F6A327;
  --on-warm: #24140C;   /* dark text for use ON a brick/sun fill */

  --shadow: 0 2px 4px rgba(0,0,0,.35), 0 16px 34px -18px rgba(0,0,0,.6);

  --wrap: 60rem;
  --pad: clamp(1.15rem, 4vw, 2rem);

  --sans: "Balsamiq Sans", ui-rounded, "Trebuchet MS", system-ui, sans-serif;
  --hand: Caveat, "Bradley Hand", cursive;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3 { font-weight: 400; margin: 0; }
p { margin: 0; }
img { max-width: 100%; height: auto; }
a { color: var(--brick); }

:focus-visible { outline: 2px solid var(--brick); outline-offset: 3px; border-radius: 2px; }

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

.skip {
  position: absolute; left: -9999px;
  background: var(--brick); color: var(--on-warm);
  padding: .7rem 1rem; font-weight: 700; text-decoration: none; z-index: 60;
}
.skip:focus { left: .5rem; top: .5rem; }

/* ------------------------------------------------------------- masthead */

.mast {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(1.75rem, 5vw, 3rem) var(--pad) clamp(1.35rem, 4vw, 2rem);
  text-align: center;
}

.mast-mark { width: clamp(4.25rem, 14vw, 6rem); }

.mast-eyebrow {
  margin-top: .8rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--moss);
  text-indent: .3em;
}

.mast-name {
  font-weight: 700;
  font-size: clamp(2.1rem, 8vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--olive);
  margin-top: .3rem;
}
.mast-name span { color: var(--moss); }

.mast-when {
  margin-top: .55rem;
  font-size: .84rem;
  color: var(--olive);
}

/* ----------------------------------------------------------------- tabs */

.views {
  position: sticky; top: 0; z-index: 30;
  background: var(--paper);
  border-block: 1px solid var(--rule);
}
.views-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  gap: clamp(.5rem, 4vw, 2rem);
  overflow-x: auto;
  scrollbar-width: none;
}
.views-inner::-webkit-scrollbar { display: none; }

.views-inner button {
  flex: 0 0 auto;
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--ink-2);
  font: 700 .8rem/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 1.05rem .3rem .85rem;
  cursor: pointer;
  white-space: nowrap;
}
.views-inner button:hover { color: var(--ink); }
.views-inner button[aria-selected="true"] { color: var(--brick); border-bottom-color: var(--brick); }

/* ---------------------------------------------------------------- panel */

main { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad) 4rem; }
.panel { padding-top: clamp(1.6rem, 5vw, 2.5rem); }
.panel[hidden] { display: none; }
.panel-note { color: var(--ink-2); font-size: .95rem; margin-bottom: 1.25rem; }

/* --------------------------------------------------------------- search */

.search-label {
  display: block;
  font-family: var(--hand);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--brick);
  margin-bottom: .35rem;
}

.search-row { display: flex; gap: .6rem; align-items: stretch; }

#q {
  flex: 1 1 auto;
  min-width: 0;
  background: #1B2F22;
  border: 2px solid var(--rule);
  border-radius: 6px;
  color: var(--ink);
  font: 400 1.25rem/1.2 var(--sans);
  padding: .9rem 1rem;
}
#q::placeholder { color: #7E9484; }
#q:focus { border-color: var(--brick); outline: none; }
#q::-webkit-search-cancel-button { display: none; }

.search-clear {
  flex: 0 0 auto;
  background: none;
  border: 2px solid var(--rule);
  border-radius: 6px;
  color: var(--ink-2);
  font: 700 .78rem/1 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 0 .95rem;
  cursor: pointer;
}
.search-clear:hover { border-color: var(--brick); color: var(--brick); }

.search-note { margin-top: .6rem; font-size: .85rem; color: var(--ink-2); }

.status { margin-top: 1.3rem; font-size: .95rem; color: var(--ink-2); min-height: 1.4em; }
.status:empty { display: none; }

/* ----------------------------------------------------------- place card */
/* A search result is a card, not a row: the number is the whole answer, so
   it gets the whole card. */

.card {
  margin-top: 1rem;
  background: var(--paper-2);
  border: 2px solid var(--rule);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.card-frame {
  position: relative;
  text-align: center;
  padding: clamp(1.75rem, 6vw, 2.5rem) 1.25rem clamp(1.5rem, 4vw, 2rem);
}

.card-mark {
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -52%;
  width: min(17rem, 76%);
  opacity: .09;
  pointer-events: none;
}

.card-who, .card-eyebrow, .card-num { position: relative; }

.card-who {
  font-weight: 700;
  font-size: clamp(1.3rem, 5vw, 1.7rem);
  line-height: 1.2;
  color: var(--olive);
}

.card-eyebrow {
  margin-top: .3rem;
  font-family: var(--hand);
  font-size: 1.4rem;
  color: var(--ink-2);
}

.card-num {
  font-weight: 700;
  color: var(--brick);
  font-size: clamp(5rem, 24vw, 8rem);
  line-height: .92;
  letter-spacing: -.02em;
  margin-top: .1rem;
}
.card-num span {
  display: block;
  font-family: var(--hand);
  font-weight: 700;
  font-size: .26em;
  line-height: 1;
  letter-spacing: 0;
  color: var(--olive);
  margin-bottom: -.06em;
}

.card-go {
  position: relative;
  margin-top: 1.35rem;
  appearance: none;
  background: var(--brick);
  color: var(--on-warm);
  border: 0;
  border-radius: 6px;
  font: 700 .82rem/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .95rem 1.5rem;
  cursor: pointer;
}
.card-go:hover { background: #C85F45; }

/* tablemates */

.mates { border-top: 2px solid var(--rule); padding: 1.3rem clamp(1rem, 4vw, 1.75rem) 1.5rem; }

.mates h3 {
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: .9rem;
}

.mates ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
@media (min-width: 34rem) { .mates ul { grid-template-columns: 1fr 1fr; gap: .8rem 1.75rem; } }

.hh { border-left: 3px solid var(--rule); padding-left: .8rem; }
.hh p { line-height: 1.45; }
.hh .you { color: var(--brick); font-weight: 700; }

/* ------------------------------------------------------- chooser / none */

.pick { margin-top: 1rem; display: grid; gap: .5rem; }

.pick button {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  text-align: left;
  background: var(--paper-2);
  border: 2px solid var(--rule);
  border-radius: 8px;
  color: var(--ink);
  font: 400 1.05rem/1.3 var(--sans);
  padding: .8rem 1rem;
  cursor: pointer;
}
.pick button:hover { border-color: var(--brick); background: var(--paper-3); }
.pick button b { font-weight: 700; color: var(--olive); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }

.none {
  margin-top: 1rem;
  border: 2px dashed var(--rule);
  border-radius: 10px;
  padding: 1.6rem 1.25rem;
  text-align: center;
}
.none h3 { font-weight: 700; font-size: 1.15rem; color: var(--olive); margin-bottom: .5rem; }
.none p { color: var(--ink-2); font-size: .95rem; }

/* ----------------------------------------------------------- all tables */

.all { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }

.tcard {
  background: var(--paper-2);
  border: 2px solid var(--rule);
  border-radius: 10px;
  padding: .9rem 1.1rem 1.1rem;
}
.tcard-h { border-bottom: 2px solid var(--rule); padding-bottom: .5rem; margin-bottom: .8rem; }
.tcard-n {
  appearance: none; background: none; border: 0; cursor: pointer; padding: 0;
  font: 700 2.6rem/1 var(--sans); color: var(--brick); letter-spacing: -.02em;
}
.tcard-n:hover { color: var(--olive); }
.tcard ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.tcard li { border-left: 3px solid var(--rule); padding-left: .7rem; font-size: .95rem; line-height: 1.4; }

/* ------------------------------------------------------------- the room */

.room {
  width: min(64rem, 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.room::backdrop { background: rgba(8,16,11,.7); }
.room:not([open]) { display: none; }

.room-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: .9rem var(--pad);
  border-bottom: 2px solid var(--rule);
}
.room-title { font-weight: 700; font-size: 1.1rem; color: var(--olive); }
.room-title b { font-weight: 700; color: var(--brick); }

.room-close {
  appearance: none; background: none; border: 2px solid var(--rule); border-radius: 6px;
  color: var(--ink); font-size: 1.4rem; line-height: 1;
  width: 2.4rem; height: 2.4rem; cursor: pointer;
}
.room-close:hover { border-color: var(--brick); color: var(--brick); }

.room-orient { padding: .85rem var(--pad) 0; font-size: .92rem; color: var(--ink-2); }

.room-scroll {
  flex: 1 1 auto; overflow: auto; padding: .85rem var(--pad);
  display: flex; align-items: center; -webkit-overflow-scrolling: touch;
}
.room-scroll svg { display: block; min-width: 42rem; width: 100%; height: auto; }

/* On a tall screen the plan would otherwise float in a band of empty paper.
   Trade some of that height for a bigger map. */
@media (min-height: 44rem) {
  .room-scroll svg { min-width: clamp(42rem, (100dvh - 17rem) * 1.658, 52rem); }
}

.room-key {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.1rem;
  padding: .8rem var(--pad) calc(.8rem + env(safe-area-inset-bottom));
  border-top: 2px solid var(--rule);
  font-size: .8rem; color: var(--ink-2);
}
.key { width: .85rem; height: .85rem; border-radius: 50%; display: inline-block; vertical-align: -.1em; margin-right: -.6rem; }
.key-you { background: var(--sun); border: 2px solid var(--brick); }
.key-other { border: 2px solid var(--moss); }
.key-spare { border: 2px dashed #4E7156; }

/* map internals */
.m-room  { fill: var(--paper-2); stroke: var(--olive); stroke-width: 4; }
.m-floor { fill: rgba(212,175,55,.14); stroke: var(--olive); stroke-width: 2; stroke-dasharray: 10 8; }
.m-stage { fill: rgba(226,119,92,.12); stroke: var(--olive); stroke-width: 2; }
.m-head  { fill: var(--paper-3); stroke: var(--olive); stroke-width: 2.5; }
.m-head-you { fill: var(--sun); stroke: var(--brick); stroke-width: 4; }
.m-t     { fill: var(--paper); stroke: var(--olive); stroke-width: 3; }
.m-t-spare { fill: none; stroke: #4E7156; stroke-width: 2.5; stroke-dasharray: 8 7; }
.m-t-you { fill: var(--sun); stroke: var(--brick); stroke-width: 5; }
.m-n     { fill: var(--ink); font: 700 44px var(--sans); text-anchor: middle; dominant-baseline: central; }
.m-n-spare { fill: #5F8368; }
.m-n-you { fill: var(--on-warm); }
.m-cap   { fill: var(--olive); font: 700 24px var(--sans); letter-spacing: 4px; text-anchor: middle; dominant-baseline: central; text-transform: uppercase; }
.m-head-n { fill: var(--ink); font: 700 30px var(--sans); text-anchor: middle; dominant-baseline: central; }
.m-cap-you { fill: var(--on-warm); }
.m-head-who { fill: var(--on-warm); font: 700 17px var(--sans); text-anchor: middle; dominant-baseline: central; }
.m-out   { fill: var(--ink-2); font: 400 20px var(--sans); }
.m-grid  { stroke: var(--brick); stroke-width: 1; opacity: .35; }
.m-grid-t{ fill: var(--brick); font: 400 16px var(--sans); opacity: .8; }

.m-halo { fill: none; stroke: var(--brick); stroke-width: 4; opacity: 0; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .m-halo { animation: halo 2.1s ease-out .15s 2; }
}
@keyframes halo {
  0%   { opacity: .7; scale: 1; }
  100% { opacity: 0;  scale: 2.1; }
}

/* --------------------------------------------------------------- footer */

.foot { text-align: center; padding: 2.25rem var(--pad) 3rem; border-top: 2px solid var(--rule); }
.foot-mark { width: 2.75rem; opacity: .75; }
.foot p { margin-top: .7rem; font-family: var(--hand); font-size: 1.35rem; color: var(--brick); }

/* ---------------------------------------------------------------- print */

@media print {
  .views, .search, .status, .card-go { display: none; }
  .card, .tcard { box-shadow: none; break-inside: avoid; }
  .all { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}