/* ======================================================================
   MAYFAIR SEAFOOD — design system
   Concept: dock-ticket / fish-camp signage. Deep harbor navy carries the
   page, kraft-paper "catch tickets" hold the one-off callouts, coral reads
   like a rubber ink stamp on the order pad.
   ====================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;700;800;900&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* ---- color tokens ---- */
  --navy:        #0E2A3D;
  --navy-deep:   #081B28;
  --navy-soft:   #163C54;
  --paper:       #F0E4C8;
  --paper-dark:  #E3D3AC;
  --coral:       #E2522D;
  --coral-dark:  #C13F1E;
  --brass:       #D7A23E;
  --cream:       #F7F1E1;
  --ink:         #1B2326;
  --seafoam:     #5C8C82;
  --line:        rgba(247,241,225,0.16);
  --line-dark:   rgba(27,35,38,0.14);

  /* ---- type ---- */
  --f-display: "Big Shoulders Display", sans-serif;
  --f-body:    "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-mono:    "Space Mono", ui-monospace, monospace;

  --container: 1180px;
  --radius: 6px;
}

/* ---------------------------------------------------------------------
   Reset
   --------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
body{ margin:0; }
img{ max-width:100%; display:block; }
ul{ list-style:none; margin:0; padding:0; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }
h1,h2,h3,h4,p,figure{ margin:0; }

body{
  font-family: var(--f-body);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

:focus-visible{
  outline: 3px solid var(--brass);
  outline-offset: 3px;
}

.container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

.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;
}

.skip-link{
  position:absolute; left:12px; top:-60px;
  background:var(--coral); color:#fff; padding:10px 16px; border-radius:4px;
  font-family:var(--f-body); font-weight:700; z-index:200;
  transition: top .15s ease;
}
.skip-link:focus{ top:12px; }

/* ---------------------------------------------------------------------
   Type scale
   --------------------------------------------------------------------- */
h1,h2,h3,.display{
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.98;
  color: var(--navy);
}
h1{ font-size: clamp(2.6rem, 5.5vw, 4.6rem); }
h2{ font-size: clamp(2rem, 4vw, 3rem); }
h3{ font-size: clamp(1.25rem, 2vw, 1.6rem); }

.eyebrow{
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}

p.lede{ font-size: 1.15rem; line-height: 1.65; }

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--f-body); font-weight:700; font-size:1rem;
  padding: 14px 26px;
  border-radius: 3px;
  border: 2px solid transparent;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  white-space: nowrap;
}
.btn-stamp{
  background: var(--coral);
  color: #fff;
  box-shadow: 0 3px 0 var(--coral-dark);
}
.btn-stamp:hover{ transform: translateY(-2px) rotate(-0.6deg); box-shadow: 0 5px 0 var(--coral-dark); }
.btn-stamp:active{ transform: translateY(1px) rotate(0deg); box-shadow: 0 1px 0 var(--coral-dark); }

.btn-outline{
  background: transparent;
  border-color: currentColor;
  color: inherit;
}
.btn-outline:hover{ background: rgba(255,255,255,0.08); }
.on-light .btn-outline:hover{ background: rgba(14,42,61,0.06); }

.btn-sm{ padding: 10px 18px; font-size: 0.9rem; }

/* ---------------------------------------------------------------------
   Header / nav
   --------------------------------------------------------------------- */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: var(--navy);
  border-bottom: 1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap: 20px;
  padding-block: 14px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  font-family: var(--f-display);
  color: var(--cream);
  font-size: 1.5rem;
  letter-spacing: 0.02em;
}
.brand img{ height: 44px; width:auto; filter: brightness(0) invert(1); }
.brand small{
  display:block;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--brass);
  font-weight: 700;
}

.main-nav{ display:flex; align-items:center; gap: 28px; }
.main-nav a{
  font-family: var(--f-mono);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream);
  font-weight:700;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: border-color .15s ease, color .15s ease;
}
.main-nav a:hover, .main-nav a[aria-current="page"]{
  border-color: var(--coral);
  color: var(--brass);
}

.status-pill{
  display:inline-flex; align-items:center; gap:7px;
  font-family: var(--f-mono); font-size:0.75rem; font-weight:700;
  letter-spacing:0.06em; text-transform:uppercase;
  color: var(--cream);
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.status-pill .dot{ width:8px; height:8px; border-radius:50%; background: var(--seafoam); flex-shrink:0; }
.status-pill[data-open="true"] .dot{ background:#6FCB8E; box-shadow:0 0 0 3px rgba(111,203,142,0.25); }
.status-pill[data-open="false"] .dot{ background:#D7794E; box-shadow:0 0 0 3px rgba(215,121,78,0.2); }

.header-actions{ display:flex; align-items:center; gap:16px; }

.nav-toggle{
  display:none;
  background:none; border: 1px solid var(--line); border-radius:4px;
  color: var(--cream); padding:8px 10px;
}

@media (max-width: 920px){
  .main-nav{
    position:absolute; left:0; right:0; top:100%;
    background: var(--navy); flex-direction:column; align-items:flex-start;
    padding: 18px 24px 26px; gap:16px;
    border-bottom: 1px solid var(--line);
    display:none;
  }
  .main-nav.is-open{ display:flex; }
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  .status-pill{ display:none; }
}

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.hero{
  position:relative;
  color: var(--cream);
  background-color: var(--navy);
  background-image: linear-gradient(180deg, rgba(8,27,40,0.72) 0%, rgba(8,27,40,0.56) 38%, rgba(8,27,40,0.88) 100%), var(--hero-img, none);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  overflow:hidden;
}
.hero-inner{
  padding-block: 96px 110px;
  max-width: 720px;
  position:relative; z-index:2;
}
.hero .eyebrow{ color: var(--brass); text-shadow: 0 2px 14px rgba(8,27,40,0.7); }
.hero h1{ color: var(--cream); margin-top:14px; text-shadow: 0 4px 24px rgba(8,27,40,0.65); }
.hero p.lede{ margin-top: 20px; color: rgba(247,241,225,0.92); max-width: 540px; text-shadow: 0 2px 14px rgba(8,27,40,0.6); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top: 34px; }

.page-band{
  background: var(--navy);
  color: var(--cream);
  padding-block: 64px 80px;
}
.page-band .eyebrow{ color: var(--brass); }
.page-band h1{ color: var(--cream); margin-top: 10px; }
.page-band p.lede{ color: rgba(247,241,225,0.82); margin-top: 16px; max-width: 620px; }

/* ---------------------------------------------------------------------
   Catch ticket — signature element
   --------------------------------------------------------------------- */
.ticket{
  --notch: 10px;
  position: relative;
  background: var(--paper);
  color: var(--ink);
  padding: 22px 26px;
  border-radius: 2px;
  box-shadow: 0 14px 30px rgba(8,27,40,0.35);
  transform: rotate(-2.2deg);
  width: fit-content;
}
.ticket::before{
  content:"";
  position:absolute; left:0; right:0; top:0; bottom:0;
  -webkit-mask-image:
    radial-gradient(circle at 0 0, transparent var(--notch), #000 calc(var(--notch) + 0.5px)),
    radial-gradient(circle at 100% 0, transparent var(--notch), #000 calc(var(--notch) + 0.5px)),
    radial-gradient(circle at 0 100%, transparent var(--notch), #000 calc(var(--notch) + 0.5px)),
    radial-gradient(circle at 100% 100%, transparent var(--notch), #000 calc(var(--notch) + 0.5px));
  mask-image:
    radial-gradient(circle at 0 0, transparent var(--notch), #000 calc(var(--notch) + 0.5px)),
    radial-gradient(circle at 100% 0, transparent var(--notch), #000 calc(var(--notch) + 0.5px)),
    radial-gradient(circle at 0 100%, transparent var(--notch), #000 calc(var(--notch) + 0.5px)),
    radial-gradient(circle at 100% 100%, transparent var(--notch), #000 calc(var(--notch) + 0.5px));
  pointer-events:none;
}
.ticket .ticket-eyebrow{
  font-family: var(--f-mono); font-size:0.68rem; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase; color: var(--coral-dark);
}
.ticket .ticket-headline{
  font-family: var(--f-display); font-weight:800; font-size:1.7rem;
  text-transform:uppercase; color: var(--navy); margin-top:4px; line-height:1;
}
.ticket .ticket-sub{ font-family: var(--f-mono); font-size:0.78rem; margin-top:8px; color: var(--ink); opacity:0.75; }
.ticket-perf{
  border-top: 2px dashed rgba(27,35,38,0.3);
  margin-top: 10px; padding-top: 10px;
}

.hero-ticket{
  position:absolute; right: 6%; bottom: -26px; z-index:3;
}
@media (max-width: 760px){ .hero-ticket{ display:none; } }

/* ---------------------------------------------------------------------
   Section scaffolding
   --------------------------------------------------------------------- */
.section{ padding-block: 76px; }
.section-tight{ padding-block: 48px; }
.section-head{ max-width: 640px; margin-bottom: 42px; }
.section-head .eyebrow{ color: var(--coral-dark); }
.section-head h2{ margin-top: 10px; }
.section-head p{ margin-top: 14px; color: rgba(27,35,38,0.74); font-size: 1.05rem; }

.on-navy{ background: var(--navy); color: var(--cream); }
.on-navy h2{ color: var(--cream); }
.on-navy .section-head p{ color: rgba(247,241,225,0.78); }
.on-navy .section-head .eyebrow{ color: var(--brass); }

.on-paper{ background: var(--paper); }

/* ---------------------------------------------------------------------
   Trust strip
   --------------------------------------------------------------------- */
.trust-strip{
  display:flex; flex-wrap:wrap; gap: 14px 32px;
  padding-block: 26px;
  border-top: 1px solid var(--line);
}
.trust-item{
  display:flex; align-items:center; gap:10px;
  font-family: var(--f-mono); font-size:0.82rem; letter-spacing:0.04em;
  color: var(--cream);
}
.trust-item svg{ flex-shrink:0; color: var(--brass); }

/* ---------------------------------------------------------------------
   Card grids
   --------------------------------------------------------------------- */
.grid{ display:grid; gap: 26px; }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px){ .grid-4{ grid-template-columns: repeat(2,1fr);} .grid-3{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 620px){ .grid-4, .grid-3, .grid-2{ grid-template-columns: 1fr; } }

.dish-card{
  position:relative;
  border-radius: var(--radius);
  overflow:hidden;
  background: var(--navy-soft);
  aspect-ratio: 4/5;
  display:flex; align-items:flex-end;
}
.dish-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.dish-card:hover img{ transform: scale(1.06); }
.dish-card::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 40%, rgba(8,27,40,0.92) 100%);
}
.dish-card-body{
  position:relative; z-index:2; padding: 18px;
  display:flex; align-items:center; justify-content:space-between; width:100%;
  gap: 10px;
}
.dish-card-body h3{ color:#fff; font-size:1.15rem; }
.dish-card-body .arrow{
  flex-shrink:0; width:36px; height:36px; border-radius:50%;
  background: var(--coral); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition: transform .15s ease;
}
.dish-card:hover .dish-card-body .arrow{ transform: translateX(3px); }
.dish-card-link{ position:absolute; inset:0; z-index:3; }

/* category cards (menu page) */
.cat-card{
  background:#fff;
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: 0 8px 22px rgba(14,42,61,0.08);
  display:flex; flex-direction:column;
}
.cat-card .cat-img{ aspect-ratio: 16/10; overflow:hidden; }
.cat-card .cat-img img{ width:100%; height:100%; object-fit:cover; }

/* Crops out an unwanted bottom-right corner artifact in the source photo
   by zooming in from the top-left, pushing that corner outside the frame. */
.crop-br{
  object-position: left top !important;
  transform: scale(1.32);
  transform-origin: top left;
}
.cat-card-body{ padding: 22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.cat-card-body h3{ color: var(--navy); }
.cat-card-body p{ color: rgba(27,35,38,0.7); font-size:0.95rem; flex:1; }

/* ---------------------------------------------------------------------
   Story split
   --------------------------------------------------------------------- */
.split{
  display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items:center;
}
@media (max-width: 860px){ .split{ grid-template-columns:1fr; gap:36px; } }
.split img{ border-radius: var(--radius); width:100%; aspect-ratio: 4/3.4; object-fit:cover; }
.split .eyebrow{ color: var(--coral-dark); }
.split h2{ margin-top:10px; }
.split p{ margin-top:18px; color: rgba(27,35,38,0.78); }
.split p + p{ margin-top: 12px; }

/* ---------------------------------------------------------------------
   Testimonials
   --------------------------------------------------------------------- */
.testimonial{
  background: var(--navy-soft);
  border-radius: var(--radius);
  padding: 28px;
  display:flex; flex-direction:column; gap:18px;
  height:100%;
}
.testimonial .stars{ color: var(--brass); letter-spacing:2px; font-size:1rem; }
.testimonial blockquote{ margin:0; color: var(--cream); font-size:1.02rem; line-height:1.6; }
.testimonial footer{
  font-family: var(--f-mono); font-size:0.78rem; color: var(--brass);
  letter-spacing:0.04em;
}

/* ---------------------------------------------------------------------
   FAQ (native details/summary — zero JS, accessible)
   --------------------------------------------------------------------- */
.faq-list{ display:flex; flex-direction:column; gap:12px; max-width: 760px; }
.faq-item{
  background:#fff;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 4px 22px;
}
.faq-item summary{
  cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-block: 18px;
  font-weight:700; color: var(--navy); font-size:1.02rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .plus{
  flex-shrink:0; width:26px; height:26px; border-radius:50%;
  border: 1.5px solid var(--coral); color: var(--coral);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  transition: transform .18s ease;
}
.faq-item[open] summary .plus{ transform: rotate(45deg); }
.faq-item p{ padding-bottom: 20px; color: rgba(27,35,38,0.75); max-width: 64ch; }

/* ---------------------------------------------------------------------
   Gallery
   --------------------------------------------------------------------- */
.gallery-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
@media (max-width: 860px){ .gallery-grid{ grid-template-columns: repeat(3,1fr);} }
@media (max-width: 560px){ .gallery-grid{ grid-template-columns: repeat(2,1fr);} }
.gallery-grid button{
  border:0; padding:0; background:none; cursor:pointer;
  border-radius: 4px; overflow:hidden; aspect-ratio:1/1;
}
.gallery-grid img{ width:100%; height:100%; object-fit:cover; transition: transform .3s ease; }
.gallery-grid button:hover img{ transform: scale(1.07); }
.gallery-grid button:hover img.crop-br{ transform: scale(1.45); transform-origin: top left; }

.lightbox{
  position:fixed; inset:0; background:rgba(8,27,40,0.92);
  display:flex; align-items:center; justify-content:center;
  z-index: 300; padding: 40px;
}
.lightbox[hidden]{ display:none; }
.lightbox img{ max-width: min(900px, 100%); max-height: 86vh; border-radius:4px; }
.lightbox-close{
  position:absolute; top:24px; right:24px;
  background: var(--coral); color:#fff; border:0; border-radius:50%;
  width:44px; height:44px; font-size:1.3rem; cursor:pointer;
}
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background: rgba(247,241,225,0.12); color:#fff; border:1px solid var(--line);
  width:48px; height:48px; border-radius:50%; cursor:pointer; font-size:1.4rem;
}
.lightbox-prev{ left:18px; } .lightbox-next{ right:18px; }

/* ---------------------------------------------------------------------
   Contact / visit
   --------------------------------------------------------------------- */
.visit-grid{ display:grid; grid-template-columns: 1fr 1.15fr; gap: 44px; align-items:stretch; }
@media (max-width: 900px){ .visit-grid{ grid-template-columns:1fr; } }
.visit-card{
  background: var(--navy-soft); border-radius: var(--radius); padding: 34px;
  display:flex; flex-direction:column; gap: 26px;
}
.visit-row{ display:flex; gap:16px; align-items:flex-start; }
.visit-row svg{ flex-shrink:0; color: var(--brass); margin-top:3px; }
.visit-row h4{ font-family: var(--f-mono); font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase; color: var(--brass); margin-bottom:4px; }
.visit-row p, .visit-row a{ color: var(--cream); font-size:1rem; }
.hours-table{ width:100%; border-collapse:collapse; font-family: var(--f-mono); font-size:0.92rem; }
.hours-table td{ padding: 5px 0; color: var(--cream); }
.hours-table td:last-child{ text-align:right; color: rgba(247,241,225,0.85); }
.hours-table tr.today td{ color: var(--brass); font-weight:700; }
.map-frame{ border-radius: var(--radius); overflow:hidden; border: 1px solid var(--line-dark); min-height: 360px; }
.map-frame iframe{ width:100%; height:100%; min-height:360px; border:0; display:block; }

.social-row{ display:flex; gap:12px; }
.social-row a{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color: var(--cream);
  transition: background .15s ease, border-color .15s ease;
}
.social-row a:hover{ background: var(--coral); border-color: var(--coral); }

/* ---------------------------------------------------------------------
   CTA band
   --------------------------------------------------------------------- */
.cta-band{
  background: var(--coral);
  color:#fff;
  border-radius: var(--radius);
  padding: 46px;
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
}
.cta-band h2{ color:#fff; font-size: clamp(1.6rem,3vw,2.2rem); }
.cta-band p{ color: rgba(255,255,255,0.9); margin-top:8px; max-width:48ch; }
.cta-band .btn-stamp{ background:#fff; color: var(--coral-dark); box-shadow:0 3px 0 rgba(0,0,0,0.18); }

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.site-footer{ background: var(--navy-deep); color: var(--cream); padding-block: 60px 28px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 860px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer-grid h4{
  font-family: var(--f-mono); font-size:0.75rem; letter-spacing:0.12em;
  text-transform:uppercase; color: var(--brass); margin-bottom: 16px;
}
.footer-grid ul{ display:flex; flex-direction:column; gap:10px; }
.footer-grid a{ color: rgba(247,241,225,0.82); font-size:0.95rem; }
.footer-grid a:hover{ color: var(--coral); }
.footer-brand{ font-family: var(--f-display); font-size:1.6rem; color:#fff; }
.footer-tagline{ margin-top:10px; color: rgba(247,241,225,0.65); max-width:34ch; font-size:0.92rem; }
.footer-bottom{
  margin-top: 50px; padding-top: 24px; border-top: 1px solid var(--line);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:0.82rem; color: rgba(247,241,225,0.55);
}

/* ---------------------------------------------------------------------
   Scroll reveal (progressive enhancement only)
   --------------------------------------------------------------------- */
/* Content is visible by default (safe if JS fails). JS adds .reveal-armed
   only after it has successfully set up the observer, then toggles
   .is-visible on intersection — so nothing ever depends on JS to be seen. */
[data-reveal].reveal-armed{ opacity:0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
[data-reveal].reveal-armed.is-visible{ opacity:1; transform:none; }