/* ============================================================
   Field + Oak — neighbourhood cafe & bakery
   Palette: cream, oat, espresso, terracotta, sage
   Type: Bricolage Grotesque (display) + Karla (body)
   ============================================================ */
:root{
  --cream:#F6F1E7; --oat:#EBE2D2;
  --espresso:#2E211A; --espresso-2:#403025;
  --terra:#C4622D; --terra-2:#D97A45;
  --sage:#7C8B6F;
  --ink:#2E211A; --ink-soft:#7A6A5C;
  --line:rgba(46,33,26,0.14);
  --f-display:'Bricolage Grotesque', system-ui, sans-serif;
  --f-body:'Karla', system-ui, sans-serif;
  --r:14px; --ease:cubic-bezier(.4,0,.15,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{ background:var(--cream); color:var(--ink); font-family:var(--f-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img{display:block;max-width:100%;}
em{font-style:italic;}

.eyebrow{ font-size:0.74rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--terra); font-weight:700; margin-bottom:1rem; }
.eyebrow--light{ color:var(--terra-2); }
.section__head{ max-width:660px; margin:0 auto clamp(2.4rem,5vw,3.8rem); text-align:center; padding:0 6vw; }
.section__title{ font-family:var(--f-display); font-weight:600; font-size:clamp(1.9rem,4vw,3.1rem); line-height:1.14; letter-spacing:-0.02em; padding-bottom:0.08em; }
.section__title em{ font-style:italic; color:var(--terra); }
.section__sub{ margin-top:0.9rem; color:var(--ink-soft); }

.btn{ display:inline-flex; align-items:center; justify-content:center; font-family:var(--f-display); font-weight:600; font-size:0.95rem; padding:0.95rem 1.8rem; border-radius:999px; cursor:pointer; text-decoration:none; border:1px solid transparent; transition:transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease); }
.btn--solid{ background:var(--terra); color:#fff; }
.btn--solid:hover{ background:var(--espresso); transform:translateY(-2px); }
.btn--ghost-light{ border-color:rgba(246,241,231,0.5); color:var(--cream); }
.btn--ghost-light:hover{ background:rgba(246,241,231,0.12); transform:translateY(-2px); }
.btn--full{ width:100%; }

/* nav */
.nav{ position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:1.1rem clamp(1.2rem,5vw,3rem); transition:background .4s, border-color .4s; border-bottom:1px solid transparent; }
.nav.solid{ background:rgba(246,241,231,0.88); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom-color:var(--line); }
.nav__brand{ font-family:var(--f-display); font-weight:700; font-size:1.3rem; letter-spacing:-0.01em; color:var(--cream); text-decoration:none; transition:color .4s; }
.nav.solid .nav__brand{ color:var(--ink); }
.plus{ color:var(--terra-2); margin:0 0.1em; }
.nav__links{ display:flex; gap:2rem; }
.nav__links a{ color:rgba(246,241,231,0.85); text-decoration:none; font-size:0.92rem; font-weight:500; transition:color .25s; }
.nav.solid .nav__links a{ color:var(--ink-soft); }
.nav__links a:hover{ color:var(--terra-2); }
.nav__cta{ font-family:var(--f-display); font-weight:600; font-size:0.88rem; padding:0.6rem 1.3rem; border:1.5px solid rgba(246,241,231,0.6); border-radius:999px; color:var(--cream); text-decoration:none; transition:all .25s; }
.nav.solid .nav__cta{ border-color:var(--terra); color:var(--terra); }
.nav__cta:hover{ background:var(--terra); border-color:var(--terra); color:#fff; }
@media(max-width:820px){ .nav__links{ display:none; } }

/* hero */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; padding:7rem clamp(1.4rem,6vw,5rem) 4rem; overflow:hidden; }
.hero__media{ position:absolute; inset:0; }
.hero__video{ width:100%; height:100%; object-fit:cover; }
.hero__scrim{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(30,20,14,0.84) 0%, rgba(30,20,14,0.55) 40%, rgba(30,20,14,0.1) 75%, transparent 100%); }
.hero__frame{ position:relative; z-index:2; max-width:620px; color:var(--cream); }
.hero__eyebrow{ font-size:0.74rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--terra-2); font-weight:700; margin-bottom:1.5rem; }
.hero__title{ font-family:var(--f-display); font-weight:700; font-size:clamp(2.7rem,6.6vw,5rem); line-height:1.04; letter-spacing:-0.03em; margin-bottom:1.6rem; }
.hero__title span{ display:block; padding-bottom:0.05em; }
.hero__title em{ font-style:italic; font-weight:600; color:var(--terra-2); }
.hero__lead{ max-width:46ch; color:rgba(246,241,231,0.88); font-size:1.05rem; margin-bottom:2rem; }
.hero__actions{ display:flex; gap:0.9rem; flex-wrap:wrap; }
.hero__open{ display:inline-flex; align-items:center; gap:0.6rem; margin-top:2.2rem; padding:0.65rem 1.1rem; border:1px solid rgba(246,241,231,0.28); border-radius:999px; background:rgba(30,20,14,0.4); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); font-size:0.86rem; font-weight:500; }
.open__dot{ width:8px; height:8px; border-radius:50%; background:#8FD08F; animation:pulse 2.4s infinite; }

/* ticker */
.ticker{ overflow:hidden; padding:0.85rem 0; background:var(--espresso); }
.ticker__row{ display:inline-flex; align-items:center; gap:1.7rem; white-space:nowrap; animation:scroll 26s linear infinite; }
.ticker__row span{ font-family:var(--f-display); font-weight:500; font-size:1.02rem; color:var(--cream); }
.tdot{ color:var(--terra-2) !important; font-size:0.5rem !important; }

/* plates gallery */
.plates{ padding:clamp(4rem,9vw,7rem) clamp(1.4rem,6vw,5rem); }
.plates__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; max-width:1100px; margin:0 auto; }
.plate{ position:relative; overflow:hidden; border-radius:var(--r); }
.plate--tall{ grid-row:span 2; }
.plate--wide{ grid-column:span 1; }
.plate__wrap{ width:100%; height:100%; overflow:hidden; }
.plate img{ width:100%; height:100%; min-height:260px; object-fit:cover; transition:transform 1s var(--ease); }
.plate--tall img{ min-height:540px; }
.plate:hover img{ transform:scale(1.05); }
.plate figcaption{ position:absolute; left:0; right:0; bottom:0; padding:1.1rem 1.2rem 1rem; font-size:0.88rem; color:var(--cream); background:linear-gradient(0deg,rgba(30,20,14,0.8),transparent); }
@media(max-width:700px){ .plates__grid{ grid-template-columns:1fr; } .plate--tall{ grid-row:span 1; } .plate--tall img{ min-height:300px; } }

/* menu board */
.menu{ padding:0 clamp(1.4rem,6vw,5rem) clamp(4rem,9vw,6rem); }
.menu__cols{ max-width:900px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); background:var(--oat); border-radius:var(--r); padding:clamp(1.8rem,4vw,3rem); }
.menu__h{ font-family:var(--f-display); font-weight:700; font-size:1.25rem; margin-bottom:1.2rem; color:var(--espresso); }
.menu__list{ list-style:none; display:grid; gap:0.75rem; }
.menu__list li{ display:flex; align-items:baseline; gap:0.6rem; font-size:0.98rem; }
.menu__list li span{ font-weight:500; }
.menu__list li i{ flex:1; border-bottom:2px dotted rgba(46,33,26,0.25); transform:translateY(-4px); }
.menu__list li b{ font-family:var(--f-display); color:var(--terra); }
.menu__note{ font-size:0.82rem !important; color:var(--ink-soft); font-style:italic; margin-top:0.4rem; }
@media(max-width:640px){ .menu__cols{ grid-template-columns:1fr; } }

/* bakery */
.bakery{ display:grid; grid-template-columns:1.05fr 0.95fr; align-items:center; gap:clamp(2rem,5vw,4.5rem); padding:clamp(4rem,9vw,7rem) clamp(1.4rem,6vw,5rem); background:var(--espresso); color:var(--cream); }
.bakery .eyebrow{ color:var(--terra-2); }
.bakery .section__title{ color:var(--cream); text-align:left; }
.bakery .section__title em{ color:var(--terra-2); }
.bakery__media{ overflow:hidden; border-radius:var(--r); }
.bakery__media img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.bakery__p{ color:rgba(246,241,231,0.8); margin:1.2rem 0 1.8rem; max-width:48ch; }
@media(max-width:820px){ .bakery{ grid-template-columns:1fr; } }

/* space */
.space{ display:grid; grid-template-columns:0.95fr 1.05fr; align-items:center; gap:clamp(2rem,5vw,4.5rem); padding:clamp(4rem,9vw,7rem) clamp(1.4rem,6vw,5rem); }
.space .section__title{ text-align:left; }
.space__p{ color:var(--ink-soft); margin:1.2rem 0 1.8rem; max-width:48ch; }
.space__media{ overflow:hidden; border-radius:var(--r); }
.space__media img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.space__meta{ display:grid; gap:0.9rem; }
.space__meta > div{ display:grid; grid-template-columns:100px 1fr; gap:0.8rem; padding-bottom:0.8rem; border-bottom:1px solid var(--line); }
.space__meta dt{ font-size:0.74rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--terra); font-weight:700; }
@media(max-width:820px){ .space{ grid-template-columns:1fr; } .space__media{ order:-1; } }

/* people */
.people{ padding:clamp(4rem,9vw,7rem) clamp(1.4rem,6vw,5rem); background:var(--oat); }
.people__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; max-width:960px; margin:0 auto; }
.person__img{ overflow:hidden; border-radius:var(--r); margin-bottom:1rem; aspect-ratio:3/4; }
.person__img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.person:hover .person__img img{ transform:scale(1.04); }
.person h3{ font-family:var(--f-display); font-weight:700; font-size:1.3rem; margin-bottom:0.3rem; }
.person p{ font-size:0.9rem; color:var(--ink-soft); }
@media(max-width:720px){ .people__grid{ grid-template-columns:1fr; max-width:420px; } }

/* visit */
.visit{ padding:clamp(4rem,9vw,7rem) clamp(1.4rem,6vw,5rem); }
.visit__panel{ max-width:1080px; margin:0 auto; display:grid; grid-template-columns:0.95fr 1.05fr; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); }
.visit__left{ background:var(--espresso); color:var(--cream); padding:clamp(2rem,4vw,3.2rem); }
.visit__title{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.6rem,3vw,2.3rem); line-height:1.14; margin-bottom:1rem; }
.visit__note{ color:rgba(246,241,231,0.75); font-size:0.95rem; margin-bottom:1.8rem; }
.visit__meta{ display:grid; gap:0.9rem; }
.visit__meta > div{ display:grid; grid-template-columns:90px 1fr; gap:0.8rem; padding-bottom:0.8rem; border-bottom:1px solid rgba(246,241,231,0.16); }
.visit__meta dt{ font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--terra-2); font-weight:700; }
.visit__meta dd{ font-size:0.92rem; }
.visit__form{ padding:clamp(2rem,4vw,3.2rem); background:#fff; }
.fld{ margin-bottom:1.1rem; }
.fld label{ display:block; font-size:0.74rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--terra); font-weight:700; margin-bottom:0.45rem; }
.fld input, .fld textarea, .sel select{ width:100%; padding:0.85rem 0.95rem; font-family:var(--f-body); font-size:0.95rem; border:1px solid var(--line); border-radius:10px; background:var(--cream); color:var(--ink); outline:none; transition:border-color .25s; }
.fld textarea{ min-height:96px; resize:vertical; }
.fld input:focus, .fld textarea:focus, .sel select:focus{ border-color:var(--terra); }
.sel{ position:relative; }
.sel::after{ content:'\2304'; position:absolute; right:0.9rem; top:42%; transform:translateY(-50%); color:var(--ink-soft); pointer-events:none; }
.sel select{ appearance:none; cursor:pointer; }
.hp{ position:absolute!important; left:-9999px!important; width:1px; height:1px; opacity:0; }
.visit__status{ margin-top:0.8rem; font-size:0.85rem; min-height:1.2em; }
.visit__status.ok{ color:#3F7A4B; }
.visit__status.err{ color:#A5443B; }
@media(max-width:820px){ .visit__panel{ grid-template-columns:1fr; } }

/* footer */
.ftr{ padding:3rem clamp(1.4rem,6vw,5rem); border-top:1px solid var(--line); text-align:center; }
.ftr__brand{ font-family:var(--f-display); font-weight:700; font-size:1.4rem; margin-bottom:0.5rem; }
.ftr__line{ color:var(--ink-soft); font-size:0.9rem; }
.ftr__fine{ color:var(--ink-soft); opacity:0.6; font-size:0.78rem; margin-top:1.1rem; }

.reveal,.reveal-img{ will-change:transform,opacity; }

/* touch focus (mobile hover) */
@media(hover:none){
  .plate.is-focus img{ transform:scale(1.05); }
  .person.is-focus .person__img img{ transform:scale(1.04); }
}
@media(max-width:600px){
  .hero__title{ font-size:clamp(2.3rem,10vw,3.2rem); }
  .plates__grid{ gap:10px; }
}

@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(143,208,143,.5);} 50%{ box-shadow:0 0 0 7px rgba(143,208,143,0);} }
@keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

@media(prefers-reduced-motion:reduce){
  *{ animation-duration:0.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto; }
  .reveal,.reveal-img{ opacity:1!important; transform:none!important; }
}