/* ------------------------------------------------------------------ */ /* TOKENS */ /* */ /* Every colour the site uses is declared once, here. Nothing below */ /* this block writes a hex value: a rule that hardcodes #fff is a rule */ /* the dark theme cannot reach, and hunting those down one at a time */ /* later is the expensive way to do this. */ /* */ /* The dark theme is ONE block. is always "light" or */ /* "dark"; render.js resolves "system" itself and listens for the OS */ /* flipping. That is why there is no prefers-color-scheme query here -- */ /* a second copy of the dark palette would drift out of step with the */ /* first inside a month. */ /* ------------------------------------------------------------------ */ :root{ /* base */ --ink:#14282b;--paper:#ffffff;--grey:#101c1c;--grey-2:#1c2a29;--line:#d6e2e2;--dot:#dce8e8; /* palette */ --navy:#0d2860; /* deepest, quote bar */ --royal:#1a4fa0; /* second voice, world column */ --ion:#0e6f74; /* primary petrol, brand and headings */ --ion-deep:#08484d; /* darker petrol */ --teal:#3aa8ac; /* turquoise accent */ --mint:#5fd6ad; /* bright accent, dark bars only */ --sea:#2e8f6e; /* sea green, positive */ --forest:#123a2e; /* dark forest, regional column */ --plum:#3d1b47; /* aubergine, sponsored and rare accents */ --ion-light:#4fa3a8; /* focus ring, must stay legible on white */ --ion-pale:#edf4f4; /* table header wash */ --navy-pale:#eef1f8; /* alternate wash */ /* semantics */ --up:#2e8f6e;--down:#b0473c;--wave:#0e6f74; /* surfaces and inversions */ --surface:#ffffff; /* cards, tables, panels, inputs */ --on-dark:#ffffff; /* text printed on a dark fill */ --shadow:rgba(20,40,43,.22); /* floating panels */ --mark:#fdf2c8; /* search hit highlight */ --tag-dark:#3a3a3a; /* expired tender tag */ /* the navy quote bar is dark in both themes, so these do not flip */ --q-dim:#8ea6cf; --q-down:#e8917f; /* independence band: light in both themes, for the same reason */ --ind-gold:#c9a24a;--ind-gold-soft:#e6d9b4; --ind-wash-a:#f6fafa;--ind-wash-b:#fbf6ea; --ind-navy:#12306b;--ind-body:#2f4a4c; /* publisher lockup */ --gmax-navy:#2a4879; --gmax-red:#ea3323; /* regulation lane: hairlines */ --rule-faint:rgba(42,72,121,.03); --rule-soft:rgba(42,72,121,.10); --rule-mid:rgba(42,72,121,.18); --rule-chip:rgba(42,72,121,.28); /* regulation lane: badges, by legal weight */ --reg-badge-bg:#eef1f6;--reg-badge-fg:#2a4879;--reg-badge-br:rgba(42,72,121,.22); --reg-hi-bg:#2a4879;--reg-hi-fg:#ffffff; --reg-mid-bg:#3f6bb5;--reg-mid-fg:#ffffff; --reg-low-bg:#dbe3f0;--reg-low-fg:#2a4879; --reg-accent:#ea3323; --reg-topic-fg:#3f6bb5; /* filter chips and show-all buttons */ --chip-bg:#ffffff;--chip-fg:#2a4879;--chip-hover:#eef1f6; --chip-on-bg:#2a4879;--chip-on-fg:#ffffff; --more-bg:#eef1f6;--more-fg:#2a4879;--more-hover:#dbe3f0; --tn-urgent:#b5341f; --display:Impact,"Haettenschweiler","Arial Narrow Bold",system-ui,sans-serif; --body:-apple-system,"Helvetica Neue",Arial,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace; --maxw:1720px; } /* ------------------------------------------------------------------ */ /* DARK THEME - the only place dark values are written */ /* ------------------------------------------------------------------ */ :root[data-theme="dark"]{ --ink:#dfeae8;--paper:#0d1414;--grey:#b6c6c4;--grey-2:#8aa09e; --line:#243333;--dot:#182424; --navy:#0a1730; --royal:#1e4787; --ion:#5cc4c8; --ion-deep:#14383b; --teal:#43aeb2; --mint:#5fd6ad; --sea:#57b98f; --forest:#153a2e; --plum:#4a2255; --ion-light:#5cc4c8; --ion-pale:#182626; --navy-pale:#161d2c; --up:#57b98f;--down:#e08575;--wave:#5cc4c8; --surface:#141e1e; --on-dark:#ffffff; --shadow:rgba(0,0,0,.55); --mark:#4a3f14; --tag-dark:#2a2a2a; --gmax-navy:#9dbcf0; --gmax-red:#ff6a5c; --rule-faint:rgba(255,255,255,.04); --rule-soft:rgba(255,255,255,.10); --rule-mid:rgba(255,255,255,.16); --rule-chip:rgba(157,188,240,.32); --reg-badge-bg:#1d2a3d;--reg-badge-fg:#a9c6f5;--reg-badge-br:rgba(157,188,240,.28); --reg-hi-bg:#3f6bb5;--reg-hi-fg:#ffffff; --reg-mid-bg:#2c4f8a;--reg-mid-fg:#dbe6fa; --reg-low-bg:#22303f;--reg-low-fg:#a9c6f5; --reg-accent:#ff6a5c; --reg-topic-fg:#8fb0e8; --chip-bg:#141e1e;--chip-fg:#a9c6f5;--chip-hover:#1d2a3d; --chip-on-bg:#3f6bb5;--chip-on-fg:#ffffff; --more-bg:#1d2a3d;--more-fg:#a9c6f5;--more-hover:#22303f; --tn-urgent:#e08575; } /* The G MAX mark is a fixed-colour SVG. Nothing recolours a logo; it is only taken off full brightness so it does not glare on a dark page. */ :root[data-theme="dark"] .publisher .mk{ opacity:.92 } *{box-sizing:border-box} html{scroll-behavior:smooth} body{zoom:var(--zoom,1);margin:0;font-size:17.5px;font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased; background-image:radial-gradient(var(--dot) 1px,transparent 1px);background-size:24px 24px;} a{color:inherit} /* Width in % and padding in em so the layout scales WITH the zoom. vw and px would be measured against the unzoomed window, which left the content squashed into the middle at 50%. */ .wrap{width:94%;max-width:var(--maxw);margin:0 auto;padding:0 1.6em} /* masthead */ header.top{position:relative;z-index:60;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(10px)} /* utility bar: date, zoom, lang, theme, bug — one compact line */ .util-bar{display:flex;align-items:center;justify-content:flex-end;gap:14px;padding:10px 0 0} /* brand + search row */ .top-inner{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:10px 0 14px} .brand{text-decoration:none;display:block;flex:1 1 auto;min-width:0} .brand .name{display:none} .brand .sub{font-family:var(--display);font-size:2.6em;font-weight:700;letter-spacing:0.01em;line-height:0.88;text-transform:uppercase;color:var(--ion);margin-top:0} .stamp{font-family:var(--mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink);white-space:nowrap} .lang-select{font-family:var(--mono);font-size:11px;letter-spacing:0.04em;color:var(--ink);background:var(--surface);border:1px solid var(--line);padding:5px 26px 5px 10px;border-radius:2px;cursor:pointer;appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ion) 50%),linear-gradient(135deg,var(--ion) 50%,transparent 50%); background-position:calc(100% - 14px) 12px,calc(100% - 9px) 12px;background-size:5px 5px,5px 5px;background-repeat:no-repeat} .lang-select:hover{border-color:var(--ion)} .zoom-select{font-family:var(--mono);font-size:11px;letter-spacing:0.04em;color:var(--ink);background:var(--surface);border:1px solid var(--line);padding:5px 24px 5px 9px;border-radius:2px;cursor:pointer;appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ion) 50%),linear-gradient(135deg,var(--ion) 50%,transparent 50%); background-position:calc(100% - 13px) 12px,calc(100% - 8px) 12px;background-size:5px 5px,5px 5px;background-repeat:no-repeat} .zoom-select:hover{border-color:var(--ion)} /* theme switch: one icon, three states, no label. The icon IS the state -- sun for light, moon for dark, half-disc for following the OS. */ .theme-btn{ flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center; width:28px;height:28px;padding:0;cursor:pointer;border-radius:2px; background:var(--surface);border:1px solid var(--line);color:var(--ion); } .theme-btn:hover{border-color:var(--ion)} .theme-btn svg{width:15px;height:15px;display:block} /* right-to-left support for Arabic and Persian */ [dir="rtl"] .bar-track{animation-direction:reverse} [dir="rtl"] table.mkt th:first-child,[dir="rtl"] table.mkt td:first-child{text-align:right} [dir="rtl"] table.mkt th,[dir="rtl"] table.mkt td{text-align:left} [dir="rtl"] .tick,[dir="rtl"] .q{border-right:0;border-left:1px solid var(--line)} [dir="rtl"] .method{border-left:0;border-right:2px solid var(--ion)} [dir="rtl"] .page-head h1::after{margin-left:auto;margin-right:0} nav.main{display:flex;gap:22px;padding:10px 0;border-top:1px solid var(--line);overflow-x:auto} nav.main::-webkit-scrollbar{display:none} nav.main a{text-decoration:none;font-family:var(--mono);font-size:11px;letter-spacing:0.09em;text-transform:uppercase;color:var(--ink);white-space:nowrap;padding-bottom:2px;border-bottom:2px solid transparent} nav.main a:hover{color:var(--ion)} nav.main a.is-current{color:var(--ion);border-bottom-color:var(--ion)} /* marquee bars */ .bar{position:relative;z-index:1;border-bottom:1px solid var(--line)} .bar-inner{display:flex;align-items:stretch} .bar-tag{flex:0 0 auto;display:flex;align-items:center;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;padding:0 14px;z-index:2} .bar-view{flex:1 1 auto;min-width:0;overflow:hidden} .bar-track{display:inline-flex;white-space:nowrap;will-change:transform;animation:slide 70s linear infinite} .bar:hover .bar-track{animation-play-state:paused} @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}} .bar-notice{background:var(--surface)} .bar-notice .bar-tag{background:var(--ion);color:var(--on-dark);height:38px} .bar-notice{border-bottom-color:var(--line)} .tick{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 18px;font-family:var(--mono);font-size:11px;color:var(--grey);border-right:1px solid var(--line)} .tick b{font-weight:700;letter-spacing:0.13em;text-transform:uppercase;font-size:9px} .tick.t-tender b{color:var(--ion)} /* Empty lane: a statement, not a truncated item, so it carries no divider. */ .tick.t-none{color:var(--grey-2);border-right:0} .tick.t-event b{color:var(--grey-2)} .tick.t-sponsor b{color:var(--plum)} .tick a{text-decoration:none;color:var(--ink)} .tick a:hover{color:var(--ion)} .bar-quotes{background:var(--navy);border-bottom-color:var(--navy)} .bar-quotes .bar-tag{background:var(--navy);color:var(--teal);border-right:1px solid rgba(255,255,255,.18);height:36px} .q{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 16px;font-family:var(--mono);font-size:11px;border-right:1px solid rgba(255,255,255,.14)} .q .s{color:var(--q-dim);letter-spacing:0.09em;text-transform:uppercase;font-size:10px} .q .p{color:var(--on-dark);font-weight:600} .q .c.up{color:var(--mint)} .q .c.down{color:var(--q-down)} .q .c.flat{color:var(--q-dim)} /* page heading */ .page-head{padding:30px 0 0} .page-head .crumb{font-family:var(--mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--grey-2);margin-bottom:8px} .page-head .crumb a{text-decoration:none} .page-head .crumb a:hover{color:var(--ion)} .page-head h1{font-family:var(--display);font-weight:700;font-size:3em;text-transform:uppercase;letter-spacing:0.01em;line-height:0.95;margin:0;color:var(--ion)} .page-head h1::after{content:"";display:block;width:64px;height:4px;background:var(--teal);margin-top:14px} .page-head .standfirst{margin:12px 0 0;font-size:1.05em;color:var(--grey);max-width:64ch;line-height:1.65} .page-head .updated{font-family:var(--mono);font-size:10px;letter-spacing:0.13em;text-transform:uppercase;color:var(--grey-2);margin-top:12px;padding-top:12px;border-top:1px solid var(--line)} /* front page columns */ .front{padding:26px 0 0} .front-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 12px} .front-head h2{font-family:var(--display);font-weight:700;font-size:1.9em;text-transform:uppercase;letter-spacing:0.01em;line-height:1;margin:0;color:var(--ion)} .front-head .note.is-stale{color:var(--down);font-weight:500} .front-head .note{font-family:var(--mono);font-size:10px;letter-spacing:0.13em;text-transform:uppercase;color:var(--grey-2)} .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1px;background:var(--line);border:1px solid var(--line)} .col{background:var(--surface);min-width:0;display:flex;flex-direction:column} .col-head{display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--on-dark);background:var(--royal);padding:9px 18px} .col-head .cnt{font-weight:400;letter-spacing:0.08em;color:rgba(255,255,255,.62)} .col.region .col-head{background:var(--forest)} .col.local .col-head{background:var(--ion)} .col-body{padding:2px 18px 16px;flex:1 1 auto} .story{padding:14px 0;border-bottom:1px solid var(--line)} .story:last-child{border-bottom:0} .story .kicker{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--teal);margin-bottom:5px} .story h3{margin:0;font-size:0.95em;line-height:1.35;font-weight:600;overflow-wrap:anywhere} .story h3 a{text-decoration:none} .story h3 a:hover{color:var(--ion)} .story p{margin:6px 0 0;font-size:13px;color:var(--grey);line-height:1.55} .story .src{font-family:var(--mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--grey-2);margin-top:8px} .story.lead h3{font-size:1.15em;line-height:1.26} .col-more{border-top:1px solid var(--line);padding:10px 18px;font-family:var(--mono);font-size:10px;letter-spacing:0.13em;text-transform:uppercase;color:var(--ion);text-decoration:none;display:block} .col-more:hover{background:var(--ion-pale)} /* numeric cells */ .cells{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)} .g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))} .g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))} .cell{background:var(--surface);padding:14px 16px;min-width:0} .cell.key{background:var(--ion);color:var(--on-dark)} .cell .lbl{font-family:var(--mono);font-size:9px;letter-spacing:0.13em;text-transform:uppercase;color:var(--grey-2);line-height:1.4} .cell.key .lbl{color:var(--teal)} .cell .val{font-family:var(--display);font-size:1.85em;font-weight:700;line-height:1.05;margin-top:6px;white-space:nowrap} .cell .unit{font-family:var(--mono);font-size:10px;color:var(--grey-2);margin-left:5px;font-weight:400} .cell.key .unit{color:var(--teal)} .cell .delta{font-family:var(--mono);font-size:10px;margin-top:4px;color:var(--grey)} .cell .delta.up{color:var(--up)} .cell .delta.down{color:var(--down)} .cell.key .delta{color:var(--mint)} /* market tables */ .block{padding:26px 0 0} .sub-head{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--sea);margin:22px 0 7px;padding-bottom:6px;border-bottom:1px solid var(--line)} table.mkt{width:100%;table-layout:fixed;border-collapse:collapse;background:var(--surface);border:1px solid var(--line)} table.mkt col.c-name{width:36%} table.mkt col.c-last{width:16%} table.mkt col.c-unit{width:18%} table.mkt col.c-chg{width:15%} table.mkt col.c-pct{width:15%} table.mkt th{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--grey-2);text-align:right;padding:7px 10px;border-bottom:1px solid var(--line);background:var(--ion-pale)} table.mkt th:first-child,table.mkt td:first-child{text-align:left} table.mkt td{font-family:var(--mono);font-size:0.78em;padding:0.45em 0.7em;border-bottom:1px solid var(--line);text-align:right;overflow-wrap:break-word;hyphens:auto;vertical-align:top} table.mkt td.last,table.mkt td.chg,table.mkt td.pct{white-space:nowrap} table.mkt tr:last-child td{border-bottom:0} table.mkt tbody tr:hover td{background:var(--ion-pale)} td.nm{font-family:var(--body);font-size:0.85em;font-weight:600;color:var(--ink)} td.u{color:var(--grey-2);font-size:10px;letter-spacing:0.05em;text-transform:uppercase} td.last{font-weight:600;color:var(--ink)} td.chg.up,td.pct.up{color:var(--up)} td.chg.down,td.pct.down{color:var(--down)} td.chg.flat,td.pct.flat{color:var(--grey-2)} a.rowlink{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)} a.rowlink:hover{color:var(--ion);border-bottom-color:var(--ion)} a.rowlink .ext{font-size:9px;color:var(--grey-2);letter-spacing:0} a.rowlink:hover .ext{color:var(--ion)} .src-line{font-family:var(--mono);font-size:10px;letter-spacing:0.08em;color:var(--grey-2);margin:6px 0 0;padding-bottom:2px} .src-line a{color:var(--ion);text-decoration:none} .src-line a:hover{text-decoration:underline} a.q{text-decoration:none} a.q:hover .p{color:var(--mint)} .story h3 .nolink{color:inherit} .story h3 a::after{content:" \2197";font-size:0.7em;color:var(--grey-2);white-space:nowrap} .story h3 a:hover::after{color:var(--ion)} [dir="rtl"] a.rowlink .ext{transform:scaleX(-1);display:inline-block} .mkt-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:1.4em} /* method note */ .method{margin-top:26px;border-left:2px solid var(--ion);background:var(--surface);padding:14px 18px} .method p{margin:0;font-size:13px;color:var(--grey);line-height:1.6} .method .flabel{font-family:var(--mono);font-size:9px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ion);margin:0 0 6px;font-weight:700} /* audience band */ .band{margin-top:36px;border:1px solid var(--line);background:var(--surface);padding:22px 24px} .band .flabel{font-family:var(--mono);font-size:9px;letter-spacing:0.16em;text-transform:uppercase;color:var(--grey-2);margin:0 0 12px} .band-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:1.6em} .band-grid h4{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:0.13em;text-transform:uppercase;color:var(--ion);margin:0 0 6px} .band-grid p{margin:0;font-size:13px;color:var(--grey);line-height:1.55} /* section index cards on home */ .sections{margin-top:30px} .sec-grid{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border:1px solid var(--line)} .sec-grid .sec{flex:1 1 190px;min-width:0} .sec{background:var(--surface);padding:14px 16px;text-decoration:none;display:block;min-width:0} .sec:hover{background:var(--ion-pale)} .sec .t{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:0.13em;text-transform:uppercase;color:var(--ion)} .sec .d{font-size:12px;color:var(--grey);margin-top:5px;line-height:1.5} footer{border-top:1px solid var(--line);margin-top:40px;padding:44px 0 32px} .fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:2.2em;align-items:start} footer .flabel{font-family:var(--mono);font-size:10px;letter-spacing:0.15em;text-transform:uppercase;color:var(--grey-2);margin:0 0 9px} footer p{margin:0 0 9px;font-size:14px;color:var(--grey);line-height:1.65;max-width:46ch} footer a.mail{color:var(--ion);text-decoration:none;font-family:var(--mono);font-weight:600;font-size:15px} footer nav.fnav{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:2px 18px} footer nav.fnav a{display:block;text-decoration:none;font-size:14px;color:var(--grey);padding:3px 0} footer nav.fnav a:hover{color:var(--ion)} .publisher{border:1px solid var(--line);background:var(--surface);padding:18px 20px} .publisher .lockup{display:flex;align-items:center;gap:13px} .publisher .mk{width:42px;height:48px;flex:0 0 auto} .publisher .g{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:0.02em;text-transform:uppercase;color:var(--gmax-navy);line-height:1} .publisher .gs{font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;color:var(--gmax-red);margin-top:5px} .publisher p{font-size:13px;margin-top:13px;padding-top:13px;border-top:1px solid var(--line);line-height:1.6} .publisher .glink{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:0.06em;color:var(--ion);text-decoration:none;display:inline-block;margin-top:4px} .publisher .glink:hover{color:var(--teal)} .fbottom{margin-top:34px;padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;font-family:var(--mono);font-size:11px;color:var(--grey-2)} :focus-visible{outline:2px solid var(--ion-light);outline-offset:3px} @media(prefers-reduced-motion:reduce){.bar-track{animation:none}} @media(max-width:1080px){ .top-inner{align-items:flex-start} } @media(max-width:640px){ .top-inner{flex-direction:column;align-items:flex-start;gap:12px} .fbottom{flex-direction:column} } /* narrow screens: tables stop being tables and become stacked records. 640, not 560: every other phone rule starts at 640, and a 600px window was getting phone padding and type with a five-column table still in it. */ @media(max-width:640px){ table.mkt,table.mkt tbody,table.mkt tr,table.mkt td{display:block;width:100%} table.mkt thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} table.mkt colgroup{display:none} table.mkt tr{border-bottom:1px solid var(--line);padding:10px 12px} table.mkt tr:last-child{border-bottom:0} table.mkt td{border:0;padding:2px 0;text-align:left;white-space:normal;display:flex;justify-content:space-between;gap:12px} table.mkt td.nm{font-size:14px;margin-bottom:4px;display:block} table.mkt td::before{content:attr(data-label);font-family:var(--mono);font-size:9px;letter-spacing:0.13em;text-transform:uppercase;color:var(--grey-2)} table.mkt td.nm::before{content:none} table.mkt tbody tr:hover td{background:transparent} } /* section coverage pages */ .coverage{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:1px;background:var(--line);border:1px solid var(--line)} .cov-item{background:var(--surface);padding:16px 20px} .cov-item .kicker{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--teal);margin-bottom:6px} .cov-item h3{margin:0;font-size:1.02em;line-height:1.32;font-weight:600;overflow-wrap:anywhere} .cov-item h3 a{text-decoration:none} .cov-item h3 a:hover{color:var(--ion)} .cov-item h3 a::after{content:" \2197";font-size:0.7em;color:var(--grey-2)} .cov-item p{margin:7px 0 0;font-size:13px;color:var(--grey);line-height:1.55} .cov-item .src{font-family:var(--mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--grey-2);margin-top:9px} .empty{background:var(--surface);padding:28px 20px;margin:0;font-size:14px;color:var(--grey)} /* An empty news column. render.js emits this class; without a rule the text sat flush against the column edge and read as a rendering failure. */ .col-empty{padding:18px 0;font-size:13px;color:var(--grey-2);line-height:1.5} /* access markers - a reader should see the wall before clicking */ .wall{display:inline-block;margin-left:8px;padding:1px 6px;border-radius:2px;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;vertical-align:1px} .wall-hard{background:var(--plum);color:var(--on-dark)} .wall-soft{background:var(--ion-pale);color:var(--ion);border:1px solid var(--border-accent,var(--line))} /* search */ .search{position:relative;flex:0 1 300px;min-width:210px} #search-input{width:100%;font-family:var(--mono);font-size:11px;letter-spacing:0.04em;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:2px;padding:6px 10px;appearance:none} #search-input:focus{outline:none;border-color:var(--ion)} #search-input::placeholder{color:var(--grey-2)} /* The panel is positioned inside .search, so a percentage width is a percentage of the SEARCH BOX -- about 264px -- not of the page. The 74px kind column and the nowrap source column then ate almost all of it and the headline column collapsed to roughly one character wide, which is why results rendered vertically. Width in em, never vw: vw is measured against the unzoomed window, so the panel would not follow the page-size control. */ .sr-panel{display:none;position:absolute;top:calc(100% + 5px);right:0;width:min(36em,92vw);max-height:70vh;overflow-y:auto;background:var(--surface);border:1px solid var(--line);box-shadow:0 10px 34px var(--shadow);z-index:200} .sr-panel.is-open{display:block} /* minmax(0,...) on every flexible track, or a long unbroken string in one cell refuses to shrink and pushes the others to nothing. */ .sr-item{display:grid;grid-template-columns:5.5em minmax(0,1fr) minmax(0,auto);gap:12px;align-items:start;padding:10px 14px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);background:var(--surface)} .sr-item:last-child{border-bottom:0} .sr-item:hover{background:var(--ion-pale)} .sr-kind{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:0.13em;text-transform:uppercase;color:var(--teal);padding-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .sr-label{font-size:13px;line-height:1.45;overflow-wrap:anywhere;min-width:0} .sr-value{font-family:var(--mono);font-size:12px;font-weight:600;white-space:nowrap;padding-top:2px;min-width:0} .sr-value em{font-style:normal;font-weight:400;color:var(--grey-2);font-size:10px;text-transform:uppercase} /* A publisher name is not worth squeezing the headline for. It truncates. */ .sr-meta{font-family:var(--mono);font-size:10px;letter-spacing:0.06em;text-transform:uppercase;color:var(--grey-2);white-space:nowrap;padding-top:3px;min-width:0;max-width:9em;overflow:hidden;text-overflow:ellipsis} .sr-empty{padding:18px 14px;font-size:13px;color:var(--grey)} .sr-panel mark{background:var(--mark);color:inherit;padding:0 1px} [dir="rtl"] .sr-panel{right:auto;left:0} @media(max-width:700px){.search{flex:1 1 100%;order:3}.sr-panel{width:100%}.sr-item{grid-template-columns:minmax(0,1fr);gap:3px}.sr-meta{max-width:none}} /* unsourced figures - visible, deliberate, never pretending */ tr.unsourced td.last,tr.unsourced td.chg,tr.unsourced td.pct{color:var(--grey-2)} tr.unsourced td.nm{color:var(--grey)} .awaiting{font-family:var(--mono);font-size:10px;letter-spacing:0.08em;color:var(--grey-2);background:var(--ion-pale);border:1px solid var(--line);border-bottom:0;padding:7px 12px} .unverified{display:inline-block;width:14px;height:14px;line-height:13px;text-align:center;border-radius:50%;background:var(--plum);color:var(--on-dark);font-family:var(--mono);font-size:9px;font-weight:700;vertical-align:1px;cursor:help} /* front page glance windows */ .glance{margin-top:2em} .glance-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:1px;background:var(--line);border:1px solid var(--line)} .gcard{background:var(--surface);display:flex;flex-direction:column} .ghead{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--on-dark);background:var(--ion-deep);padding:8px 16px} .gcard-uz .ghead{background:var(--ion)} .gbody{padding:4px 16px 12px} .grow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)} .grow:last-child{border-bottom:0} .gname{font-size:0.85em;line-height:1.4;overflow-wrap:anywhere;min-width:0} .gname a{text-decoration:none;border-bottom:1px solid var(--line)} .gname a:hover{color:var(--ion);border-bottom-color:var(--ion)} .gval{font-family:var(--mono);font-size:0.82em;font-weight:600;white-space:nowrap} .gval em{font-style:normal;font-weight:400;font-size:0.85em;color:var(--grey-2)} .gval em.up{color:var(--up)} .gval em.down{color:var(--down)} .gdays{font-family:var(--mono);font-size:0.75em;font-weight:600;white-space:nowrap;color:var(--grey-2)} .gdays.is-urgent{color:var(--down)} .gempty{padding:14px 0;font-size:0.85em;color:var(--grey-2)} .gage{display:inline-block;margin-left:8px;font-family:var(--mono);font-size:0.75em;color:var(--grey-2);letter-spacing:0.06em} /* ------------------------------------------------------------------ */ /* regulation lane */ /* Weight is shown by a badge, not by colour alone, so the ranking */ /* survives greyscale printing and colour-blind readers. */ /* ------------------------------------------------------------------ */ .reg-rail { margin-bottom: 1.4em; } .gcard-reg .ghead { display: flex; justify-content: space-between; align-items: baseline; } .gcard-reg .col-more { font-size: .78em; } .reg-item { display: flex; gap: .7em; align-items: flex-start; padding: .5em 0; border-bottom: 1px solid var(--rule-soft); text-decoration: none; color: inherit; } .reg-item:last-child { border-bottom: 0; } .reg-item:hover .reg-title { text-decoration: underline; } .reg-badge { flex: 0 0 auto; min-width: 4.6em; text-align: center; font-size: .68em; font-weight: 700; letter-spacing: .04em; padding: .25em .45em; border-radius: 2px; background: var(--reg-badge-bg); color: var(--reg-badge-fg); border: 1px solid var(--reg-badge-br); } .reg-KODEKS, .reg-TREATY, .reg-ZRU { background: var(--reg-hi-bg); color: var(--reg-hi-fg); border-color: var(--reg-hi-bg); } .reg-OMJ, .reg-UP, .reg-PP, .reg-RP { background: var(--reg-mid-bg); color: var(--reg-mid-fg); border-color: var(--reg-mid-bg); } .reg-PKM, .reg-RKM, .reg-KKPKM { background: var(--reg-low-bg); color: var(--reg-low-fg); } .reg-KKZRU { border-color: var(--reg-accent); } .reg-KKPKM { border-color: var(--reg-accent); } .reg-body { display: flex; flex-direction: column; gap: .15em; min-width: 0; } .reg-title { font-size: .92em; line-height: 1.35; } .reg-meta { display: flex; flex-wrap: wrap; gap: .8em; font-size: .74em; opacity: .72; } .reg-num { font-weight: 600; } .reg-count { float: right; font-weight: 400; opacity: .6; font-size: .8em; } .reg-empty { padding: .8em 0; opacity: .6; font-size: .85em; } .reg-group { margin-bottom: 1.6em; } [dir="rtl"] .reg-item { flex-direction: row-reverse; } [dir="rtl"] .reg-count { float: left; } /* regulation controls: nearly 300 acts need filtering, not scrolling */ .reg-controls { position: sticky; top: 0; z-index: 5; padding: .6em 0 .5em; margin-bottom: .8em; background: var(--surface); border-bottom: 1px solid var(--rule-mid); } .reg-row { display: flex; flex-wrap: wrap; gap: .5em; align-items: center; margin-bottom: .35em; } .reg-row:last-child { margin-bottom: 0; } .reg-lab { flex: 0 0 3.4em; font-size: .66em; letter-spacing: .1em; text-transform: uppercase; opacity: .5; } .reg-chips { display: flex; flex-wrap: wrap; gap: .3em; } .reg-chip { font: inherit; font-size: .7em; letter-spacing: .03em; padding: .25em .55em; cursor: pointer; background: var(--chip-bg); color: var(--chip-fg); border: 1px solid var(--rule-chip); border-radius: 2px; } .reg-chip:hover { background: var(--chip-hover); } .reg-chip.is-on { background: var(--chip-on-bg); color: var(--chip-on-fg); border-color: var(--chip-on-bg); } .reg-chip-topic { border-style: dashed; } .reg-chip-topic.is-on { background: var(--reg-mid-bg); border-color: var(--reg-mid-bg); border-style: solid; } .reg-search { font: inherit; font-size: .78em; padding: .3em .55em; min-width: 14em; border: 1px solid var(--rule-chip); border-radius: 2px; background: var(--surface); color: var(--ink); } .reg-shown { margin-left: auto; font-size: .68em; opacity: .55; letter-spacing: .04em; } /* rows: tight enough that a screen holds a dozen */ .reg-group { margin-bottom: .9em; } /* Six groups, three to a row, two full rows. The register has eleven act types and an eleven-block grid leaves an orphan row of two; the types are collapsed into legal tiers in render.js so the grid always fills. A group is never split across a column: an act list broken mid-tier reads as two different registers. */ .reg-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(26em, 1fr)); gap: 0 2.2em; align-items: start; } .reg-cols .reg-group { break-inside: avoid; margin-bottom: 1.4em; } @media (max-width: 60em) { .reg-cols { grid-template-columns: 1fr; } } .reg-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; } .reg-formname { font-weight: 600; } .reg-count { font-weight: 400; opacity: .5; font-size: .78em; white-space: nowrap; } .reg-item { display: flex; gap: .6em; align-items: flex-start; padding: .38em 0; border-bottom: 1px solid var(--rule-soft); text-decoration: none; color: inherit; } .reg-item:last-of-type { border-bottom: 0; } .reg-item:hover { background: var(--rule-faint); } .reg-item:hover .reg-title { text-decoration: underline; } .reg-badge { flex: 0 0 auto; min-width: 4.2em; text-align: center; font-size: .62em; font-weight: 700; letter-spacing: .05em; padding: .25em .4em; border-radius: 2px; margin-top: .15em; background: var(--reg-badge-bg); color: var(--reg-badge-fg); border: 1px solid var(--reg-badge-br); } .reg-body { display: flex; flex-direction: column; gap: .1em; min-width: 0; } .reg-title { font-size: .88em; line-height: 1.3; } .reg-meta { display: flex; flex-wrap: wrap; gap: .7em; font-size: .68em; opacity: .68; } .reg-topic { font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--reg-topic-fg); opacity: .9; } .reg-num { font-weight: 600; } .reg-more { font: inherit; font-size: .72em; margin-top: .45em; padding: .35em .7em; cursor: pointer; background: var(--more-bg); color: var(--more-fg); border: 1px solid var(--reg-badge-br); border-radius: 2px; } .reg-more:hover { background: var(--more-hover); } .reg-empty { padding: .8em 0; opacity: .6; font-size: .85em; } /* front page rail */ .reg-rail { margin-bottom: 1.4em; } .gcard-reg .ghead { display: flex; justify-content: space-between; align-items: baseline; } .gcard-reg .col-more { font-size: .78em; color: var(--on-dark); opacity: .85; border-top: 0; } [dir="rtl"] .reg-item { flex-direction: row-reverse; } [dir="rtl"] .reg-shown { margin-left: 0; margin-right: auto; } /* live adapter rows: as-of date beside the source credit */ .asof{ opacity:.6; margin-left:.5em; } .reg-origin{ opacity:.55; letter-spacing:.02em; } /* tenders: one row per notice, deadline hard right */ .tn-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: .5em; margin-bottom: .3em; border-bottom: 1px solid var(--rule-mid); } .tn-count { font-weight: 600; } .tn-src { font-size: .7em; letter-spacing: .06em; text-transform: uppercase; opacity: .5; } .tn-row { display: flex; gap: 1.4em; align-items: flex-start; padding: .7em 0; border-bottom: 1px solid var(--rule-soft); } .tn-row:last-child { border-bottom: 0; } .tn-main { flex: 1 1 auto; min-width: 0; } .tn-title a { color: inherit; text-decoration: none; } .tn-title a:hover { text-decoration: underline; } .tn-meta { margin-top: .25em; font-size: .74em; opacity: .6; letter-spacing: .02em; } .tn-right { flex: 0 0 auto; text-align: right; } .tn-days { font-weight: 600; font-size: .82em; white-space: nowrap; } .tn-days.is-urgent { color: var(--tn-urgent); } .tn-date { font-size: .7em; opacity: .5; margin-top: .2em; white-space: nowrap; } /* Expired: visible for 48 hours so a reader who saw it yesterday can tell it closed rather than wonder whether it was ever there. */ .tn-row.is-expired { opacity: .45; } .tn-tag { font-size: .64em; letter-spacing: .1em; text-transform: uppercase; padding: .2em .5em; border-radius: 2px; background: var(--tag-dark); color: var(--on-dark); } /* Cadence heading. Daily settlements and monthly averages are different measurements sitting centimetres apart on one page; this is the line that tells a reader which block they are reading from. */ .cadence{ font-family:var(--mono);font-size:10px;font-weight:700; letter-spacing:0.2em;text-transform:uppercase;color:var(--on-dark); background:var(--ion-deep);display:inline-block; padding:5px 12px;margin:26px 0 2px;border-radius:2px; } /* Full search results page. Same chip controls as the regulation page -- one filter idiom on the site, not two. */ .sp-echo{font-family:var(--mono);color:var(--ion);font-weight:600} .sp-group{margin-bottom:1.6em} .sp-row{ display:grid;grid-template-columns:7em minmax(0,1fr) minmax(0,12em); gap:1em;align-items:start;padding:.7em 0; border-bottom:1px solid var(--line); text-decoration:none;color:var(--ink); } .sp-row:last-child{border-bottom:0} .sp-row:hover{background:var(--ion-pale)} .sp-kind{ font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--teal);padding-top:.25em; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0; } .sp-label{font-size:.95em;line-height:1.4;overflow-wrap:anywhere;min-width:0} .sp-dek{display:block;font-size:.82em;color:var(--grey);margin-top:.25em;line-height:1.5} .sp-value{font-family:var(--mono);font-size:.85em;font-weight:600;text-align:right;white-space:nowrap;min-width:0} .sp-value em{font-style:normal;font-weight:400;font-size:.85em;color:var(--grey-2);text-transform:uppercase} .sp-meta{ font-family:var(--mono);font-size:10px;letter-spacing:.06em; text-transform:uppercase;color:var(--grey-2);text-align:right; padding-top:.25em;min-width:0;overflow:hidden;text-overflow:ellipsis; } @media(max-width:700px){ .sp-row{grid-template-columns:minmax(0,1fr);gap:.3em} .sp-value,.sp-meta{text-align:left} } /* Search filter bar and pager. */ .sp-bar{ position:relative; display:flex;align-items:center;gap:.6em;flex-wrap:wrap; padding-bottom:.7em;margin-bottom:.9em; border-bottom:1px solid var(--line); } .sp-toggle{ font:inherit;font-family:var(--mono);font-size:.72em;letter-spacing:.1em; text-transform:uppercase;cursor:pointer; padding:.5em .9em;border-radius:2px; background:var(--surface);color:var(--ion);border:1px solid var(--ion); display:inline-flex;align-items:center;gap:.5em; } .sp-toggle:hover{background:var(--ion-pale)} .sp-toggle.is-on{background:var(--ion);color:var(--on-dark)} .sp-badge{ display:inline-block;min-width:1.5em;text-align:center; background:var(--teal);color:var(--on-dark);border-radius:1em; font-size:.85em;padding:0 .35em; } .sp-clear{ font:inherit;font-family:var(--mono);font-size:.7em;letter-spacing:.08em; text-transform:uppercase;cursor:pointer;padding:.5em .7em; background:none;border:0;color:var(--grey-2);text-decoration:underline; } .sp-clear:hover{color:var(--down)} .sp-count{ margin-left:auto;font-family:var(--mono);font-size:.72em; letter-spacing:.06em;color:var(--grey-2); } /* A popup, not a block that shoves the results down the page. Floating it means opening the filters never moves the thing you were reading, and the three groups sit side by side instead of stacked. */ .sp-panel{ position:absolute;top:calc(100% + .4em);left:0;z-index:120; background:var(--surface);border:1px solid var(--line);border-radius:2px; box-shadow:0 10px 34px var(--shadow); padding:1.1em 1.3em;margin:0; display:flex;gap:2.2em;flex-wrap:wrap;align-items:flex-start; max-width:min(100%,54em); } .sp-panel .reg-row{display:block;margin:0;flex:0 1 auto;min-width:0} .sp-panel .reg-lab{display:block;flex:none;margin:0 0 .5em} .sp-panel .reg-chips{gap:.35em} @media(max-width:700px){ .sp-panel{position:static;box-shadow:none;border:0;padding:0; flex-direction:column;gap:.6em;margin-bottom:1em} } .sp-pager{ display:flex;flex-wrap:wrap;gap:.3em;align-items:center; justify-content:center;margin-top:1.6em;padding-top:1.2em; border-top:1px solid var(--line); } .sp-page{ font:inherit;font-family:var(--mono);font-size:.75em;letter-spacing:.05em; cursor:pointer;min-width:2.4em;padding:.45em .7em;border-radius:2px; background:var(--surface);color:var(--ion);border:1px solid var(--line); } .sp-page:hover:not(:disabled){border-color:var(--ion);background:var(--ion-pale)} .sp-page.is-on{background:var(--ion);color:var(--on-dark);border-color:var(--ion)} .sp-page:disabled{opacity:.35;cursor:default} .sp-gap{font-family:var(--mono);font-size:.75em;color:var(--grey-2);padding:0 .2em} /* "+N" chip that reveals the rest of a capped filter row. Deliberately quieter than a real filter: it changes what you can see, not what is shown. */ .reg-chip-more{ border-style:dashed; opacity:.75; } .reg-chip-more:hover{opacity:1} /* The regulations filter bar reuses the search page's idiom, but its title filter sits in the bar itself rather than the panel: it is the fastest way to find one decree among 325 and should never be a click away. */ .sp-bar .reg-search{ flex:0 1 18em; min-width:11em; } /* The theme picker is a select, not an icon that cycles: three options visible at once, and the same control the language and page-size pickers already use. Reading an icon to learn which of three states you are in is a puzzle, not an interface. */ .theme-select{font-family:var(--mono);font-size:11px;letter-spacing:0.04em;color:var(--ink);background:var(--surface);border:1px solid var(--line);padding:5px 24px 5px 9px;border-radius:2px;cursor:pointer;appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ion) 50%),linear-gradient(135deg,var(--ion) 50%,transparent 50%); background-position:calc(100% - 13px) 12px,calc(100% - 8px) 12px;background-size:5px 5px,5px 5px;background-repeat:no-repeat} .theme-select:hover{border-color:var(--ion)} /* One tier opened on its own. Narrower than the full width on purpose: an act title set across 1700px is unreadable, and the register is a reading surface, not a spreadsheet. */ .reg-focus{max-width:70em} .reg-focus .sp-clear{padding-left:0;margin-bottom:.4em;display:inline-block} /* The arrow belongs to the link, not to the sentence. A plain space in front of it is a legal line break, which is how a row ended up with its title on one line and a lone arrow on the next. These two are emitted as CSS content, so the non-breaking space goes here. */ .story h3 a::after{content:"\00a0\2197"} .cov-item h3 a::after{content:"\00a0\2197";white-space:nowrap} a.rowlink .ext{white-space:nowrap} /* Reader reports. One icon beside the theme picker; the panel floats so opening it never moves the thing the reader was looking at when they found the problem. */ .fb-btn{ flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center; width:28px;height:28px;padding:0;cursor:pointer;border-radius:2px; background:var(--surface);border:1px solid var(--line);color:var(--ion); } .fb-btn:hover{border-color:var(--ion)} .fb-btn.is-on{background:var(--ion);color:var(--on-dark);border-color:var(--ion)} .fb-btn svg{width:15px;height:15px;display:block} .util-bar{position:relative} .fb-panel{ position:absolute;top:calc(100% + .5em);right:0;z-index:300; width:min(27em,80vw);padding:1em 1.1em; background:var(--surface);border:1px solid var(--line);border-radius:2px; box-shadow:0 10px 34px var(--shadow); display:flex;flex-direction:column;gap:.6em; } .fb-head{ font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--ion); } .fb-kinds{display:flex;gap:.4em} .fb-kind{ font:inherit;font-size:.72em;line-height:1.3;cursor:pointer;flex:1 1 0; padding:.5em .6em;border-radius:2px;text-align:left; background:var(--surface);color:var(--ink);border:1px solid var(--line); } .fb-kind:hover{border-color:var(--ion)} .fb-kind.is-on{background:var(--ion);color:var(--on-dark);border-color:var(--ion)} .fb-text{ font:inherit;font-size:.85em;line-height:1.5;padding:.6em .7em;resize:vertical; color:var(--ink);background:var(--paper); border:1px solid var(--line);border-radius:2px; } .fb-text:focus{outline:none;border-color:var(--ion)} .fb-foot{display:flex;align-items:center;gap:.5em} .fb-note{ flex:1 1 auto;font-family:var(--mono);font-size:9px;letter-spacing:.06em; color:var(--grey-2);line-height:1.4; } .fb-cancel,.fb-send{ font:inherit;font-family:var(--mono);font-size:.7em;letter-spacing:.08em; text-transform:uppercase;cursor:pointer;padding:.45em .8em;border-radius:2px; } .fb-cancel{background:none;border:0;color:var(--grey-2);text-decoration:underline} .fb-cancel:hover{color:var(--ink)} .fb-send{background:var(--ion);color:var(--on-dark);border:1px solid var(--ion)} .fb-send:hover{background:var(--ion-deep);border-color:var(--ion-deep)} @media(max-width:640px){ .fb-panel{position:fixed;left:1em;right:1em;top:auto;bottom:1em;width:auto} } /* ------------------------------------------------------------------ */ /* MOBILE PASS 1 */ /* */ /* Everything here is a phone problem, not a taste problem: */ /* */ /* - 16px on every input. iOS Safari zooms the whole page when a text */ /* field under 16px takes focus and does not zoom back out. The */ /* masthead search at 11px made tapping search a trap. */ /* - Display type set for a 1700px page is 45-52px on a 390px screen. */ /* - 94% width with 1.6em of padding each side leaves 311px of the */ /* 390px a phone actually has. */ /* - .top-right could never wrap, so the 700px rule giving the search */ /* box a full-width basis had nowhere to put it and the masthead ran */ /* off the side of the page. */ /* ------------------------------------------------------------------ */ @media(max-width:640px){ .wrap{width:100%;padding:0 1em} .top-inner{padding:14px 0 10px;gap:10px} .util-bar{flex-wrap:wrap;gap:8px 12px;padding:8px 0 0} .search{flex:1 1 100%;order:0;min-width:0} #search-input,.reg-search,.fb-text{font-size:16px} .brand .sub{font-size:1.65em;line-height:1.02} .page-head{padding:20px 0 0} .page-head h1{font-size:2em;overflow-wrap:anywhere} .page-head h1::after{margin-top:10px} .front-head h2{font-size:1.5em} .tick{padding:0 12px} .q{padding:0 12px} .cell{padding:12px 13px} .cell .val{font-size:1.5em;white-space:normal;overflow-wrap:anywhere} .col-head{padding:8px 14px} .col-body{padding:2px 14px 14px} .sec-grid .sec{flex:1 1 100%} .method{padding:12px 14px} .band{padding:16px 16px} .publisher{padding:14px 15px} .gbody{padding:4px 14px 12px} .reg-badge{min-width:3.6em} .sp-bar .reg-search{flex:1 1 100%} .reg-shown{margin-left:0} } /* ------------------------------------------------------------------ */ /* Independence anniversary band */ /* */ /* Front page only, above everything. .ind35-over is set on by */ /* the inline script in build.py before this element is parsed, so on */ /* 5 September it is never painted rather than painted and then pulled. */ /* ------------------------------------------------------------------ */ .ind35-over #ind35{display:none} .ind35{ display:flex;align-items:center;gap:1.8em; margin:1.6em 0 0;padding:1.5em 2em; background:linear-gradient(100deg,var(--ind-wash-a) 0%,var(--surface) 58%,var(--ind-wash-b) 100%); border:1px solid var(--ind-gold-soft); border-left:4px solid var(--ind-gold); border-radius:2px; } .ind35-mk{flex:0 0 auto;width:auto;height:130px;display:block} .ind35-text{min-width:0} .ind35 p{margin:0} .ind35-a{ font-family:var(--display);font-size:2.6em;font-weight:700; letter-spacing:.015em;text-transform:uppercase;line-height:1.02; color:var(--ind-navy); } .ind35-b{ margin-top:.5em;font-size:1.12em;line-height:1.5;color:var(--ind-body); } /* The emblem's lettering is dark navy and vanishes on the dark palette, so the panel itself stays light in both themes -- the same call the navy quote bar makes. */ :root[data-theme="dark"] .ind35{background:linear-gradient(100deg,#f6fafa 0%,#ffffff 58%,#fbf6ea 100%)} [dir="rtl"] .ind35{border-left:1px solid var(--ind-gold-soft);border-right:3px solid var(--ind-gold)} @media(max-width:640px){ .ind35{gap:1.1em;padding:1.1em 1.1em;margin-top:1.2em} .ind35-mk{height:88px} .ind35-a{font-size:1.7em} .ind35-b{font-size:.95em} } /* ------------------------------------------------------------------ */ /* MOBILE PASS 2 */ /* */ /* 1. Column order. On a wide page the eye reads left to right and */ /* World first is correct. Stacked, first means most important, and */ /* a reader in Tashkent should not scroll past two columns to reach */ /* his own country. Applied at 1000px because the grid drops to two */ /* columns before it drops to one, and the argument holds there. */ /* */ /* 2. Touch targets. Nav links, chips and pickers were 20-24px tall. */ /* 44px is the documented minimum for a finger; below it a tap is */ /* a guess. */ /* */ /* 3. A floor under type size. 9px mono labels are legible on a 27in */ /* monitor at arm's length and not on a phone. */ /* ------------------------------------------------------------------ */ html{-webkit-text-size-adjust:100%} img{max-width:100%;height:auto} nav.main{-webkit-overflow-scrolling:touch} @media(max-width:1000px){ .cols .col{order:3} .cols .col.region{order:2} .cols .col.local{order:1} } @media(max-width:640px){ /* touch targets */ nav.main{gap:0} nav.main a{padding:12px 13px 9px} nav.main a:first-child{padding-left:0} .col-more{padding:14px} .zoom-select,.lang-select,.theme-select{padding:9px 26px 9px 10px;font-size:12px} .theme-btn,.fb-btn{width:38px;height:38px} .theme-btn svg,.fb-btn svg{width:17px;height:17px} .reg-chip{padding:.5em .8em} .reg-more,.sp-toggle,.sp-clear{padding:.6em .9em} .sp-page{min-width:2.8em;padding:.6em .85em} .fb-kind{padding:.7em} footer nav.fnav a{padding:8px 0} .story h3 a,.cov-item h3 a{display:inline-block;padding:2px 0} /* legibility floor */ .stamp{font-size:11px} .story p,.cov-item p,.method p,.band-grid p{font-size:13.5px} .story .src,.cov-item .src{font-size:11px} .sec .d{font-size:12.5px} .src-line{font-size:11px} footer p,footer nav.fnav a{font-size:14px} .col-head,.ghead{font-size:10px;letter-spacing:.13em} table.mkt td::before{font-size:10px} .cell .lbl{font-size:10px;letter-spacing:.1em} }