/* ===========================================================================
   The Tin Fish — design tokens

   Palette: the restaurant's own brand colours, taken from the live site —
   cobalt blue (#003E8F), gold (#C2912B), ice blue (#B4D5FF), charcoal and
   gray — plus the room itself: the deep navy of the blue resin bar top, the
   chalkboard behind the counter, the chalk, and the butcher paper the fish
   comes wrapped in.

   Type, all self-hosted (no Google request): Big Shoulders Display for the
   tall tin-sign headlines, Mukta (their site's own MuktaMahee family) for
   reading, and on the boards the restaurant's two chalk faces.

   Never name a token after one of Elementor's own custom properties (--gap,
   --width, --container-*, --flex-* …): Elementor 4 resets those to `initial`
   on every element, and a theme token with the same name silently dies inside
   page content. build.py checks the list.
   =========================================================================== */

@font-face{font-family:"Tin Fish Display";src:url("../fonts/big-shoulders.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Tin Fish Text";src:url("../fonts/mukta-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Tin Fish Text";src:url("../fonts/mukta-700.woff2") format("woff2");font-weight:600 800;font-style:normal;font-display:swap}
/* chalk capitals: the face has capitals and figures only — always uppercase */
@font-face{font-family:"Tin Fish Chalk";src:url("../fonts/chalk-hand.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0020-0060,U+2013,U+2014,U+2019}
@font-face{font-family:"Tin Fish Script";src:url("../fonts/chalkvibes.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  /* ---------------------------------------------------------------- colour */
  --cobalt:#003E8F;        /* brand blue: the logo, links, the primary dark */
  --cobalt-hi:#2A63B5;
  --navy:#06204A;          /* the resin bar top at night */
  --navy-2:#0B2D62;
  --abyss:#031331;
  --gold:#C2912B;          /* brand gold */
  --gold-hi:#E3B65A;
  --gold-lo:#9A7020;
  --brass:#7E5A12;         /* gold that reads on paper (AA for text) */
  --ice:#B4D5FF;           /* brand ice blue */
  --ice-hi:#DCEBFF;
  --foam:#EEF5FF;
  --charcoal:#1D1E20;
  --gray:#3E3F41;
  --paper:#F6F2EA;         /* butcher paper */
  --paper-2:#ECE4D4;
  --white:#FFFFFF;

  --text:#1D1E20;
  --text-2:#3E3F41;
  --muted:#5E6167;
  --on-dark:#EAF1FB;
  --on-dark-2:#BFD0E8;
  --on-dark-3:#8FA6C8;

  --line:rgba(29,30,32,.13);
  --line-strong:rgba(29,30,32,.28);
  --line-dark:rgba(180,213,255,.16);
  --line-dark-strong:rgba(180,213,255,.42);

  --slate:#1E2724;         /* the chalkboards */
  --slate-2:#27322E;
  --chalk:#F4F1E8;
  --chalk-2:rgba(244,241,232,.74);
  --chalk-3:rgba(244,241,232,.5);
  --chalk-y:#F3D985;       /* yellow chalk: prices */
  --chalk-b:#A9CDFF;       /* blue chalk */
  --wood:#5A3920;

  --open:#5FD08A;
  --closed:#F08A6E;

  /* ------------------------------------------------------------------ type */
  --font-display:"Tin Fish Display", "Big Shoulders Display", "Oswald", "Arial Narrow", Impact, sans-serif;
  --font-text:"Tin Fish Text", "Mukta", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-chalk:"Tin Fish Chalk", "Tin Fish Display", "Arial Narrow", sans-serif;
  --font-script:"Tin Fish Script", "Bradley Hand", "Segoe Print", cursive;

  --fs-body:clamp(1rem, .96rem + .2vw, 1.0938rem);
  --fs-small:.9rem;
  --fs-lede:clamp(1.12rem, 1.02rem + .45vw, 1.38rem);
  --fs-kicker:.8rem;
  --fs-script:clamp(1.55rem, 1.2rem + 1.4vw, 2.35rem);
  --fs-h3:clamp(1.5rem, 1.3rem + .8vw, 2rem);
  --fs-h2:clamp(2.35rem, 1.6rem + 3vw, 4.2rem);
  --fs-h1:clamp(2.9rem, 1.7rem + 4.8vw, 5.9rem);
  --fs-hero:clamp(3.1rem, 1.4rem + 6.6vw, 7.6rem);
  --lh-display:.94;

  /* ---------------------------------------------------------------- layout */
  --container:1240px;
  --narrow:880px;
  --gutter:clamp(1.15rem, .55rem + 2.4vw, 2.5rem);
  --section-y:clamp(4.25rem, 2.8rem + 5vw, 7.75rem);
  --section-y-tight:clamp(3rem, 2.1rem + 3vw, 4.75rem);
  --tf-gap:clamp(1.1rem, .8rem + 1vw, 1.75rem);
  --edge-h:clamp(26px, 1rem + 2.4vw, 56px);
  /* how far the home page's facts card rises into the hero */
  --facts-lift:clamp(2.75rem, 2rem + 2.5vw, 4.25rem);
  --topbar-h:38px;
  --header-h:84px;
  --chrome-h:calc(var(--topbar-h) + var(--header-h));

  --r-sm:4px;
  --r:10px;
  --r-lg:18px;
  --pill:999px;

  --shadow-1:0 1px 2px rgba(3,19,49,.08), 0 12px 28px -16px rgba(3,19,49,.35);
  --shadow-2:0 2px 6px rgba(3,19,49,.1), 0 34px 70px -32px rgba(3,19,49,.7);
  --shadow-board:0 2px 0 rgba(255,255,255,.08) inset, 0 30px 60px -28px rgba(0,0,0,.8), 0 10px 20px -12px rgba(0,0,0,.55);
  --ease:cubic-bezier(.2,.7,.2,1);

  /* -------------------------------------------------------------- textures */
  --tx-slate:url("../img/slate.webp");
  --tx-wood:url("../img/wood.webp");
  --tx-resin:url("../img/marble.webp");
  --tx-chart:url("../img/chart-lines.svg");
  --tx-fish:url("../img/fish-white.png");
  --tx-tin-dark:url("../img/tin-dark.webp");
  --tx-school:url("../img/contact-school.webp");
  --tx-rule:url("../img/chalk-rule.webp");
  --tx-grunge:url("../img/grunge-blue.webp");
  --tx-footer-fish:url("../img/footer-fish.webp");
  /* butcher-paper fibre, drawn: no request */
  --tx-paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .18 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  /* the swell: long water lines, for foam and navy grounds */
  --tx-swell:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='96' viewBox='0 0 480 96'%3E%3Cpath d='M0 24c40 0 40-12 80-12s40 12 80 12 40-12 80-12 40 12 80 12 40-12 80-12 40 12 80 12M0 72c40 0 40-12 80-12s40 12 80 12 40-12 80-12 40 12 80 12 40-12 80-12 40 12 80 12' fill='none' stroke='%23003E8F' stroke-opacity='.07' stroke-width='1.6'/%3E%3C/svg%3E");
  --tx-swell-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='96' viewBox='0 0 480 96'%3E%3Cpath d='M0 24c40 0 40-12 80-12s40 12 80 12 40-12 80-12 40 12 80 12 40-12 80-12 40 12 80 12M0 72c40 0 40-12 80-12s40 12 80 12 40-12 80-12 40 12 80 12 40-12 80-12 40 12 80 12' fill='none' stroke='%23B4D5FF' stroke-opacity='.07' stroke-width='1.6'/%3E%3C/svg%3E");
  /* the tide line: a wave edge as a mask (black = kept), and the line of
     foam that runs just inside it. Both ends sit level at the same height,
     so the wave tiles without a seam. */
  --wave-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='60' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V40C1325 40 1325 18 1210 18C1085 18 1085 44 960 44C830 44 830 12 700 12C565 12 565 46 430 46C315 46 315 16 200 16C100 16 100 40 0 40Z'/%3E%3C/svg%3E");
  --wave-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='60' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60H1440V20C1325 20 1325 42 1210 42C1085 42 1085 16 960 16C830 16 830 48 700 48C565 48 565 14 430 14C315 14 315 44 200 44C100 44 100 20 0 20Z'/%3E%3C/svg%3E");
  --foam-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='60' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 34C100 34 100 10 200 10C315 10 315 40 430 40C565 40 565 6 700 6C830 6 830 38 960 38C1085 38 1085 12 1210 12C1325 12 1325 34 1440 34' fill='none' stroke='%23DCEBFF' stroke-opacity='.6' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --foam-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='60' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 26C100 26 100 50 200 50C315 50 315 20 430 20C565 20 565 54 700 54C830 54 830 22 960 22C1085 22 1085 48 1210 48C1325 48 1325 26 1440 26' fill='none' stroke='%23DCEBFF' stroke-opacity='.6' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

@media (max-width:1024px){
  :root{ --header-h:72px; }
}
@media (max-width:767px){
  :root{ --topbar-h:0px; --header-h:64px; }
}