/* Webfonts. NOTE: no original CopenRoss font binaries were supplied.
   These are Google Fonts substitutions chosen to match the logo's rugged heritage slab
   character. Swap the 1&family=Barlow+Condensed:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap");
/* Display-font CANDIDATES (Oct 2026). The owner found Bevan too "pudgy" and asked for a leaner,
   sharper heading face. These three are under review; Bevan stays the default token until one is chosen.
   The logo artwork is unaffected. Suggested tuning when used as --font-display (multiply heading sizes
   by the scale, line-heights by lh):
     Big Shoulders Display 800  scale 1.42  lh 0.90  letter-spacing 0.015em   (prototype default)
     Oswald 700                 scale 1.20  lh 0.96  letter-spacing 0.01em
     Zilla Slab 700             scale 1.14  lh 0.95  letter-spacing 0
     Bevan 400 (current)        scale 1.00  lh 1.00  letter-spacing normal */
900&family=Oswald:wght@600;700&family=Zilla+Slab:wght@700&display=swap");
:root{
  --font-display:"Bevan","Bitter",Georgia,serif;
  --font-display-candidate-big-shoulders:"Big Shoulders Display","Arial Narrow",sans-serif;
  --font-display-candidate-oswald:"Oswald","Arial Narrow",sans-serif;
  --font-display-candidate-zilla-slab:"Zilla Slab",Georgia,serif;
  --font-condensed:"Barlow Condensed","Oswald","Arial Narrow",sans-serif;
  --font-body:"Source Serif 4","Iowan Old Style",Georgia,serif;
  --font-brand-wordmark:var(--font-display);
}

/* CopenRoss House — color tokens.
   The house brand (restaurant + site) and the Veterans Thanksgiving event share one palette.
   House surfaces use brown / kraft / cream / rust / mustard / press red.
   Navy and forest are reserved: navy = event-only veteran note; forest = the one callout band. */
:root{
  /* ---- Host brand colors, lifted verbatim from copenross.com (Square Online theme config) ---- */
  --cr-brand-primary:#635454;  /* site primaryColor + PWA theme-color */
  --cr-brand-gold:#E0BF5E;     /* site secondary --color-secondary-BJjkrO, used on buttons */
  --cr-brand-red:#742929;      /* site secondary --color-secondary-weHJkG */
  --cr-logo-ink:#563A22;       /* measured from the wordmark artwork */

  /* ---- Base palette: brown (from the CopenRoss wordmark, #563A22) ---- */
  --brown-950:#1E120A;
  --brown-900:#2B1A0F;
  --brown-800:#3B2415;
  --brown-700:#563A22; /* logo ink */
  --brown-600:#6E4B2E;
  --brown-500:#8A6440;
  --brown-300:#B79571;

  /* ---- Letterpress accent layer (2026 identity refresh, Direction C) ---- */
  --press-red-600:#8F1E18;
  --press-red-500:#B3271F; /* the one loud printer's red */
  --press-red-400:#C6362B;
  --mustard-500:#D9A32B;
  --mustard-400:#E4B84E;
  --kraft-200:#EDE0C6;

  /* ---- Warm neutrals: cream + parchment ---- */
  --cream-050:#FBF4E3;
  --cream-100:#F4EAD5;
  --parchment-200:#E9DBBE;
  --parchment-300:#D9C6A2;
  --parchment-400:#C2AA82;

  /* ---- Accents ---- */
  --rust-600:#8C3A22;
  --rust-500:#A9482A;
  --rust-400:#BE5A38;
  --orange-500:#C4762E;
  --orange-400:#D89346;
  --orange-300:#E7B475;
  --gold-500:#B0863A;

  --forest-800:#22352A;
  --forest-700:#2E4636;
  --forest-600:#3D5B45;

  --navy-800:#1C3350;
  --navy-700:#2A4568;

  --burgundy-700:#6B2434;
  --burgundy-600:#83303F;

  /* ---- Semantic surfaces ---- */
  --surface-page:var(--kraft-200);
  --surface-page-alt:var(--cream-050);
  --surface-card:var(--cream-050);
  --surface-raised:#FFFDF6;
  --surface-inverse:var(--brown-900);
  --surface-inverse-alt:var(--brown-800);
  --surface-forest:var(--forest-700);
  --surface-navy:var(--navy-800);
  --surface-rust:var(--rust-500);
  --surface-red:var(--press-red-500);
  --surface-kraft:var(--kraft-200);

  /* ---- Semantic text ---- */
  --text-heading:var(--brown-900);
  --text-body:var(--brown-800);
  --text-muted:var(--brown-600);
  --text-subtle:var(--brown-500);
  --text-on-dark:var(--cream-100);
  --text-on-dark-muted:var(--parchment-300);
  --text-accent:var(--press-red-600);
  --text-link:var(--press-red-600);
  --text-link-hover:var(--brown-900);

  /* ---- Semantic lines + accents ---- */
  --line-hairline:rgba(86,58,34,.22);
  --line-rule:var(--brown-700);
  --line-rule-on-dark:rgba(244,234,213,.32);
  --accent-primary:var(--press-red-500);
  --accent-primary-strong:var(--press-red-600);
  --accent-primary-soft:rgba(179,39,31,.24);
  --accent-secondary:var(--mustard-500);
  --accent-veteran:var(--navy-800);
  --accent-harvest:var(--mustard-500);
  --accent-warm:var(--rust-500);
  --accent-evergreen:var(--forest-700);

  /* ---- House roles (site redesign 2026) ---- */
  --house-header-bg:var(--brown-900);   /* woodgrain masthead */
  --house-header-rule:var(--mustard-500); /* 3px rule under header + above footer */
  --house-nav-active:var(--mustard-500); /* 2px underline on the current nav item */
  --house-band-dark:var(--brown-950);    /* utility bar, proof bar, footer */
  --house-section-rule:var(--rust-500);  /* 3px short rule under section titles; tap/info card top rule */
  --house-step-rule:var(--mustard-500);  /* top rule on help-step cards */
  --house-callout:var(--forest-700);     /* one per page max */
  --house-price:var(--accent-primary-strong);

  /* ---- Status (event context: open / closing / full) ---- */
  --status-open:var(--forest-600);
  --status-attention:var(--mustard-500);
  --status-urgent:var(--press-red-600);
}

:root{
  /* Display scale — poster / hero type. Values are the printed flyer scale. */
  --fs-display-1:clamp(56px,9vw,132px); /* @kind font */
  --fs-display-2:clamp(40px,6.5vw,88px); /* @kind font */
  --fs-display-3:clamp(30px,4.4vw,60px); /* @kind font */
  --fs-headline:34px; /* @kind font */
  --fs-title:26px; /* @kind font */
  --fs-subtitle:21px; /* @kind font */
  --fs-body-lg:18px; /* @kind font */
  --fs-body:16px; /* @kind font */
  --fs-body-sm:14px; /* @kind font */
  --fs-caption:12.5px; /* @kind font */
  --fs-eyebrow:12px; /* @kind font */
  --fs-micro:10.5px; /* @kind font */

  --lh-display:0.92; /* @kind font */
  --lh-tight:1.08; /* @kind font */
  --lh-snug:1.28; /* @kind font */
  --lh-body:1.55; /* @kind font */
  --lh-loose:1.7; /* @kind font */

  --ls-display:0.01em; /* @kind font */
  --ls-eyebrow:0.22em; /* @kind font */
  --ls-label:0.10em; /* @kind font */
  --ls-body:0; /* @kind font */

  --fw-body:400; /* @kind font */
  --fw-medium:500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:700; /* @kind font */

  /* Semantic roles */
  --type-hero-family:var(--font-display); /* @kind font */
  --type-heading-family:var(--font-display); /* @kind font */
  --type-detail-family:var(--font-condensed); /* @kind font */
  --type-body-family:var(--font-body); /* @kind font */
  --type-eyebrow-family:var(--font-condensed); /* @kind font */
}

:root{
  --space-0:0;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:44px;
  --space-8:60px;
  --space-9:80px;
  --space-10:112px;

  /* Layout */
  --container-site:1240px; /* @kind spacing */
  --header-height:96px; /* @kind spacing */
  --utility-height:36px; /* @kind spacing */
  --gutter-page:40px; /* @kind spacing */
  --gutter-page-print:0.55in; /* @kind spacing */
  --measure-body:66ch; /* @kind spacing */
  --measure-narrow:46ch; /* @kind spacing */
  --stack-tight:var(--space-2); /* @kind spacing */
  --stack-default:var(--space-4); /* @kind spacing */
  --stack-section:var(--space-8); /* @kind spacing */
}

:root{
  /* Heritage print system: mostly square. Radii are small and deliberate. */
  --radius-none:0;
  --radius-sm:2px;
  --radius-md:4px;
  --radius-lg:8px;
  --radius-pill:999px;

  --border-hairline:1px solid var(--line-hairline); /* @kind other */
  --border-ink:1.5px solid var(--brown-700); /* @kind other */
  --border-ink-heavy:3px solid var(--brown-800); /* @kind other */
  --border-rule-double:3px double var(--brown-700); /* @kind other */
  --border-on-dark:1.5px solid var(--line-rule-on-dark); /* @kind other */

  --keyline-inset:0 0 0 1px var(--line-hairline) inset; /* @kind other */
  --keyline-letterpress:0 0 0 1.5px var(--brown-700), 0 0 0 4.5px var(--cream-050), 0 0 0 6px var(--brown-700); /* @kind other */
}

:root{
  /* Ink-on-paper, not glassy UI. Shadows are warm, tight and low-opacity. */
  --shadow-none:none;
  --shadow-press:0 1px 0 rgba(43,26,15,.28);
  --shadow-card:0 1px 2px rgba(43,26,15,.10),0 6px 16px -6px rgba(43,26,15,.18);
  --shadow-raised:0 2px 4px rgba(43,26,15,.12),0 14px 30px -10px rgba(43,26,15,.26);
  --shadow-poster:0 24px 60px -18px rgba(43,26,15,.45);
  --shadow-hard-red:8px 8px 0 var(--press-red-500);
  --shadow-hard-red-sm:5px 5px 0 var(--press-red-500);
  --shadow-hard-ink:8px 8px 0 var(--brown-900);
  --shadow-inner-paper:inset 0 0 42px rgba(86,58,34,.10);
  --shadow-letterpress-text:0 1px 0 rgba(251,246,234,.35);
}

:root{
  /* Kraft / parchment grain built from layered gradients — no image dependency. */
  --texture-grain:
    radial-gradient(circle at 18% 22%,rgba(86,58,34,.055) 0 1px,transparent 1.6px),
    radial-gradient(circle at 62% 68%,rgba(86,58,34,.045) 0 1px,transparent 1.6px),
    radial-gradient(circle at 84% 34%,rgba(86,58,34,.05) 0 1px,transparent 1.6px); /* @kind other */
  --texture-grain-size:7px 7px,11px 11px,13px 13px; /* @kind other */
  --texture-paper:
    radial-gradient(115% 85% at 50% 0%,rgba(255,253,246,.85),transparent 62%),
    radial-gradient(110% 90% at 12% 100%,rgba(194,170,130,.28),transparent 60%); /* @kind other */
  --texture-woodgrain:
    repeating-linear-gradient(90deg,rgba(30,18,10,.10) 0 2px,rgba(30,18,10,0) 2px 9px),
    repeating-linear-gradient(90deg,rgba(30,18,10,.05) 0 1px,rgba(30,18,10,0) 1px 23px); /* @kind other */
  --texture-hatch:repeating-linear-gradient(45deg,rgba(86,58,34,.10) 0 1px,transparent 1px 6px); /* @kind other */
  --overlay-warm-scrim:linear-gradient(to top,rgba(30,18,10,.88) 0%,rgba(30,18,10,.55) 45%,rgba(30,18,10,.12) 100%); /* @kind other */
  --overlay-protection-top:linear-gradient(to bottom,rgba(30,18,10,.72),rgba(30,18,10,0)); /* @kind other */
}

:root{
  --dur-instant:80ms; /* @kind other */
  --dur-fast:140ms; /* @kind other */
  --dur-base:220ms; /* @kind other */
  --dur-slow:420ms; /* @kind other */
  --ease-standard:cubic-bezier(.2,.6,.2,1); /* @kind other */
  --ease-out-soft:cubic-bezier(.16,.84,.44,1); /* @kind other */
  --ease-in-out:cubic-bezier(.5,.05,.5,.95); /* @kind other */
  --motion-lift:translateY(-1px); /* @kind other */
  --motion-press:translateY(1px); /* @kind other */
}

/* Responsive layout helpers. Components set gap/padding inline; these classes only own
   column counts + breakpoints so pages reflow without per-component media queries. */
.cr-container{width:100%;max-width:var(--container-site);margin:0 auto;padding-left:var(--gutter-page);padding-right:var(--gutter-page);box-sizing:border-box}
.cr-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.cr-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.cr-grid-5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.cr-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.cr-split-rev{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.cr-split-even{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.cr-feature{display:grid;grid-template-columns:280px minmax(0,1fr)}
.cr-menu-btn{display:none !important}
@media (max-width:960px){
  .cr-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cr-grid-5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cr-split,.cr-split-rev,.cr-split-even,.cr-feature{grid-template-columns:minmax(0,1fr)}
  .cr-nav{display:none !important}
  .cr-menu-btn{display:inline-flex !important}
  .cr-hide-md{display:none !important}
}
@media (max-width:640px){
  :root{--gutter-page:20px;--header-height:76px}
  .cr-grid-2,.cr-grid-3{grid-template-columns:minmax(0,1fr)}
  .cr-grid-5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cr-hide-sm{display:none !important}
}

html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--type-body-family);font-size:var(--fs-body);line-height:var(--lh-body);text-wrap:pretty}
h1,h2,h3,h4{font-family:var(--type-heading-family);color:var(--text-heading);font-weight:400;line-height:var(--lh-tight);margin:0}
p{margin:0}
a{color:var(--text-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;transition:color var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--text-link-hover)}
::selection{background:var(--orange-300);color:var(--brown-900)}
img{display:block;max-width:100%}
button{font:inherit}

