/* ==========================================================================
   BONNY BOOZE
   Plain HTML, CSS, vanilla JS. No build step. Edit this file directly.
   Australian English. No em dashes anywhere in copy or comments.
   Warm, sunlit direction: cream ground, coral and a blue accent.
   ========================================================================== */

/* ---- Fonts (self hosted, no CDN) ----------------------------------------- */
@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/fraunces-var.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url("assets/fonts/martianmono-var.woff2") format("woff2");
  font-weight: 300 800;
  font-stretch: 75% 112%;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("assets/fonts/instrumentsans-var.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
}

/* ---- Tokens -------------------------------------------------------------- */
:root {
  /* Palette. Coral and sand are locked, straight from the logo files. */
  --cream:  #FDF6EC;  /* warm ground, the page */
  --ink:    #0F2B3D;  /* body text on cream, and the footer ground */
  --red:    #E8503A;  /* display red: wordmark, headlines, eyebrows, the sun */
  --coral:  #F27D72;  /* soft brand coral, from the SVGs, for fills not text */
  --sand:   #F2C288;  /* brand sand, from the SVGs */
  --blue:   #3E5E9E;  /* accent block and primary buttons */
  --mint:   #A9D6C2;  /* sea glass, checkered dividers only */
  --depth:  #0B1F2C;  /* deepest, footer and age gate ground */

  /* Hairlines drawn in warm ink. */
  --rule:  rgba(15, 43, 61, 0.16);
  --rule-strong: rgba(15, 43, 61, 0.3);
  --ink-dim: rgba(15, 43, 61, 0.66);
  --cream-dim: rgba(253, 246, 236, 0.72);

  /* Type roles. Swap any one of these in a single line. */
  --font-display: "Fraunces", Georgia, serif; /* fallback only, the wordmark is artwork */
  --font-headline: "Fraunces", Georgia, serif;
  --font-mono: "Martian Mono", ui-monospace, "SFMono-Regular", monospace;
  --font-body: "Instrument Sans", system-ui, -apple-system, sans-serif;

  /* A soft, slightly wonky cut of the serif for display use. */
  --headline-vary: "opsz" 144, "SOFT" 55, "WONK" 0;

  /* Type scale. Deliberate jumps, not an even ratio. */
  --t-micro: 0.72rem;
  --t-small: 0.82rem;
  --t-body: 1.0625rem;
  --t-lead: clamp(1.15rem, 2.2vw, 1.55rem);
  --t-h2: clamp(2rem, 5vw, 3.4rem);
  --t-place: clamp(2.6rem, 8vw, 6.5rem);

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --stack: clamp(3.5rem, 7vw, 6rem);

  color-scheme: light;
}

/* ---- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
img, svg { display: block; }

body.is-gated { overflow: hidden; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Shared type helpers ------------------------------------------------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-stretch: 75%;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
}
.section-title {
  font-family: var(--font-headline);
  font-variation-settings: var(--headline-vary);
  font-weight: 600;
  font-size: var(--t-h2);
  line-height: 1.0;
  letter-spacing: -0.005em;
  color: var(--red);
}
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.section-head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.9rem;
}

/* ---- Focus states -------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-weight: 600;
  font-size: var(--t-small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 2px solid transparent;
  padding: 0.9em 1.5em;
  border-radius: 999px;
  transition: transform 0.12s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
}
.btn--solid {
  background: var(--blue);
  color: var(--cream);
}
.btn--solid:hover { background: var(--red); }
.btn--solid:active { transform: translateY(1px); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.btn--ghost:hover { border-color: var(--ink); }

/* ==========================================================================
   AGE GATE
   ========================================================================== */
/* Down by default. The head script raises it by putting .bb-gating on <html>
   before the first paint, so the site is never glimpsed behind it. If that
   script does not run there is no gate and no lockout. */
.agegate {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--cream);
  display: none;
  place-items: center;
  padding: var(--gutter);
}
html.bb-gating .agegate { display: grid; }

/* Hold the site down for the same pre paint window. JS drops .bb-gating the
   moment the visitor confirms, which hands the page back. */
html.bb-gating .site { visibility: hidden; }
html.bb-gating, html.bb-gating body { overflow: hidden; }
.agegate__inner {
  width: min(34rem, 100%);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.75rem, 4vw, 2.75rem);
}
.agegate__sun {
  width: clamp(110px, 26vw, 170px);
  height: auto;
  color: var(--red);
  animation: breathe 9s ease-in-out infinite;
}
.agegate__question {
  font-family: var(--font-headline);
  font-variation-settings: var(--headline-vary);
  font-weight: 500;
  font-size: clamp(1.6rem, 4.5vw, 2.35rem);
  line-height: 1.12;
  color: var(--ink);
  text-wrap: balance;
}
.agegate__ask { display: flex; flex-direction: column; gap: clamp(1.5rem, 4vw, 2.25rem); align-items: center; }
.agegate__buttons { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; }
.agegate__deadend { display: flex; flex-direction: column; gap: 1.5rem; align-items: center; }
.agegate__deadend-sub { color: var(--ink-dim); max-width: 26rem; }

/* ==========================================================================
   LAYOUT SHELL
   Cream sections cap their content and centre it. The hero, the checkered
   log ground and the colour bands go full bleed.
   ========================================================================== */
.pouring {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.band { position: relative; padding-inline: var(--gutter); }
.wrap { max-width: 1320px; margin-inline: auto; }

/* anchor targets land with a little breathing room */
#log, #pouring, #tip { scroll-margin-top: 1.5rem; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ==========================================================================
   NAV  (minimal: small wordmark, three anchors)
   ========================================================================== */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  max-width: 1320px;
  margin-inline: auto;
  padding: clamp(1rem, 2.5vw, 1.5rem) var(--gutter);
}
.nav__brand { display: block; }
.nav__mark {
  width: clamp(150px, 16vw, 190px);
  height: auto;
  color: var(--red);
  /* standing the B up puts it about 4.5 user units (roughly 1.3px at this
     size) above the top of the viewBox, so let it draw outside the frame
     rather than paying for a taller box. */
  overflow: visible;
}
.nav__links {
  display: flex;
  gap: clamp(1rem, 3vw, 2.25rem);
  flex-wrap: wrap;
}
.nav__link {
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.nav__link:hover { color: var(--red); border-color: var(--red); }

/* Wavy top edge on colour bands.
   Sits directly on the band's top edge and is pulled down a pixel, so no
   hairline seam can appear between the wave and the band it belongs to. */
.wave {
  position: absolute;
  left: 0;
  bottom: 100%;
  margin-bottom: -1px;
  width: 100%;
  height: clamp(22px, 4vw, 42px);
  display: block;
}
.tip .wave path { fill: var(--blue); }
.foot .wave path { fill: var(--depth); }

/* ==========================================================================
   HERO / LAST SEEN
   A full bleed film photograph with the brand mark centred on it, then the
   sighting presented as a log entry with its polaroid stack.
   ========================================================================== */
.hero {
  position: relative;
  width: 100%;
  min-height: clamp(400px, 58svh, 620px);
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
/* the photo layer fills the hero; positioned on .photo--hero so it wins
   over the shared .photo rule that follows */

/* ---- Real photographs with a subtle film treatment ----------------------- */
.photo {
  position: relative;
  background-size: cover;
  background-position: center;
  filter: saturate(0.86) contrast(0.96) sepia(0.13) brightness(1.02);
}
.photo::after {
  /* film grain and a gentle warm vignette */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(120% 105% at 50% 40%, transparent 62%, rgba(74, 46, 22, 0.2)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.photo--hero {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("assets/beach-hero.jpg");
  /* bias the crop upward so the horizon drops and the centre stays open sky */
  background-position: center 12%;
  filter: saturate(0.92) contrast(1.0) sepia(0.08) brightness(1.02);
  animation: kenburns 36s ease-in-out infinite alternate;
}
/* the faintest warm vignette, so the mark has something to sit on */
.photo--hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 58% at 50% 46%, rgba(120, 66, 30, 0.12), transparent 70%);
  pointer-events: none;
  z-index: 1;
}
.photo--p1 { background-image: url("assets/polaroid-01.jpg"); background-position: center 28%; }
.photo--p2 { background-image: url("assets/polaroid-02.jpg"); background-position: center 45%; }
.photo--p3 { background-image: url("assets/polaroid-03.jpg"); }

/* The mark, centred on the photograph. The only thing on it. */
.hero__sun {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(120px, 14vw, 210px);
  height: auto;
  color: var(--red);
  animation: breathe-centred 9s ease-in-out infinite;
}

.btn--coral { background: var(--coral); color: var(--ink); }
.btn--coral:hover { background: var(--sand); }

/* ---- Last seen: its own section, on cream ------------------------------- */
.lastseen-sec {
  max-width: 1320px;
  margin-inline: auto;
  padding: clamp(3.5rem, 8vw, 6.5rem) var(--gutter) var(--stack);
}
.lastseen {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.lastseen__info {
  display: grid;
  justify-items: start;
  gap: clamp(0.6rem, 1.6vw, 0.95rem);
}
.lastseen__eyebrow { color: var(--red); }
.lastseen__place {
  font-family: var(--font-headline);
  font-variation-settings: var(--headline-vary);
  font-weight: 600;
  font-size: var(--t-place);
  line-height: 0.94;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 14ch;
}
.lastseen__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em 1rem;
  align-items: center;
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--t-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-top: 0.35rem;
}
.lastseen__meta b { color: var(--ink); font-weight: 600; }
.lastseen__meta .dot { color: var(--coral); }
.lastseen__status {
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--t-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.lastseen__thesis {
  margin-top: clamp(0.75rem, 2vw, 1.25rem);
  max-width: 38ch;
  color: var(--ink-dim);
  font-size: 1rem;
  line-height: 1.55;
}

/* ---- Polaroid stack ------------------------------------------------------ */
.stack {
  margin: 0;
  position: relative;
  justify-self: end;
  width: min(100%, 330px);
}
.polaroid {
  background: #FFFDF6;
  padding: 0.75rem 0.75rem 1rem;
  border-radius: 6px;
  box-shadow:
    0 2px 6px rgba(15, 43, 61, 0.12),
    0 14px 34px rgba(15, 43, 61, 0.16);
}
.polaroid--front {
  position: relative;
  transform: rotate(3deg);
}
.polaroid--back {
  position: absolute;
  inset: 0;
  transform: rotate(-5deg) translate(-16px, 8px);
  box-shadow: 0 2px 8px rgba(15, 43, 61, 0.14);
}
.polaroid__img {
  aspect-ratio: 4 / 3.4;
  border-radius: 3px;
  overflow: hidden;
}
.polaroid__cap {
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-align: center;
  padding-top: 0.8rem;
  margin: 0;
}
/* ---- The quiet status label --------------------------------------------- */
.status {
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
}
.status[data-tone="pouring"] { color: var(--blue); }

/* ==========================================================================
   THE LOG
   A paper manifest centred on a sea glass checkered ground.
   ========================================================================== */
.log {
  padding: var(--stack) var(--gutter);
  background: repeating-conic-gradient(var(--mint) 0% 25%, var(--cream) 0% 50%);
  background-size: clamp(56px, 8vw, 96px) clamp(56px, 8vw, 96px);
}
.log__paper {
  max-width: 1000px;
  margin-inline: auto;
  background: #FFFDF6;
  border-radius: 14px;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  box-shadow:
    0 3px 10px rgba(15, 43, 61, 0.08),
    0 20px 48px rgba(15, 43, 61, 0.14);
}

.log__table { width: 100%; }
.log__row {
  display: grid;
  grid-template-columns:
    minmax(5rem, 0.7fr)
    minmax(9rem, 2fr)
    minmax(6rem, 1fr)
    minmax(7rem, 1.1fr)
    minmax(7rem, 0.9fr);
  align-items: center;
  gap: 1rem 1.5rem;
  padding: clamp(1.15rem, 2.6vw, 1.7rem) 0;
  border-bottom: 1px solid var(--rule);
}
.log__row--head {
  border-bottom: 2px solid var(--rule-strong);
  padding-top: 0;
}
.log__row--head .log__cell {
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.log__cell { min-width: 0; }
.log__date, .log__suburb {
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--t-small);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.log__venue {
  font-family: var(--font-headline);
  font-variation-settings: "opsz" 40, "SOFT" 50, "WONK" 0;
  font-weight: 600;
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.log__pour {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.4rem;
}
.pourtag {
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35em 0.6em;
  border: 1.5px solid var(--rule-strong);
  border-radius: 999px;
  color: var(--ink-dim);
  white-space: nowrap;
}
.pourtag[data-pour="Berry Blush"] { color: var(--red); border-color: rgba(232,80,58,0.55); }
.pourtag[data-pour="Sunny Lager"] { color: #b07a1e; border-color: rgba(242,194,136,0.9); }
.log__status { justify-self: start; }

/* ==========================================================================
   WHAT'S POURING  (two warm colour cards)
   ========================================================================== */
.pouring { padding-top: var(--stack); padding-bottom: var(--stack); }
.pouring__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}
.product {
  border-radius: 18px;
  padding: clamp(1.75rem, 4vw, 3rem);
  min-height: clamp(13rem, 24vw, 18rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.6rem;
  color: var(--ink);
}
.product--coral { background: var(--coral); }
.product--sand  { background: var(--sand); }
.product__name {
  font-family: var(--font-headline);
  font-variation-settings: var(--headline-vary);
  font-weight: 600;
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
}
.product__tag {
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(15, 43, 61, 0.75);
}
.product__note {
  color: rgba(15, 43, 61, 0.85);
  max-width: 30ch;
  font-size: 1rem;
}

/* ==========================================================================
   GET TIPPED OFF  (blue band)
   ========================================================================== */
.tip {
  background: var(--blue);
  color: var(--cream);
  padding-top: var(--stack);
  padding-bottom: var(--stack);
  margin-top: clamp(2rem, 5vw, 4rem);
}
.tip__inner { max-width: 46rem; text-align: center; margin-inline: auto; }
.tip .section-title { color: var(--cream); }
.tip__lead {
  font-size: var(--t-lead);
  line-height: 1.4;
  color: var(--cream-dim);
  margin-top: 1rem;
  margin-inline: auto;
  max-width: 34ch;
}
.tip__form {
  display: flex;
  gap: 0.6rem;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  flex-wrap: wrap;
  justify-content: center;
}
.tip__input {
  flex: 1 1 18rem;
  min-width: 0;
  background: rgba(253, 246, 236, 0.1);
  border: 2px solid var(--cream-dim);
  border-radius: 999px;
  padding: 0.9em 1.4em;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 1rem;
}
.tip__input::placeholder { color: rgba(253,246,236,0.55); }
.tip__input:focus-visible { outline-color: var(--sand); border-color: var(--sand); }
.tip__submit { flex: 0 0 auto; background: var(--coral); color: var(--ink); }
.tip__submit:hover { background: var(--sand); }
.tip__message {
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--t-small);
  letter-spacing: 0.03em;
  line-height: 1.55;
  margin-top: 1.25rem;
  min-height: 1.2em;
  margin-inline: auto;
  max-width: 44ch;
  color: var(--cream-dim);
}
.tip__message[data-state="ok"] { color: var(--sand); }
.tip__message[data-state="error"] { color: #ffd0c8; }

/* ==========================================================================
   FOOTER  (deep water band)
   ========================================================================== */
.foot {
  background: var(--depth);
  color: var(--cream);
  padding-top: var(--stack);
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
}
.foot__wrap { display: grid; gap: 1.4rem; }
.foot .eyebrow { color: var(--sand); }
.foot__mark {
  width: clamp(120px, 18vw, 165px);
  height: auto;
  color: var(--cream);
}
.foot__tagline { color: var(--coral); }
.foot__links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.foot__link {
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--cream-dim);
  color: var(--cream);
}
.foot__link:hover { color: var(--sand); border-color: var(--sand); }
.foot__rsa {
  color: var(--cream-dim);
  font-size: 0.9rem;
  max-width: 60ch;
  line-height: 1.55;
}

/* ---- Legal: licence number and the approved warning ----------------------
   Both are required by the Liquor Licensing Act 1990 and both have to read
   clearly, so this block sits a step brighter than the rest of the footer
   rather than being tucked away in fine print.
   -------------------------------------------------------------------------- */
.foot__licence {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--t-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream);
}
.foot__licence b {
  font-weight: 700;
  color: var(--sand);
  letter-spacing: 0.14em;
}
.foot__licensee {
  color: var(--cream-dim);
  letter-spacing: 0.1em;
}

.legal {
  border: 2px solid rgba(253, 246, 236, 0.34);
  border-radius: 10px;
  padding: clamp(1.1rem, 2.5vw, 1.5rem) clamp(1.1rem, 3vw, 1.75rem);
  max-width: 46rem;
  display: grid;
  gap: 0.85rem;
  color: var(--cream);
  font-size: 0.9rem;
  line-height: 1.5;
}
.legal__title {
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-weight: 700;
  font-size: var(--t-small);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sand);
}
.legal__lead { color: var(--cream); }
.legal cite { font-style: italic; }
.legal__offence { display: grid; gap: 0.15rem; }
.legal__penalty {
  font-style: italic;
  color: var(--cream-dim);
}

.foot__copy { color: var(--cream-dim); }

/* ==========================================================================
   MOTION
   All of it slow and subtle, all of it off under reduced motion.
   ========================================================================== */
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}
@keyframes breathe-centred {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.045); }
}
/* a very slow drift on the hero photograph */
@keyframes kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

/* the hero lands on load, one element after another */
@keyframes rise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}
/* the mark fades up once, then simply breathes */
@keyframes mark-in {
  from { opacity: 0; transform: translate(-50%, -46%) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero__sun {
    animation:
      mark-in 1.1s cubic-bezier(0.2, 0.7, 0.3, 1) 0.15s backwards,
      breathe-centred 9s ease-in-out 1.3s infinite;
  }
}

/* ---- The B that cannot hold its drink ------------------------------------
   The wordmark is drawn with the B of BOOZE already lying on its side, so
   transform:none is the artwork exactly as supplied. Nothing here is needed
   to render the logo correctly, which is why the animation is additive and
   safe to strip.

   Standing the B up is rotate(-90deg) about its own bottom left corner, the
   corner it would have tipped over. That alone lands it 56.65 user units too
   far left, on top of the Y of BONNY, so a matching translateX seats it back
   in its own slot. The two interpolate together, which reads as the foot
   sliding out from under it on the way down. Suits a drunk B.

   The numbers come from the path's measured box: 61.3 wide by 52 tall,
   sitting at x 338.8 with its baseline at y 56.8 in a 645.55 unit viewBox.
   They only need revisiting if the wordmark artwork itself is redrawn.

   One loop covers both halves of the brief: the page opens with the B
   upright and it goes over almost straight away, then it hauls itself up
   once every 30 seconds and goes over again. The loop starts and ends
   upright so it joins cleanly.

   JS adds .wordmark-live to <body> once the age gate is out of the way, so
   the fall is not spent behind the gate on a first visit.
   -------------------------------------------------------------------------- */
@keyframes bb-tipple {
  /* upright, having a moment of confidence */
  0%     { transform: translateX(56.65px) rotate(-90deg); animation-timing-function: ease-in-out; }
  2%     { transform: translateX(56.65px) rotate(-90deg); animation-timing-function: ease-out; }
  3%     { transform: translateX(58px)    rotate(-98deg); animation-timing-function: cubic-bezier(0.6, 0, 0.85, 0.35); }
  /* and over she goes */
  7%     { transform: translateX(0px)     rotate(0deg);   animation-timing-function: ease-out; }
  8%     { transform: translateX(3px)     rotate(-8deg);  animation-timing-function: ease-in; }
  9.5%   { transform: translateX(0px)     rotate(0deg); }
  /* a long lie down */
  88%    { transform: translateX(0px)     rotate(0deg);   animation-timing-function: cubic-bezier(0.3, 0.9, 0.5, 1); }
  /* up, too fast, overcooked */
  92%    { transform: translateX(58px)    rotate(-98deg); animation-timing-function: ease-in-out; }
  94%    { transform: translateX(55px)    rotate(-84deg); animation-timing-function: ease-in-out; }
  96.5%  { transform: translateX(57px)    rotate(-94deg); animation-timing-function: ease-out; }
  100%   { transform: translateX(56.65px) rotate(-90deg); }
}
body.wordmark-live .wordmark__b {
  transform-box: fill-box;
  transform-origin: 0% 100%;
  animation: bb-tipple 30s linear infinite;
}
/* Under reduced motion the global rule below strips the animation, which
   leaves rotate() unset and the B lying down exactly as drawn. */

/* scroll reveals: elements drift up as they enter. JS adds .is-in. */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  .reveal.is-in { opacity: 1; transform: none; }
}

/* the polaroid stack fans out a little under the cursor */
.polaroid--front, .polaroid--back { transition: transform 0.45s ease; }
.stack:hover .polaroid--front { transform: rotate(1.5deg) translateY(-4px); }
.stack:hover .polaroid--back { transform: rotate(-8deg) translate(-26px, 12px); }

/* ---- Ticker: a slow tide of type between sections ------------------------ */
.ticker {
  overflow: hidden;
  padding: clamp(1rem, 2.5vw, 1.5rem) 0;
  border-bottom: 2px solid var(--red);
  background: var(--cream);
}
.ticker__track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: tide 42s linear infinite;
}
.ticker__track span {
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  white-space: nowrap;
  padding-right: 0.25em;
}
@keyframes tide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---- The tip band's postcard, desktop only ------------------------------- */
.tip__polaroid {
  display: none;
}
@media (min-width: 1100px) {
  .tip__polaroid {
    display: block;
    position: absolute;
    right: clamp(2rem, 6vw, 6rem);
    top: 50%;
    transform: translateY(-50%) rotate(6deg);
    width: clamp(170px, 15vw, 230px);
  }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   RESPONSIVE  (mobile is the primary case, down to 360px)
   ========================================================================== */
@media (max-width: 760px) {
  .pouring__grid { grid-template-columns: 1fr; }

  /* Stack the nav so the wordmark gets the full width and sits centred over
     the links, rather than being squeezed against them on one line. */
  .nav {
    flex-direction: column;
    justify-content: center;
    gap: 0.9rem;
  }
  .nav__mark { width: min(70vw, 280px); }
  .nav__links {
    justify-content: center;
    gap: 0.75rem 1.25rem;
  }

  .hero { min-height: clamp(310px, 44svh, 420px); }
  /* at this aspect the frame barely crops, so zoom in to keep the centre sky */
  .photo--hero {
    background-size: auto 180%;
    background-position: center 10%;
  }
  .hero__sun { width: 100px; }

  .lastseen { grid-template-columns: 1fr; }
  .stack {
    justify-self: center;
    width: min(100%, 280px);
    margin-top: 0.5rem;
  }

  .log__row--head { display: none; }
  .log__row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "venue  status"
      "meta   status"
      "pour   pour";
    gap: 0.4rem 1rem;
    align-items: start;
    padding: 1.3rem 0;
  }
  .log__venue { grid-area: venue; align-self: center; }
  .log__date  { grid-area: meta; }
  .log__suburb { display: none; }
  .log__pour  { grid-area: pour; margin-top: 0.35rem; }
  .log__status { grid-area: status; align-self: center; justify-self: end; text-align: right; }

  .log__date::after {
    content: " · " attr(data-suburb);
    color: var(--coral);
  }
}