/* ═══════════════════════════════════════════════════════════════
   THE BARNHOUSE, Sussex Inlet
   Core stylesheet: tokens, base, shared components.
   Section styles live in their own files (hero.css, menu.css ...).
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ─────────────────────────────────────────────────── */
:root {
  /* Materials sampled from the shop and the logo */
  --cream:    #F5EEE1;  /* milk paint, outside */
  --cream-2:  #ECE2CF;  /* darker cream band */
  --timber:   #E6CFA3;  /* blonde timber tabletop */
  --timber-2: #D6B987;  /* timber seam */
  --brown:    #4A2E18;  /* logo chocolate */
  --barn:     #2B1810;  /* inside the barn */
  --char:     #1A1410;  /* black plates */
  --red:      #DA1F26;  /* comb red, the accent */
  --red-2:    #B5402D;  /* brick, red steel frames */
  --wood:     #DDAE5E;  /* gold timber, the fences */
  --wood-2:   #B98740;  /* its shade side, rails */
  --sage:     #8A9986;  /* sage, decorative only */
  --sage-ink: #4F5F4C;  /* deep sage for captions on cream */
  --gold:     #E9A63A;  /* chip gold */
  --uber:     #06C167;  /* Uber Eats green, only in its button */

  --ink:        var(--brown);
  --ink-soft:   #6B5442;
  --paper:      var(--cream);
  --paper-soft: #D9C9AF;
  --line:       rgba(74, 46, 24, .16);
  --line-light: rgba(245, 238, 225, .16);

  /* Type */
  --font-display: 'Alfa Slab One', 'Rockwell', 'Roboto Slab', serif;
  --font-sans:    'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-cond:    'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  --font-marker:  'Permanent Marker', 'Marker Felt', 'Comic Sans MS', cursive;

  --fs-hero:    clamp(2.6rem, 4.7vw, 4.3rem);
  --fs-display: clamp(2rem, 4.6vw, 3.8rem);
  --fs-body:    clamp(1rem, .95rem + .3vw, 1.125rem);

  /* Space and shape */
  --gutter:  clamp(1.25rem, 4vw, 3rem);
  --shell:   1280px;
  --section: clamp(4.5rem, 9vw, 8rem);
  --r-sign:  8px;
  --r-board: 14px;
  --r-frame: 6px;

  /* Motion */
  --ease:     cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t:        240ms;
  --t-slow:   520ms;

  --shadow-sm: 0 2px 10px rgba(42, 26, 13, .10);
  --shadow:    0 14px 40px -12px rgba(42, 26, 13, .35);
  --shadow-lg: 0 30px 70px -24px rgba(26, 20, 16, .55);

  --header-h:   64px;
  --orderbar-h: 66px;

  --z-skip: 200; --z-header: 80; --z-mobile-nav: 75; --z-orderbar: 70; --z-rail: 40;

  /* Paper grain: a pre rendered alpha noise tile, so every browser draws it
     the same (SVG noise filters render coarser and shift colours in Safari) */
  --grain: url("../img/grain.png");
  --grain-size: 128px 128px;
}

@media (max-width: 759px) { :root { --header-h: 60px; } }

/* ── 2. BASE ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 { margin: 0; line-height: 1.05; font-weight: 700; }
p { margin: 0 0 1rem; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
strong, b { font-weight: 700; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  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;
}

.skip-link {
  position: fixed; top: -100px; left: 50%; transform: translateX(-50%);
  z-index: var(--z-skip); padding: .85rem 1.4rem;
  background: var(--red); color: var(--cream); font-weight: 700;
  border-radius: 0 0 var(--r-sign) var(--r-sign);
  transition: top var(--t) var(--ease);
}
.skip-link:focus { top: 0; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ── 3. TYPE HELPERS ───────────────────────────────────────────── */
.h-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: 1;
  letter-spacing: 0;
  text-wrap: balance;
}
.h-display em { font-style: normal; color: var(--red); }
.section--inside .h-display em { color: var(--gold); }

.h-sub {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lede {
  font-size: clamp(1.05rem, 1vw + .9rem, 1.3rem);
  line-height: 1.5;
  max-width: 54ch;
  color: var(--ink-soft);
}
.section--inside .lede { color: var(--paper-soft); }

/* The three permitted eyebrow labels (Menu, Sauces, Find Us) */
.eyebrow {
  display: inline-block;
  margin: 0 0 .9rem;
  font-family: var(--font-cond);
  font-size: .82rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--sage-ink);
}
.section--inside .eyebrow { color: var(--gold); }

/* Pinned hand written note. Use at most three site wide. */
.note {
  font-family: var(--font-marker);
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--ink);
  transform: rotate(-2deg);
  display: inline-block;
}
.section--inside .note { color: var(--paper); }

.ico {
  width: 1.1em; height: 1.1em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── 4. BUTTONS ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .6rem;
  min-height: 52px;
  padding: .8rem 1.5rem;
  border-radius: var(--r-sign);
  font-family: var(--font-cond);
  font-size: 1.05rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--t) var(--ease), background-color var(--t) var(--ease),
              color var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); }

.btn--lg { min-height: 58px; padding: .95rem 1.8rem; font-size: 1.12rem; }
.btn--sm { min-height: 44px; padding: .55rem 1.1rem; font-size: .95rem; }
.btn--block { width: 100%; }

.btn--pickup {
  background: var(--red); color: var(--cream);
  box-shadow: 0 10px 24px -12px rgba(218, 31, 38, .8);
}
.btn--pickup:hover { background: var(--red-2); }

.btn--uber {
  background: var(--uber); color: var(--char);
  box-shadow: 0 10px 24px -12px rgba(6, 193, 103, .7);
}
.btn--uber:hover { background: #05B25F; }

.btn--outline {
  border: 2px solid var(--brown); color: var(--brown);
  background: transparent;
}
.btn--outline:hover { background: var(--brown); color: var(--cream); }

.btn--outline-light {
  border: 2px solid rgba(245, 238, 225, .5); color: var(--cream);
  background: transparent;
}
.btn--outline-light:hover { border-color: var(--cream); background: rgba(245, 238, 225, .08); }

@media (max-width: 479px) {
  .btn { white-space: normal; text-align: center; }
}

/* ── 5. SECTIONS AND MATERIALS ─────────────────────────────────── */
.section { position: relative; padding: var(--section) 0; }

/* Outside: milk painted timber boards */
.section--outside {
  background-color: var(--cream);
  background-image:
    repeating-linear-gradient(90deg, transparent 0 138px, rgba(74, 46, 24, .045) 138px 140px),
    var(--grain);
  background-size: auto, var(--grain-size);
  color: var(--ink);
}

/* Inside: dark timber slats */
.section--inside {
  background-color: var(--barn);
  background-image:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 118px),
    linear-gradient(180deg, rgba(0, 0, 0, .18), transparent 30%, transparent 70%, rgba(0, 0, 0, .18)),
    var(--grain);
  background-size: auto, auto, var(--grain-size);
  color: var(--paper);
}
.section--inside p { color: var(--paper-soft); }
.section--inside p b, .section--inside p strong { color: var(--paper); }

/* Blonde timber board surface */
.board {
  background-color: var(--timber);
  background-image:
    repeating-linear-gradient(90deg, transparent 0 96px, rgba(74, 46, 24, .12) 96px 97px, transparent 97px 100px),
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(255, 255, 255, .04) 7px 8px),
    var(--grain);
  background-size: auto, auto, var(--grain-size);
  color: var(--brown);
  border-radius: var(--r-board);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .35);
}

/* Red steel window frame with a sage picket sill (the shop's own window) */
.window {
  position: relative;
  border: 6px solid var(--red-2);
  border-radius: var(--r-frame);
  background: var(--char);
  overflow: hidden;
  box-shadow: var(--shadow);
  isolation: isolate;
}
.window > picture, .window > .window__body { display: block; width: 100%; height: 100%; }
.window > picture img { width: 100%; height: 100%; object-fit: cover; }
.window::after {
  /* sage picket sill */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; z-index: 3;
  pointer-events: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='26' viewBox='0 0 28 26'%3E%3Cpath fill='%23DDAE5E' d='M6 26V8l8-7 8 7v18z'/%3E%3Cpath fill='%23B98740' d='M6 16h16v3H6z'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: bottom left;
}

/* Char stripe reveal: diagonal grill marks wipe the photo in */
.js .window--reveal > picture {
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}
@media (prefers-reduced-motion: no-preference) {
  .js .window--reveal.is-in > picture {
    animation: charWipe 900ms var(--ease-out) forwards;
  }
}
@media (prefers-reduced-motion: reduce) {
  .js .window--reveal > picture { clip-path: none; }
}
@keyframes charWipe {
  0%   { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
  100% { clip-path: polygon(0 0, 130% 0, 130% 100%, 0 100%); }
}

/* ── 6. HEADER ─────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: transparent;
  transition: background-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.site-header.is-stuck {
  background: rgba(74, 46, 24, .96);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -18px rgba(26, 20, 16, .8);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  height: var(--header-h);
}

.brand { display: block; flex: none; }
.brand img { width: auto; height: clamp(34px, 6vw, 44px); }
.brand__light { display: none; }
.site-header.is-stuck .brand__dark { display: none; }
.site-header.is-stuck .brand__light { display: block; }

.nav { display: none; }
@media (min-width: 980px) {
  .nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
  .nav__link {
    position: relative;
    padding: .6rem 0;
    font-family: var(--font-cond);
    font-size: 1.05rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--brown);
    transition: color var(--t) var(--ease);
  }
  .site-header.is-stuck .nav__link { color: var(--paper-soft); }
  .nav__link::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 3px;
    background: var(--red); border-radius: 2px;
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--t) var(--ease);
  }
  .site-header.is-stuck .nav__link::after { background: var(--gold); }
  .nav__link:hover, .nav__link.is-active { color: var(--red); }
  .site-header.is-stuck .nav__link:hover, .site-header.is-stuck .nav__link.is-active { color: var(--cream); }
  .nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }
  .nav__cta { margin-left: .5rem; }
}

/* Fence rail under the header: the walker (fence.js) lives here.
   Desktop only; on phones the walker rides the order bar's rail. */
.rail {
  position: absolute; left: 0; right: 0; bottom: -10px; height: 8px;
  z-index: var(--z-rail);
  pointer-events: none;
}
.site-header .rail { opacity: 0; transition: opacity var(--t) var(--ease); }
.site-header.is-stuck .rail { opacity: 1; }
@media (max-width: 979px) { .site-header .rail { display: none; } }

/* Burger */
.burger {
  display: grid; place-content: center; gap: 5px;
  width: 46px; height: 46px;
  margin-right: -6px;
  border-radius: var(--r-sign);
}
.burger span {
  display: block; width: 24px; height: 3px;
  background: var(--brown); border-radius: 2px;
  transition: transform var(--t) var(--ease), opacity var(--t) var(--ease), background-color var(--t) var(--ease);
}
.site-header.is-stuck .burger span, .burger[aria-expanded="true"] span { background: var(--cream); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
@media (min-width: 980px) { .burger { display: none; } }

/* ── 7. MOBILE NAV ─────────────────────────────────────────────── */
.mobile-nav {
  position: fixed; inset: 0; z-index: var(--z-mobile-nav);
  display: flex; flex-direction: column; justify-content: center;
  gap: 2rem;
  padding: calc(var(--header-h) + 1.5rem) var(--gutter) calc(2rem + env(safe-area-inset-bottom));
  background-color: var(--brown);
  background-image: var(--grain);
  background-size: var(--grain-size);
  color: var(--cream);
  overflow-y: auto;
}
.mobile-nav[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .mobile-nav { animation: navIn var(--t) var(--ease-out); }
  .mobile-nav__link { animation: navLink 420ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 50ms + 60ms); }
}
@keyframes navIn { from { opacity: 0; } }
@keyframes navLink { from { opacity: 0; transform: translateY(14px); } }

.mobile-nav__link {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: .7rem 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 9vw, 2.8rem);
  line-height: 1.1;
  color: var(--cream);
  border-bottom: 1px solid var(--line-light);
}
.mobile-nav__link small {
  font-family: var(--font-cond); font-size: .85rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold);
}
.mobile-nav__foot { display: grid; gap: .7rem; }
.mobile-nav__addr { color: var(--paper-soft); font-size: .95rem; margin: 0; }

/* ── 8. REVEAL ─────────────────────────────────────────────────── */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 640ms var(--ease-out) var(--d, 0s), transform 640ms var(--ease-out) var(--d, 0s);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* ── 9. FOOTER ─────────────────────────────────────────────────── */
.site-footer {
  position: relative;
  padding: clamp(3rem, 7vw, 5rem) 0 calc(2rem + env(safe-area-inset-bottom));
  background-color: var(--brown);
  background-image: var(--grain);
  background-size: var(--grain-size);
  color: var(--cream);
}
.site-footer__top {
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--line-light);
}
.site-footer__brand img { width: min(300px, 76vw); height: auto; }
.site-footer__tag { width: min(260px, 60vw); margin-top: .9rem; }
.site-footer__nav { display: grid; gap: 2rem; }
.site-footer__nav > div { display: grid; gap: .4rem; align-content: start; }
.site-footer__nav h4 {
  margin-bottom: .35rem;
  font-family: var(--font-cond);
  font-size: .85rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
}
.site-footer__nav a {
  color: var(--paper-soft); font-size: 1rem; line-height: 1.5; padding: .2rem 0;
  transition: color var(--t) var(--ease);
}
.site-footer__nav a:hover { color: var(--cream); }
.site-footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem;
  padding-top: 1.5rem;
  font-family: var(--font-cond);
  font-size: .88rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--paper-soft);
}
.site-footer__bottom p { margin: 0; color: inherit; }
/* Maker's credit: the last line, a quiet link that warms up on hover */
.site-footer__credit a {
  color: var(--cream);
  text-decoration: underline;
  text-decoration-color: rgba(245, 238, 225, .35);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: color var(--t) var(--ease), text-decoration-color var(--t) var(--ease);
}
.site-footer__credit a:hover,
.site-footer__credit a:focus-visible { color: var(--wood); text-decoration-color: currentColor; }
.site-footer__hen {
  position: absolute; right: var(--gutter); bottom: 100%;
  width: clamp(54px, 7vw, 84px);
  transform: translateY(6px);
}
.site-footer__hen svg { width: 100%; height: auto; fill: var(--cream); }
@media (min-width: 760px) {
  .site-footer__top { grid-template-columns: 1.1fr 1.3fr; align-items: start; }
  .site-footer__nav { grid-template-columns: repeat(3, 1fr); }
}

/* ── 10. MOBILE ORDER BAR ──────────────────────────────────────── */
.orderbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-orderbar);
  display: flex; gap: .5rem;
  padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(74, 46, 24, .97);   /* no backdrop blur: invisible at this opacity, and it repainted every scroll frame on iPhones */
  transform: translateY(105%);
  transition: transform var(--t-slow) var(--ease-out);
}
.orderbar.is-visible { transform: translateY(0); }
.orderbar__rail {
  position: absolute; left: 0; right: 0; top: -2px; bottom: auto; height: 8px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}
.orderbar.is-visible .orderbar__rail { opacity: 1; }
.orderbar__btn {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  flex: 1; min-height: 50px;
  border-radius: var(--r-sign);
  font-family: var(--font-cond);
  font-size: 1rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  transition: transform var(--t) var(--ease);
}
.orderbar__btn:active { transform: scale(.97); }
.orderbar__btn--uber { background: var(--uber); color: var(--char); }
.orderbar__btn--pickup { background: var(--red); color: var(--cream); }
.orderbar__btn--call { flex: 0 0 52px; border: 2px solid rgba(245, 238, 225, .4); color: var(--cream); }
.orderbar__btn .ico { width: 20px; height: 20px; }
@media (min-width: 980px) { .orderbar { display: none; } }
@media (max-width: 979px) {
  .site-footer { padding-bottom: calc(2rem + var(--orderbar-h) + env(safe-area-inset-bottom)); }
}

/* ── 11. REDUCED MOTION ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

/* ── 12. PRINT ─────────────────────────────────────────────────── */
@media print {
  .site-header, .mobile-nav, .orderbar, .rail, .skip-link, .fence, .site-footer__hen, .sauces::before, .btn { display: none !important; }
  body, .section--inside, .section--outside, .site-footer, .board { background: #fff !important; color: #000 !important; }
  .section--inside p, .section--inside .lede, .section--inside .eyebrow, .section--inside .note, .h-display em,
  .find__list dt, .find__list dd, .reviews__lede, .sauces__caption, .sauces__caption b, .sauces__prices dt, .sauces__prices dd,
  .order__fine, .site-footer a, .site-footer__nav h4, .site-footer__bottom, .site-footer__bottom p, .site-footer__tag { color: #000 !important; }
  .js .reveal, .js .sauces__tub, .js .portion__slot { opacity: 1 !important; transform: none !important; }
  .js .window--reveal > picture { clip-path: none !important; animation: none !important; }
  .hero__door { display: none !important; }
}