/* 0h0k.me / shared visual language. No animation library required. */
@property --sky-top { syntax:'<color>'; inherits:true; initial-value:#243647; }
@property --sky-bottom { syntax:'<color>'; inherits:true; initial-value:#111b29; }
@view-transition { navigation:auto; }
:root {
  color-scheme:dark;
  --bg:#101110; --bg-alt:#191a18; --surface:#191a18; --surface-raised:#20211e;
  --text:#f2f1e9; --text-dim:#b0b0a5; --text-muted:#96988d;
  --accent:#ddc180; --accent-bright:#f0dca6; --accent-rgb:221,193,128;
  --border:rgba(221,193,128,.25); --border-soft:rgba(243,242,230,.1);
  --glass:rgba(255,255,255,.035); --glass-hover:rgba(255,255,255,.065);
  --radius:22px; --radius-small:12px;
  --ease:cubic-bezier(.22,1,.36,1); --fast:180ms; --normal:360ms;
  --page-width:1152px;
}
html { scroll-padding-top:108px; }
body { background:var(--bg);color:var(--text);font-size:16px;letter-spacing:-.015em;overflow-x:clip; }
body.gta6 { --accent:#f59ab6;--accent-bright:#ffc4d3;--accent-rgb:245,154,182;--border:rgba(245,154,182,.24); }
body.chelsea { --accent:#78b2ff;--accent-bright:#abd0ff;--accent-rgb:120,178,255;--border:rgba(120,178,255,.24); }
body.player { --accent:#97d7b1;--accent-bright:#c1eed2;--accent-rgb:151,215,177;--border:rgba(151,215,177,.24); }
body.shortener,body.home { --accent:#ddc180;--accent-bright:#f0dca6; }
body.weather-page { --accent:#e6cf9a;--accent-bright:#f4e5be;--accent-rgb:230,207,154; }
::selection { background:rgba(var(--accent-rgb),.32);color:var(--text); }
[hidden], .hidden { display:none!important; }
a { color:inherit; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
button:disabled { cursor:wait; }
button,input,select,textarea { font-size:inherit; }
:focus-visible { outline:2px solid var(--accent);outline-offset:5px; }
.container { max-width:var(--page-width);padding:0 32px; }
.icon { width:22px;height:22px;flex-shrink:0;vertical-align:middle; }
.eyebrow { display:inline-flex;align-items:center;gap:9px;font-size:.68rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--accent); }
.eyebrow::before { content:'';width:5px;height:5px;border-radius:50%;background:currentColor; }
.text-button { display:inline-flex;align-items:center;gap:8px;border:0;background:none;color:var(--accent-bright);font-size:.85rem;font-weight:500;padding:8px 0; }
.text-button .icon { width:16px;height:16px;transition:transform var(--fast) var(--ease); }
.text-button:hover .icon { transform:translateX(3px); }
.section-heading { display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px; }
.section-heading h2 { font-family:'Syne',sans-serif;font-size:1.55rem;letter-spacing:-.04em; }
.section-heading p { font-size:.8rem;color:var(--text-dim); }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.skip-link { position:fixed;left:20px;top:-80px;background:var(--accent);color:var(--bg);padding:12px 20px;border-radius:8px;z-index:9999; }
.skip-link:focus { top:12px; }
.image-loading { opacity:0; }
img { transition:opacity .45s var(--ease); }
.site-main { min-height:calc(100svh - 220px);padding-bottom:72px;view-transition-name:page-content; }
/* The frame stays familiar as page accents and content change. */
.site-header { position:sticky;top:0;padding:0;z-index:160;background:rgba(16,17,16,.9);border-bottom:1px solid var(--border-soft);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:background var(--normal),box-shadow var(--normal);view-transition-name:site-header; }
.site-header.is-scrolled { box-shadow:0 10px 36px rgba(0,0,0,.16);background:rgba(16,17,16,.96); }
.site-header .header-inner { max-width:var(--page-width);min-height:82px;padding:0 32px;gap:30px; }
.site-header .logo { position:static;transform:none;font-family:'Syne',sans-serif;font-size:1.45rem;letter-spacing:-.06em;white-space:nowrap; }
.site-header .logo span { color:var(--accent); }
.top-nav { display:flex;gap:3px;align-items:center; }
.top-nav a { position:relative;font-size:.78rem;font-weight:500;padding:9px 12px;color:var(--text-dim);border-radius:9px;transition:color var(--fast),background var(--fast); }
.top-nav a:hover { color:var(--text);background:var(--glass); }
.top-nav a.active { color:var(--accent-bright);background:rgba(var(--accent-rgb),.09); }
.header-clock { display:flex;align-items:center;gap:8px;font-size:.68rem;color:var(--text-muted);white-space:nowrap; }
.header-clock i { width:5px;height:5px;border-radius:50%;background:#97b98f; }
.header-clock time { color:var(--text-dim);font-variant-numeric:tabular-nums; }
.site-header .menu-toggle { display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--border-soft);background:var(--glass);gap:5px;padding:10px; }
.menu-toggle span { width:19px;height:1.5px;background:var(--text);transition:transform var(--normal) var(--ease),opacity var(--fast); }
.menu-toggle.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.menu-toggle.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }
.menu-open { overflow:hidden; }
.sidebar { width:360px;max-width:90vw;padding:112px 26px 26px;background:#171815;z-index:150;border-left:1px solid var(--border-soft);transition:transform 460ms var(--ease),visibility 460ms;visibility:hidden; }
.sidebar.open { visibility:visible; }
.sidebar-topline { margin:0 16px 22px;font-size:.65rem;letter-spacing:.17em;text-transform:uppercase;color:var(--text-muted); }
.sidebar-nav { padding:0;gap:4px; }
.sidebar-nav a { min-height:50px;padding:12px 16px;font-weight:400;font-size:1.06rem;color:var(--text-dim);border-radius:12px;transition:transform .45s var(--ease),opacity .35s var(--ease),color var(--fast),background var(--fast); }
.sidebar-nav .nav-icon { display:flex;opacity:1!important;color:var(--text-muted);margin-right:4px; }
.sidebar-nav .nav-icon .icon { width:19px;height:19px; }
.sidebar-nav a.active { background:rgba(var(--accent-rgb),.07);color:var(--accent-bright); }
.sidebar-nav a.active .nav-icon { color:var(--accent); }
.sidebar-nav a.active .nav-active-dot { width:5px;height:5px; }
.sidebar-nav .nav-divider { height:1px;background:var(--border-soft);margin:16px; }
.sidebar-foot { border-top:1px solid var(--border-soft);padding:20px 16px 0;margin-top:28px;color:var(--text-muted);font-size:.75rem;line-height:1.7; }
.sidebar-backdrop { backdrop-filter:blur(4px);transition:opacity 400ms var(--ease); }
.site-footer { padding:28px 0;border-top:1px solid var(--border-soft);font-size:.75rem;color:var(--text-muted);text-align:left; }
.footer-inner { display:flex;align-items:center;justify-content:space-between;gap:24px; }
.footer-brand { color:var(--text-dim);font-weight:500; }
.footer-links { display:flex;align-items:center;gap:22px;flex-wrap:wrap; }
.footer-links a:hover { color:var(--accent-bright); }
.footer-note { margin-top:10px;font-size:.7rem;max-width:650px;color:var(--text-muted); }
/* Home / content is the navigation. */
.home-intro { padding:58px 0 38px; }
.home-intro-inner { display:flex;justify-content:space-between;align-items:end;gap:32px; }
.home-intro h1 { font-family:'Syne',sans-serif;font-size:clamp(2.7rem,5vw,4.65rem);font-weight:700;line-height:1.05;letter-spacing:-.065em;margin-top:16px;max-width:700px; }
.home-intro h1 span { color:var(--accent); }
.home-intro .intro-copy { font-size:.87rem;color:var(--text-dim);max-width:230px;line-height:1.7;padding-bottom:5px; }
.hub-grid { display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px; }
.hub-card { position:relative;isolation:isolate;min-width:0;overflow:hidden;border:1px solid var(--border-soft);border-radius:var(--radius);background:var(--surface);transition:transform 420ms var(--ease),border-color var(--normal),box-shadow var(--normal); }
.hub-card:focus-visible { outline-offset:5px; }
.hub-card .card-arrow { position:absolute;top:23px;right:23px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);border-radius:50%;width:36px;height:36px;z-index:3;color:#f2f1e9;background:rgba(0,0,0,.1);transition:transform var(--normal) var(--ease),background var(--fast); }
.card-arrow .icon { width:17px;height:17px; }
.hub-gta { grid-column:span 7;min-height:380px;color:#fff3ef; }
.hub-gta::after { content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,5,18,.1),rgba(13,5,18,.12) 18%,rgba(13,5,18,.94) 100%);z-index:-1; }
.hub-image { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1100ms var(--ease),opacity .5s; }
.hub-gta .hub-image { object-position:50% 34%; }
.hub-gta .card-content { padding:28px;min-height:380px;display:flex;flex-direction:column;justify-content:flex-end; }
.card-kicker { font-size:.63rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim); }
.hub-gta .card-kicker { position:absolute;left:26px;top:27px;color:#fff1ec;display:flex;align-items:center;gap:8px; }
.card-kicker i { display:inline-block;width:5px;height:5px;background:currentColor;border-radius:50%; }
.hub-gta h2 { font-family:'Syne',sans-serif;font-size:2.65rem;font-weight:800;letter-spacing:-.06em;line-height:1;margin-bottom:8px; }
.hub-gta .card-subtitle { color:#d9c3cf;font-size:.76rem; }
.home-countdown { display:flex;gap:24px;margin-top:25px; }
.home-countdown > span { display:flex;flex-direction:column;gap:2px; }
.home-countdown b { font-size:1.9rem;font-weight:500;line-height:1.1;letter-spacing:-.05em;font-variant-numeric:tabular-nums; }
.home-countdown small { text-transform:uppercase;letter-spacing:.11em;font-size:.53rem;color:#d9c3cf; }
.hub-weather { grid-column:span 5;min-height:380px;background:radial-gradient(ellipse at 82% 13%,rgba(213,184,122,.15),transparent 62%),linear-gradient(145deg,#273d43,#1c2b31);color:#f1f3e9;transition:transform 420ms var(--ease),border-color var(--normal),background 2s; }
.hub-weather .card-content { position:relative;z-index:2;padding:28px;display:flex;flex-direction:column;min-height:380px; }
.hub-weather .card-kicker { color:#c8d3ce; }
.hub-weather .weather-location { font-size:.8rem;color:#d1dbd4;margin-top:38px;max-width:65%;text-wrap:balance; }
.hub-weather .weather-preview-temp { font-size:5.4rem;line-height:1;font-weight:400;letter-spacing:-.08em;margin:10px 0; }
.hub-weather .weather-preview-condition { font-size:1rem;font-weight:500; }
.hub-weather .weather-preview-extra { font-size:.72rem;color:#bdcdc4;margin-top:5px; }
.hub-weather .preview-bottom { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:20px;color:#bdcdc4;font-size:.66rem; }
.hub-weather .weather-art { position:absolute;right:-6px;top:85px;width:180px;height:180px;z-index:1;opacity:.85; }
.weather-art .sun-disc { position:absolute;width:76px;height:76px;left:52px;top:19px;border-radius:50%;background:#e9ce8e;box-shadow:0 0 70px 24px rgba(228,197,126,.17);animation:sun-breathe 7s ease-in-out infinite alternate; }
.weather-art .cloud-shape { position:absolute;left:8px;top:92px;width:153px;height:45px;border-radius:50px;background:linear-gradient(180deg,#a6b7b4,#839695);opacity:.6;animation:cloud-drift 12s ease-in-out infinite alternate; }
.weather-art .cloud-shape::before,.weather-art .cloud-shape::after { content:'';position:absolute;border-radius:50%;background:inherit; }
.weather-art .cloud-shape::before { width:70px;height:70px;left:28px;bottom:9px; }
.weather-art .cloud-shape::after { width:49px;height:49px;right:15px;bottom:13px; }
.hub-weather.is-night { background:radial-gradient(ellipse at 80% 10%,rgba(131,144,190,.16),transparent 62%),linear-gradient(145deg,#232d42,#171f2c); }
.hub-weather.is-night .sun-disc { background:#d5dbdf;box-shadow:0 0 60px rgba(184,192,229,.12); }
.hub-weather.is-night .sun-disc::after { content:'';position:absolute;inset:-8px -13px 14px 17px;border-radius:50%;background:#273249; }
.hub-weather[data-weather="rain"] .sun-disc,.hub-weather[data-weather="storm"] .sun-disc,.hub-weather[data-weather="fog"] .sun-disc { opacity:.2; }
.hub-weather[data-weather="rain"] .weather-art::after,.hub-weather[data-weather="storm"] .weather-art::after { content:'';position:absolute;width:95px;height:40px;top:140px;left:40px;background:repeating-linear-gradient(110deg,transparent 0 13px,#a7c9d8 14px 15px,transparent 16px 25px);opacity:.4; }
.hub-chelsea { grid-column:span 5;min-height:270px; }
.hub-chelsea::after { content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,24,46,.18),rgba(8,24,46,.95));z-index:-1; }
.hub-chelsea .hub-image { object-position:center 45%;filter:saturate(.75); }
.hub-chelsea .card-content { padding:26px;min-height:270px;display:flex;flex-direction:column;justify-content:flex-end; }
.hub-chelsea .mini-crest { position:absolute;top:26px;left:26px;width:49px;height:49px; }
.hub-chelsea .card-kicker { color:#adcbeb; }
.hub-chelsea h2 { font-family:'Syne',sans-serif;font-size:1.85rem;letter-spacing:-.05em;margin:5px 0 3px; }
.hub-chelsea p { font-size:.78rem;color:#b0c5dc; }
.hub-tools { grid-column:span 7;display:grid;grid-template-columns:1fr 1fr;gap:18px;min-width:0; }
.hub-tools .hub-card { min-height:270px; }
.hub-tool .card-content { padding:24px;display:flex;flex-direction:column;height:100%; }
.hub-tool .tool-illustration { height:110px;display:flex;align-items:center;margin-bottom:auto;color:var(--accent); }
.link-illustration { position:relative;width:112px;height:70px;transform:rotate(-32deg); }
.link-illustration::before,.link-illustration::after { content:'';position:absolute;width:67px;height:40px;border:7px solid #b7a279;border-radius:35px;top:14px; }
.link-illustration::before { left:0;border-right-color:#dec791; }
.link-illustration::after { right:0;border-left-color:#776e54; }
.hub-tool h2 { font-family:'Syne',sans-serif;font-size:1.15rem;letter-spacing:-.035em;margin:6px 0; }
.hub-tool p { font-size:.76rem;color:var(--text-dim);line-height:1.6; }
.hub-tool .card-kicker { font-size:.56rem;color:var(--accent); }
.hub-tool .card-arrow { width:30px;height:30px;top:20px;right:18px; }
.hub-camera { background:radial-gradient(ellipse at 0% 0%,rgba(105,157,148,.12),transparent 75%),var(--surface); }
.camera-illustration { width:104px;height:70px;position:relative;border:1px solid #6f9b91;border-radius:9px;display:flex;align-items:center;justify-content:center;transform:rotate(-7deg);background:linear-gradient(145deg,rgba(93,139,128,.2),transparent); }
.camera-illustration::before { content:'';width:29px;height:29px;border:1px solid #90b3a4;border-radius:50%;box-shadow:0 0 0 7px rgba(143,178,164,.08); }
.camera-illustration::after { content:'';position:absolute;top:11px;right:11px;width:4px;height:4px;border-radius:50%;background:#b7d6bd; }
.hub-footnote { display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:24px;font-size:.7rem;color:var(--text-muted); }
.hub-footnote a { color:var(--text-dim); }
/* A consistent introduction on the utility pages. */
.page-heading { padding:60px 0 34px; }
.page-heading h1,.shortener-hero h1,.stats-hero h1,.player-hero h1,.cameras-hero h1 { font-family:'Syne',sans-serif;font-size:clamp(2rem,4vw,3.4rem);line-height:1.1;font-weight:700;letter-spacing:-.06em;margin-top:14px; }
.lede { color:var(--text-dim);font-size:.93rem;max-width:620px;line-height:1.75;margin-top:16px; }
.lede code { color:var(--text);font-size:.8rem; }
.pill { display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border-soft);padding:6px 10px;border-radius:99px;font-size:.65rem;color:var(--text-dim);white-space:nowrap; }
.pill i { width:5px;height:5px;border-radius:50%;background:#98bd94; }
/* GTA / an atmospheric cover, then a clearly spaced article. */
.gta-hero { margin:28px auto 40px;max-width:1088px;border-radius:var(--radius);overflow:hidden;isolation:isolate;background:#20131f; }
.gta-hero-img { height:430px;object-position:center 37%;opacity:.85; }
.gta-hero-content { padding:80px 0 32px;background:linear-gradient(to top,rgba(18,10,20,.99),rgba(18,10,20,.65) 60%,transparent); }
.gta-hero-content .eyebrow { color:#e7c5d5;margin-bottom:13px; }
.gta-title { font-family:'Syne',sans-serif;font-size:clamp(3rem,7vw,5.4rem);font-weight:800;letter-spacing:-.06em;line-height:.95;margin-bottom:15px; }
.gta-subtitle { font-size:.86rem;color:#dec9d7;margin-bottom:23px; }
.countdown { display:flex;gap:10px;flex-wrap:nowrap;font-family:'Space Grotesk',sans-serif;font-size:1.85rem;font-variant-numeric:tabular-nums; }
.countdown .num { min-width:1.6em;letter-spacing:-.05em;font-weight:500;color:#f5d6e3; }
.countdown .sep { color:#c8a4b7;font-size:.55rem;text-transform:uppercase;letter-spacing:.06em;margin:0 18px 0 -10px; }
body.gta6 .gta-article-section { padding:0 0 40px; }
body.gta6 .gta-article-section .container { padding-top:0;padding-bottom:0; }
body.gta6 section h2 { font-family:'Syne',sans-serif;font-size:1.45rem;font-weight:600;letter-spacing:-.04em;color:var(--text);margin-bottom:22px; }
.article-copy { max-width:780px;font-size:.92rem;line-height:1.85;color:var(--text-dim);margin-top:16px; }
.article-copy strong { color:var(--text);font-weight:500; }
.article-links { display:flex;gap:12px 24px;flex-wrap:wrap;margin-top:24px;font-size:.8rem;color:var(--accent-bright); }
.article-links a:hover { text-decoration:underline;text-underline-offset:5px; }
.article-image { width:100%;border-radius:var(--radius);border:1px solid var(--border-soft); }
.article-image.cover-art { max-height:600px;object-fit:cover;object-position:center; }
.article-gallery,.feature-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:20px 0; }
.article-gallery .article-image { aspect-ratio:16/10;object-fit:cover; }
.feature-block { background:var(--surface);border:1px solid var(--border-soft);border-radius:18px;padding:24px; }
.feature-block h3 { font-size:.95rem;font-weight:500;color:var(--accent-bright);margin:0 0 10px; }
.feature-block p { font-size:.85rem;line-height:1.8;color:var(--text-dim);margin:0; }
body.gta6 .info-list { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;border-top:1px solid var(--border-soft); }
body.gta6 .info-list li { padding:14px 0;font-size:.8rem;gap:20px; }
body.gta6 .info-list .value { text-align:right;font-weight:400; }
.news-slider { margin:0;padding:22px;border:1px solid var(--border-soft);border-radius:18px;background:var(--surface); }
.news-slider-title { font-size:.7rem;color:var(--text-dim);opacity:1; }
.news-slider-items { min-height:82px; }
.news-item { padding:6px 0;background:none;border:0;animation:news-enter 320ms var(--ease); }
.news-item-link { font-size:1rem;line-height:1.5;font-weight:500; }
.news-item-meta { color:var(--text-muted);font-size:.68rem;opacity:1; }
.news-slider-empty { font-size:.82rem;padding:18px 0;opacity:1;color:var(--text-muted); }
.news-slider-dot { width:6px;height:6px; }
.news-slider-dots { gap:6px;padding:8px; }
.news-slider-btn { min-width:34px;min-height:34px; }
/* Chelsea / a club cover, a trophy strip and a varied editorial layout. */
.chelsea-cover { position:relative;isolation:isolate;margin:28px auto 0;max-width:1088px;min-height:340px;display:flex;align-items:end;overflow:hidden;border:1px solid var(--border-soft);border-radius:var(--radius); }
.chelsea-cover::after { content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,20,39,.96),rgba(8,20,39,.65) 65%,rgba(8,20,39,.3)); }
.chelsea-cover .hub-image { object-position:center 45%; }
.chelsea-cover .container { width:100%;padding:42px; }
.chelsea-cover .crest-heading { display:flex;align-items:center;gap:14px;color:#c0d3ed;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase; }
.chelsea-cover .crest-heading img { width:45px;height:45px; }
.chelsea-cover h1 { font-family:'Syne',sans-serif;font-size:clamp(2.5rem,5vw,4.4rem);font-weight:700;letter-spacing:-.06em;line-height:1.05;margin:24px 0 12px;max-width:680px; }
.chelsea-cover p { color:#b8cbe1;font-size:.85rem; }
.trophy-strip { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:26px 0 44px;padding:24px 0;border-bottom:1px solid var(--border-soft); }
.trophy-count { padding:0 25px;border-right:1px solid var(--border-soft); }
.trophy-count:first-child { padding-left:0; }
.trophy-count:last-child { border:0; }
.trophy-count b { display:block;font-family:'Syne',sans-serif;font-size:2.35rem;letter-spacing:-.065em;line-height:1.2;font-weight:600;color:var(--accent-bright);font-variant-numeric:tabular-nums; }
.trophy-count span { display:block;font-size:.69rem;color:var(--text-dim);margin-top:7px; }
.chelsea-reasons-layout { display:grid;grid-template-columns:200px minmax(0,1fr);gap:50px;align-items:start; }
.reasons-intro { position:sticky;top:118px; }
.reasons-intro h2 { font-family:'Syne',sans-serif;font-size:1.65rem;line-height:1.2;letter-spacing:-.04em;margin:14px 0; }
.reasons-intro p { font-size:.78rem;line-height:1.8;color:var(--text-dim); }
.reasons-list { gap:0;padding:0; }
.reasons-list li { padding:25px 0;border:0;border-bottom:1px solid var(--border-soft);border-radius:0;background:none;gap:22px; }
.reasons-list li:first-child { padding-top:0; }
.reasons-list li:hover { background:none;border-color:var(--border-soft); }
.reason-num { background:none;color:var(--text-muted);width:24px;height:26px;font-family:'Space Grotesk',sans-serif;font-size:.68rem;font-weight:400;padding-top:3px; }
.reason-text { font-size:.86rem;line-height:1.85;color:var(--text-dim); }
.reason-text strong { display:block;font-family:'Syne',sans-serif;font-size:1.13rem;letter-spacing:-.025em;font-weight:600;color:var(--text);margin-bottom:8px; }
.reasons-list li:nth-child(5n+1):not(:first-child) { padding:25px;background:rgba(120,178,255,.045);border:1px solid rgba(120,178,255,.12);border-radius:18px;margin:22px 0 2px; }
/* Weather / the whole sky changes while the information keeps its shape. */
body.weather-page { --sky-top:#243647;--sky-bottom:#111b29;background:linear-gradient(160deg,var(--sky-top) 0%,var(--sky-bottom) 76%);background-attachment:fixed;transition:--sky-top 2400ms ease,--sky-bottom 2400ms ease;color:#f6f6ef; }
body.weather-page .site-header { background:rgba(14,23,30,.66);border-bottom-color:rgba(255,255,255,.09); }
body.weather-page .top-nav a { color:#c3cdce; }
body.weather-page .top-nav a.active { color:var(--accent-bright); }
body.weather-page .menu-toggle span { background:#f6f6ef; }
body.weather-page .sidebar { background:#151f27; }
body.weather-page .sidebar-nav a { color:#c3cdce; }
body.weather-page .sidebar-nav a.active { color:var(--accent-bright); }
.weather-hero { min-height:520px;padding:44px 0 28px;justify-content:flex-start;overflow:visible;isolation:isolate; }
.weather-hero::after { content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,14,23,.12),transparent 70%);pointer-events:none;z-index:1; }
.weather-canvas { z-index:0;opacity:.85; }
.weather-status { max-width:var(--page-width);padding:0 32px;width:100%; }
.location-row { margin-bottom:24px; }
.location-row > span:first-child { font-size:.75rem;letter-spacing:.12em;font-weight:500;opacity:1; }
.live-indicator { opacity:1;font-size:.63rem;letter-spacing:.09em;color:#d3ddda; }
.live-indicator i { background:#acd2b0;width:5px;height:5px;animation:none;box-shadow:0 0 10px rgba(172,210,176,.25); }
.weather-page:not(.weather-ready) .live-indicator i { background:#c5bd9f;box-shadow:none; }
.weather-search-wrap { max-width:320px;margin-bottom:36px; }
#weather-search { padding:13px 18px 13px 42px;font-size:.8rem;border-radius:12px;background:rgba(15,24,31,.16);border-color:rgba(245,246,239,.17);box-shadow:none; }
#weather-search::placeholder { color:#c0ccce; }
.weather-search-wrap > .icon { position:absolute;left:14px;top:13px;width:17px;height:17px;color:#d3dcd8;pointer-events:none; }
.weather-search-results { background:#1a2a34; }
.search-result-item { color:#edf1e9;font-size:.8rem;min-height:44px; }
.search-result-item:focus-visible { outline-offset:-3px; }
.current-temp { font-family:'Space Grotesk',sans-serif;font-size:clamp(6.4rem,12vw,10rem);letter-spacing:-.085em;line-height:.9;font-weight:400; }
.weather-hero h1 { font-size:1.15rem;font-weight:500;letter-spacing:-.025em;text-transform:none;color:#f0e0b4;margin-top:20px; }
.current-meta { font-size:.78rem;opacity:1;color:#c0cfd0;gap:24px;margin-top:10px; }
.weather-message { max-width:var(--page-width);padding:0 32px;margin-top:24px;font-size:.83rem;color:#e2e8df;font-weight:400;line-height:1.65; }
.weather-message > div { max-width:530px; }
.weather-alert-line { font-size:.65rem; }
.weather-section { padding:24px 0 32px; }
.weather-section h2 { max-width:var(--page-width);padding:0 32px;font-size:.64rem;letter-spacing:.15em;color:#c7d4d4;opacity:1;font-weight:500;margin-bottom:16px; }
.hourly-scroll,.rain-summary,.rain-graph,.daily-list,.details-grid { max-width:var(--page-width);padding-left:32px;padding-right:32px; }
.hourly-scroll { gap:8px;scroll-snap-type:x proximity; }
.hourly-item { flex:1 0 76px;border-radius:14px;padding:16px 10px;background:rgba(7,19,29,.18);border:1px solid rgba(255,255,255,.12); }
.hourly-time { color:#c9d4d5;opacity:1;font-size:.62rem;letter-spacing:.04em;font-weight:400; }
.hourly-icon { margin:14px 0; }
.hourly-icon .icon { width:26px;height:26px;color:#e6d5b2; }
.hourly-temp { font-size:1.06rem;font-weight:500; }
.hourly-rain { opacity:1;color:#b6cbd1;font-size:.64rem; }
.rain-summary { font-size:.8rem;font-weight:400;opacity:1;color:#dbe4e0;gap:32px; }
.rain-graph { gap:0;justify-content:space-between;min-height:150px;overflow-x:auto; }
.rain-bar-wrap { flex:1 0 34px; }
.rain-bar { background:#adc8ce;width:10px;opacity:.8; }
.rain-bar-label,.rain-bar-prob { color:#bdcfd3;opacity:1;font-size:.62rem;font-weight:400; }
.daily-list { gap:0; }
.daily-item { grid-template-columns:100px 42px minmax(120px,1fr) minmax(160px,1.3fr) 60px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.1);border-radius:0;gap:22px; }
.daily-item:last-child { border:0; }
.daily-day { font-size:.8rem;font-weight:500;letter-spacing:0; }
.daily-icon .icon { width:23px;height:23px;color:#e6d5b2; }
.daily-condition { color:#c3d1d2;opacity:1;font-size:.77rem; }
.daily-min,.daily-rain { color:#c3d1d2;opacity:1;font-size:.75rem; }
.daily-max { font-weight:500;font-size:.75rem; }
.daily-range-bar { min-width:25px;background:rgba(255,255,255,.09);height:4px; }
.daily-range-fill { background:linear-gradient(90deg,#9dbccc,#e6ce98); }
.details-grid { grid-template-columns:repeat(4,minmax(0,1fr));gap:12px; }
.detail-item { background:rgba(7,19,29,.2);border-color:rgba(255,255,255,.12);border-radius:16px;padding:22px;backdrop-filter:none; }
.detail-icon { color:#d2dcd5;margin-bottom:10px; }
.detail-icon .icon { width:22px;height:22px; }
.detail-label { color:#b9cbcf;opacity:1;font-size:.6rem;letter-spacing:.1em;font-weight:400; }
.detail-value { font-size:1rem;font-weight:400; }
body.weather-page .site-footer { color:#c1cdca;background:rgba(7,19,29,.1); }
body.weather-page .footer-brand,body.weather-page .footer-links { color:#d1dbd2; }
.weather-retry { margin-left:32px;margin-top:16px;position:relative;z-index:3; }
.weather-placeholder { min-height:132px;display:flex;align-items:center;color:#bdced1;font-size:.8rem;border:1px solid rgba(255,255,255,.1);border-radius:14px;margin:0 32px;padding:18px;background:rgba(7,19,29,.12); }
/* Short links / a purposeful single action. */
.shortener-layout { display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:start;padding-top:82px; }
.shortener-intro { padding-top:12px; }
.shortener-intro h1 { font-family:'Syne',sans-serif;font-size:clamp(2.7rem,4vw,3.6rem);font-weight:700;letter-spacing:-.06em;line-height:1.06;margin-top:22px; }
.shortener-intro .lede { max-width:340px;font-size:.88rem; }
.shortener-intro .text-button { margin-top:22px; }
.tool-panel { padding:32px;background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius);min-width:0; }
.tool-panel-heading { display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;gap:16px; }
.tool-panel-heading .icon { width:22px;height:22px;color:var(--accent); }
.tool-panel-heading h2 { font-size:.9rem;font-weight:500; }
.tool-panel .shortener-form { margin-top:0;gap:22px; }
.form-row label { color:var(--text-dim);font-size:.73rem;font-weight:400; }
.form-row label span { color:var(--text-muted);font-size:.66rem; }
#url-input,#custom-input { width:100%;min-width:0;border-radius:10px;background:#121410;border:1px solid var(--border-soft);padding:14px;font-size:.85rem;line-height:1.5;color:var(--text); }
#url-input:focus,#custom-input:focus { border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.07); }
#url-input::placeholder,#custom-input::placeholder { color:#84877d; }
.custom-code-wrap { display:flex;align-items:center;min-width:0;background:#121410;border:1px solid var(--border-soft);border-radius:10px;overflow:hidden; }
.custom-code-wrap:focus-within { border-color:var(--accent); }
.custom-code-wrap > span { font-size:.75rem;color:var(--text-muted);padding-left:14px;white-space:nowrap; }
.custom-code-wrap #custom-input { border:0;background:none;box-shadow:none;padding-left:3px; }
#shorten-btn { min-height:48px;display:flex;align-items:center;justify-content:center;gap:10px;background:#ddc180;color:#171912;border-radius:10px;font-size:.8rem;font-weight:500;transition:transform var(--fast) var(--ease),background var(--fast); }
#shorten-btn .icon { width:18px;height:18px; }
#shorten-btn:hover { opacity:1;background:#ecd49b; }
.form-hint { margin-top:18px;font-size:.68rem;color:var(--text-muted);text-align:center; }
.shortener-result { padding:20px;margin-top:24px;flex-direction:column;align-items:stretch;border-radius:14px;border-color:rgba(160,192,151,.28);background:rgba(153,185,144,.045);animation:news-enter 400ms var(--ease);gap:14px; }
.result-heading { display:flex;align-items:center;gap:8px;color:#bfd3b6;font-size:.73rem; }
.result-heading .icon { width:16px;height:16px; }
.result-row { display:flex;align-items:center;justify-content:space-between;gap:12px; }
.result-url { font-size:.83rem;line-height:1.6;min-width:0;overflow-wrap:anywhere; }
.result-url:hover { text-decoration:underline;text-underline-offset:4px; }
.copy-btn { min-height:38px;font-size:.73rem;padding:9px 13px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:8px; }
.copy-btn .icon { width:14px;height:14px; }
.shortener-error { font-size:.8rem;line-height:1.6;color:#e6b1a5;background:rgba(224,131,107,.07);border-color:rgba(224,131,107,.22);padding:14px 16px;animation:news-enter 300ms var(--ease); }
/* Cameras / image states are as deliberate as the loaded view. */
.cameras-hero { padding-bottom:24px; }
.camera-toolbar { display:flex;align-items:center;gap:12px;justify-content:space-between;margin:0 0 26px; }
.camera-search { position:relative;flex:1;max-width:400px; }
.camera-search .icon { position:absolute;left:14px;top:13px;width:18px;height:18px;color:var(--text-muted); }
.camera-search input { width:100%;min-height:44px;padding:12px 15px 12px 42px;background:var(--surface);color:var(--text);border:1px solid var(--border-soft);border-radius:10px;font-size:.78rem;outline:0; }
.camera-search input:focus { border-color:var(--accent); }
.camera-toolbar select { max-width:190px;min-height:44px;background:var(--surface);color:var(--text-dim);border:1px solid var(--border-soft);border-radius:10px;padding:10px 30px 10px 14px;font-size:.75rem; }
.camera-counter { font-size:.7rem;color:var(--text-muted);white-space:nowrap; }
.camera-grid { grid-template-columns:repeat(3,minmax(0,1fr));gap:18px; }
.camera-grid-section { padding-bottom:0; }
.camera-card { display:flex;flex-direction:column;border-radius:16px;border:1px solid var(--border-soft);background:var(--surface);min-width:0;overflow:hidden;transition:transform var(--normal) var(--ease),border-color var(--normal); }
.camera-open { display:block;width:100%;background:none;border:0;padding:0;color:var(--text);text-align:left; }
.camera-open:focus-visible { outline-offset:-4px; }
.camera-embed { background:#222823;aspect-ratio:16/10;position:relative; }
.camera-embed img { width:100%;height:100%;object-fit:cover;transition:opacity .45s var(--ease),transform 800ms var(--ease); }
.camera-embed .camera-fallback { position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:20px;color:var(--text-muted);font-size:.72rem;background:linear-gradient(135deg,#202922,#191f1c); }
.camera-fallback .icon { width:28px;height:28px;opacity:.65; }
.camera-card:not(.is-failed) .camera-fallback { display:none; }
.camera-card.is-failed img { opacity:0; }
.camera-card.is-loading .camera-embed::after { content:'';position:absolute;inset:0;animation:skeleton 1.7s ease-in-out infinite;background:linear-gradient(110deg,transparent 15%,rgba(255,255,255,.055) 45%,transparent 80%); }
.camera-info { display:flex;align-items:start;flex-direction:column;gap:6px;padding:18px; }
.camera-label { font-size:.78rem;font-weight:500;line-height:1.55; }
.camera-loc { font-size:.66rem;color:var(--text-muted); }
.camera-card-meta { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding:0 18px 16px;color:var(--text-muted);font-size:.59rem; }
.camera-status { display:flex;align-items:center;gap:5px; }
.camera-status::before { content:'';width:4px;height:4px;border-radius:50%;background:#9f9d8d; }
.camera-card.is-loaded .camera-status::before { background:#a5c19a; }
.camera-card.is-failed .camera-status::before { background:#c49b83; }
.camera-note { font-size:.7rem;color:var(--text-muted);margin-bottom:24px; }
.camera-empty { padding:60px;text-align:center;color:var(--text-dim);font-size:.85rem; }
.camera-dialog { width:min(920px,calc(100vw - 32px));max-height:90svh;padding:0;background:var(--surface);color:var(--text);border:1px solid var(--border-soft);border-radius:22px;margin:auto;overflow:auto; }
.camera-dialog::backdrop { background:rgba(4,7,5,.8);backdrop-filter:blur(10px); }
.camera-dialog[open] { animation:dialog-enter 360ms var(--ease); }
.camera-dialog.is-closing { animation:dialog-exit 180ms ease forwards; }
.camera-dialog[open]::backdrop { animation:backdrop-enter 300ms ease; }
.camera-modal { padding:28px;max-width:none;border:0;background:none;border-radius:0;max-height:none;overflow:visible; }
.camera-modal-main { margin:0; }
.camera-modal-main img { width:100%;min-height:100px;max-height:62svh;object-fit:contain;background:#101710;border-radius:12px; }
.camera-modal-label { margin-top:18px;font-size:.9rem;font-weight:500; }
.camera-modal-time { color:var(--text-dim);font-size:.73rem; }
.camera-modal-close { position:static;margin-left:auto;margin-bottom:18px;display:grid;width:36px;height:36px; }
.camera-modal-close .icon { width:18px;height:18px; }
.modal-image-error { padding:40px 20px;color:var(--text-dim);font-size:.85rem; }
/* Secondary tools use the same panels, fields and type scale. */
.player-hero { padding:58px 0 32px;text-align:left; }
.player-hero-icon { display:none; }
.player-mode-section { padding-bottom:24px; }
.player-mode-toggle { display:inline-flex;background:var(--surface);border:1px solid var(--border-soft);border-radius:12px;padding:4px;gap:4px; }
.player-mode-btn { background:none;border:0;color:var(--text-dim);padding:10px 20px;border-radius:8px;font-size:.78rem;font-weight:400;white-space:nowrap; }
.player-mode-btn-active { color:var(--text);background:var(--surface-raised);box-shadow:0 2px 6px rgba(0,0,0,.15); }
.player-input-section .container > .player-form { padding:28px;background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius); }
.player-form { gap:24px; }
.player-form label { font-size:.72rem;color:var(--text-dim);font-weight:400;margin-bottom:8px; }
.player-form input,.player-form select,.player-form textarea { background:#121410;padding:12px 14px;font-size:.8rem;border-color:var(--border-soft);border-radius:10px;min-height:44px; }
.player-form select { max-width:100%; }
.player-generate-btn { background:var(--accent);font-size:.8rem;font-weight:500;min-height:48px; }
.player-attrs-title { font-size:.87rem;font-weight:500; }
.player-attrs-hint { opacity:1;color:var(--text-muted);font-size:.7rem; }
.player-results { padding-top:24px; }
.player-download-btn { font-size:.75rem;min-height:42px; }
.stats-hero { padding:58px 0 0; }
#stats-content { margin-top:36px; }
.stats-grid { gap:16px;margin-bottom:30px; }
.stat-card { border-radius:18px;background:var(--surface);border:1px solid var(--border-soft);padding:26px; }
.stat-card .label { opacity:1;color:var(--text-dim);font-size:.65rem;font-weight:400;letter-spacing:.1em; }
.stat-card .value { font-family:'Space Grotesk',sans-serif;font-size:2.5rem;font-weight:400;letter-spacing:-.06em;font-variant-numeric:tabular-nums; }
.stats-table-scroll { overflow-x:auto;border:1px solid var(--border-soft);border-radius:16px;background:var(--surface); }
.stats-table th { font-size:.6rem;opacity:1;color:var(--text-muted);font-weight:400;letter-spacing:.1em;white-space:nowrap; }
.stats-table td { font-size:.77rem;padding:18px 16px; }
.stats-table a:hover { color:var(--accent-bright); }
.stats-table .date { color:var(--text-muted);opacity:1;font-size:.68rem;white-space:nowrap; }
.stats-table .url { max-width:320px;opacity:1;color:var(--text-dim); }
.stats-table .clicks-zero { color:var(--text-muted);opacity:1; }
.stats-bar { display:flex;align-items:center;gap:10px; }
.stats-bar-track { min-width:50px;flex:1;background:var(--glass-hover);border-radius:4px;overflow:hidden;height:4px; }
.stats-bar-fill { height:100%;background:var(--accent);border-radius:4px;transition:width .6s var(--ease); }
.stats-loading,.stats-empty { padding:50px 20px;text-align:center;opacity:1;color:var(--text-dim);border:1px solid var(--border-soft);border-radius:18px;font-size:.85rem;background:var(--surface); }
.stats-loading { animation:skeleton 1.6s ease-in-out infinite; }
.stats-empty a { color:var(--accent-bright); }
.stats-empty button { display:block;margin:16px auto 0; }
.refresh-btn { margin-bottom:20px; }
@media(hover:hover) and (pointer:fine) {
  .hub-card:hover { transform:translateY(-5px);border-color:rgba(var(--accent-rgb),.28);box-shadow:0 12px 35px rgba(0,0,0,.14); }
  .hub-card:hover .hub-image { transform:scale(1.045); }
  .hub-card:hover .card-arrow { transform:rotate(45deg);background:rgba(255,255,255,.07); }
  .camera-card:hover { transform:translateY(-3px);border-color:var(--border); }
  .camera-open:hover .camera-embed img { transform:scale(1.035); }
}
button:active:not(:disabled),.hub-card:active { transform:scale(.985); }
@keyframes cloud-drift { to{transform:translateX(-14px);} }
@keyframes sun-breathe { to{transform:scale(1.035);opacity:.8;} }
@keyframes news-enter { from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);} }
@keyframes dialog-enter { from{opacity:0;transform:translateY(12px) scale(.98);}to{opacity:1;transform:none;} }
@keyframes dialog-exit { to{opacity:0;transform:translateY(6px) scale(.99);} }
@keyframes backdrop-enter { from{opacity:0;}to{opacity:1;} }
@keyframes skeleton { 50%{opacity:.45;} }
@keyframes page-out { to{opacity:0;transform:translateY(-5px);} }
@keyframes page-in { from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;} }
::view-transition-old(page-content) { animation:page-out 160ms ease both; }
::view-transition-new(page-content) { animation:page-in 380ms var(--ease) both; }
::view-transition-group(site-header) { animation-duration:280ms; }
::view-transition-old(root),::view-transition-new(root) { animation-duration:250ms; }
@media(min-width:1600px) { .home-intro{padding-top:74px;} }
@media(max-width:1100px) {
  .header-clock { display:none; }
  .site-header .header-inner { gap:15px; }
  .gta-hero,.chelsea-cover { margin-left:32px;margin-right:32px; }
  .camera-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .shortener-layout { gap:38px; }
}
@media(max-width:899px) {
  .site-header .header-inner { min-height:74px;justify-content:space-between; }
  .site-header .menu-toggle { display:flex;position:relative;margin:0; }
  .site-header .top-nav { display:none; }
  .site-header .logo { position:static;transform:none;font-size:1.35rem; }
  .home-intro-inner { align-items:start; }
  .home-intro .intro-copy { max-width:190px;font-size:.8rem; }
  .hub-gta,.hub-weather { min-height:345px; }
  .hub-gta .card-content,.hub-weather .card-content { min-height:345px;padding:23px; }
  .hub-weather .weather-location { margin-top:30px; }
  .hub-weather .weather-preview-temp { font-size:4.7rem; }
  .hub-weather .weather-art { right:-42px;width:160px;transform:scale(.85); }
  .hub-chelsea { grid-column:span 6; }
  .hub-tools { grid-column:span 6;grid-template-columns:1fr; }
  .hub-tools .hub-card { min-height:137px; }
  .hub-tool .tool-illustration { position:absolute;right:28px;bottom:16px;height:70px;transform:scale(.63);transform-origin:100% 100%;opacity:.6; }
  .hub-tool .card-content { padding:20px;justify-content:center;max-width:85%; }
  .hub-tool .card-arrow { display:none; }
  .hub-tool p { font-size:.7rem;max-width:170px; }
  .chelsea-reasons-layout { grid-template-columns:160px minmax(0,1fr);gap:32px; }
  .shortener-layout { grid-template-columns:1fr;max-width:650px;padding-top:48px; }
  .shortener-intro .lede { max-width:none; }
  .shortener-intro h1 br { display:none; }
  .shortener-intro .text-button { margin-top:12px; }
  .details-grid { grid-template-columns:repeat(4,minmax(0,1fr));gap:10px; }
  .detail-item { padding:16px; }
  .daily-item { grid-template-columns:80px 30px minmax(80px,1fr) minmax(130px,1.2fr) 40px;gap:14px; }
}
@media(max-width:600px) {
  html { scroll-padding-top:90px; }
  .container,.site-header .header-inner { padding-left:22px;padding-right:22px; }
  .site-main { padding-bottom:44px;min-height:calc(100svh - 240px); }
  .site-header .header-inner { min-height:70px; }
  .home-intro { padding:35px 0 28px; }
  .home-intro-inner { display:block; }
  .home-intro h1 { font-size:clamp(2.65rem,10vw,3.6rem);margin-top:14px;max-width:400px; }
  .home-intro .intro-copy { max-width:290px;margin-top:16px;font-size:.79rem;padding:0; }
  .eyebrow { font-size:.58rem;letter-spacing:.15em; }
  .hub-grid { gap:14px; }
  .hub-gta,.hub-weather,.hub-chelsea,.hub-tools { grid-column:1 / -1; }
  .hub-gta,.hub-gta .card-content { min-height:330px; }
  .hub-card { border-radius:18px; }
  .hub-gta .card-content { padding:24px; }
  .hub-gta h2 { font-size:2.4rem; }
  .hub-gta .card-kicker { left:24px;top:26px;font-size:.58rem; }
  .home-countdown { gap:25px;margin-top:23px; }
  .home-countdown b { font-size:1.65rem; }
  .hub-weather,.hub-weather .card-content { min-height:248px; }
  .hub-weather .card-content { padding:24px; }
  .hub-weather .weather-location { margin-top:26px; }
  .hub-weather .weather-preview-temp { font-size:4.5rem;margin:8px 0 4px; }
  .hub-weather .weather-preview-condition { font-size:.9rem; }
  .hub-weather .weather-art { right:7px;top:40px;transform:scale(.95); }
  .hub-weather .preview-bottom { padding-top:17px; }
  .hub-weather .weather-preview-extra { font-size:.69rem; }
  .hub-chelsea,.hub-chelsea .card-content { min-height:248px; }
  .hub-chelsea .card-content { padding:24px; }
  .hub-chelsea .mini-crest { width:45px;height:45px;left:24px;top:24px; }
  .hub-chelsea h2 { font-size:1.8rem; }
  .hub-tools { grid-template-columns:1fr 1fr;gap:14px; }
  .hub-tools .hub-card { min-height:210px; }
  .hub-tool .card-content { padding:20px 17px;max-width:none;justify-content:end; }
  .hub-tool .tool-illustration { top:8px;left:17px;right:auto;bottom:auto;transform-origin:0 0;transform:scale(.65);opacity:.85; }
  .hub-tool h2 { font-size:1.05rem;line-height:1.2;margin-bottom:7px; }
  .hub-tool p { font-size:.66rem;max-width:none; }
  .hub-tool .card-kicker { font-size:.5rem; }
  .hub-footnote { align-items:start;font-size:.62rem;gap:16px;margin-top:20px; }
  .hub-footnote > span { max-width:170px; }
  .footer-inner { align-items:start;gap:18px;flex-direction:column; }
  .site-footer { padding:24px 0; }
  .footer-links { gap:19px;font-size:.7rem; }
  .footer-note { font-size:.63rem; }
  .page-heading,.stats-hero,.player-hero { padding-top:36px;padding-bottom:28px; }
  .page-heading h1,.stats-hero h1,.player-hero h1 { font-size:2.3rem;margin-top:13px; }
  .lede { font-size:.82rem;margin-top:14px; }
  .gta-hero,.chelsea-cover { margin:18px 16px 28px;border-radius:18px; }
  .gta-hero-img { height:365px; }
  .gta-hero-content { padding:65px 0 26px; }
  .gta-hero-content .container { padding:0 24px; }
  .gta-title { font-size:3.8rem; }
  .gta-subtitle { font-size:.72rem;margin-bottom:22px;max-width:230px; }
  .countdown { font-size:1.5rem;gap:4px; }
  .countdown .sep { font-size:.48rem;margin:0 12px 0 0; }
  body.gta6 .gta-article-section { padding-bottom:30px; }
  body.gta6 .gta-article-section .container { padding:0 22px; }
  body.gta6 section h2 { font-size:1.25rem;margin:0 0 18px; }
  body.gta6 .info-list { grid-template-columns:1fr; }
  body.gta6 .info-list li { font-size:.75rem;padding:12px 0; }
  .news-slider { padding:18px; }
  .news-slider-header { align-items:start;gap:10px; }
  .news-slider-title { font-size:.62rem;max-width:140px; }
  .news-slider-dots { display:none; }
  .news-item-link { font-size:.88rem; }
  .article-gallery,.feature-grid { grid-template-columns:1fr;gap:14px; }
  .feature-block { padding:22px; }
  .feature-block p,.article-copy { font-size:.81rem; }
  .article-links { font-size:.74rem;gap:12px 18px; }
  .chelsea-cover { min-height:340px;margin-bottom:0; }
  .chelsea-cover .container { padding:28px; }
  .chelsea-cover h1 { font-size:2.7rem;margin-top:25px; }
  .chelsea-cover p { font-size:.75rem; }
  .chelsea-cover .crest-heading { font-size:.59rem;gap:12px; }
  .trophy-strip { grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 0;margin:16px 0 30px;padding-bottom:30px; }
  .trophy-count { padding-left:20px; }
  .trophy-count:nth-child(3) { padding-left:0; }
  .trophy-count:nth-child(2) { border:0; }
  .trophy-count b { font-size:2rem; }
  .trophy-count span { font-size:.66rem; }
  .chelsea-reasons-layout { grid-template-columns:1fr;gap:18px; }
  .reasons-intro { position:static; }
  .reasons-intro h2 { font-size:1.5rem;margin:12px 0; }
  .reasons-intro p { margin-bottom:8px;font-size:.76rem; }
  .reasons-list li { padding:24px 0;gap:16px; }
  .reason-num { width:18px;font-size:.63rem; }
  .reason-text { font-size:.8rem;line-height:1.85; }
  .reason-text strong { font-size:1.05rem; }
  .reasons-list li:nth-child(5n+1):not(:first-child) { padding:21px 17px;gap:13px; }
  .weather-hero { min-height:500px;padding-top:30px; }
  .weather-status,.weather-message,.weather-section h2,.hourly-scroll,.rain-graph,.daily-list,.details-grid,.rain-summary { padding-left:22px;padding-right:22px; }
  .weather-status { padding-top:0; }
  .location-row > span:first-child { font-size:.64rem;max-width:245px;letter-spacing:.09em; }
  .location-row { margin-bottom:24px;gap:16px; }
  .live-indicator { font-size:.54rem;white-space:nowrap; }
  .weather-search-wrap { max-width:270px;margin-bottom:35px; }
  .current-temp { font-size:7.8rem; }
  .weather-hero h1 { font-size:1.1rem;margin-top:18px; }
  .current-meta { font-size:.7rem;gap:18px;flex-wrap:wrap; }
  .weather-message { font-size:.78rem;margin-top:25px;max-width:100%; }
  .weather-message > div { max-width:310px; }
  .weather-section { padding:18px 0 27px; }
  .weather-section h2 { font-size:.6rem;margin-bottom:14px; }
  .hourly-item { flex:0 0 76px;padding:15px 10px; }
  .rain-summary { font-size:.74rem; }
  .rain-graph { min-height:135px; }
  .rain-bar-wrap { flex:0 0 35px; }
  .daily-item { grid-template-columns:62px 27px minmax(95px,1fr) 36px;gap:12px;padding:17px 0; }
  .daily-condition { display:none; }
  .daily-rain { display:block;font-size:.65rem; }
  .daily-day { font-size:.73rem; }
  .daily-temps { gap:8px;min-width:0; }
  .daily-range-bar { min-width:12px; }
  .daily-min,.daily-max { width:27px;font-size:.7rem; }
  .details-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
  .detail-item { padding:19px; }
  .detail-value { font-size:.92rem; }
  .weather-retry { margin-left:22px; }
  .weather-placeholder { margin:0 22px; }
  .shortener-layout { padding-top:35px;gap:28px; }
  .shortener-intro { padding:0; }
  .shortener-intro h1 { font-size:2.8rem;margin-top:17px; }
  .shortener-intro .lede { font-size:.82rem; }
  .shortener-intro .text-button { font-size:.75rem; }
  .tool-panel { padding:24px 20px;border-radius:18px; }
  .tool-panel-heading { margin-bottom:25px; }
  .tool-panel .shortener-form { gap:20px; }
  .custom-code-wrap > span { font-size:.67rem; }
  .form-hint { font-size:.62rem; }
  .shortener-result { padding:16px; }
  .result-row { gap:10px; }
  .result-url { font-size:.75rem; }
  .camera-toolbar { flex-wrap:wrap;gap:10px;margin-bottom:22px; }
  .camera-search { max-width:none;flex-basis:100%; }
  .camera-toolbar select { flex:1;max-width:none; }
  .camera-counter { font-size:.65rem; }
  .camera-grid { grid-template-columns:1fr;gap:18px; }
  .camera-info { padding:18px 18px 13px; }
  .camera-label { font-size:.83rem; }
  .camera-embed { aspect-ratio:16/10; }
  .camera-note { font-size:.66rem;line-height:1.7; }
  .camera-modal { padding:18px; }
  .camera-modal-label { font-size:.8rem; }
  .camera-modal-time { font-size:.65rem; }
  .camera-dialog { border-radius:16px; }
  .player-input-section .container > .player-form { padding:22px 18px; }
  .player-mode-toggle { display:flex; }
  .player-mode-btn { padding:10px 15px; }
  .stats-grid { grid-template-columns:repeat(3,minmax(0,1fr));gap:9px; }
  .stat-card { padding:17px 12px;border-radius:13px; }
  .stat-card .label { font-size:.51rem;letter-spacing:.05em; }
  .stat-card .value { font-size:1.75rem; }
  .stats-table { min-width:600px; }
}
@media(max-width:360px) {
  .container,.site-header .header-inner { padding-left:18px;padding-right:18px; }
  .hub-tools { grid-template-columns:1fr; }
  .hub-tools .hub-card { min-height:145px; }
  .hub-tool .tool-illustration { left:auto;right:18px;transform-origin:100% 0;opacity:.5; }
  .hub-tool .card-content { max-width:80%; }
  .home-countdown { gap:20px; }
  .home-countdown b { font-size:1.5rem; }
  .daily-item { gap:8px;grid-template-columns:52px 23px minmax(80px,1fr) 30px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important; }
  ::view-transition-old(*),::view-transition-new(*),::view-transition-group(*) { animation:none!important; }
}
/* Final interaction details. */
.sidebar.open .sidebar-nav a:nth-of-type(1){transition-delay:.035s}
.sidebar.open .sidebar-nav a:nth-of-type(2){transition-delay:.07s}
.sidebar.open .sidebar-nav a:nth-of-type(3){transition-delay:.105s}
.sidebar.open .sidebar-nav a:nth-of-type(4){transition-delay:.14s}
.sidebar.open .sidebar-nav a:nth-of-type(5){transition-delay:.175s}
.sidebar.open .sidebar-nav a:nth-of-type(6){transition-delay:.21s}
.sidebar.open .sidebar-nav a:nth-of-type(7){transition-delay:.245s}
.sidebar.open .sidebar-nav a:nth-of-type(8){transition-delay:.28s}
.footer-links .icon{width:12px;height:12px;margin-left:3px}
.camera-modal-open{overflow:hidden}
.weather-placeholder{box-sizing:border-box}
.hourly-scroll .weather-placeholder,.daily-list .weather-placeholder,.details-grid .weather-placeholder{margin:0;grid-column:1/-1;flex:1}
.search-result-item[aria-selected="true"]{background:rgba(255,255,255,.1);color:var(--accent-bright)}
.weather-search-results{max-height:320px;overflow-y:auto}
@media(prefers-reduced-motion:reduce){.sidebar.open .sidebar-nav a{transition-delay:0s!important}}
/* Minimal copy: clear names and direct destinations. */
.home-intro{padding:40px 0 30px}
.home-intro h1{margin:0;font-size:clamp(2.7rem,5vw,4.1rem)}
.club-honours{padding:2px 0 18px}
.club-honours-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.club-honours-grid>div{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:22px;border:1px solid var(--border-soft);background:var(--surface);border-radius:16px}
.club-honours-grid span{font-size:.78rem;color:var(--text-dim)}
.club-honours-grid b{font-family:'Space Grotesk',sans-serif;font-size:1.75rem;font-weight:400;color:var(--accent-bright)}
@media(max-width:600px){.home-intro{padding:29px 0 24px}.home-intro h1{font-size:2.7rem}.club-honours-grid{grid-template-columns:1fr;gap:10px}.club-honours-grid>div{padding:18px 20px}.club-honours-grid b{font-size:1.5rem}.shortener-intro h1{font-size:2.5rem}.sidebar{padding-top:100px}.hub-tool h2{font-size:1rem}}
/* Menus have their own snapshots during navigation. */
.sidebar{view-transition-name:site-menu}
.sidebar-backdrop{view-transition-name:menu-backdrop}
@keyframes menu-snapshot-out{to{opacity:0;transform:translateX(30px)}}
::view-transition-old(site-menu){animation:menu-snapshot-out 160ms ease both}
::view-transition-new(site-menu){animation:none;opacity:0}
::view-transition-old(menu-backdrop){animation:page-out 160ms ease both}
::view-transition-new(menu-backdrop){animation:none;opacity:0}
@media(prefers-reduced-motion:reduce){::view-transition-old(*),::view-transition-new(*),::view-transition-group(*){animation:none!important}}