/* Press (rebuilt 12 Sep 2026 after Nuo: "way too basic", "full page width", "quicker to scroll", logos "much nicer"). page.css gives the tokens, nav, hero, chapter rail, mosaic tiles and lightbox; this file adds what is particular to the page. Every section runs the full width between the page gutters - no max-width column (Nuo, 12 Sep). */ section.ps{padding:72px var(--pad) 0} section.ps.first .hd{border-top:0;padding-top:0} /* straight under the hero: no rule above the first heading (the intro paragraph went on 12 Sep) */ section.ps:last-of-type{padding-bottom:96px} .ps .hd{border-top:1px solid rgba(0,0,0,.12);padding-top:28px;margin-bottom:26px;align-items:flex-end} .ps .hd h2{margin:0} .ps .hd p{margin:0;font-size:16px;line-height:1.45;color:#2b2926;max-width:56ch;text-align:right} .enq h2.caps,.ps h2.caps{font-size:clamp(28px,2.8vw,40px)} /* ---- awards: the grid takes two-thirds, the LinkedIn spotlight the third (Nuo, 13 Sep 2026); the card itself is ../awards.css ---- Four columns in the two-thirds (Nuo, of 3 / 4 / 5 offered: three rows, about the spotlight's height; at five the cards were ~160px on his screen and the longest prize ran to seven lines). Under 1100px the two stack, the grid goes to three columns at full width and the card sits left at 560px; under 860px two columns, as before. Nothing here styles .awt - audit_press.js checks the card's classes against this file. */ /* align-items:stretch, and the card a flex column that fills its cell (Nuo, 13 Sep 2026: "make sure the LinkedIn card is bottom aligned with the second row of the awards cards"): with eight awards the grid is exactly two rows of four, and the card's foot meets the second row's foot at EVERY width because the card takes the cell's height and the photograph takes what is left under the header (object-fit:cover - a sliver cropped on a ~1400px screen where the card is about the grid's height already, a letterbox on a 2,700px monitor where two rows are short). Since the same night the title sits on the heading row (.awhd.split below), so the card's HEAD meets the first row's head too - the column holds the card alone above 1100px. */ .awsplit{display:grid;grid-template-columns:2fr 1fr;gap:14px 28px;align-items:stretch} .awsplit.solo{display:block} .awg{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .awsplit.solo .awg{grid-template-columns:repeat(5,1fr)} /* the spotlight: the careers page's induction-day card, less LinkedIn's player - our header over the photograph, the caption laid on the photograph as their compact frame lays it, the whole card the link. The in-bug is the footer's white artwork inverted, 18px from the edge, as on Careers. */ .lipost{display:flex;flex-direction:column;min-height:0} /* THE CARD IS LEVEL WITH THE CARDS TOP AND BOTTOM, AND THE TITLE SITS ON THE HEADING ROW (13 Sep 2026, night - Nuo: "make the LinkedIn card both top and bottom aligned with the 2 rows of awards cards, display the text The Sunday Times Hundred 2025 above the LinkedIn card"). With the title inside the column the card started ~60px under the grid's top. So above 1100px: the heading row becomes the grid's own two columns (.awhd.split - the same 2fr 1fr and 28px gutter as .awsplit, so the title starts exactly at the card's left edge), "Awards" and the title on ONE BASELINE at the title's present size (his two answers), and the column's own .vhead is hidden - the card is the column's only child and stretch does the rest. Under 1100px the card stacks under the grid, the heading row is far from it, so the two swap: .vhead shows, .sptitle hides. press.js draws both; one is always display:none. */ .awhd.split{display:grid;grid-template-columns:2fr 1fr;gap:0 28px;align-items:baseline} .awhd .sptitle{margin:0;font-size:clamp(20px,1.6vw,24px)} .lipost .vhead{display:none;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;margin-bottom:14px;flex:none} .lipost .vhead h3{margin:0;font-size:clamp(20px,1.6vw,24px)} .licard{display:flex;flex-direction:column;flex:1;min-height:0;background:#fff;border-radius:16px;overflow:hidden;color:var(--ink);transition:transform .25s var(--ease),box-shadow .25s var(--ease)} @media (hover:hover){.licard:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.08)}} .lihead{display:flex;align-items:center;gap:12px;padding:14px 18px 14px 16px;flex:none} .liav{flex:0 0 48px;width:48px;height:48px;border-radius:8px;background:var(--sand);display:grid;place-items:center} .liav img{width:38px;height:auto;display:block} .liwho{display:flex;flex-direction:column;gap:2px;min-width:0} .liwho b{font-family:var(--head);font-weight:500;font-size:15px;letter-spacing:-0.01em;color:#111;line-height:1.2} .liwho span{font-size:13px;line-height:1.2;color:#5b5652} .limark{margin-left:auto;display:block;width:26px;height:26px;flex:0 0 26px} .limark img{width:100%;height:100%;display:block;filter:invert(1);opacity:.85;transition:opacity .2s} @media (hover:hover){.licard:hover .limark img{opacity:1}} .lipic{position:relative;display:block;flex:1;min-height:240px;background:#000;overflow:hidden} /* fills the card under the header; 240px is the least photograph worth showing */ .lipic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease)} /* absolute: its box is the slot's, whatever gave the slot its height */ @media (hover:hover){.licard:hover .lipic img{transform:scale(1.04)}} .licap{position:absolute;left:0;right:0;top:0;padding:14px 16px 44px;color:#fff;font-size:15px;line-height:1.35;background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,0));white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* one line, cut with an ellipsis as LinkedIn cuts it */ /* ---- coverage: the award card in the Awards section's geometry, with the Instagram post in the right third (Nuo, 27 Sep 2026) ---- ONE GRID OF FIVE COLUMNS, so the post can span rows 1-2 while the opened rows stay in four columns under it. The fifth column is (W - 28px)/3 + 14px and the post carries a 14px left margin: the post is then (W - 28)/3 wide with a 28px gutter, and each card is ((W - 28) x 2/3 - 42)/4 - exactly the Awards section's .awsplit 2fr 1fr / 28px gutter / four columns at 14px, so the two sections' edges line up at every width. The cards are pinned to columns 1-4 by :nth-of-type (the post is an