@font-face { font-family: 'IM Fell English'; src: url('assets/fonts/im-fell-english.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'IM Fell English'; src: url('assets/fonts/im-fell-english-italic.woff2') format('woff2'); font-style: italic; font-weight: 400; font-display: swap; }
:root {
  color-scheme: dark;
  --ink: #eedfc8;
  --paper: #1b1a16;
  --rule: rgba(238, 223, 200, .48);
  --blood: #8f2419;
  --blood-light: #d2543f;
  --muted: #a99c86;
  --serif: Georgia, 'Times New Roman', serif;
  --text: 'IM Fell English', Georgia, serif;
}
* { box-sizing: border-box; }
html { background: var(--paper) url('assets/charcoal-texture.webp') repeat; scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); font-family: var(--serif); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { display: block; max-width: 100%; }
.page {
  /* Only the content has a width limit. The canvas always fills the screen. */
  /* The closing rule spans the whole window; the copy stays in a centered column. */
  --frame-gutter: min(6.12vw, 94px);
  --content-gutter: max(var(--frame-gutter), calc((100vw - 1680px) / 2));
  /* Art is 3:2. Wide enough that its bottom fade always lands below the first screenful. */
  --art-w: max(min(100vw, max(1536px, min(1920px, 150svh))), min(175svh, 110vw));
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  min-height: max(100svh, min(66.6667vw, 1024px));
  /* fine grain, plus a few large soft patches so the page doesn't read as a repeating tile */
  background:
    radial-gradient(ellipse 45% 30% at 8% 62%, rgba(120, 30, 24, .07), transparent 70%),
    radial-gradient(ellipse 60% 35% at 85% 88%, rgba(0, 0, 0, .22), transparent 70%),
    radial-gradient(ellipse 50% 25% at 35% 96%, rgba(196, 160, 98, .035), transparent 70%),
    url('assets/charcoal-texture.webp') repeat,
    var(--paper);
}
.artwork {
  position: absolute;
  top: 0;
  /* nudged right so the far-right scenery bleeds off and the copy gets more room */
  right: calc(max(0px, (100vw - 2240px) / 2) - var(--art-w) * .09);
  width: var(--art-w);
  z-index: -2;
  pointer-events: none;
  mask-image: linear-gradient(to right, transparent, #000 20%);
}
.artwork img { width: 100%; height: auto; mask-image: linear-gradient(to bottom, #000 88%, transparent); }
.masthead {
  position: relative;
  margin-inline: calc(var(--content-gutter) + min(2.08vw, 32px)) var(--frame-gutter);
  padding-top: min(4vw, 60px);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.brand { width: min(6vw, 92px); padding-top: min(.4vw, 6px); }
.brand img { width: 100%; height: min(5.5vw, 84px); object-fit: contain; }
.hero { margin-left: calc(var(--content-gutter) + min(2.08vw, 32px)); max-width: min(620px, 45vw); padding-top: min(2.4vw, 36px); padding-bottom: min(6vw, 96px); text-shadow: 0 0 14px var(--paper), 0 0 4px var(--paper); min-height: calc(var(--art-w) / 1.5 * .96 - min(9vw, 140px)); }
h1 { margin: 0; width: min(29.1vw, 447px); line-height: 1; }
.title { width: 100%; height: auto; }
.tagline { font-size: min(3.125vw, 48px); line-height: 1.15; font-weight: 400; margin: min(2vw, 30px) 0 0; letter-spacing: -.025em; }
.intro { font: min(1.5vw, 23px)/1.62 var(--text); margin: min(2.2vw, 34px) 0 0; max-width: 26em; }
.doom { font-style: normal; color: var(--blood-light); }
.asterisk { color: var(--blood-light); font-style: normal; }
.tagline .asterisk { font-size: .7em; vertical-align: .45em; margin-left: .02em; }
.footnote { width: max-content; margin: min(1.1vw, 16px) 0 0 min(1.2vw, 18px); font: 400 min(1.2vw, 18px)/1.2 var(--text); opacity: .85; transform: rotate(-2deg); transform-origin: left center; }
.footnote .asterisk { margin-right: .15em; }
.event { margin-top: min(6.5vw, 104px); scroll-margin-top: 32px; }
.card {
  position: relative;
  max-width: 25rem;
  padding: 3rem 2.6rem 3.1rem;
  text-align: center;
  color: #241a0e;
  text-shadow: none;
  background: #eee3cc url('assets/charcoal-texture.webp');
  background-blend-mode: soft-light;
  transform: rotate(-2deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 40px rgba(0, 0, 0, .5);
}
/* stationery border with corner flourishes */
.card::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 40px solid transparent;
  border-image: url('assets/card-frame.svg') 40 stretch;
  pointer-events: none;
}
.card h2 { position: relative; margin: 0; font: italic 400 min(2.3vw, 34px)/1.1 var(--text); }
.card-where { position: relative; margin: .5em 0 0; font: 400 min(1.5vw, 22px)/1.3 var(--text); }
.event-details { position: relative; margin: .15em 0 min(1.6vw, 24px); font: italic 400 min(1.3vw, 19px)/1.35 var(--text); opacity: .85; }
.invite { display: inline-flex; gap: 16px; align-items: center; justify-content: center; border: 1px solid rgba(238, 223, 200, .25); border-radius: 0; background: var(--blood); color: var(--ink); min-height: min(3.2vw, 49px); padding: min(.8vw, 12px) min(1.8vw, 28px); font: min(1.3vw, 20px)/1.2 var(--text); cursor: pointer; }
.invite:hover { background: #a62c1f; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
.back { position: relative; max-width: 56rem; margin: 0 auto; padding: min(3vw, 40px) min(6vw, 48px) 0; }
.faq { margin: 0; }
.faq > div { display: grid; grid-template-columns: 2fr 3fr; gap: min(3.5vw, 52px); }
.faq > div + div { margin-top: min(3.2vw, 48px); }
.faq dt { font: 400 min(1.75vw, 25px)/1.3 var(--text); }
.faq dd { margin: 0; font: 400 min(1.4vw, 20px)/1.55 var(--text); color: var(--muted); text-wrap: pretty; }
.faq dd a { color: var(--ink); text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.faq dd a:hover { color: var(--blood-light); }
.hosts { margin: 0; padding: 0; list-style: none; }
.hosts li + li { margin-top: .8em; }
.hosts li.hosts-break { margin-top: 1.3em; }
.hosts li.hosts-break::before { content: ''; display: block; width: 3em; margin-bottom: 1.3em; border-top: 1px solid var(--rule); }
.host-name, .host-bio { display: block; width: fit-content; }
.host-name { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.host-name:hover { color: var(--blood-light); }
.host-bio { font-size: .82em; }
.host-logo { display: block; width: fit-content; margin: .2em 0 0; cursor: pointer; transition: opacity .2s; }
.host-logo:hover { opacity: .75; }
.host-logo img { display: block; width: auto; cursor: pointer; -webkit-user-drag: none; user-select: none; }
.host-signed img { height: min(2vw, 30px); }
.host-vermilion img { height: min(2vw, 30px); }
.end-mark { display: flex; align-items: center; gap: min(1.6vw, 24px); margin: min(7vw, 104px) var(--frame-gutter) min(4vw, 60px); }
.end-mark::before, .end-mark::after { content: ''; flex: 1; border-top: 1px solid var(--rule); }
.end-mark a { display: block; width: min(5.5vw, 80px); opacity: .9; transition: opacity .2s, transform .2s; }
.end-mark a:hover { opacity: 1; transform: translateY(-3px); }
.end-mark img { width: 100%; height: auto; -webkit-user-drag: none; }
dialog { color: var(--ink); background: #211f1a; border: 1px solid var(--rule); padding: 32px; width: min(420px, calc(100vw - 40px)); }
dialog::backdrop { background: rgba(0,0,0,.7); }
dialog h2 { font-weight: 400; font-size: 30px; margin-top: 0; }
dialog p { font: 16px/1.5 var(--text); }
dialog .invite { font-size: 16px; min-height: 44px; padding: 10px 24px; }
@media (min-width: 2240px) {
  .artwork { mask-image: linear-gradient(to right, transparent, #000 20%, #000 88%, transparent); }
}
@media (max-width: 760px) {
  .page { min-height: 100svh; display: flex; flex-direction: column; }
  .masthead { margin-inline: 28px; padding-top: 32px; }
  .brand { width: 64px; padding-top: 7px; }
  .brand img { height: 70px; }
    .hero { margin-left: 0; max-width: none; min-height: 0; padding: 24px 28px 0; }
  .intro { max-width: none; }
  h1 { width: min(78vw, 360px); }
  .tagline { font-size: clamp(28px, 6.7vw, 40px); line-height: 1.12; margin-top: 30px; max-width: 480px; }
  .intro { font-size: 18px; line-height: 1.65; margin-top: 30px; }
  .event { margin-top: 72px; }
  .card { max-width: none; margin-inline: 4px; padding: 2.8rem 2rem 3rem; transform: rotate(-1.2deg); }
  .footnote { margin: 16px 0 0 14px; font-size: 16px; }
  .card h2 { font-size: 28px; }
  .card-where { font-size: 19px; }
  .event-details { font-size: 17px; margin-bottom: 22px; }
  .invite { font-size: 17px; min-height: 48px; padding: 12px 24px; }
  .artwork { position: relative; inset: auto; width: 175%; margin-left: -75%; margin-top: 40px; z-index: -1; flex-shrink: 0; mask-image: linear-gradient(to bottom, transparent, black 7%, black 96%, transparent); }
  .artwork img { mask-image: none; }
    .back { padding: 24px 28px 0; }
  .faq > div { grid-template-columns: 1fr; gap: 8px; }
  .faq > div + div { margin-top: 32px; }
  .faq dt { font-size: 21px; }
  .faq dd { font-size: 17px; }
  .host-signed img { height: 26px; }
  .host-vermilion img { height: 26px; }
    .end-mark { margin: 60px 24px 40px; gap: 16px; }
  .end-mark a { width: 60px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }