:root { color-scheme: light; --ink:#222; --muted:#5d5d5d; --line:#dedede; --accent:#a60011; }
* { box-sizing:border-box }
html { font-family:Arial,Helvetica,sans-serif; background:#fff; color:var(--ink) }
body { margin:0; min-width:320px }
a { color:inherit }
button { font:inherit }
.intro { position:fixed; inset:0; z-index:20; display:grid; place-items:center; background:#fff; overflow:hidden; transition:opacity .45s ease,visibility .45s ease }
.intro img { grid-area:1/1; display:block; width:min(100vw,1920px); height:auto; max-height:100vh; object-fit:contain }
.intro .intro-gif { position:relative; z-index:1 }
.intro .intro-gif.finished { visibility:hidden }
.intro.done { opacity:0; visibility:hidden; pointer-events:none }
.site.intro-pending { visibility:hidden }
.site { min-height:100vh }
.header { min-height:112px; border-bottom:1px solid var(--line); padding:18px clamp(20px,2.7vw,56px); display:flex; align-items:center; gap:clamp(16px,2.2vw,46px); white-space:nowrap; overflow-x:auto; overscroll-behavior-inline:contain; -webkit-overflow-scrolling:touch }
.nav { display:flex; align-items:center; justify-content:space-between; gap:clamp(16px,2vw,48px); flex:1; min-width:0 }
.nav-link { display:block; flex:0 1 auto; min-width:0; padding:10px 0; border-bottom:2px solid transparent }
.nav-link img { display:block; width:100%; height:auto; max-height:40px; object-fit:contain; object-position:left; filter:grayscale(1) brightness(.62); transition:filter .22s ease }
.nav-link[aria-current="page"] img,.nav-link:hover img { filter:none }
.nav-link[aria-current="page"] { border-color:var(--accent) }
.nav-link[data-brand=designing] { width:clamp(165px,16vw,315px) }
.nav-link[data-brand=build] { width:clamp(115px,11vw,215px) }
.nav-link[data-brand=news] { width:clamp(120px,11.5vw,225px) }
.nav-link[data-brand=silly] { width:clamp(110px,10.5vw,205px) }
.nav-link[data-brand=people] { width:clamp(125px,12vw,235px) }
.my-link { flex:none; padding:15px 19px; border:2px solid #333; text-decoration:none; letter-spacing:.14em; font-size:14px; white-space:nowrap }
.my-link[aria-current="page"] { background:#222; color:#fff }
.mobile-bar,.mobile-panel { display:none }
main { padding:clamp(34px,3vw,62px) clamp(24px,4.7vw,96px) 100px; max-width:1820px; margin:auto }
.eyebrow { margin:0 0 clamp(45px,5vw,80px); font-size:clamp(16px,1.5vw,28px); line-height:1.4; letter-spacing:.18em; font-weight:400 }
h1 { font-size:clamp(62px,10.5vw,205px); letter-spacing:-.075em; line-height:.94; margin:0; font-weight:800; max-width:1510px }
.accent { color:var(--accent) }
.section-head { display:flex; align-items:flex-end; gap:34px; flex-wrap:wrap; margin-bottom:40px }
.section-head h1 { font-size:clamp(64px,8vw,140px) }
.section-intro { max-width:620px; margin:24px 0 0; color:#343434; font-size:clamp(18px,1.7vw,25px); line-height:1.4 }
.rule { border:0; border-top:1px solid var(--line); margin:70px 0 0 }
.project-list { margin:0; padding:0; list-style:none }
.project-list li { border-bottom:1px solid var(--line); padding:27px 0; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px; align-items:center }
.project-list h2 { margin:0 0 8px; font-size:clamp(24px,3vw,42px); letter-spacing:-.045em }
.project-list p { margin:0; color:var(--muted); font-size:16px; line-height:1.45 }
.status { font-size:13px; letter-spacing:.14em; white-space:nowrap; text-transform:uppercase; color:var(--accent) }
.link-row { text-decoration:none; display:flex; justify-content:space-between; align-items:center; gap:20px }
.link-row:hover h2 { color:var(--accent) }
.secondary { color:var(--muted); font-size:16px; max-width:660px; line-height:1.55; margin-top:28px }
.site-footer { border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:28px; padding:28px clamp(24px,4.7vw,96px); font-size:14px }
.site-footer a { text-underline-offset:4px }
.back { display:inline-block; margin-bottom:50px; text-decoration:none; border-bottom:1px solid currentColor; font-size:14px; letter-spacing:.12em }
.back:hover { color:var(--accent) }
:focus-visible { outline:3px solid #222; outline-offset:4px }
@media(max-width:1150px) {
  .header { min-height:78px; padding:12px 22px; gap:20px }
  .nav { flex:none; justify-content:flex-start; gap:28px }
  .nav-link { flex:none; width:auto !important }
  .nav-link img { height:27px; max-height:none; width:auto; max-width:none }
  .my-link { padding:12px 16px }
}
@media(max-width:600px) {
  main { padding:35px 22px 70px }
  .eyebrow { margin-bottom:52px; font-size:15px }
  h1 { font-size:clamp(58px,15vw,100px) }
  .section-head h1 { font-size:clamp(55px,13vw,90px) }
  .project-list li { grid-template-columns:1fr; gap:9px }
  .rule { margin-top:55px }
  .header { padding:10px 18px; min-height:68px }
  .nav { gap:24px }
  .nav-link img { height:23px }
  .my-link { font-size:12px; padding:10px 13px }
}
@media(prefers-reduced-motion:reduce) { .intro,.nav-link img { transition:none } }

.news-topline { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:baseline; margin:48px 0 16px; border-top:1px solid var(--line); padding-top:15px; font-size:13px; letter-spacing:.12em; color:var(--muted) }
.news-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin-top:22px }
.news-card { border-top:2px solid #222; padding-top:18px }
.news-meta { color:var(--accent); font-size:13px; letter-spacing:.1em; text-transform:uppercase; margin:0 0 24px }
.news-card h2 { font-size:clamp(28px,2.7vw,42px); line-height:1.08; letter-spacing:-.045em; margin:0 0 18px }
.news-card h2 a { text-decoration:none }
.news-card h2 a:hover { color:var(--accent) }
.news-card p { font-size:16px; line-height:1.5; color:#454545; margin:0 }
.article { max-width:920px }
.article .back { margin-bottom:35px }
.article h1 { font-size:clamp(54px,7vw,116px); line-height:.98; margin:25px 0 35px }
.article .standfirst { font-size:clamp(21px,2.3vw,32px); line-height:1.38; max-width:800px; margin-bottom:75px }
.article h2 { font-size:26px; letter-spacing:-.03em; margin:50px 0 12px }
.article p { font-size:18px; line-height:1.65; max-width:760px }
.article .sources { border-top:1px solid var(--line); margin-top:65px; padding-top:25px }
.article .sources a { text-decoration-thickness:1px; text-underline-offset:3px }
.editorial-policy { margin:85px 0 0; max-width:680px; color:#666; font-size:14px; line-height:1.55 }
@media(max-width:800px) { .news-grid { grid-template-columns:1fr; gap:36px } }

/* News summary: same palette and typography as the existing site. */
.article .article-tldr{max-width:760px;margin:30px 0 54px;padding:24px 28px;border-left:4px solid var(--accent);background:#f8f2eb}
.article .article-tldr h2{font-size:14px;letter-spacing:.12em;margin:0 0 12px;color:var(--accent)}
.article .article-tldr p{margin:0;font-size:19px;line-height:1.55}
.article .article-tldr ul{margin:0;padding-left:22px;font-size:19px;line-height:1.55}
.article .article-tldr li+li{margin-top:10px}
@media(max-width:600px){.article .article-tldr{padding:20px;margin-bottom:38px}}