.technology-intro { color:var(--muted); font-size:1.125rem; max-width:40rem; margin:-.75rem 0 2.75rem; }
.technology-grid { display:grid; grid-template-columns:minmax(0,1fr); }
.technology-project { min-width:0; padding-block:clamp(2.5rem,5vw,4.5rem); border-top:1px solid var(--line); }
.technology-project:first-child { padding-top:0; border-top:0; }
.technology-project:last-child { padding-bottom:0; }
@media(min-width:1101px) {
  .technology-project { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:clamp(2.5rem,4vw,4.5rem); align-items:start; }
  .technology-project > .technology-body { padding-top:0; }
}
.technology-cover { padding:clamp(1.5rem,3vw,2.5rem); border-radius:20px; min-height:360px; display:flex; flex-direction:column; justify-content:space-between; gap:2.5rem; background:#e8edff; color:#17285b; }
.monster .technology-cover { background:#182c47; color:#f3f7ff; }
.jar .technology-cover { background:#ebe5f7; color:#3c255d; }
.times .technology-cover { background:#f7eeee; color:#69262b; }
.technology-cover-top { display:flex; justify-content:space-between; gap:1rem; font-size:.875rem; }
.technology-cover-title { margin:0; max-width:19rem; font-size:clamp(1.8rem,3vw,2.6rem); line-height:1.14; letter-spacing:-.045em; text-wrap:balance; }
.technology-flow { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); list-style:none; padding:0; margin:0; gap:.8rem; }
.technology-flow li { border-top:1px solid currentColor; padding-top:.7rem; font-size:.875rem; line-height:1.4; }
.technology-flow span { display:block; font-size:.75rem; margin-bottom:.6rem; }
.technology-body { padding:1.4rem .1rem 0; }
.technology-status { font-size:.875rem; color:var(--muted); margin:0 0 .4rem; }
.technology-body h3 { font-size:1.5rem; font-weight:500; letter-spacing:-.035em; margin:0; }
.technology-summary { font-size:1rem; color:var(--muted); margin:.8rem 0 1.4rem; max-width:34rem; }
.technology-project details { border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.technology-project summary { cursor:pointer; list-style:none; padding:1rem 0; display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:48px; }
.technology-project summary::-webkit-details-marker { display:none; }
.technology-project summary:focus-visible { outline:2px solid var(--ink); outline-offset:5px; }
.details-symbol::before { content:'+'; font-size:1.5rem; line-height:1; }
.technology-project details[open] .details-symbol::before { content:'−'; }
.technology-detail { padding:.25rem 0 1.5rem; }
.technology-detail h4 { font-size:1rem; font-weight:600; margin:1.2rem 0 .4rem; }
.technology-detail p { font-size:1rem; color:var(--muted); margin:0; }
.technology-detail .technology-note { margin-top:1.5rem; font-size:.875rem; }
.technology-source { display:inline-block; margin-top:1rem; text-decoration:underline; text-underline-offset:.25em; }
@media(max-width:800px) { .technology-cover { min-height:330px; } header nav { flex-wrap:wrap; } }
@media(max-width:600px) { .technology-cover { min-height:320px; border-radius:16px; } .technology-cover-title { font-size:2.25rem; } .technology-intro { margin-top:0; } }

.dooh-live-cover { border:1px solid var(--line); border-radius:20px; overflow:hidden; background:#fff; }
.dooh-live-cover iframe { display:block; border:0; width:100%; height:710px; }
@media(max-width:600px) { .dooh-live-cover { border-radius:16px; } }
.times-live-cover { background:#f7f2ee; }
/* Sunday Times: the title sits above the walkthrough, so the left column and the player column line up. */
.times-main { min-width:0; }
.times-heading { padding:0 .1rem 1.5rem; }
.times-heading .technology-summary { margin-bottom:0; }
@media(min-width:1101px) {
  .dooh-live-cover iframe { height:760px; }
  /* Sunday Times: shortened so the walkthrough ends level with the player column. */
  .times-live-cover iframe { height:728px; }
}
/* Google DOOH: the introduction sits above the demo, which spans the full width. */
.dooh > .technology-body { padding:0 .1rem 1.5rem; }
@media(min-width:1101px) {
  .technology-project.dooh { grid-template-columns:minmax(0,1fr); gap:0; }
  .technology-project.dooh > .technology-body { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:clamp(2.5rem,4vw,4.5rem); align-items:start; padding:0 .1rem 2rem; }
  .dooh-intro .technology-summary { margin-bottom:0; }
  .dooh .dooh-live-cover iframe { height:clamp(600px,calc(100vh - 6rem),760px); }
}
/* Tablet widths keep the stacked controls, which suit the many wide placements, but let the stage grow with the viewport. */
@media(min-width:601px) and (max-width:1100px) {
  .dooh .dooh-live-cover iframe { height:clamp(640px,calc(100vh - 6rem),800px); }
}

.times-carousel { margin:0 0 1.4rem; }
.times-carousel-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.9rem; }
.times-reels-label { margin:0; font-family:'Courier New',Courier,monospace; font-size:.75rem; letter-spacing:.025em; text-transform:uppercase; color:var(--muted); }
.times-carousel-controls { display:flex; align-items:center; gap:.5rem; }
.times-count { font-family:'Courier New',Courier,monospace; font-size:.75rem; letter-spacing:.025em; font-variant-numeric:tabular-nums; min-width:4.3rem; text-align:right; }
.times-carousel .gallery-arrow { width:42px; height:42px; font-size:1.2rem; }
.times-stage { display:flex; flex-direction:column; align-items:center; padding:clamp(1.25rem,3vw,2rem) 1rem 1.5rem; border:1px solid var(--line); background:#fff; color:var(--ink); }
.times-stage > * { width:min(100%,15rem); }
/* iPhone body around a 19.5:9 screen. The web reels are encoded at 19.5:9, with their own canvas extended top and bottom, so they fill it exactly. */
.times-phone { position:relative; container-type:inline-size; border-radius:14.7% / 7%; background:#1d1d1f; box-shadow:inset 0 0 0 1px #48484c, 0 22px 40px -26px rgba(0,0,0,.55); }
.times-phone::before, .times-phone::after { content:''; position:absolute; width:1.3%; background:#2a2a2d; }
.times-phone::before { right:-1.3%; top:25%; height:12%; border-radius:0 2px 2px 0; }
.times-phone::after { left:-1.3%; top:15%; height:24%; border-radius:2px 0 0 2px; background:linear-gradient(#2a2a2d 0 16%, transparent 16% 30%, #2a2a2d 30% 63%, transparent 63% 69%, #2a2a2d 69%); }
.times-screen { position:relative; margin:2.6cqw; aspect-ratio:9 / 19.5; border-radius:12.8% / 5.9%; overflow:hidden; background:var(--reel-bg,#ac012d); }
.times-screen video { display:block; width:100%; height:100%; object-fit:cover; background:var(--reel-bg,#ac012d); }
.times-island { position:absolute; z-index:1; top:1.3%; left:50%; width:31%; aspect-ratio:3.4; transform:translateX(-50%); border-radius:999px; background:#000; pointer-events:none; }
.times-segments { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:3px; margin:.75rem 0 .5rem; }
.times-segments:empty { display:none; }
.times-segment { position:relative; height:24px; border:0; padding:0; background:none; cursor:pointer; }
.times-segment::before, .times-segment span { content:''; position:absolute; left:0; right:0; top:50%; height:4px; margin-top:-2px; }
.times-segment::before { background:rgba(24,24,24,.14); transition:background-color .2s; }
.times-segment span { background:#af0030; transform:scaleX(var(--fill,0)); transform-origin:left; }
.times-segment:hover::before, .times-segment.is-current::before { background:rgba(24,24,24,.32); }
.times-segment:focus-visible, .times-transport button:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.times-transport { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.times-transport button { border:1px solid var(--ink); border-radius:0; background:none; color:inherit; font:inherit; font-size:.8rem; min-height:40px; padding:.3rem .9rem; cursor:pointer; transition:background-color .2s, color .2s; }
.times-transport button:hover { background:var(--ink); color:#fff; }
.times-time { font-family:'Courier New',Courier,monospace; font-size:.75rem; font-variant-numeric:tabular-nums; }
.times-now { margin:.9rem 0 0; padding-top:.7rem; border-top:1px solid var(--ink); }
.times-title { display:block; font-size:1.05rem; font-weight:500; line-height:1.25; letter-spacing:-.02em; }
.times-scene { display:block; margin-top:.3rem; font-family:'Courier New',Courier,monospace; font-size:.7rem; letter-spacing:.025em; text-transform:uppercase; color:var(--muted); }
@media(prefers-reduced-motion:reduce) { .times-segment::before, .times-transport button { transition:none; } }

/* CookieMonster keeps the workspace and its request walkthrough together at full width. */
.monster > .technology-body { padding:0 .1rem 1.5rem; }
.monster-live-cover iframe { height:810px; }
@media(min-width:1101px) {
  .technology-project.monster { grid-template-columns:minmax(0,1fr); gap:0; }
  .technology-project.monster > .technology-body { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:clamp(2.5rem,4vw,4.5rem); align-items:start; padding:0 .1rem 2rem; }
  .monster-intro .technology-summary { margin-bottom:0; }
  .monster-live-cover iframe { height:810px; }
}
@media(max-width:600px) { .monster-live-cover iframe { height:850px; } }