/* Christmas on the Quay
   Loads after /style.css and re-points its tokens to the poster, so the shared components take its colours and type.
   Colours are sampled from the artwork: glas is the poster red, nos the ink, ewyn the cream lettering, aur the bell gold.
   Type: Fraunces at its softest and blackest stands in for the poster's ON THE QUAY lettering, Yellowtail for its
   Christmas script. Both are open-licence fonts, self-hosted from /fonts.
   Contrast rules: cream or white on the poster red is only 3.9:1, short of AAA even for large text, so no text sits
   directly on the red. Words go on cream panels in ink (or in --glas-dwfn, a deeper red that clears 4.5:1 for script
   at 24px and over), the way the poster sets its lettering apart with ink outlines and drop shadows. */

@font-face {
  font-family: "Fraunces Soft";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/fonts/fraunces-soft-black-latin-900.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces Soft";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/fonts/fraunces-soft-black-latin-ext-900.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Yellowtail";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/yellowtail-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Yellowtail";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/yellowtail-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --glas: #D83937;
  --glas-dwfn: #A82522;
  --nos: #1D1A17;
  --ewyn: #F4ECDB;
  --white: #FFFDF8;
  --aur: #F3B935;
  --aur-dwfn: #DDA21E;
  --awyr: #EFE4CC;

  --font-display: "Fraunces Soft", "Cooper Black", Georgia, serif;
  --font-script: "Yellowtail", "Brush Script MT", cursive;
  --text-h2: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  --shadow: 6px 6px 0 var(--nos);
}

h1, h2, h3, .site-header__brand, .site-footer__name {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 0.005em;
  line-height: 1.05;
}
h3 { font-size: 1.375rem; }
/* Section titles in capitals, like ON THE QUAY */
h2 { text-transform: uppercase; letter-spacing: 0.01em; line-height: 1; }

/* Script labels, like the poster's "Christmas" */
.eyebrow {
  font-family: var(--font-script);
  font-size: 1.75rem;
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--glas-dwfn);
  margin-bottom: 0.25rem;
}

/* Buttons take the poster's small capitals (GIFTS & CRAFTS / CONWY) and an ink drop shadow */
.button {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.25;
  padding-block: 0.6rem;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 var(--nos);
}
.button--primary { border-color: var(--nos); }
.site-header__brand { font-size: 1.5rem; }
/* The phone menu button matches the buttons, not Oktoberfest's Bebas */
.menu-toggle {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* The body font runs wider than Bebas, so on small phones the header's labels tighten up to keep one line */
.site-header__cta,
.menu-toggle { white-space: nowrap; }
@media (max-width: 399px) {
  .site-header__brand { font-size: 1.375rem; }
  .site-header__cta,
  .menu-toggle { font-size: 0.9375rem; letter-spacing: 0.03em; }
  .site-header__cta { padding-inline: 0.75rem; }
}
@media (max-width: 359px) {
  .menu-toggle__icon { display: none; }
}

/* ---------- Hero ---------- */

/* The art carries its own paper texture and red, so the hero is the art: no frame, no grain, edge to edge. */
.hero {
  padding: 0 0 clamp(2rem, 5vw, 3rem);
  background-image: none;
}
.hero__title { margin: 0; }
/* The art is nearly square, so on short, wide screens its height sets the size and the button stays in view.
   It never drops below 18rem, which keeps it readable on a phone held sideways. */
.hero__art {
  width: min(100%, 36rem, max(18rem, (100svh - 15rem) * 0.98));
  border: 0;
  outline: 0;
  border-radius: 0;
}
/* The art's edges fade into the flat red around it, so no seam shows where it is narrower than the screen.
   The poster's margins are empty red, so nothing is lost. */
.hero__art {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, #000 95%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, #000 95%, transparent);
  mask-composite: intersect;
}
.hero .facts { margin-top: 0.25rem; padding-inline: 1.25rem; }
.hero__actions { margin-top: 1.5rem; }

/* ---------- Sections: cream panels on the poster red ---------- */

.section--dark,
.section--light {
  background: var(--glas);
  color: var(--nos);
  padding-block: 0 clamp(2.5rem, 6vw, 4.5rem);
}
.section > .wrap {
  padding: clamp(1.5rem, 4vw, 3rem);
  background: var(--ewyn);
  border: 3px solid var(--nos);
  border-radius: 6px;
  box-shadow: var(--shadow);
}
.section .lede { margin-bottom: 1.5rem; }
.section .book { margin-bottom: 1.25rem; }
.section .book + .small { margin-bottom: 0; }
.section--dark .small { color: var(--nos); }
/* Sections sit tight under the hero; a page that opens on one (the 404) gets the same gap above as below. */
main > .section:first-child { padding-top: clamp(2.5rem, 6vw, 4.5rem); }

/* Features: one column on phones, two on tablets, three by three on wider screens.
   A star in place of Oktoberfest's wheat sprig. */
.features { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) {
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 56rem) {
  .features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.features li {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23A82522'%3E%3Cpath d='M12 2l2.9 6.6 7.1.6-5.4 4.7 1.6 7L12 17.2 5.8 20.9l1.6-7L2 9.2l7.1-.6z'/%3E%3C/svg%3E");
}

/* Headings inside a section: daytime and evening on What to expect, the charity under Tickets. */
.subhead { margin-top: 2.5rem; }
.subhead + p { margin-top: 0.5rem; }
.subhead + p + .features { margin-top: 1.5rem; }

/* Photos from past events: two across on phones, four on wider screens, so twelve and four both fill their rows. */
.gallery__title { margin-top: 2rem; }
.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-block: 1rem 0;
}
@media (min-width: 48rem) {
  .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
}
.gallery li { max-width: none; }
.gallery img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 3px solid var(--nos);
  border-radius: 4px;
  background: var(--awyr);
}

.past-events { display: grid; gap: 0.25rem; margin-top: 2rem; }

.site-footer { background-image: none; }

/* ---------- Snow ----------
   Two layers of flakes, each a tile of soft cream dots that slides down exactly one tile and repeats, so the loop has
   no seam. Only transform animates, which the compositor handles without repainting the page. The flakes fall over
   everything but the header, never take a click, and vanish for anyone who prefers reduced motion. */

.snow {
  position: fixed;
  inset: 0;
  z-index: 10;
  overflow: hidden;
  pointer-events: none;
}
.snow::before,
.snow::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  will-change: transform;
}
.snow::before {
  top: -320px;
  bottom: 0;
  background-image:
    radial-gradient(circle at 30px 40px, rgba(255, 253, 248, 0.9) 2px, transparent 3px),
    radial-gradient(circle at 150px 110px, rgba(255, 253, 248, 0.8) 2.5px, transparent 3.5px),
    radial-gradient(circle at 260px 30px, rgba(255, 253, 248, 0.85) 1.5px, transparent 2.5px),
    radial-gradient(circle at 90px 200px, rgba(255, 253, 248, 0.8) 2px, transparent 3px),
    radial-gradient(circle at 220px 250px, rgba(255, 253, 248, 0.9) 3px, transparent 4px),
    radial-gradient(circle at 300px 170px, rgba(255, 253, 248, 0.75) 1.5px, transparent 2.5px);
  background-size: 320px 320px;
  animation: snow-near 16s linear infinite;
}
.snow::after {
  top: -240px;
  bottom: 0;
  background-image:
    radial-gradient(circle at 60px 20px, rgba(255, 253, 248, 0.6) 1px, transparent 2px),
    radial-gradient(circle at 180px 90px, rgba(255, 253, 248, 0.55) 1.5px, transparent 2.5px),
    radial-gradient(circle at 20px 150px, rgba(255, 253, 248, 0.6) 1px, transparent 2px),
    radial-gradient(circle at 130px 200px, rgba(255, 253, 248, 0.5) 1.5px, transparent 2.5px),
    radial-gradient(circle at 220px 170px, rgba(255, 253, 248, 0.55) 1px, transparent 2px);
  background-size: 240px 240px;
  animation: snow-far 24s linear infinite;
}
@keyframes snow-near {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(14px, 160px, 0); }
  100% { transform: translate3d(0, 320px, 0); }
}
@keyframes snow-far {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-10px, 120px, 0); }
  100% { transform: translate3d(0, 240px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .snow { display: none; }
}

/* ---------- Focus: ink on cream and red, gold on ink ---------- */

:focus-visible { outline-color: var(--nos); }
.site-header :focus-visible,
.site-footer :focus-visible { outline-color: var(--aur); }

@media (forced-colors: active) {
  .hero__art { border: 0; }
  .section > .wrap { border-color: CanvasText; }
  .snow { display: none; }
}

/* ---------- Sessions: one card per day ---------- */

@media (min-width: 60rem) {
  .sessions--days { grid-template-columns: repeat(3, 1fr); }
}
.sessions--days .session { background: var(--white); }
.day { display: grid; align-content: start; gap: 0.75rem; flex-grow: 1; margin-block: 0.25rem 0.5rem; }
.day li {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 1rem;
  max-width: none;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(29, 26, 23, 0.25);
}
.day li:last-child { border-bottom: 0; padding-bottom: 0; }
.day__name { font-weight: 600; }
.day__price {
  grid-row: span 2;
  align-self: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.75rem;
  line-height: 1;
}
.day__detail { font-size: var(--text-small); font-variant-numeric: tabular-nums; }
.sessions__notes { margin-top: 1.5rem; }

/* FAQ rules in ink rather than Oktoberfest navy */
.faq { border-top-color: rgba(29, 26, 23, 0.3); }
.faq:last-of-type { border-bottom-color: rgba(29, 26, 23, 0.3); }
.section__title + .faq { margin-top: 1.5rem; }