/* News briefs — /news/ =========================================================================== THE BOSS'S DESIGN, IN OUR COLOURS. `lmd-webpage-design-1` (Branding Proposal 1, locked by Al 2026-08-25) is the layout, and it is reproduced here value for value: the serif headline at clamp(30px, 4.6vw, 44px)/1.08, the 720px article measure, the 65ch paragraph measure at 17px, the eyebrow-and-date kicker on one baseline, the figure band with its chip label and centred serif numerals, the accent-barred read box, the 2px-ruled source block. Nothing about the composition was re-judged. ONLY THE PALETTE CHANGED (Joshua, 2026-08-27: "make it same as my boss all just change the color to our brand kit"), token for token: --ink #001A3D -> var(--ink) #0b1149 --ink-2 #43536B -> var(--ink-soft) #5c618c --gold #AD8330 -> var(--red) #e9292b --gold-deep#7A5A14 -> var(--red) #e9292b (see below) --tint #EAF1F8 -> #eef0f6 a wash of our navy, not their blue --ivory #F7F1E4 -> #fdf1f1 a wash of our red, not their cream --line #D8E0EB -> #dfe2ec --ground/--card/--num follow --paper and --ink. TWO deliberate departures, both forced by where this design now lives: 1. GOLD WAS TWO VALUES, OURS IS ONE. The reference pairs #AD8330 with a darker #7A5A14 for small text and links, because gold is unreadable at 11px on white. Our brand red is a single locked value and the house rule is that it stays exact rather than being darkened for a contrast score, so both map to var(--red). Measured: #e9292b on white is 4.35:1 — a hair under AA for small text, and identical to what buyers already ships for every .eyebrow and .stat__label on the site. Consistent beats marginally better-scoring-but-different. 2. NO DARK THEME. The reference defines a full prefers-color-scheme dark palette. It can, because it ships its own navy header and footer. These pages sit between buyers' header and footer, which are light and have no dark variant — so a dark article would render as a dark stripe between two light bands and read as a broken page rather than a theme. The reference's light palette is its default and is what is ported. Colours resolve through tokens.css, so re-copying that file from buyers keeps these pages on brand automatically. */ .brief-page { background: var(--paper); color: var(--ink); } /* The reference's `.article`: 720px, and its own padding. The FONT is the reference's too, and stating it here is not cosmetic. The reference's body is Arial; our chrome sets Roboto on , and `.brief__p` is measured in `ch` — so inheriting Roboto silently widened the paragraph measure from the reference's 614.5px to 621.0px. Same rule, different glyph width. Scoped to the article so the header and footer stay on our own type. */ .brief { max-width: 720px; margin: 0 auto; padding: 46px 24px 30px; font-family: Arial, Helvetica, sans-serif; } /* Eyebrow and date share one baseline, which is what stops the date reading as a second line of label. */ .brief__kicker { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; } .brief__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); } .brief__date { font-size: 12.5px; color: var(--ink-soft); } /* SERIF, like the reference. This is the one place on our estate that is not Archivo or Roboto, and it is deliberate: the serif headline is the design. Georgia first, because it is the font the reference actually renders in. */ .brief__title { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: clamp(30px, 4.6vw, 44px); line-height: 1.08; letter-spacing: 0; text-wrap: balance; color: var(--ink); margin: 12px 0 18px; } .brief__byline { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); padding-bottom: 18px; border-bottom: 1px solid #dfe2ec; margin-bottom: 24px; } .brief__p { font-size: 17px; line-height: 1.55; max-width: 65ch; margin-bottom: 18px; color: var(--ink); } /* ── The figure band ────────────────────────────────────────────────────── The reference's `.whyband`: a tinted block, a solid chip for the label, and the numerals centred in serif. ONE change to the grid and it is not cosmetic. The reference hardcodes repeat(3, 1fr); the MSC brief has NO band and a future one may carry two, because the writer will not invent a figure to fill a cell. auto-fit holds the reference's three-across whenever there are three, and does something sensible rather than leaving an empty column when there are not. */ .brief__band { background: #eef0f6; padding: 24px; margin: 26px 0; } .brief__bandlab { display: inline-block; background: var(--ink); color: var(--paper); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding: 5px 12px; margin-bottom: 16px; } .brief__cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); text-align: center; gap: 8px; margin: 0; padding: 0; } .brief__n { display: block; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; } .brief__l { display: block; margin-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); } /* ── Our own read ───────────────────────────────────────────────────────── The reference's `.sessionbox`: a 4px accent bar and a warm wash, which is what separates our reading from the reported facts above it. THIS BLOCK KEEPS THE REFERENCE'S GOLD — bar AND wash (Joshua, 2026-08-27: "gold also the background not red"). It is the one place the recolour is walked back, and now it is walked back completely: a gold bar over a red-tinted wash was the worst of both, two accent families stacked in one box. Only the LABEL stays var(--red), which is what still ties the block to our palette. Both hexes are declared HERE rather than added to tokens.css, because that file is a byte-for-byte copy of buyers' and re-copied whenever the brand moves; tokens added to it would be lost on the next copy and take this block with them. */ .brief__box { /* LIGHTER (Joshua, 2026-08-27: "make lighter the gold bro"). #C9A050 is not a value I mixed — it is the reference's OWN second gold, the one its dark theme uses. #AD8330 read brown at 4px against a near-white wash; this is the same hue with the brightness the bar needed to look like gold. Staying inside Al's two values means the block still matches his kit exactly. */ --brief-gold: #C9A050; /* the reference's dark-theme --gold */ /* The wash is now the BAR at 10%, not the reference's flat #F7F1E4. Two reasons. It is lighter — #F7F1E4 read as tan next to the band's cool grey directly above it, which is what made the block look heavy. And deriving it from the bar means the two can never drift: change --brief-gold and the wash follows, instead of someone lightening one and leaving the other. */ border-left: 4px solid var(--brief-gold); background: rgba(201, 160, 80, 0.1); padding: 18px 22px; margin: 26px 0; } .brief__box .brief__p { font-size: 15.5px; max-width: none; margin: 10px 0 0; } /* ── Source ─────────────────────────────────────────────────────────────── The reference's `.srcblock`, on its 2px accent rule. */ .brief__src { border-top: 2px solid var(--red); margin-top: 30px; padding-top: 14px; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); } .brief__src b { display: block; margin-bottom: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); } .brief__src a { color: var(--red); } .brief__src a:hover, .brief__src a:focus-visible { color: var(--ink); } .brief__note { margin-top: 10px; font-size: 12.5px; line-height: 1.6; } /* ── The index ──────────────────────────────────────────────────────────── Not in the reference, which is a single article page — so it is built from the same parts rather than invented: the kicker eyebrow, the serif headline one size down, and the byline's hairline as the separator. */ .brief-index { font-family: Arial, Helvetica, sans-serif; max-width: 720px; margin: 0 auto; padding: 46px 24px 40px; } .brief-index__lede { font-size: 17px; line-height: 1.55; max-width: 65ch; color: var(--ink-soft); margin-bottom: 8px; } .brief-index__list { margin: 0; padding: 0; } .brief-card { padding: 26px 0; border-bottom: 1px solid #dfe2ec; } .brief-card:last-child { border-bottom: 0; } .brief-card__title { display: block; margin: 10px 0 0; font-family: Georgia, 'Times New Roman', serif; font-size: 25px; line-height: 1.18; color: var(--ink); text-decoration: none; text-wrap: balance; transition: color 0.15s ease; } .brief-card__title:hover, .brief-card__title:focus-visible { color: var(--red); } .brief-card__meta { margin: 9px 0 0; font-size: 12.5px; color: var(--ink-soft); } /* The staging gate. Not from the reference — it is ours, and it only ever renders while a brief's catalog row says it has not cleared its two gates. */ .brief-gate { margin: 0 0 26px; padding: 15px 18px; border: 1px solid rgba(233, 41, 43, 0.35); border-left: 4px solid var(--red); background: #fdf1f1; } .brief-gate__t { margin: 0 0 5px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); } .brief-gate__p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); } .brief-card__flag { display: inline-block; margin-left: 8px; padding: 2px 8px; border: 1px solid rgba(233, 41, 43, 0.35); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--red); } /* The reference's own single breakpoint. */ @media (max-width: 560px) { .brief__cells { grid-template-columns: 1fr; gap: 18px; } } /* ── Small screens ──────────────────────────────────────────────────────── The reference stops at the one breakpoint above, because it only ever had to stack the band. It keeps 24px of padding at every width, which on a 320px phone leaves the text 272px — readable, but the blocks then sit tight to both edges with nothing between them and the viewport. So the gutters step down, and the two inset blocks step down with them: a 24px inset inside an 18px gutter is most of a narrow screen spent on padding. Type is deliberately NOT reduced — 17px is right for a phone, and shrinking it would be a change to the design rather than a fit to the device. */ @media (max-width: 480px) { .brief, .brief-index { padding-left: 18px; padding-right: 18px; padding-top: 32px; } .brief__band { padding: 18px; } .brief__box { padding: 16px 18px; } .brief-gate { padding: 14px 16px; } /* The index headline is a link, not a hero — it does not need the article's full clamp on a phone. */ .brief-card__title { font-size: 21px; } }