/* ---------------------------------------------------------------------
   blueboar.net

   THE PALETTE IS THE PUB'S, sampled from photographs rather than
   invented:

     --duck   #aecad6  the frontage, tuned to sit under the illustration
     --boar   #0271bb  the blue of the boar on the sign and the glasses
     --wood   #a9743f  the bar top and the panelling
     --paper  #f6f1e6  the walls above the panelling

   The BOARD is dark because it hangs in a dim room and competes with
   pumpclips. The WEBSITE is light, because it is read on a phone in
   daylight and should feel like the room does when you walk in — warm
   wood, brass light, cream walls — not like a screen.

   No framework and no build step. It is a pub website; a build
   pipeline is a thing that breaks in eighteen months when nobody
   remembers how to run it.
   --------------------------------------------------------------------- */

@font-face {
  font-family: 'Bitter';
  src: url('/fonts/bitter-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Bitter';
  src: url('/fonts/bitter-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* The hero is the illustration of the frontage, whose fascia reads
     #85a4b6 — greyer than the real paint. The band beneath it is a
     lighter mix of the two so the page appears to continue out of the
     picture rather than butt against it, while keeping 7.85:1 on the
     heading. A band that harmonises with the artwork above it is worth
     more than one that matches a paint chip nobody is holding up. */
  --duck:   #aecad6;
  --duck-d: #85a4b6;
  --boar:   #0271bb;
  --boar-d: #014a80;
  --wood:   #a9743f;
  --paper:  #f6f1e6;
  --ink:    #1c1a17;
  --ink-2:  #5c554a;
  --rule:   #ded5c4;
  --open:   #2e7d32;
  --shut:   #8d6e2f;

  --display: 'Bitter', Georgia, 'Times New Roman', serif;
  --body: ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.15; }
a { color: var(--boar-d); }

/* ---------- the banner ---------- */
/* Navy and orange from the poster, so the website and the thing on the
   wall of the pub are recognisably the same event. Deliberately NOT the
   duck-egg of the rest of the site: this is meant to interrupt. */
.topbanner.tb-still { cursor: default; }
.topbanner {
  /* The BAND does the centring, so a short slide sits in the middle of
     the locked height instead of clinging to the top as it rolls
     round. */
  display: flex; align-items: center; justify-content: center;
  background: #123055; color: #f6efe2;
  padding: 0.7rem 1.1rem;
  text-decoration: none;
  font-size: 0.98rem; line-height: 1.35;
  text-align: center;
  border-bottom: 3px solid #c4552c;
}
.tb-inner {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 0.4rem 0.9rem;
  transition: opacity 0.35s ease;
}
.topbanner.tb-out .tb-inner { opacity: 0; }
.topbanner:hover .tb-cta { background: #e06a3a; }
/* ONE line on a phone. The tour message wrapped to three, which turned
   the band into a paragraph. Truncation with an ellipsis keeps it a
   band; the button stays whole and the tap tells the rest. */
@media (max-width: 45.99rem) {
  .tb-inner { flex-wrap: nowrap; width: 100%; }
  .tb-text {
    flex: 1 1 auto; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-align: left;
  }
  .tb-cta { flex: 0 0 auto; }
}
.tb-text { font-weight: 600; }
.tb-text strong { color: #f0b93f; font-weight: 800; letter-spacing: 0.01em; }
.tb-cta {
  background: #c4552c; color: #fff;
  border-radius: 2rem; padding: 0.25rem 0.9rem;
  font-weight: 700; font-size: 0.92rem; white-space: nowrap;
}

/* ---------- hero ---------- */
/* The photograph does the work. Somebody arriving needs to recognise
   the frontage from the pavement, and no amount of copy does that. */
.hero { position: relative; }
/* THE CROP.
   A phone box is squarer than the image, so the SIDES are cropped and
   centre is right. A desktop box is wider, so the TOP AND BOTTOM go —
   and the signwriting across the fascia is the first casualty. It is
   also the most valuable thing in the picture: it is how somebody
   recognises the place from the pavement.

   So the focal point sits above centre, and the wide layout gets a
   taller box so there is less to throw away. Checked by rendering at
   390 and 1100, not by reasoning about it — the first attempt used 60%
   and sliced the lettering clean off. */
.hero-photo {
  display: block; width: 100%;
  height: clamp(300px, 58vh, 560px);
  object-fit: cover; object-position: center 50%;
  background: var(--duck);
}
/* The name band.
   Not a list. The name and the tagline are the voice; the CAMRA line is
   the credential — so on anything wide they sit as TWO COLUMNS in
   conversation, name left, credential right, instead of four rows
   stacked down the left edge like a form. On a phone they stack, but
   with a rule between voice and credential so the stack has shape. */
.hero-body {
  padding: 1.5rem 1.1rem 1.7rem;
  background: var(--duck);
  border-bottom: 4px solid var(--boar-d);
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 1.1rem 2.5rem;
}
.hero-name { flex: 1 1 20rem; }
.hero-body h1 {
  font-family: var(--display);
  font-size: clamp(2.3rem, 6vw, 3.4rem);
  line-height: 1.05; color: #14343f;
  letter-spacing: 0.01em;
}
.tagline {
  margin-top: 0.45rem;
  font-family: var(--display); font-style: italic;
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
  color: var(--boar-d);
}
.hero-awards {
  flex: 0 1 auto;
  font-size: 0.95rem; line-height: 1.55;
  color: #1d4650;
  border-left: 3px solid var(--boar);
  padding-left: 1.1rem;
  max-width: 26rem;
}
.hero-awards strong {
  display: block;
  font-family: var(--display);
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: #2c5f6a; margin-bottom: 0.2rem;
}

/* ---------- bands ---------- */
main { max-width: 62rem; margin: 0 auto; }
.band { padding: 1.6rem 1.1rem; border-bottom: 1px solid var(--rule); }
.band h2 {
  font-size: 1.5rem; margin-bottom: 0.2rem;
  color: var(--boar-d);
}
.hint { color: var(--ink-2); font-size: 0.92rem; }

/* ---------- beer ---------- */
/* Tabs, then a grid — not a forty-item list.
   The pumpclip is what people recognise, exactly as on the wall, so it
   leads each card rather than sitting beside a line of text. */
.beer-tabs {
  display: flex; gap: 0.4rem; flex-wrap: wrap;
  margin: 0.9rem 0 0.2rem;
}
.beer-tab {
  font: inherit; font-weight: 700; font-size: 0.9rem;
  background: #fff; color: var(--ink-2);
  border: 1px solid var(--rule); border-radius: 2rem;
  padding: 0.35rem 0.85rem; cursor: pointer;
}
.beer-tab[aria-selected="true"] {
  background: var(--boar-d); border-color: var(--boar-d); color: var(--paper);
}
.beer-tab .n { opacity: 0.65; font-weight: 600; margin-left: 0.3em; }

.beers {
  list-style: none;
  display: grid; gap: 0.9rem 0.8rem;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 1rem;
}
.beer { text-align: center; min-width: 0; }
/* 6.5rem rather than 8: ten casks at the larger size was still five
   screens of thumb, and the clip only has to be recognisable, not
   admired. */
.clip {
  width: 100%; max-width: 6.5rem; aspect-ratio: 1/1; margin: 0 auto 0.4rem;
  border-radius: 50%;
  background: #fff center / cover no-repeat;
  border: 1px solid var(--rule);
}
.beer-name {
  font-family: var(--display); font-weight: 700;
  line-height: 1.2; font-size: 1rem;
}
.beer-abv { font-weight: 700; white-space: nowrap; }
/* Brewery and style on ONE line, wrapping only if they must. Two
   forced lines per beer is twenty lines across a ten-cask list, for
   information most people read as one phrase anyway. */
.beer-meta {
  color: var(--ink-2); font-size: 0.82rem;
  line-height: 1.3; margin-top: 0.1rem;
}

/* "New" earns a stronger colour than GF: GF is a filter for the few
   people who need it, this is news for everybody. */
.new {
  display: inline-block; background: var(--boar-d); color: var(--paper);
  border-radius: 0.3em; padding: 0.05em 0.4em;
  font-size: 0.72em; font-weight: 700; letter-spacing: 0.04em;
  margin-left: 0.35em; vertical-align: 0.12em;
}
/* A dot on the tab, so somebody can see there is something new in the
   bottles without tapping through to find out. */
.tab-new {
  display: inline-block; width: 0.45rem; height: 0.45rem;
  border-radius: 50%; background: var(--boar);
  margin-left: 0.4rem; vertical-align: 0.15em;
}
.beer-tab[aria-selected="true"] .tab-new { background: var(--paper); }

/* Same amber as the wall, so a badge means the same thing in both
   places. */
.gf {
  display: inline-block; background: #e8a52c; color: #241505;
  border-radius: 0.3em; padding: 0.05em 0.4em;
  font-size: 0.72em; font-weight: 700; letter-spacing: 0.06em;
  margin-left: 0.35em; vertical-align: 0.12em;
}

/* ---------- the room ---------- */
/*
   PHONE: a scroll-snap row. Swiping through photographs is what a thumb
   expects on a phone, it needs no JavaScript, and it keeps three
   pictures to one screen's height instead of three.

   DESKTOP: an asymmetric grid — the bar wide across the top, the room
   and the cob beneath. Three equal boxes would read as a stock
   template; giving the bar the space says which one matters.
*/
.gallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: 0.7rem;
  margin-top: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Bleed to the screen edges so the next photo peeks in and the row
     reads as swipeable without a hint telling people to swipe. */
  margin-inline: -1.1rem;
  padding-inline: 1.1rem;
  scroll-padding-inline: 1.1rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gallery::-webkit-scrollbar { display: none; }

/* The figure is a column: picture, then caption. Without this the
   image's height:100% filled the whole grid cell and shoved the
   caption out over the row beneath it. */
.gallery figure {
  scroll-snap-align: start; margin: 0; min-width: 0;
  display: flex; flex-direction: column;
}
.gallery img {
  width: 100%; height: auto; object-fit: cover;
  aspect-ratio: 4 / 3;
  border-radius: 8px; display: block;
  background: var(--duck);
}

/* ---------- snacks, events ---------- */
.events li {
  padding: 0.5rem 0 0.5rem 1.1rem; position: relative;
}
.events li::before {
  content: ''; position: absolute; left: 0; top: 1.1rem;
  width: 0.45rem; height: 0.45rem; border-radius: 50%;
  background: var(--boar);
}

/* ---------- posters ---------- */
.posters-band { padding-top: 1rem; }
.posters {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.posters img {
  width: 100%; border-radius: 8px; display: block;
  border: 1px solid var(--rule);
}

/* ---------- find us ---------- */
/* Prose is capped at 42rem because a line of text 62rem wide is
   genuinely hard to read — the eye loses its place coming back to the
   left margin. But left-aligned against a full-width beer grid it just
   looked ragged, so it is CENTRED: the narrower measure then reads as a
   deliberate change of rhythm rather than a mistake.

   No effect on a phone, where everything is 100% anyway. */
.history p { margin: 0.7rem auto 0; max-width: 42rem; }
.history h2 { max-width: 42rem; margin-inline: auto; }

/* The sign story, set apart. It is the one thing on this page nobody
   else could write — the Richard III part is public record and every
   Blue Boar in the country can claim it. A rule and a tint is enough;
   a box with a shadow would make it look like an advert. */
.tale {
  margin-top: 1.6rem;
  padding: 1.1rem 1.2rem;
  background: #fff;
  border-left: 4px solid var(--boar);
  border-radius: 0 8px 8px 0;
  max-width: 42rem;
  margin-inline: auto;
}
.tale h3 {
  font-size: 1.15rem; color: var(--boar-d);
  letter-spacing: 0.01em;
}
.tale p { margin-top: 0.6rem; }
.tale p:first-of-type { margin-top: 0.4rem; }
.tale em { font-style: italic; color: var(--ink); }
.history .hint { margin-top: 0.9rem; }

.find-grid {
  display: grid; gap: 1.4rem; margin-top: 0.9rem;
  grid-template-columns: 1fr;
}
address { font-style: normal; line-height: 1.7; }

/* Plain ticks, not badges. These are answers to questions, and a badge
   makes an answer look like a boast. */
.know { list-style: none; margin-top: 1.3rem; }
.know li {
  padding-left: 1.4rem; position: relative;
  line-height: 1.6; color: var(--ink);
}
.know li::before {
  content: '·'; position: absolute; left: 0.4rem;
  color: var(--boar); font-weight: 700; font-size: 1.3em; line-height: 1.1;
}
.btn {
  display: inline-block; margin-top: 0.6rem;
  background: var(--boar-d); color: #f6f1e6;
  text-decoration: none; font-weight: 700;
  padding: 0.6rem 1.1rem; border-radius: 6px;
}
.hours { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
.hours td { padding: 0.35rem 0; border-bottom: 1px solid var(--rule); }
.hours td:last-child { text-align: right; white-space: nowrap; }
.hours tr.today td { font-weight: 700; color: var(--boar-d); }
.hours td.closed { color: var(--ink-2); }

.social {
  display: inline-block; margin-top: 0.9rem;
  font-weight: 700; color: var(--boar-d);
}

/* The mark belongs here, not in the hero: the hero is a picture of the
   sign, which already has the boar on it. */
/* The footer: a quiet, CENTRED sign-off rather than a logo dumped
   beside a paragraph. Mark, invitation, small print — stacked down the
   centre line, closed off from the page by the same house-blue rule
   the name band uses, so the site ends the way it began. */
.foot-row { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; }
.footer-mark { width: 84px; height: auto; }
.sister { font-size: 1.05rem; margin: 0; color: var(--ink); text-align: center; }

footer {
  max-width: none; margin: 2.5rem 0 0;
  padding: 2rem 1.1rem 2.4rem;
  color: var(--ink-2); font-size: 0.85rem;
  background: #ece5d4;
  border-top: 4px solid var(--boar-d);
  text-align: center;
}
footer > * { max-width: 62rem; margin-left: auto; margin-right: auto; }
#legal { margin-top: 1rem; }

/* Wider screens get two columns and a taller hero. Everything above is
   the phone layout, because that is where this is read. */
/* Global, not wide-screen only — an earlier edit dropped these inside
   the media query, so the history band had no spacing on a phone,
   which is where it is actually read. */
/* Prose is capped at 42rem because a line of text 62rem wide is
   genuinely hard to read — the eye loses its place coming back to the
   left margin. But left-aligned against a full-width beer grid it just
   looked ragged, so it is CENTRED: the narrower measure then reads as a
   deliberate change of rhythm rather than a mistake.

   No effect on a phone, where everything is 100% anyway. */
.history p { margin: 0.7rem auto 0; max-width: 42rem; }
.history h2 { max-width: 42rem; margin-inline: auto; }

/* The sign story, set apart. It is the one thing on this page nobody
   else could write — the Richard III part is public record and every
   Blue Boar in the country can claim it. A rule and a tint is enough;
   a box with a shadow would make it look like an advert. */
.tale {
  margin-top: 1.6rem;
  padding: 1.1rem 1.2rem;
  background: #fff;
  border-left: 4px solid var(--boar);
  border-radius: 0 8px 8px 0;
  max-width: 42rem;
  margin-inline: auto;
}
.tale h3 {
  font-size: 1.15rem; color: var(--boar-d);
  letter-spacing: 0.01em;
}
.tale p { margin-top: 0.6rem; }
.tale p:first-of-type { margin-top: 0.4rem; }
.tale em { font-style: italic; color: var(--ink); }
.history .hint { margin-top: 0.9rem; }

@media (min-width: 46rem) {
  /* More of the illustration: it is the whole reason somebody
     recognises the frontage, and the earlier crop cut the pavement and
     the doorway to protect the signwriting. A taller box keeps both. */
  /* Taller again. The artwork is 16:9 and a wide desktop band crops it
     hard from top and bottom, so height buys back the picture rather
     than just making the band bigger. */
  .hero-photo { height: clamp(440px, 72vh, 820px); object-position: center 46%; }
  .find-grid { grid-template-columns: 1fr 1fr; }
  .beers { grid-template-columns: repeat(4, 1fr); gap: 1.4rem 1.1rem; }

  /* Grid, not a scroller: on a desktop there is room to show all three
     at once, and a horizontal scroller with a mouse is a worse thing
     than a grid. */
  .gallery {
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: auto;
    overflow: visible;
    margin-inline: 0; padding-inline: 0;
    gap: 1.1rem;
  }
  .gallery .g-wide { grid-column: 1 / -1; }
  .gallery .g-wide img { aspect-ratio: 21 / 9; }
}