/* Pontchartrain Fish House — Golden Hour
   Scene: a sunlit seafood house at five in the afternoon, cream paper menus,
   light coming off the lake.
   The rule that makes it read as a REAL site: photographs carry the page and
   display type sits directly on them — never in a box, never over a scrim,
   never behind a gradient. Depth comes from the photography and the whitespace,
   so there is not a single shadow in this stylesheet. */

:root{
  --cream:#E9E0D1;        /* warm stock, replaces white everywhere */
  --cream-2:#F3ECE0;
  --copper:#A0521E;       /* the ink */
  --copper-2:rgba(160,82,30,.72);
  --citron:#E8E359;       /* laid over photographs only */
  --blue:#5C7CFF;         /* inline emphasis inside body copy, nothing else */
  --forest:#1F4231;

  --display:'Fredoka',system-ui,sans-serif;
  --body:'Poppins',system-ui,sans-serif;
  --page:1240px;
  --pad:clamp(18px,4.5vw,60px);
}

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

body{
  margin:0; background:var(--cream); color:var(--copper);
  font-family:var(--body); font-size:clamp(16px,1.05vw,17.5px); line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:var(--display); font-weight:500; margin:0; line-height:.84; letter-spacing:-.028em; }
a{ color:inherit; }
img{ display:block; max-width:100%; height:auto; }
:focus-visible{ outline:3px solid var(--forest); outline-offset:3px; }

.label{ font-family:var(--body); font-weight:600; font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--forest); margin:0 0 14px; }

/* soft-pill is the system radius — not a full 9999px */
.btn{
  display:inline-block; cursor:pointer; text-decoration:none; text-align:center;
  background:var(--forest); color:var(--cream); border:2px solid var(--forest);
  border-radius:31px; padding:14px 30px;
  font-family:var(--body); font-weight:600; font-size:15px;
  transition:background .18s ease, color .18s ease;
}
.btn:hover{ background:transparent; color:var(--forest); }
.btn-sm{ padding:9px 20px; font-size:14px; }

/* ---- nav */
.nav{ max-width:var(--page); margin:0 auto; padding:20px var(--pad); display:flex; align-items:center; gap:22px; }
.brand{ font-family:var(--display); font-weight:600; font-size:20px; line-height:1; letter-spacing:-.03em; text-decoration:none; }
.brand span{ display:block; font-size:13px; font-weight:400; color:var(--copper-2); letter-spacing:.02em; }
.links{ display:flex; gap:26px; margin-left:auto; }
.links a{ font-weight:500; font-size:15px; text-decoration:none; color:var(--copper-2); }
.links a:hover{ color:var(--copper); }
@media (max-width:800px){ .links{ display:none; } .nav .btn-sm{ margin-left:auto; } }

/* ================= HERO =================
   The photograph is the page. Type lands straight on it. */
.hero{ position:relative; max-width:var(--page); margin:0 auto; padding:0 var(--pad); }
.hero-img{
  width:100%; height:clamp(360px,64vh,660px); object-fit:cover; border-radius:20px;
  /* the image is treated so the type always has something to sit on */
  filter:brightness(.62) contrast(1.08) saturate(1.12);
}
.hero-type{ position:absolute; left:calc(var(--pad) + clamp(18px,3vw,48px)); bottom:clamp(46px,7vw,86px); }
.hero-type h1{
  font-size:clamp(58px,11vw,150px);
  color:var(--citron);
  letter-spacing:-.045em;
  /* a hair of shadow so a bright patch underneath can never eat a letter */
  text-shadow:0 2px 30px rgba(0,0,0,.55);
}
.hero-foot{
  position:absolute; right:calc(var(--pad) + clamp(18px,3vw,44px)); bottom:clamp(24px,3vw,40px);
  margin:0; font-weight:500; font-size:13px; letter-spacing:.04em; color:var(--cream);
}
@media (max-width:640px){ .hero-foot{ display:none; } }

/* ---- the statement line, with one coloured phrase */
.say{ max-width:min(var(--page),960px); margin:0 auto; padding:clamp(44px,7vw,96px) var(--pad); }
.say p{
  margin:0; font-family:var(--display); font-weight:400;
  font-size:clamp(24px,3.4vw,44px); line-height:1.08; letter-spacing:-.03em;
}
/* emphasis by colour, not by weight or style — keeps it editorial */
.hl{ color:var(--blue); }

/* ---- sections */
.section{ max-width:var(--page); margin:0 auto; padding:clamp(40px,5.5vw,84px) var(--pad); }
.head{ max-width:46ch; margin-bottom:clamp(28px,3.6vw,46px); }
.head h2{ font-size:clamp(38px,5.6vw,80px); }
.head .sub{ color:var(--copper-2); margin:18px 0 0; font-size:17px; }

/* ---- dishes: photo first, card is just paper */
.dishes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:clamp(20px,2.6vw,34px); }
.dish img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:20px; margin-bottom:20px; }
.dish h3{ font-size:30px; margin-bottom:10px; }
.dish p{ margin:0 0 10px; color:var(--copper-2); font-size:15.5px; }
.price{ margin:0 !important; font-weight:600; color:var(--forest) !important; font-size:14.5px !important; }

/* ---- wide photo band with type over it */
.wide{ position:relative; max-width:var(--page); margin:clamp(20px,3vw,44px) auto; padding:0 var(--pad); }
.wide img{
  width:100%; height:clamp(320px,52vh,520px); object-fit:cover; border-radius:20px;
  filter:brightness(.60) contrast(1.08) saturate(1.12);
}
.wide-type{
  position:absolute; inset:auto clamp(28px,6vw,90px) clamp(30px,5vw,64px) calc(var(--pad) + clamp(18px,3vw,48px));
  max-width:22ch;
}
.wide-type h2{ font-size:clamp(30px,4.4vw,64px); color:var(--citron); margin-bottom:16px; text-shadow:0 2px 30px rgba(0,0,0,.55); }
.wide-type p{ margin:0; color:var(--cream); font-size:clamp(15px,1.3vw,17px); max-width:34ch; }
@media (max-width:620px){ .wide-type p{ display:none; } }

/* ---- visit */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,4.5vw,64px); align-items:center; }
@media (max-width:860px){ .split{ grid-template-columns:1fr; } }
.split h2{ font-size:clamp(38px,5vw,72px); margin-bottom:26px; }
.info{ display:grid; grid-template-columns:auto 1fr; gap:15px 28px; margin:0 0 30px; }
.info dt{ font-weight:600; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--forest); padding-top:4px; }
.info dd{ margin:0; color:var(--copper-2); }
.visit-fig{ margin:0; }
.visit-fig img{ width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:20px; }
.visit-fig figcaption{ margin-top:12px; font-size:14px; color:var(--copper-2); }

/* ---- footer */
.foot{ max-width:var(--page); margin:0 auto; padding:clamp(40px,5vw,72px) var(--pad); color:var(--copper-2); font-size:15.5px; }
.foot p{ margin:0 0 8px; }
.foot-mark{ font-family:var(--display); font-weight:600; font-size:30px; color:var(--copper); letter-spacing:-.03em; line-height:1; }
.fine{ margin-top:22px; font-size:12.5px; line-height:1.75; max-width:74ch; opacity:.75; }

/* ---- demo tag */
.demo-tag{
  position:fixed; right:16px; bottom:16px; z-index:60;
  display:flex; flex-direction:column; gap:1px;
  background:var(--forest); color:var(--cream);
  padding:11px 20px; border-radius:31px; text-decoration:none; text-align:center;
  font-size:11px; letter-spacing:.04em; line-height:1.5;
}
.demo-tag span{ opacity:.7; text-transform:uppercase; font-size:9.5px; letter-spacing:.13em; }
.demo-tag strong{ font-family:var(--display); font-weight:500; font-size:12.5px; }
.demo-tag:hover{ background:var(--citron); color:var(--forest); }