/* ============================================================
   T & D FORD FISH & CHIPS — SITE STYLESHEET
   Built by DM Designs
   ============================================================ */

:root{
  /* Core palette — taken from the printed DL menu */
  --ink:        #0E0E0E;   /* menu board black */
  --ink-2:      #171717;   /* raised surface */
  --ink-3:      #202020;   /* card surface */
  --paper:      #F6F1E8;   /* newsprint wrap */
  --paper-2:    #EBE3D6;
  /* --- RED SYSTEM (WCAG AA) ---------------------------------
     One red can't do both jobs: a red light enough to read on
     black is too light to carry white text, and vice versa.
     So there are two, and each has exactly one job.

       --red       accent TEXT on dark surfaces   6.85:1 on --ink
       --red-deep  BUTTON FILL under white text   6.61:1 vs #fff

     --vermillion is kept as an alias so nothing breaks.
     --------------------------------------------------------- */
  --red:        #E23B2E;   /* text / headings / eyebrows on dark */
  --red-2:      #FF8C6B;
  --red-deep:   #E23B2E;   /* solid fills that carry white text */
  --red-deeper: #B32414;   /* fill hover / pressed */
  --red-tint:   rgba(226,59,46,0.12);

  --vermillion: #E23B2E;   /* alias → --red (legacy) */
  --vermillion-d:#B32414;  /* alias → --red-deep (legacy) */
  --crimson:    #B32414;   /* deep red block */
  --gold:       #F4C430;   /* fried gold, used sparingly */
  --cream:      #FFFDF8;
  --grey:       #9A948B;
  --line:       rgba(246,241,232,0.14);
  --line-dark:  rgba(14,14,14,0.12);

  --serif: 'Playfair Display', 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --r: 18px;
  --shadow: 0 24px 60px -20px rgba(0,0,0,0.55);
  --wrap: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Paper grain — the chip-wrap texture */
body::before{
  content:"";
  position:fixed;inset:0;
  pointer-events:none;
  z-index:1;
  opacity:0.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:700;
  margin:0;
  line-height:1.02;
  letter-spacing:-0.015em;
}
p{margin:0 0 1em;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{margin:0;padding:0;list-style:none;}

/* ---------- Accessibility ---------- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:9999;
  background:var(--red-deep);color:#fff;padding:12px 20px;
  font-weight:700;border-radius:0 0 10px 0;
}
.skip-link:focus{left:0;top:0;}

a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}

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

/* ---------- Shared building blocks ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;}

.eyebrow{
  font-family:var(--sans);
  font-size:0.7rem;
  font-weight:700;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--vermillion);
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
}
.eyebrow::after{
  content:"";
  height:1px;
  flex:1;
  max-width:60px;
  background:var(--red-deep);
  opacity:0.5;
}
.eyebrow.center{justify-content:center;}
.eyebrow.center::before{
  content:"";height:1px;flex:1;max-width:60px;
  background:var(--vermillion);opacity:0.5;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:15px 30px;
  font-family:var(--sans);
  font-size:0.82rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  border-radius:100px;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), background .25s ease, color .25s ease, box-shadow .25s ease;
  will-change:transform;
}
.btn:hover{transform:translateY(-3px);}

.btn-primary{
  background:var(--red-deep);
  color:#fff;
  box-shadow:0 12px 30px -12px rgba(255,107,74,0.8);
}
.btn-primary:hover{background:var(--red-deeper);box-shadow:0 18px 40px -12px rgba(179,36,20,0.75);}

.btn-ghost{
  background:transparent;
  color:var(--paper);
  border-color:rgba(246,241,232,0.35);
}
.btn-ghost:hover{border-color:var(--paper);background:rgba(246,241,232,0.06);}

.btn-dark{
  background:var(--ink);
  color:var(--paper);
}
.btn-dark:hover{background:var(--ink-3);}

/* ---------- Top bar ---------- */
.topbar{
  position:relative;z-index:60;
  background:var(--ink);
  border-bottom:1px solid var(--line);
  font-size:0.76rem;
  letter-spacing:0.04em;
  color:var(--grey);
}
.topbar .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;padding-top:9px;padding-bottom:9px;
}
.topbar a:hover{color:var(--paper);}
.topbar .tb-phone{color:var(--paper);font-weight:600;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:70;
  background:rgba(14,14,14,0.82);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
  transition:padding .3s ease, background .3s ease;
}
.site-header.scrolled{background:rgba(14,14,14,0.96);}

.nav-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
  padding-top:16px;padding-bottom:16px;
  transition:padding .3s ease;
}
.site-header.scrolled .nav-row{padding-top:10px;padding-bottom:10px;}

.brand{display:flex;align-items:center;gap:14px;flex-shrink:0;}
.brand-mark{
  width:50px;height:50px;border-radius:50%;
  overflow:hidden;flex-shrink:0;
  border:1px solid rgba(246,241,232,0.25);
  transition:width .3s ease,height .3s ease;
  background:#000;
}
.site-header.scrolled .brand-mark{width:42px;height:42px;}
.brand-mark img{width:100%;height:100%;object-fit:cover;}
.brand-name{
  font-family:var(--serif);
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:0.02em;
  line-height:1.1;
}
.brand-sub{
  font-size:0.6rem;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--vermillion);
  font-weight:700;
}

.nav-links{display:flex;align-items:center;gap:30px;}
.nav-links a{
  position:relative;
  font-size:0.76rem;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--grey);
  padding:4px 0;
  transition:color .2s ease;
}
.nav-links a::after{
  content:"";
  position:absolute;left:0;bottom:-2px;
  width:100%;height:1.5px;
  background:var(--red-deep);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--paper);}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{
  transform:scaleX(1);transform-origin:left;
}

.nav-cta{display:flex;align-items:center;gap:14px;flex-shrink:0;}
.nav-cta .btn{min-height:44px;padding:11px 22px;font-size:0.72rem;}

.burger{
  display:none;
  width:46px;height:46px;
  background:none;border:1px solid rgba(246,241,232,0.28);
  border-radius:10px;cursor:pointer;
  padding:0;
  align-items:center;justify-content:center;
  flex-direction:column;gap:5px;
}
.burger span{
  display:block;width:20px;height:1.5px;background:var(--paper);
  transition:transform .3s ease, opacity .3s ease;
}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* ---------- Mobile drawer ---------- */
.drawer{
  position:fixed;inset:0;z-index:200;
  background:var(--ink);
  display:flex;flex-direction:column;
  padding:26px 24px 40px;
  transform:translateY(-100%);
  transition:transform .5s cubic-bezier(.65,0,.35,1);
  overflow-y:auto;
}
.drawer.open{transform:translateY(0);}
.drawer-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:38px;}
.drawer-close{
  width:46px;height:46px;background:none;
  border:1px solid rgba(246,241,232,0.28);border-radius:10px;
  color:var(--paper);font-size:1.4rem;cursor:pointer;line-height:1;
}
.drawer nav{display:flex;flex-direction:column;gap:6px;}
.drawer nav a{
  font-family:var(--serif);
  font-size:2.1rem;
  font-weight:700;
  padding:11px 0;
  border-bottom:1px solid var(--line);
  display:flex;align-items:baseline;gap:14px;
  opacity:0;transform:translateY(16px);
}
.drawer.open nav a{
  animation:drawerIn .5s cubic-bezier(.2,.8,.2,1) forwards;
}
.drawer.open nav a:nth-child(1){animation-delay:.1s;}
.drawer.open nav a:nth-child(2){animation-delay:.16s;}
.drawer.open nav a:nth-child(3){animation-delay:.22s;}
.drawer.open nav a:nth-child(4){animation-delay:.28s;}
.drawer.open nav a:nth-child(5){animation-delay:.34s;}
.drawer.open nav a:nth-child(6){animation-delay:.40s;}
@keyframes drawerIn{to{opacity:1;transform:translateY(0);}}
.drawer nav a[aria-current="page"]{color:var(--vermillion);}
.drawer nav a .num{
  font-family:var(--sans);font-size:0.66rem;font-weight:700;
  letter-spacing:0.16em;color:var(--vermillion);
}
.drawer-foot{margin-top:auto;padding-top:36px;}
.drawer-foot .btn{width:100%;}
.drawer-foot p{
  margin-top:18px;font-size:0.8rem;color:var(--grey);text-align:center;
}

/* ---------- Status pill ---------- */
.status-pill{
  position:fixed;
  left:50%;bottom:14px;
  transform:translateX(-50%) translateY(120px);
  z-index:150;
  display:inline-flex;align-items:center;gap:12px;
  padding:11px 22px 11px 18px;
  border-radius:100px;
  background:rgba(23,23,23,0.78);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid rgba(246,241,232,0.16);
  box-shadow:0 20px 50px -16px rgba(0,0,0,0.75);
  font-size:0.82rem;
  white-space:nowrap;
  opacity:0;
  transition:transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s ease;
}
.status-pill.show{transform:translateX(-50%) translateY(0);opacity:1;}
.status-dot{
  width:9px;height:9px;border-radius:50%;flex-shrink:0;
  position:relative;
  background:var(--grey);
}
.status-pill.is-open .status-dot{background:#3FD07E;}
.status-pill.is-closed .status-dot{background:var(--crimson);}
.status-dot::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid currentColor;
  animation:ping 2.4s cubic-bezier(0,0,.2,1) infinite;
}
.status-pill.is-open .status-dot::after{border-color:#3FD07E;}
.status-pill.is-closed .status-dot::after{border-color:var(--crimson);}
@keyframes ping{
  0%{transform:scale(.7);opacity:.9;}
  80%,100%{transform:scale(1.9);opacity:0;}
}
.status-label{font-weight:700;letter-spacing:0.04em;color:var(--paper);}
.status-note{color:var(--grey);}
.status-pill .sep{color:var(--grey);opacity:.5;}
.status-pill .pill-call{
  margin-left:6px;padding-left:14px;
  border-left:1px solid rgba(246,241,232,0.16);
  color:var(--vermillion);font-weight:700;letter-spacing:.04em;
}
.status-pill .pill-call:hover{color:var(--gold);}

@media (max-width:520px){
  .status-pill{
    left:14px;right:14px;bottom:14px;transform:translateY(120px);
    justify-content:center;padding:10px 14px;font-size:0.75rem;
  }
  .status-pill.show{transform:translateY(0);}
  .status-note{display:none;}
}

/* ---------- Page hero (interior pages) ---------- */
.page-hero{
  position:relative;
  padding:100px 0 76px;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.page-hero::after{
  content:"";
  position:absolute;
  right:-140px;top:50%;
  width:420px;height:420px;
  transform:translateY(-50%);
  background:radial-gradient(circle, rgba(255,107,74,0.16), transparent 68%);
  pointer-events:none;
}
.page-hero .wrap{position:relative;z-index:2;}
.crumbs{
  font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--grey);margin-bottom:26px;
}
.crumbs a:hover{color:var(--vermillion);}
.crumbs span{color:var(--paper);}
.page-hero h1{
  font-size:clamp(2.9rem,8vw,5.4rem);
  max-width:14ch;
}
.page-hero h1 em{font-style:italic;color:var(--vermillion);}
.page-hero .lede{
  margin-top:22px;max-width:46ch;
  font-size:1.02rem;color:var(--grey);
}

/* ---------- Sections ---------- */
.band{padding:96px 0;position:relative;}
.band-paper{
  background:var(--paper);
  color:var(--ink);
}
.band-paper h1,.band-paper h2,.band-paper h3{color:var(--ink);}
.band-paper .eyebrow{color:var(--vermillion-d);}
.band-paper .muted{color:#5F5A52;}
.muted{color:var(--grey);}

.section-title{
  font-size:clamp(2.1rem,4.6vw,3.4rem);
  max-width:16ch;
}
.section-title em{font-style:italic;color:var(--vermillion);}

/* ---------- Reveal on scroll ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);
}
.reveal.in{opacity:1;transform:none;}
.reveal[data-d="1"]{transition-delay:.08s;}
.reveal[data-d="2"]{transition-delay:.16s;}
.reveal[data-d="3"]{transition-delay:.24s;}
.reveal[data-d="4"]{transition-delay:.32s;}
.reveal[data-d="5"]{transition-delay:.40s;}

/* ---------- Stamp (signature element) ---------- */
.stamp{
  width:150px;height:150px;
  border-radius:50%;
  border:1px solid var(--vermillion);
  display:grid;place-items:center;
  position:relative;
  flex-shrink:0;
}
.stamp::before{
  content:"";position:absolute;inset:7px;
  border-radius:50%;border:1px dashed rgba(255,107,74,0.4);
}
.stamp-in{
  text-align:center;
  font-family:var(--sans);
  font-size:0.56rem;
  font-weight:700;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--vermillion);
  line-height:1.9;
}
.stamp-in strong{
  display:block;
  font-family:var(--serif);
  font-size:1.5rem;
  letter-spacing:0;
  text-transform:none;
  color:var(--paper);
  margin:2px 0;
}
.band-paper .stamp-in strong{color:var(--ink);}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--ink);
  border-top:1px solid var(--line);
  padding:82px 0 34px;
  position:relative;
  z-index:2;
}
.foot-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1.1fr;
  gap:48px;
  padding-bottom:56px;
  border-bottom:1px solid var(--line);
}
.foot-logo{
  font-family:var(--serif);
  font-size:1.7rem;
  line-height:1.15;
  margin-bottom:16px;
}
.foot-logo span{color:var(--vermillion);}
.foot-blurb{color:var(--grey);font-size:0.9rem;max-width:30ch;}
.foot-h{
  font-family:var(--sans);
  font-size:0.66rem;font-weight:700;
  letter-spacing:0.2em;text-transform:uppercase;
  color:var(--vermillion);
  margin-bottom:18px;
}
.foot-list li{margin-bottom:10px;font-size:0.9rem;color:var(--grey);}
.foot-list a:hover{color:var(--paper);}
.foot-list .day{
  display:flex;justify-content:space-between;gap:16px;
  font-variant-numeric:tabular-nums;
}
.foot-list .day.today{color:var(--gold);font-weight:600;}
.foot-phone{
  font-family:var(--serif);
  font-size:1.5rem;
  color:var(--paper);
  display:inline-block;
  margin-bottom:6px;
}
.foot-phone:hover{color:var(--vermillion);}
.foot-bottom{
  padding-top:28px;
  display:flex;justify-content:space-between;align-items:center;
  gap:18px;flex-wrap:wrap;
  font-size:0.78rem;color:var(--grey);
}
.foot-bottom a{border-bottom:1px solid rgba(246,241,232,0.28);}
.foot-bottom a:hover{color:var(--paper);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .nav-links{display:none;}
  .nav-cta .btn{display:none;}
  .burger{display:flex;}
  .foot-grid{grid-template-columns:1fr 1fr;gap:40px;}
}
@media (max-width:768px){
  .band{padding:70px 0;}
  .page-hero{padding:70px 0 56px;}
  .topbar .wrap{justify-content:center;font-size:0.7rem;}
  .topbar .tb-addr{display:none;}
}
@media (max-width:560px){
  .wrap{padding:0 18px;}
  .foot-grid{grid-template-columns:1fr;gap:34px;}
  .foot-bottom{flex-direction:column;text-align:center;}
  .drawer nav a{font-size:1.7rem;}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none;}
  .drawer nav a{opacity:1;transform:none;}
  .status-pill{opacity:1;transform:translateX(-50%);}
  .btn:hover{transform:none;}
}

/* ---------- No JS fallback ---------- */
.no-js .reveal{opacity:1;transform:none;}
.no-js .status-pill{display:none;}
.no-js .menu-item{display:flex !important;}

/* ---------- Icon sprite ---------- */
.ico{
  width:1em;height:1em;
  display:inline-block;
  vertical-align:-0.125em;
  flex-shrink:0;
}
.topbar .ico{opacity:0.7;width:0.95em;height:0.95em;}
.search-box .icon .ico{width:16px;height:16px;}

/* ============================================================
   LIGHT / DARK MODE
   The site is authored dark-first. Light mode swaps the semantic
   tokens, so every existing rule inherits the new theme for free.
   ============================================================ */
:root{
  color-scheme:dark;
  --shake:#F4C430;
}
html[data-theme="light"]{
  color-scheme:light;
  --ink:        #F6F1E8;   /* surfaces flip to newsprint */
  --ink-2:      #EFE8DB;
  --ink-3:      #E7DECE;
  --paper:      #16130F;   /* text flips to near-black */
  --paper-2:    #FFFDF8;
  --grey:       #6A635A;
  --line:       rgba(14,14,14,0.14);
  --line-dark:  rgba(14,14,14,0.10);
  --shadow: 0 24px 60px -26px rgba(60,45,25,0.30);
  --vermillion: #E23B2E;  /* keeps the chipper-red accent readable on cream */
  --red:        #E23B2E;
}
html[data-theme="light"] body::before{opacity:0.035;}

/* Elements that hard-coded a colour need re-pointing in light mode */
html[data-theme="light"] .rev:nth-child(2){
  background:#16130F;color:#F6F1E8;
}
html[data-theme="light"] .rev:nth-child(2) .rev-text{color:rgba(246,241,232,0.86);}
html[data-theme="light"] .rev:nth-child(2) .rev-who{color:#9A948B;}
html[data-theme="light"] .band-paper{background:var(--paper-2);}
html[data-theme="light"] .band-paper .section-title,
html[data-theme="light"] .rev-text{color:var(--paper);}
html[data-theme="light"] .foot-bottom a{border-bottom-color:rgba(14,14,14,0.28);}
html[data-theme="light"] .drawer{background:var(--ink-2);}
html[data-theme="light"] .page-hero::after{background:radial-gradient(circle, rgba(255,107,74,0.12), transparent 68%);}
html[data-theme="light"] .hero-scrim{
  background:
    linear-gradient(to top, rgba(20,17,13,0.94) 0%, rgba(20,17,13,0.66) 32%, rgba(20,17,13,0.24) 64%, rgba(20,17,13,0.46) 100%),
    radial-gradient(ellipse 90% 70% at 50% 60%, transparent 30%, rgba(20,17,13,0.7) 100%);
}
/* The home hero sits on video/photo — keep its text light in both themes */
html[data-theme="light"] .hero h1,
html[data-theme="light"] .hero .hero-sub,
html[data-theme="light"] .hero .hero-kicker,
html[data-theme="light"] .hero .hero-facts dd,
html[data-theme="light"] .hero .scroll-hint,
html[data-theme="light"] .hero .btn-ghost,
html[data-theme="light"] .page-hero.has-media h1,
html[data-theme="light"] .page-hero.has-media .lede,
html[data-theme="light"] .page-hero.has-media .crumbs span{color:#F6F1E8;}
html[data-theme="light"] .hero .btn-ghost{border-color:rgba(246,241,232,0.5);}
html[data-theme="light"] .hero .btn-ghost:hover{border-color:#F6F1E8;background:rgba(246,241,232,0.1);}

html[data-theme="light"] .site-header{background:rgba(246,241,232,0.86);}
html[data-theme="light"] .site-header.scrolled{background:rgba(246,241,232,0.97);}
html[data-theme="light"] .nav-links a::after{background:var(--red-deep);}
html[data-theme="light"] .burger{border-color:rgba(14,14,14,0.18);}
html[data-theme="light"] .drawer-close{border-color:rgba(14,14,14,0.18);}

/* ---------- Theme toggle button ---------- */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;
  border-radius:100px;
  border:1.5px solid var(--line);
  background:transparent;
  color:var(--paper);
  cursor:pointer;
  flex-shrink:0;
  transition:border-color .25s ease, background .25s ease, transform .25s cubic-bezier(.2,.8,.2,1);
}
.theme-toggle:hover{border-color:var(--vermillion);transform:translateY(-2px);}
.theme-toggle .ico{width:18px;height:18px;}
.theme-toggle .i-sun{display:none;}
html[data-theme="light"] .theme-toggle .i-sun{display:block;}
html[data-theme="light"] .theme-toggle .i-moon{display:none;}
.drawer-foot .theme-toggle{width:auto;padding:0 20px;gap:10px;height:52px;font:700 0.78rem/1 var(--sans);letter-spacing:0.14em;text-transform:uppercase;}
.no-js .theme-toggle{display:none;}

/* ============================================================
   HERO TYPEWRITER
   ============================================================ */
.hero h1 .tw{
  display:inline-block;
  position:relative;
}
/* JS drives the reveal; the caret is CSS */
.tw-on .hero h1 .l1,
.tw-on .hero h1 .l2,
.tw-on .hero h1 .l3{
  animation:none;
  opacity:1;
  transform:none;
}
/* Each line keeps its full height from the very first frame — an invisible
   ghost copy of the finished text holds the space, so nothing jumps as the
   headline types itself in. */
.tw-on .hero h1 .tw-line{
  display:block;
  position:relative;
}
.tw-on .hero h1 .tw-ghost{
  visibility:hidden;
  pointer-events:none;
}
.tw-on .hero h1 .tw-real{
  position:absolute;
  inset:0;
  white-space:nowrap;
}
.tw-caret{
  display:inline-block;
  width:3px;
  height:0.82em;
  margin-left:6px;
  vertical-align:-0.06em;
  background:var(--red-deep);
  animation:caretBlink 1s steps(1) infinite;
}
.tw-line.done .tw-caret{display:none;}
.tw-on .hero h1 .tw-line.pending .tw-caret{display:none;}
@keyframes caretBlink{0%,49%{opacity:1;}50%,100%{opacity:0;}}
/* Nothing typed yet: reserve the space so the page doesn't jump */
.tw-on .hero h1{min-height:1px;}
@media (prefers-reduced-motion:reduce){
  .tw-caret{display:none;}
}

/* ============================================================
   REVIEWS — SWIPEABLE RAIL
   ============================================================ */
.rev-rail{
  position:relative;
}
.rev-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(300px,1fr);
  gap:22px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:26px 2px 30px;
  margin:-26px -2px -6px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.rev-track::-webkit-scrollbar{display:none;}
.rev-track > .rev{
  scroll-snap-align:center;
  height:100%;
}
/* Kill the old staggered lift inside a scroller — it breaks snapping */
.rev-track > .rev:nth-child(2){transform:none;background:var(--paper-2);color:var(--ink);}
.rev-track > .rev:nth-child(2) .rev-text{color:var(--ink);}
.rev-track > .rev:nth-child(2) .rev-who{color:#5F5A52;}
.rev-track > .rev:hover{transform:translateY(-8px);}
html[data-theme="light"] .rev-track > .rev:nth-child(2){background:var(--paper-2);color:#16130F;}
html[data-theme="light"] .rev-track > .rev:nth-child(2) .rev-text{color:#16130F;}

.rev-nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin-top:22px;
}
.rev-dots{display:flex;align-items:center;gap:2px;flex-wrap:wrap;}
.rev-dot{
  width:24px;height:24px;padding:0;
  border-radius:100px;border:0;
  background:none;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.rev-dot::before{
  content:"";
  width:8px;height:8px;border-radius:100px;
  background:rgba(14,14,14,0.22);
  transition:width .3s ease, background .3s ease;
}
.band-paper .rev-dot::before{background:rgba(14,14,14,0.22);}
.rev-dot.active::before{width:22px;background:var(--red-deep);}
.rev-arrows{display:flex;gap:10px;}
.rev-arrow{
  width:46px;height:46px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:100px;
  border:1.5px solid rgba(14,14,14,0.16);
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  transition:background .25s ease, color .25s ease, transform .25s ease, opacity .25s ease;
}
.rev-arrow:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px);}
.rev-arrow[disabled]{opacity:0.3;cursor:default;transform:none;}
.rev-arrow[disabled]:hover{background:transparent;color:var(--ink);}
html[data-theme="light"] .rev-arrow{border-color:rgba(14,14,14,0.16);color:#16130F;}
html[data-theme="light"] .rev-arrow:hover{background:#16130F;color:#F6F1E8;}
.rev-swipe-hint{
  font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;
  color:#5F5A52;font-weight:700;
}
.rev-gsource{
  display:inline-flex;align-items:center;gap:8px;
  font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;
  font-weight:700;color:#5F5A52;
}
.rev-gsource .g{color:var(--vermillion);font-weight:800;}
@media (max-width:880px){
  .rev-track{grid-auto-columns:minmax(80%,1fr);}
  .rev-arrows{display:none;}
  .rev-nav{justify-content:center;}
}
.no-js .rev-nav{display:none;}
.no-js .rev-track{grid-auto-columns:1fr;overflow:visible;}

/* ============================================================
   MENU / INTERIOR PAGE HERO IMAGE
   ============================================================ */
.page-hero.has-media{
  padding:120px 0 96px;
  border-bottom:0;
}
.page-hero.has-media .ph-media{
  position:absolute;inset:0;z-index:0;
}
.page-hero.has-media .ph-media img{
  width:100%;height:100%;object-fit:cover;
}
.page-hero.has-media .ph-scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to top, rgba(14,14,14,0.94) 0%, rgba(14,14,14,0.70) 38%, rgba(14,14,14,0.34) 72%, rgba(14,14,14,0.55) 100%),
    radial-gradient(ellipse 80% 70% at 40% 60%, transparent 20%, rgba(14,14,14,0.72) 100%);
}
.page-hero.has-media .wrap{max-width:var(--wrap);}

.page-hero.has-media::after{display:none;}
.page-hero.has-media h1{color:var(--paper);}
.page-hero.has-media .lede{color:rgba(246,241,232,0.80);}
.page-hero.has-media .crumbs{color:rgba(246,241,232,0.62);}
.page-hero.has-media .crumbs span{color:var(--paper);}
@media (max-width:768px){
  .page-hero.has-media{padding:80px 0 64px;}
}

/* ============================================================
   COMMUNITY / LIMERICK GAA CARD
   ============================================================ */
.community-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:0;
  border-radius:var(--r);
  overflow:hidden;
  border:1px solid var(--line);
}
.community-info{
  padding:40px 48px;
  background:var(--ink-2);
  display:flex;flex-direction:column;justify-content:center;
}
.community-info h2{font-size:clamp(1.9rem,3.6vw,2.7rem);margin-bottom:18px;}
.community-info p{color:var(--grey);max-width:46ch;}
.community-media{
  position:relative;min-height:320px;
  overflow:hidden;
}
.community-media img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
}
@media (max-width:900px){
  .community-grid{grid-template-columns:1fr;}
  .community-media{min-height:220px;padding:0;}
  .community-media img{max-height:none;}
  .community-info{padding:38px 28px;}
}

/* ============================================================
   PERSISTENT CALL BAR
   One fixed pill, always on screen, on every page. The whole bar
   is the call target — the live open/closed state sits inside it.
   ============================================================ */
.call-dock{
  position:fixed;
  z-index:180;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:12px;
  height:52px;
  padding:0 8px 0 18px;
  border-radius:100px;
  background:rgba(20,18,16,0.82);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid rgba(246,241,232,0.16);
  box-shadow:0 20px 50px -18px rgba(0,0,0,0.7);
  color:#F6F1E8;
  text-decoration:none;
  white-space:nowrap;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), background .25s ease, border-color .25s ease;
}
.call-dock:hover{
  transform:translateX(-50%) translateY(-3px);
  border-color:rgba(255,107,74,0.6);
}
html[data-theme="light"] .call-dock{
  background:rgba(28,24,20,0.88);
  border-color:rgba(246,241,232,0.14);
}

/* Live open/closed state */
.call-dock .cd-state{
  display:inline-flex;align-items:center;gap:8px;
  font-size:0.74rem;font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;
  color:rgba(246,241,232,0.62);
}
.call-dock .cd-dot{
  width:8px;height:8px;border-radius:100px;
  background:#B4453A;flex-shrink:0;
}
.call-dock.is-open .cd-dot{
  background:#3FBF6B;
  animation:dockPulse 2.2s infinite;
}
.call-dock.is-open .cd-status{color:#F6F1E8;}
@keyframes dockPulse{
  0%{box-shadow:0 0 0 0 rgba(63,191,107,0.55);}
  70%{box-shadow:0 0 0 8px rgba(63,191,107,0);}
  100%{box-shadow:0 0 0 0 rgba(63,191,107,0);}
}
.call-dock .cd-sep{
  width:1px;height:20px;
  background:rgba(246,241,232,0.18);
  flex-shrink:0;
}
/* The call half of the pill */
.call-dock .cd-call{
  display:inline-flex;align-items:center;gap:9px;
  height:38px;padding:0 18px;
  border-radius:100px;
  background:var(--red-deep);
  color:#fff;
  font-size:0.76rem;font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;
  transition:background .25s ease;
}
.call-dock:hover .cd-call{background:var(--red-deeper);}
.call-dock .cd-call .ico{width:15px;height:15px;}
.call-dock .cd-num{display:inline;}

@media (max-width:560px){
  .call-dock{
    left:14px;right:14px;
    bottom:calc(14px + env(safe-area-inset-bottom));
    transform:none;
    width:auto;
    justify-content:space-between;
    padding:0 8px 0 14px;
  }
  .call-dock:hover{transform:translateY(-3px);}
  .call-dock .cd-state{font-size:0.68rem;letter-spacing:0.06em;}
  .call-dock .cd-num{display:none;}
  body{padding-bottom:82px;}
}
@media (prefers-reduced-motion:reduce){
  .call-dock{transition:none;}
  .call-dock.is-open .cd-dot{animation:none;}
}

/* ============================================================
   FOOD GALLERY — the actual food, across the site
   ============================================================ */
/* The six source photos are only 206x206. Blowing them up into big square
   tiles was what made them look soft and "stuck on".
   Instead: a 3x2 editorial gallery with a taller 4:5 crop, captions always
   visible on a solid plate, and a max width so no tile is ever scaled far
   past its native resolution. Fills the band properly and stays sharp. */
.food-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  max-width:900px;
  margin:0 auto;
}
.food-tile{
  position:relative;
  margin:0;
  aspect-ratio:4/5;
  border-radius:14px;
  overflow:hidden;
  background:var(--ink-3);
  border:1px solid var(--line);
  box-shadow:0 18px 40px -22px rgba(0,0,0,0.8);
  transition:transform .5s cubic-bezier(.2,.8,.2,1), border-color .3s ease;
}
.food-tile:hover{transform:translateY(-4px);border-color:rgba(255,107,74,0.45);}
.food-tile img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
.food-tile:hover img{transform:scale(1.05);}
/* Caption always readable — not a hover-only easter egg. */
.food-tile figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:42px 14px 13px;
  font-size:0.7rem;font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;
  color:#F6F1E8;
  background:linear-gradient(to top, rgba(10,10,10,0.94) 32%, rgba(10,10,10,0.55) 68%, transparent);
  opacity:1;
  transform:none;
}
@media (max-width:820px){
  .food-strip{grid-template-columns:repeat(2,1fr);gap:14px;max-width:520px;}
}
@media (max-width:420px){
  .food-strip{gap:10px;}
  .food-tile figcaption{font-size:0.62rem;padding:34px 10px 10px;}
}

/* Shake feature — uses the high-res milkshake photography */
.shake-feature{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:0;
  border-radius:var(--r);
  overflow:hidden;
  border:1px solid var(--line);
}
.shake-media{position:relative;min-height:420px;background:var(--ink-3);}
.shake-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.shake-info{
  padding:56px 48px;
  background:var(--ink-2);
  display:flex;flex-direction:column;justify-content:center;
}
.shake-info h2{font-size:clamp(1.9rem,3.6vw,2.7rem);margin-bottom:18px;}
.shake-info p{color:var(--grey);max-width:44ch;}
@media (max-width:900px){
  .shake-feature{grid-template-columns:1fr;}
  .shake-media{min-height:320px;}
  .shake-info{padding:38px 28px;}
}

.no-js .food-tile figcaption{opacity:1;transform:none;}