/* ==========================================================================
   The Golden Eagle — code-built clone
   Every colour, size and weight below was MEASURED off the live site
   (read-only, 1425px viewport) — not eyeballed. See docs/MEASURED.md.
   ========================================================================== */

@font-face{font-family:'GEMincho';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/GE-Mincho-Latin.woff2') format('woff2')}
@font-face{font-family:'GEMincho';font-style:normal;font-weight:500;font-display:swap;
  src:url('../assets/fonts/GE-Mincho-Latin-Medium.woff2') format('woff2')}
/* 700 is not a real cut — the live site fakes bold on the 500 weight */
@font-face{font-family:'GEMincho';font-style:normal;font-weight:700;font-display:swap;
  src:url('../assets/fonts/GE-Mincho-Latin-Medium.woff2') format('woff2')}

:root{
  /* measured backgrounds */
  --base:#475F70;        /* page ground behind everything */
  --cream:#F2EFEA;       /* light section bands */
  --panel:#253D50;       /* info band, curry panel, footer */
  /* measured text */
  --blue:#65A2EA;        /* section headings, review headlines */
  --ink:#324158;         /* review attributions on cream */
  --white:#FFFFFE;
  --hero-ink:#FFF5F0;
  /* measured gold */
  --gold-bar:radial-gradient(circle at 32% 27%,#d4af37 0%,#ffd271 36.03%,#63492f 75.68%);
  --gold-btn:linear-gradient(270deg,#f7e7a1 0%,#d4af37 21%,#b8891a 76%,#d4af37 100%);

  --head:'GEMincho',Georgia,serif;
  --body:'Inter',-apple-system,'Segoe UI',sans-serif;
  --col:1225px;          /* measured content column */
  /* The Book Now badge floats over everything in the top-right corner, so the
     page must keep its text out of that strip: 80px offset + 153px badge +
     18px breathing space. */
  --book-band:251px;
  /* How far the badge actually eats into the page at this window width — the
     whole strip when the window is narrow, nothing once the margins are wide
     enough to hold it (about 1727px). EVERY block that runs to the right edge
     uses this one value, so the page cannot end up half-shifted: an inner
     heading centred while the prose under it sits 72px to the left is how it
     looked when only .col had it. */
  --gutter-r:calc(24px + max(0px, var(--book-band) - max(0px, 100vw - var(--col)) / 2));
}
@media (max-width:900px){
  /* the badge stops floating on a phone (see .book below), so nothing to keep clear of */
  :root{--gutter-r:24px}
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--base);color:var(--white);
  font-family:var(--body);font-size:18px;line-height:1.67;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4,h5,h6{font-family:var(--head);font-weight:400;margin:0;line-height:1.2}
/* The content column keeps clear of the Book Now badge. The badge is fixed, so
   everything on the page scrolls under it — on the live site that is why the
   £23 roast disappears behind it on a laptop. */
.col{max-width:var(--col);margin:0 auto;padding-left:24px;padding-right:var(--gutter-r)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- header ---------- */
.topbar{position:absolute;top:0;left:0;right:0;z-index:6;height:180px;pointer-events:none}
.topbar > *{pointer-events:auto}
.burger{position:absolute;left:43px;top:43px;width:45px;height:45px;border:0;border-radius:50%;
  background:var(--gold-btn);cursor:pointer;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px}
.burger i{width:19px;height:2px;background:#fff;border-radius:2px}
.brand{position:absolute;left:50%;top:32px;transform:translateX(-50%);width:256px}
.brand img{width:256px;height:87px;object-fit:contain}
/* Book Now FOLLOWS THE PAGE DOWN — measured on the live site, where the logo
   and burger scroll away but this button is fixed and stays put at top:20.
   It was absolute here, so it scrolled off with the rest. Chris spotted it. */
.book{position:fixed;right:80px;top:20px;z-index:8;width:153px;height:153px;border-radius:50%;
  background:var(--gold-btn);display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:var(--body);font-weight:600;font-size:20px;letter-spacing:.02em;
  text-decoration:none;text-align:center;box-shadow:0 6px 22px -10px rgba(0,0,0,.6)}
.book:hover{filter:brightness(1.07)}
.book:focus-visible,.burger:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* ---------- hero ---------- */
.hero{position:relative;height:943px;max-height:100vh;min-height:600px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;text-align:center;background:#000}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%}
.hero .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.15) 45%,rgba(0,0,0,.4))}
.hero .mid{position:relative;z-index:3;padding:60px 20px 0}
.hero h1{font-size:62px;font-weight:500;line-height:1.2;color:var(--hero-ink)}
/* must stay on ONE line: the bar behind it is a single block, and on a
   phone the wrap put it 17.5px off the letters. Font shrinks to suit. */
.hero h1 .l2{position:relative;display:inline-block;padding:0 10px;white-space:nowrap}
/* the measured gold banner: 675x74 sitting behind the second line */
/* Gold bar: 8px corners and 74px tall, both measured off the live bar.
   Centred on the line box rather than pushed down by a fixed 14px — that
   offset left the letters touching the top edge (0px above, 26.5px below).
   The letters' ink centre sits within 0.3px of the line-box centre, so
   centring the bar on the box centres it on the letters, at any size. */
.hero h1 .l2::before{content:"";position:absolute;left:0;right:0;
  top:50%;transform:translateY(-50%);height:74px;
  background:var(--gold-bar);border-radius:8px;z-index:-1}
.hero .strap{margin-top:52px;font-size:20px;font-weight:400;color:var(--white)}

/* ---------- info band ---------- */
.band{background:var(--base);padding:64px 0}
.band .grid{display:grid;gap:24px;grid-template-columns:1fr}
@media (min-width:820px){.band .grid{grid-template-columns:repeat(3,1fr)}}
.band .cell{background:var(--panel);padding:38px 32px;text-align:center}
.band h2,.band h3{font-size:24px;color:var(--white);margin-bottom:16px}
.band p{margin:0 0 6px;font-size:17px;color:#dfe7ee}
.band p strong{color:var(--white);font-weight:600}

/* ---------- light section ---------- */
.light{background:var(--cream);padding:78px 0 92px}
.light h2.sect,.dark h2.sect{font-size:62px;color:var(--blue);text-align:center;margin-bottom:44px;text-wrap:balance}

/* ---------- where-to-next cards ---------- */
.cards{display:grid;gap:20px;grid-template-columns:1fr}
@media (min-width:760px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{position:relative;display:block;height:573px;overflow:hidden;text-decoration:none;background:#1b2733}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover img,.card:focus-visible img{transform:scale(1.045)}
.card .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.05) 35%,rgba(0,0,0,.72) 100%)}
/* The veil is a gradient over the WHOLE card, so how much cover the caption
   gets depends on how tall that card happens to be. The past-event cards are
   340px, not 573px, which put their titles up where the veil is barely there -
   "THE X TONES" measured 1.4:1 against a pale plate. The caption carries its
   own scrim now, so the type is covered whatever the card height. */
.card .cap{position:absolute;left:0;right:0;bottom:0;padding:58px 28px 40px;text-align:center;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.58) 26%,rgba(0,0,0,.84) 58%,rgba(0,0,0,.9) 100%)}
.card .t{display:block;font-family:var(--head);font-size:34px;line-height:1.2;
  color:var(--white);margin-bottom:6px}
.card .sub{display:block;font-size:20px;font-weight:500;color:var(--white);margin:0 0 18px;line-height:1.4}
.card .go{display:inline-block;font-size:16px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:#fff;border-bottom:2px solid #d4af37;padding-bottom:4px}
.card:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* ---------- curry night ---------- */
.dark{background:var(--base);padding:78px 0 92px}
.curry{background:var(--panel);display:grid;gap:0;grid-template-columns:1fr}
@media (min-width:900px){.curry{grid-template-columns:minmax(0,44%) minmax(0,56%);align-items:stretch}}
.curry .promo{background:#1a2b3a;display:flex;align-items:center;justify-content:center;padding:34px}
.curry .promo img{max-height:640px;width:auto;box-shadow:0 18px 44px -22px rgba(0,0,0,.9)}
.curry .txt{padding:56px 44px 60px}
@media (min-width:900px){.curry .txt{padding:64px 60px}}
.curry h2{font-size:45px;color:var(--white);margin-bottom:14px}
.curry p{max-width:54ch}

/* shared text bits used across pages */
.kicker{font-size:20px;font-weight:500;font-family:var(--body);color:var(--blue);
  letter-spacing:.14em;margin:0 0 12px;text-transform:uppercase}
.when{font-size:20px;font-weight:500;color:#fff;margin:0 0 26px}
.dark p,.prose p,.split-txt p,.ev-body p{font-size:18px;line-height:1.67;color:#fff;margin:0 0 16px}
a.ul{border-bottom:1px solid rgba(255,255,255,.5);text-decoration:none}
a.ul:hover{border-bottom-color:#fff}

/* shared buttons */
.btns{margin-top:32px;display:flex;gap:16px;flex-wrap:wrap}
.btns a,.btn-gold{display:inline-block;padding:15px 30px;min-height:48px;font-family:var(--body);
  font-size:16px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;
  color:#3a2c07;background:var(--gold-btn);border:0;border-radius:2px;cursor:pointer}
.btns a.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55)}
.light .btns a.ghost{color:var(--ink);border-color:rgba(50,65,88,.45)}
.btns a:hover,.btn-gold:hover{filter:brightness(1.07)}
.btns a:focus-visible,.btn-gold:focus-visible{outline:3px solid #fff;outline-offset:3px}
.light .btns a:focus-visible{outline-color:var(--ink)}

/* ---------- gallery ---------- */
.gallery{background:var(--base);padding:0 0 8px}
.rail{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px;
  scrollbar-width:thin;scrollbar-color:#7d95a6 transparent}
.rail img{flex:0 0 auto;width:468px;height:460px;object-fit:cover;scroll-snap-align:start}
@media (max-width:760px){.rail img{width:76vw;height:74vw}}

/* ---------- reviews ---------- */
.reviews{display:grid;gap:38px;grid-template-columns:1fr}
@media (min-width:820px){.reviews{grid-template-columns:repeat(3,1fr)}}
.review h3{font-size:20px;font-weight:700;color:var(--blue);margin-bottom:16px;letter-spacing:.02em}
.review p{font-size:16px;line-height:1.72;color:var(--ink);margin:0 0 20px}
.review .who{font-family:var(--head);font-size:15px;color:var(--ink);margin:0;letter-spacing:.03em}

/* ---------- footer ---------- */
.foot{background:var(--panel);padding:70px 0 34px;font-size:16px;color:#dfe7ee}
.foot .grid{display:grid;gap:36px;grid-template-columns:1fr}
@media (min-width:760px){.foot .grid{grid-template-columns:repeat(4,1fr)}}
.foot h3{font-size:22px;color:var(--white);margin-bottom:16px}
.foot h4{font-size:15px;font-family:var(--body);font-weight:600;color:var(--white);margin:16px 0 4px}
.foot p{margin:0 0 2px}
/* Gold footer headings (Chris, 11 Sep: "DO ALL" — all four options at once).
   The headings carry the Book Now gradient, the two bold lines carry the
   lighter gold. The gradient dark stop is lifted from #b8891a to #cca331:
   measured on this navy panel the button gold bottoms out at 3.55:1, under
   the 4.5:1 text needs, and a heading nobody can read is not a heading.
   Solid gold is set first so a browser without background-clip:text shows
   gold rather than nothing at all. */
.foot h3{color:#d4af37}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .foot h3{background:linear-gradient(270deg,#f7e7a1 0%,#d4af37 21%,#cca331 76%,#d4af37 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent}
}
.foot h4{color:#e8c877}
.foot a{text-decoration:none;border-bottom:1px solid transparent;
  display:inline-block;padding:11px 0;min-height:44px}
.foot a:hover{border-bottom-color:#dfe7ee}
.foot a:focus-visible{outline:2px solid #e8c877;outline-offset:2px}
.foot .mark{width:192px;height:73px;object-fit:contain;margin-bottom:18px}
.foot .social{display:flex;gap:14px;margin-top:10px}
.foot .social a{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;
  border:1px solid rgba(223,231,238,.4);font-size:13px;letter-spacing:.04em;
  color:#dfe7ee;transition:color .2s ease,border-color .2s ease}
.foot .social a:hover{color:#fff;border-color:rgba(255,255,255,.85)}
/* the mark is drawn inline, so it takes the link's own colour */
.foot .social svg{display:block}
.foot .base{margin-top:52px;padding-top:24px;border-top:1px solid rgba(223,231,238,.22);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:14px;color:#b3c2ce}
.foot .base span{font-family:var(--head)}

/* ---------- responsive type ---------- */
@media (max-width:900px){
  .hero h1{font-size:clamp(21px,7vw,50px)}
  .hero h1 .l2::before{height:1.19em}
  .light h2.sect,.dark h2.sect{font-size:clamp(32px,7vw,52px)}
  .curry h2{font-size:clamp(28px,6vw,40px)}
  .card{height:440px}
  /* On a phone there is no margin for a floating badge to live in — reserving
     its strip would leave about 210px for the menu. So it stops floating and
     scrolls away with the header, like any other header button, instead of
     sitting permanently on top of the prices. */
  .book{position:absolute;width:96px;height:96px;font-size:15px;right:16px;top:16px}
  .burger{left:16px;top:22px;width:44px;height:44px}
  .brand{top:26px;width:170px}
  .brand img{width:170px;height:58px}
  .topbar{height:130px}
}

/* ---------- clone-build notice ---------- */
/* This used to float in the bottom-right corner, where it sat on top of the
   Sunday menu's £7. A floating notice cannot be made safe: the page scrolls
   underneath it forever, so whatever is behind it changes with every scroll.
   It is now a banner in the flow at the very top — it scrolls away with the
   page and can never cover anything. It comes off entirely at go-live. */
.note-clone{position:relative;z-index:70;background:#121a22;border-bottom:1px solid #3a4a58;
  color:#e9dfd3;font-family:var(--body);font-size:13px;line-height:1.4;
  padding:9px 24px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.note-clone b{color:#e8c877;font-size:11px;letter-spacing:.09em;text-transform:uppercase}
/* The header is absolute against .page, which starts below the banner, so the
   banner's height is never hard-coded anywhere. */
.page{position:relative}
@media (max-width:700px){
  .note-clone{font-size:12px;padding:8px 16px;gap:6px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}