/* ========================================================================== Storey Team — Market Updates Brand system per ST_BrandGuide: Dark Blue #132A54, Off-White #EDE8DC, Black #000000. Body type Montserrat (brand font, Google Fonts). FONT SWAP — when the Quiche Sans web licence is in place: add the Adobe Fonts to each page's , then change --font-display below to: 'quiche-sans', Georgia, serif; Nothing else needs to change. ========================================================================== */ :root{ /* brand */ --navy: #132A54; --cream: #EDE8DC; --ink: #12120F; /* derived, hue-biased toward the brand navy */ --navy-deep: #0D1D3B; --navy-mid: #3A517E; --navy-soft: #93A2BC; --navy-tint: #67799A; --paper: #F6F3EC; --rule: #DAD3C4; --rule-soft: #E7E1D4; --ink-soft: #56544C; --ink-mute: #7C7970; --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; --w: 860px; } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; } .wrap{ width:100%; max-width:var(--w); margin:0 auto; padding:0 28px; } /* ---------- masthead ---------- */ .masthead{ background:var(--navy); color:var(--cream); } .masthead .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:22px; padding-bottom:22px; } .masthead img{ display:block; width:216px; height:auto; } .masthead nav{ display:flex; gap:26px; } .masthead a{ color:var(--cream); text-decoration:none; font-size:12px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; padding-bottom:2px; border-bottom:1px solid transparent; } .masthead a:hover, .masthead a:focus-visible{ border-bottom-color:var(--cream); } /* ---------- hero ---------- */ .hero{ background:var(--navy); color:var(--cream); } .hero .wrap{ padding-top:8px; padding-bottom:60px; } .eyebrow{ font-size:11.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--navy-soft); margin:0 0 16px; } .hero .eyebrow{ color:#A9B7D0; } .hero h1{ font-family:var(--font-display); font-size:clamp(32px,5.2vw,50px); line-height:1.1; font-weight:800; letter-spacing:-.022em; text-wrap:balance; margin:0 0 18px; color:#fff; } .hero .standfirst{ font-size:clamp(17px,2.2vw,20px); line-height:1.6; margin:0; max-width:60ch; color:#D6D2C6; } .hero .meta{ margin:26px 0 0; padding-top:20px; border-top:1px solid rgba(237,232,220,.22); font-size:13px; letter-spacing:.04em; color:#A9B7D0; display:flex; flex-wrap:wrap; gap:6px 14px; } .hero .meta span{ white-space:nowrap; } /* ---------- body ---------- */ main{ padding:56px 0 0; } section{ margin:0 0 52px; } h2{ font-family:var(--font-display); font-size:26px; line-height:1.22; font-weight:800; letter-spacing:-.018em; text-wrap:balance; margin:0 0 6px; } h2 .num{ display:inline-block; min-width:1.5em; color:var(--navy-soft); font-weight:700; } .dek{ margin:0 0 26px; font-size:14px; color:var(--ink-soft); } p{ margin:0 0 18px; max-width:68ch; } a{ color:var(--navy); } strong{ font-weight:700; } .rule{ border:0; border-top:1px solid var(--rule); margin:0 0 40px; } /* ---------- stat strip ---------- */ .stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); margin:0 0 52px; } .stat{ background:var(--paper); padding:18px 18px 16px; } .stat .k{ font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-mute); margin:0 0 8px; } .stat .v{ font-family:var(--font-display); font-size:27px; line-height:1; font-weight:800; letter-spacing:-.02em; color:var(--navy); margin:0 0 6px; font-variant-numeric:tabular-nums; } .stat .d{ font-size:12.5px; font-weight:600; color:var(--ink-soft); margin:0; } /* ---------- charts ---------- */ .chart{ margin:0 0 22px; } .bar-row{ margin:0 0 15px; } .bar-row:last-child{ margin-bottom:0; } .bar-label{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:13.5px; font-weight:600; margin:0 0 6px; } .bar-label .sub{ font-weight:400; color:var(--ink-mute); font-size:12.5px; } .track{ background:var(--rule-soft); height:28px; position:relative; } .fill{ height:100%; background:var(--navy); display:flex; align-items:center; padding-left:11px; color:#fff; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; } .fill.soft{ background:var(--navy-soft); color:var(--navy); } .fill.mid{ background:var(--navy-mid); } .fill.out{ background:none; color:var(--ink); padding-left:0; } .fill.out span{ padding-left:11px; } .chart-note{ font-size:12px; color:var(--ink-mute); margin:12px 0 0; display:flex; gap:20px; flex-wrap:wrap; } .chart-note i{ font-style:normal; display:flex; align-items:center; gap:7px; } .swatch{ width:11px; height:11px; display:inline-block; } /* grouped bar chart: sub-heading inside a chart */ .group-head{ font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-mute); margin:0 0 10px; padding-top:4px; } .group-head + .bar-row{ margin-top:0; } .bar-group + .bar-group{ margin-top:24px; } /* stacked composition bar */ .stack{ display:flex; height:38px; margin:0 0 14px; } .stack span{ display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:700; color:#fff; font-variant-numeric:tabular-nums; } .stack span + span{ margin-left:2px; } /* month table */ .months{ width:100%; border-collapse:collapse; font-size:14px; } .months th{ text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-mute); padding:0 0 10px; font-weight:700; } .months th:last-child, .months td:last-child{ text-align:right; } .months td{ padding:0 0 7px; vertical-align:middle; } .months td.m{ width:52px; font-weight:600; } .months td.p{ width:104px; font-variant-numeric:tabular-nums; color:var(--ink-soft); } .months tr.now td{ font-weight:700; color:var(--ink); } .months .minitrack{ background:var(--rule-soft); height:20px; } .months .minifill{ height:100%; background:var(--navy-soft); display:flex; align-items:center; padding-left:9px; font-size:12px; font-weight:600; color:var(--navy); font-variant-numeric:tabular-nums; } .months .minifill.dark{ background:var(--navy); color:#fff; } /* ---------- regional table ---------- */ .tbl-scroll{ overflow-x:auto; } table.data{ width:100%; border-collapse:collapse; font-size:14.5px; min-width:520px; } table.data thead th{ background:var(--navy); color:var(--cream); text-align:right; font-size:10.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; padding:11px 14px; } table.data thead th:first-child{ text-align:left; } table.data td{ padding:11px 14px; text-align:right; border-bottom:1px solid var(--rule-soft); font-variant-numeric:tabular-nums; } table.data td:first-child{ text-align:left; font-weight:600; } table.data tbody tr:last-child td{ border-bottom:0; } /* ---------- takeaway ---------- */ .takeaway{ background:var(--cream); border-left:4px solid var(--navy); padding:20px 24px; margin:26px 0 0; } .takeaway p{ margin:0; font-size:15.5px; max-width:none; } .takeaway .lede{ font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--navy); margin:0 0 7px; display:block; } /* ---------- guidance list ---------- */ .guide{ display:grid; gap:26px; } .guide h3{ font-family:var(--font-display); font-size:16px; font-weight:700; letter-spacing:-.01em; margin:0 0 5px; color:var(--navy); } .guide p{ margin:0; font-size:16px; } /* ---------- CTA ---------- */ .cta{ background:var(--navy); color:var(--cream); margin:0; padding:52px 0 56px; } .cta h2{ color:#fff; margin-bottom:12px; } .cta p{ color:#D6D2C6; max-width:58ch; } .cta .eyebrow{ color:#A9B7D0; } .btn{ display:inline-block; background:var(--cream); color:var(--navy); text-decoration:none; font-size:15px; font-weight:700; letter-spacing:.01em; padding:15px 30px; border:2px solid var(--cream); } .btn:hover, .btn:focus-visible{ background:#fff; border-color:#fff; } .btn.ghost{ background:none; color:var(--cream); } .btn.ghost:hover, .btn.ghost:focus-visible{ background:var(--cream); color:var(--navy); } .cta .split{ margin-top:36px; padding-top:32px; border-top:1px solid rgba(237,232,220,.22); } /* ---------- archive index ---------- */ .issues{ border-top:1px solid var(--rule); } .issue{ display:grid; grid-template-columns:132px 1fr auto; gap:28px; align-items:baseline; padding:26px 0; border-bottom:1px solid var(--rule); text-decoration:none; color:inherit; } .issue:hover, .issue:focus-visible{ background:var(--cream); } .issue .date{ font-size:11.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-mute); padding-top:5px; } .issue h3{ font-family:var(--font-display); font-size:20px; font-weight:700; letter-spacing:-.015em; margin:0 0 6px; color:var(--navy); text-wrap:balance; } .issue p{ margin:0; font-size:15px; color:var(--ink-soft); max-width:52ch; } .issue .go{ font-size:13px; font-weight:700; color:var(--navy); white-space:nowrap; padding-top:5px; } .upcoming{ padding:26px 0; border-bottom:1px solid var(--rule); display:grid; grid-template-columns:132px 1fr; gap:28px; align-items:baseline; } .upcoming .date{ font-size:11.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-mute); padding-top:2px; } .upcoming p{ margin:0; font-size:15px; color:var(--ink-mute); } /* ---------- footer ---------- */ footer{ background:var(--navy-deep); color:#9FA9BC; padding:44px 0 52px; font-size:12.5px; line-height:1.7; } footer .wrap > *{ max-width:74ch; } footer img{ width:184px; height:auto; display:block; margin:0 0 22px; } footer p{ margin:0 0 12px; max-width:74ch; } footer a{ color:#C6CEDD; } footer .legal{ font-size:11.5px; color:#7F8A9E; } /* ---------- responsive ---------- */ @media (max-width:720px){ body{ font-size:16px; } .wrap{ padding:0 20px; } .stats{ grid-template-columns:repeat(2,1fr); } .masthead .wrap{ flex-direction:column; align-items:flex-start; gap:16px; } .issue{ grid-template-columns:1fr; gap:8px; } .issue .date{ padding-top:0; } .issue .go{ padding-top:4px; } .upcoming{ grid-template-columns:1fr; gap:8px; } .months td.p{ width:auto; } } @media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } } a:focus-visible, .issue:focus-visible{ outline:2px solid var(--navy); outline-offset:3px; } .masthead a:focus-visible, .cta a:focus-visible{ outline-color:var(--cream); }