/* =============================================================================
MASTER: food-amici-static — concept preview by PXLNorth
Parameterized from the operator-approved amicirestaurant.ca recreation of the
sundayinbrooklyn blueprint (templates/blueprints/food/sundayinbrooklyn).
Structure and density come from the blueprint; every colour and font below is
a slot the tailor pass fills per prospect.
TYPE — a pairing chosen per prospect, never a house pairing.
-------------------------------------------------------------------------
--sans / --serif and the Google Fonts href are content-driven (content.json
`fonts`, defaulted in template.json). The shipped default is the source
build's pairing: BODONI MODA for display, because Bodoni cut his types in
Parma, in the Emilia-Romagna the source restaurant's own About page names as
the origin of its cooking — a face picked from a FACT about the business, and
the standard this master's tailors are held to. It is used only on white or
paper grounds: a Didone's hairlines dissolve on a dark ground, and no
automated check can see that. Text is ARCHIVO, a grotesque with a tall
x-height, which is what the small letterspaced caps (address, hours, nav,
eyebrows) need to stay readable at 11-13px.
Whatever a tailor picks, every weight this file uses must be REQUESTED in
fonts.googleHref, or blueprint-gate's faux-bold check fails. Never Fraunces.
COLOUR SLOTS — one accent, from the prospect's own site scheme.
-------------------------------------------------------------------------
Every slot below reads the fill-static palette (paletteMode `pro`);
theme.json SHOULD pin the full scale via its `pro` object (see template.json).
The source build's mapping is the pattern to copy:
accent slot : ONE hot colour, sampled from the prospect's real site scheme
(theme.json.siteScheme top band), warmed until it clears the
contrast floors. It carries the rules, the CTAs and the one
accented word in the wordmark. Never a second accent.
paper slots : the prospect's warm neutral as a SURFACE, never as a second
accent, and never a logo colour used as a canvas.
ink slots : the near-black text scale.
--white : the page canvas the blueprint sets its type on.
Master-specific slot names fall back to derived standard keys when unpinned,
so an unpinned theme still renders a coherent page rather than an empty var.
========================================================================= */
:root {
--ink: #242319;
--ink-2: #4b4a3a;
--ink-3: #6a695a;
--accent: #a55d1d;
--accent-deep: #7a4515;
--paper: #f4f3e8;
--paper-2: #EEEAE6;
--line: #e6e6dd;
--line-soft: #f9f5f0;
--white: #ffffff;
/* The ground of an INVERSE band (FOOD round 4, band rhythm): the page's own ink, painted. */
--inverse: #242319;
--wrap: 1180px;
--sans: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
--serif: "Bodoni Moda", "Times New Roman", Georgia, serif;
/* Non-sticky masthead (this blueprint's header does not travel), so anchors
need only breathing room, not nav clearance. Measured: no fixed chrome. */
--anchor-gap: 28px;
/* SUB-NICHE PRESENTATION MATRIX (TASTE_LEDGER #69, docs/PRESENTATION_MATRIX.md),
ported 2026-09-10. Three axes reach this stylesheet: displayRegister, density and
sectionEmphasis. EVERY DEFAULT BELOW IS THE VALUE THIS MASTER ALREADY PAINTED, so a
fill that resolves no row (the oracle refill does exactly that) computes the approved
page to the pixel; the axes vary AROUND the approved design, they do not replace it. */
--display-scale: 1;
--display-weight: 600;
/* Tracking is applied as a DELTA against the resolver's `normal` (-0.005em), so each
display rule keeps its own hand-set letter-spacing and the axis moves it, rather than
one token flattening four different rules onto the same value. */
--display-track: -0.005em;
--display-track-delta: calc(var(--display-track) + 0.005em);
--eyebrow-case: uppercase;
/* density.rhythm — one multiplier over the two band-padding clamps the blueprint uses.
1.00 IS the approved rhythm; tight 0.85 and airy 1.18 move around it. */
--rhythm-scale: 1;
--rhythm: calc(clamp(3.2rem, 6vw, 5.2rem) * var(--rhythm-scale));
--rhythm-reserve: calc(clamp(3rem, 6vw, 5rem) * var(--rhythm-scale));
/* density.measure — a CEILING on the copy measures, never a floor. This blueprint is
already narrower than the fleet standard (46ch / 52ch), so no value in the vocabulary
clips it today; the token is wired and reported rather than pretended about, and
.menu-note's 68ch is deliberately NOT bound (see template.json $expressedHow). */
--measure: 60ch;
}
/* sectionEmphasis lead / shrink (docs/PRESENTATION_MATRIX.md §2.4). The attributes are set
per band in index.html from presentation.emph / presentation.compact (the MATRIX-resolved
flags, not the legacy variantEmphasis merge - see template.json $expressedHow) through
template.json $presentation.sectionMap. Both multipliers are RELATIVE to whatever
--rhythm the density axis already set, so the two axes compose instead of fighting. */
[data-emph] { --emph-pad: 1.22; --emph-scale: 1.06; }
[data-compact] { --emph-pad: .72; --emph-scale: .88; }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--white);
color: var(--ink-2);
font-family: var(--sans);
font-size: 16px;
line-height: 1.62;
overflow-x: hidden;
}
/* `height: auto` is NOT decoration. The HTML width/height attributes map to CSS
presentational hints, so an ![]()
keeps a literal 1200px height
the moment CSS sets only its width, and `aspect-ratio` cannot override a
height that is already specified. The first render of this page stretched
every dish tile to 1200px tall for exactly that reason. */
img { max-width: 100%; height: auto; }
picture { display: block; }
a { color: var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.skip {
position: absolute; left: -9999px; top: 0;
background: var(--ink); color: #fff; padding: .7rem 1rem; z-index: 50;
}
.skip:focus { left: 0; }
section[id], [id="top"] { scroll-margin-top: var(--anchor-gap); }
/* ---------- icons: ONE symbol per meaning, referenced with