visual-block class (single-class selectors lose to a class+tag descendant selector regardless of source order), flattening them all to plain body copy. */ .content-column > p { font: 400 16px/24px var(--sans); color: var(--body); } .content-column ul, .content-column ol { max-width: none; margin: 0; } .content-column li { margin: 0 0 10px; } .truncation-note { font: 400 12px/16px var(--sans); color: var(--muted); } .crosslink { font: 500 16px/20px var(--sans); color: var(--accent); text-decoration: none; display: inline-block; } /* "What this shows" — accent callout. Figma (publication-ditto-agile- principles, 163:1339, whatThisShows) uses a 4px LEFT border, not the 1px all-round border every callout on the site had been given. */ .what-shows { background: #f5f7fb; border: 0; border-left: 4px solid var(--accent); padding: 28px 32px; display: grid; gap: 16px; } .what-shows h2 { font: 400 48px/56px var(--cond); color: var(--accent); margin: 0; } .what-shows ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; } .what-shows li { font: 400 16px/24px var(--sans); color: var(--body); margin: 0; padding-left: 16px; position: relative; } .what-shows li::before { content: '\2022'; position: absolute; left: 0; color: var(--accent); } /* Fuller .tldr/.takeaways rules (border, heading, bullets) live further down — this file had picked up duplicate definitions across sessions; fixed at their single surviving definition instead of adding a third. */ /* author credentials strip */ .byline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; background: var(--bg-sub); border: 0; padding: 16px 20px; font: 400 14px/22px var(--sans); color: var(--body); max-width: none; } .byline strong { color: var(--ink); font: 700 16px/22px var(--cond); } /* results_icons: three cards with a 40x40 accent tile */ .results-band { background: var(--bg); } .icon-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; width: 920px; max-width: 100%; } .result-icon { background: var(--bg-sub); padding: 24px; display: grid; gap: 12px; align-content: start; } .result-icon .tile { width: 40px; height: 40px; background: var(--accent); } .result-icon .label { font: 400 14px/22px var(--sans); color: var(--ink); margin: 0; } .result-icon .token { font: 400 12px/16px var(--sans); color: var(--muted); margin: 0; } /* related reading */ .related h2 { font: 700 20px/32px var(--cond); color: var(--ink); margin: 0 0 14px; } .related .card-grid { grid-template-columns: repeat(2, minmax(240px, 1fr)); padding-top: 0; } /* inline figures inside the column */ .content-column figure { margin: 0; } .content-column figure img { width: 100%; border: 1px solid var(--line); background: var(--bg-sub); } .content-column figure figcaption { font: 400 12px/16px var(--sans); color: var(--muted); margin-top: 8px; } /* Image carousel — a run of related screenshots stepped through one at a time instead of stacked. Viewport height is set per-slide by site.js (from that slide's own image ratio), so it transitions instead of jumping. Fixed at half the content column's own width (920px), not a percentage of it, so it reads as a smaller inset object rather than a full-width image. */ .v-carousel { width: 460px; max-width: 100%; } .v-carousel-viewport { position: relative; overflow: hidden; background: var(--bg-sub); transition: height .3s ease; } .v-carousel-track { display: flex; align-items: flex-start; transition: transform .3s ease; } .v-carousel-slide { flex: 0 0 100%; } .v-carousel-slide img { display: block; width: 100%; border: 0; } .v-carousel-slide > img { cursor: zoom-in; } .v-carousel-link-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--bg); } .v-carousel-link-body { display: block; padding: 20px 24px; } .v-carousel-link-title { display: block; font: 700 20px/28px var(--cond); color: var(--ink); margin-bottom: 8px; } .v-carousel-link-cta { display: block; font: 400 14px/22px var(--cond); color: var(--accent); } .v-carousel-link-card:hover .v-carousel-link-cta { text-decoration: underline; } .v-carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; background: rgba(255, 255, 255, .85); color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; } .v-carousel-arrow.prev { left: 12px; } .v-carousel-arrow.next { right: 12px; } .v-carousel-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .v-carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; } .v-carousel-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--line); cursor: pointer; } .v-carousel-dot[aria-current="true"] { background: var(--accent); } /* Click-to-expand lightbox: white background, full image, caption visible. */ .v-lightbox { position: fixed; inset: 0; z-index: 1000; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 48px; } .v-lightbox[hidden] { display: none; } .v-lightbox img { max-width: 90vw; max-height: 78vh; width: auto; border: 0; object-fit: contain; cursor: zoom-out; } .v-lightbox-caption { font: 400 14px/22px var(--sans); color: var(--body); max-width: 640px; text-align: center; margin: 0; } .v-lightbox-close { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; border: 0; background: var(--bg-sub); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; } .v-lightbox-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .schema-note { background: var(--bg-sub); padding: 16px 20px; font: 400 12px/16px var(--sans); color: var(--muted); display: grid; gap: 6px; } @media (max-width: 1300px) { .content-column { width: auto; flex: 1 1 auto; min-width: 0; } .icon-row { width: auto; } } @media (max-width: 1000px) { .toc { display: none; } /* Stays a row of 3 rather than stacking — same rule as .v-tabs/.card-grid: these are parallel results, not a list that reads fine broken apart. */ .icon-row { grid-template-columns: repeat(3, minmax(160px, 1fr)); overflow-x: auto; } .content-column h3 { font-size: 20px; line-height: 26px; } } /* ---------- hamburger: nav collapses to a drawer on narrow viewports ---------- */ .nav-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: auto; background: none; border: 0; color: var(--ink); cursor: pointer; } .bars { display: grid; gap: 5px; width: 22px; } .bars i { display: block; height: 2px; background: currentColor; transition: transform .18s, opacity .18s; } .nav-toggle[aria-expanded="true"] .bars i:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .bars i:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .bars i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 1000px) { .nav-toggle { display: flex; } .nav-inner { height: 56px; flex-wrap: nowrap; padding: 0 20px; gap: 0; } .nav-links { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; z-index: 30; background: var(--accent); border-bottom: 1px solid var(--nav-line); padding: 4px 20px 12px; overflow: visible; } .nav-links.open { display: flex; } .nav-links a { height: auto; padding: 12px 0; width: 100%; border-bottom: 1px solid rgba(0,0,0,.12); font: 400 17px/24px var(--cond); } .nav-links a[aria-current="page"] { border-bottom-color: var(--tab-active); } .site-nav { position: relative; } .lang { margin-left: 8px; } .lang-btn { height: 40px; } } @media (max-width: 720px) { .nav-inner { padding: 0 20px; } .logo-sub, .logo-rule { display: none; } } /* ============================================================ Detail-page blocks, corrected against the guide/publication frames. These override the earlier approximations above. ============================================================ */ /* author_credentials: 56 avatar + three stacked lines on #f7f7fa */ .byline { display: flex; align-items: flex-start; gap: 16px; background: var(--bg-sub); border: 0; padding: 16px 20px; max-width: none; } .byline .avatar { flex: 0 0 56px; width: 56px; height: 56px; background: #fff; border: 1px solid var(--line); overflow: hidden; display: grid; place-items: center; } .byline .avatar img { width: 100%; height: 100%; object-fit: cover; } .byline .lines { display: grid; gap: 4px; min-width: 0; } .byline .name { font: 700 20px/28px var(--sans); color: var(--ink); margin: 0; } .byline .exp { font: 400 14px/22px var(--sans); color: var(--body); margin: 0; } .byline .meta { font: 400 12px/16px var(--sans); color: var(--muted); margin: 0; } .byline .meta a { color: var(--muted); } /* tldr: labelled callout. Figma (publication-ditto-agile-principles, 163:1339, tldr) uses a 4px LEFT border, not an all-round one, and the label is Roboto Condensed Regular, not bold. */ .tldr { background: #f5f7fb; border: 0; border-left: 4px solid var(--accent); padding: 20px 28px; display: grid; gap: 12px; } .tldr .tldr-label { font: 400 14px/16px var(--cond); color: var(--accent); margin: 0; } .tldr p { font: 400 16px/24px var(--sans); color: var(--body); margin: 0; } /* key takeaways: black condensed-bold heading, accent dot bullets, no border at all (key_takeaways in the same Figma frame: border-width 0). */ .takeaways { background: var(--bg-sub); border: 0; padding: 16px 28px 24px; display: grid; gap: 14px; max-width: none; } .takeaways h2 { font: 700 18px/32px var(--cond); color: var(--ink); text-transform: none; letter-spacing: normal; margin: 0 0 8px; } .takeaways ul { display: grid; gap: 14px; } .takeaways li { font: 400 16px/24px var(--sans); color: var(--body); padding-left: 20px; } .takeaways li::before { content: ''; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } /* faq: bold condensed questions, grey toggle, hairline rows */ .faq details { border: 0; border-bottom: 1px solid var(--line); } .faq summary { padding: 20px 0 0; font: 700 20px/28px var(--cond); color: var(--ink); gap: 16px; } .faq summary::after { content: '+'; color: var(--muted); font: 700 20px/28px var(--sans); } .faq details[open] summary::after { content: '\2212'; } .faq details > div { padding: 10px 0 20px; } .faq details > div p { font: 400 16px/24px var(--sans); color: var(--body); } /* sources: condensed-bold heading, small grey note */ .sources { margin: 0; padding-top: 16px; border: 0; display: grid; gap: 8px; max-width: none; } .sources h2 { font: 700 20px/28px var(--cond); color: var(--ink); text-transform: none; letter-spacing: normal; margin: 0; } .sources p, .sources ul, .sources li { font: 400 12px/16px var(--sans); color: var(--muted); margin: 0; } /* about_author: photo + bio card. Publications only — the guide and case-study frames have no such block; their author sits in author_credentials at top. */ .about-author { display: flex; gap: 24px; align-items: flex-start; background: var(--bg-sub); border: 0; padding: 28px; margin: 0; max-width: none; } .about-author .author-photo { flex: 0 0 88px; width: 88px; height: 88px; background: #fff; border: 1px solid var(--line); overflow: hidden; } .about-author .author-photo img { width: 100%; height: 100%; object-fit: cover; } .about-author .author-body { display: grid; gap: 8px; min-width: 0; } .about-author h2 { font: 700 20px/28px var(--cond); color: var(--ink); text-transform: none; letter-spacing: normal; margin: 0; } .about-author p { font: 400 14px/22px var(--sans); color: var(--body); margin: 0; } .about-author a { font: 500 16px/20px var(--sans); color: var(--accent); text-decoration: none; } /* ---------- language menu vs the hamburger drawer ---------- */ /* The open drawer is z-index 30; the language menu was 20, so it opened behind the drawer and only its top edge showed. It must sit above. */ .lang-menu { z-index: 45; } @media (max-width: 1000px) { /* Anchor the menu to the nav bar rather than to .lang — the language button is 40px tall inside a 56px bar, so top:100% of .lang landed 8px short. */ .lang { position: static; } .lang-menu { top: 56px; right: 20px; left: auto; } } /* ============================================================ `## visuals` blocks. Specified in the md from the start; the build had been treating the field as head-only metadata and dropping all 47 of them. Vocabulary is the wireframe's own: #f5f7fb + accent for anything the reader is meant to stop on, --bg-sub + --line for neutral panels, square corners. ============================================================ */ .content-column > .v-quote, .content-column > .v-callout, .content-column > .v-stat, .content-column > .v-stat-row, .content-column > .v-compare, .content-column > .v-concepts, .content-column > .v-ladder, .content-column > .v-grid, .content-column > .v-checklist, .content-column > .v-accordion, .content-column > .v-flow, .content-column > .v-selector, .content-column > .v-illustration { margin: 32px 0; } .v-title { font: 700 18px/28px var(--cond); color: var(--ink); margin: 0 0 12px; } .v-quote { } .v-quote blockquote { margin: 0; padding-left: 20px; border-left: 3px solid var(--accent); font: italic 400 20px/30px var(--serif); color: var(--ink); } .v-quote figcaption { font: 400 12px/16px var(--sans); color: var(--muted); margin-top: 8px; padding-left: 23px; } .v-callout { background: #f5f7fb; border: 0; border-left: 4px solid var(--accent); padding: 20px 28px; font: 400 16px/24px var(--sans); color: var(--body); } /* block/stat_callout in the Figma reference (publication-ditto-agile- principles, 163:1339): border-left 4px not a full border, the value at 60px (not 48) filling the width of the card, gap 16 between value and caption, caption at 16px (not 14) matching the site's base body copy. */ .v-stat { background: #f5f7fb; border: 0; border-left: 4px solid var(--accent); padding: 28px; display: grid; gap: 16px; } .v-stat-value { font: 400 60px/60px var(--cond); color: var(--accent); margin: 0; } .v-stat-caption { font: 400 16px/24px var(--sans); color: var(--body); margin: 0; max-width: none; } .v-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .v-stat-cell { background: var(--bg-sub); padding: 24px; } .v-stat-cell .v-stat-value { font-size: 40px; line-height: 44px; } .v-compare { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .v-compare-col { background: var(--bg-sub); border: 0; padding: 24px; } .v-compare-col img { width: 100%; display: block; margin-bottom: 16px; } .v-compare-col h3 { font: 700 18px/28px var(--cond); color: var(--ink); margin: 0 0 8px; } .v-compare-col p { font: 400 14px/22px var(--sans); color: var(--body); margin: 0; max-width: none; } .v-concepts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 24px; } .v-concept { border-top: 3px solid var(--accent); padding-top: 16px; } .v-concept-label { font: 700 18px/28px var(--cond); color: var(--ink); margin: 0; } .v-concept-sub { font: 400 12px/16px var(--sans); color: var(--muted); margin: 0 0 8px; } .v-concept p { font: 400 14px/22px var(--sans); color: var(--body); margin: 0; max-width: none; } .v-ladder { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .v-ladder li { display: flex; gap: 16px; align-items: flex-start; background: var(--bg-sub); padding: 16px 20px; margin: 0; } .v-rung { flex: 0 0 28px; width: 28px; height: 28px; background: var(--accent); color: #fff; display: grid; place-items: center; font: 700 14px/1 var(--cond); } .v-rung-label { font: 700 16px/24px var(--cond); color: var(--ink); margin: 0; } .v-ladder p { font: 400 14px/22px var(--sans); color: var(--body); margin: 0; max-width: none; } .v-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 24px; } .v-grid li { display: flex; gap: 12px; align-items: baseline; font: 400 15px/24px var(--sans); color: var(--body); margin: 0; } .v-num { flex: 0 0 22px; width: 22px; height: 22px; border: 1px solid var(--accent); color: var(--accent); display: inline-grid; place-items: center; font: 400 12px/1 var(--cond); } .v-checklist { background: var(--bg-sub); border: 1px solid var(--line); padding: 24px 28px; } .v-checklist ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .v-checklist li { font: 400 16px/24px var(--sans); color: var(--body); padding-left: 26px; position: relative; margin: 0; } .v-checklist li::before { content: "\2713"; position: absolute; left: 0; color: var(--accent); } .v-accordion { background: var(--bg-sub); border: 0; padding: 8px 28px; } .v-accordion .v-title { margin: 16px 0 4px; } .v-accordion details { border-bottom: 1px solid var(--line); } .v-accordion details:last-child { border-bottom: 0; } .v-accordion summary { cursor: pointer; padding: 14px 0; font: 700 16px/24px var(--cond); color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 16px; } .v-accordion summary::-webkit-details-marker { display: none; } .v-accordion summary::after { content: "+"; color: var(--muted); } .v-accordion details[open] summary::after { content: "\2212"; } .v-accordion details > div { padding-bottom: 14px; } .v-accordion p { font: 400 15px/24px var(--sans); color: var(--body); margin: 0; max-width: none; } .v-flow { list-style: none; padding: 0; margin: 0; counter-reset: flow; display: grid; gap: 8px; } .v-flow li { counter-increment: flow; position: relative; padding: 14px 20px 14px 52px; background: var(--bg-sub); font: 400 15px/22px var(--sans); color: var(--body); margin: 0; } .v-flow li::before { content: counter(flow); position: absolute; left: 20px; top: 15px; width: 20px; height: 20px; background: var(--accent); color: #fff; display: grid; place-items: center; font: 700 11px/1 var(--cond); } /* block/stepped_selector in the Figma reference (153:2107): no outer border on the wrapper (the tabs and panel each carry their own), an ACTIVE tab that fills solid accent blue (not a light tint with a bottom-border accent), and a white number badge that stays the same in both states — only the tab's own background and title colour change. Figma's own active tab renders its eyebrow in near-black text on that solid blue fill, which reads as a mock contrast oversight rather than intent (the bold title right below it is white) — carried across to white here instead of copying the low-contrast pairing verbatim. */ .v-selector { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .v-tabs { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: 12px; } /* Grid stretch alone kept measuring equal (138px) in devtools yet still rendering visibly uneven — a min-height, sized for the worst case (a two-line eyebrow over a one-line title, at this padding), settles it without depending on stretch behaving the same everywhere it's rendered. */ .v-tabs button { text-align: left; background: var(--bg-sub); border: 0; padding: 16px 20px; cursor: pointer; display: grid; align-self: stretch; align-content: start; gap: 8px; min-height: 140px; font: inherit; } .v-tabs button[aria-selected="true"] { background: var(--accent); } .v-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .v-step { width: 28px; height: 28px; background: #fff; color: var(--muted); display: grid; place-items: center; font: 400 12px/1 var(--sans); } .v-tab-label { font: 700 20px/28px var(--cond); color: var(--ink); } .v-tab-sub { font: 400 12px/16px var(--sans); color: var(--muted); } /* Selected state is carried by the filled tab too, not colour alone. */ .v-tabs button[aria-selected="true"] .v-tab-label, .v-tabs button[aria-selected="true"] .v-tab-sub { color: #fff; } .v-panel { background: var(--bg-sub); padding: 24px 28px; display: grid; gap: 10px; } .v-panel[hidden] { display: none; } .v-panel-title { font: 700 24px/32px var(--cond); color: var(--ink); margin: 0; } .v-panel p { font: 400 16px/24px var(--sans); color: var(--body); margin: 0; max-width: none; } /* A 2-tab selector switching between whole GROUPS (e.g. the Agile Manifesto's 4 values vs. its 12 principles) rather than single items — the tablist just names the two groups; .v-tabs.v-tabs-groups only needs 2 columns, not the shared .v-tabs default of 3. Specificity note: compound .v-tabs.v-tabs-groups (not a bare .v-tabs-groups) so this beats the plain .v-tabs rule regardless of source order — two same-specificity .v-tabs rules would otherwise leave it to whichever sits later in the file, which bit once already (see the max-width:1000px .v-tabs rule above). */ .v-tabs.v-tabs-groups { grid-template-columns: repeat(2, 1fr); } .v-tabs.v-tabs-groups button { min-height: auto; padding: 14px 20px; } /* Each panel lists every item in the active group, not one active item — a heading (the value/principle itself) plus its plain-English gloss. */ .v-panel.v-panel-list { grid-template-columns: 1fr; gap: 20px; } .content-column .v-manifesto-item h3 { font: 700 18px/24px var(--cond); color: var(--ink); margin: 0 0 6px; } .v-manifesto-item p { font: 400 15px/22px var(--sans); color: var(--body); margin: 0; max-width: none; } .v-illustration { background: var(--bg-sub); border: 0; padding: 28px; } .v-illustration svg { width: 100%; height: auto; max-width: 560px; margin: 0 auto; display: block; } .v-illustration figcaption { font: 400 12px/18px var(--sans); color: var(--muted); margin-top: 16px; } /* MPF calculator: two outcome cards, then the number the guide is about */ .calc-cards-2 { grid-template-columns: repeat(2, 1fr); } .calc-out:not(:empty) { margin-bottom: 28px; } .calc-diff { font: 400 16px/24px var(--sans); color: var(--body); margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--line); } .calc-diff strong { font: 700 24px/32px var(--cond); color: var(--accent); } @media (max-width: 1000px) { .v-stat-row, .v-compare, .v-concepts, .v-grid, .calc-cards-2 { grid-template-columns: 1fr; } /* v-tabs is excluded above on purpose: the three tabs are parallel steps (1/2/3), not independent cards, so stacking them loses that order/choice relationship. Keep them in a row and let the row scroll horizontally once the columns hit their floor, instead of collapsing to one column. */ .v-tabs { grid-template-columns: repeat(3, minmax(200px, 1fr)); overflow-x: auto; } } /* build_spec: the three artifacts the guide specs out. Was a raw JSON
. */
.content-column > .v-spec { margin: 32px 0; }
.spec-context { background: #f5f7fb; border: 0; padding: 24px 28px; margin-bottom: 24px; }
.spec-context dl { margin: 0; display: grid; gap: 10px; }
.spec-context dl > div { display: grid; grid-template-columns: 130px 1fr; gap: 16px; }
.spec-context dt { font: 700 13px/22px var(--cond); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.spec-context dd { margin: 0; font: 400 15px/22px var(--sans); color: var(--body); }
.spec-artifacts { display: grid; gap: 20px; }
.spec-card { background: var(--bg-sub); border: 1px solid var(--line); border-top: 3px solid var(--accent); padding: 24px 28px; }
.spec-card h3 { font: 700 20px/28px var(--cond); color: var(--ink); margin: 0 0 12px; }
.spec-label { font: 700 12px/20px var(--cond); color: var(--muted); text-transform: none; letter-spacing: normal; margin: 16px 0 4px; }
.spec-list { margin: 0; padding-left: 20px; }
.spec-list li { font: 400 15px/24px var(--sans); color: var(--body); margin: 0 0 4px; }
@media (max-width: 1000px) { .spec-context dl > div { grid-template-columns: 1fr; gap: 2px; } }
.v-figure { margin: 0; }
.v-figure img { width: 100%; height: auto; border: 1px solid var(--line); }
.v-figure figcaption { font: 400 12px/18px var(--sans); color: var(--muted); margin-top: 10px; }
/* Home hero h1, zh only: the EN headline wraps fine at 80px in 16ch, but zh
is denser per character (跟得上你出貨速度的中英內容系統 wrapped mid-word,
"...速度的中" / "英內容系統") and reads oversized at the same size. Smaller
font, and the md forces the break after 的 via a literal | (see heroFor). */
body.page-home[data-lang="zh"] .hero-over h1 {
font-size: 52px;
line-height: 68px;
max-width: 12em;
}
@media (max-width: 1100px) {
body.page-home[data-lang="zh"] .hero-over h1 { font-size: 40px; line-height: 52px; }
}
@media (max-width: 720px) {
body.page-home[data-lang="zh"] .hero-over h1 { font-size: 30px; line-height: 40px; }
}
/* ============================================================
Case study detail pages — rebuilt against the per-case-study Figma
frames (case-study-avo-insurance node 157:671, case-study-avos-world
157:813), which are the faithful reference — richer and more accurate
than the single rough case-study-detail-hsbc wireframe an earlier pass
was built from. Single column, metrics band right under the hero (table
+ project details side by side, not buried after the narrative), a
result-icon row with the icon stacked above its label, and full-width
related-reading cards with a thumbnail.
============================================================ */
.result-icon { background: var(--bg-sub); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.result-icon .tile { width: 40px; height: 40px; border-radius: 8px; background: var(--accent); color: #fff; display: grid; place-items: center; }
.result-icon .tile svg { width: 22px; height: 22px; }
.result-icon .label { font: 400 14px/22px var(--sans); color: var(--ink); margin: 0; }
.project-info dt { font-family: var(--cond); }
.project-info dd { font: 700 20px/28px var(--sans); }