/* Anthony Fordham, portfolio. After Popular Science's 2016 design: white pages, black bars,
   condensed sans labels, slab headlines, numbered red tabs, and one strong colour per outlet. */
:root {
  --paper: #fbfbf9;
  --paper-2: #efefeb;
  --card: #ffffff;
  --ink: #141414;
  --ink-soft: #55575a;
  --rule: #cfd0cc;
  --red: #d7262e;
  --link: #1d5fb8;
  --sec: var(--red);
  --board: #eef0ee;
  --board-rule: #8a9a8e;
  --sans: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --cond: 'Barlow Semi Condensed', 'Arial Narrow', Arial, sans-serif;
  --slab: 'Bitter', Rockwell, Georgia, serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --measure: 38rem;
  --gutter: max(16px, 4vw);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121212; --paper-2: #1c1c1c; --card: #191919; --ink: #ececea; --ink-soft: #a7a9ac;
    --rule: #34353a; --red: #f0525a; --link: #7fb0f0;
    --board: #1b1d1c; --board-rule: #6f8274;
    color-scheme: dark;
  }
}
/* one colour per outlet, as PopSci gave one to each section */
.sec-popsci { --sec: #00843d; }  /* Australian green (green and gold) */
.sec-sciill { --sec: #e6a400; }
.sec-pcpp { --sec: #1d6fd6; }
.sec-pcta { --sec: #0f8f8f; }
.sec-gadgetguy { --sec: #d7262e; }
.sec-beconnected { --sec: #a51890; }  /* Be Connected's own purple */
.sec-other { --sec: #7a4fd0; }
.sec-fiction, .sec-books { --sec: var(--ink); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.6 var(--serif); font-optical-sizing: auto;
  hyphens: none; -webkit-hyphens: none; text-wrap: pretty; }  /* house style: no hyphen breaks, no orphans (the build glues each block's last two words too) */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink); }
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--slab); font-weight: 600; line-height: 1.1; text-wrap: balance; }
.wrap { max-width: 74rem; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.nw { white-space: nowrap; }
.small { font-size: .9rem; color: var(--ink-soft); }
.kicker { margin: 0 0 .5rem; font: 600 .82rem/1.4 var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.kicker b { color: var(--red); font-weight: 700; }
.kicker a { color: inherit; }

/* masthead: a white bar on a heavy black rule */
.masthead { position: sticky; top: 0; z-index: 10; background: var(--paper); border-bottom: 4px solid var(--ink); }
.masthead .wrap { display: flex; justify-content: space-between; align-items: center; gap: .6rem 1.5rem; flex-wrap: wrap; padding-block: .55rem; }
.mark { font: 700 1.35rem/1 var(--cond); color: var(--ink); text-decoration: none; letter-spacing: .01em; }
.masthead nav { display: flex; gap: 1.3rem; flex-wrap: wrap; font: 600 .82rem/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; }
.masthead nav a { color: var(--ink); text-decoration: none; padding-block: .3rem; }
.masthead nav a:hover { color: var(--red); }
.masthead nav { margin-left: auto; }
/* the AI use declaration: the last nav item, behind a small red dot like the section openers' (AF, 28 Oct 2026) */
.masthead nav .ai-link { display: inline-flex; align-items: center; gap: .4rem; }
.masthead nav .ai-link::before { content: ''; flex: none; width: .6rem; height: .6rem; border-radius: 50%; background: var(--red); }
.ai-use .prose { max-width: var(--measure); }
.red-board { background: #d7262e; color: #fff; font: 700 1.25rem/1.3 var(--cond); padding: 1rem 1.2rem; margin: 1.4rem 0; }
.btn.red { background: #d7262e; border-color: #d7262e; color: #fff; }
.btn.red:hover { background: var(--ink); border-color: var(--ink); }
.sizzle { margin: 1.6rem 0; }
.sizzle video { display: block; width: 100%; max-width: 22rem; aspect-ratio: 9 / 16; background: #000; }
.sizzle.pending div { display: grid; place-items: center; max-width: 22rem; aspect-ratio: 9 / 16; padding: 1.5rem; text-align: center;
  background: var(--paper-2); border: 1px dashed var(--board-rule); font: 600 1rem/1.3 var(--cond); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.sizzle figcaption { font: 500 .85rem/1.4 var(--cond); color: var(--ink-soft); margin-top: .5rem; }

.btn { display: inline-block; font: 600 .9rem/1 var(--cond); letter-spacing: .08em; text-transform: uppercase; padding: .8rem 1.1rem; margin: 0 .5rem .6rem 0;
  background: var(--ink); color: var(--paper); text-decoration: none; border: 2px solid var(--ink); }
.btn:hover { color: var(--paper); background: var(--red); border-color: var(--red); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { color: var(--paper); }

/* hero */
.hero { border-bottom: 1px solid var(--rule); }
.hero-text { padding-block: clamp(1.2rem, 4vh, 2.4rem); max-width: 50rem; }
.hero h1 { font: 700 clamp(2rem, 1.3rem + min(2.4vw, 3vh), 3rem)/1 var(--sans); letter-spacing: -.01em; margin: 0 0 .8rem; }
.hero h1 span { color: var(--red); }
.lede { font: 400 1.12rem/1.45 var(--sans); max-width: 40rem; margin: 0; color: var(--ink-soft); }
/* a wire-copy dateline opens the lede */
.dateline { font: 700 .92rem/1 var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.beat { font: 600 clamp(1.15rem, 1rem + .6vw, 1.4rem)/1.3 var(--sans); max-width: 40rem; margin: 0 0 .6rem; }
.hero-cta { margin: 1.1rem 0 .4rem; }
.hero-grid { display: grid; gap: 0 2.6rem; align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.hero-photo { margin: 0 0 clamp(1.2rem, 4vh, 2.4rem); }
@media (min-width: 900px) { .hero-photo { margin-block: clamp(1.2rem, 4vh, 2.4rem); } }
.hero-photo img { display: block; width: 100%; height: auto; }
.hero-photo figcaption { margin-top: .5rem; font: 400 .82rem/1.4 var(--sans); color: var(--ink-soft); }
/* the outlets set as a line of text, titles in italic */
.pub-strip { margin: .6rem 0 0; padding-top: .8rem; border-top: 1px solid var(--rule); max-width: 40rem; font: 400 .98rem/1.5 var(--serif); color: var(--ink-soft); }
.pub-strip b { margin-right: .35rem; font: 700 .82rem/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--red); }

/* bands and section openers: spaced capitals behind a dot, like PopSci's "H E A L T H" */
.band { padding-block: clamp(1.6rem, 4.5vh, 2.6rem); border-bottom: 1px solid var(--rule); }
.section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .4rem 2rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.section-head h2, .about h2 { display: flex; align-items: center; gap: .9rem; margin: 0; font: 400 clamp(1.15rem, .9rem + min(1vw, 1.4vh), 1.5rem)/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; }
.section-head h2::before, .about h2::before { content: ''; flex: none; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--red); }
.section-head p { margin: 0; max-width: 34rem; color: var(--ink-soft); font: 400 1rem/1.4 var(--sans); }
.section-head p.note { margin-top: .5rem; font-size: .9rem; }
/* side by side, the first line's capitals line up with the top of the heading's dot */
@media (min-width: 900px) { .section-head > p, .section-head > div > p:first-child { margin-top: -.45em; } }
.section-head p.note b { color: var(--ink); letter-spacing: .04em; }
h2.big { font: 800 clamp(1.9rem, 1.3rem + min(2.2vw, 2.8vh), 2.8rem)/1 var(--sans); letter-spacing: -.02em; margin: 0 0 1.1rem; padding-bottom: .7rem; border-bottom: 5px solid var(--red); }
/* the Selected works heading: a pale grey board with a thin dotted line along its foot */
h2.big.board { padding: .8rem 1rem .75rem; background: var(--board); border-bottom: 1px dotted var(--board-rule); }
.more { margin: 1.6rem 0 0; font: 600 .9rem/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; }
.more a { color: var(--ink); text-decoration: none; }
.more a:hover { color: var(--red); }
.meta { margin: 0 0 .4rem; font: 600 .82rem/1.4 var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
h3.sub { font: 600 .9rem/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; margin: 2.4rem 0 1rem; padding: .55rem .8rem; background: var(--ink); color: var(--paper); }

/* contents: three stacked feature pictures with ringed issue numbers, departments beside them */
.contents { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 4vw, 3.5rem); align-items: start; }
.features { display: grid; gap: 1.8rem; }
.feature { display: block; color: var(--ink); text-decoration: none; }
.feature .pic { position: relative; display: block; }
.feature img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--paper-2); }
/* the badge: the magazine's masthead floating over its ringed issue number */
.feature .badge { position: absolute; left: .9rem; bottom: .9rem; display: grid; justify-items: center; gap: .3rem; }
.feature .badge.at-top-left { top: .9rem; bottom: auto; }
.feature .badge.at-top-right { top: .9rem; bottom: auto; left: auto; right: .9rem; }
.feature .badge.at-bottom-right { left: auto; right: .9rem; }
/* badge: ... row lays the ring beside the masthead, with a smaller ring, where a stack would cover the picture */
.feature .badge.at-row { grid-auto-flow: column; align-items: end; gap: .4rem; }
.feature .badge.at-row.at-top-left, .feature .badge.at-row.at-top-right { align-items: start; }
.feature .badge.at-row .ring { order: -1; width: 4rem; height: 4rem; border-width: 5px; font-size: 1.45rem; }
.feature .badge .mh { font-size: 1rem; padding: .3rem .45rem; background: var(--paper); box-shadow: 0 1px 4px rgb(0 0 0 / .25); }
.feature .ring { width: 5rem; height: 5rem; border-radius: 50%; border: 6px solid var(--sec); background: var(--paper);
  display: grid; place-content: center; text-align: center; font: 300 1.8rem/1 var(--sans); }
.feature .ring small { font: 700 .58rem/1.3 var(--cond); letter-spacing: .14em; text-transform: uppercase; }
.feature .cap { display: block; padding-top: .6rem; font: 600 .82rem/1.4 var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.feature .cap b { display: block; font: 700 1.3rem/1.15 var(--slab); letter-spacing: 0; text-transform: none; color: var(--ink); margin-bottom: .2rem; }
.feature .pic-note { display: block; padding-top: .35rem; font: italic .9rem/1.45 var(--sans); color: var(--ink-soft); }
.feature:hover .cap b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.depts { display: grid; gap: 1.5rem; }
.dept h3 { margin: 0 0 .5rem; padding-bottom: .35rem; border-bottom: 3px solid var(--sec); font: 700 .9rem/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--sec); }
.dept ol { list-style: none; margin: 0; padding: 0; }
.dept a { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: .8rem; padding: .45rem 0; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.dept li:last-child a { border-bottom: 0; }
.dept .no { font: 700 1.05rem/1.25 var(--cond); color: var(--sec); font-variant-numeric: tabular-nums; }
.dept b { display: block; font: 600 1.08rem/1.25 var(--slab); }
.dept small { font: 500 .88rem/1.3 var(--sans); color: var(--ink-soft); }
.dept a:hover b { color: var(--red); }

/* entries: PopSci's Best-of-What's-New modules between column rules */
.entries { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); border-top: 1px solid var(--rule); }
.entry { display: grid; gap: .4rem; align-content: start; padding: 1rem 1.2rem 1.4rem 0; margin-right: 1.2rem; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--rule); }
.entry small { font: 700 .74rem/1.35 var(--cond); letter-spacing: .08em; text-transform: uppercase; }
#fiction .entry small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* one line, so the headlines line up */
.entry b { font: 600 1.15rem/1.15 var(--slab); }
.entry span:last-child { font: 400 .98rem/1.45 var(--sans); color: var(--ink-soft); }
.entry:hover b { color: var(--red); }

/* cards: still used by archive pages */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); gap: 1.6rem; }
.card { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); background: var(--card); border-top: 4px solid var(--ink); min-width: 0; }
.card:hover b { color: var(--red); }
.card .thumb { aspect-ratio: 3 / 2; max-width: 100%; overflow: hidden; background: var(--paper-2); display: grid; place-items: center; }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.card .no-img { font: 700 4rem/1 var(--slab); color: var(--red); }
.card .body { padding: .85rem 0 1.05rem; display: grid; gap: .35rem; align-content: start; }
.card small { font: 700 .74rem/1.35 var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.card b { font: 600 1.22rem/1.2 var(--slab); }
.card .body > span { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font: 400 .95rem/1.45 var(--sans); color: var(--ink-soft); }
.card .flag { justify-self: start; margin-top: .25rem; font: 600 .78rem/1.3 var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--red); }

/* live list (also the archive lists) */
.live { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--ink); }
.live li { display: grid; grid-template-columns: 7.5rem 11rem minmax(0, 1fr) auto; gap: .2rem 1.2rem; padding: .7rem 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.live .when, .live .where, .live .kind { font: 600 .82rem/1.4 var(--cond); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.live .kind { text-align: right; }
.live a { font: 600 1.02rem/1.35 var(--slab); }

/* books */
.books { display: grid; gap: 2rem; }
.book { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.book h3 { font-size: 1.35rem; margin: 0 0 .5rem; }
.book h3 a { color: var(--ink); text-decoration: none; }
.book p { margin: 0 0 .5rem; max-width: 40rem; }
.samples { margin: .2rem 0 0; padding-left: 1.1rem; font-size: 1rem; }
.samples li { margin-bottom: .3rem; }

/* about */
.about { display: grid; }
.about h2 { margin-bottom: 1.4rem; }
.about p { max-width: var(--measure); }
.about.has-photo { gap: 1.6rem 2.6rem; align-items: start; }
@media (min-width: 860px) { .about.has-photo { grid-template-columns: minmax(0, var(--measure)) minmax(0, 1fr); } }
.about-photos { display: grid; gap: 1.8rem; }
.about-photo { margin: 0; }
.about-photo img { display: block; width: 100%; height: auto; }
.about-photo figcaption { margin-top: .5rem; font: 400 .85rem/1.4 var(--sans); color: var(--ink-soft); }

/* piece page: a black spine with the section on its side, then the opener */
.piece { padding-block: clamp(1.25rem, 3.5vh, 2.5rem); }
.frame { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 2.6rem); }
.spine { background: var(--ink); color: var(--paper); border-top: 2.6rem solid var(--sec); }
.spine span { display: block; position: sticky; top: 4.5rem; padding: 1rem 0; writing-mode: vertical-rl; transform: rotate(180deg); margin: 0 auto;
  font: 500 .85rem/2.6rem var(--sans); letter-spacing: .3em; text-transform: uppercase; white-space: nowrap; }
.piece-head { max-width: 52rem; margin-bottom: 1.6rem; }
.label { margin: 0 0 .6rem; font: 400 .85rem/1.4 var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.label b { font-weight: 700; color: var(--sec); margin-right: .35rem; }
.label a { color: inherit; text-decoration: none; }
.label a:hover, .label a:focus-visible { text-decoration: underline; }
.label .sep { margin: 0 .4rem; }
.piece-head h1 { font: 700 clamp(1.75rem, 1.15rem + min(1.8vw, 2.4vh), 2.5rem)/1.08 var(--slab); margin: 0 0 .7rem; }
.standfirst { font: 400 1.12rem/1.4 var(--sans); color: var(--ink-soft); margin: 0; max-width: 46rem; }
.side { align-self: stretch; display: flex; flex-direction: column; gap: 1.4rem; min-width: 0; }
.folio { display: grid; justify-items: start; font: 600 .8rem/1.45 var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.folio b { font: 300 3.4rem/.9 var(--sans); letter-spacing: -.02em; color: var(--ink); margin-top: .2rem; }
.lead { margin: 0; }
.lead img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: cover; background: var(--paper-2); }
.lead.pixel img { image-rendering: pixelated; object-fit: contain; }
.lead figcaption { margin-top: .5rem; }
figcaption { font: 400 .82rem/1.4 var(--sans); color: var(--ink-soft); margin-top: .8rem; }
figcaption a { color: var(--ink-soft); }
.piece-grid { display: grid; grid-template-columns: minmax(0, var(--measure)) minmax(0, 15rem); gap: 2rem clamp(2rem, 4vw, 4rem); align-items: start; }
.prose { min-width: 0; }
.prose p { margin: 0 0 1.15em; }
.prose > p:first-of-type:not(.note)::first-letter, .prose .note + p::first-letter {
  float: left; font: 800 4rem/.8 var(--sans); color: var(--sec); padding: .3rem .45rem 0 0; }
.prose h2 { font-size: 1.45rem; margin: 2.2rem 0 .8rem; }
.prose h4 { font-size: 1.2rem; margin: 1.6rem 0 .4rem; }
.prose ul { padding-left: 1.2rem; }
.prose blockquote { margin: 1.6rem 0; padding: .2rem 0 .2rem 1.2rem; border-left: 6px solid var(--sec); font: 600 1.25rem/1.35 var(--sans); }
.prose .note { font: 600 .8rem/1.4 var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 1px solid var(--rule); padding-bottom: .7rem; margin-bottom: 1.4rem; }
.prose.excerpt > :last-child { margin-bottom: 0; }
.prose hr.break { border: 0; width: 4rem; height: 1px; background: var(--rule); margin: 2rem 0; }
.prose .bio { font-style: italic; font-size: .98rem; color: var(--ink-soft); border-top: 1px solid var(--rule); padding-top: 1rem; margin-top: 2rem; }
.boxout { margin: 2.4rem 0; padding: 1.2rem 1.4rem; background: var(--paper-2); border-top: 4px solid var(--sec); font-size: 1.02rem; }
.boxout h3 { font-size: 1.35rem; margin: 0 0 .8rem; }
.boxout p:last-child { margin-bottom: 0; }
/* ::: team, a magazine sidebar in the box-out's dress (pale panel, outlet-colour rule on top, slab title) but
   set in sans, like the cover notes, against the serif body (AF, 27 Oct 2026). It hangs out over the side
   column and bites into the text, which wraps around it. Square corners. */
.piece-grid { --side-gap: clamp(2rem, 4vw, 4rem); }
.team { float: right; clear: right; width: 31rem; margin: .4rem calc(-15rem - var(--side-gap)) 1.4rem 1.8rem; padding: 1.2rem 1.4rem;
  background: var(--paper-2); border-top: 4px solid var(--sec); font: 400 .95rem/1.45 var(--sans); }
.team header { margin-bottom: .8rem; }
.team h3 { font-size: 1.35rem; margin: 0; }
.team-sub { margin: .25rem 0 0 !important; font: 500 .82rem/1.35 var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.team > p { margin: 0 0 .4rem; }
.team ol { list-style: none; margin: 0; padding: 0; }
.team li { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.team li img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }   /* cut to 4:5 in img/ */
.team h4 { margin: 0 0 .15rem; font: 700 1.08rem/1.2 var(--sans); }
.team .role { margin: 0 0 .4rem; font: 600 .78rem/1.35 var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--sec); }
.team li p:not(.role) { margin: 0; }
/* ::: sidebar, a box-out in the team's type: sans text and names against the serif body, slab title */
.boxout.sidebar { font: 400 .95rem/1.45 var(--sans); }
.boxout.sidebar p { margin: 0 0 .9em; }
/* ::: bar, a slim note strip at the head of a piece: label in condensed caps, text in the sidebar's sans */
.bar { margin: 0 0 2rem; padding: .9rem 1.2rem .95rem; background: var(--paper-2); border-top: 4px solid var(--sec); font: 400 .95rem/1.45 var(--sans); }
.bar h3 { margin: 0 0 .3rem; font: 700 .8rem/1.2 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--sec); }
.bar p { margin: 0; }
.bar + h2 { margin-top: 0; }
.boxout.sidebar h4 { margin: 1.3rem 0 .15rem; padding-top: 1rem; border-top: 1px solid var(--rule); font: 700 1.08rem/1.2 var(--sans); }
.team-foot { margin: 1.2rem 0 0; }
.team-foot img { display: block; width: 100%; height: 17rem; object-fit: cover; object-position: center 60%; }
/* ::: inset, a picture set magazine-style: "left" sits in the text with the copy wrapping it,
   "margin" floats out in the side column, under whatever already hangs there */
.inset { margin: 0; }
.inset img { display: block; width: 100%; height: auto; }
.inset.left { float: left; clear: left; width: 17rem; margin: .35rem 1.8rem 1.2rem 0; }
.inset.left img { box-shadow: 0 1px 2px rgb(0 0 0 / .18), 0 6px 18px rgb(0 0 0 / .12); }   /* as the covers page */
.inset.margin { float: right; clear: right; width: 15rem; margin: .4rem calc(-15rem - var(--side-gap)) 1.4rem 1.8rem; }
.prose h2, .prose .boxout { clear: both; }
/* a margin picture set just before a box-out lines up with the box's top edge */
@media (min-width: 861px) {
  .prose .inset.margin:has(+ .boxout) { margin-top: calc(2.4rem - 1.15em); }   /* less the paragraph margin the box collapses */
  .prose .inset.margin + .boxout { clear: left; }
}
.piece-grid:has(.team) .facts { position: static; }   /* a sticky facts panel would slide over the sidebar */
.team, .inset.margin { position: relative; z-index: 1; }   /* above the side column they hang over, or it swallows their clicks */
@media (max-width: 1100px) {
  .team { width: 27rem; margin-right: calc(-12rem - var(--side-gap)); }
  .inset.margin { width: 12rem; margin-right: calc(-12rem - var(--side-gap)); }
}
@media (max-width: 860px) {   /* one column: the sidebar runs full width; the margin picture sits in the text */
  .team { float: none; width: auto; margin: 2.4rem 0; }
  .inset.margin { width: 14rem; margin: .35rem 0 1rem 1.6rem; }
}
@media (max-width: 520px) {
  .team li { grid-template-columns: 6rem minmax(0, 1fr); gap: .8rem; }
  .inset.margin { width: 9rem; }
  .inset.left { width: 46%; }
  .inset.left { margin-right: 1.1rem; }
  .inset.margin { margin-left: 1.1rem; }
}
.alt { margin-bottom: 1.1rem; }
.alt:last-child { margin-bottom: 0; }
.alt p { margin: 0 0 .3rem; }
.alt .pm { display: flex; gap: .6rem; align-items: baseline; }
.alt .pm b { flex: none; align-self: flex-start; margin-top: .2em; width: 1.35em; height: 1.35em; display: grid; place-items: center;
  font: 700 1rem/1 var(--sans); color: #fff; border-radius: 3px; }
.alt .plus { background: #2e8b3e; }
.alt .minus { background: var(--red); }
.specs { margin: 0 0 2rem; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--rule); font: 400 .98rem/1.45 var(--sans); }
.specs div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--rule); }
.specs div:last-child { border-bottom: 0; }
.specs dt { font: 700 .78rem/1.7 var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--sec); }
.specs dd { margin: 0; }
.verdict { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.2rem; align-items: center; margin: 2.2rem 0; padding: 1rem 1.2rem; background: var(--ink); color: var(--paper); }
.verdict .score { font: 300 3.6rem/1 var(--sans); color: var(--paper); }
.verdict .score small { font: 600 1rem/1 var(--cond); color: var(--paper); }
.verdict p { margin: 0; font: 500 1.05rem/1.45 var(--sans); }
.gauge { display: inline-flex; align-items: center; gap: .3rem; margin: .2rem 0 .3rem; font: 600 .78rem/1 var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.gauge b { font-weight: 600; }
.gauge i { width: 1.4rem; height: .8rem; border: 1.5px solid var(--ink); display: inline-block; }
.gauge i.on { background: var(--red); }
.scroll { overflow-x: auto; margin: 1.4rem 0; }
.script { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: .97rem; border-top: 3px solid var(--ink); }
.script th { font: 700 .78rem/1.3 var(--cond); letter-spacing: .08em; text-transform: uppercase; text-align: left; color: var(--ink-soft); padding: .55rem .8rem; border-bottom: 1px solid var(--ink); }
.script td { padding: .7rem .8rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.script td.dir { width: 40%; font: 400 .8rem/1.5 var(--mono); color: var(--ink-soft); }
.out { margin-top: 2rem; padding-top: 1.4rem; border-top: 3px solid var(--ink); }
.out .small { margin-top: .4rem; }
.facts { position: sticky; top: 5rem; border-top: 3px solid var(--ink); font: 400 .95rem/1.4 var(--sans); }
/* the lead picture and the facts under it ride down the side column together; not where a sidebar or margin
   picture hangs over the column. On a short window (a laptop) the picture shrinks so the pair still fits (AF, 28 Oct 2026) */
.side-stick { display: flex; flex-direction: column; gap: 1.4rem; }
.side-stick .facts { position: static; }
@media (min-width: 861px) {
  .piece-grid:not(:has(.team, .inset.margin)) .side-stick { position: sticky; top: 5rem; max-height: calc(100vh - 6rem); }
  .piece-grid:not(:has(.team, .inset.margin)) .side-stick .lead { display: flex; flex-direction: column; min-height: 0; }
  .piece-grid:not(:has(.team, .inset.margin)) .side-stick .lead img { flex: 0 1 auto; min-height: 6rem;
    object-fit: contain; object-position: left top; background: none; }
}
.facts dl { margin: 0; }
.facts div { padding: .55rem 0; border-bottom: 1px solid var(--rule); }
.facts dt { font: 700 .74rem/1.4 var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.facts dd { margin: .1rem 0 0; }
.back { margin-top: 3rem; padding-top: 1rem; border-top: 3px solid var(--ink); font: 600 .85rem/1.4 var(--cond); letter-spacing: .08em; text-transform: uppercase; }

/* archive + credits */
.archive { padding-block: clamp(1.25rem, 3.5vh, 2.5rem); }
.archive .piece-head h1 { font: 800 clamp(1.9rem, 1.3rem + min(2.2vw, 2.8vh), 2.8rem)/1 var(--sans); letter-spacing: -.02em; }
.archive .label a { color: inherit; text-decoration: none; }
.archive .label a:hover { text-decoration: underline; }
/* series openers: a black bar with the name in spaced capitals, like PopSci's section bars */
.arch { margin-top: 2.4rem; scroll-margin-top: 4.5rem; }
.arch h2 { display: flex; align-items: center; gap: .8rem; margin: 0 0 .6rem; padding: .55rem .9rem; background: var(--ink); color: var(--paper);
  font: 500 1rem/1.2 var(--sans); letter-spacing: .26em; text-transform: uppercase; }
.arch h2::before { content: ''; flex: none; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--sec); }
.arch h2 small { margin-left: auto; font: 300 1.5rem/1 var(--sans); letter-spacing: 0; color: var(--paper); }
.arch > .small { margin: 0 0 .8rem; max-width: 44rem; font: 400 1rem/1.45 var(--sans); }
.arch .entries { border-top: 0; }
.arch .entry span:last-child { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.toc { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; margin-top: 1.2rem; padding-top: .8rem; border-top: 3px solid var(--ink);
  font: 600 .82rem/1.6 var(--cond); letter-spacing: .1em; text-transform: uppercase; }
.toc a { color: var(--ink); text-decoration: none; }
.toc a:hover { color: var(--sec); }
.score-tag { font: 700 .74rem/1 var(--cond); color: var(--red); letter-spacing: .04em; }
/* archive index: one block per outlet, its colour on top and its piece count large */
.outlets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1.8rem 1.6rem; margin-top: 2rem; }
.outlet { display: grid; align-content: start; gap: .25rem; padding-top: .7rem; text-decoration: none; color: var(--ink); border-top: 10px solid var(--sec); }
.outlet .count { font: 300 3.2rem/.95 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.outlet b { font: 600 1.25rem/1.15 var(--slab); }
.outlet span:last-child { font: 600 .82rem/1.4 var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.outlet:hover b { color: var(--sec); }
.credits { padding-left: 1.2rem; max-width: 50rem; }
.credits li { margin-bottom: .5rem; }
.more a + a { margin-left: 1.6rem; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* covers page: pick a magazine by its masthead, five small covers under each */
.mag-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1.2rem; margin: .4rem 0 2.2rem; }
.pick { display: grid; gap: .7rem; align-content: start; padding: 1rem 1.1rem 1.1rem; text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--rule); border-top: 6px solid var(--rule); transition: border-color .15s, opacity .15s; }
.pick[aria-selected="true"] { border-top-color: var(--sec); border-color: var(--ink) var(--ink) var(--ink); border-top-color: var(--sec); }
.pick[aria-selected="false"] .minis { opacity: .55; }
.pick:hover, .pick:focus-visible { border-color: var(--ink); }
.pick:hover .minis { opacity: 1; }
.pick:focus-visible { outline: 2px solid var(--sec); outline-offset: 2px; }
.home-picks { margin-bottom: 0; }
.home-picks .pick { border-top-color: var(--sec); }
.band-lede { margin: -.3rem 0 1.2rem; font: 400 1.05rem/1.45 var(--sans); color: var(--ink-soft); max-width: 46rem; }
/* PopSci covers are a slightly wider shape, so their row is a few pixels shorter: the count line sits at the foot of the card so both line up */
.pick { grid-template-rows: auto auto 1fr; }
.pick small { align-self: end; font: 600 .8rem/1.3 var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.mh { display: flex; align-items: center; gap: .3rem; font: 800 clamp(1.45rem, 1.1rem + 1.1vw, 1.9rem)/1 var(--sans); letter-spacing: -.035em; color: var(--ink); white-space: nowrap; }
/* the drawn masthead, as tall as the two-line Australian Popular Science one so the cover pickers line up */
.mh.mh-pcpp img { display: block; flex: none; height: 1.62em; width: auto; max-width: none; aspect-ratio: auto; object-fit: fill; background: none; }
.mh-popsci { width: max-content; flex-direction: column; align-items: stretch; gap: .12em; text-transform: uppercase; font-family: var(--cond); font-weight: 700; letter-spacing: -.01em; }
.mh-popsci .aus { display: flex; justify-content: space-between; font: 300 .5em/1 var(--sans); }
.mh-popsci .aus i { font-style: normal; }
.minis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; }
.minis img { display: block; width: 100%; height: auto; box-shadow: 0 1px 2px rgb(0 0 0 / .2); }
.mag-panel[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .pick { transition: none; } }

/* covers: a newsstand rack, the intro above it */
.covers-intro { max-width: 46rem; font: 400 1.1rem/1.55 var(--serif); }
.covers-intro p { margin: 0 0 .9rem; }
.covers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: 2rem 1.4rem; margin-top: 1rem; }
.covers figure { margin: 0; }
.mag-panel .covers { margin-top: 1.8rem; padding-top: 1.8rem; border-top: 1px solid var(--rule); }
.covers a { display: block; padding: 3px; border: 1px solid transparent; margin: -4px; }
.covers a:hover, .covers a:focus-visible { border-color: var(--ink); outline: none; }
.covers img { display: block; width: 100%; height: auto; box-shadow: 0 1px 2px rgb(0 0 0 / .18), 0 6px 18px rgb(0 0 0 / .12); }
.covers .lost { display: grid; place-items: center; aspect-ratio: 18 / 25; border: 1px solid var(--rule); background: var(--paper-2); font: 700 1.05rem/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.covers figcaption { margin-top: .6rem; padding-top: .4rem; border-top: 4px solid var(--sec); font: 500 .82rem/1.35 var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.covers figcaption b { color: var(--ink); font-weight: 700; margin-right: .3rem; }
.covers figcaption span { display: block; margin-top: .25rem; text-transform: none; letter-spacing: 0; font: 400 .92rem/1.4 var(--sans); color: var(--ink); }
/* outlet page: first and last covers beside the intro */
.piece-head.with-covers { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 2.4rem; align-items: start; }
.outlet-covers { display: flex; gap: 1rem; }
.outlet-covers figure { margin: 0; width: 9.5rem; }
.outlet-covers img { display: block; width: 100%; height: auto; box-shadow: 0 1px 2px rgb(0 0 0 / .18), 0 6px 18px rgb(0 0 0 / .12); }
.outlet-covers figcaption { margin-top: .5rem; padding-top: .35rem; border-top: 4px solid var(--sec); font: 500 .78rem/1.35 var(--cond); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.outlet-covers figcaption b { display: block; font: 700 1.3rem/1 var(--sans); color: var(--ink); letter-spacing: 0; }
@media (max-width: 760px) { .piece-head.with-covers { grid-template-columns: 1fr; } .outlet-covers figure { width: min(9.5rem, 46%); } }
/* a run of covers under a piece */
.cover-run { margin: 2.4rem 0 0; }
.cover-run ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 1rem .8rem; }
@media (max-width: 760px) { .cover-run ol { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cover-run li { display: grid; gap: .3rem; }
.cover-run img { display: block; width: 100%; height: auto; box-shadow: 0 1px 2px rgb(0 0 0 / .18), 0 4px 12px rgb(0 0 0 / .1); }
.cover-run li span { font: 700 .82rem/1 var(--cond); letter-spacing: .06em; color: var(--ink-soft); }
.cover-run figcaption { margin-top: .9rem; padding-top: .5rem; border-top: 4px solid var(--sec); font: 400 .92rem/1.45 var(--sans); color: var(--ink-soft); max-width: 46rem; }

/* footer: a black bar, like the foot of a PopSci page */
.foot { padding-block: 1.4rem 2.4rem; font: 400 .95rem/1.5 var(--sans); background: var(--ink); color: var(--paper); }
.foot a { color: var(--paper); }
.foot .small { color: #b9bbbe; }
.foot p { margin: .3rem 0; }

@media (max-width: 860px) {
  .contents { grid-template-columns: minmax(0, 1fr); }
  .feature img { aspect-ratio: 16 / 9; }
  .side { order: -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); gap: 1.4rem 2rem; align-items: start; }
  .side > :only-child { grid-column: 1 / -1; }
  .facts { position: static; }
  .side-stick { display: contents; }
  .lead img { max-height: 55vh; }
  .live li { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .live .where { grid-column: 2; grid-row: 1; }
  .live a { grid-column: 1 / -1; }
  .live .kind { grid-column: 1 / -1; text-align: left; }
}
@media (max-width: 860px) {
  .piece-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .frame { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .spine { border-top: 0; border-left: 1.4rem solid var(--sec); margin-bottom: 1.2rem; }
  .spine span { position: static; writing-mode: horizontal-tb; transform: none; padding: .45rem .8rem; line-height: 1.2; white-space: normal; }
}
@media (max-width: 520px) {
  .masthead { position: static; }
  .book { grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; }
  .specs div { grid-template-columns: 1fr; gap: 0; }
  .side { display: contents; }
  .folio { order: -2; }
  .lead { order: -1; }
  .lead img { max-height: 45vh; }
  .folio b { font-size: 3rem; }
  .masthead nav { gap: .9rem; }
  .feature .badge { left: .7rem; bottom: .7rem; }
  .feature .badge .mh { font-size: .9rem; }
  .feature .ring { width: 4.4rem; height: 4.4rem; border-width: 5px; font-size: 1.55rem; }
}

/* {note:...} footnotes: underlined words, the note pops up on hover or tap */
.fn { position: relative; text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: help; }
.fn:focus { outline: none; }
.fn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.fn-pop { position: absolute; left: 0; top: calc(100% + .5rem); z-index: 5; width: min(22rem, 80vw); padding: .7rem .9rem;
  background: var(--ink); color: var(--paper); font: 400 .85rem/1.45 var(--sans); text-decoration: none;
  visibility: hidden; opacity: 0; transition: opacity .15s; }
.fn:hover .fn-pop, .fn:focus .fn-pop { visibility: visible; opacity: 1; }

/* covers page: a clicked cover full size over the page, with a circled back arrow top left */
.viewer { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 4.5rem 1rem 1rem; background: rgba(10, 10, 10, .92); }
.viewer[hidden] { display: none; }
.viewer img { max-width: 100%; max-height: calc(100vh - 5.5rem); max-height: calc(100dvh - 5.5rem); width: auto; height: auto; object-fit: contain; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.viewer-back { position: fixed; top: 1rem; left: 1rem; width: 3rem; height: 3rem; border-radius: 50%; border: 2px solid #fff; background: rgba(0, 0, 0, .4);
  color: #fff; font: 400 1.6rem/1 var(--sans); cursor: pointer; display: grid; place-items: center; padding: 0 0 .15rem; }
.viewer-back:hover, .viewer-back:focus-visible { background: #fff; color: #111; outline: none; }
/* front page: the desk photo opens in the same viewer, closed by a circled X top right */
.viewer-close { position: fixed; top: 1rem; right: 1rem; width: 3rem; height: 3rem; border-radius: 50%; border: 2px solid #fff; background: rgba(0, 0, 0, .4);
  color: #fff; font: 400 1.35rem/1 var(--sans); cursor: pointer; display: grid; place-items: center; padding: 0; }
.viewer-close:hover, .viewer-close:focus-visible { background: #fff; color: #111; outline: none; }
.zoom { display: block; cursor: zoom-in; }

/* ::: shot: game screenshots run inline with the text, between paragraphs */
.shot { margin: 2rem 0; }
.shot img { display: block; width: 100%; height: auto; background: var(--paper-2); }
.shot.pixel img { image-rendering: pixelated; }
.shot.tall img { width: auto; max-width: 100%; max-height: 85vh; }   /* whole page on screen */
.shot figcaption { margin-top: .5rem; }