/* ============================================================
   Philly Blood on the Clocktower
   Every texture, cutting and letterform on this page is a layer
   lifted out of the community's own banner artwork (1.svg).
   ============================================================ */

:root {
  --ink:        #2a1a12;
  --ink-soft:   #5b4433;
  --ink-faint:  #8a705a;
  --paper:      #e9dfc4;
  --paper-hi:   #f3ead2;

  --wine:       #571531;   /* the title lettering */
  --wine-lt:    #7b1e45;
  --blood:      #a71b21;   /* the splatter */
  --blood-dk:   #891e19;
  --rose:       #cd8483;

  --wood-dk:    #241510;
  --brass:      #a3803f;

  --shadow-page: 0 2px 4px rgba(0,0,0,.35), 0 26px 60px -12px rgba(0,0,0,.65);
  --measure: 1140px;
  --header-h: 62px;
  --ease: cubic-bezier(.2, .7, .3, 1);
}

@media (min-width: 900px) { :root { --header-h: 76px; } }

/* ── base ─────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: "EB Garamond", Georgia, serif;
  font-size: clamp(1.02rem, .96rem + .3vw, 1.18rem);
  line-height: 1.68;
  color: var(--ink);
  background-color: var(--wood-dk);
  background-image:
    linear-gradient(rgba(20,10,6,.44), rgba(20,10,6,.44)),
    url("assets/wood-tile.jpg");
  background-size: auto, 2000px auto;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: "Grenze Gotisch", Georgia, serif;
  font-weight: 700;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

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

.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 200;
  background: var(--paper-hi); color: var(--ink);
  padding: .6em 1em; border-radius: 3px;
  font-family: "Grenze Gotisch", serif; font-size: 1.05rem;
  transition: top .15s var(--ease);
}
.skip-link:focus { top: 12px; }

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

/* ============================================================
   Header — floats over the desk, hardens on scroll
   ============================================================ */

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background-color: transparent;
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}

.site-header.is-stuck {
  background-color: #1d110c;
  background-image:
    linear-gradient(rgba(24,13,8,.78), rgba(24,13,8,.9)),
    url("assets/wood-tile.jpg");
  background-size: auto, 2000px auto;
  box-shadow: inset 0 -1px 0 rgba(163,128,63,.4), 0 10px 24px -10px rgba(0,0,0,.9);
}

.header-inner {
  max-width: var(--measure);
  margin-inline: auto;
  min-height: var(--header-h);
  padding: 0 clamp(14px, 4vw, 28px);
  display: flex; align-items: center; gap: 16px;
}

.wordmark {
  margin-right: auto;
  padding: 10px 0;
  text-decoration: none;
  line-height: 1;
  text-shadow: 0 2px 6px rgba(0,0,0,.85);
}

.wordmark__city {
  display: block;
  font-family: "Yellowtail", cursive;
  font-size: clamp(.9rem, .82rem + .4vw, 1.1rem);
  color: var(--paper-hi);
}

.wordmark__title {
  display: block;
  font-family: "Grenze Gotisch", serif;
  font-weight: 700;
  font-size: clamp(1rem, .82rem + .72vw, 1.36rem);
  color: var(--rose);
  margin-top: 2px;
}

.primary-nav ul {
  display: flex; align-items: center;
  gap: clamp(2px, 1.4vw, 18px);
  list-style: none; margin: 0; padding: 0;
}

.primary-nav a {
  position: relative; display: block;
  padding: 10px 12px;
  font-family: "Grenze Gotisch", serif;
  font-size: 1.2rem; font-weight: 600; letter-spacing: .02em;
  color: #ecdfc4; text-decoration: none;
  text-shadow: 0 2px 6px rgba(0,0,0,.85);
  transition: color .2s var(--ease);
}
.primary-nav a::after {
  content: "";
  position: absolute; left: 12px; right: 12px; bottom: 6px;
  height: 2px; background: var(--blood);
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--ease);
}
.primary-nav a:hover { color: #fff4dd; }
.primary-nav a:hover::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  width: 42px; height: 38px; padding: 0;
  background: rgba(24,13,8,.72);
  border: 1px solid rgba(205,132,131,.5);
  border-radius: 3px; color: var(--paper); cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 5px; justify-items: center; }
.nav-toggle__bars i {
  display: block; width: 20px; height: 2px; background: #ecdfc4;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 680px) {
  .nav-toggle { display: grid; place-items: center; }

  .primary-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background-color: #1d110c;
    background-image:
      linear-gradient(rgba(24,13,8,.92), rgba(24,13,8,.97)),
      url("assets/wood-tile.jpg");
    background-size: auto, 2000px auto;
    box-shadow: 0 16px 28px -12px rgba(0,0,0,.9), inset 0 -1px 0 rgba(163,128,63,.35);
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .3s var(--ease);
  }
  .primary-nav > ul { overflow: hidden; }
  .primary-nav.is-open { grid-template-rows: 1fr; }

  .primary-nav ul {
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 4px clamp(14px, 4vw, 28px) 12px;
  }
  .primary-nav a {
    padding: 13px 2px; font-size: 1.4rem;
    border-bottom: 1px solid rgba(205,132,131,.16);
    text-shadow: none;
  }
  .primary-nav li:last-child a { border-bottom: 0; }
  .primary-nav a::after { left: 2px; right: auto; width: 34px; bottom: 8px; }
}

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  display: inline-block;
  font-family: "Grenze Gotisch", serif;
  font-size: 1.26rem; font-weight: 600; letter-spacing: .015em; line-height: 1;
  padding: .78em 1.5em;
  border-radius: 3px;
  text-decoration: none;
  transition: transform .18s var(--ease), box-shadow .22s var(--ease),
              background-color .22s var(--ease), color .22s var(--ease);
}

.btn--lg { font-size: 1.5rem; padding: .82em 1.9em; }

.btn--seal {
  color: #fbeee0;
  background-image: linear-gradient(#7e2040, var(--wine) 55%, #400e23);
  box-shadow:
    inset 0 1px 0 rgba(255,225,225,.22),
    inset 0 -2px 6px rgba(0,0,0,.4),
    0 3px 0 #2e0a19,
    0 12px 24px -8px rgba(0,0,0,.7);
}
.btn--seal:hover {
  transform: translateY(-2px);
  background-image: linear-gradient(#8d2649, #63183a 55%, #4a1129);
  box-shadow:
    inset 0 1px 0 rgba(255,225,225,.28),
    inset 0 -2px 6px rgba(0,0,0,.4),
    0 5px 0 #2e0a19,
    0 18px 30px -10px rgba(0,0,0,.75);
}
.btn--seal:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.5), 0 1px 0 #2e0a19;
}

/* quiet button: reads on the dark desk */
.btn--quiet {
  color: var(--paper-hi);
  border: 1px solid rgba(232,220,190,.45);
  background: rgba(20,10,6,.35);
}
.btn--quiet:hover {
  transform: translateY(-2px);
  color: #fff6e4; border-color: var(--rose);
  background: rgba(87,21,49,.4);
}

/* …and its counterpart on paper */
.page .btn--quiet,
.card .btn--quiet {
  color: var(--wine);
  border-color: rgba(87,21,49,.4);
  background: rgba(87,21,49,.05);
}
.page .btn--quiet:hover,
.card .btn--quiet:hover {
  color: #3d0e23; border-color: var(--wine);
  background: rgba(87,21,49,.12);
}

/* ============================================================
   HERO — an open journal on the desk.

   The book is the same .leaf panel the sections use, so it grows
   with the viewport instead of being pinned to the artwork's
   16:9 proportions. Everything loose sits around it and bleeds
   off the window edge, the way the objects do in the artwork.
   ============================================================ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* vertical rhythm keys off viewport HEIGHT, so a wide-but-short
     window doesn't push the book and its bar off screen */
  gap: clamp(12px, 2.2vh, 28px);
  padding:
    calc(var(--header-h) + clamp(10px, 2.4vh, 34px))
    clamp(16px, 5vw, 78px)
    clamp(16px, 3vh, 40px);

  background-color: #241510;
  background-image: url("assets/desk.jpg");
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 -80px 90px -60px rgba(0,0,0,.85);
  overflow: hidden;          /* lets the loose props run off the window */
}

/* ── the open book ──────────────────────────────────────── */

/* The book fills the desk, as it does in the artwork — it is the frame,
   not a card sitting on one. */
.spread {
  position: relative;
  z-index: 3;
  flex: 1;
  width: min(100%, 1500px);
  display: grid;
  padding: clamp(18px, 3vh, 44px) clamp(20px, 3vw, 58px);
}

/* The composition fills the page area rather than being boxed inside it,
   so the title spans the spread the way it does in the artwork. */
.spread__stage {
  position: relative;
  width: 100%;
  min-height: min(44svh, 420px);
  display: grid;
  align-content: start;
  padding-top: 1%;
}

/* the crease down the middle of the spread */
.spread::before {
  content: "";
  position: absolute;
  left: 50%; top: 4%; bottom: 4%;
  width: 54px;
  transform: translateX(-50%);
  background: linear-gradient(90deg,
    rgba(120,84,44,0), rgba(120,84,44,.16) 42%,
    rgba(120,84,44,.24) 50%, rgba(120,84,44,.16) 58%, rgba(120,84,44,0));
  pointer-events: none;
}

/* ── the title, set in type rather than pasted in as art ── */

.spread__title {
  position: relative;
  z-index: 8;                 /* the lettering sits over the cuttings */
  margin: 0;
  display: inline-grid;
  justify-items: start;
  justify-self: start;
  margin-left: 3%;            /* the artwork sets it near the left margin */
  max-width: 100%;
  transform: rotate(-2.4deg);
}

.spread__city {
  font-family: "Yellowtail", cursive;
  font-weight: 400;
  font-size: clamp(2rem, min(6.6vw, 11.4svh), 6.2rem);
  line-height: .92;
  color: #291914;
}

.spread__name {
  max-width: 11ch;
  margin: -.04em 0 0 1.9em;   /* the stagger, in ems of its own size */
  text-align: right;
  font-family: "Grenze Gotisch", Georgia, serif;
  font-weight: 700;
  font-size: clamp(2.6rem, min(8.4vw, 14.6svh), 8.4rem);
  line-height: .88;
  color: var(--wine);
}

/* ── loose objects ──────────────────────────────────────── */

.prop {
  position: absolute;
  max-width: none;
  pointer-events: none;
  user-select: none;
  opacity: var(--o, 1);
}

/* On the page. Percentages are the artwork's own geometry, measured
   off the journal's page area in the 1440 × 810 source frame. */
.prop--sketch {
  z-index: 1;
  left: 3%; bottom: 0;
  width: clamp(120px, min(42%, 60svh), 560px);
  opacity: .9;
}
.prop--drops {
  z-index: 2;
  left: 7%; top: 30%;
  width: clamp(70px, min(16%, 26svh), 230px);
}
.prop--burst {
  z-index: 1;
  right: 1%; top: 2%;
  width: clamp(130px, min(30%, 46svh), 450px);
  --o: .42;
}
/* the two cuttings overlap in the middle, as they do in the artwork */
.prop--photo-fire {
  z-index: 5;
  left: 24%; bottom: 1%;
  width: clamp(140px, min(38%, 42svh), 530px);
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.45));
}
.prop--photo-park {
  z-index: 6;
  left: 58%; bottom: -2%;
  width: clamp(140px, min(42%, 44svh), 570px);
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.45));
}

/* On the desk. These hang off the top corners of the WINDOW — the
   header floats over them rather than pushing them down, and they
   are held clear of the wordmark and nav horizontally instead. */
.prop--map-left  { z-index: 2; left: -7%; top: -16%;
                   width: clamp(150px, 18vw, 320px); }
.prop--map-right { z-index: 2; right: -4%; top: -14%;
                   width: clamp(150px, 18vw, 320px); }
.prop--roses     { z-index: 4; left: -9%; bottom: -6%;
                   width: clamp(130px, 16vw, 290px); }
.prop--flower-b  { z-index: 4; right: -6%; bottom: -4%;
                   width: clamp(160px, 20vw, 350px); }
.prop--flower-a  { z-index: 5; right: -1%; bottom: -1%;
                   width: clamp(110px, 12vw, 215px); }

/* ── the one orchestrated moment: the desk assembles itself ── */

@media (prefers-reduced-motion: no-preference) {
  .hero .prop,
  .hero .spread,
  .hero .spread__title { opacity: 0; }

  .hero.is-lit .prop,
  .hero.is-lit .spread {
    animation: settle .7s var(--ease) both;
    animation-delay: var(--d, 0s);
  }
  /* the lettering is hand-drawn, so it strokes in rather than fading */
  .hero.is-lit .spread__title {
    animation: ink .9s cubic-bezier(.35,.1,.2,1) both;
    animation-delay: var(--d, 0s);
  }
  .hero.is-lit .prop--burst,
  .hero.is-lit .prop--drops {
    animation: spatter .5s cubic-bezier(.2,1.3,.4,1) both;
    animation-delay: var(--d, 0s);
  }

  .spread           { --d: .05s; }
  .prop--map-left   { --d: .22s; }
  .prop--map-right  { --d: .28s; }
  .prop--sketch     { --d: .36s; }
  .prop--photo-fire { --d: .46s; }
  .prop--photo-park { --d: .54s; }
  .prop--roses      { --d: .62s; }
  .prop--flower-b   { --d: .66s; }
  .prop--flower-a   { --d: .70s; }
  .spread__title    { --d: .80s; }
  .prop--burst      { --d: 1.40s; }
  .prop--drops      { --d: 1.50s; }

  @keyframes settle {
    from { opacity: 0; transform: translateY(16px) scale(.985); }
    to   { opacity: var(--o, 1); transform: none; }
  }
  @keyframes ink {
    from { opacity: 1; clip-path: inset(0 100% -20% 0); }
    to   { opacity: 1; clip-path: inset(0 -20% -20% 0); }
  }
  @keyframes spatter {
    from { opacity: 0; transform: scale(.82); }
    to   { opacity: var(--o, 1); transform: none; }
  }

  /* the title carries a rotation the keyframes must not eat */
  .hero.is-lit .spread__title { transform: rotate(-2.4deg); }
}

/* ── the standing details, under the book ── */

.hero__bar {
  position: relative;
  z-index: 7;
  max-width: var(--measure);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px clamp(20px, 4vw, 44px);
  text-align: center;
}

.hero__when { margin: 0; line-height: 1.35; text-shadow: 0 2px 8px rgba(0,0,0,.9); }
.hero__when b {
  display: block;
  font-family: "Grenze Gotisch", serif; font-weight: 700;
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.75rem);
  color: var(--paper-hi);
}
.hero__when span { display: block; font-size: .96rem; color: #c9ae8b; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ── narrow screens: one page, objects pulled to the corners ── */

/* A tall window would stretch the book past its composition and leave a
   dead band between the title and the cuttings. Portrait-ish viewports —
   tablets included — get a book that hugs its contents and centres. */
@media (max-aspect-ratio: 5 / 4) {
  .spread { flex: 0 1 auto; }
}

@media (max-width: 700px) {
  .spread { padding: clamp(24px, 5vh, 38px) clamp(18px, 6vw, 32px); }
  .spread__stage { min-height: min(50svh, 390px); }
  .spread::before { display: none; }

  .spread__title { justify-self: center; margin-left: 0; }
  .spread__city { padding-left: 0; }
  .spread__name { max-width: 100%; margin-left: 0; }

  .prop--sketch     { left: -8%; bottom: 0;    width: 66%; opacity: .85; }
  .prop--drops      { left: 8%;  top: 30%;     width: 26%; }
  .prop--burst      { right: -4%; top: -4%;    width: 48%; }
  .prop--photo-fire { left: 0;   bottom: -2%;  width: 56%; }
  .prop--photo-park { left: 42%; bottom: -7%;  width: 58%; }

  .prop--map-left   { display: none; }
  .prop--map-right  { right: -2%; top: -6%; width: 150px; }
  .prop--roses      { left: -58px; bottom: -34px; width: 130px; }
  .prop--flower-b   { right: -64px; bottom: -36px; width: 150px; }
  .prop--flower-a   { display: none; }
}

@media (max-width: 520px) {
  .hero__bar { gap: 10px 14px; }
  .hero__actions .btn { font-size: 1.08rem; padding: .68em 1.05em; }
}

/* ============================================================
   Journal pages
   ============================================================ */

.page { position: relative; padding: clamp(28px, 5vw, 70px) clamp(14px, 4vw, 28px); }

/* the shared panel: notebook paper inside a leather cover.
   Used by the hero spread and by every content section. */
.leaf {
  background-color: var(--paper);
  background-image:
    linear-gradient(90deg,
      rgba(120,84,44,.20) 0%, rgba(120,84,44,0) 5%,
      rgba(120,84,44,0) 95%, rgba(120,84,44,.20) 100%),
    radial-gradient(140% 100% at 50% -20%, rgba(255,255,255,.3), transparent 55%),
    url("assets/paper.jpg");
  background-size: auto, auto, 620px auto;

  border-radius: 5px 7px 5px 8px;
  box-shadow:
    0 0 0 clamp(7px, 1.1vw, 13px) #4a2c19,
    0 0 0 calc(clamp(7px, 1.1vw, 13px) + 1px) rgba(0,0,0,.55),
    var(--shadow-page);
}

.page__inner {
  position: relative;
  max-width: var(--measure);
  margin-inline: auto;
  padding: clamp(30px, 5vw, 72px) clamp(24px, 5vw, 76px);
  overflow: hidden;
}

/* the spine crease, only where the layout is genuinely two pages */
@media (min-width: 900px) {
  .page--intro .page__inner {
    background-image:
      linear-gradient(90deg,
        rgba(120,84,44,.20) 0%, rgba(120,84,44,0) 5%,
        rgba(120,84,44,0) 44%,
        rgba(120,84,44,.17) 50%,
        rgba(120,84,44,0) 56%,
        rgba(120,84,44,0) 95%, rgba(120,84,44,.20) 100%),
      radial-gradient(140% 100% at 50% -20%, rgba(255,255,255,.3), transparent 55%),
      url("assets/paper.jpg");
  }
}

.eyebrow {
  font-family: "Yellowtail", cursive;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  line-height: 1; color: var(--ink-faint);
  margin-bottom: .3em;
}

.page h2 {
  font-size: clamp(2rem, 1.2rem + 3.6vw, 3.5rem);
  color: var(--wine);
  margin-bottom: .55em;
}

.page h3 {
  font-size: clamp(1.35rem, 1.1rem + .9vw, 1.7rem);
  color: var(--wine-lt);
  margin-bottom: .3em;
}

.columns { color: var(--ink-soft); }

@media (min-width: 900px) {
  .columns { columns: 2; column-gap: clamp(40px, 6vw, 84px); orphans: 3; widows: 3; }
  .columns p { break-inside: avoid; }
}

.dropcap {
  float: left;
  font-family: "Grenze Gotisch", serif;
  font-weight: 700; font-size: 3.3em; line-height: .78;
  padding: .06em .1em 0 0;
  color: var(--wine);
}

.facts {
  display: flex; flex-wrap: wrap;
  gap: clamp(18px, 4vw, 54px);
  list-style: none;
  margin: clamp(30px, 4vw, 48px) 0 0;
  padding: clamp(22px, 3vw, 30px) 0 0;
  border-top: 1px solid rgba(42,26,18,.18);
}
.facts li { flex: 1 1 140px; }
.facts__num {
  display: block;
  font-family: "Grenze Gotisch", serif; font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 2.2vw, 2.9rem); line-height: 1;
  color: var(--blood-dk);
}
.facts__label { display: block; font-size: .96rem; color: var(--ink-faint); }

/* decorations reused from the artwork, sitting on the page */
.deco {
  position: absolute;
  pointer-events: none; user-select: none;
  z-index: 0;
}

.deco--drops  { right: -3%; top: -8%; width: clamp(180px, 24vw, 300px); opacity: .5;
                transform: rotate(14deg); }
.deco--sketch { display: none; right: -34px; bottom: -50px; width: 200px; opacity: .22; }
.deco--roses  { left: -46px; bottom: -40px; width: clamp(130px, 18vw, 210px); opacity: .3;
                transform: rotate(-6deg); }

@media (min-width: 1080px) { .deco--sketch { display: block; } }

.page__inner > *:not(.deco) { position: relative; z-index: 1; }

/* ============================================================
   Monday night detail
   ============================================================ */

.venue { display: grid; gap: clamp(28px, 4vw, 48px); align-items: start; }

@media (min-width: 860px) {
  .venue { grid-template-columns: minmax(0, 1.45fr) minmax(260px, 1fr); }
}

.venue__body { color: var(--ink-soft); }
.venue__body strong { color: var(--ink); }
.venue__cta { margin-top: 1.6em; }

.venue__card {
  position: relative;
  padding: clamp(22px, 2.6vw, 30px);
  background-color: #ded1ae;
  background-image:
    linear-gradient(rgba(120,84,44,.07), rgba(120,84,44,.07)),
    url("assets/paper.jpg");
  background-size: auto, 620px auto;
  border: 1px solid rgba(42,26,18,.22);
  border-radius: 2px 4px 3px 4px;
  box-shadow: 0 2px 3px rgba(0,0,0,.14), 0 14px 26px -12px rgba(0,0,0,.5);
  transform: rotate(.6deg);
}
.venue__card::before {           /* paperclip */
  content: "";
  position: absolute; top: -14px; right: 26px;
  width: 15px; height: 40px;
  border: 2.5px solid #9aa0a4; border-bottom-color: transparent;
  border-radius: 8px;
  box-shadow: 0 2px 3px rgba(0,0,0,.3);
  transform: rotate(9deg);
}

.venue__card-title {
  font-family: "Grenze Gotisch", serif;
  font-size: 1.35rem; color: var(--wine);
  margin-bottom: .7em; padding-bottom: .5em;
  border-bottom: 1px solid rgba(42,26,18,.2);
}

.venue__dl { margin: 0; }
.venue__dl dt {
  font-family: "Grenze Gotisch", serif;
  font-size: 1.02rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint); margin-top: 1em;
}
.venue__dl dt:first-child { margin-top: 0; }
.venue__dl dd { margin: .1em 0 0; font-size: 1.05rem; line-height: 1.45; color: var(--ink); }
.venue__note { color: var(--blood-dk); font-style: italic; }

.venue__map {
  display: inline-block; margin-top: 1.4em;
  font-family: "Grenze Gotisch", serif; font-size: 1.1rem;
  color: var(--wine); text-decoration: none;
  border-bottom: 2px solid rgba(87,21,49,.28);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.venue__map::after { content: " \2197"; }
.venue__map:hover { color: var(--blood); border-color: var(--blood); }

.tables__heading {
  margin-top: clamp(38px, 5vw, 62px);
  padding-top: clamp(26px, 3vw, 34px);
  border-top: 1px solid rgba(42,26,18,.18);
}

.tables {
  list-style: none; margin: clamp(18px, 2.5vw, 26px) 0 0; padding: 0;
  display: grid; gap: clamp(24px, 3vw, 38px);
}
@media (min-width: 820px) {
  .tables { grid-template-columns: repeat(3, 1fr); }
  .tables > li + li {
    padding-left: clamp(24px, 3vw, 38px);
    border-left: 1px solid rgba(42,26,18,.16);
  }
}
.tables > li { color: var(--ink-soft); font-size: 1rem; }
.tables > li > p:last-child { margin: 0; }
.tables__name {
  font-family: "Grenze Gotisch", serif; font-weight: 700;
  font-size: 1.5rem; line-height: 1.05; color: var(--wine); margin-bottom: .05em;
}
.tables__role {
  font-family: "Yellowtail", cursive; font-size: 1.15rem; line-height: 1;
  color: var(--blood-dk); margin-bottom: .8em;
}

/* ============================================================
   Cuttings + cards on the desk
   ============================================================ */

.nights { padding: clamp(40px, 7vw, 92px) clamp(14px, 4vw, 28px); }
.nights__inner { max-width: var(--measure); margin-inline: auto; }

/* the two real photographs, still torn-edged, as one clipping */
.cuttings {
  position: relative;
  display: block;
  height: clamp(210px, 30vw, 330px);
  margin-bottom: clamp(34px, 5vw, 56px);
  text-decoration: none;
}

.cuttings__pic {
  position: absolute;
  width: clamp(230px, 40%, 440px);
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.6));
  transition: transform .35s var(--ease);
}
.cuttings__pic--fire { left: 4%;  top: 0;    transform: rotate(-3deg); }
.cuttings__pic--park { right: 4%; bottom: 0; transform: rotate(2.5deg); }

.cuttings:hover .cuttings__pic--fire { transform: rotate(-1.5deg) translateY(-6px); }
.cuttings:hover .cuttings__pic--park { transform: rotate(1deg) translateY(-6px); }

.cuttings__label {
  position: absolute; left: 50%; bottom: 8%;
  transform: translateX(-50%);
  font-family: "Yellowtail", cursive;
  font-size: clamp(1.1rem, .95rem + .7vw, 1.5rem);
  color: var(--paper-hi);
  text-shadow: 0 2px 10px rgba(0,0,0,.95);
  text-align: center;
  white-space: nowrap;
}
.cuttings:hover .cuttings__label { color: #fff; }

@media (max-width: 620px) {
  .cuttings { height: 300px; }
  .cuttings__pic { width: 62%; }
  .cuttings__pic--fire { left: 0; top: 0; }
  .cuttings__pic--park { right: 0; bottom: 22px; }
  .cuttings__label { bottom: -6px; white-space: normal; width: 90%; }
}

.nights__heading {
  font-size: clamp(2rem, 1.2rem + 3.6vw, 3.4rem);
  color: var(--paper-hi); text-align: center;
  text-shadow: 0 2px 0 rgba(0,0,0,.55), 0 14px 28px rgba(0,0,0,.6);
}
.nights__sub {
  text-align: center; color: #c6ad8c; font-style: italic; font-size: .98rem;
  margin: .6em auto clamp(34px, 5vw, 56px);
}

.cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(30px, 4vw, 40px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.card {
  position: relative;
  padding: clamp(26px, 3vw, 34px) clamp(22px, 2.6vw, 30px) clamp(24px, 3vw, 30px);
  background-color: var(--paper);
  background-image:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.35), transparent 62%),
    url("assets/paper.jpg");
  background-size: auto, 620px auto;
  border-radius: 3px 5px 4px 6px;
  box-shadow: var(--shadow-page);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card:nth-child(1) { transform: rotate(-.7deg); }
.card:nth-child(2) { transform: rotate(.45deg); }
.card:nth-child(3) { transform: rotate(-.3deg); }
.card:hover {
  transform: rotate(0deg) translateY(-5px);
  box-shadow: 0 2px 4px rgba(0,0,0,.35), 0 36px 70px -14px rgba(0,0,0,.75);
}

.card__tape {
  position: absolute; top: -13px; left: 50%;
  width: 96px; height: 26px;
  transform: translateX(-50%) rotate(-2.2deg);
  background: linear-gradient(105deg, rgba(238,228,198,.7), rgba(226,212,175,.55));
  border-left: 1px dashed rgba(255,255,255,.4);
  border-right: 1px dashed rgba(255,255,255,.4);
  box-shadow: 0 2px 5px rgba(0,0,0,.28);
  opacity: .9;
}
.card:nth-child(2) .card__tape { transform: translateX(-50%) rotate(1.8deg); left: 42%; }
.card:nth-child(3) .card__tape { transform: translateX(-50%) rotate(-3.4deg); left: 58%; }

.card__when {
  font-family: "Yellowtail", cursive; font-size: 1.22rem; line-height: 1;
  color: var(--blood-dk); margin-bottom: .35em;
}
.card__title {
  font-family: "Grenze Gotisch", serif;
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem);
  color: var(--wine); margin-bottom: .5em;
}
.card__body { color: var(--ink-soft); font-size: 1.02rem; margin-bottom: 1.1em; }

.card__link {
  font-family: "Grenze Gotisch", serif; font-size: 1.16rem; font-weight: 600;
  color: var(--wine); text-decoration: none;
  border-bottom: 2px solid rgba(87,21,49,.28); padding-bottom: 2px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.card__link::after { content: " \2192"; }
.card__link:hover { color: var(--blood); border-color: var(--blood); }

/* ============================================================
   Steps
   ============================================================ */

.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(26px, 3.5vw, 44px); }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); } }

.steps > li { counter-increment: step; position: relative; padding-top: 54px; }
.steps > li::before {
  content: counter(step);
  position: absolute; top: 0; left: 0;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  font-family: "Grenze Gotisch", serif; font-size: 1.45rem; font-weight: 700;
  color: #f6e7d8;
  background-image: radial-gradient(circle at 35% 30%, #8d2649, var(--wine) 60%, #3d0e23);
  border-radius: 50% 48% 52% 50%;
  box-shadow: 0 3px 8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,220,220,.3);
}
.steps p { color: var(--ink-soft); font-size: 1.02rem; margin: 0; }

/* ============================================================
   Closing
   ============================================================ */

.summons {
  position: relative;
  padding: clamp(56px, 9vw, 120px) clamp(14px, 4vw, 28px);
  text-align: center;
  overflow: hidden;
}
.summons::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(60% 70% at 50% 45%, rgba(87,21,49,.5), transparent 70%);
  pointer-events: none;
}
.summons__flower {
  position: absolute;
  right: -60px; bottom: -40px;
  width: clamp(150px, 22vw, 290px);
  opacity: .4;
  pointer-events: none;
}
.summons__inner { position: relative; z-index: 1; max-width: 700px; margin-inline: auto; }

.summons__script {
  font-family: "Yellowtail", cursive;
  font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.8rem); line-height: 1;
  color: var(--rose); margin-bottom: .05em;
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
}
.summons__title {
  font-size: clamp(2.4rem, 1.4rem + 4.6vw, 4.4rem);
  color: var(--paper-hi); margin-bottom: .3em;
  text-shadow: 0 3px 0 rgba(0,0,0,.5), 0 18px 34px rgba(0,0,0,.7);
}
.summons__body { color: #ddc9a8; margin-bottom: 1.8em; max-width: 46ch; margin-inline: auto; }

/* ============================================================
   Footer
   ============================================================ */

.site-footer {
  background-color: #180e09;
  background-image:
    linear-gradient(rgba(20,11,7,.86), rgba(20,11,7,.94)),
    url("assets/wood-tile.jpg");
  background-size: auto, 2000px auto;
  box-shadow: inset 0 1px 0 rgba(163,128,63,.32);
  padding: clamp(34px, 5vw, 56px) clamp(14px, 4vw, 28px);
}

.footer-inner {
  max-width: var(--measure); margin-inline: auto;
  display: grid; gap: 22px; justify-items: center; text-align: center;
}
.footer__mark { margin: 0; line-height: 1.1; }
.footer__city { display: block; font-family: "Yellowtail", cursive; font-size: 1.3rem; color: var(--paper-hi); }
.footer__title { display: block; font-family: "Grenze Gotisch", serif; font-size: 1.6rem; font-weight: 700; color: var(--rose); }

.footer__links {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px 26px; list-style: none; margin: 0; padding: 0;
}
.footer__links a {
  font-family: "Grenze Gotisch", serif; font-size: 1.16rem;
  color: #e0d0b0; text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.footer__links a:hover { color: #fff3dd; border-color: var(--blood); }

.footer__fine { max-width: 56ch; font-size: .92rem; line-height: 1.6; color: #a68c6d; margin: 0; }

/* ============================================================
   Motion preferences
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .card:hover, .btn:hover, .cuttings:hover .cuttings__pic { transform: none; }
}