/* ========================================================================== menu-engineering.css — /restaurant-menu-engineering-guide.html Added 2026-09-06. TOKENS ARE NOT NEW. Every colour, font and radius below is lifted from the existing estate (about.html chrome, market-entry.css, the nav and footer): gold #E1B168 / #d4a84b / #D4A656 ink #1F2937 (footer ground) / #111827 / #374151 / #6b7280 rules & wells #E5E7EB / #F9FAFB / #FBF7F0 headings 'Playfair Display', serif body 'Montserrat', sans-serif radius 8px cards, 10px panels, 50% pills Nothing here invents a brand colour. NO-JS FLOOR. Every figure below renders complete and readable with JavaScript disabled and with animation disabled. The `.mg-fig` blocks are NOT hidden by default: bars carry their final width, counters carry their final text in the HTML, and the reveal states are only applied by a script AFTER it has confirmed the reader has not asked for reduced motion. If the script never runs, nothing is ever hidden. This is the same inversion used on the market-entry pages, for the same reason. ========================================================================== */ /* ---------- article shell ---------- */ .mg-wrap { max-width: 760px; margin: 0 auto; padding: 0 1rem; } .mg-hero { background: #1F2937; color: #F3F4F6; padding: 3rem 0 3.25rem; } .mg-hero h1 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.75rem, 4.6vw, 2.75rem); line-height: 1.18; color: #fff; margin: 0 0 1rem; letter-spacing: -0.01em; } .mg-hero .mg-standfirst { font-size: 1.0625rem; line-height: 1.7; color: #D1D5DB; margin: 0 0 1.25rem; max-width: 62ch; } .mg-meta { font-size: 0.8125rem; color: #9CA3AF; line-height: 1.7; } .mg-meta a { color: #E1B168; } .mg-crumbs { font-size: 0.8125rem; color: #9CA3AF; margin: 0 0 1.25rem; } .mg-crumbs a { color: #D1D5DB; text-decoration: none; } .mg-crumbs a:hover, .mg-crumbs a:focus-visible { color: #E1B168; text-decoration: underline; } .mg-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; } .mg-crumbs li + li::before { content: "/"; margin-right: 0.5rem; color: #6B7280; } /* Hero illustration. Intrinsic ratio is declared on the element so the box is reserved before the file arrives — no layout shift at any width. */ .mg-heroimg { margin: 0; background: #F1E3CE; } .mg-heroimg img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; } .mg-heroimg figcaption { font-size: 0.75rem; color: #6b7280; line-height: 1.6; padding: 0.625rem 1rem; max-width: 760px; margin: 0 auto; } .mg-body { padding: 2.5rem 0 3rem; } .mg-body h2 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.375rem, 3vw, 1.75rem); line-height: 1.3; color: #111827; margin: 2.75rem 0 1rem; scroll-margin-top: 90px; } .mg-body h2:first-of-type { margin-top: 0; } .mg-body h3 { font-family: 'Playfair Display', Georgia, serif; font-size: 1.125rem; color: #111827; margin: 1.75rem 0 0.625rem; } .mg-body p, .mg-body li { font-size: 1.0625rem; line-height: 1.78; color: #374151; } .mg-body p { margin: 0 0 1.125rem; } .mg-body ul, .mg-body ol { margin: 0 0 1.25rem; padding-left: 1.4rem; } .mg-body li { margin-bottom: 0.6rem; } .mg-body a { color: #9a6b12; text-decoration: underline; text-underline-offset: 2px; } .mg-body a:hover, .mg-body a:focus-visible { color: #6f4c08; } .mg-lede { font-size: 1.15rem; line-height: 1.7; color: #1F2937; } .mg-note { font-size: 0.875rem; line-height: 1.7; color: #4B5563; background: #FBF7F0; border-left: 3px solid #E1B168; padding: 0.875rem 1rem; border-radius: 0 8px 8px 0; margin: 0 0 1.25rem; } .mg-note strong { color: #1F2937; } /* on-page contents */ .mg-toc { border: 1px solid #E5E7EB; border-radius: 10px; padding: 1.125rem 1.25rem; margin: 0 0 2rem; background: #F9FAFB; } .mg-toc h2 { font-family: 'Montserrat', sans-serif; font-size: 0.75rem !important; letter-spacing: 0.09em; text-transform: uppercase; color: #6b7280; margin: 0 0 0.75rem !important; } .mg-toc ol { margin: 0; padding-left: 1.2rem; } .mg-toc li { font-size: 0.9375rem; line-height: 1.6; margin-bottom: 0.4rem; color: #374151; } .mg-toc a { color: #374151; text-decoration: none; } .mg-toc a:hover, .mg-toc a:focus-visible { color: #9a6b12; text-decoration: underline; } /* ---------- shared figure chrome ---------- */ .mg-fig { margin: 1.75rem 0 2rem; border: 1px solid #E5E7EB; border-radius: 10px; background: #fff; padding: 1.25rem; overflow: hidden; } .mg-fig > figcaption { font-size: 0.875rem; line-height: 1.65; color: #4B5563; margin-top: 1rem; } .mg-fig > figcaption strong { color: #1F2937; } .mg-figtitle { font-family: 'Montserrat', sans-serif; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #9a6b12; margin: 0 0 0.875rem; } .mg-figtitle::after { content: ""; display: block; width: 34px; height: 2px; background: #E1B168; margin-top: 0.5rem; } .mg-invented { font-size: 0.75rem; color: #6b7280; line-height: 1.6; margin: 0.75rem 0 0; } /* ---------- 1. the numbers you need ---------- */ .mg-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: 1fr; } @media (min-width: 480px) { .mg-checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 720px) { .mg-checklist { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .mg-checklist li { display: flex; gap: 0.625rem; align-items: flex-start; border: 1px solid #E5E7EB; border-radius: 8px; background: #F9FAFB; padding: 0.875rem; margin: 0; font-size: 0.9375rem; line-height: 1.5; color: #1F2937; } .mg-tick { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; background: #E1B168; color: #fff; font-size: 12px; line-height: 20px; text-align: center; margin-top: 1px; } .mg-checklist b { display: block; font-weight: 600; } .mg-checklist span.mg-sub { display: block; font-size: 0.8125rem; color: #6b7280; margin-top: 2px; font-weight: 400; } /* ---------- 2. contribution-margin equation ---------- */ .mg-eq { display: grid; gap: 0.75rem; grid-template-columns: 1fr; align-items: stretch; } @media (min-width: 640px) { .mg-eq { grid-template-columns: 1fr auto 1fr auto 1.15fr; align-items: center; } } .mg-eqcard { border: 1px solid #E5E7EB; border-radius: 8px; padding: 0.875rem; background: #F9FAFB; text-align: center; } .mg-eqcard.is-result { background: #FBF7F0; border-color: #E1B168; } .mg-eqlabel { font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: #6b7280; display: block; margin-bottom: 0.25rem; } .mg-eqval { font-family: 'Playfair Display', Georgia, serif; font-size: 1.6rem; color: #111827; display: block; line-height: 1.1; font-variant-numeric: tabular-nums; } .mg-eqop { font-size: 1.5rem; color: #9a6b12; text-align: center; font-weight: 600; line-height: 1; } .mg-split { margin-top: 1.25rem; } .mg-splitbar { display: flex; height: 30px; border-radius: 6px; overflow: hidden; border: 1px solid #E5E7EB; background: #F3F4F6; } .mg-splitbar span { display: block; height: 100%; } .mg-splitbar .mg-s-cost { background: #B08A55; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.22) 0 5px, transparent 5px 10px); } .mg-splitbar .mg-s-cm { background: #1F2937; } .mg-splitkey { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0.625rem 0 0; padding: 0; list-style: none; font-size: 0.8125rem; color: #374151; } .mg-splitkey li { display: flex; align-items: center; gap: 0.4rem; margin: 0; } .mg-key { width: 14px; height: 14px; border-radius: 3px; flex: 0 0 14px; border: 1px solid rgba(0,0,0,0.12); } .mg-key.mg-s-cost { background: #B08A55; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.3) 0 4px, transparent 4px 8px); } .mg-key.mg-s-cm { background: #1F2937; } /* formula, presented as text so it is selectable and readable to a screen reader */ .mg-formula { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1rem, 2.6vw, 1.375rem); color: #111827; background: #FBF7F0; border: 1px solid #E9DCC5; border-radius: 8px; padding: 1rem 1.125rem; margin: 0 0 1.25rem; text-align: center; line-height: 1.5; } /* The underline is painted as a background gradient rather than an absolutely positioned pseudo-element. The pseudo-element needed `white-space: nowrap` to sit under the whole term, and that nowrap pushed 10px of horizontal overflow onto the page at 375px. A cloned background box wraps with the text. */ .mg-formula em { font-style: normal; background-image: linear-gradient(#E1B168, #E1B168); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 2px; padding-bottom: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .motion-on .mg-formula em { background-size: 0 2px; } .motion-on .mg-formula.mg-fig-in em { background-size: 100% 2px; transition: background-size 700ms cubic-bezier(0.22,1,0.36,1) 200ms; } /* ---------- 3. dish comparison ---------- */ .mg-dishes { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 620px) { .mg-dishes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .mg-dish { border: 1px solid #E5E7EB; border-radius: 8px; padding: 1rem; background: #F9FAFB; } .mg-dish h4 { font-family: 'Montserrat', sans-serif; font-size: 0.9375rem; font-weight: 700; color: #111827; margin: 0 0 0.75rem; } .mg-dl { margin: 0 0 0.875rem; font-size: 0.875rem; color: #374151; } .mg-dl div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; border-bottom: 1px dotted #E5E7EB; } .mg-dl dt { color: #6b7280; } .mg-dl dd { margin: 0; font-weight: 600; color: #111827; font-variant-numeric: tabular-nums; } .mg-gauge { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.875rem; } .mg-gauge svg { flex: 0 0 62px; } .mg-gauge-txt { font-size: 0.8125rem; color: #374151; line-height: 1.45; } .mg-gauge-txt b { display: block; font-size: 1.05rem; color: #111827; font-variant-numeric: tabular-nums; } .mg-ring-track { stroke: #E5E7EB; } .mg-ring-val { stroke: #B08A55; stroke-linecap: round; } .mg-cmbar { margin-top: 0.25rem; } .mg-cmbar .mg-track { height: 26px; background: #F3F4F6; border: 1px solid #E5E7EB; border-radius: 6px; overflow: hidden; } .mg-cmbar .mg-bar { height: 100%; background: #1F2937; display: flex; align-items: center; justify-content: flex-end; padding-right: 0.5rem; } .mg-cmbar .mg-bar span { color: #fff; font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; } .mg-cmbar .mg-barlabel { font-size: 0.75rem; color: #6b7280; margin: 0 0 0.3rem; } .mg-dish.is-highlight { border-color: #E1B168; background: #FBF7F0; } .mg-flag { display: inline-block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #7a5405; background: #F4E6CB; border: 1px solid #E1B168; border-radius: 999px; padding: 2px 8px; margin-left: 0.4rem; vertical-align: middle; } .mg-conclusion { margin: 1rem 0 0; font-size: 0.9375rem; line-height: 1.65; color: #1F2937; background: #FBF7F0; border: 1px solid #E9DCC5; border-radius: 8px; padding: 0.875rem 1rem; } /* ---------- 4. sales mix ---------- */ .mg-mix { margin: 0; } .mg-mixrow { display: grid; grid-template-columns: minmax(96px, 30%) 1fr auto; gap: 0.625rem; align-items: center; margin-bottom: 0.625rem; } .mg-mixrow dt { font-size: 0.875rem; color: #374151; } .mg-mixrow dd { margin: 0; } .mg-mixtrack { height: 22px; background: #F3F4F6; border: 1px solid #E5E7EB; border-radius: 5px; overflow: hidden; } .mg-mixfill { height: 100%; background: #C79A5F; } .mg-mixrow.is-focus .mg-mixfill { background: #1F2937; } .mg-mixnum { font-size: 0.875rem; font-weight: 600; color: #111827; font-variant-numeric: tabular-nums; white-space: nowrap; } .mg-mixtotal { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid #E5E7EB; padding-top: 0.625rem; margin-top: 0.875rem; font-size: 0.875rem; color: #374151; } .mg-mixtotal b { color: #111827; font-variant-numeric: tabular-nums; } .mg-mixcalc { margin: 0.875rem 0 0; font-family: 'Playfair Display', Georgia, serif; font-size: 1.0625rem; color: #111827; background: #FBF7F0; border: 1px solid #E9DCC5; border-radius: 8px; padding: 0.75rem 0.875rem; text-align: center; } /* ---------- 5. menu-engineering matrix ---------- */ .mg-matrix-outer { position: relative; } .mg-axisy { font-size: 0.75rem; color: #6b7280; letter-spacing: 0.04em; margin: 0 0 0.75rem; } /* Single column below 560px. At 375px a 2x2 grid gives each quadrant about 145px, which is not enough for the name, both axis labels, the dish and the suggested focus. The stacked order still reads top-left, top-right, bottom-left, bottom-right, and every card names its own two axis positions in words, so nothing depends on the spatial arrangement. */ .mg-matrix { display: grid; grid-template-columns: 1fr; gap: 0.625rem; } @media (min-width: 560px) { .mg-matrix { grid-template-columns: 1fr 1fr; } } .mg-quad { display: block; width: 100%; text-align: left; font: inherit; cursor: pointer; border: 1px solid #E5E7EB; border-radius: 8px; background: #F9FAFB; padding: 0.875rem; color: #1F2937; min-height: 44px; } .mg-quad:hover { border-color: #E1B168; background: #FBF7F0; } .mg-quad:focus-visible { outline: 3px solid #9a6b12; outline-offset: 2px; } .mg-quad[aria-expanded="true"] { border-color: #E1B168; background: #FBF7F0; } .mg-quad-name { display: block; font-family: 'Playfair Display', Georgia, serif; font-size: 1.125rem; color: #111827; margin-bottom: 0.2rem; } .mg-quad-axes { display: block; font-size: 0.75rem; color: #6b7280; line-height: 1.5; } .mg-quad-dish { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; color: #374151; margin-top: 0.5rem; } .mg-dot { width: 10px; height: 10px; border-radius: 50%; background: #1F2937; flex: 0 0 10px; } .mg-quad-focus { display: block; font-size: 0.8125rem; color: #7a5405; margin-top: 0.5rem; } .mg-quad-arrow { float: right; font-size: 0.75rem; color: #9a6b12; } .mg-quad[aria-expanded="true"] .mg-quad-arrow { transform: rotate(180deg); display: inline-block; } .mg-panel { border: 1px solid #E9DCC5; border-left: 3px solid #E1B168; border-radius: 0 8px 8px 0; background: #FBF7F0; padding: 0.875rem 1rem; margin: 0.625rem 0 0; font-size: 0.9375rem; line-height: 1.65; color: #374151; grid-column: 1 / -1; } .mg-panel p { margin: 0; font-size: 0.9375rem; } /* ---------- 6. review timeline ---------- */ .mg-steps { list-style: none; margin: 0; padding: 0; position: relative; counter-reset: mgstep; } .mg-steps li { position: relative; padding: 0 0 1.375rem 3rem; margin: 0; counter-increment: mgstep; } .mg-steps li::before { content: counter(mgstep); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; background: #1F2937; color: #fff; font-family: 'Montserrat', sans-serif; font-size: 0.875rem; font-weight: 700; display: flex; align-items: center; justify-content: center; z-index: 1; } .mg-steps li::after { content: ""; position: absolute; left: 16px; top: 34px; bottom: 0; width: 2px; background: #E5E7EB; } .mg-steps li:last-child::after { display: none; } .mg-steps b { display: block; font-size: 0.9375rem; color: #111827; } .mg-steps span { display: block; font-size: 0.875rem; color: #6b7280; line-height: 1.6; margin-top: 2px; } .mg-stepicon { position: absolute; left: 44px; top: 2px; display: none; } @media (min-width: 860px) { .mg-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.75rem; } .mg-steps li { padding: 3rem 0 0; } .mg-steps li::before { top: 0; left: 0; } .mg-steps li::after { left: 34px; top: 16px; bottom: auto; right: -0.75rem; width: auto; height: 2px; } .mg-steps li:last-child::after { display: none; } } /* ---------- CTA ---------- */ .mg-cta { border: 1px solid #E9DCC5; background: #FBF7F0; border-radius: 10px; padding: 1.5rem; margin: 2rem 0; text-align: center; } .mg-cta h3, .mg-cta p.mg-ctahead { font-family: 'Playfair Display', Georgia, serif; font-size: 1.25rem; color: #111827; margin: 0 0 0.625rem; } .mg-cta p { font-size: 0.9375rem; color: #4B5563; margin: 0 0 1.125rem; } .mg-btn { display: inline-block; background: #E1B168; color: #1F2937; font-weight: 700; font-size: 0.9375rem; padding: 0.875rem 1.5rem; border-radius: 8px; text-decoration: none; min-height: 44px; line-height: 1.4; transition: background-color 200ms ease, transform 200ms ease; } .mg-btn:hover { background: #D4A656; color: #1F2937; } .mg-btn:focus-visible { outline: 3px solid #1F2937; outline-offset: 3px; } @media (hover: hover) and (pointer: fine) { .mg-btn:hover { transform: translateY(-1px); } } /* ---------- FAQ ---------- */ .mg-faq { border-top: 1px solid #E5E7EB; margin-top: 1rem; } .mg-faq details { border-bottom: 1px solid #E5E7EB; } .mg-faq summary { cursor: pointer; list-style: none; padding: 1rem 2rem 1rem 0; position: relative; font-weight: 600; font-size: 1rem; color: #111827; min-height: 44px; } .mg-faq summary::-webkit-details-marker { display: none; } .mg-faq summary::after { content: "+"; position: absolute; right: 0.25rem; top: 0.9rem; font-size: 1.25rem; color: #9a6b12; } .mg-faq details[open] summary::after { content: "\2212"; } .mg-faq summary:focus-visible { outline: 3px solid #9a6b12; outline-offset: 2px; } .mg-faq .mg-answer { padding: 0 0 1.125rem; } .mg-faq .mg-answer p:last-child { margin-bottom: 0; } /* ---------- sources ---------- */ .mg-sources { font-size: 0.8125rem; color: #6b7280; line-height: 1.7; border-top: 1px solid #E5E7EB; margin-top: 2.5rem; padding-top: 1.25rem; } .mg-sources h2 { font-family: 'Montserrat', sans-serif !important; font-size: 0.75rem !important; letter-spacing: 0.09em; text-transform: uppercase; color: #6b7280; margin: 0 0 0.625rem !important; } .mg-sources ol { padding-left: 1.2rem; } .mg-sources li { font-size: 0.8125rem; color: #6b7280; } .mg-sources a { color: #9a6b12; } /* ========================================================================== MOTION Everything above is the finished, readable state. The rules below only take effect once a script has added `.motion-on` to , and that script adds it ONLY when the reader has not asked for reduced motion and IntersectionObserver exists. No reader ever waits on an animation to read. ========================================================================== */ .motion-on .mg-fig { opacity: 0; transform: translateY(14px); } .motion-on .mg-fig.mg-fig-in { opacity: 1; transform: none; transition: opacity 600ms cubic-bezier(0.22,1,0.36,1), transform 600ms cubic-bezier(0.22,1,0.36,1); } /* 1. staggered checklist */ .motion-on .mg-checklist li { opacity: 0; transform: translateY(10px); } .motion-on .mg-fig-in .mg-checklist li { opacity: 1; transform: none; transition: opacity 420ms cubic-bezier(0.22,1,0.36,1), transform 420ms cubic-bezier(0.22,1,0.36,1); } .motion-on .mg-fig-in .mg-checklist li:nth-child(1) { transition-delay: 100ms; } .motion-on .mg-fig-in .mg-checklist li:nth-child(2) { transition-delay: 200ms; } .motion-on .mg-fig-in .mg-checklist li:nth-child(3) { transition-delay: 300ms; } .motion-on .mg-fig-in .mg-checklist li:nth-child(4) { transition-delay: 400ms; } .motion-on .mg-fig-in .mg-checklist li:nth-child(5) { transition-delay: 500ms; } .motion-on .mg-fig-in .mg-checklist li:nth-child(6) { transition-delay: 600ms; } .motion-on .mg-tick { opacity: 0; transform: scale(0.6); } .motion-on .mg-fig-in .mg-tick { opacity: 1; transform: none; transition: opacity 260ms ease, transform 300ms cubic-bezier(0.22,1,0.36,1); } .motion-on .mg-fig-in .mg-checklist li:nth-child(1) .mg-tick { transition-delay: 420ms; } .motion-on .mg-fig-in .mg-checklist li:nth-child(2) .mg-tick { transition-delay: 520ms; } .motion-on .mg-fig-in .mg-checklist li:nth-child(3) .mg-tick { transition-delay: 620ms; } .motion-on .mg-fig-in .mg-checklist li:nth-child(4) .mg-tick { transition-delay: 720ms; } .motion-on .mg-fig-in .mg-checklist li:nth-child(5) .mg-tick { transition-delay: 820ms; } .motion-on .mg-fig-in .mg-checklist li:nth-child(6) .mg-tick { transition-delay: 920ms; } /* 2. equation cards travel toward the centre, then the result resolves */ .motion-on .mg-eqcard { opacity: 0; } .motion-on .mg-eqcard.mg-e1 { transform: translateX(-14px); } .motion-on .mg-eqcard.mg-e2 { transform: translateX(14px); } .motion-on .mg-eqcard.is-result { transform: scale(0.96); } .motion-on .mg-eqop { opacity: 0; } .motion-on .mg-fig-in .mg-eqcard, .motion-on .mg-fig-in .mg-eqop { opacity: 1; transform: none; transition: opacity 480ms cubic-bezier(0.22,1,0.36,1), transform 620ms cubic-bezier(0.22,1,0.36,1); } .motion-on .mg-fig-in .mg-eqcard.mg-e1 { transition-delay: 120ms; } .motion-on .mg-fig-in .mg-eqop.mg-o1 { transition-delay: 320ms; } .motion-on .mg-fig-in .mg-eqcard.mg-e2 { transition-delay: 420ms; } .motion-on .mg-fig-in .mg-eqop.mg-o2 { transition-delay: 640ms; } .motion-on .mg-fig-in .mg-eqcard.is-result { transition-delay: 760ms; } /* 3 + 2. bars and rings grow from zero, once */ .motion-on .mg-splitbar span, .motion-on .mg-mixfill, .motion-on .mg-cmbar .mg-bar { width: 0 !important; } .motion-on .mg-fig-in .mg-splitbar span, .motion-on .mg-fig-in .mg-mixfill, .motion-on .mg-fig-in .mg-cmbar .mg-bar { width: var(--mg-w) !important; transition: width 900ms cubic-bezier(0.22,1,0.36,1) 200ms; } .motion-on .mg-ring-val { stroke-dashoffset: var(--mg-circ); } .motion-on .mg-fig-in .mg-ring-val { stroke-dashoffset: var(--mg-off); transition: stroke-dashoffset 900ms cubic-bezier(0.22,1,0.36,1) 250ms; } .motion-on .mg-dish.is-highlight { box-shadow: none; } .motion-on .mg-fig-in .mg-dish.is-highlight { box-shadow: 0 0 0 3px rgba(225,177,104,0.45); transition: box-shadow 500ms ease 1500ms; } .motion-on .mg-conclusion, .motion-on .mg-mixcalc { opacity: 0; } .motion-on .mg-fig-in .mg-conclusion, .motion-on .mg-fig-in .mg-mixcalc { opacity: 1; transition: opacity 500ms ease 1800ms; } /* 5. axes then quadrants */ .motion-on .mg-quad { opacity: 0; transform: translateY(8px); } .motion-on .mg-fig-in .mg-quad { opacity: 1; transform: none; transition: opacity 420ms cubic-bezier(0.22,1,0.36,1), transform 420ms cubic-bezier(0.22,1,0.36,1); } .motion-on .mg-fig-in .mg-quad:nth-of-type(1) { transition-delay: 200ms; } .motion-on .mg-fig-in .mg-quad:nth-of-type(2) { transition-delay: 340ms; } .motion-on .mg-fig-in .mg-quad:nth-of-type(3) { transition-delay: 480ms; } .motion-on .mg-fig-in .mg-quad:nth-of-type(4) { transition-delay: 620ms; } .motion-on .mg-dot { opacity: 0; transform: scale(0.4); } .motion-on .mg-fig-in .mg-dot { opacity: 1; transform: none; transition: opacity 300ms ease 900ms, transform 400ms cubic-bezier(0.22,1,0.36,1) 900ms; } /* 6. the rail draws, then each step lands */ .motion-on .mg-steps li { opacity: 0; } .motion-on .mg-fig-in .mg-steps li { opacity: 1; transition: opacity 400ms ease; } .motion-on .mg-fig-in .mg-steps li:nth-child(1) { transition-delay: 200ms; } .motion-on .mg-fig-in .mg-steps li:nth-child(2) { transition-delay: 400ms; } .motion-on .mg-fig-in .mg-steps li:nth-child(3) { transition-delay: 600ms; } .motion-on .mg-fig-in .mg-steps li:nth-child(4) { transition-delay: 800ms; } .motion-on .mg-fig-in .mg-steps li:nth-child(5) { transition-delay: 1000ms; } .motion-on .mg-steps li::after { transform: scaleY(0); transform-origin: top; } .motion-on .mg-fig-in .mg-steps li::after { transform: none; transition: transform 500ms cubic-bezier(0.22,1,0.36,1); } @media (min-width: 860px) { .motion-on .mg-steps li::after { transform: scaleX(0); transform-origin: left; } } /* Belt and braces. motion-guard.css already collapses durations; this removes the start states outright so nothing can be stranded invisible. */ @media (prefers-reduced-motion: reduce) { .motion-on .mg-fig, .motion-on .mg-checklist li, .motion-on .mg-tick, .motion-on .mg-eqcard, .motion-on .mg-eqop, .motion-on .mg-quad, .motion-on .mg-dot, .motion-on .mg-steps li, .motion-on .mg-conclusion, .motion-on .mg-mixcalc { opacity: 1 !important; transform: none !important; } .motion-on .mg-splitbar span, .motion-on .mg-mixfill, .motion-on .mg-cmbar .mg-bar { width: var(--mg-w) !important; } .motion-on .mg-ring-val { stroke-dashoffset: var(--mg-off) !important; } .motion-on .mg-steps li::after { transform: none !important; } .motion-on .mg-formula em { background-size: 100% 2px !important; } } /* print: no start states, no chrome */ @media print { .mg-fig, .mg-checklist li, .mg-eqcard, .mg-quad, .mg-steps li { opacity: 1 !important; transform: none !important; } } /* Skip link is hidden by clipping, not by a large negative offset: an offset that far off-canvas is one of the two elements that showed up in the 375px overflow audit, and clipping cannot contribute to scroll width at all. */ /* ========================================================================== VISUAL BANDS — added 2026-09-06 A photograph paired with the takeaway it illustrates. The band breaks out wider than the 760px reading column so it reads as a break between concepts rather than another paragraph, and the side the image sits on alternates down the page. Every image carries width and height, so the box is reserved before the file arrives and the band cannot shift the text under it. ========================================================================== */ /* WIDTH. 920px against a 760px reading column — an 80px breakout each side. The first version broke out to 1080px, which put the photograph a long way outside the text and made it, not the argument, the thing the page was about. A band should punctuate the reading column, not overrule it. */ .mg-band { max-width: 920px; margin: 2.25rem auto 2.5rem; padding: 0 1rem; display: grid; gap: 1.25rem; grid-template-columns: 1fr; /* Top-aligned, not centred: the note is roughly half the height of the photograph, and centring left it floating in the middle of nothing. */ align-items: start; } @media (min-width: 900px) { .mg-band { grid-template-columns: 1fr 1fr; gap: 1.75rem; } /* Image right, text left. Source order stays image-first so the stacked mobile view always leads with the picture. */ .mg-band.is-flipped .mg-band-media { order: 2; } .mg-band.is-flipped .mg-band-note { order: 1; } } .mg-band-media { margin: 0; } .mg-band-media img { display: block; width: 100%; height: auto; border-radius: 10px; background: #F1E3CE; } /* The caption used to be 12px grey running the full width of a 530px image, which read as a stranded line of body text rather than as part of the picture. Smaller, lighter, italic and hard against the image now. */ .mg-band-media figcaption { font-size: 0.6875rem; font-style: italic; color: #9CA3AF; line-height: 1.5; margin-top: 0.45rem; letter-spacing: 0.01em; } /* "What this means" — a restatement of the section just read, never a new claim. Kept as a real