/* ==========================================================================
   GFC design system — extracted from design-mockups/FINAL.html
   (R3-A5 -> R4-A5 -> R4.1-A2 -> R4.2-A6 -> R4.3-A1 + divider rules #c0c7cd).
   Ink-navy + bold orange + warm paper, warm-white square-cornered soft cards.
   ========================================================================== */
:root{
  /* ink navy from the official logo */
  --ink-950:#0e1a24;
  --ink-900:#14222c;
  --ink-800:#1d3140;
  --ink-700:#2b4759;
  --ink-500:#4a6d87;
  --ink-300:#a9bfce;

  /* bold orange from the official logo */
  --orange-500:#f26522;   /* accents on dark surfaces */
  --orange-600:#f04e23;   /* borders, bars, hard shadows */
  --orange-ink:#b23a10;   /* AA text/links on warm paper */
  --orange-dark:#8f2d0a;

  /* warm paper — never pure white page fields.
     Card hybrid: ground runs a step deeper so the warm-white cards read as raised. */
  --paper:#f3ebd8;
  --paper-deep:#e9dfc6;
  --card:#fffcf2;         /* warm near-white card surface for posts + sidebar */
  --card-shadow:0 1px 2px rgba(14,26,36,.07), 0 8px 22px rgba(14,26,36,.09);
  --plate:#ffffff;        /* white plate reserved for the white-bg logo JPG */
  --line:#ddd2b8;
  --ink:#1f2933;
  --ink-soft:#4e5a66;

  --link:var(--orange-ink);
  --link-hover:var(--orange-dark);

  /* spacing scale */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem;
  --s-5:1.5rem; --s-6:2rem; --s-7:3rem; --s-8:4.5rem;

  --measure:70ch;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:1.0625rem;
  line-height:1.65;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--orange-500);color:var(--ink-950)}

a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color .15s ease, text-decoration-thickness .15s ease}
a:hover{color:var(--link-hover);text-decoration-thickness:3px}
:focus{outline:none}
:focus-visible{outline:3px solid var(--orange-600);outline-offset:2px}

.skip-link{
  position:absolute;left:-999px;top:0;background:var(--orange-500);color:var(--ink-950);
  padding:var(--s-2) var(--s-4);font-weight:700;z-index:10;text-decoration:none;
}
.skip-link:focus{left:var(--s-2);top:var(--s-2)}

/* ==========================================================================
   Masthead — the official rectangle logo on a white plate over ink navy
   ========================================================================== */
.masthead{
  background:linear-gradient(160deg, var(--ink-900) 0%, var(--ink-950) 78%);
  color:var(--paper);
  padding:var(--s-7) var(--s-4) 0;
  border-bottom:4px solid var(--orange-600);
}
.brand-plate{
  position:relative;
  max-width:46rem;
  margin:0 auto;
  background:var(--plate);
  border:3px solid var(--ink-950);
  box-shadow:8px 8px 0 var(--orange-600);
  padding:var(--s-4) var(--s-5);
}
.brand-plate .brand{margin:0;line-height:0}
.brand-plate img{width:100%;height:auto}
.brand-plate a{display:block;text-decoration:none}
.sm-mark{
  /* sits just off the "C" of GASTRONOMIC (image corner, not plate corner) */
  position:absolute;top:17%;right:1.8%;
  font-size:.5rem;font-weight:700;letter-spacing:.08em;
  color:#ccc;
  padding:.05em .35em;
  line-height:1.4;
}
.tagline{
  margin:var(--s-6) auto 0;
  text-align:center;
  font-size:clamp(.78rem,2.2vw,1rem);
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--ink-300);
  font-weight:600;
}
.tagline .tick{color:var(--orange-500);padding:0 .35em;letter-spacing:0}
.dispatch-count{
  margin:0 0 var(--s-5);
  text-align:center;
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-500);
  font-weight:600;
}

.site-nav{
  margin-top:var(--s-5);
  border-top:1px solid var(--ink-700);
}
.site-nav ul{
  list-style:none;margin:0 auto;padding:0;
  max-width:60rem;
  display:flex;justify-content:center;flex-wrap:wrap;
}
.site-nav a{
  display:block;
  padding:var(--s-3) var(--s-5);
  color:var(--ink-300);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.8rem;
  font-weight:700;
  border-bottom:3px solid transparent;
  transition:color .15s ease,border-color .15s ease;
}
.site-nav a:hover{color:var(--paper);border-bottom-color:var(--orange-600);text-decoration:none}
.site-nav a[aria-current="page"]{color:var(--orange-500);border-bottom-color:var(--orange-600)}

/* ==========================================================================
   Two-column layout: post stream + always-visible sidebar.
   The sidebar column is FLUID: clamp() grows it from 18rem toward 22rem as
   the viewport widens (vw-based, so it keeps growing on very wide screens
   even after the content column has hit its measure). Pure CSS, no JS.
   ========================================================================== */
.page-layout{
  max-width:78rem;
  margin:0 auto;
  padding:0 var(--s-4);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0 var(--s-7);
}
@media (min-width:980px){
  .page-layout{grid-template-columns:minmax(0,1fr) clamp(18rem,24vw,22rem)}
}
.stream{
  max-width:calc(var(--measure) + 2*var(--s-6));
  margin:0;
  padding:var(--s-7) 0;
  min-width:0;
}
/* a centered ★ set in weighted thick-thin double rules (round-1 editorial
   style), floating on the paper ground between the cards */
.post-divider{
  max-width:calc(var(--measure) - var(--s-7));
  margin:var(--s-6) auto;
  border:0;
  position:relative;
  padding:1.2rem 0;
}
.post-divider::before{
  content:"";display:block;height:4px;
  border-top:2px solid #c0c7cd;
  border-bottom:1px solid #c0c7cd;
}
.post-divider::after{
  content:"★";
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  background:var(--paper);
  color:var(--orange-600);
  padding:0 1.05rem;
  font-size:1.2rem;line-height:1;
}

/* sidebar — Popular / Recent / Previous / From the Cellar, sticky on desktop */
.sidebar{padding:0 0 var(--s-7);min-width:0}
@media (min-width:980px){
  .sidebar{padding:var(--s-7) 0}
  .sidebar-inner{position:sticky;top:var(--s-5)}
}
.side-panel{
  background:var(--card);
  border:1px solid var(--line);
  margin:0 0 var(--s-5);
  box-shadow:var(--card-shadow);
}
.side-panel h2{
  margin:0;
  background:var(--ink-900);
  color:var(--paper);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  padding:.65em 1em;
  border-bottom:3px solid var(--orange-600);
}
.side-panel ul{list-style:none;margin:0;padding:var(--s-2) 0}
.side-panel li + li{border-top:1px dashed var(--line)}
.side-panel a{
  display:block;
  padding:.55rem var(--s-4);
  color:var(--ink-900);
  text-decoration:none;
  font-size:.875rem;
  line-height:1.45;
  font-weight:600;
  letter-spacing:.005em;
  transition:color .15s ease,background-color .15s ease;
}
.side-panel a:hover{color:var(--orange-ink);background:var(--paper);text-decoration:underline;text-decoration-thickness:2px}

/* “From the Cellar” — compact year list with dot leaders */
.cellar-list{padding:var(--s-2) var(--s-4) 0 !important}
.cellar-list a{
  display:flex;align-items:baseline;
  padding:.5rem 0;
}
.cellar-list .y{font-weight:800;font-variant-numeric:tabular-nums;font-size:.95rem}
.cellar-list .dots{
  flex:1;margin:0 .65rem;
  border-bottom:2px dotted var(--line);
  transform:translateY(-4px);
}
.cellar-list .n{
  font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);
}
.cellar-list a:hover{background:transparent}
.cellar-list a:hover .y,.cellar-list a:hover .n{color:var(--orange-ink)}
.all-years{
  display:block;
  padding:.55rem var(--s-4) .85rem;
  font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--orange-ink);
  text-decoration:none;
}
.all-years:hover{color:var(--orange-dark);text-decoration:underline;text-decoration-thickness:2px}

@media (max-width:979px){
  .sidebar-inner{display:grid;gap:var(--s-4)}
  .side-panel{margin:0}
}
@media (min-width:640px) and (max-width:979px){
  .sidebar-inner{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* posts as soft warm-white cards — square corners, hairline borders, gentle shadows */
.post{
  margin:0 auto;
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:var(--card-shadow);
  padding:var(--s-5) var(--s-4);
}
@media (min-width:640px){
  .post{padding:var(--s-6)}
}
/* stacked cards (archives index) get whitespace between them; the homepage
   stream separates cards with .post-divider instead, so this never fires there */
.post + .post{margin-top:var(--s-5)}
.post-header{margin-bottom:var(--s-5)}
/* quiet uppercase byline + date under the title — left-aligned, ✕ separator */
.dek{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:.35rem .8rem;
  margin:0;
  font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);
}
.dek time{font-weight:700;color:var(--ink-700)}
.dek .sep{color:var(--orange-600);letter-spacing:0;font-size:.68rem}
.post-title,
.post-header h1{
  margin:0 0 var(--s-2);
  font-size:clamp(1.55rem,4.6vw,2.35rem);
  line-height:1.14;
  font-weight:800;
  letter-spacing:-.015em;
  text-wrap:balance;
  color:var(--ink-900);
}
.post-title a{color:var(--ink-900);text-decoration:none;background:linear-gradient(var(--orange-500),var(--orange-500)) left bottom / 0 .18em no-repeat;transition:background-size .2s ease}
.post-title a:hover{color:var(--ink-950);background-size:100% .18em}
/* “Continue reading” cut (homepage teasers) — from FINAL.html */
/* .post-body needed: `.post-body p` (line ~342) outranks a lone class and
   was flipping this to 0-top/24-bottom */
.post-body .read-more{clear:both;margin:var(--s-5) 0 0}
.read-more a{
  display:inline-block;
  font-weight:700;font-size:.9rem;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--paper);
  background:var(--ink-900);
  padding:.65em 1.3em;
  text-decoration:none;
  border:2px solid var(--ink-900);
  transition:background-color .15s ease,border-color .15s ease,transform .1s ease;
}
.read-more a:hover{background:var(--ink-950);border-color:var(--orange-600);text-decoration:none;color:var(--paper)}
.read-more a:active{transform:translateY(1px)}
.read-more .arrow{color:var(--orange-500);margin-left:.4em}
.post-tags{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);
  margin-top:var(--s-3);
  color:var(--ink-soft);font-size:.9rem;
}
footer.post-tags{
  margin-top:var(--s-6);
  padding-top:var(--s-4);
  border-top:1px dashed var(--line);
}
.filed-under{
  font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);
}

.tag-row{display:flex;flex-wrap:wrap;gap:var(--s-2);padding:0;margin:0;list-style:none}
.tag-chip{
  display:inline-block;
  font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-900);
  background:transparent;
  border:2px solid var(--ink-900);
  padding:.15em .8em;
  text-decoration:none;
  transition:background-color .15s ease,color .15s ease;
}
a.tag-chip:hover{background:var(--ink-900);border-color:var(--ink-900);color:var(--paper);text-decoration:none}
.tag-chip .count{color:var(--orange-ink);font-weight:800;font-size:.66rem}
a.tag-chip:hover .count{color:var(--orange-500)}

.post-body{max-width:var(--measure)}
.post-body p{margin:0 0 var(--s-5)}
.post-body > p:first-of-type{font-size:1.125rem}
.post-body h2{
  font-size:1.4rem;line-height:1.25;font-weight:800;letter-spacing:-.01em;
  margin:var(--s-6) 0 var(--s-4);color:var(--ink-900);
}
.post-body h3{
  font-size:1.05rem;font-weight:700;margin:var(--s-4) 0 var(--s-3);
  color:var(--ink-700);
}
.post-body ul,.post-body ol{margin:0 0 var(--s-5);padding-left:1.4em}
.post-body li{margin-bottom:var(--s-1)}
.post-body b,.post-body strong{color:var(--ink-900)}
.post-body abbr{text-decoration:underline dotted;cursor:help}
.post-body table{max-width:100%;border-collapse:collapse}
.clearfix::after{content:"";display:table;clear:both}

/* owner-approved stub note on the two intentionally-empty legacy pages */
.stub-note{
  background:var(--paper);
  border:1px solid var(--line);
  border-left:6px solid var(--orange-600);
  padding:var(--s-4) var(--s-5);
  color:var(--ink-soft);
}

/* prev/next dispatch links under a post — quiet */
.post-nav{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);
  margin:var(--s-5) auto 0;
}
.post-nav a{display:block;text-decoration:none;color:var(--ink-soft);font-size:.85rem;line-height:1.4;min-width:0}
.post-nav .dir{
  display:block;font-size:.66rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--orange-ink);margin-bottom:.2rem;
}
.post-nav .t{font-weight:700;color:var(--ink-900)}
.post-nav a:hover .t{color:var(--orange-ink);text-decoration:underline;text-decoration-thickness:2px}
.post-nav-older{grid-column:1}
.post-nav-newer{grid-column:2;text-align:right}

/* tag / month-archive listing cards — dot-leader index of titles + dates */
.post-list{list-style:none;margin:var(--s-4) 0 0;padding:0;max-width:var(--measure)}
.post-list li + li{border-top:1px dashed var(--line)}
.post-list a{
  display:flex;align-items:baseline;
  padding:.55rem 0;
  color:var(--ink-900);
  text-decoration:none;
  font-size:.95rem;line-height:1.45;font-weight:600;
}
.post-list .t{flex:0 1 auto}
.post-list .dots{
  flex:1 1 2rem;min-width:2rem;margin:0 .65rem;
  border-bottom:2px dotted var(--line);
  transform:translateY(-4px);
}
.post-list time,.post-list .n{
  font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);white-space:nowrap;
}
.post-list a:hover .t{color:var(--orange-ink);text-decoration:underline;text-decoration-thickness:2px}
.post-list a:hover time,.post-list a:hover .n{color:var(--orange-ink)}

/* year sections on the /archives/ index */
.year-section{scroll-margin-top:var(--s-5)}
.year-heading{
  margin:0 0 var(--s-2);
  font-size:1.6rem;line-height:1.14;font-weight:800;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
  color:var(--ink-900);
}

/* ==========================================================================
   Archive browser — dark full-width band (homepage)
   ========================================================================== */
.archive{
  background:var(--ink-900);
  color:var(--paper);
  border-top:4px solid var(--orange-600);
  padding:var(--s-7) var(--s-4);
}
.archive-inner{max-width:60rem;margin:0 auto}
.archive h2{
  margin:0 0 var(--s-2);
  font-size:clamp(1.4rem,4vw,2rem);
  font-weight:800;letter-spacing:-.01em;text-transform:uppercase;
}
.archive .archive-sub{margin:0 0 var(--s-6);color:var(--ink-300);max-width:var(--measure)}

.archive-grid{display:grid;gap:var(--s-7)}
@media (min-width:900px){
  .archive-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--s-8)}
}
.archive h3{
  margin:0 0 var(--s-4);
  font-size:.8rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--orange-500);font-weight:800;
}

/* year bars scaled by post count */
.year-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2)}
.year-list a{
  display:grid;
  grid-template-columns:3.4em minmax(0,1fr) 2.4em;
  align-items:center;gap:var(--s-3);
  text-decoration:none;color:var(--paper);
  padding:var(--s-1) var(--s-2);
  transition:background-color .15s ease;
}
.year-list a:hover{background:var(--ink-800)}
.year-list a:hover .year-bar{background:var(--orange-500)}
.year-label{font-weight:700;font-variant-numeric:tabular-nums;font-size:.95rem}
.year-track{background:var(--ink-800);height:.9rem;overflow:hidden}
.post-body pre{overflow-x:auto}
.post-body iframe{max-width:100%} /* legacy embeds carry fixed 480px widths */

/* Legacy float-image blocks with caption text after the image: shrink-to-fit
   floats size to the longest caption line, not the image — min-content makes
   the image the widest atom so captions wrap at exactly its width. Smaller
   type mirrors the original design's caption scale (inner 80%/60% spans of
   the source markup stay relative). Text-only float divs are left alone. */
.post-body div[style*="float:right"]:has(img),
.post-body div[style*="float: right"]:has(img),
.post-body div[style*="float:left"]:has(img),
.post-body div[style*="float: left"]:has(img){
  max-width:min-content;
  font-size:.8rem;
  line-height:1.5;
  color:var(--ink-700);
}
/* Inside those blocks the global img{max-width:100%} is cyclic with the
   div's min-content width (the image collapses to the caption's longest
   word) — use a viewport cap instead: unconstrained on desktop, still
   shrinks the two 440px floats on phones. */
.post-body div[style*="float:right"]:has(img) img,
.post-body div[style*="float: right"]:has(img) img,
.post-body div[style*="float:left"]:has(img) img,
.post-body div[style*="float: left"]:has(img) img{
  max-width:calc(100vw - 5rem);
}

.year-bar{
  display:block; /* span: width/height are ignored while inline */
  height:100%;background:var(--orange-600);
  min-width:.5rem;
  transition:background-color .15s ease;
}
.year-count{
  font-size:.8rem;color:var(--ink-300);text-align:right;
  font-variant-numeric:tabular-nums;
}
.year-note{font-size:.8rem;color:var(--ink-300);margin-top:var(--s-3)}

/* tag chips (dark surface variant) — square */
.archive-tags{display:flex;flex-wrap:wrap;gap:var(--s-2);list-style:none;margin:0;padding:0}
.archive-tags a{
  display:inline-flex;align-items:baseline;gap:.45em;
  text-decoration:none;
  color:var(--paper);
  background:var(--ink-800);
  border:1px solid var(--ink-700);
  padding:.3em 1em;
  font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  transition:background-color .15s ease,border-color .15s ease;
}
.archive-tags a:hover{background:var(--ink-700);border-color:var(--orange-500)}
.archive-tags .count{color:var(--orange-500);font-size:.72rem;font-weight:800}

/* ==========================================================================
   Footer — quiet
   ========================================================================== */
.site-footer{
  background:var(--ink-950);
  color:var(--ink-300);
  padding:var(--s-7) var(--s-4);
  font-size:.9rem;
}
.footer-inner{max-width:60rem;margin:0 auto;text-align:center}
.footer-motto{
  margin:0 0 var(--s-5);
  font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--ink-500);font-weight:600;
}
.footer-motto .tick{color:var(--orange-600);padding:0 .35em;letter-spacing:0}
.site-footer a{color:var(--ink-300)}
.site-footer a:hover{color:var(--paper);text-decoration-color:var(--orange-500)}
.colophon{margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-2) var(--s-5)}
.colophon .sm-sup{font-size:.6em}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px;
}