/* ============================================================
   Bistro Laurette — concept site
   Fictional French bistro, Fort Worth.
   Dark, warm, brass. Standalone: shares nothing with FlowLocal
   or with the Northgate Green concept.
   ============================================================ */

:root{
  --ink:      #0E0D0C;   /* near-black ground, warm not blue */
  --ink-2:    #171412;   /* panels */
  --ink-3:    #211C19;   /* raised cards, form fields */
  --ivory:    #F2EBE0;
  --ivory-2:  rgba(242,235,224,.72);
  --ivory-3:  rgba(242,235,224,.48);
  --brass:    #C9A227;
  --brass-lt: #E0BC4B;
  --oxblood:  #7A2231;
  --line:     rgba(242,235,224,.16);
  --line-2:   rgba(242,235,224,.09);

  --script:  'Pinyon Script', cursive;
  --serif:   'Cormorant Garamond', Georgia, serif;
  --cond:    'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body:    'Barlow', system-ui, -apple-system, sans-serif;

  --wrap: 1160px;
  --gut: clamp(20px, 5vw, 44px);
  --frame: 14px;   /* hairline inset border */
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

/* Native controls, scrollbars and form fields follow the page, not the OS. */
html{ color-scheme: dark; }

/* Removes the ~300ms wait the browser holds every tap for, in case it
   turns out to be a double-tap zoom. Straight perceived-speed win. */
a, button, input, select, textarea, label, summary{ touch-action: manipulation; }

/* Stops a heading dropping one lonely word onto its own last line. */
h1, h2, h3{ text-wrap: balance; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  margin:0; background:var(--ink); color:var(--ivory);
  font-family:var(--body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); }

.skip{ position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--brass); color:var(--ink); padding:12px 18px; }
.skip:focus{ left:0; }

:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--brass); outline-offset:3px;
}

/* hairline frame — sits above everything, ignores pointer events */
.frame{
  position:fixed; inset:var(--frame); z-index:150; pointer-events:none;
  border:1px solid rgba(242,235,224,.22);
}
@media (max-width:700px){ .frame{ display:none; } }

h1,h2,h3{ margin:0; font-weight:400; }

.h-script{ font-family:var(--script); color:var(--brass-lt); line-height:1; }
.h-script.sm{ font-size:.86em; }
.h-serif{ font-family:var(--serif); font-weight:500; }

.kicker{
  font-family:var(--cond); font-weight:600;
  font-size:.82rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--brass); margin:0 0 16px;
}
.label{
  font-family:var(--cond); font-weight:600;
  font-size:.76rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brass); margin:0 0 10px;
}
.dim{ color:var(--ivory-3); }
.ul{ color:var(--ivory); text-decoration:none; border-bottom:1px solid var(--line); }
.ul:hover{ border-bottom-color:var(--brass); }
.ul.big{ font-family:var(--serif); font-size:1.5rem; }

/* ---------- concept banner ---------- */
.concept{ background:var(--oxblood); color:#F6E9EA; position:relative; z-index:200; }
.concept-in{ display:flex; gap:12px; align-items:baseline; flex-wrap:wrap;
  padding-top:10px; padding-bottom:10px; }
.concept-tag{
  font-family:var(--cond); font-weight:600; font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase;
  background:#F6E9EA; color:var(--oxblood); padding:3px 10px; flex:none;
}
.concept p{ margin:0; font-size:.85rem; line-height:1.5; }
.concept a{ color:#fff; }

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:120;
  background:rgba(14,13,12,.90);
  backdrop-filter:saturate(130%) blur(10px);
  border-bottom:1px solid var(--line-2);
}
.head-in{ display:flex; align-items:center; gap:24px;
  padding-top:14px; padding-bottom:14px; }
.brand{ text-decoration:none; color:var(--ivory); flex:none;
  display:flex; flex-direction:column; gap:1px; line-height:1; }
.brand-script{ font-family:var(--script); font-size:2rem; color:var(--ivory); }
.brand-sub{
  font-family:var(--cond); font-size:.66rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--brass);
}

.nav{ display:flex; gap:26px; margin-left:auto; }
.nav a{
  font-family:var(--cond); font-size:.94rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--ivory-2); text-decoration:none; padding:6px 0;
  border-bottom:1px solid transparent;
}
.nav a:hover{ color:var(--ivory); border-bottom-color:var(--brass); }

.head-cta{ display:flex; align-items:center; gap:18px; }
.tel{
  font-family:var(--cond); font-size:1rem; font-weight:500; letter-spacing:.08em;
  color:var(--ivory); text-decoration:none; white-space:nowrap;
}
.tel:hover{ color:var(--brass-lt); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--cond); font-weight:600; font-size:.92rem;
  letter-spacing:.16em; text-transform:uppercase;
  padding:12px 24px; min-height:46px; border:1px solid transparent;
  text-decoration:none; cursor:pointer; transition:background var(--dur-tap) var(--ease-snap), color var(--dur-tap) var(--ease-snap), border-color var(--dur-tap) var(--ease-snap);
}
.btn-brass{ background:var(--brass); color:var(--ink); }
.btn-brass:hover{ background:var(--brass-lt); }
.btn-ghost{ background:transparent; color:var(--ivory); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--brass); color:var(--brass-lt); }
.btn-lg{ padding:16px 32px; min-height:54px; }
.btn-block{ width:100%; }

/* ---------- hero ---------- */
.hero{ position:relative; isolation:isolate; overflow:hidden; }
.hero-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:60% center; z-index:-2;
}
.hero-shade{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(95deg, rgba(14,13,12,.94) 0%, rgba(14,13,12,.78) 42%, rgba(14,13,12,.36) 78%),
    linear-gradient(to top, rgba(14,13,12,.86), transparent 52%);
}
.hero-in{ padding-top:clamp(76px,12vw,140px); padding-bottom:clamp(70px,11vw,124px); }
.eyebrow{
  font-family:var(--cond); font-weight:600; font-size:.8rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--brass);
  margin:0 0 22px;
}
.hero h1{ margin:0 0 24px; }
.hero h1 .h-script{ display:block; font-size:clamp(3.4rem,9vw,6.4rem); margin-bottom:-.08em; }
.hero h1 .h-serif{ display:block; font-size:clamp(2rem,4.6vw,3.4rem); line-height:1.06; }
.hero .lede{ font-size:clamp(1rem,1.9vw,1.14rem); color:var(--ivory-2);
  max-width:44ch; margin:0 0 34px; }
.hero-btns{ display:flex; flex-wrap:wrap; gap:12px; }
.hero-open{
  font-family:var(--cond); font-size:.94rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ivory-2);
  margin:34px 0 0; display:flex; align-items:center; gap:10px;
}
.dot{ width:8px; height:8px; border-radius:50%; background:#5BBF7A; flex:none; }

/* ---------- hours strip ---------- */
.strip{ background:var(--ink-2); border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2); }
.strip-in{ display:grid; gap:32px; grid-template-columns:1fr;
  padding-top:clamp(34px,5vw,52px); padding-bottom:clamp(34px,5vw,52px); }
@media (min-width:760px){ .strip-in{ grid-template-columns:repeat(3,1fr); gap:44px; } }
.strip-col p{ margin:0 0 6px; color:var(--ivory-2); font-size:.98rem; }

/* ---------- sections ---------- */
.sec{ padding:clamp(64px,9vw,112px) 0; }
.sec-alt{ background:var(--ink-2); }
.sec-head{ max-width:60ch; margin:0 0 clamp(36px,5vw,56px); }
.sec h2{ font-family:var(--serif); font-weight:500;
  font-size:clamp(2rem,4.6vw,3.2rem); line-height:1.08; }
.sec h2 .h-script{ font-size:clamp(2.6rem,6vw,4.2rem); }
.sec-lede{ color:var(--ivory-2); margin:18px 0 0; max-width:52ch; }

/* ---------- menu ---------- */
.menu-grid{ display:grid; gap:clamp(36px,5vw,64px); grid-template-columns:1fr; }
@media (min-width:820px){ .menu-grid{ grid-template-columns:1fr 1fr; } }
.course{
  font-family:var(--cond); font-weight:600; font-size:.86rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--brass);
  padding-bottom:12px; margin:0 0 22px; border-bottom:1px solid var(--line);
}
.course:not(:first-child){ margin-top:48px; }
.dishes{ list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:20px; }
.dishes li{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:baseline; gap:0 10px;
}
.d-name{ font-family:var(--serif); font-size:1.3rem; font-weight:500; }
/* dotted leader, the one thing a printed menu does that the web forgets */
.d-dots{ border-bottom:1px dotted var(--line); transform:translateY(-4px); }
.d-price{ font-family:var(--cond); font-size:1.06rem; letter-spacing:.06em; color:var(--brass-lt); }
.d-note{ grid-column:1 / -1; color:var(--ivory-3); font-size:.92rem; margin-top:-4px; }
.menu-note{ margin-top:36px; padding-top:20px; border-top:1px solid var(--line-2);
  color:var(--ivory-3); font-size:.9rem; }

.menu-shots{
  display:grid; gap:14px; grid-template-columns:repeat(2,1fr);
  margin-top:clamp(44px,6vw,72px);
}
@media (min-width:760px){ .menu-shots{ grid-template-columns:repeat(4,1fr); } }
.menu-shots figure{ margin:0; }
.menu-shots img{ width:100%; height:230px; object-fit:cover; }
.menu-shots figcaption{
  font-family:var(--cond); font-size:.76rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ivory-3); margin-top:10px;
}

/* ---------- room ---------- */
.room-grid{ display:grid; gap:clamp(32px,5vw,56px); grid-template-columns:1fr; align-items:center; }
@media (min-width:860px){ .room-grid{ grid-template-columns:1fr 1fr; } }
.room-imgs{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.room-imgs img{ width:100%; height:100%; object-fit:cover; aspect-ratio:3/4; }
.room-copy h2{ margin-bottom:22px; }
.room-copy p{ color:var(--ivory-2); margin:0 0 16px; }
.ticks{ list-style:none; margin:28px 0 0; padding:0;
  display:flex; flex-direction:column; gap:12px; }
.ticks li{ display:flex; align-items:baseline; gap:12px;
  font-family:var(--cond); font-size:1rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ivory-2); }
.ticks li::before{ content:""; width:16px; height:1px; background:var(--brass); flex:none; }

/* ---------- nightcap ---------- */
.nightcap{ background:var(--ink-2); border-top:1px solid var(--line-2); }
.nightcap-in{
  display:grid; gap:clamp(30px,5vw,64px); grid-template-columns:1fr;
  align-items:center;
  padding-top:clamp(56px,8vw,96px); padding-bottom:clamp(56px,8vw,96px);
}
@media (min-width:820px){ .nightcap-in{ grid-template-columns:1.15fr .85fr; } }
.nightcap h2{ font-family:var(--serif); font-weight:500;
  font-size:clamp(2rem,4.4vw,3rem); line-height:1.1; }
.nightcap h2 .h-script{ font-size:clamp(2.8rem,6.4vw,4.4rem); }
.nightcap-copy p{ color:var(--ivory-2); margin:22px 0 0; max-width:40ch; }
.nightcap-img{ margin:0; }
.nightcap-img img{
  width:100%; max-width:420px; height:auto; margin-left:auto;
  border:1px solid var(--line-2);
}
@media (max-width:819px){ .nightcap-img img{ margin:0 auto; } }

/* ---------- booking ---------- */
.book-grid{ display:grid; gap:clamp(34px,5vw,60px); grid-template-columns:1fr; }
@media (min-width:860px){ .book-grid{ grid-template-columns:1fr 1fr; } }
.book-copy p{ color:var(--ivory-2); max-width:42ch; }
.book-tel{ margin:28px 0 6px !important; }
.book-tel a{ font-family:var(--serif); font-size:clamp(1.8rem,3.6vw,2.4rem);
  color:var(--brass-lt); text-decoration:none; }
.book-tel a:hover{ text-decoration:underline; text-underline-offset:5px; }

.book-form{ background:var(--ink-3); border:1px solid var(--line-2);
  padding:clamp(22px,3vw,32px); display:flex; flex-direction:column; gap:16px; }
.f{ display:flex; flex-direction:column; gap:6px; }
.f2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.book-form label{ font-family:var(--cond); font-size:.8rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ivory-2); }
.opt{ color:var(--ivory-3); letter-spacing:.08em; }
.book-form input, .book-form select, .book-form textarea{
  font-family:var(--body); font-size:1rem; color:var(--ivory);
  background:var(--ink); border:1px solid var(--line);
  padding:12px 14px; min-height:48px; width:100%;
}
.book-form textarea{ resize:vertical; min-height:74px; }
.book-form ::placeholder{ color:var(--ivory-3); }
.b-note{ margin:0; text-align:center; font-size:.84rem; color:var(--ivory-3); }
.b-note.is-loud{ color:var(--brass-lt); }

/* ---------- footer ---------- */
.foot{ background:var(--ink-2); border-top:1px solid var(--line-2);
  padding:clamp(46px,6vw,72px) 0 32px; }
.foot-in{ display:flex; flex-wrap:wrap; gap:36px; justify-content:space-between; }
.brand-foot{ margin:0; display:flex; flex-direction:column; gap:1px; }
.foot-cols{ display:flex; gap:clamp(30px,5vw,64px); flex-wrap:wrap; }
.foot-cols p{ margin:0 0 5px; color:var(--ivory-2); font-size:.95rem; }
.foot-cols a{ color:var(--ivory-2); text-decoration:none; }
.foot-cols a:hover{ color:var(--brass-lt); }
.foot-legal{ margin-top:36px; padding-top:22px; border-top:1px solid var(--line-2); }
.foot-legal p{ margin:0; font-size:.82rem; line-height:1.6;
  color:var(--ivory-3); max-width:78ch; }
.foot-legal strong{ color:var(--ivory-2); }
.foot-legal a{ color:var(--brass); }

/* ---------- narrow ---------- */
@media (max-width:920px){
  .nav{ display:none; }
  .head-in{ gap:14px; }
}
@media (max-width:560px){
  .tel{ display:none; }          /* Reserve button still reaches the phone section */
  .f2{ grid-template-columns:1fr; }
  .hero-btns .btn{ width:100%; }
  .menu-shots img{ height:170px; }
}

/* ============================================================
   Motion
   Every hidden state is scoped to .js, so with scripting off or
   broken the page renders complete and static. .no-motion is set
   by the script when the OS asks for reduced motion or when
   IntersectionObserver is missing.
   ============================================================ */

.js:not(.no-motion) .sec-head,
.js:not(.no-motion) .strip-col,
.js:not(.no-motion) .menu-col,
.js:not(.no-motion) .menu-shots figure,
.js:not(.no-motion) .room-imgs img,
.js:not(.no-motion) .room-copy,
.js:not(.no-motion) .nightcap-copy,
.js:not(.no-motion) .nightcap-img,
.js:not(.no-motion) .book-copy,
.js:not(.no-motion) .book-form,
.js:not(.no-motion) .foot-in{
  opacity:0;
  transform:translateY(16px);
  transition:opacity var(--dur-reveal) var(--ease),
             transform var(--dur-reveal) var(--ease);
  will-change:opacity, transform;
}
.js:not(.no-motion) .is-in{
  opacity:1; transform:none; will-change:auto;
}

/* Hero arrives on load rather than on scroll — it is already in view. */
@keyframes rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
.js:not(.no-motion) .hero .eyebrow,
.js:not(.no-motion) .hero h1 .h-script,
.js:not(.no-motion) .hero h1 .h-serif,
.js:not(.no-motion) .hero .lede,
.js:not(.no-motion) .hero-btns,
.js:not(.no-motion) .hero-open{
  animation:rise calc(var(--dur-reveal) * 1.2) var(--ease) both;
}
.js:not(.no-motion) .hero .eyebrow      { animation-delay:.05s; }
.js:not(.no-motion) .hero h1 .h-script  { animation-delay:.16s; }
.js:not(.no-motion) .hero h1 .h-serif   { animation-delay:.26s; }
.js:not(.no-motion) .hero .lede         { animation-delay:.38s; }
.js:not(.no-motion) .hero-btns          { animation-delay:.48s; }
.js:not(.no-motion) .hero-open          { animation-delay:.58s; }

/* Slow drift on the hero photograph. Very small — enough to feel alive,
   not enough to notice as an effect. */
@keyframes drift{ from{ transform:scale(1.06); } to{ transform:scale(1); } }
.js:not(.no-motion) .hero-img{ animation:drift 14s ease-out both; }

/* The open/closed dot, because a restaurant page should feel live. */
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(91,191,122,.55); }
                  70%{ box-shadow:0 0 0 7px rgba(91,191,122,0); } }
.js:not(.no-motion) .dot{ animation:pulse 2.6s ease-out infinite; }

/* Hover: lift the menu photographs a touch, warm the borders. */
.menu-shots figure img{ transition:transform var(--dur-move) var(--ease), filter var(--dur-move) var(--ease); }
.menu-shots figure:hover img{ transform:scale(1.04); filter:brightness(1.08); }
.menu-shots figure{ overflow:hidden; }

.nightcap-img img{ transition:transform var(--dur-move) var(--ease); }
.nightcap-img:hover img{ transform:translateY(-5px); }

/* The OS setting wins over everything above. */
@media (prefers-reduced-motion: reduce){
  .js .sec-head, .js .strip-col, .js .menu-col, .js .menu-shots figure,
  .js .room-imgs img, .js .room-copy, .js .nightcap-copy, .js .nightcap-img,
  .js .book-copy, .js .book-form, .js .foot-in{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
  .js .hero .eyebrow, .js .hero h1 .h-script, .js .hero h1 .h-serif,
  .js .hero .lede, .js .hero-btns, .js .hero-open, .js .hero-img, .js .dot{
    animation:none !important;
  }
}

/* Hard release. Set by the failsafe two seconds after load, and by any
   path that gives up on animating. Beats every hidden rule above it, so
   no element can be left invisible by a browser that will not transition. */
.js.motion-done .sec-head,
.js.motion-done .strip-col,
.js.motion-done .menu-col,
.js.motion-done .menu-shots figure,
.js.motion-done .room-imgs img,
.js.motion-done .room-copy,
.js.motion-done .nightcap-copy,
.js.motion-done .nightcap-img,
.js.motion-done .book-copy,
.js.motion-done .book-form,
.js.motion-done .foot-in{
  opacity:1 !important;
  transform:none !important;
}