/* ==========================================================================
   TOKENS
   ========================================================================== */
:root{
  --cream:      #f5eee0;
  --paper:      #efe2c7;
  --paper-2:    #e8d8b8;
  --oxblood:    #7a0000;
  --oxblood-2:  #a31c1c;
  --oxblood-deep:#4a0000;
  --ink:        #1c1510;
  --taupe:      #5c4d46;
  --gold:       #b8892e;
  --gold-bright:#d8ab4f;
  --silver:     #a8a49a;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-script:  'Parisienne', cursive;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --container: 640px;
  --tab-h: 52px;
}

@media (min-width: 900px){
  :root{ --container: 760px; }
}

/* ==========================================================================
   RESET
   ========================================================================== */
*,*::before,*::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.5;
}
img{ max-width:100%; display:block; }
a{ color: inherit; }
ul{ list-style:none; margin:0; padding:0; }
dl,dd{ margin:0; }
h1,h2,h3{ margin:0; }
button{ font: inherit; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

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

/* ==========================================================================
   GRAIN OVERLAY
   ========================================================================== */
.grain{
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   CARD-INDEX (custom mask-suit corner index, used on every "card" section)
   ========================================================================== */
.card-index{
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--oxblood);
  line-height: 1;
  z-index: 3;
}
.card-index span{ font-size: 1.05rem; }
.card-index__pip{ width: 13px; height: 13px; color: var(--oxblood); }
.card-index--tl{ top: 16px; left: 16px; }
.card-index--br{ bottom: 16px; right: 16px; transform: rotate(180deg); }

/* ==========================================================================
   STICKY TABS
   ========================================================================== */
.tabs{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  height: var(--tab-h);
  background: rgba(245,238,224,0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(122,0,0,0.18);
  transform: translateY(-100%);
  transition: transform .4s ease;
}
.tabs.is-visible{ transform: translateY(0); }

.tabs__link{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--taupe);
  padding: 0 6px;
  position: relative;
  transition: color .25s ease;
}
.tabs__link::after{
  content:'';
  position: absolute;
  left: 20%; right: 20%; bottom: 0;
  height: 2px;
  background: var(--oxblood);
  transform: scaleX(0);
  transition: transform .25s ease;
}
.tabs__link.is-active{ color: var(--oxblood); }
.tabs__link.is-active::after{ transform: scaleX(1); }

@media (min-width: 560px){
  .tabs__link{ font-size: 0.72rem; letter-spacing: 0.08em; }
}

/* ==========================================================================
   HERO: staged as one giant playing card
   ========================================================================== */
.hero{
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 32px 20px 56px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(122,0,0,0.06) 0%, transparent 60%),
    radial-gradient(90% 60% at 50% 100%, rgba(122,0,0,0.05) 0%, transparent 60%),
    var(--cream);
  /* To use a real photo once supplied: uncomment the next line and add assets/hero.jpg */
  /* background-image: linear-gradient(180deg, rgba(245,238,224,.55), rgba(245,238,224,.9)), url('assets/hero.jpg'); background-size: cover; background-position: center; */
}

.hero__frame{
  position: absolute;
  inset: 14px;
  border: 1.5px solid var(--oxblood);
  border-radius: 18px;
  pointer-events: none;
  z-index: 1;
}
.hero__corner{
  position: absolute;
  width: 46px; height: 46px;
  color: var(--oxblood);
  opacity: 0.75;
  z-index: 1;
  pointer-events: none;
}
.hero__corner--tl{ top: 28px; left: 28px; }
.hero__corner--tr{ top: 28px; right: 28px; transform: scaleX(-1); }
.hero__corner--bl{ bottom: 28px; left: 28px; transform: scaleY(-1); }
.hero__corner--br{ bottom: 28px; right: 28px; transform: scale(-1,-1); }

.hero .card-index--tl{ top: 36px; left: 36px; }
.hero .card-index--br{ bottom: 36px; right: 36px; }

.hero__vignette{
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 60% at 50% 42%, transparent 40%, rgba(28,21,16,0.05) 100%);
  pointer-events: none;
}

.hero__particles{ position: absolute; inset:0; pointer-events:none; }
.particle{
  position: absolute;
  bottom: -10px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--oxblood);
  opacity: 0.4;
  animation: rise linear infinite;
}
@keyframes rise{
  from{ transform: translateY(0) translateX(0); opacity: 0; }
  10%{ opacity: 0.45; }
  90%{ opacity: 0.25; }
  to{ transform: translateY(-110vh) translateX(var(--drift,20px)); opacity: 0; }
}

.hero__content{
  position: relative;
  z-index: 2;
  max-width: 720px;
  text-align: center;
}

.stamp{
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oxblood);
  border: 1px solid rgba(122,0,0,0.4);
  padding: 7px 16px;
  border-radius: 999px;
  margin: 0 0 22px;
}

.mask-art{
  position: relative;
  width: min(88vw, 520px);
  margin: 0 auto 6px;
  opacity: 0;
  transform: scale(0.9);
  animation: maskIn 1.4s cubic-bezier(.2,.7,.2,1) 0.15s forwards, maskFloat 8s ease-in-out 1.6s infinite;
}
.mask-art::before{
  content:'';
  position: absolute;
  inset: -6% -4%;
  background: radial-gradient(closest-side, rgba(163,28,28,0.16), transparent);
  animation: glowPulse 5s ease-in-out infinite;
  pointer-events: none;
}
.mask-art img{ position: relative; width: 100%; height: auto; }
@keyframes maskIn{
  to{ opacity: 1; transform: scale(1); }
}
@keyframes maskFloat{
  0%,100%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-6px) scale(1.005); }
}
@keyframes glowPulse{
  0%,100%{ opacity: 0.7; }
  50%{ opacity: 1; }
}

.hero__title{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 14vw, 5.4rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 10px 0 2px;
}
.hero__title sup{ font-size: 0.4em; top: -0.6em; color: var(--oxblood); }
.hero__title .num{ color: var(--oxblood); }

.hero__script{
  font-family: var(--font-script);
  font-size: clamp(3.6rem, 18vw, 7.6rem);
  line-height: 0.9;
  color: var(--oxblood);
  margin: 0;
}

.hero__divider{
  width: 120px;
  height: 18px;
  margin: 12px auto 14px;
  color: var(--oxblood);
  opacity: 0.8;
}

.hero__subtitle{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(1.05rem, 5vw, 1.6rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 30px;
}

.hero__sub{
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1rem, 4vw, 1.2rem);
  color: var(--taupe);
  letter-spacing: 0.01em;
  margin: 0 0 44px;
}

.scroll-cue{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oxblood);
  animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(6px); }
}

/* ==========================================================================
   SECTIONS (shared)
   ========================================================================== */
.section{
  position: relative;
  padding: 88px 20px;
  max-width: var(--container);
  margin: 0 auto;
}
.section__eyebrow{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oxblood);
  text-align: center;
  margin: 0 0 10px;
}
.section__title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 6vw, 2.6rem);
  text-align: center;
  color: var(--ink);
  margin: 0 0 12px;
}
.section__intro{
  text-align: center;
  color: var(--taupe);
  max-width: 40ch;
  margin: 0 auto 40px;
  font-size: 0.95rem;
}

/* alternate paper tint band behind the case + wifi cards for gentle layering */
.section--briefing{ background: var(--paper); border-radius: 28px; margin: 0 auto; }

/* ==========================================================================
   CASE FILE / FOLDER
   ========================================================================== */
#case{ padding-top: 72px; }

.folder{
  position: relative;
  background: linear-gradient(180deg, #fbf6ea, var(--paper));
  color: var(--ink);
  border: 1.5px solid var(--oxblood);
  border-radius: 16px;
  padding: 44px 26px 36px;
  transform: rotate(-0.6deg);
  box-shadow: 0 30px 60px -30px rgba(28,21,16,0.35);
  overflow: hidden;
}
.folder::before{
  content:'CONFIDENTIAL';
  position: absolute;
  right: -40px; top: 38%;
  font-family: var(--font-display);
  font-size: 2.6rem;
  letter-spacing: 0.08em;
  color: var(--oxblood);
  opacity: 0.06;
  transform: rotate(-14deg);
  white-space: nowrap;
  pointer-events: none;
}
.folder__eyebrow{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oxblood);
  text-align: center;
  margin: 0 0 6px;
}
.folder__title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 6vw, 2.1rem);
  text-align: center;
  margin: 0 0 26px;
}

.dossier{
  display: grid;
  gap: 16px;
  padding: 0 0 30px;
  border-bottom: 1px dashed rgba(122,0,0,0.25);
  margin-bottom: 26px;
}
.dossier__row{
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 12px;
  align-items: baseline;
}
.dossier__row dt{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oxblood);
}
.dossier__row dd{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
}
.dossier__note{
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--taupe);
}

.countdown{ text-align: center; margin-bottom: 30px; }
.countdown__label{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--taupe);
  margin: 0 0 14px;
}
.countdown__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  max-width: 360px;
  margin: 0 auto;
}
.countdown__unit{
  background: var(--cream);
  border: 1px solid var(--oxblood);
  border-radius: 8px;
  padding: 10px 4px 8px;
}
.countdown__unit span{
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 5vw, 1.7rem);
  color: var(--oxblood);
  font-variant-numeric: tabular-nums;
}
.countdown__unit small{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--taupe);
}

.rsvp{ text-align: center; }
.seal{
  display: inline-flex;
  width: 108px; height: 108px;
  border-radius: 50%;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 30%, var(--oxblood-2), var(--oxblood) 65%, var(--oxblood-deep) 100%);
  box-shadow:
    0 10px 22px -8px rgba(122,0,0,0.45),
    inset 0 0 0 3px rgba(184,137,46,0.65),
    inset 0 -6px 10px rgba(0,0,0,0.3);
  transition: transform .18s ease, box-shadow .18s ease;
}
.seal:hover{ transform: translateY(-2px) scale(1.03); }
.seal:active{ transform: scale(0.94); }
.seal__ring{
  width: 88px; height: 88px;
  border-radius: 50%;
  border: 1.5px dashed rgba(216,171,79,0.75);
  display: flex; align-items: center; justify-content: center;
}
.seal__text{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  color: var(--cream);
}
.rsvp__caption{
  margin: 16px 0 0;
  font-size: 0.8rem;
  color: var(--taupe);
  font-style: italic;
}

/* ==========================================================================
   DEAL: scroll-dealt card transition between sections.
   Two face-down cards sail in from the page edges, a face-up card lands
   between them and flips to signpost the section below. Pure decor: the
   markup is aria-hidden, every word on it is repeated as a real heading.
   ========================================================================== */
.deal{
  position: relative;
  z-index: 4;
  padding: 30px 0;
  margin: -66px 0;
  /* Clip the incoming flight path without putting overflow on <body>. Clipped
     at the padding box deliberately: an overflow-clip-margin here would let
     the off-screen cards widen the document and scroll the whole page
     sideways. The 30px padding above is what keeps the settled cards' drop
     shadows inside the clip. */
  overflow: hidden;
  overflow: clip;
}

/* The opening divider sits directly under a 100svh hero. Left with the
   negative top margin it would peek above the fold and deal itself on load,
   so it starts flush with the hero instead and is scrolled to like the rest. */
main > .deal:first-child{ margin-top: 0; }

.deal__rule{
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(360px, 66vw);
  height: 1px;
  margin-left: calc(min(360px, 66vw) / -2);
  background: linear-gradient(90deg,
    transparent,
    rgba(122,0,0,0.32) 22%,
    rgba(184,137,46,0.55) 50%,
    rgba(122,0,0,0.32) 78%,
    transparent);
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform .9s cubic-bezier(.2,.8,.2,1);
}
.deal.is-dealt .deal__rule{ transform: scaleX(1); }

.deal__cards{
  position: relative;
  height: 158px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.deal__card{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 104px;
  height: 146px;
  margin: -73px 0 0 -52px;
  perspective: 900px;
  transform: var(--from);
  opacity: 0;
  transition: transform 1.05s cubic-bezier(.16,.84,.24,1), opacity .5s ease;
  transition-delay: var(--delay, 0ms);
}
.deal.is-dealt .deal__card{
  transform: var(--to);
  opacity: 1;
}

/* Shown already-dealt, with no motion: used for whatever is on screen at load
   (restored scroll position, a #hash deep link, a bfcache restore). */
.deal.is-static .deal__card,
.deal.is-static .deal__rule,
.deal.is-static .flipper{
  transition: none;
}

/* flight paths in, resting places out */
.deal__card--left{
  --from: translate3d(-62vw,-30px,0) rotate(-46deg);
  --to:   translate3d(-72px,8px,0) rotate(-14deg);
  --delay: 0ms;
  z-index: 1;
}
.deal__card--right{
  --from: translate3d(62vw,-30px,0) rotate(46deg);
  --to:   translate3d(72px,8px,0) rotate(14deg);
  --delay: 110ms;
  z-index: 2;
}
.deal__card--face{
  --from: translate3d(0,-52px,0) rotate(10deg) scale(0.86);
  --to:   translate3d(0,-6px,0) rotate(-2deg) scale(1.04);
  --delay: 300ms;
  z-index: 3;
}

.cardback{
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 8px;
  box-shadow: 0 16px 28px -14px rgba(28,21,16,0.55);
}

/* --- the flip --- */
.flipper{
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateY(180deg);
  transition: transform 1s cubic-bezier(.3,.9,.25,1);
  transition-delay: 700ms;
}
.deal.is-dealt .flipper{ transform: rotateY(0deg); }

.flipper__front,
.flipper__back{
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.flipper__back{ transform: rotateY(180deg); }

/* --- the face-up card --- */
.facecard{
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: linear-gradient(170deg, #fdfaf2, var(--paper));
  border: 1.5px solid var(--oxblood);
  border-radius: 8px;
  box-shadow: 0 20px 34px -14px rgba(28,21,16,0.55);
  overflow: hidden;
}
.facecard::after{
  content:'';
  position: absolute;
  inset: 4px;
  border: 0.5px solid rgba(184,137,46,0.6);
  border-radius: 5px;
  pointer-events: none;
}

.facecard__index{
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.6rem;
  line-height: 1;
  color: var(--oxblood);
}
.facecard__index svg{ width: 8px; height: 8px; color: var(--oxblood); }
.facecard__index--tl{ top: 9px; left: 9px; }
.facecard__index--br{ bottom: 9px; right: 9px; transform: rotate(180deg); }

.facecard__rank{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.05rem;
  line-height: 1;
  color: var(--oxblood);
}
.facecard__pip{
  width: 19px;
  height: 19px;
  color: var(--oxblood);
  margin: 1px 0 5px;
}
.facecard__label{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.5rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--taupe);
  text-align: center;
  padding: 0 8px;
  line-height: 1.25;
}

@media (max-width: 560px){
  .deal{ margin: -58px 0; }
  .deal__cards{ height: 128px; }
  .deal__card{
    width: 80px;
    height: 112px;
    margin: -56px 0 0 -40px;
  }
  .deal__card--left{  --to: translate3d(-54px,6px,0) rotate(-14deg); }
  .deal__card--right{ --to: translate3d(54px,6px,0) rotate(14deg); }
  .facecard__rank{ font-size: 1.6rem; }
  .facecard__pip{ width: 15px; height: 15px; margin: 1px 0 4px; }
  .facecard__label{ font-size: 0.44rem; letter-spacing: 0.09em; padding: 0 5px; }
  .facecard__index{ font-size: 0.52rem; }
  .facecard__index svg{ width: 7px; height: 7px; }
  .facecard__index--tl{ top: 7px; left: 7px; }
  .facecard__index--br{ bottom: 7px; right: 7px; }
}

/* Reduced motion: the cards are already dealt, nothing flies or flips. */
@media (prefers-reduced-motion: reduce){
  .deal__card{ transform: var(--to); opacity: 1; }
  .flipper{ transform: rotateY(0deg); }
  .deal__rule{ transform: scaleX(1); }
}

/* ==========================================================================
   BRIEFING / EVIDENCE CARDS
   ========================================================================== */
.evidence{
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px){
  .evidence{ grid-template-columns: 1fr 1fr; }
}

.evidence__card{
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 210px;
  background: #fbf6ea;
  border: 1px solid rgba(122,0,0,0.3);
  border-radius: 10px;
  padding: 26px 20px 22px;
}
.evidence__card::before{
  content:'';
  position: absolute;
  top: -8px; left: 24px;
  width: 46px; height: 16px;
  background: linear-gradient(100deg, rgba(184,137,46,0.55), rgba(184,137,46,0.28));
  transform: rotate(-3deg);
  opacity: 0.85;
}
.evidence__card--warn{
  border-color: var(--oxblood);
  background: linear-gradient(180deg, #fbf6ea, #f3e3e0);
}
.evidence__icon{
  width: 30px; height: 30px;
  color: var(--oxblood);
  margin-bottom: 14px;
}
.evidence__card--warn .evidence__icon{ color: var(--oxblood); }
.evidence__card h3{
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--ink);
}
.evidence__card p{
  margin: 0;
  font-size: 0.92rem;
  color: var(--taupe);
  line-height: 1.55;
}
.evidence__card .evidence__quip{
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1rem;
  color: var(--oxblood);
}

/* ==========================================================================
   RULES OF MURDER
   ========================================================================== */
.rulebook{
  position: relative;
  background: linear-gradient(180deg, #fbf6ea, var(--paper));
  border: 1.5px solid var(--oxblood);
  border-radius: 16px;
  padding: 58px 22px 34px;
  box-shadow: 0 30px 60px -30px rgba(28,21,16,0.35);
}
.rules{
  list-style: none;
  margin: 0;
  padding: 0;
}
.rule{
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  padding: 20px 0;
  border-bottom: 1px dashed rgba(122,0,0,0.25);
}
.rule:first-child{ padding-top: 0; }
.rule:last-child{ border-bottom: 0; padding-bottom: 0; }
.rule__num{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
  color: var(--oxblood);
  font-variant-numeric: lining-nums;
}
.rule h3{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink);
  margin: 2px 0 6px;
}
.rule p{
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--taupe);
}
.rule q{ font-style: italic; color: var(--oxblood); }
.rule__outcomes{
  margin-top: 10px;
  display: grid;
  gap: 6px;
}
.rule__outcomes li{
  position: relative;
  padding-left: 18px;
  font-size: 0.92rem;
  color: var(--taupe);
}
.rule__outcomes li::before{
  content: '';
  position: absolute;
  left: 2px; top: 0.55em;
  width: 7px; height: 7px;
  background: var(--oxblood);
  transform: rotate(45deg);
}
.rule__outcomes strong{ color: var(--ink); }

@media (min-width: 560px){
  .rulebook{ padding: 62px 40px 38px; }
  .rule{ grid-template-columns: 68px 1fr; }
  .rule__num{ font-size: 2.4rem; }
}

/* ==========================================================================
   Q&A
   ========================================================================== */
.qa{
  position: relative;
  max-width: 520px;
  margin: 0 auto;
  background: linear-gradient(160deg, #fbf6ea, var(--paper));
  border: 1.5px solid var(--oxblood);
  border-radius: 16px;
  padding: 58px 22px 28px;
  box-shadow: 0 30px 60px -30px rgba(28,21,16,0.35);
}
.qa__label{
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin-bottom: 8px;
}
.qa__input{
  display: block;
  width: 100%;
  resize: vertical;
  min-height: 92px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 1rem; /* 16px+ stops iOS zooming in on focus */
  line-height: 1.45;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid rgba(122,0,0,0.35);
  border-radius: 8px;
}
.qa__input:focus{ outline: none; border-color: var(--oxblood); box-shadow: 0 0 0 3px rgba(122,0,0,0.12); }
.qa__send{
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 13px 16px;
  border: 1px solid var(--oxblood);
  border-radius: 8px;
  background: var(--oxblood);
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease;
}
.qa__send:hover{ background: var(--oxblood-2); }
.qa__note{
  margin: 10px 0 0;
  text-align: center;
  font-size: 0.72rem;
  color: var(--taupe);
}

.qa__answers{
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px dashed rgba(122,0,0,0.3);
}
.qa__heading{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  text-align: center;
  color: var(--ink);
  margin: 0 0 14px;
}
.qa__item{
  border: 1px solid rgba(122,0,0,0.25);
  border-radius: 8px;
  background: #fbf6ea;
  margin-bottom: 10px;
}
.qa__item summary{
  cursor: pointer;
  list-style: none;
  padding: 13px 40px 13px 14px;
  position: relative;
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--ink);
}
.qa__item summary::-webkit-details-marker{ display: none; }
.qa__item summary::after{
  content: '+';
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--oxblood);
}
.qa__item[open] summary::after{ content: '\2212'; }
.qa__item p{
  margin: 0;
  padding: 0 14px 14px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--taupe);
}
.qa__empty{
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--taupe);
}
.qa__answers:has(.qa__item) .qa__empty{ display: none; }

/* ==========================================================================
   MAP CARD
   ========================================================================== */
.mapcard{
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  background: linear-gradient(160deg, #fbf6ea, var(--paper));
  border: 1.5px solid var(--oxblood);
  border-radius: 16px;
  padding: 44px 16px 20px;
  box-shadow: 0 30px 60px -30px rgba(28,21,16,0.35);
}

.mapcard__frame{
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(122,0,0,0.35);
  aspect-ratio: 4 / 3;
}
.mapcard__frame iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* desaturate the raw map so the color-blend tint below can recolor it cleanly */
  filter: grayscale(1) brightness(0.92) contrast(1.2);
}
.mapcard__tint{
  position: absolute;
  inset: 0;
  background: var(--oxblood);
  mix-blend-mode: color;
  pointer-events: none;
}

.mapcard__footer{
  margin-top: 16px;
  text-align: center;
}
.mapcard__footer p{
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--ink);
}
.mapcard__directions{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  border: 1px solid var(--oxblood);
  border-radius: 999px;
  color: var(--oxblood);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background .2s ease;
}
.mapcard__directions:hover{ background: rgba(122,0,0,0.08); }

/* ==========================================================================
   WIFI ID CARD
   ========================================================================== */
.idcard{
  position: relative;
  max-width: 380px;
  margin: 0 auto;
  background: linear-gradient(160deg, #fbf6ea, var(--paper));
  border: 1.5px solid var(--oxblood);
  border-radius: 14px;
  padding: 46px 20px 20px;
  box-shadow: 0 30px 60px -30px rgba(28,21,16,0.35);
}
.idcard__agency{
  text-align: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--oxblood);
  border-bottom: 1px dashed rgba(122,0,0,0.3);
  padding-bottom: 12px;
  margin: 0 0 16px;
}
.idcard__body{
  display: flex;
  gap: 18px;
  align-items: center;
}
.idcard__qr{
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  background: #fff;
  padding: 8px;
  border: 1px solid rgba(122,0,0,0.25);
  border-radius: 8px;
  width: 96px; height: 96px;
  display: block;
  cursor: zoom-in;
  transition: transform .2s ease, box-shadow .2s ease;
}
.idcard__qr:hover,
.idcard__qr:focus-visible{
  transform: scale(1.04);
  box-shadow: 0 6px 18px -8px rgba(28,21,16,0.5);
}
.idcard__qr img{ width: 100%; height: 100%; display: block; }
.idcard__fields p{
  margin: 0 0 8px;
  font-size: 0.92rem;
}
.idcard__fields span{
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--taupe);
}
.idcard__fields strong{
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--oxblood);
  letter-spacing: 0.02em;
  word-break: break-word;
}
.idcard__hint{
  margin: 16px 0 0;
  font-family: var(--font-body);
  font-size: 0.68rem;
  line-height: 1.45;
  color: var(--taupe);
  text-align: center;
}
.idcard__actions{
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.idcard__btn{
  flex: 1 1 0;
  appearance: none;
  -webkit-appearance: none;
  padding: 12px 8px;
  line-height: 1.3;
  border: 1px solid var(--oxblood);
  background: transparent;
  color: var(--oxblood);
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.idcard__btn:hover{ background: rgba(122,0,0,0.08); }
.idcard__btn--primary{
  background: var(--oxblood);
  color: var(--cream);
}
.idcard__btn--primary:hover{ background: var(--oxblood-2); }
.idcard__btn.is-done{
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

/* ==========================================================================
   ENLARGED QR
   ========================================================================== */
.qrfull[hidden]{ display: none; }
.qrfull{
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(28,21,16,0.82);
}
.qrfull__panel{
  background: #fff;
  border-radius: 16px;
  padding: 22px;
  text-align: center;
  max-width: 380px;
  width: 100%;
}
.qrfull__panel img{
  display: block;
  width: 100%;
  height: auto;
  max-width: 320px;
  margin: 0 auto;
}
.qrfull__ssid{
  margin: 14px 0 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: var(--oxblood);
  word-break: break-word;
}
.qrfull__hint{
  margin: 4px 0 0;
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: var(--taupe);
}
.qrfull__close{
  appearance: none;
  -webkit-appearance: none;
  margin-top: 16px;
  padding: 10px 26px;
  border: 1px solid var(--oxblood);
  background: transparent;
  color: var(--oxblood);
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{
  text-align: center;
  padding: 40px 20px 60px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--taupe);
}
.footer__credit{
  margin: 18px 0 0;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silver);
}
.footer__credit a{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(184,137,46,0.45);
  padding-bottom: 1px;
  transition: color .2s ease, border-color .2s ease;
}
.footer__credit a:hover,
.footer__credit a:focus-visible{
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.reveal{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-in{
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print{
  .grain, .tabs, .hero, #case, #find, .deal, #briefing, #rules, #qa, .footer,
  .idcard__actions, .idcard__hint, .qrfull{ display: none !important; }
  body{ background: #fff; color:#000; }
  .section--wifi{ padding: 0; max-width: 100%; }
  .idcard{
    border: 2px solid #000;
    background: #fff;
    color:#000;
    box-shadow:none;
    max-width: 420px;
    margin: 40px auto;
  }
  .idcard__top, .idcard__fields span{ color:#333; }
  .idcard__fields strong{ color:#000; }
  .section__eyebrow, .section__title, .section__intro{ color:#000; }
}