/* ========================================================================== Envoo Lab — Institutional Tokens are spec §2.1. --brand never carries text: at 3.62:1 on white it fails AA below 18.66px/700. Orange text uses --brand-ink, orange button grounds use --brand-btn. Both read as the same orange. ========================================================================== */ @font-face{font-family:Archivo;font-style:normal;font-weight:100 900;font-display:swap; src:url(../fonts/Archivo-var-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:Archivo;font-style:normal;font-weight:100 900;font-display:swap; src:url(../fonts/Archivo-var-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:Manrope;font-style:normal;font-weight:200 800;font-display:swap; src:url(../fonts/Manrope-var-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:Manrope;font-style:normal;font-weight:200 800;font-display:swap; src:url(../fonts/Manrope-var-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap; src:url(../fonts/IBMPlexMono-500-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap; src:url(../fonts/IBMPlexMono-500-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:700;font-display:swap; src:url(../fonts/IBMPlexMono-700-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:700;font-display:swap; src:url(../fonts/IBMPlexMono-700-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} :root{ --ink:#0B2545; --steel:#134074; --slate:#40587A; --mute:#566C88; --paper:#EEF2F7; --line:#D2DCE8; --white:#FFFFFF; --brand:#FF361F; --brand-ink:#C2240F; --brand-btn:#DE2A15; --disp:Archivo,'Segoe UI',system-ui,sans-serif; --body:Manrope,'Segoe UI',system-ui,-apple-system,sans-serif; --mono:'IBM Plex Mono',Consolas,ui-monospace,monospace; --wrap:1240px; --gut:clamp(20px,4vw,44px); --sect:clamp(56px,7vw,104px); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation-duration:.001s!important;transition-duration:.001s!important} } body{margin:0;background:var(--white);color:var(--ink); font-family:var(--body);line-height:1.6; -webkit-font-smoothing:antialiased} h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0} ul,ol{padding:0;list-style:none} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} table{color:inherit;font-family:inherit} :focus-visible{outline:2px solid var(--brand-ink);outline-offset:2px} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)} .sect{padding:var(--sect) 0} /* Every .scroll-x wrapper in the markup also carries tabindex="0", role="region" and an aria-label (HTML, not CSS — a label needs real per-instance text, and axe/WCAG 2.1.1 require the element to be keyboard-focusable, neither of which a stylesheet can express). Without tabindex, a keyboard-only user has no way to focus this element and scroll it at 360px, where the wrapped tables overflow — the "region"+label pair means a screen reader announces something useful ("region, Our tech stack, scrollable table") instead of silently landing on an anonymous, unlabelled stop in the tab order. No new rule is needed for the focus ring itself: the sheet's one :focus-visible rule above already applies to any focusable element, this one included. */ .scroll-x{overflow-x:auto} .skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff; padding:12px 20px;z-index:100} .skip:focus{left:0} /* ========================================================================== Shared chrome — utility bar, header/nav, wordmark, contact band, footer. Ported from mockups/index.html variant A (lines 84–110, 214–237), the `.v-a ` prefix stripped — there is only one variant now, so it was meaningless. The wordmark component and the mobile nav are original to this task; the mockup only ran at desktop width and had no such thing. ========================================================================== */ .logo{display:inline-block;text-decoration:none} .logo-mark{font-family:var(--disp);font-weight:600;font-size:29px;letter-spacing:-.5px; color:var(--ink);line-height:1;white-space:nowrap} .logo-mark i{font-style:normal;color:var(--brand)} .logo-mark b{font-weight:700;font-size:.72em;color:var(--brand);margin-left:1px} .util{background:var(--ink);color:#C6D4E5;font-size:12.5px} .util .wrap{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center; min-height:38px;padding-top:8px;padding-bottom:8px} .util a:hover{color:#fff} .util .sep{margin-left:auto;color:#7C93B0} .nav{background:var(--white);border-bottom:1px solid var(--line); position:sticky;top:0;z-index:20} .nav .wrap{display:flex;align-items:center;gap:clamp(16px,3vw,42px);min-height:74px} .nav ul{display:flex;gap:clamp(14px,2.2vw,30px);margin-left:auto;flex-wrap:wrap} .nav ul a{font-size:14px;font-weight:600;color:var(--steel);padding:6px 0; border-bottom:2px solid transparent;transition:border-color .15s,color .15s} .nav ul a:hover,.nav ul a[aria-current]{color:var(--ink);border-color:var(--brand)} .btn{display:inline-block;background:var(--brand-btn);color:#fff;font-weight:700; font-size:14px;padding:13px 24px;border:1px solid var(--brand-btn);border-radius:2px; transition:background .15s,border-color .15s} .btn:hover{background:var(--brand-ink);border-color:var(--brand-ink)} .btn-ghost{background:transparent;color:var(--steel);border-color:var(--line)} .btn-ghost:hover{background:var(--paper);border-color:var(--steel);color:var(--ink)} /* Mobile nav. Deviates from the brief in one respect, deliberately: the brief's version hides #menu (`display:none`) by default at <=820px and only shows it via a JS-added `.open` class. Task 10 is what adds that class — until it does, that CSS hides every nav link with nothing able to reveal them again, which fails the hard requirement that the nav stay usable with no JavaScript. So the polarity is inverted here: #menu is visible by default at any width, and a script would instead ADD `is-collapsed` to start it closed and manage `.nav-toggle`'s aria-expanded in lockstep from its own init onward. Until such a script exists, `.nav-toggle` stays hidden — gated on `.is-ready` below, which only a script can add — and the full link list is already on the page — degraded but reachable. */ .nav-toggle{display:none;appearance:none;background:none;border:1px solid var(--line); border-radius:2px;padding:9px 12px;cursor:pointer;color:var(--ink);font:inherit} @media (max-width:820px){ .nav-toggle.is-ready{display:block;margin-left:auto} .nav ul{flex-basis:100%;flex-direction:column;gap:0;padding-bottom:12px} .nav ul.is-collapsed{display:none} .nav ul li{border-top:1px solid var(--line)} .nav ul a{display:block;padding:13px 0;border-bottom:0} .nav .wrap{flex-wrap:wrap} .nav > .wrap > .btn{display:none} } .band{background:var(--steel);color:#fff} .band .wrap{display:grid;gap:clamp(24px,4vw,50px); grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .band h2{color:#fff;font-size:clamp(24px,3vw,34px);line-height:1.14} .band .ci{display:grid;gap:6px} .band .ci .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:#A8C4E4} .band .ci .v{font-size:17px;font-weight:600} .band .ci small{color:#A8C4E4;font-size:13px;font-weight:400} footer.f{background:var(--ink);color:#8FA7C2;font-size:14px} footer.f .wrap{display:grid;gap:clamp(26px,4vw,48px); grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); padding-top:clamp(44px,5vw,68px);padding-bottom:34px} footer.f h3{font-family:var(--mono);font-size:11px;letter-spacing:.16em; text-transform:uppercase;color:#fff;margin-bottom:16px;font-weight:700} footer.f li{margin-bottom:9px} footer.f a:hover{color:#fff} /* .logo-mark's base colour is --ink, invisible on this footer's --ink ground, so restate the e/v/oo glyphs in white here. n/lab stay --brand — .logo-mark i/b already win that at higher specificity, no override needed. */ footer.f .logo-mark{color:#fff} .fbot{border-top:1px solid #1E3A5F} .fbot .wrap{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between; padding-top:20px;padding-bottom:20px;font-size:13px;color:#8FA7C2} /* ========================================================================== Home page — hero, pillars, featured project, testimonials, tech stack. Ported from mockups/index.html variant A (lines 57, 59, 82–84, 108–205, 233–235), `.v-a ` stripped. Includes `.svc`/`.steps` (services grid, six-stage approach) even though this page's own markup does not use them — Task 5's brief explicitly names them as consumed from here ("Interfaces: Consumes … the .svc / .steps CSS added in Task 4"), so they belong in this shared, append-only stylesheet now rather than risking a duplicate rule when /our-services is built. `.eyebrow`, the h1/h2/h3/.num font rule and `.g3` are not in the brief's own CSS line list for this step, but every ported section here uses them — without this the eyebrow labels above each heading and the pillar/testimonial grids would render as unstyled paragraph text and stacked blocks, not the approved design. ========================================================================== */ .eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700} .eyebrow{font-family:var(--mono);color:var(--brand-ink);letter-spacing:.16em;font-weight:700} h1,h2,h3,.num{font-family:var(--disp);font-weight:600; letter-spacing:.005em;text-wrap:balance;color:var(--ink)} .g3{display:grid;gap:clamp(20px,2.6vw,34px);grid-template-columns:repeat(auto-fit,minmax(250px,1fr))} .hero{background: linear-gradient(180deg,var(--white) 0%,var(--paper) 100%); border-bottom:1px solid var(--line);position:relative;overflow:hidden} .hero::before{content:"";position:absolute;inset:0; background-image:linear-gradient(var(--line) 1px,transparent 1px), linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:64px 64px;opacity:.5; -webkit-mask-image:radial-gradient(120% 90% at 78% 40%,#000 20%,transparent 72%); mask-image:radial-gradient(120% 90% at 78% 40%,#000 20%,transparent 72%)} .hero .wrap{position:relative;display:grid;gap:clamp(32px,5vw,64px); grid-template-columns:minmax(0,7fr) minmax(280px,5fr);align-items:center; padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(56px,7vw,96px)} @media (max-width:900px){.hero .wrap{grid-template-columns:1fr}} .hero h1{font-size:clamp(34px,5.1vw,60px);line-height:1.06;letter-spacing:-.005em; margin-top:18px} .hero p{font-size:clamp(16px,1.5vw,19px);color:var(--slate);margin-top:20px;max-width:52ch} .hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px} .panel{background:var(--white);border:1px solid var(--line); border-top:3px solid var(--ink);border-radius:2px} .panel h2{font-family:var(--mono);font-size:11px;letter-spacing:.16em; text-transform:uppercase;color:var(--mute);padding:18px 22px; border-bottom:1px solid var(--line);font-weight:700} .panel dl{margin:0;display:grid} .panel .row{display:flex;justify-content:space-between;align-items:baseline; gap:16px;padding:15px 22px;border-bottom:1px solid var(--line)} .panel .row:last-child{border-bottom:0} .panel dt{font-size:13.5px;color:var(--slate)} .panel dd{margin:0;font-family:var(--disp);font-size:22px;font-weight:600; color:var(--ink);font-variant-numeric:tabular-nums} .sect-head{display:grid;gap:14px;padding-bottom:clamp(30px,4vw,48px); border-bottom:1px solid var(--line);margin-bottom:clamp(30px,4vw,48px)} .sect-head h2{font-size:clamp(25px,3.1vw,38px);line-height:1.15} .sect-head p{color:var(--slate);max-width:66ch;font-size:16.5px} .pillar{border-top:3px solid var(--brand);padding-top:22px} .pillar h3{font-size:20px;line-height:1.25;margin-bottom:12px} .pillar p{color:var(--slate);font-size:15.5px} .pillar .more{display:inline-block;margin-top:18px;font-size:13.5px;font-weight:700; color:var(--steel);border-bottom:1px solid var(--line);padding-bottom:2px} .pillar .more:hover{color:var(--brand-ink);border-color:var(--brand-ink)} .alt{background:var(--paper);border-top:1px solid var(--line); border-bottom:1px solid var(--line)} .svc{display:flex;gap:16px;align-items:flex-start;background:var(--white); border:1px solid var(--line);border-radius:2px;padding:22px 24px; transition:border-color .15s,box-shadow .15s} .svc:hover{border-color:var(--steel);box-shadow:0 2px 0 var(--brand)} .svc .n{font-family:var(--mono);font-size:12px;color:var(--brand-ink);font-weight:700; padding-top:3px} .svc h3{font-size:16.5px;margin-bottom:6px} .svc p{font-size:14px;color:var(--slate)} .steps{counter-reset:s;display:grid;gap:0; grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} .step{padding:26px 24px;border:1px solid var(--line);margin:-1px 0 0 -1px} .step .num{display:block;font-family:var(--mono);font-size:12px;font-weight:700; color:var(--brand-ink);margin-bottom:12px;letter-spacing:.1em} .step h3{font-size:16px;margin-bottom:8px} .step p{font-size:14px;color:var(--slate)} .feat{background:var(--ink);color:#DCE6F2} .feat .wrap{display:grid;gap:clamp(30px,4.5vw,64px); grid-template-columns:repeat(auto-fit,minmax(290px,1fr));align-items:center} .feat .eyebrow{color:#FF7A66} .feat h2{color:#fff;font-size:clamp(26px,3.4vw,42px);line-height:1.12;margin:14px 0 20px} .feat p{color:#B9CADF;font-size:16px;margin-bottom:14px;max-width:56ch} .feat .meta{display:grid;gap:0;border-top:1px solid #1E3A5F;margin-top:26px} .feat .meta div{display:flex;justify-content:space-between;gap:16px;padding:13px 0; border-bottom:1px solid #1E3A5F;font-size:14px} .feat .meta dt{color:#7C93B0} .feat .meta dd{margin:0;color:#fff;font-weight:600;text-align:right} .feat .viz{aspect-ratio:4/3;border:1px solid #1E3A5F;background:#0E2C51; border-radius:2px;padding:22px;display:flex;flex-direction:column;gap:14px;min-height:240px} .feat .bars{display:flex;align-items:flex-end;gap:8px;flex:1} .feat .bars span{flex:1;background:linear-gradient(180deg,#2E6DB4,#134074);border-radius:1px} .feat .bars span:nth-child(4){background:linear-gradient(180deg,#FF6A52,#FF361F)} .feat .viz .cap{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em; text-transform:uppercase;color:#9DB3CB} table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px} th{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--mute);font-weight:700;padding:0 18px 12px 0; border-bottom:1px solid var(--ink)} td{padding:15px 18px 15px 0;border-bottom:1px solid var(--line);vertical-align:top} td:first-child{font-weight:600;white-space:nowrap} td.c{color:var(--slate)} .chips{display:flex;flex-wrap:wrap;gap:6px} .chips span{font-family:var(--mono);font-size:11.5px;background:var(--paper); border:1px solid var(--line);padding:4px 9px;border-radius:2px;color:var(--steel)} .quote{background:var(--white);border:1px solid var(--line); border-left:3px solid var(--brand);padding:28px;border-radius:2px; display:flex;flex-direction:column;gap:18px} .quote p{font-size:15.5px;color:var(--ink);flex:1} .quote footer{border-top:1px solid var(--line);padding-top:16px} .quote .who{font-weight:700;font-size:14.5px} .quote .role{font-size:13px;color:var(--mute)} /* Eyebrows sit inside .hero / .sect-head / .feat, whose own `p` rules score (0,1,1) and would otherwise beat `.eyebrow` at (0,1,0) — flattening the eyebrow into body copy (the specificity numbers here are one class lower than the mockup's own comment, since `.v-a ` no longer adds a class to every selector). Re-assert as p.eyebrow (0,1,1), placed after those rules so it wins the tie on source order. */ p.eyebrow{font-family:var(--mono);font-size:11px;color:var(--brand-ink); letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin-top:0;max-width:none} .feat p.eyebrow{color:#FF7A66} /* ========================================================================== Portfolio page — selected-work table: caption + real row headers. Ported from mockups/index.html variant A (lines 697–713), `.v-a ` stripped. Two rules, both needed for task-6-brief.md's accessibility ask ("A screen reader should be able to navigate it cell by cell and know what each value refers to"), not just the caption rule the brief names: - `table caption` — the brief's own rule, left-aligned label above the table (`.eyebrow`'s class colour still wins over this rule's `color`, since a class always outranks a two-type-selector rule regardless of source order — deliberate, not a bug: it keeps the caption in the same brand-ink eyebrow colour every other eyebrow on the site uses). - `th[scope="row"]` — the brief describes this as `scope="row"` on the first-column ``, but `scope` is only a valid attribute on `` (MDN/WHATWG; a `` doesn't expose row-header semantics to a screen reader no matter what attribute is added to it — see WCAG technique H63). The first-column cells were made `` instead, which needs resetting back to a normal data-cell look (bold, left- aligned, regular body type) since this sheet's one existing `th` rule above assumes a `` column header. An attribute selector, so it wins on specificity without touching that rule or matching any table that doesn't use scope="row" — the tech-stack tables on this and other pages are untouched. ========================================================================== */ table caption{text-align:left;padding-bottom:14px;color:var(--mute)} th[scope="row"]{font:inherit;font-weight:600;text-align:left;text-transform:none; letter-spacing:normal;color:inherit;white-space:nowrap;padding:15px 18px 15px 0; border-bottom:1px solid var(--line);vertical-align:top} /* ========================================================================== Contact page — form. Task 7's own addition, given verbatim by the brief. `#12683C` (.form-status[data-state="ok"]) is 6.4:1 on white — do not lighten it, the audit's contrast check (stricter than axe's, which is disabled here) will reject anything under 4.5:1 at this font size/weight. ========================================================================== */ .field{display:grid;gap:7px;margin-bottom:22px} .field label{font-size:14px;font-weight:600;color:var(--ink)} .field .opt{font-weight:400;color:var(--mute)} .field input,.field textarea{font:inherit;font-size:15.5px;color:var(--ink); background:var(--white);border:1px solid var(--line);border-radius:2px; padding:12px 14px;width:100%;transition:border-color .15s} .field input:focus,.field textarea:focus{border-color:var(--steel);outline:none} .field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--brand-ink); outline-offset:1px} .field textarea{resize:vertical;min-height:150px} .field .err{font-size:13.5px;color:var(--brand-ink);font-weight:600} .field [aria-invalid="true"]{border-color:var(--brand-ink)} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .form-status{margin-top:16px;font-size:15px;min-height:1.6em} .form-status[data-state="ok"]{color:#12683C;font-weight:600} .form-status[data-state="error"]{color:var(--brand-ink);font-weight:600} /* Error pages (404, 500). */ .lede{max-width:62ch;color:var(--slate);font-size:17px;margin-top:16px} .err-links{margin-top:28px;display:grid;gap:12px;max-width:62ch} .err-links li{padding-bottom:12px;border-bottom:1px solid var(--line);color:var(--slate)} .err-links a{font-weight:700;color:var(--steel);border-bottom:1px solid var(--line)} .err-links a:hover{color:var(--brand-ink);border-color:var(--brand-ink)} /* ========================================================================== Case-study pages (/work/*). No new colour or type scale — everything below reuses the existing tokens, and the technology lists reuse `.chips` from the home page's tech stack rather than inventing a second pill treatment. `.crumb` carries the current-page signal on these pages. None of the four nav links IS a case study, so `aria-current="page"` is removed from the nav there and lives on the last breadcrumb item instead — the only place it is truthful. See docs/partials.md. ========================================================================== */ /* One column, not the home page's 7fr/5fr split. Performance Bloc has no client logo to put in a second column — Datamento's mark is not in the source material — so a two-column hero would render an empty half on one of the five pages and a filled half on the other four. */ .hero.case .wrap{grid-template-columns:minmax(0,1fr)} .crumb{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--mute);margin-bottom:26px} .crumb ol{display:flex;flex-wrap:wrap;gap:8px} .crumb li+li::before{content:"/";padding-right:8px;color:var(--line)} .crumb a{color:var(--steel);border-bottom:1px solid var(--line)} .crumb a:hover{color:var(--brand-ink);border-color:var(--brand-ink)} .crumb [aria-current="page"]{color:var(--ink);font-weight:700} /* The client mark sits above the eyebrow. Height-capped rather than width-capped: the marks have very different aspect ratios (Lindab is a wide wordmark, Alisca nearly square) and matching their optical weight means matching height, not width. */ .case-logo{height:clamp(36px,4.4vw,52px);width:auto;margin-bottom:24px} /* Definition list, not a table: this is four label/value pairs about one subject, which is what
is for — a table would claim a row/column relationship that isn't there. */ .case-meta{display:grid;gap:18px 34px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); border-top:1px solid var(--ink);border-bottom:1px solid var(--line); padding:24px 0;margin-top:clamp(28px,4vw,40px)} .case-meta dt{font-family:var(--mono);font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--mute);font-weight:700;margin-bottom:7px} .case-meta dd{font-size:15.5px;font-weight:600;color:var(--ink)} .case-body{max-width:68ch} .case-body p{margin-top:18px;color:var(--slate);font-size:16.5px} .case-body h2{margin-top:clamp(40px,5vw,60px)} .case-body h3{margin-top:30px;font-size:17px} .case-body ul{margin-top:16px;display:grid;gap:10px;list-style:none} .case-body li{position:relative;padding-left:22px;color:var(--slate);font-size:16px} /* A decorative marker, so it is drawn rather than typed — the list already conveys its structure through