/* ============================================================================ cook.css — CookClock signature layer (AAA spec, per-site set piece) Loads AFTER data.css. Namespaced .ck-* so it cannot collide with the shared component layer, which another session owns. The `.dial` classes are the shared session's and are reused, not forked; everything added here sits around them. Voice: BUTCHER'S CHART, CONFIDENT. Solid silhouettes with knocked-out hairlines, a chart-room ledger for the timings, and no hedging: this site knows the answer and the answer is a temperature. ========================================================================== */ /* --------------------------------------------------- 0. ACCENT REPAIR (local) data.css declares --accent: var(--site-accent, #3C4A55) on :root, but shell() writes --site-accent on . A custom property is substituted where it is DECLARED, so --accent resolves to the neutral fallback on every page of every ring site and the per-site hue never reaches the CSS. Repaired here rather than in the master because _shared is owned by another session mid-rollout — flag raised; the master fix is one line. cook light #A32E24 = 6.72:1 on paper · dark #E8887E = 7.26:1 on dark paper (both values are the ring's own, from _shared/contrast-check.mjs). */ :root { --accent: #A32E24; --accent-2: #A32E24; --accent-3: #A32E24; --accent-soft: color-mix(in srgb, #A32E24 9%, var(--paper)); } :root[data-theme="dark"] { --accent: #E8887E; --accent-2: #E8887E; --accent-3: #E8887E; --accent-soft: color-mix(in srgb, #E8887E 13%, var(--paper)); } :root[data-theme="dark"] .az a:hover, :root[data-theme="dark"] .pager .on, :root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .dial-choices button[aria-pressed="true"] { color: #1A0F0D; } /* ------------------------------------------------------ 1. micro-iconography cook's hand: SOLID silhouettes with a knocked-out hairline running through them, the way a butcher's chart prints a cut. No open outlines anywhere. (fuel engraves 1.4px hairlines; burn presses a 2.2px nib; fly rules 1px plate lines with survey dots.) */ .ck-i { width: 1em; height: 1em; flex: none; vertical-align: -.14em; } .ck-i .fillx { fill: currentColor; } .ck-i .knock { fill: none; stroke: var(--surface); stroke-width: 1.5; stroke-linecap: round; } :root[data-theme="dark"] .ck-i .knock { stroke: var(--paper); } /* ------------------------------------------------------------ 2. THE SET PIECE The doneness dial, promoted above the fold, with the USDA safe zone drawn as its own outer band rather than implied by a number in a sentence. */ .ck-dialbox { margin: var(--s4) 0 0; max-width: 820px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; } .ck-dialhead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: 10px var(--s4); border-bottom: 1px solid var(--line-2); font-family: var(--sans); font-size: .68rem; font-weight: 650; letter-spacing: .17em; text-transform: uppercase; color: var(--muted); } .ck-dialhead span:first-child { display: inline-flex; align-items: center; gap: 8px; } .ck-dialhead .ck-cutno { color: var(--faint); letter-spacing: .11em; font-variant-numeric: tabular-nums; } .ck-dialbody { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--s4); align-items: center; padding: var(--s4); } @media (max-width: 640px) { .ck-dialbody { grid-template-columns: 1fr; } } /* the drawn USDA safe zone — the whole point of the set piece */ .ck-dial .safetrack { fill: none; stroke: var(--line); stroke-width: 6; stroke-dasharray: 3 4; } .ck-dial .safeband { fill: none; stroke: #2F6B3F; stroke-width: 6; stroke-linecap: butt; } :root[data-theme="dark"] .ck-dial .safeband { stroke: #6FBF86; } .ck-dial .safeedge { stroke: var(--ink); stroke-width: 1.6; } .ck-dial .safelab { fill: var(--ink); font-family: var(--sans); font-size: 8.5px; font-weight: 700; letter-spacing: .1em; font-variant-numeric: tabular-nums; } .ck-dial .safecap { fill: var(--muted); font-family: var(--sans); font-size: 7.5px; font-weight: 650; letter-spacing: .14em; } /* the needle transform origin follows the widened viewBox */ .ck-dial.dial .needle { transform-origin: 100px 100px; } .ck-dialcopy .ck-lede { font-size: .95rem; line-height: 1.6; color: var(--ink-2); } .ck-dialcopy .ck-lede strong { color: var(--ink); font-weight: 650; } .ck-dialnote { margin-top: 10px; font-size: .84rem; color: var(--muted); min-height: 1.6em; } .ck-prov { border-top: 1px solid var(--line-2); padding: 10px var(--s4); font-family: var(--sans); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; } .ck-prov b { color: var(--muted); font-weight: 650; letter-spacing: .12em; } .ck-prov .ck-sep { color: var(--line-2); } /* --------------------------------------------- 3. the chart-room ledger The signature layout move. A butcher's chart-room ledger: a heavy rule under the running head, hairlines between entries, the operative column ruled off on both sides, and the weight column set as a stub. */ .ck-ledger { margin-top: var(--s3); } .ck-ledger-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding-bottom: 7px; border-bottom: 2px solid var(--ink); font-family: var(--sans); font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); } .ck-ledger-head span:first-child { display: inline-flex; align-items: center; gap: 8px; } .ck-ledger-head .ck-folio { color: var(--faint); font-weight: 600; letter-spacing: .12em; font-variant-numeric: tabular-nums; } .ck-ledger table.data { margin-top: 0; } .ck-ledger table.data thead th { border-bottom: 1px solid var(--ink-2); font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2); } .ck-ledger table.data tbody th[scope="row"] { border-right: 1px solid var(--line-2); font-variant-numeric: tabular-nums; color: var(--ink); } .ck-ledger table.data td, .ck-ledger table.data th { font-variant-numeric: tabular-nums; } /* the operative column, ruled off on both sides the way a ledger rules money */ .ck-ledger table.data .hi { border-left: 1px solid var(--line-2); border-right: 1px solid var(--line-2); background: var(--accent-soft); } .ck-ledger-foot { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; margin-top: 10px; padding-top: 8px; border-top: 2px solid var(--ink); font-family: var(--sans); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); } .ck-ledger-foot b { color: var(--muted); font-weight: 650; letter-spacing: .12em; } /* ------------------------------------------- 2b. THE SET PIECE IN THE DARK AAA+++ §3.8: dark mode is the same MATERIAL at night, not an inversion. The dial's geometry is untouched — every retint below is colour only, so the drawing hand (filled silhouettes with knocked-out lines) and the layout are identical in both modes and CLS stays 0.00. The rule that matters here: the safe-zone band must stay the most legible thing on the face. On warm basalt the three doneness zones at opacity .32 go nearly black, which would leave the band floating on mud, so they are re-picked lighter AND the band is re-picked lighter still. Strokes land on --ink-2, never #fff: pure white on a warm ground reads as a different brand's dark mode and haloes against the hairlines. */ :root[data-theme="dark"] .ck-dial .zone-rare { stroke: #E08A5A; } :root[data-theme="dark"] .ck-dial .zone-med { stroke: #D2A64A; } :root[data-theme="dark"] .ck-dial .zone-well { stroke: #6FBF86; } :root[data-theme="dark"] .ck-dial .zone { opacity: .26; } :root[data-theme="dark"] .ck-dial .track { stroke: var(--line-2); } :root[data-theme="dark"] .ck-dial .safetrack { stroke: var(--line-2); } :root[data-theme="dark"] .ck-dial .safeedge { stroke: var(--ink-2); } :root[data-theme="dark"] .ck-dial .safelab { fill: var(--ink-2); } :root[data-theme="dark"] .ck-dial .needle { stroke: var(--ink-2); } :root[data-theme="dark"] .ck-dial .hubdot { fill: var(--ink-2); } :root[data-theme="dark"] .ck-dial .readout { fill: var(--ink-2); } /* the knocked-out line inside every silhouette is the paper showing through, so in dark mode it must be the dark paper, not white (already handled for .ck-i above; this covers the icon when it sits on a raised surface). */ :root[data-theme="dark"] .ck-dialbox .ck-i .knock, :root[data-theme="dark"] .ck-ledger-head .ck-i .knock { stroke: var(--surface); } /* ------------------------------------------ 2c. AAA+++ MECHANICS, LOCAL BITS Everything the shared §20 layer cannot know about this site's own markup. */ /* Tabular figures on comparable numbers written as spans, not cells: the shared layer covers .num and td.n, this covers the site's own .n stat values and ledger row stubs (weights, times, temperatures). */ .n { font-variant-numeric: tabular-nums lining-nums; } /* Entrance choreography (§3.7). shell() owns the and the

, so the first two beats of the kicker -> h1 -> answer stack are driven from here rather than by adding classes to shared markup. The answer block itself carries .reveal.reveal-3 in the template. Gated behind no-preference: reduced-motion readers get the finished page, and because the animation only moves opacity/transform it cannot shift layout. / @media (prefers-reduced-motion: no-preference) { .hero .eyebrow { animation: aaa-rise var(--t-slow) var(--ease-out) both; } .hero h1 { animation: aaa-rise var(--t-slow) var(--ease-out) both; animation-delay: 60ms; } } / The answer's figure is a TIME RANGE ("3 hr 20 min – 4 hr"), not a single numeral, so it needs a tighter cap than --fs-stat or it wraps to three lines on a phone. Same voice, honest measure. / .answer.aaa .stat-display, #c-out .stat-display { display: block; font-size: clamp(2rem, 6.2vw, 3.4rem); margin: 0 0 .55rem; color: var(--ink); } .answer.aaa .stat-display .u { display: inline-block; font-size: .8rem; / mono unit voice, not scaled off the serif / vertical-align: .55em; } / Above the fold the Answer head is a LABEL over the figure, not a section divider — it keeps the keel (the datum line that gives the page its anatomy) and drops the full-width rule, which would otherwise cut the hero in half one line above the answer itself. / .hero h2.sec { font-size: 1.12rem; font-weight: 500; border-bottom: 0; padding-bottom: 0; margin: var(--s4) 0 calc(var(--s2) -1); } .answer.aaa > p:not(.stat-display) { color: var(--ink-2); } .answer.aaa .srcline { max-width: var(--measure); } /* The ledger's vintage chip sits beside the folio in the running head. The shared §20.14 chip rule only reaches table captions and .tbl-wrap, so the bezel is drawn here for the ledger's own head. / .ck-ledger-head .vintage, .ck-dialhead .vintage { margin-left: 10px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 1px 6px; color: var(--muted); font-weight: 400; letter-spacing: .09em; white-space: nowrap; } / --------------------------------------------------- 4. confident emptiness / .ck-verdict { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .ck-verdict .wrap { padding-top: var(--s8); padding-bottom: var(--s8); } .ck-verdict p { font-family: var(--serif); font-size: clamp(1.3rem, 2.8vw, 1.9rem); font-weight: 400; line-height: 1.4; letter-spacing: -.022em; color: var(--ink-2); max-width: 24ch; margin: 0; } .ck-verdict p em { color: var(--ink); font-style: italic; } @media (max-width: 640px) { .ck-verdict .wrap { padding-top: var(--s6); padding-bottom: var(--s6); } } @media (prefers-reduced-motion: reduce) { .ck-dial { transition: none !important; } } /* the safe-zone key, set in the copy column so it can never clip out of the dial's viewBox the way an arc-following caption can */ .ck-key { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-family: var(--sans); font-size: .72rem; font-weight: 650; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); } .ck-key b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; } .ck-key .ck-keysep { color: var(--line-2); } .ck-key .ck-swatch { width: 22px; height: 6px; flex: none; border-radius: 3px; background: #2F6B3F; } :root[data-theme="dark"] .ck-key .ck-swatch { background: #6FBF86; }