/* ===== fonts ===== */
/* Self-hosted Google Fonts, from their @fontsource packages.
   Served as files, not inlined: the browser caches them across pages and
   the HTML stays small. Rule 9 allows self-hosting a Google font's woff2.
   Every STATIC face declares only its own weight and style (rule 13);
   Literata is a real variable font and declares its real axis range. */
@font-face{font-family:'Literata';font-weight:200 900;font-style:normal;font-display:swap;src:url(fonts/literata-var.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/instrument-sans-400-normal.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-weight:400;font-style:italic;font-display:swap;src:url(fonts/instrument-sans-400-italic.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-weight:500;font-style:normal;font-display:swap;src:url(fonts/instrument-sans-500-normal.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-weight:500;font-style:italic;font-display:swap;src:url(fonts/instrument-sans-500-italic.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-weight:600;font-style:normal;font-display:swap;src:url(fonts/instrument-sans-600-normal.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-weight:600;font-style:italic;font-display:swap;src:url(fonts/instrument-sans-600-italic.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-weight:700;font-style:normal;font-display:swap;src:url(fonts/instrument-sans-700-normal.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-weight:700;font-style:italic;font-display:swap;src:url(fonts/instrument-sans-700-italic.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/instrument-serif-400-normal.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-weight:400;font-style:italic;font-display:swap;src:url(fonts/instrument-serif-400-italic.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-mono-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-mono-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:600;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-mono-600-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:700;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-mono-700-normal.woff2) format('woff2')}


/* ===== tokens ===== */
/* ============================================================
   ON RECORD — accent shortlist, 2026-08-15
   ------------------------------------------------------------
   Logan's picks, both kept live. Swap --accent to change the
   whole site; nothing else needs to move.

     ORANGE   issued  #F74902  Flyers, 3.46:1 on paper
              as text #D24006  darkened 16% to clear AA
              as FILL #F74902  ships unmodified, dark text on it
                               measures 5.28:1

     RED      issued  #A51C30  Harvard crimson, 7.28:1 on paper
              as text #A51C30  ships unmodified
              as FILL #A51C30  white on it measures 7.48:1

   Orange only survives at full strength as a field, never as
   text. If orange wins, it needs one fill somewhere to carry
   the true colour, or it ships as the darker cut.
   ============================================================ */

/* ============================================================
   ON RECORD — the reversed lockup, 2026-08-16
   ------------------------------------------------------------
   Approved off the favicon tiles. White out of a solid crimson
   field. Logan's word was that it looks good. Keep it available
   as a real option, not as a one-off on the icon.

     GROUND    #A51C30   the accent at full strength, untinted
     EVERYTHING #FCFCFA  mark, rule and type all the same value
     MEASURED  7.28:1    paper on crimson
               7.48:1    pure white on crimson, if a colder cut
                         is ever wanted

   The thing that makes it work: on crimson the spine goes paper
   white along with everything else. It does not stay crimson and
   it does not get tinted. The spine then reads by position
   rather than by colour, which is why the mark holds instead of
   half dissolving into its own ground.

   Candidates for it: the favicon and touch icon, the top strip,
   a section break, the footer, the book page when there is one.

   The ink ground is a different problem with a different answer.
   Issued crimson on --ink measures 2.51:1 and disappears, so
   anything reversing out of ink uses --accent-lift below.
   Never ship --accent itself on ink.
   ============================================================ */

/* ============================================================
   THE DISH — design tokens
   ------------------------------------------------------------
   THE single shared layer. The static front end at the root and
   the WordPress child theme at /blog/ both import THIS FILE.
   Change a value here and both halves of the site move together.
   Nothing outside this file may declare a raw colour or a font.

   Decisions locked 2026-08-14:
     display  Literata (serif), 200 against 900
     accent   Harvard crimson
     system   one hue per subject he writes about
   ============================================================ */

:root{
  /* --- surface --- */
  --paper:        #FCFCFA;
  --paper-2:      #F6F6F2;
  --paper-3:      #EFEFE9;

  /* Translucent, not a fourth paper. Anything opaque laid over the hero
     hides the ledger; this darkens by 8% and lets every rule run straight
     through. Added 5 Sep for the portrait arch. A solid paper tone was
     tried first and is invisible over paper, which is why this is a wash. */
  --wash:         #11111914;

  /* --- ink --- */
  --ink:          #111119;   /* 18.0:1 on paper */
  --ink-2:        #4B4B58;   /*  8.4:1 */
  --ink-3:        #74747E;   /*  4.5:1, the floor. Carries 9px mono labels. */

  /* --- rules --- */
  --line:         #E5E5DF;
  --line-2:       #C9C9C0;
  --line-ink:     #111119;

  /* --- accent: Harvard crimson --- */
  --accent:       #A51C30;   /* 7.28:1 on paper. Safe for text at any size. */
  --accent-deep:  #7E1524;   /* hover only */
  --accent-wash:  #A51C301A; /* the fine ledger rule */
  --accent-rule:  #A51C303D; /* the heavy ledger rule, every 5th */
  --on-accent:    #FFFFFF;   /* 7.48:1 on accent */

  /* The reversed lockup. On a crimson field EVERY stroke takes
     --on-accent-soft, the spine included, so the mark reads by
     position rather than by hue. See the ON RECORD block above. */
  --on-accent-soft: var(--paper); /* 7.28:1 on accent */

  /* Reversing out of INK is the other case and needs its own red:
     --accent on --ink measures 2.51:1 and vanishes. This clears AA
     at 5.32:1. Only ever used against --ink, never against paper. */
  --accent-lift:  #E8556B;

  /* One accent, full stop. The per-subject hues were removed
     2026-08-15: five colours doing five different small jobs read
     as scattered, not as a system. --accent-2 aliases --accent so
     no rule can quietly reintroduce a second hue. */
  --accent-2:     var(--accent);

  /* --- type --- */
  --display:        "Literata", Georgia, "Times New Roman", serif;
  --display-light:  200;     /* the setup line */
  --display-weight: 900;     /* the payoff line, headings, figures */
  --quote:          "Instrument Serif", Georgia, serif;  /* italic voice moments */

  /* Light type on a saturated field optically thins out, so the top
     strip needs more weight than the same type on paper to read as
     equal. 600, chosen against the red. Real drawn weight, not faux. */
  --strip-weight:   600;
  --sans:           "Instrument Sans", system-ui, -apple-system, sans-serif;
  --mono:           "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- scale --- */
  --step--1: clamp(0.8125rem, 0.1vw + 0.79rem, 0.875rem);
  --step-0:  clamp(1rem, 0.28vw + 0.94rem, 1.0625rem);
  --step-1:  clamp(1.15rem, 0.5vw + 1.05rem, 1.35rem);
  --step-2:  clamp(1.5rem, 1.2vw + 1.2rem, 2.05rem);
  --step-3:  clamp(1.9rem, 2.6vw + 1.3rem, 3.15rem);
  --step-4:  clamp(2.2rem, 6.1vw, 4.85rem);

  /* --- space --- */
  --pad:  clamp(1.2rem, 4.5vw, 5rem);
  --gap:  clamp(1.25rem, 3vw, 2.75rem);
  --band: clamp(2.5rem, 6vw, 5.5rem);
  --maxw: 88rem;

  /* --- ledger --- */
  --ledger-cell:  78px;
  --ledger-heavy: 390px;
}


/* ===== blog ===== */
/* ============================================================
   THE DISH — blog overrides
   Everything is scoped to body.dish-restyled, so if the plugin
   is off, or half loaded, none of it applies.

   SELECTORS TARGET IDs ON PURPOSE. Genesis on this install emits
   the old XHTML markup, confirmed in the rendered DOM: #wrap,
   #header, #nav, #inner, #content-sidebar-wrap, #content,
   #sidebar, #footer. Every selector written against modern
   Genesis classes matched nothing. Do not "modernise" these.

   NO !important ANYWHERE. This stylesheet is enqueued after
   curtail/style.css, which is the only theme stylesheet that
   loads, so source order already wins. If a rule here is not
   applying, the fix is a more specific selector, not a hammer.
   ============================================================ */

/* --- layout constants ---------------------------------------
   These live in base.css on the static site, not in tokens.css,
   so the plugin has to declare them itself. Found by rendering
   the stylesheet against a Genesis fixture and reading the
   computed grid: with --aside undefined the whole
   grid-template-columns declaration is invalid and thrown away,
   and the two column shell silently collapsed to one. An
   undefined custom property does not warn. It just loses. */
:root{
  --wrap:68rem;
  --aside:clamp(15rem, 26vw, 22rem);
}

/* --- the page ---------------------------------------------- */
body.dish-restyled{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:var(--step-0);line-height:1.6;
  -webkit-font-smoothing:antialiased}

/* width:auto is the whole fix here, and max-width cannot do it.
   Curtail declares an explicit `width:960px` on both #wrap and #inner. A
   max-width of 68rem never comes into play against a narrower explicit
   width, so the page stayed pinned at 960px and sat off centre inside it.
   #inner also carries a negative right margin from the theme, which has to
   be cleared or the column hangs 64px off the edge. Measured in the live
   DOM on 6 Sep: #wrap 960px, #inner 1024px with margin 0 -64px 0 0. */
/* THE RECURRING BUG, written down so it stops recurring.
   Curtail is a fixed width XHTML theme from the era when that was normal. It
   puts an explicit `width` in pixels on every structural wrapper, and it
   floats things into gutters. Neither can be beaten by max-width or by
   anything else except setting `width:auto` and `float:none` outright.
   Every element in this block was found by measuring the live DOM, not by
   reading the stylesheet. When something is still the wrong size or in the
   wrong place, this is the first block to add it to. */
body.dish-restyled #wrap,
body.dish-restyled #header,
body.dish-restyled #inner,
body.dish-restyled #content-sidebar-wrap,
body.dish-restyled #content,
body.dish-restyled #sidebar,
body.dish-restyled #footer,
body.dish-restyled .post-wrap,
body.dish-restyled .post,
body.dish-restyled .entry,
body.dish-restyled .entry-content,
body.dish-restyled .entry-header{width:auto;float:none}

/* The one that took four rounds to find. Curtail floats the post body RIGHT
   into a 480px column with the byline in the gutter beside it. Our .post rule
   set the background, border, padding and margin and never touched `float`,
   so the entry kept floating and everything inside it stayed at 480px while
   the byline sat 200px to its left. Measured on the live blog, 6 Sep:
   div.post float:right, width 480, left 681, inside a 688px column at 473.
   The lesson is in the block above: with this theme, always set width and
   float, not just the thing that looks wrong. */

body.dish-restyled #wrap{width:auto;max-width:none;margin:0;
  background:none;border:0;padding:0}
/* #header measured 960px on 6 Sep, which was clamping our own header inside
   a page that had already been widened. */
body.dish-restyled #header{max-width:none;margin:0;padding:0;
  background:none;border:0;height:auto;overflow:visible}
body.dish-restyled #inner{width:auto;max-width:var(--wrap);margin:0 auto;
  padding-inline:clamp(1.25rem,5vw,2rem);
  padding-block:clamp(2rem,5vw,3.5rem);background:none;border:0}
body.dish-restyled a{color:inherit;text-decoration:none}
body.dish-restyled a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* --- our header, matching the static site ------------------ */
.dish-wrap{max-width:var(--wrap);margin:0 auto;padding-inline:clamp(1.25rem,5vw,2rem)}

/* The colour has to be declared ON the paragraph, not inherited from the
   strip. Curtail styles bare `p` directly, and a direct rule always beats an
   inherited value no matter how specific the ancestor's selector is. That is
   why the strip text came out in the theme's dark body colour on a crimson
   field instead of white. Inheritance is not a fallback; it only reaches
   elements nothing else has claimed. Same reason the size is set here too. */
.dish-topstrip{background:var(--accent);color:var(--on-accent)}
.dish-topstrip p{margin:0;padding:.55rem 0;font-family:var(--mono);
  color:var(--on-accent);
  font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:var(--strip-weight);text-align:center}
.dish-topstrip a{color:var(--on-accent);
  border-bottom:1.5px solid currentColor;padding-bottom:1px}

.dish-top{padding-block:1.5rem;border-bottom:1px solid var(--line-ink);
  background:var(--paper)}
.dish-top .dish-wrap{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.dish-brand{display:flex;align-items:center;gap:.85rem;
  font-family:var(--display);font-weight:700;font-size:2.125rem;
  letter-spacing:-0.02em;margin-right:auto;white-space:nowrap;line-height:1}
.dish-top nav{display:flex;gap:clamp(.85rem,2.5vw,1.5rem);flex-wrap:wrap}
.dish-top nav a{font-size:.9375rem;color:var(--ink-2)}
.dish-top nav a:hover{color:var(--accent)}
.dish-top nav a[aria-current="page"]{color:var(--ink)}

/* --- the mark ----------------------------------------------
   Same rules as the static site. The spine is drawn at first
   paint and never animates; the two angled strokes draw once.
   The rest offset is 101, not 100: at exactly 100 a dash
   boundary sits on path distance zero and a zero length dash
   with a round cap paints a filled dot. */
.dish-mark{display:inline-block;line-height:0;
  --mark-w:76px; --sw:9; --sw-draw:6.2; --in:1.05s; --out:1.7s}
.dish-mark svg{display:block;overflow:visible;width:var(--mark-w);height:auto}
.dish-mark path{fill:none;stroke:var(--ink);
  stroke-linecap:round;stroke-linejoin:round;stroke-width:var(--sw);
  stroke-dasharray:100 200;stroke-dashoffset:101}
.dish-mark .accent{stroke:var(--accent);animation:none;
  stroke-dashoffset:0;stroke-width:var(--sw)}
@keyframes dish-draw{from{stroke-dashoffset:101}to{stroke-dashoffset:0}}
@keyframes dish-press{from{stroke-width:var(--sw-draw)}to{stroke-width:var(--sw)}}
.dish-mark path:nth-child(2){
  animation:dish-draw var(--in) both, dish-press var(--in) both;
  animation-delay:0s,0s;animation-timing-function:cubic-bezier(.42,0,1,1)}
.dish-mark path:nth-child(3){
  animation:dish-draw var(--out) both, dish-press var(--out) both;
  animation-delay:var(--in),var(--in);
  animation-timing-function:cubic-bezier(0,0,.58,1)}
/* Sampled from the physics, not guessed: falling is t squared,
   rising is 2t minus t squared. */
@supports (animation-timing-function:linear(0,1)){
  .dish-mark path:nth-child(2){animation-timing-function:linear(
    0,.0156,.0625,.1406,.25,.3906,.5625,.7656,1)}
  .dish-mark path:nth-child(3){animation-timing-function:linear(
    0,.2344,.4375,.6094,.75,.8594,.9375,.9844,1)}}
@media (prefers-reduced-motion:reduce){
  .dish-mark path{animation:none;stroke-dashoffset:0;stroke-width:var(--sw)}}

/* --- the two column shell ---------------------------------- */
body.dish-restyled #content-sidebar-wrap{
  display:grid;grid-template-columns:minmax(0,1fr) var(--aside);
  gap:clamp(1.75rem,5vw,3rem);align-items:start;
  max-width:none;width:auto;float:none;padding:0}
/* min-width:0 is load-bearing. A grid item defaults to min-width:auto,
   which means it refuses to shrink below its widest unbreakable content.
   Twenty years of posts contain wide tables and long <pre> lines, and on a
   phone one of them pushed the column to 695px inside a 404px page and the
   whole site scrolled sideways. Caught by measuring the fixture at 420px,
   not by looking at it. The overflow:auto on those elements only works once
   their container is allowed to be narrower than they are. */
body.dish-restyled #content,
body.dish-restyled #sidebar{width:auto;float:none;margin:0;padding:0;min-width:0}
@media (max-width:56rem){
  body.dish-restyled #content-sidebar-wrap{grid-template-columns:minmax(0,1fr)}
}

/* --- posts --------------------------------------------------
   .post-wrap is Curtail's own wrapper around each entry, found in the live
   DOM on 6 Sep. It was carrying the theme's padding and indent while our
   rules landed on .post inside it, which is why the title and the body sat
   at two different left edges. It has to be in this list. */
body.dish-restyled .post-wrap,
body.dish-restyled .post,
body.dish-restyled .entry{background:none;border:0;padding:0;
  margin:0 0 clamp(2rem,5vw,3.25rem);
  border-bottom:1px solid var(--line);padding-bottom:clamp(1.75rem,4vw,2.5rem)}
body.dish-restyled .post-wrap:last-child,
body.dish-restyled .post:last-child,
body.dish-restyled .entry:last-child{border-bottom:0}
/* The wrapper draws the rule between posts. The entry inside it must not
   draw a second one directly above the first. */
body.dish-restyled .post-wrap .post,
body.dish-restyled .post-wrap .entry{border-bottom:0;padding-bottom:0;margin-bottom:0}

body.dish-restyled .entry-title,
body.dish-restyled h1.entry-title,
body.dish-restyled h2.entry-title{
  font-family:var(--display);font-weight:800;font-size:var(--step-2);
  line-height:1.15;letter-spacing:-0.02em;margin:0 0 .35rem;
  text-wrap:pretty}
body.dish-restyled .entry-title a:hover{color:var(--accent)}

/* Post meta. The dates and the byline become the mono label the
   rest of the site uses for anything that is not prose. */
/* float:none and width:auto are the load-bearing pair here. Curtail floats
   the byline into a 125px left gutter beside the title, which is why the date
   sat in its own narrow column wrapping onto three lines while the headline
   started 200px to its right. Measured on the live blog, 6 Sep. */
body.dish-restyled .post-info,
body.dish-restyled .entry-meta,
body.dish-restyled .post-meta{
  float:none;width:auto;clear:both;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);
  background:none;border:0;padding:0;margin:0 0 1.1rem}
body.dish-restyled .post-info a,
body.dish-restyled .post-meta a{color:var(--ink-3)}
body.dish-restyled .post-info a:hover,
body.dish-restyled .post-meta a:hover{color:var(--accent)}

/* Prose. Measure is protected here rather than on the column, so
   widening the page later does not widen the reading line. */
body.dish-restyled .entry-content{font-size:var(--step-0);padding:0;margin:0}
body.dish-restyled .entry-content p,
body.dish-restyled .entry-content li{max-width:38rem;text-wrap:pretty}
body.dish-restyled .entry-content p{margin:0 0 1.1rem}
body.dish-restyled .entry-content a{color:var(--accent);
  border-bottom:1px solid var(--accent-wash);padding-bottom:1px}
body.dish-restyled .entry-content a:hover{border-bottom-color:var(--accent)}
body.dish-restyled .entry-content h2,
body.dish-restyled .entry-content h3{font-family:var(--display);
  font-weight:800;letter-spacing:-0.015em;margin:2rem 0 .6rem}
body.dish-restyled .entry-content h2{font-size:var(--step-1)}
body.dish-restyled .entry-content h3{font-size:var(--step-0)}
body.dish-restyled .entry-content blockquote{margin:1.5rem 0;padding:0 0 0 1.1rem;
  border-left:3px solid var(--accent);font-family:var(--quote);
  font-style:italic;font-size:var(--step-1);color:var(--ink-2)}
body.dish-restyled .entry-content img{max-width:100%;height:auto}

/* Twenty years of posts contain wide tables and long code. They
   scroll inside their own box rather than pushing the page. */
body.dish-restyled .entry-content table{display:block;overflow-x:auto;
  max-width:100%;border-collapse:collapse;font-size:.9375rem}
body.dish-restyled .entry-content th,
body.dish-restyled .entry-content td{border-bottom:1px solid var(--line);
  padding:.4rem .8rem .4rem 0;text-align:left;vertical-align:top}
body.dish-restyled .entry-content th{font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:500;
  border-bottom-color:var(--line-ink)}
body.dish-restyled .entry-content pre{overflow-x:auto;background:var(--paper-2);
  border:1px solid var(--line);padding:.9rem;font-family:var(--mono);
  font-size:.8125rem}

/* --- sidebar ------------------------------------------------
   One widget lives here, Archives. Read from the DOM, not
   assumed. Nothing to remove, only to restyle. */
body.dish-restyled #sidebar .widget{background:none;border:0;padding:0;
  margin:0 0 2rem}
body.dish-restyled #sidebar .widget-title,
body.dish-restyled #sidebar h4{font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  font-weight:500;margin:0 0 .7rem;padding:0;background:none;border:0}
body.dish-restyled #sidebar ul{list-style:none;margin:0;padding:0}
body.dish-restyled #sidebar li{border-bottom:1px solid var(--line);
  padding:.45rem 0;font-size:.9375rem;color:var(--ink-2)}
body.dish-restyled #sidebar li:hover{color:var(--accent)}

/* --- comments ----------------------------------------------
   Comments are the reason the blog stayed on WordPress, so they
   get real attention rather than being left to the theme. */
body.dish-restyled #comments,
body.dish-restyled #respond{border-top:1px solid var(--line);
  margin-top:clamp(2rem,5vw,3rem);padding-top:clamp(1.5rem,4vw,2rem)}
body.dish-restyled #comments h3,
body.dish-restyled #respond h3{font-family:var(--display);font-weight:800;
  font-size:var(--step-1);letter-spacing:-0.015em;margin:0 0 1.25rem}
body.dish-restyled .comment-list,
body.dish-restyled ol.comment-list{list-style:none;margin:0;padding:0}
body.dish-restyled .comment{border-bottom:1px solid var(--line);
  padding:1.1rem 0;background:none}
body.dish-restyled .comment-author,
body.dish-restyled .comment-meta{font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
body.dish-restyled .comment-content p{max-width:38rem}
body.dish-restyled #respond input[type="text"],
body.dish-restyled #respond input[type="email"],
body.dish-restyled #respond input[type="url"],
body.dish-restyled #respond textarea{
  border:1px solid var(--line-2);background:var(--paper);color:var(--ink);
  font:inherit;font-size:.9375rem;padding:.7rem .8rem;max-width:38rem;width:100%}
body.dish-restyled #respond input[type="submit"]{
  border:0;background:var(--accent);color:var(--on-accent);cursor:pointer;
  font:inherit;font-weight:600;font-size:.9375rem;padding:.7rem 1.3rem}
body.dish-restyled #respond input[type="submit"]:hover{background:var(--accent-deep)}

/* --- pagination and footer ---------------------------------- */
body.dish-restyled .navigation,
body.dish-restyled .archive-pagination{font-family:var(--mono);font-size:.75rem;
  letter-spacing:.1em;text-transform:uppercase;margin:2rem 0}
body.dish-restyled .archive-pagination a:hover{color:var(--accent)}

body.dish-restyled #footer{width:auto;background:var(--paper);
  border-top:1px solid var(--line-ink);
  margin-top:clamp(2.5rem,6vw,4rem);padding:clamp(1.75rem,4vw,2.75rem) 0;
  max-width:none;text-align:left}
.dish-foot-cols{display:grid;gap:clamp(1.25rem,3vw,2.5rem);
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  margin:0 0 1.75rem}
.dish-foot-k{display:block;font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  font-weight:500;margin:0 0 .6rem}
.dish-foot-row{display:flex;flex-wrap:wrap;gap:.35rem 1rem}
.dish-foot-row a{font-size:.9375rem;color:var(--ink-2)}
.dish-foot-row a:hover{color:var(--accent)}
/* Declared on the paragraph, not inherited: Curtail styles bare `p`. */
body.dish-restyled .dish-legal{margin:0;font-size:.8125rem;color:var(--ink-3);
  text-align:left;max-width:none;padding:0}

/* --- ad slots ------------------------------------------------
   Not moved and not hidden. Styled around, so an ad sits in a
   box that looks intentional rather than pasted on. Ad Inserter
   wraps its output in .code-block. */
body.dish-restyled .code-block{margin:1.75rem 0;padding:1rem 0;
  border-block:1px solid var(--line)}