@font-face {
  font-family: "ABC Areal";
  src: url("fonts/ABCArealSuperfamilyVariable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Junicode Bold Italic and Regular (Peter S. Baker, OFL), trimmed to Latin + French accents */
@font-face {
  font-family: "Junicode";
  src: url(fonts/Junicode-BoldItalic.woff2) format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Junicode";
  src: url(fonts/Junicode-Regular.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Junicode";
  src: url(fonts/Junicode-Italic.woff2) format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --card-w: clamp(260px, 31vw, 640px); /* a photo strip card, and a homepage event card to match (240px on phones) */
  --bg: #ffe2f8;
  --theme-ease: ease; /* colour fades between themes */
  --surface: #fff4fc;
  --ink: #1d1a17;
  --muted: #6b635a;
  --line: #f0c2e4;
  --logo: #65001d; /* logo colour, used for all buttons */
  --logo-dark: #3d0011;
  --rust: #a8431f;
  --rust-dark: #6b2a14;
  --indigo: #3b3384;
  --radius: 14px;
  --max: 1080px;
  --header-h: 99px;
  --nav-pink: #ffe3f9;
  --fg: #000;           /* page text; light pink in the dark theme */
  --accent: var(--logo); /* links and buttons on the page background */
  --dark: #1a0007;      /* newsletter panel and dark theme background */
  --light: #ffe2f8;     /* light pink that stays light in both themes */
  --serif: "ABC Areal", Arial, sans-serif;
  --sans: "ABC Areal", Arial, sans-serif;
}

* { box-sizing: border-box; }
/* The light page colour sits on html; the dark theme fades in as a fixed layer above it (body::before) using opacity
   alone, which the GPU animates without repainting the page, so it stays smooth on phones. Once the fade is done
   html turns dark too, so overscroll past the edges matches. */
html { -webkit-text-size-adjust: 100%; background: #ffe2f8; transition: background-color 0s; }
html.theme-dark { background-color: var(--dark); transition-delay: .6s; }
body::before, body::after { content: ""; position: fixed; inset: 0; z-index: -2; background: var(--dark); opacity: 0; transition: opacity .6s ease; pointer-events: none; will-change: opacity; } /* on its own GPU layer from the start: iOS would otherwise freeze to set it up when the fade begins */
html.theme-dark body::before { opacity: 1; }
/* Deep: over a section marked data-deep="<colour>" the background fades to that colour, the same way; going from one
   such section straight into another, the colour itself fades across (a flat fill, cheap to repaint) */
body::after { background: var(--deep, var(--dark)); transition: opacity .6s ease, background-color .6s ease; }
html.theme-deep body::after { opacity: 1; }
body {
  margin: 0;
  transition: color .6s var(--theme-ease);
  color: var(--ink);
  font: 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.1; margin: 0 0 .5em; }
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
b, strong { font-weight: 400; }

/* Language switching: elements carry data-l="en" or data-l="fr" */
html[data-lang="en"] [data-l="fr"],
html[data-lang="fr"] [data-l="en"] { display: none !important; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; font-weight: 400; color: var(--rust); margin-bottom: .8em; }
.muted { color: var(--muted); }

/* Header — pink gradient fading out, with a progressive blur underneath (Figma: Web / nav) */
/* --nav-top is registered as a colour so the header gradient can fade between themes */
@property --nav-top { syntax: "<color>"; inherits: true; initial-value: #ffe3f9; }
.site-header { --nav-top: var(--nav-pink); position: sticky; top: 0; z-index: 10; height: var(--header-h); background: linear-gradient(to bottom, var(--nav-top), transparent); transition: --nav-top .6s var(--theme-ease); }
.nav-blur, .nav-blur > div { position: absolute; inset: 0; pointer-events: none; }
.nav-blur > div { -webkit-mask-image: var(--m); mask-image: var(--m); -webkit-backdrop-filter: blur(var(--b)); backdrop-filter: blur(var(--b)); }
.nav-blur > div:nth-child(1) { --b: 1px; --m: linear-gradient(to bottom, #000 70%, transparent 100%); }
.nav-blur > div:nth-child(2) { --b: 2px; --m: linear-gradient(to bottom, #000 55%, transparent 90%); }
.nav-blur > div:nth-child(3) { --b: 4px; --m: linear-gradient(to bottom, #000 40%, transparent 80%); }
.nav-blur > div:nth-child(4) { --b: 8px; --m: linear-gradient(to bottom, #000 25%, transparent 65%); }
.site-header .wrap { position: relative; max-width: none; height: 100%; padding: 16px 40px 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; } /* side columns can't grow, so the logo stays centred */
.site-header .logo { grid-column: 2; grid-row: 1; }
.site-header .nav { grid-column: 1; grid-row: 1; }
.site-header .menu-btn { grid-column: 1; grid-row: 1; justify-self: start; }
.header-end { grid-column: 3; grid-row: 1; justify-self: end; display: flex; align-items: center; gap: 24px; }
.logo { text-decoration: none; }
.logo img, .logo svg { height: 83px; width: auto; display: block; }
/* Animated logo: still artwork (wine + pink images) under the moving meridians, all stacked in one box */
.logo-art { position: relative; display: block; height: 83px; aspect-ratio: 118 / 83; color: #65001D; transition: color .6s var(--theme-ease); }
.logo-art > * { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; } /* each on its own GPU layer: the moving meridians never repaint the stills */
.logo-still { transition: opacity .6s ease; }
.logo-still--dark { opacity: 0; }
html.theme-dark .logo-art, html.nav-dark .logo-art { color: #ffe2f8; }
html.theme-dark .logo-still, html.nav-dark .logo-still { opacity: 0; }
html.theme-dark .logo-still--dark, html.nav-dark .logo-still--dark { opacity: 1; }
.nav { display: flex; gap: 16px; }
.nav a, .header-cta, .lang-toggle, .menu-btn { font-size: 16px; line-height: normal; color: var(--fg); text-decoration: none; white-space: nowrap; }
.nav a:hover, .header-cta:hover { opacity: .5; }
.header-cta { border: 0; background: none; padding: 0; font-family: inherit; cursor: pointer; }
.lang-toggle { display: inline-flex; align-items: center; gap: 4px; }
.lang-toggle button { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; opacity: .35; }
.lang-toggle button[aria-pressed="true"] { opacity: 1; }
.lang-toggle button:hover { opacity: 1; }
.menu-btn { display: none; border: 0; background: none; padding: 0; font-family: inherit; cursor: pointer; }

@media (max-width: 900px) {
  .site-header .wrap { padding: 8px 20px 0; }
  .logo img, .logo svg, .logo-art { height: 64px; }
  .menu-btn { display: block; }
  .header-end { gap: 14px; }
  .header-end .lang-toggle { display: none; } /* FR / EN lives in the menu drawer on phones */
  .nav { display: none; } /* replaced by the full-screen menu drawer */
}

/* Buttons & forms */
.btn { display: inline-block; background: var(--logo); color: #fff; border: 0; border-radius: 999px; padding: 12px 22px; font: 400 .95rem var(--sans); text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--logo-dark); }
.btn--light { background: var(--light); color: var(--logo); }
.btn--light:hover { background: #fff; }
.btn.ghost { background: transparent; color: var(--logo); border: 1px solid var(--logo); }
.btn.ghost:hover { background: var(--logo); color: var(--bg); }
input, textarea, select { font: inherit; width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); }
/* Focus ring uses the action colour everywhere (replaces the browser's blue). */
:focus-visible { outline: 2px solid var(--logo); outline-offset: 2px; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--logo); outline-offset: 1px; }
label { display: block; font-size: .85rem; font-weight: 400; margin-bottom: 6px; }
.inline-form { display: flex; gap: 10px; flex-wrap: wrap; }
.inline-form input { flex: 1 1 220px; }
.form-msg { font-size: .9rem; margin-top: 10px; color: var(--indigo); min-height: 1.4em; }

/* Sections */
section { padding: 64px 0; }
.hero { padding: 72px 0 56px; }
.hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } }
.lead { font-size: 1.15rem; color: var(--muted); max-width: 46ch; }
.meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 18px 0 26px; font-size: .95rem; }
.meta b { font-weight: 400; }

/* Poster art (generated per edition color) */
.poster { aspect-ratio: 3 / 4; border-radius: var(--radius); background: var(--c, var(--rust)); color: #fff; position: relative; overflow: hidden; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 20px 40px -24px rgba(0,0,0,.4); }
.poster::before { content: ""; position: absolute; width: 140%; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); top: 30%; left: -20%; }
.poster::after { content: ""; position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.12); top: 8%; right: -12%; }
.poster .num { font-family: var(--serif); font-size: clamp(4rem, 12vw, 7rem); font-weight: 400; line-height: .9; position: relative; z-index: 1; }
.poster .ttl { font-family: var(--serif); font-size: 1.4rem; position: relative; z-index: 1; }
.poster small { opacity: .85; position: relative; z-index: 1; text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; }

/* Cards */
.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; text-decoration: none; display: flex; flex-direction: column; gap: 6px; transition: transform .15s, border-color .15s; }
a.card:hover { transform: translateY(-3px); border-color: var(--ink); }
.card .poster { margin: -8px -8px 12px; box-shadow: none; }
.card h3 { margin: 0; }
.card p { margin: 0; color: var(--muted); font-size: .95rem; }

/* Footer: one screen tall, the page links big and centred in Junicode, two small columns below */
.site-footer { --fg: var(--light); --bg: var(--dark); --muted: rgba(255, 226, 248, .6); --line: rgba(255, 226, 248, .15); /* always dark */
  min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 64px; padding: 120px 20px 32px; position: relative; text-align: center; color: var(--fg); background: var(--dark); }
.site-footer::before { content: ""; position: absolute; top: 0; left: 40px; right: 40px; height: 1px; background: var(--line); } /* separator inside the page margins */
.footer-nav { display: flex; flex-direction: column; align-items: center; }
.footer-nav a { font: 400 4.5rem/1.1 "Junicode", Georgia, serif; letter-spacing: -.03em; color: inherit; text-decoration: none; transition: opacity .3s; }
.footer-nav a:hover { opacity: .5; }
.footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 260px)); gap: 32px 48px; }
.footer-col h3 { font-size: 16px; font-weight: 400; color: var(--muted); margin: 0 0 12px; }
.footer-col a, .footer-col button { font: inherit; font-size: 18px; color: inherit; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; transition: opacity .3s; }
.footer-col a:hover, .footer-col > button:hover { opacity: .5; }
.legal { position: absolute; left: 0; right: 0; bottom: 32px; margin: 0; color: var(--muted); font-size: 14px; }
@media (max-width: 760px) {
  .site-footer { gap: 48px; padding-bottom: 96px; }
  .site-footer::before { left: 20px; right: 20px; }
  .footer-nav a { font-size: 3rem; }
  .footer-cols { grid-template-columns: 1fr; }
}


/* Poster images (real edition artwork) */
.poster-img { width: 100%; height: auto; border-radius: 4px; box-shadow: 0 24px 48px -28px rgba(101, 0, 29, .55); }
.card .poster-img { margin: -8px -8px 12px; width: calc(100% + 16px); max-width: none; box-shadow: none; }

/* Homepage header — styled after the Edition Nº1 poster */
body { --pink: #fdcafd; --wine: #9a1622; }
.next-hero { position: relative; background: var(--hero-bg, var(--pink)); color: var(--wine); height: 100svh; min-height: 520px; display: flex; margin-top: calc(-1 * var(--header-h)); padding: calc(var(--header-h) + 24px) 0 clamp(24px, 5vh, 56px); }
.next-hero .wrap { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
/* Poster sits dead centre of the block: equal space above and below, the title stays at the bottom */
.next-poster { position: absolute; inset: clamp(150px, 20svh, 200px) 40px; display: flex; justify-content: center; align-items: center; }
.next-poster .poster-img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.next-label { font-size: .95rem; margin: 0 0 .15em; }
/* Junicode for the big text: bold italic titles, regular paragraphs (About, event description) */
.next-hero h1, .about-text, .event-description { font-family: "Junicode", Georgia, serif; letter-spacing: -.03em; }
.next-hero h1 { font-style: italic; font-weight: 700; font-size: 2.5rem; margin: 0; }
.next-hero .wrap { max-width: none; padding: 0 40px; }
@media (max-width: 900px) { .next-hero .wrap { padding: 0 20px; } .next-poster { left: 20px; right: 20px; } }

a.next-hero { color: var(--wine); text-decoration: none; }
.next-hero.is-dark { color: var(--light); } /* light text on dark posters */
.next-hero--cover { position: relative; height: 80svh; color: #fff; }
.next-hero--cover .wrap { position: relative; z-index: 1; justify-content: flex-end; }
.next-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.next-hero--cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .4), transparent 45%); pointer-events: none; } /* keeps the title readable on any photo */
/* Whole image on the event colour, title below it in the page's dark text (no fade needed) */
.next-hero--contain { color: var(--wine); }
.next-hero--contain::after { content: none; }
.next-hero--contain .next-hero-img { object-fit: contain; padding: calc(var(--header-h) + 16px) 40px 150px; }
@media (max-width: 900px) { .next-hero--contain .next-hero-img { padding: calc(var(--header-h) + 8px) 20px 130px; } }
/* Follow cursor (site.js FT.followCursor): a white circle with a label or icon, mouse only. Used by the homepage
   "See more" block and the photo strips (↔). .hero-cursor is moved by JS; .hero-cursor-dot handles the appear scale
   and the velocity stretch. */
.hero-cursor { position: fixed; top: 0; left: 0; z-index: 20; width: 0; height: 0; pointer-events: none; }
.hero-cursor-dot { position: absolute; left: -48px; top: -48px; width: 96px; height: 96px; border-radius: 50%; background: #fff; color: #000; display: grid; place-items: center; font-size: 15px; box-shadow: 0 10px 30px -12px rgba(101, 0, 29, .35);
  scale: 0; opacity: 0; transition: scale .35s cubic-bezier(.4, 0, .6, 1), opacity .25s ease-out; }
.hero-cursor-dot span { grid-area: 1 / 1; opacity: 0; transition: opacity .2s; }
.hero-cursor-dot svg { display: block; }
@media (pointer: fine) {
  a.next-hero, .photo-strip, .photo-strip .gallery-card { cursor: none; } /* only the linked hero block has the "See more" circle */
  .cursor-on .hero-cursor-dot { scale: 1; opacity: 1; transition: scale .7s cubic-bezier(.22, 1.4, .36, 1), opacity .3s ease-out; }
  .cursor-on .hero-cursor-dot span { opacity: 1; transition: opacity .3s .15s; }
  .photo-strip.is-dragging .hero-cursor-dot { scale: .8; transition: scale .4s cubic-bezier(.22, 1.4, .36, 1); } /* squeezes while held */
  .photo-strip.cursor-on .cursor-open, .photo-strip.cursor-on.on-card .cursor-drag { opacity: 0; transition: opacity .2s; }
  .photo-strip.cursor-on.on-card .cursor-open { opacity: 1; transition: opacity .3s .1s; }
  .sheet-stage { cursor: none; } /* the gallery's ← / → circle */
  .sheet-stage.cursor-on .cursor-prev, .sheet-stage.cursor-on.go-back .cursor-next { opacity: 0; transition: opacity .2s; }
  .sheet-stage.cursor-on.go-back .cursor-prev { opacity: 1; transition: opacity .3s .05s; }
}
.next-hero:focus-visible { outline-offset: -6px; }

/* Homepage About block */
.about-block { color: var(--fg); padding: 160px 0; text-align: center; }
.about-eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: 13px; margin: 0 auto 20px; }
.about-text { font-size: 1.875rem; line-height: 1.1; max-width: 44ch; text-wrap: balance; margin: 0 auto 40px; }
/* Inline CTAs: the underline is drawn as a background so it can animate.
   On hover it slides out to the right, then redraws from the left. */
.inline-cta { display: inline-block; color: var(--accent); font-size: 1rem; line-height: 1.25; text-decoration: none; cursor: pointer; padding-bottom: 3px;
  background: linear-gradient(currentColor, currentColor) 100% 100% / 100% 1px no-repeat; }
.inline-cta:hover, .inline-cta:focus-visible { animation: cta-line .7s cubic-bezier(.65, 0, .35, 1); }
@keyframes cta-line {
  0%     { background-size: 100% 1px; background-position: 100% 100%; }
  50%    { background-size: 0% 1px;   background-position: 100% 100%; }
  50.01% { background-size: 0% 1px;   background-position: 0% 100%; }
  100%   { background-size: 100% 1px; background-position: 0% 100%; }
}
@media (prefers-reduced-motion: reduce) { .inline-cta:hover, .inline-cta:focus-visible { animation: none; } }
@media (max-width: 600px) {
  .about-block { padding: 96px 0; }
  .about-text { font-size: 1.4rem; }
}

/* Homepage Our Events block */
.events-block { color: var(--wine); padding: 0 0 160px; }
.events-block .wrap { max-width: none; padding: 0 40px; }
.events-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 40px; }
.events-head > :first-child { font-size: 1.875rem; margin: 0; color: var(--fg); }
.events-actions { display: flex; align-items: center; gap: 24px; }
.carousel-controls { display: flex; gap: 8px; }
.carousel-btn { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--accent); font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: opacity .2s, background .2s, color .6s var(--theme-ease); }
.carousel-btn:hover:not(:disabled) { background: #fff; }
.carousel-btn:disabled { opacity: .3; cursor: default; }
/* Carousel row (FT.carouselControls / FT.bindCarousel): homepage events, Press page articles */
.events-grid { position: relative; display: flex; flex-wrap: nowrap; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: -16px -40px -40px -12px; padding: 16px 40px 40px 12px; scroll-padding-left: 12px; } /* the padding (offset by the margins) leaves room for a hovered card's lift and shadow */
.events-grid::-webkit-scrollbar { display: none; }
/* Event card component (FT.eventCard) */
.event-card { display: block; color: var(--fg); text-decoration: none; }
.event-card-media { overflow: hidden; border-radius: 4px; transition: transform .6s cubic-bezier(.2, .8, .2, 1), box-shadow .6s cubic-bezier(.2, .8, .2, 1); }
.event-card-media img { width: 100%; height: 100%; object-fit: cover; }
/* Hover (mouse only, so a tap doesn't leave a card stuck): the whole poster lifts a little, with a soft shadow */
@media (hover: hover) { .event-card:hover .event-card-media { transform: scale(1.01); box-shadow: 0 22px 40px -22px rgba(26, 0, 7, .45); } }
.event-card-meta { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; margin: 16px 0 6px; opacity: .7; }
.event-card h3 { font-size: 1.25rem; margin: 0; }
/* Homepage carousel: posters, as wide as the photo strip's cards below */
.events-grid .event-card { flex: 0 0 auto; scroll-snap-align: start; width: var(--card-w); }
.events-grid .event-card-media { aspect-ratio: 4 / 5; }
@media (max-width: 900px) { .events-grid { margin-right: -20px; padding-right: 20px; } }

/* Events page: all events in a grid */
.events-page { padding-top: 48px; }
.events-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 24px; }
@media (max-width: 1000px) { .events-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .events-list { grid-template-columns: 1fr; gap: 40px; } .events-page { padding-top: 24px; } }
@media (max-width: 900px) { .events-block .wrap { padding: 0 20px; } }

/* Phones and tablets: the header blur is one layer instead of four, and it pauses while the theme colours fade
   (html.theme-fading, set by site.js for the fade's 0.6s): re-blurring the changing page every frame halved the frame rate. */
@media (hover: none) {
  .nav-blur > div:not(:last-child) { display: none; }
  .theme-fading .nav-blur { visibility: hidden; }
}

/* Newsletter side panel */
/* Dark theme: the page turns black from the first data-dark-from element down (the footer on pages without one), toggled by site.js */
html.theme-dark { --bg: var(--dark); --ink: #ffe2f8; --fg: #ffe2f8; --accent: #ffe2f8; --muted: rgba(255, 226, 248, .6); --line: rgba(255, 226, 248, .15); }
.nav a, .header-cta, .lang-toggle, .menu-btn, .about-block, .events-head > :first-child, .event-card, .inline-cta, .legal { transition: color .6s var(--theme-ease), opacity .2s; }
.site-footer { transition: color .6s var(--theme-ease); }
html.theme-dark .site-header { --nav-top: var(--dark); }
html.theme-deep .site-header { --nav-top: var(--deep); }
/* Just the header in the dark theme's colours, over a dark event cover (site.js sets html.nav-dark) */
html.nav-dark .site-header { --nav-top: var(--dark); --fg: #ffe2f8; --ink: #ffe2f8; --accent: #ffe2f8; --muted: rgba(255, 226, 248, .6); }
html.theme-dark .carousel-btn:hover:not(:disabled) { background: rgba(255, 226, 248, .12); }

.drawer-scrim { position: fixed; inset: 0; z-index: 40; }
/* Very dark wine panel (logo hue, much darker) with light-pink text (the site background colour). */
.drawer { position: fixed; top: 0; bottom: 0; z-index: 50; width: min(43vw, 860px); min-width: 420px; background: #1a0007; color: #ffe2f8; display: flex; flex-direction: column; padding: 24px 32px 28px; transform: translateX(100%); transition: transform .7s cubic-bezier(.7, 0, .2, 1); overflow-y: auto; }
.drawer--right { right: 0; }
.drawer--left { left: 0; transform: translateX(-100%); }
.drawer--full { width: 100%; min-width: 0; }
.drawer.is-open { transform: none; }
.drawer-top { display: flex; justify-content: space-between; align-items: center; font-size: 20px; }
.drawer-close { border: 0; background: none; padding: 0; color: inherit; cursor: pointer; display: grid; place-items: center; width: 28px; height: 28px; margin: -4px -4px 0 0; }
.drawer-close:hover { opacity: .5; }
.drawer-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 0; }
.drawer-body > * { opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .6s cubic-bezier(.2, .8, .2, 1); }
.drawer.is-open .drawer-body > * { opacity: 1; transform: none; transition-delay: .35s; }
/* The logo file is drawn as a mask so it takes the panel's text colour. */
.drawer-logo { display: block; width: 180px; aspect-ratio: 118 / 83; background: currentColor; -webkit-mask: url(img/logo.svg) center / contain no-repeat; mask: url(img/logo.svg) center / contain no-repeat; margin-bottom: 64px; }
.drawer-text { font-size: 20px; line-height: 1.35; max-width: 34em; margin: 0 0 56px; }
.drawer-form { width: 100%; }
.drawer-form input { display: block; width: 100%; border: 0; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; border-radius: 0; background: none; color: inherit; font-size: 20px; padding: 28px 0; }
.drawer-form input::placeholder { color: inherit; opacity: 1; }
.drawer-form input:focus { outline: none; }
.drawer :focus-visible { outline-color: currentColor; } /* on the dark panel the action colour is the light pink */
.drawer-form input:focus::placeholder { opacity: .4; }
.drawer-form button { margin-top: 32px; border: 0; background: none; padding: 0; font: inherit; font-size: 20px; color: inherit; cursor: pointer; }
.drawer-form button:hover { opacity: .5; }
.drawer-msg { color: inherit; margin-top: 16px; }
.drawer-foot { text-align: center; font-size: 14px; margin: 0; opacity: .7; }
@media (max-width: 700px) { .drawer { width: 100%; min-width: 0; padding: 20px; } }

/* Phone menu drawer: big left-aligned links */
.drawer-menu { flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 48px 0; }
.drawer-menu a, .drawer-menu button { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-decoration: none; cursor: pointer; text-align: left;
  font-size: clamp(2.5rem, 11vw, 4rem); line-height: 1.1; letter-spacing: -.02em;
  opacity: 0; transform: translateX(-16px); transition: opacity .4s, transform .6s cubic-bezier(.2, .8, .2, 1); }
.drawer.is-open .drawer-menu > * { opacity: 1; transform: none; }
.drawer.is-open .drawer-menu > :nth-child(1) { transition-delay: .25s; }
.drawer.is-open .drawer-menu > :nth-child(2) { transition-delay: .3s; }
.drawer.is-open .drawer-menu > :nth-child(3) { transition-delay: .35s; }
.drawer.is-open .drawer-menu > :nth-child(4) { transition-delay: .4s; }
.drawer.is-open .drawer-menu > :nth-child(5) { transition-delay: .45s; }
.drawer-menu > :hover { color: rgba(255, 226, 248, .5); } /* colour, not opacity, so it isn't held back by the entrance delay */
.drawer-menu [aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
.drawer-menu-foot { text-align: left; opacity: 1; }
.drawer-menu-foot .lang-toggle { font-size: 20px; color: inherit; }
@media (prefers-reduced-motion: reduce) { .drawer, .drawer-body > *, .drawer-menu > * { transition: none; } }

/* Homepage photo strip: bottom-aligned cards whose heights step down in threes, scrolls sideways */
.photos-block { padding: 0 0 160px; }
.photo-strip { --w: var(--card-w); display: flex; align-items: flex-end; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 40px; padding: 0 40px; scrollbar-width: none; }
.photo-strip::-webkit-scrollbar { display: none; }
.strip-photo { position: relative; flex: 0 0 auto; margin: 0; scroll-snap-align: start; }
.strip-photo img { width: var(--w); height: calc(var(--w) * 1.5); object-fit: cover; border-radius: 12px; }
.strip-photo:nth-child(3n + 2) img { height: calc(var(--w) * 1.33); }
.strip-photo:nth-child(3n) img { height: calc(var(--w) * 1.25); }
/* Photo credit (FT.photoCredit), styled like the About collage captions: small italic serif, softened */
.photo-credit { margin: 0; font-family: "Junicode", Georgia, serif; font-style: italic; font-size: 1rem; letter-spacing: -.02em; white-space: nowrap; color: var(--fg); opacity: .6; }
.photo-credit a { color: inherit; text-decoration: none; }
.photo-credit a:hover { text-decoration: underline; text-underline-offset: 3px; }
.strip-photo .photo-credit { position: absolute; left: 16px; bottom: 14px; z-index: 1; color: #fff; opacity: .7; text-shadow: 0 0 24px rgba(0, 0, 0, .55), 0 0 10px rgba(0, 0, 0, .35); } /* on the photo: white, a little dimmed, on a very soft dark glow */
.strip-photo .photo-credit:hover { opacity: 1; }
@media (hover: hover) { .photo-strip .photo-credit a { cursor: pointer; } .photo-strip:has(.photo-credit:hover) .hero-cursor { opacity: 0; } } /* the link is a link, not part of the drag */
.sheet-gallery > .photo-credit { flex: none; text-align: center; margin: -8px 0 0; color: var(--dark); }
.photo-strip:focus-visible { outline-offset: 4px; }
.photo-strip.is-dragging { scroll-snap-type: none; user-select: none; }

/* Gallery card (site.js FT.galleryCard): the strip's last card, a tilted stack of photos that fans out on hover */
.gallery-card { flex: 0 0 auto; position: relative; width: var(--w); height: calc(var(--w) * 1.25); scroll-snap-align: start; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--gallery-bg, color-mix(in srgb, #fff 45%, transparent)); color: var(--fg); font: inherit; cursor: pointer; overflow: hidden; } /* --gallery-bg: a section's own card colour */
.gallery-stack { position: absolute; inset: 0 0 56px; display: grid; place-items: center; }
.gallery-stack img { grid-area: 1 / 1; width: 44%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .12); transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.gallery-stack img:nth-child(1) { transform: translate(-14%, 4%) rotate(-8deg); }
.gallery-stack img:nth-child(2) { transform: translate(12%, 8%) rotate(6deg); }
.gallery-stack img:nth-child(3) { transform: translate(0, -6%) rotate(-2deg); }
.gallery-card:hover .gallery-stack img:nth-child(1), .gallery-card:focus-visible .gallery-stack img:nth-child(1) { transform: translate(-46%, 10%) rotate(-14deg); }
.gallery-card:hover .gallery-stack img:nth-child(2), .gallery-card:focus-visible .gallery-stack img:nth-child(2) { transform: translate(44%, 14%) rotate(12deg); }
.gallery-card:hover .gallery-stack img:nth-child(3), .gallery-card:focus-visible .gallery-stack img:nth-child(3) { transform: translate(0, -12%) rotate(0deg) scale(1.06); }
.gallery-label { position: absolute; left: 20px; bottom: 20px; font-size: 16px; }
.gallery-icon { position: absolute; right: 20px; bottom: 22px; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.gallery-card:hover .gallery-icon { transform: scale(1.3); }
@media (prefers-reduced-motion: reduce) { .gallery-stack img, .gallery-icon { transition: none; } }
@media (max-width: 900px) { :root { --card-w: 240px; } .photo-strip { gap: 8px; padding: 0 20px; scroll-padding-left: 20px; } .photos-block { padding-bottom: 96px; } }

/* Event page */
.event-section { color: var(--fg); transition: color .6s var(--theme-ease); padding: 0 0 120px; }
.event-section .wrap { max-width: none; padding: 0 40px; }
.event-info { padding-top: 64px; }
/* Practical info stacked on the left, the description on the right */
.event-intro { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 3fr); gap: 48px 24px; align-items: start; }
.event-facts { display: flex; flex-direction: column; gap: 28px; margin: 0; font-size: 16px; line-height: 1.3; }
.event-facts dt { color: var(--fg); }
.event-facts dd { margin: 0; color: color-mix(in srgb, var(--fg) 55%, transparent); transition: color .6s var(--theme-ease); }
.event-facts ul { list-style: none; margin: 0; padding: 0; }
.event-facts .inline-cta { margin-top: 4px; }
.event-description { font-size: 1.875rem; line-height: 1.1; max-width: 44ch; text-wrap: pretty; margin: -.2em 0 0; }
.event-description p { margin: 0; }
.event-description p + p { margin-top: .6em; }
/* Flipbook (event page): site.js places each card in 3D from its distance to the front one. */
.flipbook-section { overflow-x: clip; } /* cards swinging out mid-flip are cut at the screen edge, not at the page margins */
.flipbook { --w: min(70vw, 400px); display: grid; justify-items: center; perspective: calc(var(--w) * 2); padding: 8px 0 32px; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.flipbook.is-dragging { cursor: grabbing; }
.flipbook-card { grid-area: 1 / 1; width: var(--w); aspect-ratio: 4 / 5; margin: 0; display: flex; justify-content: center; align-items: center; will-change: transform, opacity; backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* each card on its own GPU layer; the box (what you tap and drag) is always poster-sized */
/* the image keeps its own shape, as big as fits the box: a tall menu is a narrower card at full height, a wide one
   (a boarding pass) a shorter card at full width, centred in its box */
.flipbook-card img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; border-radius: 12px; box-shadow: 0 12px 31px rgba(0, 0, 0, .12); -webkit-user-drag: none; }
/* Phones: the card images carry their own rounded corners, so skip the live corner clip and blurred shadow —
   iOS redraws a 3D-moving card every frame, and those made each redraw slow */
@media (hover: none) { .flipbook-card img { border-radius: 0; box-shadow: none; } }
.flipbook:focus-visible { outline: none; }
.flipbook:focus-visible .flipbook-card:not([aria-hidden="true"]) img { outline: 2px solid var(--accent); outline-offset: 4px; }

/* Bottom sheet (site.js FT.openSheet): white, nearly full height, rounded top corners. The panel itself stays still and
   only .sheet-scroll scrolls inside it, so the close button and the phone handle never move with the text.
   The text is one narrow column, a big serif lead then the body. */
.sheet { position: fixed; inset: 24px 0 0; width: 100%; max-width: none; height: auto; max-height: none; margin: 0; padding: 0; border: 0;
  background: #fff; color: var(--dark); overflow: hidden; clip-path: inset(0 round 24px 24px 0 0); } /* clip-path: corners that hold while it slides (iOS drops border-radius clipping) */
.sheet[open] { display: flex; flex-direction: column; }
.sheet-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 24px 96px; }
.sheet::backdrop { background: rgba(26, 0, 7, .5); animation: sheet-dim .5s ease; }
@keyframes sheet-dim { from { opacity: 0; } }
.sheet-close { position: absolute; top: 24px; right: 20px; width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--light); color: var(--dark); box-shadow: 0 0 0 8px #fff; /* a white ring, so text scrolling under it stays clear */
  display: grid; place-items: center; cursor: pointer; z-index: 2; transition: transform .8s cubic-bezier(.19, 1, .22, 1); }
.sheet-close:hover { transform: rotate(90deg); }
.sheet-content:focus { outline: none; }
.sheet-content { max-width: 460px; margin: 0 auto; padding-top: 88px; opacity: 0; transform: translateY(40px); }
.sheet.is-open .sheet-content { opacity: 1; transform: none; transition: opacity .8s .2s, transform 1.8s cubic-bezier(.19, 1, .22, 1) .2s; }
/* Gallery sheet: the photo as big as the sheet allows, whole, with the thumbnails in a row under it */
.sheet--gallery .sheet-scroll { padding-bottom: 24px; overflow: hidden; }
.sheet--gallery .sheet-content { max-width: 1240px; height: 100%; padding-top: 88px; }
.sheet-gallery { height: 100%; display: flex; flex-direction: column; gap: 20px; }
.sheet-stage { flex: 1; min-height: 0; margin: 0; user-select: none; -webkit-user-select: none; container-type: inline-size; } /* cqw below: % of the stage's width */
.sheet-track { --slide: 100; position: relative; height: 100%; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding-inline: calc((100 - var(--slide)) / 2 * 1cqw); scrollbar-width: none; } /* the padding lets the first and last photos snap to the middle */
.sheet-track::-webkit-scrollbar { display: none; }
.sheet-slide { flex: 0 0 calc(var(--slide) * 1cqw); height: 100%; display: flex; justify-content: center; align-items: center; scroll-snap-align: center; scroll-snap-stop: always; }
.sheet-slide img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; -webkit-user-drag: none; }
@media (hover: none) { .sheet-track { --slide: 78; gap: 10px; } } /* phones: the neighbours peek in at the sides, so you know to swipe */
.sheet-thumbs { flex: none; display: flex; gap: 8px; justify-content: safe center; overflow-x: auto; padding: 4px 2px; scrollbar-width: none; }
.sheet-thumbs::-webkit-scrollbar { display: none; }
.sheet-thumbs button { flex: none; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 6px; opacity: .45; transition: opacity .3s; }
.sheet-thumbs button:hover, .sheet-thumbs button[aria-current] { opacity: 1; }
.sheet-thumbs button[aria-current] { outline: 1.5px solid var(--dark); outline-offset: 2px; }
.sheet-thumbs img { display: block; height: 72px; width: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; }
@media (max-width: 700px) { .sheet-thumbs img { height: 56px; } }
.sheet-lead { font-family: "Junicode", Georgia, serif; font-size: 2rem; line-height: 1.1; letter-spacing: -.02em; margin: 0 0 48px; }
.sheet-body p { font-size: 1.125rem; line-height: 1.5; margin: 0 0 1.2em; color: color-mix(in srgb, var(--dark) 72%, #fff); } /* softer than the lead above */
.sheet :focus-visible { outline-color: var(--wine); }
.sheet-handle { display: none; }
/* Phones: a little shorter, so the top stays within thumb reach, and a drawer handle in place of the close button
   (which stays for screen readers) */
@media (max-width: 700px) {
  .sheet { inset-block-start: 10svh; }
  .sheet-scroll { padding: 0 20px 64px; }
  .sheet-handle { display: flex; flex: none; justify-content: center; align-items: center; height: 36px; touch-action: none; cursor: grab; }
  .sheet-handle span { width: 40px; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--dark) 22%, #fff); }
  .sheet-close { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .sheet-content, .sheet--gallery .sheet-content { padding-top: 20px; }
  .sheet-lead { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) { .sheet.is-open .sheet-content { transition: none; } }

/* Photo preview: full screen over the dark scrim */
.lightbox { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 64px 88px 32px; border: 0; background: rgba(26, 0, 7, .94); color: var(--light); overscroll-behavior: contain; }
.lightbox[open] { display: grid; animation: lightbox-in .3s ease; }
.lightbox::backdrop { background: transparent; }
@keyframes lightbox-in { from { opacity: 0; } }
.lightbox-figure { margin: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; }
.lightbox-figure img { max-width: 100%; max-height: calc(100svh - 160px); object-fit: contain; border-radius: 8px; }
.lightbox-close { position: absolute; top: 24px; right: 32px; color: inherit; }
.lightbox-nav { position: absolute; top: 50%; translate: 0 -50%; width: 48px; height: 48px; border: 1px solid currentColor; border-radius: 50%; background: none; color: inherit; display: grid; place-items: center; cursor: pointer; transition: opacity .2s; }
.lightbox-nav:hover { opacity: .5; }
.lightbox-nav--prev { left: 24px; }
.lightbox-nav--next { right: 24px; }
.lightbox :focus-visible { outline-color: var(--light); }
@media (max-width: 700px) {
  .lightbox { padding: 64px 16px 96px; }
  .lightbox-close { right: 20px; }
  .lightbox-nav { top: auto; bottom: 24px; translate: none; }
  .lightbox-nav--prev { left: calc(50% - 56px); }
  .lightbox-nav--next { right: calc(50% - 56px); }
}

/* Event call to action: a big centred question, a detail line, one big button */
.event-cta .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 40px; }
.event-cta h2 { font: italic 700 4rem/1 "Junicode", Georgia, serif; letter-spacing: -.03em; max-width: 22ch; text-wrap: balance; margin: 0; }
.event-cta p { font-size: 1.25rem; margin: 24px 0 32px; opacity: .7; }
.event-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; }

/* Text button (Junicode, underlined) that opens into a pill on hover: the fill blooms from the centre
   (padding is heavier on top because Junicode sits high in its line box),
   as the underline draws in, the letters ease open and turn the page colour. */
.pill-cta { --ease: cubic-bezier(.22, 1, .36, 1); position: relative; isolation: isolate; display: inline-block; white-space: nowrap; border: 0; background: none; padding: .58em 1.1em .32em; font: 400 2.5rem/1 "Junicode", Georgia, serif; letter-spacing: -.03em; color: var(--fg); text-decoration: none; cursor: pointer; transition: color .5s var(--ease), letter-spacing .8s var(--ease); }
.pill-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 999px; background: var(--fg); clip-path: inset(50% 50% round 999px); transition: clip-path .8s var(--ease); }
.pill-cta::after { content: ""; position: absolute; left: 1.1em; right: 1.1em; bottom: .38em; height: 1px; background: currentColor; transition: scale .5s var(--ease); }
.pill-cta:hover, .pill-cta:focus-visible { color: var(--bg); letter-spacing: .01em; }
.pill-cta--small { font-size: 1.375rem; } /* Read more, under a bio */
/* Filled pills, for buttons over pictures: solid (the main action, in the text colour) and soft (a secondary one, on
   the page colour). The fill is always on, so no underline; hover darkens or lightens it. */
.pill-cta--solid, .pill-cta--soft { padding: .5em 1.1em .4em; }
.pill-cta--solid::before, .pill-cta--soft::before { clip-path: inset(0 round 999px); transition: clip-path .8s var(--ease), background-color .3s; }
.pill-cta--solid::after, .pill-cta--soft::after { content: none; }
.pill-cta--solid { color: var(--bg); }
.pill-cta--solid:hover, .pill-cta--solid:focus-visible { color: var(--bg); }
.pill-cta--solid:hover::before, .pill-cta--solid:focus-visible::before { background: color-mix(in srgb, var(--fg) 82%, #000); }
.pill-cta--soft { color: var(--fg); }
.pill-cta--soft::before { background: var(--bg); }
.pill-cta--soft:hover, .pill-cta--soft:focus-visible { color: var(--fg); }
.pill-cta--soft:hover::before, .pill-cta--soft:focus-visible::before { background: #fff; }
.pill-cta:hover::before, .pill-cta:focus-visible::before { clip-path: inset(0 round 999px); }
.pill-cta:hover::after, .pill-cta:focus-visible::after { scale: 0 1; }
.pill-cta:focus-visible { outline: none; }
/* Touch screens keep the hover state after a tap: there the letters don't spread, so the button keeps its width
   and doesn't jump to the next line under the finger. */
@media (hover: none) { .pill-cta:hover { letter-spacing: -.03em; } }
@media (max-width: 900px) { .event-intro { grid-template-columns: 1fr; } .event-description { order: -1; } }
@media (max-width: 900px) { .event-section .wrap { padding: 0 20px; } }
@media (max-width: 600px) {
  .event-section { padding-bottom: 80px; }
  .event-info { padding-top: 40px; }
  .event-description { font-size: 1.5rem; }
  .event-cta h2 { font-size: 2.5rem; }
  .event-cta p { font-size: 1rem; }
  .pill-cta { font-size: 2rem; }
  .pill-cta--small { font-size: 1.375rem; }
}

/* Page transitions, like Collins: the old page sinks back on the dark backdrop while the new one slides up over it
   like a fresh sheet of paper. Only transform and opacity animate (the GPU runs those even while the new page is still
   being built, so the motion never stutters).
   Browsers without cross-page view transitions just navigate. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
:root { --page-turn: .7s; --page-ease: cubic-bezier(.6, .05, .15, 1); }
::view-transition-group(root) { animation-duration: var(--page-turn); }
::view-transition-image-pair(root) { background: var(--dark); }
::view-transition-old(root) { overflow: hidden; animation: var(--page-turn) var(--page-ease) both page-out, var(--page-turn) var(--page-ease) both page-round-in; }
::view-transition-new(root) { overflow: hidden; animation: var(--page-turn) var(--page-ease) both page-in, var(--page-turn) var(--page-ease) both page-round-out; }
@keyframes page-out { to { transform: scale(.94); opacity: .55; } }
@keyframes page-in { from { transform: translateY(100%); } }
/* corners, as their own animations so the movement above stays on the GPU */
@keyframes page-round-in { to { border-radius: 1rem; } }
@keyframes page-round-out { from { border-radius: 1.25rem 1.25rem 0 0; } 70% { border-radius: 1.25rem 1.25rem 0 0; } to { border-radius: 0; } }

/* About: dark from the top (the intro is the page's data-dark-from), all in Junicode Italic, normal case: a big
   statement, then a pinned collage of photos and quotes that pans sideways as you scroll */
.about-intro, .about-collage { color: var(--fg); font-family: "Junicode", Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -.02em; }
.about-intro { text-align: center; padding: calc(50svh - var(--header-h)) 0 160px; } /* the text starts halfway down the screen, leaving the map in view on arrival */
.about-mark { display: block; width: 120px; aspect-ratio: 225 / 65; margin: 0 auto 16px; background: currentColor; -webkit-mask: url(img/mark-table.svg) center / contain no-repeat; mask: url(img/mark-table.svg) center / contain no-repeat; }
.about-since { font-size: 1.125rem; margin: 0 0 40px; }
.about-statement { font-family: "Junicode", Georgia, serif; font-size: 5rem; font-weight: 400; line-height: 1; letter-spacing: -.03em; max-width: 1120px; margin: 0 auto; text-wrap: balance; }
.about-statement em { font-style: inherit; }
/* The flight map, faint and fixed in the middle of the screen behind the whole page (the dark footer covers it) */
.flight-map.about-map { position: fixed; z-index: -1; top: 50%; left: 50%; translate: -50% -50%; width: min(1500px, 115vw); pointer-events: none; }
.about-map { transition: opacity .6s var(--theme-ease), visibility 0s .6s; }
html:not(.theme-dark) .about-map, html.past-deep .about-map { opacity: 0; visibility: hidden; } /* only over the intro and collage; hidden, it stops painting */
html.theme-dark:not(.past-deep) .about-map { transition-delay: 0s; }
.about-map .flight-map-land { opacity: .2; }
.about-map .flight-map-routes { opacity: .6; } /* the plane and cities read a little stronger than the map */
.about-collage { position: relative; }
.collage-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.collage-track { --u: 1svh; position: relative; height: 100%; width: calc(var(--u) * 262); will-change: transform; }
.collage-item { position: absolute; left: calc(var(--u) * var(--x)); top: calc(var(--u) * var(--y)); width: calc(var(--u) * var(--w)); margin: 0; will-change: transform; }
.collage-item img { display: block; width: 100%; aspect-ratio: var(--r, 4 / 5); object-fit: cover; border-radius: 4px; }
.collage-item figcaption { position: absolute; left: 0; bottom: 100%; padding-bottom: 6px; font-size: 1rem; white-space: nowrap; opacity: .6; }
.collage-quote p { font-size: 1.75rem; line-height: 1.1; margin: 0 0 14px; }
.collage-quote cite { font-style: inherit; font-size: 1rem; opacity: .6; }
@media (max-width: 700px) {
  .about-intro { padding-bottom: 96px; }
  .about-statement { font-size: 2.6rem; }
  .collage-quote p { font-size: 1.25rem; }
  .flight-map.about-map { width: 150vw; } /* centred, and small enough that Montréal and every city stay on screen */
}

/* About people: a big photo on one side; the name, a short bio and Instagram on the other; a photo strip underneath */
.about-person { color: var(--fg); padding: 160px 0; transition: color .6s var(--theme-ease); } /* the page stays dark through them, each on its own colour (data-deep) */
.about-person .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.person-photo { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 58% center; border-radius: 4px; }
.person-text { container-type: inline-size; } /* sizes the Chinese name to the column */
.person-text > :not(.person-name) { position: relative; z-index: 1; } /* the eyebrow, bio and links stay in front of the Chinese name as it drifts */
.person-eyebrow { font-family: "Junicode", Georgia, serif; font-style: italic; font-size: 1.125rem; margin: 0 0 12px; }
.person-name { font-family: "Junicode", Georgia, serif; font-size: 4rem; font-weight: 400; line-height: 1; letter-spacing: -.03em; margin: 0 0 32px; text-wrap: balance; position: relative; isolation: isolate; }
/* Chinese name, in Noto Serif TC Light (open licence, loaded on about.html; close to Apple's Songti TC Light): very big, behind the Latin name, a shade darker than the section's colour, so it sits back from the text.
   It drifts slightly as you scroll (data-speed). */
.person-zh { position: absolute; z-index: -1; left: -.04em; top: 50%; margin-top: -.55em; font-family: "Noto Serif TC", "Source Han Serif TC", "Songti TC", serif; font-weight: 300;
  font-size: min(11rem, 31cqw); line-height: 1; letter-spacing: 0; white-space: nowrap; color: color-mix(in srgb, #000 18%, var(--deep, var(--dark))); pointer-events: none; will-change: transform; }
.person-bio { font-size: 1.125rem; line-height: 1.5; max-width: 46ch; margin: 0 0 24px; }
.person-more { display: table; margin: -8px 0 24px -1.1em; } /* its label lines up with the bio; the pill grows around it */
.about-person + .about-person { padding-top: 0; }
.about-person .photo-strip { margin-top: 96px; }
.about-person--flip .person-photo { order: 1; } /* mirrored: photo on the right */
@media (max-width: 700px) {
  .about-person { padding: 96px 0; }
  .about-person .photo-strip { margin-top: 56px; }
  .about-person .wrap { grid-template-columns: 1fr; gap: 40px; }
  .person-name { font-size: 2.6rem; }
  .about-person--flip .person-photo { order: 0; }
}

/* Flight map (site.js FT.flightMap): the still map image under the animated routes, each on its own GPU layer */
.flight-map { position: relative; aspect-ratio: 1020 / 520; color: var(--fg); }
.flight-map > * { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; }
.flight-trail path { fill: none; stroke: currentColor; stroke-width: 1.1; stroke-opacity: .22; } /* 8 of these overlap at the nose */
.flight-city circle { fill: currentColor; }
.flight-city .flight-ring { fill: none; stroke: currentColor; stroke-width: .45; }

/* While site.js sets the theme on page load, nothing fades (a page that opens dark is simply dark) */
.no-theme-fade, .no-theme-fade *, .no-theme-fade *::before, .no-theme-fade *::after { transition: none !important; }

/* Hidden on screen, still read out (the copy buttons' "Copied") */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Press page: every section lines up with the carousel and photo strip, 40px in from the edges */
.press-about .wrap, .press-photos .wrap, .press-kit .wrap { max-width: none; padding: 0 40px; }
.press-intro { padding-bottom: 120px; }
.press-email { margin: 12px 0 0; font-size: 14px; opacity: .7; user-select: all; }
.press-about { color: var(--fg); padding: 0 0 160px; }
.press-blurb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px 40px; padding: 40px 0; border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
.press-blurb-head h3, .press-downloads h3 { font-family: "Junicode", Georgia, serif; font-size: 1.75rem; letter-spacing: -.02em; margin: 0 0 6px; }
.press-blurb-head p { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; opacity: .7; margin: 0; }
.press-blurb-body p { font-size: 1.125rem; line-height: 1.5; max-width: 60ch; margin: 0 0 16px; }
.press-blurb-body .pill-cta, .press-kit > .wrap > .pill-cta { margin-left: -1.1em; } /* the label lines up with the text; the pill grows around it */
.press-photos .events-head { margin-bottom: 32px; }
.press-kit { color: var(--fg); padding: 0 0 160px; }
.press-kit-note { margin: 4px 0 48px; font-size: 14px; opacity: .7; }
.press-kit-note .press-size:not(:empty)::before { content: "· "; }
.press-downloads { list-style: none; margin: 0; padding: 0; }
.press-downloads li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 24px; padding: 24px 0; border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
.press-downloads p { margin: 0; font-size: 15px; opacity: .7; }
.press-downloads .press-size { grid-column: 2; justify-self: end; font-size: 13px; opacity: .6; }
@media (max-width: 900px) {
  .press-about .wrap, .press-photos .wrap, .press-kit .wrap { padding: 0 20px; }
  .press-blurb { grid-template-columns: 1fr; gap: 16px; padding: 32px 0; }
  .press-about, .press-kit { padding-bottom: 96px; }
  .press-intro { padding-bottom: 80px; }
}

/* Folded newspaper card (FT.foldedPage): the top half of the page lies face up, tilted a little; the bottom half is
   folded under it. Opening (hover, focus, .is-open) straightens it and swings the bottom half down toward you, while
   the headline below slides down by the same half page. The flap is drawn first, so while it's still folded the top
   half covers it. */
.paper-card { --paper-ease: cubic-bezier(.65, 0, .25, 1); --flap-ease: cubic-bezier(.3, 0, .15, 1); /* the flap starts quickly: it's hidden under the top half until it passes upright */ --half: calc(100cqw * var(--ratio) / 2); container-type: inline-size; }
.events-grid .paper-card .event-card-media { aspect-ratio: auto; overflow: visible; border-radius: 0; } /* the folded page sets its own shape */
.paper { position: relative; perspective: 1400px; perspective-origin: 50% 0; transform: rotate(-2deg); transform-origin: 50% 100%; transition: transform 1s var(--paper-ease); }
.paper-top, .paper-flap-front, .paper-flap-back { background: #f4f1ea; overflow: hidden; }
.paper-top { position: relative; aspect-ratio: 2 / var(--ratio); border-radius: 2px 2px 0 0; box-shadow: 0 1px 0 #ddd6c8, 0 3px 0 #ebe5d9, 0 28px 44px -18px rgba(26, 0, 7, .6), 0 4px 12px rgba(26, 0, 7, .14); transition: box-shadow 1s var(--paper-ease); }
.paper-flap-front { border-radius: 0 0 2px 2px; box-shadow: 0 28px 44px -18px rgba(26, 0, 7, .5), 0 4px 12px rgba(26, 0, 7, .12); } /* folded: the pages' edges at the fold, and a shadow */
.paper-top img, .paper-flap-front img { position: absolute; left: 0; width: 100%; height: 200%; max-width: none; object-fit: cover; }
.paper-top img { top: 0; }
.paper-flap-front img { top: -100%; }
.paper-flap { position: absolute; left: 0; right: 0; top: 100%; height: 100%; transform-origin: 50% 0; transform-style: preserve-3d; transform: rotateX(-180deg); transition: transform .9s var(--flap-ease); }
.paper-flap-front, .paper-flap-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.paper-flap-back { transform: rotateX(180deg); }
/* Light falls on the flap as it opens: dark while folded, clear once flat, with a faint crease at the fold */
.paper-flap-front::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(40, 20, 10, .14), transparent 6%), rgba(26, 0, 7, .5); transition: background-color .9s var(--flap-ease); }
.paper-card .event-card-meta, .paper-card h3 { position: relative; transition: transform .9s var(--flap-ease) .08s; } /* just behind the flap's edge */
.paper-card:is(:focus-visible, .is-open) .paper { transform: none; }
.paper-card:is(:focus-visible, .is-open) .paper-flap { transform: none; }
.paper-card:is(:focus-visible, .is-open) .paper-flap-front::after { background-color: transparent; }
.paper-card:is(:focus-visible, .is-open) .paper-top { box-shadow: 0 0 0 transparent, 0 0 0 transparent, 0 24px 40px -18px rgba(26, 0, 7, .4), 0 4px 12px rgba(26, 0, 7, .12); }
.paper-card:is(:focus-visible, .is-open) :is(.event-card-meta, h3) { transform: translateY(var(--half)); }
.paper-card:focus-visible { outline: none; }
@media (hover: hover) {
  .paper-card:hover .event-card-media { transform: none; box-shadow: none; }
  .paper-card:hover .paper { transform: none; }
  .paper-card:hover .paper-flap { transform: none; }
  .paper-card:hover .paper-flap-front::after { background-color: transparent; }
  .paper-card:hover .paper-top { box-shadow: 0 0 0 transparent, 0 0 0 transparent, 0 24px 40px -18px rgba(26, 0, 7, .4), 0 4px 12px rgba(26, 0, 7, .12); }
  .paper-card:hover :is(.event-card-meta, h3) { transform: translateY(var(--half)); }
}
@media (prefers-reduced-motion: reduce) { .paper, .paper-flap, .paper-top, .paper-flap-front::after, .paper-card .event-card-meta, .paper-card h3 { transition: none; } }
/* The Press carousel leaves room below for a page to unfold into, and on the left for the paper's shadow (the row
   scrolls sideways, so anything past its padding is cut off) */
.press-articles .events-grid { padding-bottom: calc(var(--card-w) * var(--unfold-ratio, 0) / 2 + 40px); margin-left: -40px; padding-left: 40px; scroll-padding-left: 40px; }
@media (max-width: 900px) { .press-articles .events-grid { margin-left: -20px; padding-left: 20px; scroll-padding-left: 20px; } }
.paper-card .event-card-meta { margin-top: 32px; }
.press-articles { padding-bottom: 120px; }

/* Homepage banner with no event coming up (FT.introHero): the page colour, the line in the middle, and the past posters
   behind in a line coming out of the distance. Every poster flies the same path, from far behind the screen to past the
   left edge, turned a little toward the right; the perspective does the rest (far ones small, near ones large and
   fast). The delays spread them out along the path. */
.intro-hero { position: relative; height: 100svh; min-height: 520px; margin-top: calc(-1 * var(--header-h)); overflow: hidden; display: grid; justify-items: center; align-content: start; padding-top: calc(var(--header-h) + 12svh); color: var(--logo); text-align: center; } /* the logo's colour: no event, no event colour. The line sits high, above the posters */
.intro-posters { --poster: min(44vw, 64svh); position: absolute; inset: 14% 0 -14%; perspective: 1100px; perspective-origin: 50% 45%; transform-style: preserve-3d; } /* as big as the screen allows; preserve-3d stacks the posters by depth, not page order (a poster starting over at the back must go behind the rest) */
.intro-posters img { position: absolute; left: 50%; top: 50%; width: var(--poster); aspect-ratio: 4 / 5; margin: calc(var(--poster) * -.625) 0 0 calc(var(--poster) * -.5);
  animation: intro-fly var(--flight) linear infinite; will-change: transform; }
/* The path bends in depth, like a road: on the right it runs straight away from you into the distance; closer, it
   turns toward you and sweeps out past the left edge. At the far end the
   posters are specks, so they fade in there unseen. */
@keyframes intro-fly {
  0%   { transform: translate3d(500vw, -50vh, -12000px) rotateY(-28deg); opacity: 0; }
  8%   { opacity: 1; }
  20%  { transform: translate3d(329vw, -30vh, -7000px) rotateY(-28deg); }
  40%  { transform: translate3d(193vw, -15vh, -3500px) rotateY(-28deg); }
  55%  { transform: translate3d(119vw, -6vh, -2000px) rotateY(-28deg); }
  70%  { transform: translate3d(53vw, 4vh, -1000px) rotateY(-28deg); }
  80%  { transform: translate3d(0, 12vh, -400px) rotateY(-28deg); }
  90%  { transform: translate3d(-52vw, 19vh, 48px) rotateY(-28deg); }
  100% { transform: translate3d(-105vw, 21vh, 520px) rotateY(-28deg); opacity: 1; }
}
/* The posters fade into the page colour toward the bottom, so the block has no hard edge. (An overlay, not a mask on
   the posters: a mask would flatten their 3D and break the stacking by depth.) */
.intro-hero::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28%; z-index: 1; pointer-events: none; background: linear-gradient(rgba(255, 226, 248, 0), #ffe2f8 85%); }
/* The page colour gathers softly in the middle, so the line reads over the posters */
.intro-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 34% 22% at 50% 32%, rgba(255, 226, 248, .6) 35%, rgba(255, 226, 248, .4) 60%, rgba(255, 226, 248, 0) 100%); }
.intro-text { position: relative; z-index: 1; padding: 0 20px; }
.intro-text h1 { font-family: "Junicode", Georgia, serif; font-style: italic; font-weight: 700; font-size: clamp(2rem, 4.6vw, 4rem); line-height: 1.02; letter-spacing: -.03em; margin: 0; text-wrap: balance; }
.intro-text .next-label { margin-bottom: 12px; }
/* Under the line: the newsletter as the main button, Instagram as a plain link beside it */
.intro-actions { --fg: var(--logo); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 28px; margin-top: 28px; }
@media (max-width: 600px) {
  .intro-hero { padding-top: calc(var(--header-h) + 8svh); }
  .intro-posters { --poster: 64vw; inset: 20% 0 -20%; } /* phones: the line runs a little below the text */
  .intro-hero::after { background: radial-gradient(ellipse 62% 15% at 50% 28%, rgba(255, 226, 248, .6) 35%, rgba(255, 226, 248, .4) 60%, rgba(255, 226, 248, 0) 100%); }
}
@media (prefers-reduced-motion: reduce) { .intro-posters img { animation-play-state: paused; } } /* stays put, spread along the line */