:root{
    color-scheme:light;
    --navy:#0B2D4F;
    --navy-deep:#061C33;
    --navy-mid:#0F3A66;
    --harbor:#5FA3C9;
    --cream:#F4EFE2;
    --kraft:#E6DCC4;
    /* Maroon, not orange, from 2026-09-22. Ray's call, and it puts the accent in the same
       family as the board housing (--frame #6E1B22) instead of fighting it.

       Three reds, three jobs, none interchangeable -- the same discipline the orange had:
         --rust       BACKGROUND of buttons and pills. White sits on it, 8.56:1
         --rust-deep  the hover state under those. White on it, 11.40:1
         --rust-ink   TEXT on a light ground. 7.35:1 on parchment, 8.99:1 on a lit panel
         --rust-hot   TEXT on navy. Light enough to clear it at 5.48:1, so it reads rose
       A dark maroon on navy is invisible and a light one on parchment is invisible, which
       is why there are two text values and not one. */
    --maroon-deep:#6E1B22;
    --rust:#8C2733;
    --rust-deep:var(--maroon-deep);
    --rust-ink:#7E2430;
    --board-accent:var(--rust-ink);
    --rust-hot:#E0949C;
    --kelp:#2F6B4F;

    --paper:#EBE0C8;
    --card:#F5EDD9;
    --ink:#18222D;
    --ink-soft:#4E5A66;
    --ink-faint:#5A636D;
    --rule:#CFC1A1;
    --rule-hard:#B3A184;
    --dots:#BDB29A;
    --link:var(--navy);

    --board:var(--navy-deep);
    --board-ink:var(--cream);
    --board-rule:rgba(151,187,214,.28);
    --board-soft:#A9C2D6;

    --display:"Staatliches","Haettenschweiler",Impact,sans-serif;
    --body:"Libre Franklin","Helvetica Neue",Arial,sans-serif;
    --script:"Yellowtail",Georgia,serif;

    --eyebrow:#235A78;
    --eyebrow-chart:#6F5129;
    /* Was the gold #B8874B until 2026-09-22, when Ray moved the last of the warm accent
       to maroon. Two values, because one cannot do both jobs on navy:

         --brass       the active tab's FILL. It carries its own area and cream text, so it
                       can be the deep --rust and still read.
         --brass-line  the 2px rules -- the nav's bottom edge and the eyebrow tick. A 2px
                       line has no area to carry it, and a true maroon on navy lands at
                       1.63:1, which is invisible. This is the deepest maroon that still
                       clears 3:1 on the navy, the non-text bar. It is brighter than the
                       rest of the family on purpose; that is the cost of the hue, since
                       maroon and navy sit close in luminance and gold did not.

       The gold read at 4.40:1 on navy. Nothing maroon gets there. */
    --brass:var(--rust);
    --brass-line:#CF4555;
    --brass-soft:#D9B382;

    --chart:#E9D49C;
    --chart-wash:rgba(233,212,156,.88);
    --chart-wash-2:rgba(220,195,132,.90);
    --chart-2:#DCC384;
    --chart-line:#8B6A3B;
    --chart-rule:#C0A375;
    --chart-card:rgba(252,247,235,.66);
    --chart-faint:#8A7B62;

    --maxw:1120px;
    --maxw-tight:960px;
    --fs:16px;
    --h1max:76px;
    --h2max:44px;
  }

  /* The page does NOT follow the system palette. Ardick's customers are mostly on phones in
     whatever mode they happen to run, and the shop's look is the parchment one, so the
     parchment ground is the site rather than a light-mode variant of it. Decided 2026-09-19.
     The dark palette below is kept for previewing with ?theme=dark; nothing reaches it on its
     own. To put system-following back, wrap this block in
     @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ ... } } again. */
  :root[data-theme="dark"]{
    --paper:#0A121B;
    --card:#111D29;
    --ink:#EDE6D6;
    --ink-soft:#AEB8C2;
    --ink-faint:#818C97;
    --rule:#233039;
    --rule-hard:#35444F;
    --dots:#3A4753;
    --kraft:#C7B896;
    --link:var(--harbor);
    --eyebrow:var(--harbor);
    --eyebrow-chart:#C9995C;
    --brass:var(--rust);
    --rust-ink:#E0949C;
    --chart:#171308;
    --chart-wash:rgba(23,19,8,.92);
    --chart-wash-2:rgba(14,11,5,.94);
    --chart-2:#0E0B05;
    --chart-line:#9A7845;
    --chart-rule:#4E4029;
    --chart-card:rgba(255,240,205,.06);
    --chart-faint:#8C7F68;
  }

  *{box-sizing:border-box}

  body{
    /* The UA default 8px was never reset. It showed as a strip of --paper down both
       edges of every full-bleed section, and it held the category strip 8px short of
       the screen on a phone, where that row is meant to run to the edge. The artifact
       preview harness supplies its own body reset, which is why this survived to the
       Cloudflare deploy unseen. */
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--body);
    font-size:var(--fs);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  .shell{max-width:var(--maxw);margin:0 auto;padding-inline:20px}
  .shell-tight{max-width:var(--maxw-tight);margin:0 auto;padding-inline:20px}

  img{max-width:100%}
  /* <picture> is inline by default, so a wrapped <img> sizes against a shrink-to-fit box and
     collapses to nothing. display:block gives it a real box the img can fill.
     display:contents also fixes the sizing but stops loading="lazy" firing in Chrome: the
     image sat in the viewport at the right size and never fetched. */
  picture{display:block}

  h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:.02em}
  p{margin:0 0 14px;max-width:64ch}
  p:last-child{margin-bottom:0}

  /* Was --harbor on parchment: 2.12:1, under half the 4.5:1 WCAG AA needs for text this
     size. Light blue on cream never had a chance. --eyebrow is 5.71:1 and keeps the harbour
     character. 11px at .22em tracking did not help either; 12px at .18em is easier to read
     without changing the look. Do not set an eyebrow colour without checking it against the
     ground it sits on. */
  .eyebrow{
    font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
    color:var(--eyebrow);margin:0 0 10px;
  }
  .eyebrow.on-dark{color:var(--board-soft)}

  h2{font-size:clamp(28px,5.2vw,var(--h2max));line-height:1;margin:0 0 14px;text-wrap:balance}
  h3{font-size:20px;letter-spacing:.05em;margin:0 0 10px}
  /* Section heads that read as h3 but sit at h2 in the outline. The level is about the
     document, the size is about the page; they do not have to agree. */
  h2.h3-size{font-size:20px;letter-spacing:.05em;margin:0 0 10px;line-height:1.2}
  .lead{font-size:17.5px;color:var(--ink-soft)}

  /* ---------- buttons ----------
     .btn:hover is written for the filled rust button. Variant hovers only
     override what they need, so the base rule's border-color and background
     leaked into ghost and outline buttons on hover. Each variant hover now
     pins its own border-color and background so no rust-hot shows up where
     it is not wanted. */
  .btn{
    display:inline-flex;align-items:center;gap:9px;
    font-family:var(--display);font-size:16px;letter-spacing:.07em;
    background:var(--rust);color:#fff;text-decoration:none;
    padding:12px 22px;border:1px solid var(--rust);
    white-space:nowrap;cursor:pointer;
    transition:background-color .18s ease,border-color .18s ease
  }
  .btn:hover{background:var(--rust-deep);border-color:var(--rust-deep)}
  .btn.ghost{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
  .btn.ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.55)}
  .btn.ink{background:var(--navy);border-color:var(--navy);color:var(--cream)}
  .btn.ink:hover{background:var(--navy-mid);border-color:var(--navy-mid)}
  .btn.outline{background:transparent;color:var(--ink);border-color:var(--rule-hard)}
  .btn.outline:hover{border-color:var(--navy);background:transparent}
  .btn svg{width:16px;height:16px;fill:currentColor;flex:none}
  .btn:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--harbor);outline-offset:3px}

  /* ---------- top strip ---------- */
  .topstrip{background:var(--navy);color:var(--board-soft);border-bottom:1px solid rgba(255,255,255,.08)}
  .topstrip .shell{
    display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
    padding-block:8px;font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  }
  .topstrip a{color:var(--cream);text-decoration:none}
  .topstrip a:hover{color:#fff}
  .topstrip .sep{opacity:.45;margin-inline:8px}
  .topstrip .topstack{display:inline-flex;align-items:center;gap:0}
  .topstrip .dirlink{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
  .topstrip .dirlink svg{width:12px;height:12px;fill:currentColor;flex:none}

  /* ---------- nav ---------- */
  nav{position:sticky;top:0;z-index:30;background:var(--navy);border-bottom:1px solid rgba(255,255,255,.1)}
  .navrow{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-block:12px}
  .navmark{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none;position:relative}
  .navmark img{height:42px;width:auto;display:block;position:relative;z-index:1}
  .navmark .navfill{
    display:none;position:absolute;inset:0;pointer-events:none;z-index:0;
    background:url("ardick-logo-navy-fill.png") no-repeat center/100% 100%;
  }
  .navlinks{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
  .navlinks a{
    font-family:var(--display);font-size:17px;letter-spacing:.06em;
    color:var(--cream);text-decoration:none;padding:8px 12px;
    border-bottom:2px solid transparent;
  }
  .navlinks a:hover{border-bottom-color:var(--rust-hot)}
  .navlinks a[aria-current="page"]{border-bottom-color:var(--rust-hot)}
  .navcta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .navtoggle{display:none}
  .navphone{
    font-family:var(--display);font-size:15px;letter-spacing:.05em;
    color:var(--cream);text-decoration:none;white-space:nowrap;
    display:inline-flex;align-items:center;gap:7px;
  }
  .navphone svg{width:14px;height:14px;fill:currentColor}
  .navphone:hover{color:#fff}
  .navcta .btn{font-size:15px;padding:9px 17px}

  @media (min-width:901px){
    /* Klein's-style header: a fixed-height bar with the logo flush against its
       top, taller than the bar, so it overhangs the bottom edge over the hero.
       Flex space-between sets the menu mid-way between the logo and the CTA,
       so it reads centred wherever the sides end. */
    nav{height:clamp(77px,8.1vw,91px)}
    /* nowrap is load-bearing. The bar is a fixed height so the logo can overhang it,
       which means a row that does not fit is not clipped: it lays the menu out below
       the bar, on the parchment, in navy-on-cream. A seventh menu item did exactly
       that. With nowrap the menu shrinks inside the bar instead. It still has to fit
       -- see the label rule below -- but it can no longer escape. */
    .navrow{height:100%;padding-block:0;flex-wrap:nowrap}
    .navlinks{min-width:0}
    .navmark{align-self:flex-start}
    .navmark img{height:clamp(112px,11.8vw,132px)}
    .navmark .navfill{
      display:block;
      background-image:url("ardick-logo-navy-fill.png");
      background-size:101% 100%;
    }
  }
  @media (min-width:901px){
    /* Seven items now. The shell is 1120px to 1599px and 1280px above it, but the wider
       shell is spent on the phone rolling back into the row, so the menu's budget is the
       same either way: it gets the tight setting at every desktop width. */
    .navlinks a{font-size:16px;letter-spacing:.05em;padding:8px 9px}
    .navcta .btn{font-size:14px;padding:8px 14px}
  }
  @media (min-width:901px) and (max-width:1599px){
    .navphone{display:none}
  }
  @media (min-width:901px) and (max-width:1199px){
    /* Below 1200 the enlarged logo and seven menu items cannot share the row at any type
       size worth reading, so this band stops pretending: the logo comes down to sit inside
       the bar rather than overhang it, the bar grows, and the menu takes two lines. It is
       a deliberate second shape for the header, not the wide one breaking. */
    nav{height:auto;min-height:clamp(77px,8.1vw,91px)}
    .navrow{height:auto;min-height:clamp(77px,8.1vw,91px);padding-block:10px;align-items:center}
    .navmark{align-self:center}
    .navmark img{height:58px}
    .navmark .navfill{display:none}
    .navlinks{flex-wrap:wrap;justify-content:flex-end}
  }
  @media (min-width:901px) and (max-width:975px){
    /* Tightest desktop sliver: the enlarged logo (306px) plus the menu and
       CTA cannot share a 845px row, so the CTA is dropped; the phone stays in
       the top strip and Carryout board carries the call to action. Without the
       button the 16px menu sits centred on one line inside the fixed bar. */
    .navcta{display:none}
  }

  /* ---------- hero ---------- */
  .hero{position:relative;background:var(--navy-deep);color:#fff;isolation:isolate;overflow:hidden}
  .hero::before{
    content:"";position:absolute;inset:0;z-index:-2;
    background:url("img/hero-counter.jpg") center 62% / cover no-repeat;
    background:image-set(url("img/hero-counter.webp") type("image/webp"),url("img/hero-counter.jpg") type("image/jpeg")) center 62% / cover no-repeat;
    filter:saturate(.85) contrast(1.02);
  }
  .hero::after{
    content:"";position:absolute;inset:0;z-index:-1;
    /* Deepened 2026-09-22 with the hero photograph. The old stops were tuned against a
       dark lake; the counter shot puts a case of white ice behind the copy, and the bright
       5% of that area dropped the headline to 4.33:1 and the sub-copy to 3.45:1. Median
       contrast looked fine the whole time, which is exactly why this has to be sampled at
       p95 off the rendered page rather than eyeballed. */
    background:linear-gradient(100deg,rgba(6,28,51,.94) 0%,rgba(6,28,51,.86) 42%,rgba(6,28,51,.38) 72%,rgba(6,28,51,.48) 100%);
  }
  .hero .shell{padding-block:clamp(56px,9vw,104px)}
  .herowrap{max-width:660px}
  .hero h1{
    font-size:clamp(42px,8vw,var(--h1max));line-height:.94;margin:0 0 20px;
    letter-spacing:.01em;text-shadow:0 2px 24px rgba(0,0,0,.35);
  }
  .hero .sub{font-size:clamp(16px,2.2vw,19px);color:#DCE7F0;max-width:46ch;margin:0 0 28px}
  .herobtns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px}
  /* the arrow follows the label, so it sits after the text rather than before it */
  .btn .arrow{order:2;margin-left:2px}
  .heropill{
    display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;
    background:rgba(6,28,51,.55);border:1px solid rgba(255,255,255,.22);
    padding:10px 16px;
  }
  .pill{
    display:inline-flex;align-items:center;gap:8px;
    font-family:var(--display);font-size:17px;letter-spacing:.08em;
    padding:4px 12px;color:#fff;background:rgba(255,255,255,.2);
  }
  .pill.open{background:var(--kelp)}
  .pill.closed{background:var(--rust)}
  .dot{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.9}
  .statusnote{font-size:14px;color:#D6E3EE}
  .statusnote b{color:#fff;font-weight:600}

  /* ---------- schedule band ---------- */
  .schedrow{
    display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:center;
    padding-block:38px;
  }
  .schedcard{display:flex;border:1px solid var(--rule-hard);background:var(--paper)}
  .schedcard .tile{
    background:var(--navy);color:var(--cream);flex:none;
    width:96px;display:flex;align-items:center;justify-content:center;
  }
  .schedcard .tile .art{width:52px;opacity:.95}
  .schedcard .body{padding:20px 24px;flex:1 1 auto;min-width:0}
  .schedcard h3,.schedcard .sched-h{margin:0 0 14px;font-size:26px;letter-spacing:.04em;line-height:1.1}
  .schedcard .spans{
    display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
    padding-bottom:14px;margin-bottom:12px;border-bottom:1px solid var(--rule);
  }
  .schedcard .spans div{min-width:0}
  .schedcard .dayname{
    font-family:var(--display);font-size:15px;letter-spacing:.09em;
    color:var(--ink-soft);margin:0 0 2px;
  }
  .schedcard .time{font-size:16px;font-weight:600;margin:0;font-variant-numeric:tabular-nums}
  .schedcard .shut{font-size:14.5px;color:var(--ink-soft);margin:0}
  @media (max-width:640px){.schedcard .spans{grid-template-columns:1fr;gap:10px}}
  .flourish{text-align:center;flex:none}
  .flourish .script{
    font-family:var(--script);font-size:clamp(30px,4.4vw,42px);line-height:1.15;
    color:var(--link);display:block;
  }
  .flourish svg{width:82px;height:auto;fill:var(--harbor);opacity:.55;margin-top:6px}
  @media (max-width:840px){
    .schedrow{grid-template-columns:1fr;gap:24px}
    .flourish{text-align:left}
    .schedcard .tile{width:76px}
  }
  @media (max-width:460px){
    .schedcard{flex-direction:column}
    .schedcard .tile{width:100%;padding-block:16px}
  }

  /* ---------- sections ---------- */
  section{padding-block:clamp(44px,6vw,68px)}
  section[id],header[id],main[id]{scroll-margin-top:78px}
  main[id]:focus{outline:none}
  /* The wash went from .68-.85 to .80-.92 on 2026-09-22 so the chart over it can be read.
     The thing competing with the chart was never the navy, it was the photograph's wave
     texture; deepening the wash calms that without losing the water. Measured off the
     rendered page rather than guessed, and it improves the copy as well -- the lead sits at
     6.18:1 median over the new ground against 5.32:1 over the old one. */
  .sec-dark{
    background:var(--navy);color:var(--board-ink);
    background-image:linear-gradient(rgba(11,45,79,.80),rgba(11,45,79,.92)),url("img/water.jpg");
    background-image:linear-gradient(rgba(11,45,79,.80),rgba(11,45,79,.92)),image-set(url("img/water.webp") type("image/webp"),url("img/water.jpg") type("image/jpeg"));
    background-size:cover;background-position:center;
  }
  .sec-dark h2,.sec-dark h3{color:var(--cream)}
  .sec-dark .lead{color:var(--board-soft)}
  .sec-dark .eyebrow{color:var(--board-soft)}

  .sechead{margin-bottom:28px}
  .sechead.split{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}

  /* ---------- hours table ---------- */
  .hours-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:34px;align-items:start}
  .hours{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
  .hours th,.hours td{padding:10px 0;border-bottom:1px solid var(--rule);text-align:left}
  .hours th{font-weight:500;color:var(--ink-soft);font-size:15px}
  .hours td{text-align:right;font-size:15px;font-weight:600}
  .hours tr.today th,.hours tr.today td{color:var(--link)}
  .hours td.shut{color:var(--ink-faint);font-weight:400}
  .notice{border:1px solid var(--rule-hard);background:var(--card);padding:20px}
  .notice p{font-size:14.5px;color:var(--ink-soft)}
  .notice a{color:var(--link);font-weight:600}

  /* ---------- per-section sub navigation ---------- */
  .catnote{font-size:14.5px;color:var(--board-soft);margin:0 0 20px;font-style:italic}
  /* Every subnav is a <nav> element (correctly, for a11y -- it's real in-page navigation),
     but so is the sticky site header, and the header's rules above are bare tag selectors
     with no class scoping them to just the header. That let them leak onto every subnav:
     sticky position, the header's fixed height (clamp(77px,8.1vw,91px) at >=901px), the navy
     fill, the brass bottom rule -- a plain row of jump-link pills was rendering as a second
     navy bar. `nav.subnav` (tag+class, specificity 0-1-1) beats a bare `nav` selector
     (0-0-1) regardless of source order or which breakpoint set the leaking rule, so this one
     block clears all of it without touching the header rules themselves. */
  nav.subnav{position:static;height:auto;background:none;border-bottom:none;box-shadow:none}
  .subnav{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 26px;padding:0;list-style:none}
  .subnav a{
    font-family:var(--display);font-size:13.5px;letter-spacing:.07em;text-transform:uppercase;
    color:var(--ink-soft);border:1px solid var(--rule);padding:7px 13px;text-decoration:none;
  }
  .subnav a:hover{color:var(--link);border-color:var(--link)}
  .sec-dark .subnav a,.sec-chart .subnav a,.sec-card .subnav a{
    color:var(--board-soft);border-color:var(--board-rule);
  }
  .sec-dark .subnav a:hover,.sec-chart .subnav a:hover,.sec-card .subnav a:hover{
    color:#fff;border-color:rgba(151,187,214,.6);
  }

  /* ---------- case category tabs (Fresh Seafood board) ----------
     Same pill shape as .subnav, but these are real tabs: one category shown in the panel
     at a time, picked from the counter's own categories (Lake Fish, Dressed Fish Boneless,
     Crab, Shrimp...), not a browsing taxonomy invented for the site. Selected state uses
     --brass, which is the maroon accent as of 2026-09-22, rather than introducing a second
     colour for "active". Cream text on it, not navy: the fill went from a light gold to a
     deep maroon, so the text had to flip with it. */
  .casetabs{display:block;margin:0 0 22px;padding:0;list-style:none}
  .tabgroup{display:flex;gap:6px}

  /* The category row is one bar at every width. Nine tabs measure 1063px and the shell
     caps this container at 1080px, so from about 1200px up there is simply nothing to
     scroll and it renders as a plain row; below that it scrolls sideways rather than
     wrapping. Wrapping was the old behaviour: at 390px it made five ragged rows, and on
     a desktop it stranded the two counter-service tabs alone under a full row of nine.
     Nowrap at every size means one code path and no breakpoint to keep in sync. */
  .tabscroll{position:relative}
  .tabgroup-cat{
    flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .tabgroup-cat::-webkit-scrollbar{display:none}
  .tabgroup-cat .casetab{flex:0 0 auto;scroll-snap-align:start}

  .casetabs .casetab{
    font-family:var(--display);font-size:13.5px;letter-spacing:.07em;text-transform:uppercase;
    color:var(--ink-soft);background:none;border:1px solid var(--rule);padding:9px 16px;
    cursor:pointer;line-height:1;
  }
  .casetabs .casetab:hover{color:var(--link);border-color:var(--link)}
  .sec-dark .casetabs .casetab,.sec-chart .casetabs .casetab,.sec-card .casetabs .casetab{
    color:var(--board-soft);border-color:var(--board-rule);
  }
  .sec-dark .casetabs .casetab:hover,.sec-chart .casetabs .casetab:hover,.sec-card .casetabs .casetab:hover{
    color:#fff;border-color:rgba(151,187,214,.6);
  }
  .casetabs .casetab[aria-selected="true"],
  .casetabs .casetab[aria-selected="true"]:hover{
    background:var(--brass);border-color:var(--brass);color:var(--cream);font-weight:700;
  }

  /* A photograph of the category, banded across the top of the lit panel above its prices.
     A wide short crop on purpose: the panel is a price board first, and the originals are
     mostly 3:4 portraits, so object-fit takes the middle of the frame rather than letting
     a tall photograph push the prices off a phone screen. */
  .panelshot{
    margin:0 0 18px;overflow:hidden;
    border:1px solid rgba(11,45,79,.16);
    background:#DfD8C6;
  }
  .panelshot img{
    display:block;width:100%;height:auto;
    aspect-ratio:16/5;max-height:240px;
    object-fit:cover;object-position:center 55%;
  }
  /* The cap matters more than the ratio. At 16:5 with no max the band was 374px of a
     658px panel on a laptop, so more than half the price board was photograph, and it
     only grows with the shell on a 4K screen. 240px holds it at about a third. */
  @media (max-width:700px){
    /* Taller on a phone, where a 16:5 crop of a 3:4 original is a letterbox slit. */
    .panelshot img{aspect-ratio:16/9;max-height:none}
  }
  @media print{.panelshot{display:none}}

  /* grouped case category blocks inside a panel */
  .catgroup{margin-bottom:30px}
  .catgroup h4{
    font-family:var(--display);font-size:16px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--cream);margin:0;padding-bottom:8px;border-bottom:1px solid var(--board-rule);
  }
  .catgroup .catnote2{font-size:13.5px;color:var(--board-soft);font-style:italic;margin:8px 0 14px}

  /* one continuous board: the three case groups stacked, a rope between them, the way the
     groups sit behind the glass. A tabbed version kept two-thirds of the case behind a
     click; this is the whole board at once. */
  .grp{margin-bottom:6px}
  .grp + .grp{margin-top:26px;padding-top:26px;border-top:1px solid var(--board-rule)}
  .grphead{
    display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
    margin:0 0 18px;padding-bottom:12px;border-bottom:2px double var(--board-rule);
  }
  .grphead h2,.grphead h3{
    font-family:var(--display);font-size:22px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--cream);margin:0;
  }
  /* Board decals. Ardick's own lit boards each carry one -- a crab on By The Pound, an
     octopus and a mermaid on Surf-Sides, the fish-with-an-A on Steamed -- so each board
     here heads itself with one too, instead of the one stock ship's wheel that used to sit
     on all of them alike. Traced off the counter photographs by
     scripts/build_board_icons.sh; the fish comes from the logo, which is the same mark
     already drawn clean. Sized by width against each icon's own ratio so they all land on
     roughly one cap height rather than one box. */
  .grphead h2::before,.grphead h3::before{
    content:"";display:inline-block;
    width:var(--panel-icon-w,22px);aspect-ratio:var(--panel-icon-ar,356/400);
    background-color:currentColor;opacity:.7;margin-right:10px;
    -webkit-mask:var(--panel-icon,var(--i-fish)) center/contain no-repeat;
    mask:var(--panel-icon,var(--i-fish)) center/contain no-repeat;
  }
  .ico-crab{--panel-icon:var(--i-crab);--panel-icon-ar:557/400;--panel-icon-w:31px}
  /* Four more decals off the sheet Ray supplied 2026-09-22. Widths are tuned to land on
     roughly one cap height each, not to one box: the bass is two and a half times as wide
     as it is tall and would read as a minnow at the crab's 31px. */
  .ico-shrimp{--panel-icon:var(--i-shrimp);--panel-icon-ar:433/400;--panel-icon-w:30px}
  .ico-scallop{--panel-icon:var(--i-scallop);--panel-icon-ar:469/400;--panel-icon-w:31px}
  .ico-lobster{--panel-icon:var(--i-lobster);--panel-icon-ar:330/400;--panel-icon-w:25px}
  .ico-bass{--panel-icon:var(--i-bass);--panel-icon-ar:1050/400;--panel-icon-w:44px}
  .ico-octopus{--panel-icon:var(--i-octopus);--panel-icon-ar:400/400;--panel-icon-w:23px}
  .ico-mermaid{--panel-icon:var(--i-mermaid);--panel-icon-ar:388/400;--panel-icon-w:22px}
  .ico-fish{--panel-icon:var(--i-fish);--panel-icon-ar:356/400;--panel-icon-w:27px}
  .grphead p{font-size:13.5px;color:var(--board-soft);font-style:italic;margin:0;max-width:60ch}
  @media (max-width:520px){
    .grphead{flex-direction:column;align-items:flex-start;gap:4px}
  }

  /* ---------- menu cards ---------- */
  .cardgrid{display:grid;grid-template-columns:1fr;gap:20px}
  @media (min-width:860px){.cardgrid.two{grid-template-columns:1fr 1fr}}
  .menucard{display:flex;flex-direction:column}
  .menucard .rows{margin-bottom:0}
  .menucard .sides{margin-top:auto;padding-top:14px}

  /* ---------- rows with dot leaders ---------- */
  .rows{margin:0;padding:0;list-style:none}
  .row{
    display:flex;flex-wrap:wrap;align-items:baseline;
    gap:0 8px;padding:8px 0;border-bottom:1px solid var(--rule);
  }
  .row:last-child{border-bottom:0}
  .row .name{font-weight:600;flex:0 1 auto}
  .row .lead-dots{border-bottom:2px dotted var(--dots);flex:1 1 16px;min-width:16px}
  .row .price{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--link);flex:0 0 auto}
  .row .price.market{color:var(--rust);font-style:italic}
  .row .desc{flex:0 0 100%;font-size:13.5px;color:var(--ink-faint);margin-top:2px;line-height:1.45}
  .row .unit{font-weight:500;color:var(--ink-faint);font-size:13px;margin-left:6px;white-space:nowrap}

  .sec-dark .row{border-bottom-color:var(--board-rule)}
  .sec-dark .row .name{color:var(--cream)}
  .sec-dark .row .price{color:#fff}
  .sec-dark .row .price.market{color:var(--rust-hot)}
  .sec-dark .row .desc{color:var(--board-soft);opacity:.8}
  .sec-dark .row .unit{color:var(--board-soft);opacity:.75}
  .sec-dark .row .lead-dots{border-bottom-color:rgba(151,187,214,.35)}

  .rowgrid{display:grid;grid-template-columns:1fr;gap:0}
  @media (min-width:860px){.rowgrid.two{grid-template-columns:1fr 1fr;column-gap:48px}}

  /* Cut / Clean / Prep and Ask The Counter, sitting open under the board rather than
     behind a tab. Two columns on the same 860px breakpoint .cardgrid.two uses, so the
     pair lines up with every other two-up on the site. Deliberately NOT a .menucard:
     that is the lit acrylic lightbox, and a second one under the price board would
     compete with the board instead of annotating it. .sides is the note voice already
     used for exactly this inside the panels. */
  .counterinfo{
    /* Row gap only bites in the single-column phone case, where 6px ran the two notes
       together into one paragraph. Column gap is untouched. */
    display:grid;grid-template-columns:1fr;gap:15px 36px;
    margin-top:22px;padding-top:20px;border-top:1px solid var(--rule);
  }
  .sec-dark .counterinfo,.sec-chart .counterinfo,.sec-card .counterinfo{
    border-top-color:rgba(151,187,214,.45);
  }
  .counterinfo .sides{margin:0}
  @media (min-width:860px){.counterinfo{grid-template-columns:1fr 1fr}}

  .marketnote{margin-top:22px;font-size:14px;color:var(--board-soft);opacity:.85}
  .marketnote em{color:var(--board-accent);font-style:italic}
  .bigcta{margin-top:26px;text-align:center}

  /* ---------- house rule ---------- */
  .houserule{
    display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
    background:var(--rust);color:#fff;padding:16px 20px;margin:0 0 26px;text-align:center;
  }
  .houserule .hr-main{font-family:var(--display);font-size:19px;letter-spacing:.08em;line-height:1.2}
  .houserule .hr-sub{font-size:13px;font-weight:600;letter-spacing:.05em;opacity:.92}

  .sides{font-size:14px;color:var(--board-soft);margin:14px 0 0;line-height:1.6}
  .sides b{color:var(--cream);font-weight:600}

  /* ---------- photo band ---------- */
  .band{
    position:relative;color:#fff;isolation:isolate;overflow:hidden;
    text-align:center;padding-block:clamp(46px,7vw,74px);
  }
  .band::before{content:"";position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;filter:saturate(.85) contrast(1.02)}
  .band::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(6,28,51,.42)}
  /* The Colorado / Idaho corner, 2026-09-27. Was a stock sunset, and Local Roots reading
     over somebody else's lake was the weakest claim on the site.

     The asset is 3.6:1 so a 4.5:1 band crops it barely at all, and 46% keeps the specials
     banner low rather than behind the body copy: a band is a thin strip, and white
     lettering sitting directly behind white body copy made both unreadable at 58%. */
  .band.roots::before{background-image:url("img/band-corner.jpg");
    background-image:image-set(url("img/band-corner.webp") type("image/webp"),url("img/band-corner.jpg") type("image/jpeg"));
    background-position:center 46%}
  /* Below about 1080px the band is narrower than the image is wide, so `cover` starts
     cropping horizontally and a centred window keeps the middle: the patio and the fence,
     and neither sign. The Ardick road sign is the right-hand 10% of the frame, so on a
     phone the window goes hard right and the sign is what survives. The street signs are
     the trade: they and the road sign sit at opposite ends of a 3.6:1 photograph and a
     390px band shows about 39% of it, so no position holds both. */
  @media (max-width:860px){
    .band.roots::before{background-position:right 46%}
  }
  /* and the scrim goes deeper here than on .catch, because this photograph is a bright
     midday one rather than a sunset */
  .band.roots::after{background:rgba(6,28,51,.56)}
  .band.catch::before{background-image:url("img/sunset-waves.jpg");
    background-image:image-set(url("img/sunset-waves.webp") type("image/webp"),url("img/sunset-waves.jpg") type("image/jpeg"));background-position:center 62%}
  .band h2{font-size:clamp(28px,5vw,46px);margin:0 0 10px;text-shadow:0 2px 20px rgba(0,0,0,.4)}
  .band p{color:#E2EBF2;margin:0 auto 22px;max-width:52ch}
  .bandbtns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

  /* ---------- visit ---------- */
  .visitgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:32px;align-items:start}
  @media (min-width:900px){.visitgrid{grid-template-columns:1.5fr 1fr 1fr}}
  .visitlead{display:grid;grid-template-columns:1fr}
  .visitmark{display:none}
  @media (min-width:1024px){
    /* stretch, so the column has a definite height for the art to resolve against */
    .visitlead{grid-template-columns:1fr auto;gap:44px;align-items:stretch}
    .visitmark{display:flex;align-items:center;justify-content:center;width:96px}
    .visitmark .art{height:100%;max-height:330px;width:auto;opacity:.5}
  }
  .addr{font-size:17px;line-height:1.7;margin:0 0 18px}
  .addr strong{display:block;font-family:var(--display);font-size:24px;letter-spacing:.04em;font-weight:400;margin-bottom:4px}
  .visitbtns{display:flex;gap:10px;flex-wrap:wrap}
  .photogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:34px}
  .photogrid figure{margin:0;position:relative;overflow:hidden;background:var(--navy-deep)}
  .photogrid img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;filter:saturate(.8)}
  .photogrid figcaption{
    position:absolute;left:0;right:0;bottom:0;
    font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:#fff;background:linear-gradient(transparent,rgba(6,28,51,.9));padding:22px 10px 8px;
  }

  /* One wide photograph inside a section. Captioned the way .photogrid does it, over the
     image rather than under it, so it reads the same on the parchment sections and on the
     dark ones without needing to know which it is sitting in. */
  .secphoto{margin:34px 0 0;position:relative;overflow:hidden;background:var(--navy-deep)}
  .secphoto img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center 54%;display:block;filter:saturate(.85)}
  .secphoto figcaption{
    position:absolute;left:0;right:0;bottom:0;
    font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:#fff;background:linear-gradient(transparent,rgba(6,28,51,.9));padding:26px 12px 10px;
  }
  @media (max-width:600px){.secphoto img{aspect-ratio:4/3}}

  /* ---------- footer ---------- */
  /* ---- footer, tightened 2026-09-22 ----
     It was 359px on a desktop and 816px on a phone -- taller than the screen it sat at the
     bottom of. Every value below came down, but the phone case was not about padding: the
     grid dropped to ONE column at 560px, so four blocks stacked into 582px on their own.
     Two columns hold down to 430px and halve it. */
  footer{background:var(--navy);color:var(--board-ink);padding-block:28px 0}
  /* was an inline style on seven pages; the footer owns its own spacing now */
  footer .rope{margin-top:20px;height:24px}
  .footgrid{
    display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.2fr) auto;
    gap:22px 30px;align-items:start;
  }
  .footgrid img.mark{height:46px;width:auto;display:block;margin-bottom:8px}
  .foothead{
    font-family:var(--display);font-size:14px;letter-spacing:.16em;
    color:var(--cream);margin:0 0 7px;
  }
  .footgrid p{font-size:13.5px;color:var(--board-soft);margin:0 0 3px;max-width:none;line-height:1.5}
  .footline{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--board-soft);margin-bottom:4px}
  .footline svg{width:15px;height:15px;fill:currentColor;flex:none;margin-top:4px;opacity:.85}
  .footline a{color:var(--board-soft);text-decoration:none}
  .footline a:hover{color:#fff}
  .social{display:flex;gap:10px}
  .social a{
    width:40px;height:40px;display:flex;align-items:center;justify-content:center;
    border:1px solid var(--board-rule);color:var(--cream);
  }
  .social a:hover{background:var(--rust);border-color:var(--rust)}
  .social svg{width:18px;height:18px;fill:currentColor}
  .footbottom{
    margin-top:4px;border-top:1px solid rgba(255,255,255,.12);
    padding-block:12px;text-align:center;
    font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--board-soft);
  }
  .footbottom .sep{opacity:.45;margin-inline:9px}
  .footbottom .disclaim{display:block;margin-top:4px;letter-spacing:.04em;text-transform:none;opacity:.55;font-size:12px}
  @media (max-width:900px){.footgrid{grid-template-columns:1fr 1fr;gap:20px 24px}}
  /* Two columns all the way down. One column was costing 250px of footer on a phone --
     the whole thing came to 816px, taller than the screen it sat at the bottom of -- and
     four short blocks read perfectly well side by side at 150px each. The logo mark comes
     down with them so it does not own a whole row by itself. */
  @media (max-width:560px){
    .footgrid{grid-template-columns:1fr 1fr;gap:16px 18px}
    .footgrid img.mark{height:38px}
  }

  /* ---------- small screens ---------- */
  @media (max-width:900px){
    .topstrip .shell{justify-content:center;text-align:center;gap:2px 12px;font-size:10.5px;letter-spacing:.12em}
    /* The links used to be a nowrap row with overflow-x:auto. Five labels as long as
       "Big Orders & Platters" do not fit a phone, so most of the menu sat off-screen behind
       a horizontal scroll with no affordance that it scrolled at all. It is a real menu now.

       The panel is hidden only under nav.has-toggle, a class the script adds. If the script
       never runs the links simply wrap inside the bar: less tidy, still every link reachable. */
    .navrow{padding-block:10px;gap:10px;flex-wrap:wrap}
    .navmark img{height:48px;max-width:calc(100vw - 160px);object-fit:contain}
    .navcta{gap:8px}
    .navcta .btn{font-size:13px;padding:9px 14px}

    .navtoggle{
      display:inline-flex;align-items:center;justify-content:center;
      width:46px;height:46px;flex:none;padding:0;cursor:pointer;
      background:transparent;border:1px solid rgba(255,255,255,.3);color:var(--cream);
    }
    .navtoggle svg{width:22px;height:22px;fill:currentColor}
    .navtoggle[aria-expanded="true"]{background:rgba(255,255,255,.12)}

    .navphone{
      width:46px;height:46px;flex:none;justify-content:center;gap:0;
      border:1px solid rgba(255,255,255,.3);
    }
    .navphone svg{width:20px;height:20px}
    .navnum{display:none}

    .navlinks{order:3;width:100%;flex-wrap:wrap;gap:0}
    .navlinks a{
      padding:13px 14px;font-size:16px;white-space:nowrap;
      min-height:48px;display:flex;align-items:center;
    }
    .subnav a{min-height:44px;display:inline-flex;align-items:center}
    nav.has-toggle .navlinks{
      position:absolute;left:0;right:0;top:100%;z-index:31;
      display:none;flex-direction:column;width:auto;
      background:var(--navy);
      border-top:1px solid rgba(255,255,255,.12);
      box-shadow:0 20px 44px rgba(0,0,0,.42);
      padding-block:4px 10px;
    }
    nav.has-toggle .navlinks.open{display:flex;max-height:calc(100dvh - 80px);overflow-y:auto;overscroll-behavior:contain}
    /* Without this the drawer stops at its last link and whatever the hero had at that
       line -- the status pill, as it happened -- shows through cut in half. Carrying the
       navy to the bottom of the view makes it a drawer instead of a flap. Clicks land on
       .navlinks itself, which main.js treats as tap-to-close. */
    nav.has-toggle .navlinks.open::after{display:none}
    nav.has-toggle .navlinks a{
      padding:15px 22px;font-size:18px;
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    nav.has-toggle .navlinks a:last-child{border-bottom:0}
    .btn{min-height:44px}
    .houserule{flex-direction:column;gap:6px}
    .menucard{padding:20px 15px 16px}
    .cardgrid.two .menucard{padding:18px 14px 15px}
    .band h2{font-size:clamp(24px,7vw,34px)}
  }

  /* ---------- phones ----------
     Real phones are 320-430px wide and the touch breakpoint fires at 900px. These tighten
     the hero and the strip for screens where the desktop gaps start to cost rows. */
  @media (max-width:480px){
    .herobtns{flex-direction:column;align-items:stretch;width:100%}
    .herobtns .btn{width:100%;justify-content:center}
    .hero .sub{margin-bottom:22px}
    .heropill{flex-direction:column;align-items:flex-start}
    .heropill .pill{width:100%}
    .topstrip .shell{gap:3px 8px;letter-spacing:.1em}
    .schedcard .body{padding:18px 16px}
  }
  @media (max-width:360px){
    .topstrip .dirlink svg{display:none}
  }



  /* ---------- aged paper ----------
     Two turbulence layers, not a motif tile. The repeating marine chart was rejected as
     wallpaper because it was recognisable art repeating; paper fibre and blotching are
     texture, which is the thing that was missing.

     The texture goes INSIDE each section's own background stack, blended with
     background-blend-mode. It was first written as a ::after with mix-blend-mode:multiply at
     z-index:-1, which rendered the entire page blank in Chrome: a blend mode on a negative
     z-index child inside isolation:isolate gets promoted to its own compositing layer and
     paints over everything. The DOM was intact the whole time, so it only showed up in a
     screenshot. Do not go back to mix-blend-mode here. */
  :root{
    --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url%28%23g%29'/%3E%3C/svg%3E");
    --mottle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0.06  0 0.93 0 0 0.03  0 0 0.74 0 0  0 0 0 1 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='700' height='700' filter='url%28%23m%29'/%3E%3C/svg%3E");
    --grain-size:180px 180px,700px 700px;
  }
  /* The sheet is ONE sheet, painted on body, and the parchment sections are translucent
     tints laid over it. Each section used to paint its own copy, which restarted the 700px
     blotching at every section origin and, with a border-block rule and a per-section
     vignette darkening each section's own edges, drew a visible fold at every boundary.
     Nothing that wants continuous paper may carry its own background-image. */
  body{
    background-color:var(--paper);
    background-image:var(--grain),var(--mottle);
    background-size:var(--grain-size);
    background-blend-mode:multiply,multiply;
  }
  .sec-light{background:transparent}
  /* no tint: a lighter wash on these was the last visible step at a boundary */
  .sec-card,.schedband{background:transparent}
  .sec-card{position:relative;isolation:isolate;overflow:hidden}

  /* ---------- vintage chart grounds ---------- */
  /* The page was two thirds navy by pixel height, with one unbroken 2,750px run of it
     through the case, the lake band and the carryout. These parchment chart sections
     break that run. The maps are masks, not images, for the same reason the engravings
     are: one asset, correct on parchment and on navy, following the theme. */
  .sec-chart{
    position:relative;isolation:isolate;overflow:hidden;
    color:var(--ink);
    background-color:transparent;
    background-image:
      radial-gradient(130% 100% at 16% 0%,rgba(255,255,255,.26),rgba(255,255,255,0) 64%),
      linear-gradient(var(--chart-wash),var(--chart-wash-2));
    --board-rule:var(--chart-rule);
    --board-soft:var(--ink-soft);
    --rule:var(--chart-rule);
    --dots:var(--chart-rule);
    --ink-faint:var(--chart-faint);
  }
  .chartmap{
    position:absolute;inset:0;z-index:-1;pointer-events:none;
    background-color:var(--chart-line);
    -webkit-mask:center/cover no-repeat;mask:center/cover no-repeat;
  }
  .chartmap.erie{-webkit-mask-image:var(--map-erie);mask-image:var(--map-erie)}
  .chartmap.harbor{-webkit-mask-image:var(--map-harbor);mask-image:var(--map-harbor)}
  .chartmap.streets{-webkit-mask-image:var(--map-streets);mask-image:var(--map-streets)}
  /* light grounds draw the charts in the muted taupe so the walls stay behind the text */
  .sec-chart > .chartmap,
  .sec-light > .chartmap{background-color:var(--chart-faint)}
  .sec-chart > .chartmap{opacity:.3}

  .sec-chart h2,.sec-chart h3{color:var(--ink)}
  .sec-chart .eyebrow{color:var(--eyebrow-chart)}
  .sec-chart .lead{color:var(--ink-soft)}
  .sec-chart .sides{color:var(--ink-soft)}
  .sec-chart .sides b{color:var(--ink)}
  .sec-chart .marketnote{color:var(--ink-soft)}
  .sec-card .marketnote{color:var(--ink-soft)}
  /* an engraving at full ink fights the chart underneath it */
  .sec-chart .sechead.marked .mark .art{opacity:.4}
  @media (max-width:700px){
    /* cover on a tall narrow section crops the chart to a sliver, so let it go quiet */
    .sec-chart > .chartmap{opacity:.18}
    .sec-light > .chartmap{opacity:.08}
    .sec-dark > .chartmap{opacity:.18}
  }
  @media (min-width:2000px){
    /* cover keeps scaling past the art's own detail on a wide panel: by 4K the chart is
       four faded words and every sounding and contour is cropped away. Fit the height
       instead and let it sit centred on the parchment, the way a chart hangs on a wall. */
    .chartmap{-webkit-mask-size:auto 100%;mask-size:auto 100%}
  }

  /* The ground for EVERY content page as of 2026-09-22: the lake photograph under a navy
     wash, with that page's chart engraved in cream over it. The charts alternate down the
     nav so no two pages in a row carry the same one -- Erie, harbour, streets, Erie,
     harbour, streets -- while the two that are about their page keep it: Erie on the lake
     catch, the Lorain street plan on Visit Us.

     THREE GROUNDS ARE NOW DEAD: .sec-chart (parchment), .sec-light (Visit Us's old ground)
     and .sec-card (Big Orders'). Nothing uses any of them, and .cardgrid.two above is dead
     too. All four are kept rather than deleted because each is a complete working treatment
     and this ground has been reversed once already. Say the word and they come out in one
     pass -- that is roughly 60 rules.

     on navy the same chart is engraved in cream: it lifts the board off flat #061C33.
     At .1 it was barely there. .28 against the deepened wash reads as a chart on the wall
     and still leaves the lead copy at 5.56:1 at the 95th percentile of the real ground --
     measured by hiding the copy, screenshotting, and sampling the pixels it sits on. */
  .sec-dark{position:relative;isolation:isolate;overflow:hidden}
  .sec-dark > .chartmap{background-color:var(--cream);opacity:.28}

  /* a light section gets the street plan as a watermark, not a ground */
  .sec-light{position:relative;isolation:isolate;overflow:hidden}
  .sec-light > .chartmap{opacity:.12}

  /* ---------- nautical ornaments ---------- */
  /* Art placeholders. The real engravings live in styles-art.css, which loads without
     blocking first paint. Every motif here is background-color plus a mask, so an
     undefined mask variable is not 'no art', it is a solid block the size of the
     element -- .chartmap alone would flood a whole section. These point at a fully
     transparent pixel instead, so until the art sheet lands the motifs occupy their
     space and paint nothing. styles-art.css is linked after this file, so it wins.

     Generated: scripts/inline_masks.py writes this block and the art sheet from the same
     name lists. Maintained by hand it drifted immediately -- four icons added 2026-09-22
     had no placeholder, so a stale art sheet painted four solid navy blocks. */
  /* PLACEHOLDERS:START - rewritten by scripts/inline_masks.py; keep the markers */
  :root{
    --m-anchor:url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
    --m-bell:url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
    --m-boat:url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
    --m-compass:url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
    --m-compass-rose:url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
    --m-lighthouse:url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
    --m-marlin:url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
    --m-rope-ring:url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
    --m-rope-wheel:url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
    --m-scallop:url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
    --m-wheel:url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
    --i-crab:url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
    --i-octopus:url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
    --i-mermaid:url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
    --i-fish:url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
    --i-shrimp:url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
    --i-scallop:url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
    --i-lobster:url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
    --i-bass:url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
    --map-erie:url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
    --map-harbor:url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
    --map-streets:url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
  }
  /* PLACEHOLDERS:END */

  /* Engravings are masks, not coloured images: they paint in currentColor, so the same
     asset is correct on parchment and on navy. Fixed-colour PNGs went half-invisible
     whenever the theme flipped, which read as the art being cut off. */
  .art{
    display:block;background-color:currentColor;
    -webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;
  }
  .art-anchor{-webkit-mask-image:var(--m-anchor);mask-image:var(--m-anchor);aspect-ratio:282/400}
  .art-bell{-webkit-mask-image:var(--m-bell);mask-image:var(--m-bell);aspect-ratio:166/420}
  .art-boat{-webkit-mask-image:var(--m-boat);mask-image:var(--m-boat);aspect-ratio:1265/760}
  .art-compass{-webkit-mask-image:var(--m-compass);mask-image:var(--m-compass);aspect-ratio:517/500}
  .art-compass-rose{-webkit-mask-image:var(--m-compass-rose);mask-image:var(--m-compass-rose);aspect-ratio:900/900}
  .art-lighthouse{-webkit-mask-image:var(--m-lighthouse);mask-image:var(--m-lighthouse);aspect-ratio:239/900}
  .art-marlin{-webkit-mask-image:var(--m-marlin);mask-image:var(--m-marlin);aspect-ratio:866/260}
  .art-rope-ring{-webkit-mask-image:var(--m-rope-ring);mask-image:var(--m-rope-ring);aspect-ratio:1400/69}
  .art-rope-wheel{-webkit-mask-image:var(--m-rope-wheel);mask-image:var(--m-rope-wheel);aspect-ratio:1400/94}
  .art-scallop{-webkit-mask-image:var(--m-scallop);mask-image:var(--m-scallop);aspect-ratio:431/400}
  .art-wheel{-webkit-mask-image:var(--m-wheel);mask-image:var(--m-wheel);aspect-ratio:400/400}

  .rope{
    height:34px;width:min(720px,100%);margin:0 auto;
    background-color:currentColor;opacity:.55;
    -webkit-mask:var(--m-rope-wheel) center/contain no-repeat;
    mask:var(--m-rope-wheel) center/contain no-repeat;
  }
  .rope.thin{
    height:22px;
    -webkit-mask-image:var(--m-rope-ring);
    mask-image:var(--m-rope-ring);
  }
  .rope.sep{margin-block:8px}

  /* compass watermark behind the hero */
  .hero .watermark{
    position:absolute;z-index:-1;pointer-events:none;color:var(--cream);
    right:4%;top:50%;transform:translateY(-50%);
    width:clamp(220px,24vw,420px);opacity:.13;
  }

  /* section head with an engraved mark on the right */
  .sechead.marked{display:grid;grid-template-columns:1fr;gap:18px;align-items:end}
  .sechead.marked .mark{display:none}
  @media (min-width:900px){
    .sechead.marked{grid-template-columns:1fr auto;gap:40px}
    .sechead.marked .mark{display:block;justify-self:end;align-self:center}
    .sechead.marked .mark .art{opacity:.62}
  }

  /* brass divider rules the menu bar; the logo's solid backdrop keeps it out of the lettering */
  nav{box-shadow:0 2px 0 var(--brass-line)}
  .menucard > h3{
    border-bottom:4px double var(--board-rule);
    display:flex;align-items:center;gap:10px;
  }
  .menucard > h3::before{
    content:"";flex:none;width:16px;aspect-ratio:282/400;
    background-color:currentColor;opacity:.7;
    -webkit-mask:var(--m-anchor) center/contain no-repeat;
    mask:var(--m-anchor) center/contain no-repeat;
  }
  .rule-head,.notice h3,.schedcard h3,.schedcard .sched-h{position:relative}
  .notice{border-width:1px;box-shadow:0 0 0 4px var(--card),0 0 0 5px var(--rule-hard)}
  /* the rule sits above, not inline, so the eyebrow text stays flush with the headline */
  .eyebrow::before{
    content:"";display:block;width:28px;height:2px;background:var(--brass-line);
    margin-bottom:11px;
  }

  /* the trawler riding the bottom of the lake band */
  .band .bandmark{
    position:absolute;z-index:-1;bottom:0;right:2%;color:#fff;
    width:clamp(220px,26vw,420px);opacity:.2;pointer-events:none;
  }

  /* ---------- viewport ladder: large laptop, ultrawide, TV ---------- */
  @media (min-width:1600px){
    :root{--maxw:1280px;--maxw-tight:1040px;--h1max:84px;--h2max:48px}
  }
  @media (min-width:2000px){
    :root{--maxw:1440px;--maxw-tight:1140px;--fs:17px;--h1max:92px;--h2max:54px}
    .photogrid{gap:14px}
    /* the 2000px-wide band art upscales soft past here */
    .hero::before{background-image:url("img/hero-counter-2x.jpg");
    background-image:image-set(url("img/hero-counter-2x.webp") type("image/webp"),url("img/hero-counter-2x.jpg") type("image/jpeg"))}
    .band.roots::before{background-image:url("img/band-corner-2x.jpg");
    background-image:image-set(url("img/band-corner-2x.webp") type("image/webp"),url("img/band-corner-2x.jpg") type("image/jpeg"))}
    .band.catch::before{background-image:url("img/sunset-waves-2x.jpg");
    background-image:image-set(url("img/sunset-waves-2x.webp") type("image/webp"),url("img/sunset-waves-2x.jpg") type("image/jpeg"))}
  }
  @media (min-width:2560px){
    :root{--maxw:1680px;--maxw-tight:1280px;--fs:18px;--h1max:104px;--h2max:62px}
    .shell,.shell-tight{padding-inline:32px}
    .hero .shell{padding-block:140px}
    section{padding-block:96px}
    .herowrap{max-width:820px}
    .hero .sub{font-size:22px}
  }
  @media (min-width:3200px){
    :root{--maxw:2000px;--maxw-tight:1480px;--fs:21px;--h1max:124px;--h2max:74px}
    .hero .shell{padding-block:180px}
    section{padding-block:120px}
    .herowrap{max-width:980px}
    .hero .sub{font-size:26px}
    .footgrid img.mark{height:60px}
  }


  /* ---------- scroll reveal ----------
     Only ever active under html.reveal, which the head script adds and which it refuses to
     add when IntersectionObserver is missing, motion is reduced, or ?reveal=off. Without the
     class every rule here is inert and the page is ordinary static HTML. That is deliberate:
     an animation that can strand a fish market's prices at opacity 0 is not worth having. */
  /* No will-change here. It was set on the base state, which meant all forty cards held a
     compositor layer from page load, each one carrying a blended background and a chart mask,
     and scrolling dropped frames. Chrome composites opacity and transform transitions on its
     own; the hint bought nothing and cost thirty-nine layers. */
  html.reveal [data-rv]{
    opacity:0;
    transform:translate3d(0,26px,0);
  }
  html.reveal [data-rv].rv-in{
    opacity:1;
    transform:none;
    transition:opacity .72s cubic-bezier(.22,.61,.36,1) var(--rv-d,0ms),
               transform .72s cubic-bezier(.22,.61,.36,1) var(--rv-d,0ms);
  }
  /* belt and braces: if the rule above is ever reached with motion reduced, show everything */
  @media (prefers-reduced-motion: reduce){
    html.reveal [data-rv]{opacity:1!important;transform:none!important;transition:none!important}
  }

  @media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

  .visually-hidden{
    position:absolute !important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden
  }
  .visually-hidden:focus{
    position:static;width:auto;height:auto
  }

  /* ---------- print: clean counter-sheet output ----------
     The roadmap calls for "print-friendly styling so any page prints as a clean
     counter sheet." These rules strip every decorative layer so the text and
     prices land on white paper exactly as the counter board reads. */
  @media print{
    html,body{background:none;background-image:none;background-color:#fff;color:#000;font-size:12pt;line-height:1.4}
    *{box-shadow:none!important;text-shadow:none!important}
    .topstrip,.navtoggle,.navphone,.heropill,.herobtns,.band,.bandbtns,.footbottom,.footline svg,
    footer .social,.rope,.watermark,.chartmap,.band .bandmark{display:none}
    nav,.schedband,.photogrid,.visitmark,.sechead .mark,
    .menucard > h3::before,.grphead h2::before,.grphead h3::before,.eyebrow::before{display:none}
    .hero{background:none;background-image:none;background-color:#fff;color:#000}
    .hero .shell{padding:0}
    .hero h1,.hero .sub,.hero .eyebrow,.band h2,.band p{display:block}
    h1,h2,h3,h4{color:#000}
    .sec-dark,.sec-chart,.sec-light,.sec-card{
      background:none;background-image:none;color:#000
    }
    .sec-dark h2,.sec-dark h3,.sec-dark .lead,.sec-dark .row .name{color:#000}
    .menucard{border:1px solid #000;background:none;padding:12px 8px}
    .menucard > h3{border-bottom:2px solid #000;padding-bottom:6px;margin-bottom:10px}
    .row{border-bottom:1px solid #000;padding:6px 0}
    .row .price{color:#000;font-weight:700}
    .row .price.market{color:#000;font-style:normal}
    .row .lead-dots{border-bottom:2px dotted #999}
    .row .desc,.row .unit{font-size:10pt;color:#333}
    .notice{border:1px solid #000;background:none;padding:12px;margin:12px 0}
    .hours td,.hours th{border-bottom:1px solid #000}
    .schedcard,.schedcard .tile,.schedcard .body{display:none}
    a{color:#000;text-decoration:none}
    .herowrap{max-width:none}
    .shell,.shell-tight{padding:0;max-width:none;margin:0}
    .tabscroll{overflow:visible;margin-inline:0}
    .tabgroup-cat{flex-wrap:wrap;overflow:visible;padding-inline:0}
    section{padding:0}
    h1{font-size:22pt;margin:0 0 10pt}
    h2{font-size:16pt;margin:0 0 10pt}
    h3{font-size:13pt;margin:0 0 8pt}
    .eyebrow,.lead,.sechead .eyebrow{display:none}
    p{margin:0 0 8pt;max-width:none}
    ul{margin:0 0 8pt;padding-left:0}
    li{margin:0 0 4pt}
    .catnote,.catnote2,.marketnote,.sides,.statusnote{display:none}
    .counterinfo{display:none}
  }

  /* ---------- price board type ----------
     Lifted from the shop's own printed boards (price-list/source-photos/IMG_3737-3743, 3782-3783), then put
     through the site's palette rather than copied literally. What the boards do:

       category header   red, BOLD ITALIC, all caps, a thin red rule under it
       item name         navy, bold, ALL CAPS, upright
       leader            dots out to the price
       qualifier         small red caps -- "8 OZ & UP", "XLARGE", "GALLON", "DRESSED"

     Two things this has to survive.

     The accent flips with the ground. --rust as small text is 3.66:1 on parchment and fails,
     so paper grounds get --rust-ink at 5.10:1; navy grounds would make that dark red
     unreadable, so they get --rust-hot at 4.86:1. --rust itself stays what it always was, the
     BACKGROUND of buttons and the status pill, where white on it passes. Three reds, three
     jobs, none interchangeable.

     And it has to sit at the END of the stylesheet. .sec-dark and .sec-chart already carry
     their own .menucard > h3 and .row .unit rules at higher specificity; written any earlier,
     this applied to some cards and not others and the boards looked half-converted. */
  /* Two lines, not five. The first attempt also set the accent on .menucard itself inside
     chart sections, and a variable set on the element beats one inherited from its section,
     so the chart boards came out with the navy-ground red on parchment at 2.19:1. Set it on
     the ground, let it inherit. */
  .sec-dark{--board-accent:var(--rust-hot)}



  /* ---------- lightbox panels ----------
     The shop's boards are backlit boxes: a warm white panel glowing brightest where the tubes
     sit behind it, recessed in a heavy dark frame, standing proud of the wall. Every price
     card is one of those now.

     The panel is warm white, not stark white. Fluorescent boxes behind acrylic go cream, and a
     pure #fff panel on aged parchment reads as a browser default rather than a sign.

     The paper stays the wall. Section grounds are still the one continuous parchment sheet;
     the cards sit ON it. That is why these are opaque while the sections are not, which
     reverses the transparency the continuous-sheet work set up -- on purpose, and only for
     the cards. */
  .menucard,.cardgrid.two{position:relative}
  /* The housing samples at #6D1915 in IMG_3782, which is what --maroon-deep is. It was
     picked before the palette moved off orange, when it had to be pushed away from an
     orange --rust-ink to read as frame metal rather than price text; now the whole accent
     family is maroon and the frame is simply the deepest value in it. One literal, so the
     board frame and the button hover cannot drift apart. */
  :root{--frame:var(--maroon-deep)}
  /* text sits on a lit panel now, so the dark-ground overrides have to come back off.
     The colours themselves are set in THE BOARDS block at the end of this file. */
  .sec-dark .menucard .row .desc,
  .sec-dark .menucard .row .unit{opacity:1}
  .sec-dark .menucard .row .desc{color:var(--ink-soft)}
  .sec-dark .menucard .row{border-bottom-color:var(--rule)}
  .sec-dark .menucard .row .lead-dots,
  .sec-chart .menucard .row .lead-dots{border-bottom-color:var(--dots)}
  .sec-dark .menucard .sides{color:var(--ink-soft)}
  .sec-dark .menucard .sides b{color:var(--ink)}
  /* A lit panel is ALWAYS a light ground, whatever section it is mounted on. So remap the
     dark-ground tokens once, here, instead of chasing each selector that used them: anything
     that meant "light text because the ground is navy" has to mean its dark-text equivalent
     inside a panel. Five things were washed out before this -- a group heading at 1.06:1, two
     notes at 1.71:1, a description at 3.82:1 and a Market price at 4.45:1 -- and every one of
     them came from a token, not from a rule of its own. */
  .menucard{
    /* .sec-dark sets color on the SECTION, which computes to cream there and inherits down
       into the panel as a plain rgb. Remapping --cream cannot undo that: the value was already
       resolved upstream. The panel has to state its own colour. */
    color:var(--ink);
    --board-accent:var(--rust-ink);
    --cream:var(--ink);
    --board-ink:var(--ink);
    --board-soft:var(--ink-soft);
    --board-rule:var(--rule-hard);
    /* --ink-faint is declared on .sec-chart as var(--chart-faint), so it computes up there
       and inherits down already resolved. Remapping --chart-faint alone does nothing; the
       panel has to set --ink-faint itself. Same trap as the inherited colour above. */
    --chart-faint:#6B6152;
    --ink-faint:#6B6152;
    --dots:#C0B49A;
    --rule:#DCD2BC;
  }
  /* --rust is a background colour elsewhere, so it is not remapped; Market prices are the one
     place it is used as text inside a panel, at 4.45:1. */
  .menucard .price.market{color:var(--rust-ink)}
  /* Group headings inside a panel get the same board treatment. h4 as well as h3: the Fresh
     Seafood board nests its categories as h4 and they were left in the display face, so that
     board alone looked unconverted. */
  .menucard h2,
  .menucard h3,
  .menucard h4{
    font-family:var(--body);font-weight:700;font-style:italic;
    letter-spacing:.13em;text-transform:uppercase;
    color:var(--board-accent);
  }
  /* the second tier is smaller and carries a hairline, not the full rule */
  .menucard h4{
    font-size:13.5px;letter-spacing:.14em;
    margin:18px 0 8px;padding-bottom:5px;
    border-bottom:1px solid var(--board-accent);
  }

  /* ---------- seamed boards: .cardgrid.two as one continuous frame ----------
     The physical board in Ray's photo is one red frame holding several white
     acrylic panels butted edge to edge -- Dinners | 2LB Buckets | Sandwiches |
     Surf-Sides is one sign, not four separate framed boxes with wall showing
     between them. Every page that lays cards out with .cardgrid.two (Ready to
     Cook x2, Prepared Favorites, Big Orders, Fresh Seafood's Cut/Clean/Prep)
     gets that same treatment: the OUTER frame -- border, corner radius, the
     stand-off shadow, the bolt row -- moves to the grid wrapper, and each
     .menucard inside it stops framing itself and becomes a seamed section.
     The seam itself is the oldest CSS grid trick there is: a small gap with
     the frame colour showing through it reads as a thin dividing rule, not a
     gap of page behind the sign. Because grid gap re-flows the same way in
     one column as it does in two, this needs no separate mobile case -- at
     the 860px breakpoint the two/three panels stack into a single column and
     the seams that were vertical become horizontal, which is exactly the
     tall single-board-with-a-crossbar look the stacked version should have.
     Verified at 400px on Ready to Cook and Big Orders (2x1 and 2x2 grids). */
  /* An odd panel count (Ready to Cook's Steamed board: three cards in two columns)
     otherwise leaves the last row's second cell empty -- just the frame colour showing
     through, since nothing sits there to seam against. Span the trailing lone card
     across both columns instead of leaving a bare maroon block. Harmless at the
     single-column breakpoint below 860px, where grid-column:1/-1 is already the only
     column there is. */
  .cardgrid.two .menucard:last-child:nth-child(odd){grid-column:1/-1}


  /* ---------- Ardick Ice ----------
     The shop's own ice sign, traced off the counter lightbox rather than set in a font. It
     is a logo, not one of the stock engravings, so it does not take the .4 watermark opacity
     the other section marks carry, and unlike them it stays on phones: it is the only thing
     on that page that says whose ice this is. Source art in brand/ice/. */
  .icemark{display:block;width:100%;max-width:330px;height:auto;margin-inline:auto}
  .sechead.marked.icehead .mark{display:block;order:-1;justify-self:center;margin-bottom:6px}
  .sec-chart .sechead.marked.icehead .mark .icemark{opacity:1}
  @media (min-width:900px){
    .sechead.marked.icehead .mark{order:0;justify-self:end;align-self:center;margin-bottom:0}
    .icemark{max-width:clamp(240px,23vw,340px)}
  }

  /* ---------- category grid ----------
     Wherever the single row cannot fit, the categories are a GRID rather than the sideways
     strip. The strip was measured at 390px and showed 2 of 9 categories at rest, and at
     1024px it still showed only 7 of 9: the things the shop sells sat behind a blind
     sideways swipe, on the one page whose job is showing what they sell. An edge cue tells
     you more exists; it does not tell you the shop has crab. A price board has to be
     readable without being operated.

     1159px is the real boundary, not the 900px touch breakpoint -- the nine buttons
     measure 1063px and the container reaches 1080px at 1160px of viewport. Tying this to
     900px left 901-1159px on the strip, hiding two categories on a small laptop.

     Two columns costs 244px on a phone against the strip's 44px and is worth every pixel.
     It needs no type changes: the widest button, "Dressed Fish, Boneless", renders at
     171px and a two-column cell at 390px is 172px. Narrower than that the label wraps and
     the grid keeps the rows even, which is the whole reason this is a grid and not a
     flex-wrap -- flex-wrap is what produced the five ragged rows this started from. */
  @media (max-width:1159px){
    .tabscroll{margin-inline:0}
    .tabgroup-cat{
      display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
      overflow:visible;scroll-snap-type:none;padding-inline:0;
    }
    .tabgroup-cat .casetab{
      width:100%;white-space:normal;line-height:1.25;text-align:center;padding-inline:8px;
    }
  }
  /* Above 600px let the row take as many columns as clear the widest label, so a tablet
     does not sit on two 270px pills each holding one short word. auto-fit is held back
     below 601px because at 320px it collapses to a single column and nine full-width
     rows, which is worse than two columns with one label wrapped. */
  @media (min-width:601px) and (max-width:1159px){
    .tabgroup-cat{grid-template-columns:repeat(auto-fit,minmax(172px,1fr))}
  }

  /* ---------- touch targets ----------
     The strip and footer links are inline text, so they were 17px tall: under the 44px
     minimum on the one action a fish market actually wants from a phone. Padding rather
     than font size, so nothing about the type changes. */
  @media (max-width:900px){
    .topstack a,
    .footline a,
    footer .social a{
      display:inline-flex;align-items:center;
      min-height:44px;
    }
    footer .social a{min-width:44px;justify-content:center}
    .navmark{min-height:44px;display:inline-flex;align-items:center}
    /* The board tabs are the one control the price pages exist for, and they sat at 34px.
       Padding only: the type and the pill proportions are unchanged above 900px. */
    .casetab{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  }

  /* ================================================================
     THE BOARDS
     ================================================================
     Ardick's menu boards are the shop. Everything else on this site is scaffolding
     around them, so from 2026-09-22 they are built as the object they are rather than
     as a card with a red border: a backlit acrylic lightbox in a glossy red aluminium
     extrusion, screwed to the wall, throwing light onto it.

     Measured off IMG_3782 rather than guessed. The housing samples at #6D1915, which is
     what --frame already was. The printed lettering samples at #7D1A23 red and #15224E
     navy, both read under dim shop fluorescents; the sign colours behind them are the
     brighter #C8202F and the brand navy, which is what the panel uses.

     The type system is the board's, not the site's, and it is the reverse of what this
     panel used to do:

       category head   NAVY, rounded bold italic, over a navy rule
       item name       RED, upright bold caps
       price           NAVY, with the cents raised the way a sign painter sets them
       qualifier       navy small caps

     Item names were navy and heads were red until now, which is backwards from every
     board in the shop. */

  :root{
    --sign-red:#C8202F;      /* item names. 5.30:1 on the lit panel, so it clears AA */
    --sign-navy:#0B2D4F;     /* heads and prices, 13.06:1 */
    --frame-w:15px;
  }

  /* ---------- the housing ----------
     One rule for both frame holders: a standalone .menucard frames itself, and a
     .cardgrid.two wrapper frames a run of seamed panels. They have to be identical
     objects or the pages look like two different signs.

     The extrusion is a bullnose -- a convex tube, not a flat bevel -- so the light
     reads as a highlight along the top roll and shadow down the bottom and sides. All
     four gradients are stopped in PIXELS at the border width, not percentages: a
     percentage stop spans the whole card and smears the roll across the panel instead
     of confining it to the frame. */
  .menucard,
  .cardgrid.two{
    border:var(--frame-w) solid transparent;
    border-radius:26px;
    box-shadow:
      0 0 0 1px rgba(0,0,0,.34),                 /* the extrusion's hard outer edge */
      0 22px 44px -16px rgba(26,16,6,.52),       /* it stands off the wall */
      0 0 72px -14px rgba(255,238,198,.55);      /* and the box throws light onto it */
  }
  .menucard{
    background:
      /* the lit acrylic, brightest where the tubes sit behind it */
      radial-gradient(128% 92% at 50% 24%,
        rgba(255,255,255,.99) 0%,
        rgba(255,253,247,.88) 40%,
        rgba(252,247,235,.66) 74%,
        rgba(246,239,222,.52) 100%) padding-box,
      linear-gradient(#FBF7EC,#FBF7EC) padding-box,
      /* the roll */
      linear-gradient(180deg,rgba(255,255,255,.52) 0,rgba(255,255,255,.10) 7px,rgba(255,255,255,0) var(--frame-w)) border-box,
      linear-gradient(180deg,rgba(255,255,255,0) 2px,rgba(255,255,255,.40) 4px,rgba(255,255,255,0) 9px) border-box,
      linear-gradient(0deg,rgba(0,0,0,.52) 0,rgba(0,0,0,0) var(--frame-w)) border-box,
      linear-gradient(90deg,rgba(0,0,0,.34) 0,rgba(0,0,0,0) var(--frame-w)) border-box,
      linear-gradient(270deg,rgba(0,0,0,.34) 0,rgba(0,0,0,0) var(--frame-w)) border-box,
      linear-gradient(180deg,#A82F2C 0%,#8C242A 52%,#6E1B22 100%) border-box;
    padding:26px 26px 22px;
  }

  /* ---------- screws ----------
     The real housing is screwed through the frame face top and bottom, not riveted
     along the bottom lip, which is where this used to draw them. A pale dome with a
     dark seat under it reads as a screw head at this size; anything more is noise. */
  .menucard::after,
  .cardgrid.two::after{
    content:"";
    position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background-image:
      radial-gradient(circle,rgba(255,236,214,.52) 0 1.5px,rgba(0,0,0,.34) 2.1px,transparent 2.7px),
      radial-gradient(circle,rgba(255,236,214,.52) 0 1.5px,rgba(0,0,0,.34) 2.1px,transparent 2.7px);
    background-size:132px 9px,132px 9px;
    background-position:center 3px,center calc(100% - 3px);
    background-repeat:repeat-x,repeat-x;
  }

  /* ---------- seamed runs ----------
     The wrapper holds the frame; the panels inside butt edge to edge with the frame
     colour showing through a 3px gap, the way the real sign's acrylic does.

     NOTE: nothing has used .cardgrid.two since the boards became tabbed on 2026-09-21 --
     one panel swaps in place instead of several sitting side by side. The housing is kept
     in step with .menucard anyway so a multi-panel run can come back without the two
     drifting into different signs, which is what happened the last time they were
     maintained separately. Delete both together or neither. */
  .cardgrid.two{
    background:
      linear-gradient(var(--frame),var(--frame)) padding-box,
      linear-gradient(180deg,rgba(255,255,255,.52) 0,rgba(255,255,255,.10) 7px,rgba(255,255,255,0) var(--frame-w)) border-box,
      linear-gradient(180deg,rgba(255,255,255,0) 2px,rgba(255,255,255,.40) 4px,rgba(255,255,255,0) 9px) border-box,
      linear-gradient(0deg,rgba(0,0,0,.52) 0,rgba(0,0,0,0) var(--frame-w)) border-box,
      linear-gradient(90deg,rgba(0,0,0,.34) 0,rgba(0,0,0,0) var(--frame-w)) border-box,
      linear-gradient(270deg,rgba(0,0,0,.34) 0,rgba(0,0,0,0) var(--frame-w)) border-box,
      linear-gradient(180deg,#A82F2C 0%,#8C242A 52%,#6E1B22 100%) border-box;
    gap:3px;
  }
  .cardgrid.two .menucard{
    border:none;border-radius:0;padding:24px 22px 20px;
    background:
      radial-gradient(128% 92% at 50% 24%,
        rgba(255,255,255,.99) 0%,
        rgba(255,253,247,.88) 40%,
        rgba(252,247,235,.66) 74%,
        rgba(246,239,222,.52) 100%),
      #FBF7EC;
    box-shadow:none;
  }
  .cardgrid.two .menucard::after{content:none}
  /* the panels are square-cut inside the housing, but the outermost corners follow it */
  .cardgrid.two .menucard:first-child{border-start-start-radius:11px;border-end-start-radius:11px}
  .cardgrid.two .menucard:last-child{border-start-end-radius:11px;border-end-end-radius:11px}

  /* ---------- the acrylic ----------
     Inset on the frame holder lands on the padding box, which is exactly where the
     panel starts, so the overhang shadow and the tube glow need no extra element. */
  .menucard{
    box-shadow:
      0 0 0 1px rgba(0,0,0,.34),
      0 22px 44px -16px rgba(26,16,6,.52),
      0 0 72px -14px rgba(255,238,198,.55),
      inset 0 3px 9px rgba(92,42,26,.30),        /* the frame overhangs the panel */
      inset 0 -2px 7px rgba(92,42,26,.18),
      inset 0 0 64px rgba(255,255,255,.88);      /* the tubes behind the acrylic */
  }
  .cardgrid.two .menucard{
    box-shadow:
      inset 0 3px 9px rgba(92,42,26,.26),
      inset 0 0 64px rgba(255,255,255,.88);
  }

  /* ---------- the board's lettering ----------
     The shop's boards are vinyl-cut, not hand-painted: item names are a plain bold
     grotesque and the category heads are a rounded bold oblique, which is what a sign
     shop had on the shelf in the nineties. Libre Franklin Bold covers the first; Nunito
     800 italic is the closest free face to the second and is the only font added for
     this. The hand-lettered work in this business is the ICE sign, not these boards --
     that one is traced, see the Ardick Ice block above. */
  .menucard{
    color:var(--ink);
    --board-accent:var(--sign-red);
  }
  .grphead h2,.grphead h3,
  .menucard > h3,
  .sec-dark .menucard > h3,
  .sec-chart .menucard > h3{
    font-family:"Nunito",var(--body);
    font-weight:800;font-style:italic;
    font-size:clamp(20px,2.2vw,26px);
    letter-spacing:.005em;text-transform:uppercase;
    color:var(--sign-navy);
    border-bottom:0;
    padding-bottom:0;margin:0 0 4px;
    line-height:1.05;
  }
  /* the rule under a category head is the board's, hairline and full width */
  .grphead{
    display:block;
    margin:0 0 14px;padding-bottom:0;
    border-bottom:0;
  }
  .grphead::after{
    content:"";display:block;height:2px;margin-top:7px;
    background:var(--sign-navy);
  }
  .grphead p{
    font-family:var(--body);font-weight:700;font-style:italic;
    font-size:12.5px;letter-spacing:.02em;text-transform:uppercase;
    color:var(--sign-navy);opacity:.92;
    margin:7px 0 0;text-align:center;max-width:none;
  }
  /* the board decal keeps its place at the head of the panel */
  .grphead h2::before,.grphead h3::before{
    width:var(--panel-icon-w,26px);
    margin-right:12px;opacity:.85;
    vertical-align:-2px;
  }

  .row .name,
  .sec-dark .row .name,
  .menucard .row .name{
    color:var(--sign-red);
    text-transform:uppercase;letter-spacing:.015em;font-weight:700;
    font-size:clamp(14.5px,1.35vw,16.5px);
  }
  .row .price,
  .sec-dark .row .price,
  .menucard .row .price{
    color:var(--sign-navy);
    font-weight:700;font-variant-numeric:tabular-nums;
    font-size:clamp(14.5px,1.35vw,16.5px);
  }
  /* Sign painters set the cents raised and underlined, never as ".00" on the line.
     rowHTML splits the price so this is real markup, not a text transform. */
  .row .price .cents{
    font-size:.62em;font-weight:700;
    vertical-align:.52em;margin-left:1px;
    text-decoration:underline;text-underline-offset:1px;
    text-decoration-thickness:1px;
  }
  .row .price.market,
  .sec-dark .row .price.market,
  .menucard .row .price.market{
    color:var(--sign-navy);font-style:italic;font-weight:700;
  }
  .row .unit,
  .sec-dark .row .unit,
  .menucard .row .unit{
    color:var(--sign-navy);opacity:.78;
    text-transform:uppercase;letter-spacing:.06em;font-weight:700;font-size:10.5px;
  }
  .row .desc,
  .menucard .row .desc{color:#4A5568;font-size:12.5px}
  /* The board has no dot leaders on the printed panels -- the eye tracks on the
     alignment. They stay only where the shop's own board uses them: nowhere, now. */
  .menucard .row .lead-dots{border-bottom:0}
  .menucard .row{border-bottom:0;padding:5px 0}
  .menucard .sides{
    font-size:12.5px;color:var(--sign-navy);opacity:.9;
    border-top:2px solid var(--sign-navy);margin-top:14px;padding-top:10px;
  }
  .menucard .sides b{color:var(--sign-red);opacity:1}

  /* ---------- the decal in the empty corner ----------
     Every panel on the real board carries one of the shop's decals in whatever space the
     prices left -- the crab under By The Pound, the octopus by Ahoy Mateys. The panel
     element takes the same ico- class as its heading so it can draw the same motif large
     and faint in its bottom corner. */
  .boardpanel{position:relative}
  .boardpanel > *{position:relative;z-index:1}
  .boardpanel::after{
    content:"";position:absolute;right:2px;bottom:0;z-index:0;
    width:clamp(58px,9vw,104px);aspect-ratio:var(--panel-icon-ar,356/400);
    background-color:var(--sign-navy);opacity:.13;
    -webkit-mask:var(--panel-icon,var(--i-fish)) center/contain no-repeat;
    mask:var(--panel-icon,var(--i-fish)) center/contain no-repeat;
    pointer-events:none;
  }
  @media (max-width:700px){.boardpanel::after{display:none}}

  /* ---------- Visit Us on the dark ground ----------
     Visit Us moved from .sec-light to .sec-dark on 2026-09-22 and three things on it were
     built for parchment and went invisible. None of them exist anywhere else on the site.

     The pattern is the one the lit panel already uses: a light card states its own colours
     whatever it is mounted on, and anything sitting directly on the navy takes a light
     equivalent. */

  /* The hours table sits bare on the ground -- no card -- so every ink token in it has to
     flip. The day names were --ink-soft at 1.63:1 and the closed rows --ink-faint at
     1.88:1; the today row was --link, which is the navy itself, at 1.22:1. */
  .sec-dark .hours th{color:var(--board-soft)}
  .sec-dark .hours td{color:var(--cream)}
  .sec-dark .hours th,.sec-dark .hours td{border-bottom-color:var(--board-rule)}
  .sec-dark .hours td.shut{color:var(--board-soft);opacity:.72}
  .sec-dark .hours tr.today th,
  .sec-dark .hours tr.today td{color:#fff;font-weight:700}

  /* "Call the Counter" is .btn.outline: --ink text on a --rule-hard border, 1.40:1 on navy */
  .sec-dark .btn.outline{color:var(--cream);border-color:rgba(255,255,255,.55)}
  .sec-dark .btn.outline:hover{border-color:#fff;background:rgba(255,255,255,.12)}

  /* The notice is a light card, so it keeps ink text -- but .sec-dark h3 was painting its
     heading cream on cream at 1.02:1, which read as the heading simply missing. */
  .sec-dark .notice{color:var(--ink)}
  .sec-dark .notice h3{color:var(--ink)}
  .sec-dark .notice p{color:var(--ink-soft)}
  .sec-dark .notice a{color:var(--link)}

  /* ---------- Visit Us needs a plate ----------
     Every other page puts its content on the lit board, so the chart behind it is
     obviously a wall. Visit Us has no board -- the hours, the address and the contact
     lines sit straight on the ground -- and once the photograph and chart went under it
     the street plan ran right through the text: COLORADO AVENUE, the compass rose and a
     survey star all crossing the columns.

     So the content block gets a plate. Deliberately NOT the maroon-framed lightbox: that
     frame means "this is one of the shop's price boards" everywhere else on the site, and
     this is not one. A plain deep-navy plate with a hairline, mounted on the same wall.

     It is translucent rather than solid so the chart still reads faintly through it and
     the page does not turn into a navy slab, and the blur is what actually kills the
     street grid under the text -- alpha alone leaves the lines legible. Where
     backdrop-filter is unsupported the alpha carries it on its own. */
  .visitlead{
    position:relative;
    background:linear-gradient(rgba(8,32,56,.86),rgba(6,24,44,.92));
    border:1px solid rgba(151,187,214,.20);
    border-radius:14px;
    padding:clamp(20px,2.6vw,38px);
    box-shadow:0 20px 44px -20px rgba(0,0,0,.60);
    -webkit-backdrop-filter:blur(3px);
    backdrop-filter:blur(3px);
  }
  /* the photo strip below needs no plate: each figure is already an opaque image */
  @media (max-width:640px){
    .visitlead{border-radius:10px;padding:18px 16px}
  }

  /* ---------- the photo slideshow ----------
     Nine photographs where three used to sit, in the same footprint. The hard constraint
     is that it takes no more room than the static grid it replaced: 235-343px in one row
     from 1024px up, and on a phone LESS, because three stacked figures were 767px and one
     slide is a quarter of that.

     It is a scroll-snap strip, not a JS carousel. The browser does the panning, the
     snapping and the momentum; the buttons only call scrollBy. That means it still works
     with JS off -- you can swipe or drag it -- and keyboard users get arrow-key scrolling
     from the focusable track for free.

     The controls are overlaid on the photographs rather than placed under them, which is
     the whole trick for the height budget: dots or a button row below would add 40-50px
     that the grid never used. */
  .photoshow{position:relative;margin-top:34px}
  .photoshow-track{
    display:flex;gap:12px;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    /* No scroll-behavior:smooth here. With it set in CSS the buttons moved the strip by
       nothing at all -- not a slower scroll, zero -- and even a direct scrollLeft
       assignment was swallowed. main.js asks for smooth on the scrollBy instead, which
       animates and, if the engine will not, still lands on the right frame. */
    /* the scrollbar would add height to the strip, and the footprint is the point */
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .photoshow-track::-webkit-scrollbar{display:none}
  .photoshow-track:focus-visible{outline:2px solid var(--brass-line);outline-offset:3px}
  .photoshow-track figure{
    margin:0;position:relative;overflow:hidden;background:var(--navy-deep);
    scroll-snap-align:start;
    flex:0 0 calc((100% - 24px) / 3);
  }
  .photoshow-track img{
    width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;filter:saturate(.8);
  }
  .photoshow-track figcaption{
    position:absolute;left:0;right:0;bottom:0;
    font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:#fff;background:linear-gradient(transparent,rgba(6,28,51,.9));padding:22px 10px 8px;
  }
  /* Two and then one across, matching what the old grid's auto-fit did at these widths.
     One-up on a phone is why this is shorter than what it replaced, not taller. */
  /* CONTAINER queries, not viewport ones, and that is not a stylistic preference.
     The grid this replaced used auto-fit/minmax(240px), which measures the CONTAINER. Any
     viewport breakpoint has to guess its way back through the shell's max-width, the
     plate's padding and the scrollbar -- a classic scrollbar sits outside the media-query
     viewport in Chrome, so a 1024px window evaluates at ~1009. A first attempt at 1023px
     dropped to two across exactly where the old grid still fitted three, and two wider 4:3
     figures are TALLER than three narrow ones: 122px over the footprint this is supposed
     to fit inside.

     The thresholds below are the old grid's own arithmetic, in the same units it used:
     three 240px tracks plus two 12px gaps is 744, two tracks plus one gap is 492. */
  .photoshow{container-type:inline-size}
  @container (max-width:743px){.photoshow-track figure{flex-basis:calc((100% - 12px) / 2)}}
  @container (max-width:491px){.photoshow-track figure{flex-basis:100%}}
  /* Pre-container-query browsers keep three across at every width. Cramped on a phone
     rather than broken, and every engine the site targets has supported this since 2023. */
  @supports not (container-type:inline-size){
    @media (max-width:999px){.photoshow-track figure{flex-basis:calc((100% - 12px) / 2)}}
    @media (max-width:700px){.photoshow-track figure{flex-basis:100%}}
  }

  .photoshow-nav{
    position:absolute;top:50%;transform:translateY(-50%);z-index:2;
    width:44px;height:44px;display:flex;align-items:center;justify-content:center;
    border:1px solid rgba(255,255,255,.45);
    background:rgba(6,24,44,.72);color:#fff;cursor:pointer;
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  }
  .photoshow-nav svg{width:18px;height:18px;fill:currentColor}
  .photoshow-nav:hover{background:var(--rust);border-color:var(--rust)}
  .photoshow-nav:focus-visible{outline:2px solid var(--brass-line);outline-offset:2px}
  .photoshow-nav.prev{left:8px}
  .photoshow-nav.next{right:8px}
  .photoshow-nav[disabled]{opacity:0;pointer-events:none}
  @media print{.photoshow-nav{display:none}}

  /* The pause control. WCAG 2.2.2: anything that starts moving on its own and runs past
     five seconds needs a way to stop it, and hover-to-pause does not count -- it does
     nothing for touch or for a keyboard. Overlaid in the top corner for the same reason
     the arrows are overlaid: a control row underneath would add height, and the whole
     brief was that this fits the old three-photo footprint.

     It ships hidden and main.js reveals it, so with JS off there is no dead button next
     to a strip that is not auto-scrolling anyway. */
  .photoshow-play{
    position:absolute;top:8px;right:8px;z-index:3;
    width:44px;height:44px;display:flex;align-items:center;justify-content:center;
    border:1px solid rgba(255,255,255,.45);
    background:rgba(6,24,44,.72);color:#fff;cursor:pointer;
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  }
  .photoshow-play svg{width:16px;height:16px;fill:currentColor}
  .photoshow-play:hover{background:var(--rust);border-color:var(--rust)}
  .photoshow-play:focus-visible{outline:2px solid var(--brass-line);outline-offset:2px}
  .photoshow-play .i-play{display:none}
  .photoshow-play[data-playing="false"] .i-pause{display:none}
  .photoshow-play[data-playing="false"] .i-play{display:block}
  @media print{.photoshow-play{display:none}}

  /* ---------- the pick board (home) ----------
     Ray's reference: a white board with a row of navy icons under short labels, split by
     hairline rules, each one a way into the shop. Built on .menucard so it is the same lit
     panel in the same maroon housing as every price board -- this is the home page saying
     "here are the boards", so it should BE a board.

     Every tile is a link to the page it names. Nothing here is decorative. */
  /* A plain div, NOT a <nav>. The site header is styled on the bare tag -- nav{height:
     clamp(77px,8.1vw,91px)} above 900px -- so any nav anywhere on the page gets clamped to
     the header's height. As a nav this board came out 91px tall with 170px tiles hanging
     out the bottom of it. The stylesheet already carries a .subnav reset for exactly this;
     a second landmark next to the real one was not worth having anyway. */
  .pickboard{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0;
    padding:0;
  }
  .pick{
    display:flex;flex-direction:column;align-items:center;text-align:center;
    gap:6px;padding:26px 14px 22px;
    text-decoration:none;color:var(--sign-navy);
    border-left:1px solid var(--chart-rule);
    transition:background .16s ease;
  }
  .pick:first-child{border-left:0}
  /* One box, mask centred and contained inside it. The decals run from 0.83:1 (lobster)
     to 2.63:1 (the bass), so sizing them all to a common WIDTH leaves the bass a sliver
     and sizing them to a common HEIGHT leaves it three times wider than its neighbours.
     A fixed box with contain lets each one fill whichever dimension binds, which is what
     makes a row of different creatures look like one set. */
  .pick-icon{
    display:block;width:clamp(72px,6vw,96px);height:clamp(44px,3.6vw,58px);
    background-color:var(--sign-navy);
    -webkit-mask:var(--panel-icon,var(--i-fish)) center/contain no-repeat;
    mask:var(--panel-icon,var(--i-fish)) center/contain no-repeat;
  }
  .pick-name{
    font-family:var(--body);font-weight:700;text-transform:uppercase;
    font-size:13px;letter-spacing:.06em;line-height:1.25;
  }
  .pick-note{
    font-size:11.5px;line-height:1.35;color:var(--sign-navy);opacity:.72;
    max-width:18ch;
  }
  .pick:hover,.pick:focus-visible{background:rgba(140,39,51,.08)}
  .pick:focus-visible{outline:2px solid var(--rust);outline-offset:-2px}
  .pick:hover .pick-name{color:var(--sign-red)}

  /* Four across, then two. The rules have to follow the wrap, so the first tile in each
     visual row loses its left border -- nth-child per breakpoint, since a grid gives no
     "first in row" selector. */
  @media (max-width:900px){
    .pickboard{grid-template-columns:repeat(2,minmax(0,1fr))}
    .pick{border-left:1px solid var(--chart-rule)}
    .pick:nth-child(2n+1){border-left:0}
    .pick:nth-child(n+3){border-top:1px solid var(--chart-rule)}
  }
  @media (max-width:700px){
    .pick{padding:20px 10px 18px}
  }

  /* ---------- the ice band (home) ----------
     Ice is a business line of its own -- wholesale to events across the county, to the
     charter boats and to anyone heading out on the lake -- and it has its own sign, so it
     gets its own band and the sign carries it.

     Flat navy, not a photograph like the other two bands. The mark is the whole point of
     this one and a sunset behind it would just be noise. */
  .band.ice{background:var(--navy-deep)}
  .band.ice::before,.band.ice::after{content:none}
  .icelink{
    display:block;width:fit-content;margin:0 auto 20px;
    /* it is the shop's own sign, so it is the link as well as the picture */
    text-decoration:none;
  }
  .icelink img{
    display:block;width:100%;max-width:clamp(240px,34vw,420px);height:auto;
  }
  .icelink:hover img,.icelink:focus-visible img{opacity:.88}
  .icelink:focus-visible{outline:2px solid var(--brass-line);outline-offset:6px}

  .boardpanel:focus-visible{outline:3px solid var(--harbor);outline-offset:6px}
  @media (max-width:600px){
    .topstrip .shell > span:first-child{display:none}
    #fresh,#ready,#prepared,#bigorders,#ice{padding-block:28px}
    .sechead.marked{gap:0;margin-bottom:18px}
    .sechead.marked h1{font-size:30px;line-height:1.1;margin-bottom:12px}
    .sechead.marked .eyebrow{margin-bottom:10px}
    .sechead.marked .lead{font-size:15px;line-height:1.5;margin-bottom:0}
    .casetabs{margin-bottom:12px}
    .catnote{margin-bottom:12px;font-size:13px}
    .hero::after{background:linear-gradient(100deg,rgba(6,28,51,.92),rgba(6,28,51,.78))}
  }

  .menu-static{padding:0 0 24px}
  .menu-static + .menu-static{border-top:1px solid var(--rule);padding-top:24px}