:root {
  color-scheme: light;
  --ink: #17201b;
  --muted: #66716a;
  --line: rgba(23,32,27,.13);
  --paper: #f5f6f2;
  --time-a: #f8faf5;
  --time-b: #e9f0eb;
  --weather-glow: rgba(177,216,207,.42);
  --parallax-x: 0px;
  --parallax-y: 0px;
  --parallax-inverse-x: 0px;
  --parallax-inverse-y: 0px;
  --parallax-far-x: 0px;
  --parallax-far-y: 0px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--paper);
  color: var(--ink);
}

html[data-time="morning"] { --time-a:#fffaf0; --time-b:#e8f1ea; }
html[data-time="day"] { --time-a:#f9fbf7; --time-b:#e8efea; }
html[data-time="evening"] { --time-a:#fbf1e7; --time-b:#e8e7ef; }
html[data-time="night"] { --time-a:#edf0f1; --time-b:#dfe7e4; --ink:#16201d; --muted:#596760; }
html[data-weather="rain"] { --weather-glow:rgba(132,171,196,.5); }
html[data-weather="cloud"] { --weather-glow:rgba(181,190,193,.52); }
html[data-weather="sun"] { --weather-glow:rgba(245,214,128,.46); }
html[data-weather="warm"] { --weather-glow:rgba(240,169,130,.42); }
html[data-weather="cold"] { --weather-glow:rgba(159,211,226,.48); }

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 88% 8%, var(--weather-glow), transparent 30rem),
    radial-gradient(circle at 7% 0%, rgba(255,255,255,.94), transparent 28rem),
    linear-gradient(135deg,var(--time-a),var(--time-b));
  transition:background 5s ease,color 3s ease;
}

body::after {
  content:"";
  position:fixed;
  z-index:30;
  inset:0;
  pointer-events:none;
  opacity:.052;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

.atmosphere { position:fixed; z-index:-1; inset:0; overflow:hidden; pointer-events:none; }
.atmosphere i { position:absolute; width:34rem; aspect-ratio:1; border-radius:50%; filter:blur(70px); opacity:.16; animation:ambient-drift 28s ease-in-out infinite alternate; }
.atmosphere i:nth-child(1) { left:-12rem; top:20%; background:#a7d6c1; }
.atmosphere i:nth-child(2) { right:-10rem; top:42%; background:#d2b9ec; animation-delay:-9s; }
.atmosphere i:nth-child(3) { left:38%; bottom:-20rem; background:#f0cb9d; animation-delay:-17s; }
@keyframes ambient-drift { to { transform:translate3d(7rem,-3rem,0) scale(1.16); } }

a { color:inherit; }

.masthead {
  min-height:68px;
  padding:0 clamp(1rem,3vw,3rem);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px);
}

.brand { width:fit-content; display:flex; align-items:center; gap:.6rem; text-decoration:none; font-size:.82rem; font-weight:850; letter-spacing:-.04em; }
.brand span { width:.5rem; height:.5rem; border-radius:50%; background:#4d7c67; box-shadow:0 0 0 .28rem rgba(77,124,103,.11); }
.title-group { text-align:center; }
.title-group p { margin:0 0 .12rem; color:var(--muted); font-size:.5rem; font-weight:750; letter-spacing:.17em; text-transform:uppercase; }
.title-group h1 { margin:0; font-family:Georgia,serif; font-size:1.34rem; font-weight:400; letter-spacing:-.05em; }

.connection { justify-self:end; display:flex; align-items:center; gap:.5rem; padding:.5rem .75rem; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:rgba(255,255,255,.48); font-size:.54rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.connection i { width:.38rem; height:.38rem; border-radius:50%; background:#c69c40; box-shadow:0 0 0 .22rem rgba(198,156,64,.12); }
.connection[data-state="live"] i { background:#3b9b66; box-shadow:0 0 0 .22rem rgba(59,155,102,.12); }
.connection[data-state="offline"] i { background:#bd5a50; }

main { padding:0 clamp(1rem,3vw,3rem); }
.intro { min-height:8.2rem; padding:1.2rem 0 1rem; display:grid; grid-template-columns:minmax(0,.9fr) minmax(24rem,1.1fr); gap:3rem; align-items:end; }
.overline { margin:0 0 .38rem; color:#50705f; font-size:.54rem; font-weight:800; letter-spacing:.17em; text-transform:uppercase; }
.intro h2 { margin:0; font-family:Georgia,"Times New Roman",serif; font-size:clamp(2.15rem,3.25vw,3.55rem); font-weight:400; line-height:.82; letter-spacing:-.062em; }
.intro h2 em { color:#63796f; font-weight:400; white-space:nowrap; }
.intro-copy > p { max-width:48rem; margin:0; color:var(--muted); font-size:.77rem; line-height:1.52; }
.live-meta { margin-top:.7rem; padding-top:.6rem; display:flex; justify-content:space-between; gap:1rem; border-top:1px solid var(--line); color:#6d7770; font-size:.5rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }

.dashboard {
  height:clamp(30rem,calc(100svh - 17.5rem),44rem);
  display:grid;
  grid-template-columns:1.18fr .82fr 1.08fr .86fr 1.06fr;
  grid-template-rows:.9fr 1.16fr .94fr;
  grid-auto-flow:dense;
  gap:clamp(.55rem,.8vw,.82rem);
  padding-bottom:.75rem;
  perspective:1200px;
  animation:editorial-grid 58s cubic-bezier(.44,.02,.56,.98) infinite;
}

@keyframes editorial-grid {
  0%,100% { grid-template-columns:1.18fr .82fr 1.08fr .86fr 1.06fr; grid-template-rows:.9fr 1.16fr .94fr; }
  28% { grid-template-columns:.84fr 1.2fr .9fr 1.14fr .92fr; grid-template-rows:1.12fr .82fr 1.06fr; }
  56% { grid-template-columns:1.06fr .88fr 1.2fr .8fr 1.06fr; grid-template-rows:.82fr 1.08fr 1.1fr; }
  80% { grid-template-columns:.9fr 1.08fr .84fr 1.22fr .96fr; grid-template-rows:1.08fr 1.06fr .86fr; }
}

.block,.placeholder { min-width:0; min-height:0; overflow:hidden; border:1px solid rgba(24,32,28,.09); border-radius:clamp(.85rem,1.15vw,1.2rem); box-shadow:0 .8rem 2.2rem rgba(43,55,48,.055); }
.block { position:relative; container-type:size; opacity:1; transform:scale(.975); transform-origin:center; isolation:isolate; animation:card-breathe 19s var(--delay,0s) ease-in-out infinite; transition:opacity .65s ease,filter .65s ease,box-shadow .35s ease; }
.block.is-spotlight { grid-column:span 2; grid-row:span 2; box-shadow:0 1.4rem 4rem rgba(43,55,48,.13); }
.block.is-wide { grid-column:span 2; }
.block:hover { box-shadow:0 1.4rem 3.5rem rgba(43,55,48,.15); }

@keyframes card-breathe {
  0%,100% { transform:translate3d(0,0,0) scale(.965) rotateX(0deg); }
  32% { transform:translate3d(3px,-3px,0) scale(.998) rotateX(.25deg); }
  68% { transform:translate3d(-3px,3px,0) scale(.94) rotateX(-.2deg); }
}

.accent-sky { --card-a:#e2f0fb; --card-b:#c8e1f2; --art:#315d73; }
.accent-mint { --card-a:#e2f2e6; --card-b:#c5e2d2; --art:#285c4b; }
.accent-lemon { --card-a:#f7f2c6; --card-b:#e7dfa0; --art:#6b631e; }
.accent-coral { --card-a:#f6d9d0; --card-b:#edb9aa; --art:#7c3f37; }
.accent-lavender { --card-a:#ede4f7; --card-b:#d6c8ea; --art:#574176; }
.accent-peach { --card-a:#f8e4cc; --card-b:#ebc89f; --art:#754c2d; }
.accent-aqua { --card-a:#d8f0ed; --card-b:#b6ddda; --art:#245f5b; }
.accent-rose { --card-a:#f3e0e7; --card-b:#e3bfd0; --art:#7b4058; }
.accent-ice { --card-a:#e9f4f5; --card-b:#c9e2e7; --art:#335f69; }
.accent-sand { --card-a:#f1ebdc; --card-b:#d9ccb1; --art:#66563a; }
.block,.placeholder { color:var(--ink); background:linear-gradient(145deg,var(--card-a,#edf1ec),var(--card-b,#dfe8e1)); }

.source-image { position:absolute; z-index:0; inset:0; opacity:0; overflow:hidden; transition:opacity 1.2s ease; }
.source-image::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,18,15,.02) 5%,rgba(10,18,15,.24) 48%,rgba(10,18,15,.78) 100%); }
.source-image img { width:100%; height:100%; object-fit:cover; transform:translate3d(var(--parallax-inverse-x),var(--parallax-inverse-y),0) scale(1.1); filter:saturate(.88) contrast(1.04); transition:transform 1.2s ease; }
.source-image span { position:absolute; z-index:2; right:1rem; top:.9rem; max-width:55%; overflow:hidden; color:rgba(255,255,255,.76); font-size:.46rem; font-weight:800; letter-spacing:.09em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.is-spotlight.image-ready .source-image { opacity:1; }
.is-spotlight.image-ready { color:#fff; --ink:#fff; --muted:rgba(255,255,255,.76); }
.is-spotlight.image-ready .card-art,.is-spotlight.image-ready .display-glyph { opacity:.1; mix-blend-mode:screen; }

.card-art { position:absolute; z-index:1; inset:0; color:var(--art); opacity:.32; overflow:hidden; pointer-events:none; transition:opacity .6s ease,filter .6s ease; }
.card-art svg { width:100%; height:100%; overflow:visible; transform:translate3d(var(--parallax-x),var(--parallax-y),0) scale(1.045); transform-origin:center; transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.block:hover .card-art { opacity:.48; }
.is-spotlight .card-art { opacity:.42; }
.display-glyph { position:absolute; z-index:1; right:-.03em; top:-.28em; color:var(--art); opacity:.11; font-family:Georgia,serif; font-size:clamp(6rem,13vw,13rem); font-style:italic; line-height:1; pointer-events:none; transform:translate3d(var(--parallax-far-x),var(--parallax-far-y),0); transition:transform .8s ease; }

.block-content { position:relative; z-index:3; height:100%; padding:clamp(.72rem,1vw,1rem); display:flex; flex-direction:column; transition:opacity .55s ease,filter .55s ease; }
.block-top,.block-bottom { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.block-index { font-size:.48rem; font-weight:900; letter-spacing:.13em; }
.spotlight-label { display:none; margin-left:auto; padding:.28rem .48rem; border:1px solid currentColor; border-radius:999px; font-size:.42rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; opacity:.68; }
.is-spotlight .spotlight-label { display:block; }
.block-icon { width:1.82rem; height:1.82rem; display:grid; place-items:center; border:1px solid color-mix(in srgb,currentColor 25%,transparent); border-radius:50%; background:rgba(255,255,255,.1); }
.block-icon svg { width:.82rem; height:.82rem; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

.block-body { min-height:0; margin:auto 0; padding:.42rem 0; overflow:hidden; }
.eyebrow { margin:0 0 .28rem; font-size:.46rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; opacity:.57; }
.block h3 { margin:0; font-family:Georgia,"Times New Roman",serif; font-size:clamp(1rem,1.23vw,1.32rem); font-weight:400; line-height:.98; letter-spacing:-.045em; text-wrap:balance; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.summary { display:none; margin:.55rem 0 0; max-width:38rem; color:color-mix(in srgb,currentColor 72%,transparent); font-size:.7rem; line-height:1.43; }
.is-spotlight .block-body { padding:.75rem 0; }
.is-spotlight h3 { max-width:88%; font-size:clamp(2rem,3.2vw,3.6rem); line-height:.86; letter-spacing:-.06em; -webkit-line-clamp:3; }
.is-spotlight .summary { display:-webkit-box; max-width:72%; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden; font-size:clamp(.72rem,.88vw,.9rem); }
.is-wide h3 { max-width:74%; font-size:clamp(1.2rem,1.55vw,1.65rem); }
.is-wide .summary { display:-webkit-box; max-width:70%; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:.66rem; }

.topic-technology h3 { font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace; font-size:clamp(.88rem,1.08vw,1.14rem); line-height:1.04; letter-spacing:-.055em; }
.topic-technology.is-spotlight h3 { font-size:clamp(1.75rem,2.65vw,3rem); }
.topic-milton-keynes h3 { font-family:Inter,ui-sans-serif,system-ui,sans-serif; font-weight:760; letter-spacing:-.065em; }
.topic-weather h3 { font-family:Inter,ui-sans-serif,system-ui,sans-serif; font-weight:420; letter-spacing:-.06em; }
.topic-art h3 { font-style:italic; }
.topic-graphic-design h3 { font-family:Inter,ui-sans-serif,system-ui,sans-serif; font-weight:850; letter-spacing:-.075em; text-transform:uppercase; }
.topic-space h3 { letter-spacing:-.065em; }

.block-bottom { padding-top:.5rem; border-top:1px solid color-mix(in srgb,currentColor 16%,transparent); }
.metric { display:flex; align-items:baseline; gap:.32rem; min-width:0; }
.metric strong { font-family:Georgia,serif; font-size:.94rem; font-weight:400; letter-spacing:-.04em; }
.metric span { overflow:hidden; max-width:6rem; opacity:.54; font-size:.42rem; font-weight:800; letter-spacing:.08em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.source { flex:0 0 auto; opacity:.72; font-size:.44rem; font-weight:900; letter-spacing:.09em; text-decoration:none; text-transform:uppercase; }
.source:hover { opacity:1; }.source i { margin-left:.18rem; font-style:normal; }

.dashboard.is-shuffling .block-content,.dashboard.is-shuffling .card-art,.dashboard.is-shuffling .display-glyph { opacity:.02; filter:blur(8px); }
.dashboard.is-shuffling .block { filter:saturate(.68); }
.dashboard.is-revealing .block-content { animation:content-reveal .92s var(--scene-delay,0ms) cubic-bezier(.18,.74,.24,1) both; }
.dashboard.is-revealing .card-art { animation:art-reveal 1.25s calc(var(--scene-delay,0ms) + 120ms) ease both; }
@keyframes content-reveal { from { opacity:0; filter:blur(7px); transform:translateY(12px); } to { opacity:1; filter:blur(0); transform:translateY(0); } }
@keyframes art-reveal { from { opacity:0; transform:scale(.86) rotate(-3deg); } to { opacity:.38; transform:scale(1) rotate(0); } }
.block.is-leaving { opacity:0; filter:blur(9px); }
.block.is-entering { animation:card-arrive .9s cubic-bezier(.2,.75,.25,1) both,card-breathe 19s 1s ease-in-out infinite; }
@keyframes card-arrive { from { opacity:0; filter:blur(10px); transform:scale(.82); } to { opacity:1; filter:blur(0); transform:scale(.965); } }

@container (max-height:11.8rem) {
  .block-content { padding:.62rem .72rem; }
  .block-icon { width:1.6rem; height:1.6rem; }
  .block h3 { font-size:.98rem; }
  .metric span { display:none; }
}
@container (max-width:12.2rem) {
  .block h3 { font-size:.9rem; }
  .metric span,.block-icon { display:none; }
}
.is-spotlight .block-icon { display:grid; }

.placeholder { padding:1rem; display:flex; flex-direction:column; justify-content:center; gap:.7rem; animation:shimmer 1.8s ease-in-out infinite alternate; }
.placeholder.is-spotlight { grid-column:span 2; grid-row:span 2; }
.placeholder span { display:block; height:.55rem; width:36%; border-radius:1rem; background:rgba(255,255,255,.48); }
.placeholder span:nth-child(2) { width:74%; height:1.7rem; }.placeholder span:nth-child(3) { width:58%; }
@keyframes shimmer { to { filter:brightness(1.045); } }

footer { min-height:4rem; padding:.75rem clamp(1rem,3vw,3rem); display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); color:var(--muted); font-size:.48rem; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
.openai-mark { display:inline-grid; place-items:center; width:1.45rem; height:1.45rem; margin-right:.42rem; border:1px solid var(--line); border-radius:50%; color:var(--ink); }

@media (max-width:1120px) {
  .intro { grid-template-columns:1fr 1fr; }
  .dashboard { height:auto; grid-template-columns:1.16fr .84fr 1fr; grid-template-rows:repeat(5,11rem); animation:editorial-grid-3 44s ease-in-out infinite; }
  @keyframes editorial-grid-3 { 40% { grid-template-columns:.82fr 1.2fr .98fr; } 75% { grid-template-columns:1fr .82fr 1.18fr; } }
}

@media (max-width:760px) {
  .intro { grid-template-columns:1fr; gap:.75rem; padding:1.45rem 0; }
  .dashboard { grid-template-columns:1.18fr .82fr; grid-template-rows:none; grid-auto-rows:12rem; animation:editorial-grid-2 34s ease-in-out infinite; }
  .block.is-spotlight { grid-column:span 2; grid-row:span 2; }
  .block.is-wide { grid-column:span 2; }
  @keyframes editorial-grid-2 { 50% { grid-template-columns:.82fr 1.18fr; } }
}

@media (max-width:520px) {
  .masthead { grid-template-columns:1fr 1fr; }.title-group { display:none; }
  .connection { font-size:.49rem; }
  .intro h2 { font-size:2.6rem; }.intro h2 em { white-space:normal; }
  .live-meta { display:grid; }
  .dashboard { grid-template-columns:1fr; grid-auto-rows:14rem; animation:none; }
  .block.is-spotlight { grid-column:1; grid-row:span 2; }
  .block.is-wide { grid-column:1; }
  .is-spotlight h3 { font-size:2.35rem; }.is-spotlight .summary { max-width:90%; }
  footer { display:block; line-height:1.8; } footer p { margin:.35rem 0; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .dashboard,.block,.placeholder,.atmosphere i { animation:none; }
  .block,.block-content,.card-art,.source-image img { transition:none; transform:none; }
}