/* ============================================================
   Tam Barneys — styles
   Palette: Farrow & Ball 'Preference Red' scheme (screen approx).
   See CLAUDE.md for the colour map and what's real vs placeholder.
   ============================================================ */

:root{
  /* Farrow & Ball 'Preference Red' scheme — tune these to brand */
  --preference-red:#6B3A37;        /* primary / feature walls */
  --preference-red-deep:#4C2A28;   /* depth + gradients */
  --preference-red-hi:#824A46;     /* hover lift */
  --railings:#1A1B1E;              /* near-black woodwork / primary canvas */
  --railings-2:#212327;
  --lime-white:#ECE5D4;            /* warm off-white — primary text */
  --bancha:#5A5D3E;                /* olive accent — used sparingly */
  --charlbury:#8C7659;             /* warm taupe — secondary accent */
  --brass:#BE944D;                 /* antique brass — frames, rules, signage */
  --brass-hi:#E6C982;
  --brass-dim:#8E6E39;
  --cream-head:#F4EDD9;            /* guinness head / warm highlight */
  --muted:#BCAC8E;                 /* warm muted text on dark */
  --line:rgba(190,148,77,.26);     /* brass hairline */
  --line-soft:rgba(236,229,212,.12);
  --maxw:1140px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
[id]{scroll-margin-top:76px;}
body{
  margin:0;
  background:
    radial-gradient(130% 90% at 50% -12%, #2c1a17 0%, rgba(44,26,23,0) 55%),
    linear-gradient(180deg,#17120F 0%, #161113 100%);
  background-color:var(--railings);
  color:var(--lime-white);
  font-family:"Spectral", Georgia, serif;
  font-size:18px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wrap{position:relative; z-index:1;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
:focus-visible{outline:2px solid var(--brass-hi); outline-offset:3px; border-radius:2px;}
.container{max-width:var(--maxw); margin:0 auto; padding:0 28px;}

/* skip link — first focusable element, off-screen until focused */
.skip{position:absolute; left:-9999px; top:auto;}
.skip:focus{
  left:16px; top:12px; z-index:100;
  background:var(--brass); color:#241308;
  font-family:"Barlow Condensed",sans-serif; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; font-size:14px;
  padding:9px 16px; border-radius:2px;
}

/* ---------- type roles ---------- */
.eyebrow{
  font-family:"Cinzel", serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.34em;
  font-size:12px; color:var(--brass);
  display:inline-flex; align-items:center; gap:14px;
}
.eyebrow::before, .eyebrow.flank::after{
  content:""; width:30px; height:1px; background:linear-gradient(90deg,transparent,var(--brass-dim));
}
.eyebrow.flank::after{background:linear-gradient(90deg,var(--brass-dim),transparent);}
/* brass on Preference Red is only ~3.3:1 — lift eyebrows to brass-hi on the red walls/hero (WCAG AA) */
.hero .eyebrow, .s-red .eyebrow{color:var(--brass-hi);}
h2{
  font-family:"Fraunces", serif; font-optical-sizing:auto;
  font-weight:600; line-height:1.04; letter-spacing:-.01em;
  font-size:clamp(2rem, 5vw, 3.25rem);
  margin:.5rem 0 0; color:var(--lime-white);
}
h3{font-family:"Fraunces",serif; font-weight:600; margin:0;}
p{margin:0 0 1.1rem;}
.lede{color:#f1ead9;}
.muted{color:var(--muted);}
.label{
  font-family:"Barlow Condensed", sans-serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.14em; font-size:13px;
}

/* ---------- top bar ---------- */
header.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(22,18,15,.82);
  backdrop-filter:blur(9px);
  border-bottom:1px solid var(--line);
}
.topbar .container{display:flex; align-items:center; justify-content:space-between; height:64px;}
.brand{display:flex; align-items:center; gap:11px; color:var(--brass);}
.brand .crest{width:24px;height:24px; flex:none;}
.brand .name{
  font-family:"Cinzel",serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.16em; font-size:16px; color:var(--brass);
}
nav.links{display:flex; gap:30px;}
nav.links a{
  font-family:"Barlow Condensed",sans-serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.12em; font-size:14px;
  color:var(--lime-white); position:relative; padding:4px 0;
}
nav.links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
  background:var(--brass); transition:right .3s ease;
}
nav.links a:hover::after{right:0;}

/* ---------- buttons ---------- */
.btn{
  font-family:"Barlow Condensed",sans-serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.1em; font-size:14px;
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 20px; border-radius:2px; cursor:pointer;
  transition:transform .18s ease, background .25s ease, color .25s ease, border-color .25s ease;
  white-space:nowrap;
}
.btn .ph{font-size:15px;}
.btn-brass{background:var(--brass); color:#241308; border:1px solid var(--brass);}
.btn-brass:hover{background:var(--brass-hi); border-color:var(--brass-hi); transform:translateY(-1px);}
.btn-ghost{background:transparent; color:var(--brass); border:1px solid var(--line);}
.btn-ghost:hover{border-color:var(--brass); transform:translateY(-1px);}

/* ---------- hero ---------- */
.hero{
  position:relative; text-align:center;
  padding:clamp(70px,12vw,128px) 0 clamp(64px,9vw,104px);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% 118%, rgba(0,0,0,.5), transparent 62%),
    linear-gradient(180deg, var(--preference-red) 0%, var(--preference-red-deep) 100%);
}
.hero .glow{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(60% 50% at 50% 16%, rgba(230,201,130,.14), transparent 70%);
}
.hero .container{position:relative; z-index:1;}
.hero .est{margin-bottom:30px;}
.wordmark{
  font-family:"Cinzel",serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; line-height:.92;
  font-size:clamp(2.7rem, 13vw, 8.4rem);
  margin:0;
  background:linear-gradient(178deg,#F4DEA6 0%,#DBB463 36%,#B68B38 60%,#EAD08A 84%,#C39A45 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.5)) drop-shadow(0 0 26px rgba(230,201,130,.14));
}
.rule-orn{
  display:flex; align-items:center; justify-content:center; gap:18px;
  margin:22px 0 24px; color:var(--brass-dim);
}
.rule-orn .ln{height:1px; width:min(170px,30vw); background:linear-gradient(90deg,transparent,var(--brass));}
.rule-orn .ln.r{background:linear-gradient(90deg,var(--brass),transparent);}
.rule-orn .dot{width:7px;height:7px; transform:rotate(45deg); background:var(--brass); flex:none;}
.hero .thesis{
  font-family:"Fraunces",serif; font-weight:500;
  font-size:clamp(1.15rem,2.5vw,1.6rem); line-height:1.4;
  max-width:660px; margin:0 auto; color:var(--lime-white);
}
.pills{display:flex; justify-content:center; flex-wrap:wrap; gap:10px 12px; margin:30px 0 34px;}
.pill{
  font-family:"Barlow Condensed",sans-serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.14em; font-size:13px; color:var(--lime-white);
  border:1px solid var(--line); border-radius:999px; padding:7px 16px;
  background:rgba(0,0,0,.16);
}
.pill b{color:var(--brass-hi); font-weight:600;}
.hero-cta{display:flex; justify-content:center; gap:14px; flex-wrap:wrap;}

/* ---------- sections ---------- */
.section{padding:clamp(64px,9vw,108px) 0; position:relative;}
.section.s-red{
  background:linear-gradient(180deg, var(--preference-red), var(--preference-red-deep));
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.section.s-timber{
  background:linear-gradient(180deg,#241a13, #1c1410);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}

/* story */
.story-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px 64px; align-items:start; margin-top:40px;}
.story-grid .col p:last-child{margin-bottom:0;}
.pullstat{
  grid-column:1 / -1; margin-top:8px;
  display:flex; align-items:baseline; gap:18px; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:30px;
}
.pullstat .big{font-family:"Fraunces",serif; font-weight:600; color:var(--brass); font-size:clamp(2rem,5vw,3rem); line-height:1;}
.pullstat .cap{font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.16em; color:var(--muted); font-size:14px;}

/* ---------- what's on : fixtures board (signature) ---------- */
.board-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:34px;}
.board{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.2)), #131013;
  border:1px solid var(--line);
  border-radius:4px;
  box-shadow:0 34px 64px -30px rgba(0,0,0,.85), inset 0 0 0 6px rgba(190,148,77,.05);
  position:relative; overflow:hidden;
}
.board::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--brass-dim),var(--brass-hi),var(--brass-dim)); opacity:.75;
}
.board-title{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:22px 28px; border-bottom:1px solid var(--line);
}
.board-title .t{font-family:"Cinzel",serif; font-weight:700; text-transform:uppercase; letter-spacing:.2em; font-size:clamp(15px,2.2vw,20px); color:var(--brass-hi);}
.board-title .src{display:inline-flex; align-items:center; font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.14em; font-size:13px; color:var(--muted);}
.livedot{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--bancha); margin-right:8px;}
.fixtures{list-style:none; margin:0; padding:6px 0;}
.fixtures li{
  display:grid; grid-template-columns:64px 1fr auto; align-items:center; gap:18px;
  padding:15px 28px; border-bottom:1px solid var(--line-soft); font-family:"Barlow Condensed",sans-serif;
}
.fixtures li:last-child{border-bottom:0;}
.fixtures .day{font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--brass); font-size:15px;}
.fixtures .match{font-weight:500; font-size:18px; letter-spacing:.01em; color:var(--lime-white);}
.fixtures .match small{display:block; font-family:"Spectral",serif; font-size:13.5px; color:var(--muted); letter-spacing:0; margin-top:2px;}
.fixtures .time{font-weight:700; font-size:17px; letter-spacing:.06em; color:var(--cream-head); white-space:nowrap;}
.board-foot{padding:16px 28px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:14px 22px; flex-wrap:wrap;}
.board-foot .bf-note{margin:0; font-family:"Spectral",serif; font-size:14.5px; color:var(--muted); flex:1 1 320px;}
.board-foot b{color:var(--brass-hi);}
.board-foot .bf-upd{color:var(--charlbury); font-style:italic;}
.cal-link{
  flex:none; display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  font-family:"Barlow Condensed",sans-serif; font-weight:600; text-transform:uppercase;
  letter-spacing:.1em; font-size:13.5px; color:var(--brass-hi);
  padding:8px 15px; border:1px solid var(--line); border-radius:2px; background:rgba(0,0,0,.18);
  transition:border-color .25s ease, transform .18s ease, background .25s ease;
}
.cal-link:hover{border-color:var(--brass); transform:translateY(-1px); background:rgba(0,0,0,.28);}

.regulars{margin-top:40px;}
.regulars .ttl{font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.18em; color:var(--cream-head); font-size:14px; margin-bottom:16px;}
.reg-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.reg{border:1px solid var(--line); border-radius:3px; padding:18px 18px 16px; background:rgba(0,0,0,.22);}
.reg .when{font-family:"Barlow Condensed",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--brass-hi); font-size:13px;}
.reg .what{font-family:"Fraunces",serif; font-weight:600; font-size:19px; margin-top:5px; color:var(--lime-white);}

/* ---------- the bar ---------- */
.bar-grid{display:grid; grid-template-columns:340px 1fr; gap:56px; align-items:center; margin-top:8px;}
.pint-stage{display:flex; justify-content:center;}
.pint{width:230px; height:auto; filter:drop-shadow(0 24px 32px rgba(0,0,0,.55));}
.taps{display:grid; grid-template-columns:repeat(2,1fr); gap:0 40px; margin-top:26px; border-top:1px solid var(--line);}
.taps div{
  display:flex; align-items:center; gap:12px;
  padding:13px 0; border-bottom:1px solid var(--line-soft);
  font-family:"Barlow Condensed",sans-serif; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; font-size:15.5px;
}
.taps div .mk{width:6px;height:6px;transform:rotate(45deg);background:var(--brass);flex:none;}

/* ---------- hours + find ---------- */
.visit-grid{display:grid; grid-template-columns:1fr 1.15fr; gap:56px; align-items:start;}
.hours{list-style:none; margin:34px 0 0; padding:0;}
.hours li{display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding:15px 0; border-bottom:1px solid var(--line-soft); font-family:"Barlow Condensed",sans-serif;}
.hours .d{font-weight:600; text-transform:uppercase; letter-spacing:.12em; font-size:16px; color:var(--lime-white);}
.hours .h{font-weight:600; font-size:17px; letter-spacing:.04em; color:var(--muted);}
.hours li.late .h{color:var(--brass-hi);}
.late-tag{font-size:12px; letter-spacing:.16em; color:var(--brass-hi); margin-left:6px; white-space:nowrap;}
.hours-note{font-family:"Spectral",serif; font-style:italic; color:var(--muted); font-size:15px; margin-top:18px;}
.hours-note a{color:var(--brass-hi); text-decoration:underline; text-underline-offset:3px; font-style:normal;}

.addr{font-family:"Spectral",serif; line-height:1.5; margin:34px 0 22px;}
.addr .nm{font-family:"Fraunces",serif; font-weight:600; font-size:21px; color:var(--lime-white); margin-bottom:6px;}
.addr .ph{display:inline-flex; align-items:center; gap:9px; margin-top:12px; font-family:"Barlow Condensed",sans-serif; font-weight:700; letter-spacing:.06em; font-size:20px; color:var(--brass-hi);}
.visit-cta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:26px;}
.map-frame{border:1px solid var(--line); border-radius:4px; overflow:hidden; box-shadow:0 26px 50px -28px rgba(0,0,0,.8); background:#0f0c08;}
.map-frame iframe{display:block; width:100%; height:330px; border:0; filter:saturate(.8) contrast(.95) brightness(.92);}
.map-consent{display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:16px; min-height:240px; padding:28px;
  background:radial-gradient(120% 90% at 30% 10%, rgba(190,148,77,.06), transparent 60%);}
.map-consent .map-msg{font-family:"Spectral",serif; font-size:14.5px; line-height:1.5; color:var(--muted); margin:0; max-width:46ch;}

/* ---------- footer ---------- */
footer{padding:56px 0 40px; border-top:1px solid var(--line); text-align:center;}
footer .ftag{font-family:"Cinzel",serif; text-transform:uppercase; letter-spacing:.3em; font-size:12px; color:var(--brass); margin-bottom:18px;}
footer .fmark{font-family:"Cinzel",serif; font-weight:700; text-transform:uppercase; letter-spacing:.2em; color:var(--brass-hi); font-size:18px;}
footer .fline{font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); font-size:14px; margin-top:14px;}
footer .legal{font-family:"Spectral",serif; font-size:13.5px; color:var(--muted); margin-top:18px;}
footer .legal a{color:var(--brass-hi); text-decoration:underline; text-underline-offset:3px;}
footer .fmeta{font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.13em; font-size:12px; color:var(--muted); margin-top:24px;}
footer .fmeta a{color:var(--brass-hi); text-decoration:underline; text-underline-offset:3px;}
footer .fmeta .sep{margin:0 8px; color:var(--brass-dim);}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease;}
.reveal.in{opacity:1; transform:none;}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .story-grid{grid-template-columns:1fr; gap:28px;}
  .bar-grid{grid-template-columns:1fr; gap:36px;}
  .visit-grid{grid-template-columns:1fr; gap:48px;}
  .reg-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:680px){
  body{font-size:17px;}
  /* keep in-page nav on phones — wrap it to its own centred row instead of hiding it */
  .topbar .container{flex-wrap:wrap; height:auto; min-height:64px; padding-top:9px; padding-bottom:9px;}
  nav.links{order:3; flex-basis:100%; flex-wrap:wrap; justify-content:center; gap:12px 18px; font-size:13px; margin-top:2px;}
  nav.links a{padding:9px 4px;}
  .container{padding:0 20px;}
  .fixtures li{grid-template-columns:52px 1fr; row-gap:4px;}
  .fixtures .time{grid-column:2; justify-self:start; color:var(--brass-hi);}
  .taps{grid-template-columns:1fr;}
  .pills{gap:8px;}
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important;}
  .reveal{opacity:1; transform:none;}
  html{scroll-behavior:auto;}
}
@media (prefers-reduced-motion:no-preference){
  .surge{animation:surge 5.5s ease-in-out infinite;}
  .surge.s2{animation-delay:1.4s; animation-duration:6.4s;}
  @keyframes surge{
    0%{transform:translateY(28px); opacity:0;}
    30%{opacity:.55;}
    70%{opacity:.35;}
    100%{transform:translateY(-46px); opacity:0;}
  }
  .wordmark{animation:lightup 1.1s ease-out both;}
  @keyframes lightup{from{opacity:0; transform:translateY(14px) scale(.985);} to{opacity:1; transform:none;}}
  .livedot{animation:pulse 2.4s ease-out infinite;}
  @keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(126,150,80,.5);}
    70%{box-shadow:0 0 0 7px rgba(126,150,80,0);}
    100%{box-shadow:0 0 0 0 rgba(126,150,80,0);}
  }
}