/* ══════════════════════════════════════════════════════════════════════════════
   SHORELINE SEAFOOD — site-only CSS.  Loaded after kit.css, motion.css, palette.css.
   Only what the kit does not already own. Never a copy of the kit.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── the light-mode band lights ──
   kit.css hardcodes its default gold/green light sources into body.light's band
   gradients, which would put somebody else's colours under this client's photographs.
   Repaint them in Shoreline's own: steamed-crab vermillion and blue-crab claw. */
body.light .sec::before,body.light .sec-tight::before{background:
  radial-gradient(40% 48% at 8% 6%,rgba(226,85,31,.17),transparent 68%),
  radial-gradient(38% 46% at 94% 96%,rgba(127,163,216,.16),transparent 68%)}
body.light .sec-paper::before{background:
  radial-gradient(42% 50% at 94% 6%,rgba(226,85,31,.16),transparent 68%),
  radial-gradient(38% 46% at 2% 98%,rgba(127,163,216,.17),transparent 68%)}
body.light .sec-alt{background-color:#F1EADC}
body.light .sec-alt::before{background:
  radial-gradient(44% 52% at 14% 2%,rgba(226,85,31,.20),transparent 66%),
  radial-gradient(40% 48% at 92% 100%,rgba(127,163,216,.18),transparent 68%)}

/* ── the eyebrow is the smallest type on the site (12.5px), so it does not run at
      --accent's 5.28:1. #8C3011 on --paper computes 7.45:1. ── */
body.light .eyebrow{color:#8C3011}

/* ── the hero line. Fraunces wants a touch more optical size and a tighter track
      than the kit default at display sizes. ── */
.hero h1,.pbanner h1{font-variation-settings:'opsz' 100;letter-spacing:-.022em}
.hero .sub{max-width:44ch}

/* ══ THE FIVE FEASTS ═══════════════════════════════════════════════════════════
   Typographic cards on purpose: there is no photograph of a shrimp feast, an
   oyster roast, a snow crab feast or a lobster feast, and a crab picture on a
   lobster card would be a lie. Restraint reads better than a stock photo anyway. */
.fgridc{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,1.6vw,20px)}
.fcard{display:flex;flex-direction:column;gap:10px;text-decoration:none;
  padding:clamp(26px,2.4vw,34px) clamp(20px,1.8vw,26px) clamp(24px,2.2vw,30px);
  background:linear-gradient(168deg,#FFFEFA 0%,#FBF6EC 100%);
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 1px 2px rgba(10,31,54,.04),0 14px 34px -26px rgba(10,31,54,.28);
  transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s,border-color .28s;
  min-height:100%}
.fcard .num{font-family:var(--sans);font-size:12px;letter-spacing:.2em;color:var(--accent);
  font-weight:600}
.fcard h3{font-size:clamp(1.24rem,1.5vw,1.46rem);line-height:1.18;margin:0;color:var(--ink)}
.fcard .fl{margin:0;font-size:15.5px;line-height:1.5;color:var(--muted);flex:1}
.fcard .go{font-family:var(--sans);font-size:13.5px;font-weight:500;color:var(--accent);
  display:inline-flex;align-items:center;gap:7px;margin-top:4px;min-height:22px}
.fcard .go::after{content:'';width:15px;height:1px;background:currentColor;
  transition:width .28s cubic-bezier(.2,.7,.3,1)}
.fcard:hover{transform:translateY(-4px);border-color:var(--edge-hot);
  box-shadow:0 1px 2px rgba(10,31,54,.05),0 26px 50px -28px rgba(226,85,31,.48)}
.fcard:hover .go::after{width:28px}
@media(max-width:1100px){.fgridc{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.fgridc{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.fgridc{grid-template-columns:1fr}}

/* ── the long-form feast entries on /crab-feasts ── */
.fdetail{display:grid;grid-template-columns:minmax(230px,.68fr) 1.32fr;gap:clamp(24px,4vw,64px);
  align-items:start;scroll-margin-top:calc(var(--nav-h) + 24px)}
.fdetail .fd-head h2{font-size:clamp(1.9rem,3.4vw,2.7rem);margin:0 0 10px;line-height:1.1}
.fdetail .fd-head .fl{margin:0;font-family:var(--sans);font-size:14px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent)}
.fdetail .fd-body p{font-size:1.06rem;line-height:1.68;max-width:60ch}
.fdetail .fd-for{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  font-size:16.5px;color:var(--muted)}
.fdetail .fd-for strong{color:var(--ink);font-weight:600;margin-right:6px}
.fdetail .btns{margin-top:26px}
hr.fdiv{border:0;border-top:1px solid var(--line);margin:clamp(44px,6vw,76px) 0}
@media(max-width:820px){.fdetail{grid-template-columns:1fr;gap:20px}}

/* ── review wall: an equal-card grid, NOT the kit's .rcols columns layout.
      CSS columns split cards across column breaks on Extraordinary Ewe and had to be
      replaced there too. Three up, two up, one up. ── */
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px);
  margin-top:clamp(34px,4vw,52px)}
.rgrid .rvw{margin:0;height:100%}
@media(max-width:980px){.rgrid{grid-template-columns:repeat(2,1fr)}
  /* an odd last card in a 2-up grid spans both columns rather than sitting half-width */
  .rgrid .rvw:last-child:nth-child(odd){grid-column:1 / -1}}
@media(max-width:620px){.rgrid{grid-template-columns:1fr}
  .rgrid .rvw:last-child:nth-child(odd){grid-column:auto}}

/* ── pills: the audience list and the retail case list ── */
.pills.aud .pill,.pills.case .pill{font-size:15px;padding:11px 20px;min-height:44px;
  display:inline-flex;align-items:center}
.pills.aud .pill{border-color:var(--hair);color:var(--ink)}

/* ── the 400px period photograph of the Gambrills store.
      It is their profile picture and it exists at 400x400 and no larger, so it is
      capped here and never painted wider. See prep-images.py. ── */
.store-then{max-width:380px}
.store-then img{width:100%;border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}
.store-then .vcap{text-align:left;margin-top:14px;max-width:34ch}

/* ── footer hours line (a plain line, not the kit's .hrow table) ── */
.foot .fhours{font-family:var(--serif);font-size:1.5rem;color:#FBF8F1;line-height:1.3;margin:0 0 22px}
.foot .fhours span{display:block;font-family:var(--sans);font-size:14.5px;
  color:rgba(247,243,234,.70);margin-top:6px}

/* ── the market hours table sits in a split column, so give it a ceiling ── */
.hours{max-width:520px}

/* ── contact: the big phone number as a heading ── */
.facts{margin-top:26px}

/* ══ MOTION ════════════════════════════════════════════════════════════════════
   Every start state is VISIBLE (opacity .55 floor, never 0). A hidden tab does not
   tick CSS animations, and a transparent parent defers its own lazy images. This
   cost Sunny Side Energy an invisible headline in a background pane. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .fcard{animation:sl-rise .7s cubic-bezier(.2,.7,.3,1) both;
      animation-timeline:view();animation-range:entry 8% cover 26%}
    .fdetail{animation:sl-rise .75s cubic-bezier(.2,.7,.3,1) both;
      animation-timeline:view();animation-range:entry 4% cover 24%}
  }
}
@keyframes sl-rise{from{opacity:.55;transform:translateY(16px)}to{opacity:1;transform:none}}

/* the hero words rise on load. .55 start, so if the animation never runs it still reads. */
@media (prefers-reduced-motion:no-preference){
  .rise .w{display:inline-block;opacity:.55;animation:sl-word .85s cubic-bezier(.2,.75,.25,1) both;
    animation-delay:calc(var(--i) * 90ms + 120ms)}
}
@keyframes sl-word{from{opacity:.55;transform:translateY(.32em)}to{opacity:1;transform:none}}
.rise .w{will-change:transform}

/* ── the hero photograph drifts, slowly. Their crab shot is worth looking at. ── */
@media (prefers-reduced-motion:no-preference){
  .hero-img img{animation:sl-drift 26s ease-in-out infinite alternate}
}
@keyframes sl-drift{from{transform:scale(1.02)}to{transform:scale(1.075)}}

/* ══ MOBILE ════════════════════════════════════════════════════════════════════ */
@media(max-width:760px){
  /* the drawer sits under the sticky book bar and the chat bubble on every kit site
     built so far (Lux Eternal, Sunny Side, Lewis Ink). Hide them while it is open.
     760px, not 640: the book bar shows up to 760, so between 641 and 760 it covered the menu. */
  body.menu-open .bookbar,body.menu-open .chatfab,body.menu-open .chattag{display:none}
}
@media(max-width:640px){
  .fdetail .btns .btn{width:100%}
  .hero .sub{max-width:none}
}

/* banner headlines: a long single word ("TRANSPORTATION" on Sunny Side) can clip at the
   screen edge invisibly, because body overflow-x is hidden. Keep them wrappable. */
@media(max-width:640px){
  .pbanner h1,.hero h1{word-break:normal;overflow-wrap:break-word;hyphens:none}
}

/* ══ AUDIT FIXES (104-combination run, 2026-09-20) ═════════════════════════════
   117 failures, zero overflows, five distinct causes. Each fix is scoped so it
   cannot leak into a button or the header, which is how this class of rule has
   broken a build before (a bare .btn{width:100%} once pushed every page sideways). */

/* 1. Inline links inside body copy measured 16 to 19px tall and .note's measured 42.8px.
      Vertical padding on an INLINE element enlarges the hit area without moving the line
      box, so the layout is untouched. Scoped to paragraphs, and never to .btn or .pill. */
/* 13px was 2px short: a 13px .fnote link's inline box is 15.5px tall, not its 20.8px
      line-height, so 15.5 + 26 = 41.5. 15px each side clears 44 on every size used here. */
main p a:not(.btn):not(.pill){padding:15px 0;box-sizing:content-box}

/* 2. The kit's .hero-meta is 14px at phone widths. Floor is 15px. */
.hero-meta{font-size:15px}

/* 3. The kit's .vcap is 14.5px. Floor is 15px. */
.vcap{font-size:15px}

/* 4. My own .fd-head .fl eyebrow was 14px. Floor is 15px, and letter-spacing keeps it small. */
.fdetail .fd-head .fl{font-size:15px}

/* 5. GRAMMAR: FAQ answers ran 41em against a warn threshold of 40. */
.faq .ans p{max-width:36em}
.note{max-width:58ch}

/* 6. The kit drops .pcard body copy to 14.5px at phone widths. Secondary floor is 15px. */
@media(max-width:640px){.pcard .bd p{font-size:15px}}

/* ══ VISUAL PASS (1440 and 375, 2026-09-20) ════════════════════════════════════ */

/* The crab mark inherited .brand's colour, which is --body (#25313E) on the light page,
   so on the dark-top hero header it was a dark smudge on a dark ground. --mark exists for
   exactly this and it is the steamed-shell vermillion, which reads on BOTH the dark hero
   header and the paper header after scroll. A steamed crab is supposed to be that colour. */
.brand .mk{color:var(--mark)}
.brand:hover .mk{color:var(--lume-hot)}

/* .hero-meta is display:flex with a 40px column gap, so every bare text node between the
   <b> elements became its own flex item ("Open 8:30 to 7    , seven days"). The markup now
   wraps each stat in one <span>; this keeps the words inside a stat together.
   Inside the span, leave normal inline flow: an inline-flex with a gap put 7px in front of
   the comma in "Open 8:30 to 7, seven days". */
.hero-meta>span{white-space:nowrap}
@media(max-width:560px){.hero-meta>span{white-space:normal}}

/* ── the sticky book bar ──
   kit.css hardcodes it: a 100px pill, a near-black GREEN ground (rgba(15,22,14,.94)), a gold
   gradient to #C0904F and #151E12 label text. All three are the kit's defaults, not this
   client's, and the pill contradicts the square button camp set in palette.css. Repaint it. */
.bookbar{background:rgba(7,24,43,.94);border-top-color:rgba(226,85,31,.34)}
.bookbar a{border-radius:var(--btn-r)}
/* white on the gradient's old top end (#FF7A45) computed 2.59:1, a fail shipped 2026-09-20.
   #C2461A to #963413 computes 5.02 to 7.51:1. */
.bookbar .b1{background:linear-gradient(150deg,#C2461A,#963413);color:#fff;
  box-shadow:0 0 26px -10px rgba(226,85,31,.75)}
.bookbar .b2{border-color:rgba(247,243,234,.42);color:#FBF8F1}

/* ── the map ──
   kit.css styles .mapwrap but never sizes the iframe, so it rendered at the browser's default
   300x150 inside a wider box and left a white gutter down the right. */
.mapwrap{aspect-ratio:4/3}
.mapwrap iframe{width:100%;height:100%;border:0}
@media(max-width:600px){.mapwrap{aspect-ratio:3/2}}

/* ══ THE REPORT (/report) ═════════════════════════════════════════════════════════
   The online presence audit Adam texts to the owner. Read on a phone, in one sitting.
   Pass green #1F5A33 computes 7.39:1 on paper and 8.03:1 on a card; fix red #8C3011
   computes 8.10:1 on a card and 7.32:1 on its own tint. Neither state relies on colour
   alone: every row also carries a tick or a cross and the word Pass or Fix. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rep-banner{min-height:0}
.rep-banner .pbanner-in{padding-bottom:10px}
.rep{max-width:880px}
.rep h2{font-size:clamp(1.8rem,3.6vw,2.6rem);line-height:1.12;margin:0 0 16px;max-width:24ch}
.rep>p{max-width:62ch}

/* the scorecard */
.score{display:grid;grid-template-columns:auto 1fr;gap:clamp(26px,5vw,64px);align-items:center;
  padding:clamp(26px,3.4vw,40px);background:linear-gradient(168deg,#FFFEFA 0%,#FBF6EC 100%);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 1px 2px rgba(10,31,54,.04),0 18px 44px -30px rgba(10,31,54,.32)}
.sbig{display:grid;justify-items:center;text-align:center;min-width:150px}
.sbig .n{font-family:var(--serif);font-size:clamp(4.2rem,9vw,6.2rem);line-height:.95;color:#8C3011;
  font-variation-settings:'opsz' 144;letter-spacing:-.03em}
.sbig .of{font-family:var(--serif);font-size:1.5rem;color:var(--ink);margin-top:4px}
.sbig .l{font-family:var(--sans);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.srows{display:grid;gap:16px}
.srow{display:grid;grid-template-columns:minmax(120px,190px) 1fr auto;gap:16px;align-items:center}
.srow .sn{font-size:16.5px;color:var(--ink);font-weight:500}
.srow .sbar{height:10px;border-radius:10px;background:#EFE6D6;overflow:hidden}
.srow .sbar i{display:block;height:100%;border-radius:10px;background:linear-gradient(90deg,#1F5A33,#2F7A48);min-width:0}
.srow .sv{font-size:16px;color:var(--muted);white-space:nowrap}
.srow .sv b{color:var(--ink);font-size:1.15rem}
@media(max-width:640px){.score{grid-template-columns:1fr}.srow{grid-template-columns:1fr auto}
  .srow .sbar{grid-column:1 / -1;grid-row:2}}

/* "what the spam page says": a plain browser frame, built in CSS, no screenshot needed */
.spam{margin:26px 0 24px;border:1px solid #D9CDBA;border-radius:var(--r-lg);overflow:hidden;background:#fff;
  box-shadow:0 22px 48px -30px rgba(10,31,54,.45)}
.spam .bar{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#EFE9DE;border-bottom:1px solid #D9CDBA;
  font-family:var(--sans);font-size:15px}
.spam .warn{color:#8C3011;font-weight:600;white-space:nowrap}
.spam .warn::before{content:'';display:inline-block;width:9px;height:9px;border-radius:50%;background:#B13F17;margin-right:8px;vertical-align:1px}
.spam .url{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.spam blockquote{margin:0;padding:clamp(22px,3vw,34px)}
.spam blockquote p{font-family:var(--sans);font-size:17px;line-height:1.6;color:#3A3F45;max-width:58ch;margin:0 0 14px}
.spam blockquote .big{font-size:1.45rem;font-weight:600;color:#23272B;letter-spacing:.01em}
.spam figcaption{padding:12px 18px;border-top:1px solid #EFE6D6;font-size:15px;color:var(--muted);background:#FFFDF6}

/* two-column fact table under the spam page */
.rtab{width:100%;border-collapse:collapse;margin-top:6px}
.rtab th,.rtab td{text-align:left;vertical-align:top;padding:15px 12px;border-bottom:1px solid var(--line);font-size:16.5px;line-height:1.55}
.rtab th{width:34%;color:var(--ink);font-weight:600}
.rtab td{color:var(--body)}
.rtab td.bad,.story td.bad{color:#8C3011}
@media(max-width:560px){.rtab th,.rtab td{display:block;width:auto;padding:12px 0}.rtab th{border-bottom:0;padding-bottom:2px}}

/* what is working */
.wins{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,20px);margin-top:26px}
.win{display:grid;gap:8px;padding:24px 24px 22px;background:#F2F7F3;border:1px solid #CFE2D4;border-radius:var(--r-lg)}
.win b{font-family:var(--serif);font-size:2.4rem;line-height:1;color:#1F5A33;font-weight:500}
.win span{font-size:16.5px;line-height:1.55;color:var(--body)}
@media(max-width:640px){.wins{grid-template-columns:1fr}}

/* six stories: the table scrolls sideways inside its own box on a phone, never the page */
.tscroll{overflow-x:auto;margin-top:22px;border:1px solid var(--line);border-radius:var(--r-lg);background:#FFFDF6;
  -webkit-overflow-scrolling:touch}
.tscroll:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.story{width:100%;min-width:760px;border-collapse:collapse}
.story th,.story td{text-align:left;vertical-align:top;padding:15px 14px;border-bottom:1px solid var(--line);font-size:16px;line-height:1.5}
.story thead th{font-family:var(--sans);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;background:#F4EEE3}
.story tbody th{color:var(--ink);font-weight:600;white-space:nowrap}
.story tbody tr:last-child th,.story tbody tr:last-child td{border-bottom:0}

/* channel findings */
.rep .finding{padding:clamp(22px,3vw,32px);margin-top:22px;background:#FFFDF6;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 1px 2px rgba(10,31,54,.04),0 14px 34px -28px rgba(10,31,54,.3)}
.rep .fh{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.rep .fh h3{font-size:clamp(1.5rem,2.6vw,1.9rem);margin:0}
.rep .fs{font-family:var(--sans);font-size:15px;font-weight:600;color:var(--ink);padding:6px 14px;border-radius:40px;background:#F1EADC}
.rep .finding>p{max-width:62ch;margin:12px 0 4px}
.chks{list-style:none;margin:16px 0 0;padding:0}
.chk{display:grid;grid-template-columns:30px 1fr auto;gap:14px;align-items:start;padding:15px 0;border-top:1px solid var(--line)}
.chk .mk2{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;margin-top:1px}
.chk.ok .mk2{background:#EAF3EC;color:#1F5A33}
.chk.no .mk2{background:#FBEFE9;color:#8C3011}
.chk strong{display:block;font-size:17px;color:var(--ink);font-weight:600;line-height:1.4}
.chk div>span{display:block;font-size:16px;line-height:1.55;color:var(--body);margin-top:3px}
.chk em{font-style:normal;font-family:var(--sans);font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding-top:6px}
.chk.ok em{color:#1F5A33}.chk.no em{color:#8C3011}
@media(max-width:480px){.chk{grid-template-columns:30px 1fr}.chk em{display:none}}

/* customers still asking */
.quotes{display:grid;gap:14px;margin:22px 0 22px}
.quotes blockquote{margin:0;padding:18px 22px;border-left:3px solid var(--accent);background:#FFFDF6;border-radius:0 var(--r-lg) var(--r-lg) 0;
  font-family:var(--serif);font-size:clamp(1.2rem,2.2vw,1.45rem);line-height:1.4;color:var(--ink)}

/* the 30-day fix */
.rsteps{list-style:none;counter-reset:rs;margin:24px 0 0;padding:0;display:grid;gap:14px}
.rsteps li{counter-increment:rs;display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:start;
  padding:20px 22px;background:#FFFDF6;border:1px solid var(--line);border-radius:var(--r-lg)}
.rsteps li::before{content:counter(rs,decimal-leading-zero);font-family:var(--serif);font-size:1.7rem;line-height:1;color:#8C3011;padding-top:2px}
.rsteps h3{font-size:1.24rem;margin:0 0 6px;line-height:1.3}
.rsteps p{margin:0;font-size:16.5px;line-height:1.6;color:var(--body);max-width:60ch}
.rep .method{margin-top:30px;padding-top:18px;border-top:1px solid var(--line)}
@media print{.nav,.drawer,.bookbar,.chatfab,.chattag,.foot{display:none!important}
  .rep-banner{margin-top:0}.tscroll{overflow:visible;border:0}.story{min-width:0}}

/* ══ SHORELINE REPAINT (2026-09-21) ═════════════════════════════════════════════════
   A computed-style scan of all nine pages found 42 elements still rendering the kit's own
   green (#151E12 family) or gold (226,184,122 / 176,141,87 / 198,163,102). These are
   literals in kit.css, not tokens, so the palette never reached them. Same stops, same
   darkness, Shoreline's navy (7,24,43) and vermillion (226,85,31) instead. */

/* photo scrims: the hero, page banners, CTA bands and the bleed captions */
.hero-img::after{background:
  linear-gradient(180deg,rgba(7,24,43,.58) 0%,rgba(7,24,43,.22) 30%,rgba(7,24,43,.52) 66%,rgba(7,24,43,.90) 100%),
  linear-gradient(96deg,rgba(7,24,43,.80) 0%,rgba(7,24,43,.58) 34%,rgba(7,24,43,.12) 66%,rgba(7,24,43,0) 100%)}
.pbanner .bimg::after{background:
  linear-gradient(180deg,rgba(7,24,43,.62) 0%,rgba(7,24,43,.34) 44%,rgba(7,24,43,.84) 100%),
  linear-gradient(96deg,rgba(7,24,43,.82) 0%,rgba(7,24,43,.60) 36%,rgba(7,24,43,.14) 70%,rgba(7,24,43,0) 100%)}
.cta .cimg::after{background:linear-gradient(180deg,rgba(7,24,43,.72),rgba(7,24,43,.90))}
.bleed>figcaption{background:linear-gradient(180deg,transparent,rgba(7,24,43,.80))}

/* the footer's two light sources and its top edge */
.foot{border-top-color:rgba(226,85,31,.22);background-image:
  radial-gradient(760px 420px at 10% 0%,rgba(226,85,31,.13),transparent 62%),
  radial-gradient(680px 400px at 94% 90%,rgba(127,163,216,.12),transparent 65%)}

/* buttons: the gold glow, the brown-gold hover (#9C7B49) and the green-black hover (#0F160E) */
body.light .btn-accent{box-shadow:0 10px 24px -12px rgba(150,52,19,.75)}
body.light .btn-accent:hover{background:#963413;box-shadow:0 16px 30px -12px rgba(150,52,19,.85)}
body.light .btn-ink:hover{background:var(--ink-2)}
.btn-ghost:hover{background:rgba(247,243,234,.12);border-color:var(--paper);color:#fff}

/* the contact form: a gold focus ring and a gold dropdown arrow */
body.light .fld input:focus,body.light .fld select:focus,body.light .fld textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(177,63,23,.18)}
.fld select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23B13F17' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E")}

/* ══ THE HOME HERO ON PHONES ═════════════════════════════════════════════════════════
   kit.css gives .hero overflow:hidden, and on phones (<=700px) moves the pull-up that tucks the
   photo under the see-through header from .hero onto .hero-img INSIDE it. The clip then cuts
   off the top 86px, so the header sat over the page background instead of the photo. On a
   dark-ground site that reads as a dark bar and nobody noticed; on this light site it put
   the white "Shoreline" wordmark and the white menu button on cream, where neither could be
   seen. Pull the whole section up instead, and make the photo taller by the same amount so
   everything below it lands exactly where it did. Kit candidate: every kit site has this. */
@media(max-width:700px){
  .hero{margin-top:calc(-1 * var(--nav-h))}
  .hero-img{margin-top:0;height:calc(74vw + var(--nav-h));max-height:calc(440px + var(--nav-h))}
  .hero-img::after{background:linear-gradient(180deg,rgba(7,24,43,.66) 0%,rgba(7,24,43,.16) 42%,rgba(7,24,43,.82) 100%)}
}

/* ══ THE BOOK BAR (phones) ══════════════════════════════════════════════════════════
   Book a feast, Call, Ask. Ask replaces the floating chat bubble on phones. */
.bookbar{gap:8px;padding-left:12px;padding-right:12px}
.bookbar .b1{flex:1 1 auto}
.bookbar .b2,.bookbar .b3{flex:0 0 68px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;padding:7px 4px;min-height:54px;border:1px solid rgba(247,243,234,.40);border-radius:var(--btn-r);
  background:transparent;color:#FBF8F1;font-family:var(--sans);font-size:13px;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent}
.bookbar .b2 svg,.bookbar .b3 svg{width:20px;height:20px;flex:0 0 20px}
.bookbar .b3[aria-expanded="true"]{border-color:var(--lume);color:var(--lume-hot)}
.bookbar .b3:focus-visible,.bookbar .b2:focus-visible{outline:3px solid var(--lume-hot);outline-offset:2px}

/* ══ THE CHAT ═══════════════════════════════════════════════════════════════════════
   Repainted end to end, and rebuilt as a bottom sheet on phones. What was wrong, measured
   2026-09-21 at 375px: kit green and gold throughout; the welcome message cut off because five
   stacked question chips left the message area 97px tall; the footnote was dark text on the
   dark panel (a light-page rule reached it) at 11px; "Call (443) 258-1506" broke mid-number;
   the input was 15px, which makes an iPhone zoom the whole page on tap; the bubble covered the
   hero's Call button; pill buttons on a square-button site. */
.chatpanel{color:var(--txt);background:linear-gradient(168deg,#0E2640,#07182B);border-color:rgba(226,85,31,.34);
  border-radius:14px;max-height:min(640px,calc(100dvh - 120px));
  /* hidden, not just transparent, while closed: an invisible dialog should not take keyboard focus */
  visibility:hidden;transition:opacity .28s cubic-bezier(.2,.7,.3,1),transform .28s cubic-bezier(.2,.7,.3,1),visibility 0s linear .28s}
body.chat-open .chatpanel{visibility:visible;transition-delay:0s}
.chathead{background:rgba(226,85,31,.08);border-bottom-color:rgba(226,85,31,.20);padding:12px 12px 12px 18px}
.chathead .ct{flex:1;min-width:0}
.chathead .ct>span{font-size:13.5px;color:var(--txt-2);margin-top:3px}
.chatx{flex:0 0 44px;width:44px;height:44px;display:grid;place-items:center;padding:0;cursor:pointer;
  border-radius:var(--btn-r);border:1px solid rgba(247,243,234,.24);background:transparent;color:#FBF8F1}
.chatx:hover,.chatx:focus-visible{border-color:var(--lume);color:var(--lume-hot);outline:none}
.msg{font-size:16px}
.msg.bot{background:rgba(255,255,255,.07);border-color:rgba(226,85,31,.20);color:rgba(244,241,233,.94)}
.msg.me{background:linear-gradient(150deg,#C2461A,#963413);color:#fff}
.msg a{color:#FF9165}
.chips{padding:2px 18px 14px}
.chips button{font-size:15px;color:rgba(244,241,233,.92);background:rgba(255,255,255,.04);
  border-color:rgba(226,85,31,.36);border-radius:var(--btn-r);padding:10px 14px;min-height:44px}
.chips button:hover,.chips button:focus-visible{background:rgba(226,85,31,.16);border-color:var(--lume);color:#fff;outline:none}
.chatact a{border-radius:var(--btn-r);font-size:13px;letter-spacing:.06em;padding:12px 10px;white-space:nowrap;
  min-height:46px;display:flex;align-items:center;justify-content:center;gap:8px}
.chatact a svg{width:17px;height:17px;flex:0 0 17px}
.chatact .p{background:linear-gradient(150deg,#C2461A,#963413);color:#fff}
.chatact .s{border-color:rgba(247,243,234,.40);color:#FBF8F1}
.chatform{border-top-color:rgba(226,85,31,.20);background:rgba(0,0,0,.18)}
.chatform input{font-size:16px;color:#FBF8F1;background:rgba(255,255,255,.07);
  border-color:rgba(247,243,234,.22);border-radius:var(--btn-r)}
.chatform input::placeholder{color:rgba(244,241,233,.60)}
.chatform input:focus{border-color:var(--lume);box-shadow:0 0 0 3px rgba(226,85,31,.22)}
.chatform button{flex:0 0 48px;width:48px;height:48px;border-radius:var(--btn-r);
  background:linear-gradient(150deg,#C2461A,#963413);color:#fff}
/* specificity: body.light .chatpanel p{color:inherit} outranks a bare .chatnote */
body.light .chatpanel .chatnote{font-size:13px;color:rgba(244,241,233,.70);padding:2px 18px 14px;line-height:1.45}
.chatfab{background:linear-gradient(150deg,#123049,#07182B);border-color:rgba(226,85,31,.55);color:var(--lume-hot);
  box-shadow:0 0 30px -8px rgba(226,85,31,.55),0 18px 40px -18px rgba(0,0,0,.9)}
.chatfab:hover{box-shadow:0 0 44px -6px rgba(226,85,31,.75)}
.chattag{background:linear-gradient(150deg,#123049,#07182B);border-color:rgba(226,85,31,.45);color:#FBF8F1}
.chatscrim{display:none}

@media(max-width:760px){
  /* no floating bubble on phones: it always covers something. Ask lives in the book bar. */
  .chatfab,.chattag{display:none!important}
  .chatscrim{display:block;position:fixed;inset:0;z-index:80;background:rgba(7,24,43,.58);
    opacity:0;pointer-events:none;transition:opacity .25s ease}
  body.chat-open .chatscrim{opacity:1;pointer-events:auto}
  body.chat-open{overflow:hidden}
  body.chat-open .bookbar{display:none}
  .chatpanel{left:0;right:0;top:auto;bottom:0;width:auto;height:min(88dvh,720px);max-height:none;
    border-radius:18px 18px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom);transform:translateY(28px)}
  body.chat-open .chatpanel{transform:none}
  .chatbody{overscroll-behavior:contain;padding:16px}
  /* one swipeable row of questions instead of five stacked rows that buried the conversation */
  .chips{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:2px 16px 12px;
    -webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent)}
  .chips::-webkit-scrollbar{display:none}
  .chips button{flex:0 0 auto;white-space:nowrap}
  .chatact{padding:0 16px 12px}
  .chatform{padding:12px 14px}
}

/* ══ THE HEADER OVER A PHOTO ════════════════════════════════════════════════════════
   Measured on the phone hero, 375px, by sampling the rendered pixels behind the header:
   the white wordmark ran 3.44:1 on average and 1.00:1 against the photo's brightest
   highlights (the crab's white meat), the menu button the same, and the vermillion
   tagline 1.12:1, which is invisible. The kit's image gradient is tuned for the hero
   headline low on the photo, not for type sitting in the top 87px.
   Two fixes: a dedicated scrim for the header band, and a light tagline while the header
   is transparent. The tagline also runs at 9px in the kit, under its own 11px floor. */
.hero-img::before,.pbanner .bimg::before{content:'';position:absolute;left:0;right:0;top:0;
  height:calc(var(--nav-h) + 64px);pointer-events:none;
  background:linear-gradient(180deg,rgba(7,24,43,.90) 0%,rgba(7,24,43,.72) 45%,rgba(7,24,43,.34) 78%,rgba(7,24,43,0) 100%)}
.brand .w2{font-size:11px;letter-spacing:.30em}
@media(max-width:640px){.brand .w2{font-size:11px;letter-spacing:.24em}}
body.light.dark-top:not(.scrolled):not(.menu-open) .nav .w2{color:rgba(248,243,232,.84)}

/* the slow zoom on the hero photo scales it past its own box; on phones the photo sits in
   the flow, so that overflow spilled below the dark overlay as a bright line across the
   section. Clip it to its box (harmless on desktop, where .hero already clips). */
.hero-img{overflow:hidden}

/* the hero stat separators are flex items, so when the row wraps on a phone a dot is left
   stranded at the end of a line. One stat per line reads better there anyway. */
@media(max-width:560px){.hero-meta .dot{display:none}.hero-meta{gap:8px 0;flex-direction:column;align-items:flex-start}}

/* The burger's middle bar must vanish when the drawer is open, or the two rotated bars plus the
   middle one read as an asterisk rather than an X. kit.css does hide it, but its own later
   rules (the dark layer, then body.light) re-colour `.nav .burger span` at higher specificity
   and bring it back. Noted on Lewis Ink; this is the same bug on a light ground. Kit candidate. */
body.light.menu-open .nav .burger span{background:transparent}

/* No JavaScript, no chat, so no Ask button. kit.js adds .chat-ready to the body once the chat
   is wired, which is the honest signal that the button will do something. */
.bookbar .b3{display:none}
body.chat-ready .bookbar .b3{display:flex}

/* ══ GRID COLUMNS MUST BE ALLOWED TO SHRINK ═════════════════════════════════════════
   A grid column's automatic minimum is min-content, so form controls (which carry an
   intrinsic width from their `size`) can push a column wider than its own container.
   Measured on /contact at 320px: .split's single column computed 360.6px inside a 288px
   container, putting the form 57px past the screen edge. body{overflow-x:hidden} then hid
   it from documentElement.scrollWidth, which is why the layout audit passed it nine times.
   minmax(0,...) lets the column shrink; min-width:0 lets its contents shrink with it. */
.split{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr)}
.split>*,.frow>*,.fdetail>*,.rgrid>*{min-width:0}
.frow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media(max-width:900px){.split{grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px){.frow{grid-template-columns:minmax(0,1fr)}}

/* The contact rows put a label and a value on one flex line. shorelineseafoodcatering@gmail.com
   is 34 unbreakable characters, so its min-content held the row at 361px on a 320px phone and
   the value was clipped off the screen. Let the row wrap and the long values break. */
.iline{flex-wrap:wrap}
.iline>*{min-width:0}
.iline a{overflow-wrap:anywhere}

/* The report's checklist rows and plan steps are grids whose text column carries the email
   address and the domain name, both long unbreakable tokens. Their min-content held the
   column wider than a 320px screen. Let those columns shrink and those tokens break. */
.chk>div,.rsteps li>div{min-width:0}
.chk div>span,.chk strong,.rsteps p,.rsteps h3{overflow-wrap:anywhere}