/* News posts (/news/<slug>/), written by tools/news/build.py. The header, rules and footer are the
   homepage's (home-sections.css, site-chrome.css); section type and buttons are site-sections.css. */

:root{
    --page:#fcfaf7; --frame:#fcfaf7; --card:#fffefb;
    --line:#e6e0d8; --ink:#2a2724; --body:rgba(42,39,36,.8); --body2:#45413d;
    --muted:#8f8880; --faint:#c4bfb4;
    --orange:#eb663a; --orange-deep:#d9572e;
    --serif:'LT Superior Serif', Georgia, 'Times New Roman', serif;
    --mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --sans:'Geist', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --rail:20px;
    --measure:680px;
}
@media (min-width:768px){ :root{ --rail:48px; } }
@media (min-width:1024px){ :root{ --rail:calc(100% * 120 / 1440); } }
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{ background:var(--page); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.5; }
a{ color:inherit; }
a:hover{ color:var(--orange); }
::selection{ background:var(--ink); color:#F9F8F4; }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }
.frame{ max-width:1440px; margin:0 auto; background:var(--frame); }
.wrap{ margin:0 var(--rail); }
@media (min-width:1024px){ .wrap{ margin-inline:var(--col-edge); border-left:var(--col-line) solid var(--line); border-right:var(--col-line) solid var(--line); padding-left:clamp(28px,2.8vw,40px); padding-right:clamp(28px,2.8vw,40px); } }

/* The post's head: label, headline, dek, date. Centred, as a title page. */
.post-head{ padding-top:clamp(48px,7vw,104px); padding-bottom:clamp(28px,3vw,40px); text-align:center; }
.crumbs{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px; font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.03em; text-transform:uppercase; color:#927B5F; }
.crumbs a{ text-decoration:none; }
.crumbs a:hover{ color:var(--orange); }
.crumbs .sep{ color:var(--faint); }
.post-head h1{ max-width:22ch; margin:18px auto 0; font-family:var(--serif); font-weight:500; font-size:clamp(42px,6.2vw,84px); line-height:1.02; letter-spacing:-.045em; text-wrap:balance; }
.post-head h1 .nb{ white-space:nowrap; }
.post-head .dek{ max-width:40ch; margin:20px auto 0; font-size:clamp(17px,1.5vw,20px); line-height:1.5; color:var(--body); text-wrap:balance; }
.post-head .when{ margin-top:22px; font-family:var(--mono); font-size:12.5px; color:var(--muted); }
.post-head .when b{ font-weight:500; color:var(--ink); }

/* ---------- Upcoming: the countdown ---------- */
.count{ max-width:760px; margin:clamp(8px,1.5vw,16px) auto 0; padding:clamp(22px,3vw,34px) clamp(16px,3vw,36px) clamp(20px,2.6vw,30px); border:1px solid var(--line); border-radius:12px; background:var(--card); text-align:center; box-shadow:0 30px 70px -48px rgba(42,39,36,.45); }
.count .label{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.clock{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:16px; }
.clock div{ padding:4px 6px; }
.clock div + div{ border-left:1px solid var(--line); }
.clock b{ display:block; font-family:var(--serif); font-weight:500; font-size:clamp(44px,7vw,92px); line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.clock span{ display:block; margin-top:8px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.local{ margin-top:18px; font-size:14px; color:var(--body); }
.local:empty{ display:none; }
.count .cta-row{ justify-content:center; margin-top:20px; }
.count.live .clock, .count.live .local{ display:none; }
.count .now{ display:none; margin-top:12px; font-family:var(--serif); font-size:clamp(26px,3vw,36px); line-height:1.15; letter-spacing:-.03em; }
.count.live .now{ display:block; }
.expect{ max-width:var(--measure); margin:clamp(36px,4.5vw,64px) auto 0; text-align:left; }
.expect h2{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.expect ol{ list-style:none; margin-top:12px; border-top:1px solid var(--ink); counter-reset:x; }
.expect li{ counter-increment:x; display:grid; grid-template-columns:40px minmax(0,1fr); gap:12px; padding:16px 0; border-bottom:1px solid var(--line); font-size:16.5px; line-height:1.5; color:var(--body); }
.expect li::before{ content:counter(x, decimal-leading-zero); font-family:var(--mono); font-size:12px; color:var(--muted); padding-top:3px; }
.press{ max-width:var(--measure); margin:22px auto 0; font-size:14px; color:var(--muted); }
.press a{ color:var(--ink); }
.land{ height:clamp(150px,22vw,300px); margin-top:clamp(24px,4vw,56px); background:url(/assets/44a28948065ea5ceced787ffbe997959918934d7-gnYCD0ce.webp) 50% 100%/cover no-repeat; -webkit-mask-image:linear-gradient(transparent,#000 45%); mask-image:linear-gradient(transparent,#000 45%); }
@media (max-width:560px){
    .clock b{ font-size:clamp(36px,11vw,52px); }
    .clock span{ font-size:10px; letter-spacing:.06em; }
    .clock div{ padding:2px 2px; }
}

/* ---------- Published: the article ---------- */
.byline{ display:flex; justify-content:center; flex-wrap:wrap; gap:6px 18px; margin-top:22px; font-size:14px; color:var(--body); }
.byline a{ color:var(--ink); }
.byline .role{ color:var(--muted); }
.hero-media{ max-width:1040px; margin:clamp(8px,2vw,20px) auto 0; }
/* A picture narrower than the column shows at its own size, not stretched. */
.hero-media img{ display:block; width:auto; max-width:100%; height:auto; margin:0 auto; border-radius:8px; }
.hero-media .yt{ position:relative; aspect-ratio:16/9; border-radius:8px; overflow:hidden; background:#111; }
.hero-media .yt iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.body{ max-width:var(--measure); margin:clamp(32px,4vw,56px) auto 0; padding-bottom:clamp(48px,6vw,88px); font-size:18px; line-height:1.65; color:var(--body2); }
.body > * + *{ margin-top:1.1em; }
.body h2{ margin-top:1.9em; font-family:var(--serif); font-weight:500; font-size:clamp(26px,2.4vw,32px); line-height:1.15; letter-spacing:-.03em; color:var(--ink); }
.body h3{ margin-top:1.6em; font-family:var(--serif); font-weight:500; font-size:22px; line-height:1.25; letter-spacing:-.02em; color:var(--ink); }
.body a{ color:var(--ink); text-decoration-color:var(--orange); text-underline-offset:3px; }
.body ul{ padding-left:1.2em; }
.body li + li{ margin-top:.4em; }
.body blockquote{ padding-left:20px; border-left:2px solid var(--orange); font-family:var(--serif); font-size:22px; line-height:1.4; color:var(--ink); }
.body blockquote cite{ display:block; margin-top:10px; font-family:var(--sans); font-style:normal; font-size:14px; color:var(--muted); }
.body figure img{ display:block; width:100%; height:auto; border-radius:6px; }
.body figcaption{ margin-top:8px; font-size:13px; color:var(--muted); }
.body .credit{ font-size:13px; color:var(--muted); }
.body .yt{ position:relative; aspect-ratio:16/9; border-radius:6px; overflow:hidden; background:#111; }
.body .yt iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.related{ max-width:var(--measure); margin:0 auto; padding-bottom:clamp(48px,6vw,88px); }
.related h2{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.related ul{ list-style:none; margin-top:12px; border-top:1px solid var(--ink); }
.related li{ border-bottom:1px solid var(--line); }
.related a{ display:flex; justify-content:space-between; gap:16px; padding:14px 0; font-family:var(--serif); font-size:20px; line-height:1.3; letter-spacing:-.02em; text-decoration:none; }
.related a::after{ content:"→"; font-family:var(--sans); color:var(--orange); }
.sources a::after{ content:"↗"; }

/* A video hero: the poster, with a play button over it, until it is pressed (then YouTube's player). */
.hero-media .yt img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:0; }
.hero-media .play{ position:absolute; inset:0; display:flex; align-items:flex-end; padding:clamp(12px,2vw,24px); border:0; background:linear-gradient(transparent 55%, rgba(17,17,17,.45)); cursor:pointer; }
.hero-media .play > span{ display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:14px; font-weight:500; letter-spacing:-.01em; color:#f5f2ec; background:var(--orange); padding:11px 18px; border-radius:2px; transition:background .15s ease; }
.hero-media .play > span::before{ content:""; border-style:solid; border-width:6px 0 6px 10px; border-color:transparent transparent transparent currentColor; }
.hero-media .play:hover > span{ background:var(--orange-deep); }
.hero-media .play .dur{ opacity:.75; }

/* Photographs in a post, two to a row. */
.body .gallery{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.body .gallery img{ aspect-ratio:3/2; object-fit:cover; }
@media (max-width:560px){ .body .gallery{ grid-template-columns:minmax(0,1fr); } .body .gallery img{ aspect-ratio:auto; } }

/* ---------- /news/: News, every post as a card ---------- */
.list-head{ padding-top:clamp(48px,7vw,104px); padding-bottom:clamp(24px,3vw,40px); }
.list-head h1{ font-family:var(--serif); font-weight:500; font-size:clamp(42px,6.2vw,84px); line-height:1.02; letter-spacing:-.045em; }
.cards{ list-style:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)); gap:20px; padding-bottom:clamp(24px,3vw,36px); }
.card a{ display:flex; flex-direction:column; gap:14px; height:100%; padding:20px 20px 28px; background:var(--card); border:1px solid #dedbd4; border-radius:2px; text-decoration:none; transition:border-color .15s ease; }
.card a:hover{ color:inherit; border-color:var(--ink); }
.card img{ display:block; width:100%; height:auto; aspect-ratio:1200/630; object-fit:cover; object-position:0 50%; border:1px solid #dedbd4; }
.card .meta{ display:flex; flex-wrap:wrap; gap:4px 14px; font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:-.01em; text-transform:uppercase; color:rgba(42,39,36,.5); }
.card .meta .cat{ color:#927B5F; }
.card h2{ font-family:var(--serif); font-weight:500; font-size:24px; line-height:1.1; letter-spacing:-.04em; color:var(--ink); text-wrap:balance; }
.card h2 .nb{ white-space:nowrap; }
.card .dek{ font-size:16px; line-height:1.4; color:var(--body); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.card .text{ flex:1; display:flex; flex-direction:column; gap:12px; }
/* A video post's length, at the foot of its card so the headlines in a row stay level. */
.card .watch{ margin-top:auto; padding-top:4px; font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:-.01em; text-transform:uppercase; color:var(--orange-deep); }
/* The newest post, across the list: picture and words side by side. */
.card.lead{ grid-column:1 / -1; }
@media (min-width:900px){
    .card.lead a{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:center; gap:clamp(24px,3vw,48px); padding:24px clamp(24px,3vw,44px) 24px 24px; }
    .card.lead h2{ font-size:clamp(32px,3.1vw,44px); line-height:1.05; }
    .card.lead .dek{ display:block; font-size:18px; line-height:1.5; }
}
/* On a phone, everything after the lead is a row: a small picture, then the date and headline. */
@media (max-width:600px){
    .cards{ gap:0; }
    .card.lead{ margin-bottom:12px; }
    .card:not(.lead) a{ display:grid; grid-template-columns:104px minmax(0,1fr); align-items:start; gap:14px; padding:16px 0; background:none; border:0; border-bottom:1px solid var(--line); border-radius:0; }
    .card:not(.lead) img{ aspect-ratio:4/3; object-position:50% 50%; }
    .card:not(.lead) .text{ gap:6px; }
    .card:not(.lead) .meta{ font-size:11.5px; gap:2px 10px; }
    .card:not(.lead) h2{ font-size:19px; line-height:1.15; letter-spacing:-.03em; }
    .card:not(.lead) .dek{ display:none; }
    .card:not(.lead) .watch{ padding-top:0; font-size:11.5px; }
}
.list-foot{ max-width:var(--measure); padding-bottom:clamp(48px,6vw,88px); font-size:14px; line-height:1.6; color:var(--muted); }
.list-foot a{ color:var(--ink); }

@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } .hero-media .play > span, .card a{ transition:none; } }