:root{--accent:#0e7490;--ink:#111827;--bg:#f5f7f8;--line:#dfe4e8;--rule:#111827;--radius:4px;--tile-min:230px;--tile-ratio:4/3;--rule-weight:1px;--head:"Helvetica Neue",Helvetica,Arial,system-ui,-apple-system,sans-serif;--body:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--muted:#787c85;--caps:uppercase}@media(prefers-color-scheme:dark){:root{--ink:#f2f0f5;--bg:#101014;--line:#2a2830;--rule:#f2f0f5;--muted:#8c8b90;}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 var(--body)}
a{color:inherit}
img{max-width:100%;height:auto}
main{max-width:1300px;margin:0 auto;padding:0 16px 64px}
.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}

/* ---- masthead: white, hairline rule, black wordmark ---- */
/* The masthead and footer are full-bleed bars, but their CONTENT sits on the same
   measure as the body, so nothing lines up against the page edge while the article
   below it is inset. */
/* The masthead must never be wider than the screen. On a phone the brand sits alone
   with a burger beside it and everything else collapses into a panel; from 760px up the
   panel is simply the row it always was and the burger disappears. */
.site-head{display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  padding:12px 16px;background:var(--bg);border-bottom:var(--rule-weight) solid var(--rule);
  position:sticky;top:0;z-index:30;max-width:1300px;margin:0 auto;
  /* min-width:0 on the children is what actually stops a long nav pushing the header
     past the viewport - a flex item defaults to min-content width, not zero. */
  overflow:visible}
.site-head > *{min-width:0}
.nav-toggle{position:absolute;opacity:0;pointer-events:none}
.burger{margin-left:auto;display:inline-flex;flex-direction:column;justify-content:center;
  gap:5px;width:42px;height:38px;padding:8px;cursor:pointer;flex:0 0 auto}
.burger span{display:block;height:2px;background:currentColor;border-radius:2px;
  transition:transform .18s ease,opacity .18s ease}
.burger:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nav-toggle:checked ~ .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle:checked ~ .burger span:nth-child(2){opacity:0}
.nav-toggle:checked ~ .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.head-panel{display:none;width:100%;flex-basis:100%;gap:14px;
  flex-direction:column;padding:6px 0 4px}
.nav-toggle:checked ~ .head-panel{display:flex}
@media(prefers-reduced-motion:reduce){.burger span{transition:none}}

@media(min-width:760px){
  .site-head{flex-wrap:nowrap}
  .burger{display:none}
  /* The panel stops being a panel and becomes the row: no toggle, nothing hidden. */
  .head-panel{display:flex !important;flex-direction:row;align-items:center;
    width:auto;flex-basis:auto;flex:1 1 auto;min-width:0;padding:0;gap:18px}
}
body[data-masthead="solid"] .site-head{background:var(--accent);border-bottom:0}
body[data-masthead="solid"] .site-head,
body[data-masthead="solid"] .site-head a{color:#fff}
body[data-masthead="solid"] .brand{color:#fff}
body[data-masthead="tint"] .site-head{background:color-mix(in srgb,var(--accent) 12%,var(--bg))}
body[data-masthead="centred"] .site-head{flex-direction:column;gap:10px;text-align:center}
body[data-masthead="centred"] .brand{font-size:1.9rem}
/* stripe: a thick accent bar above an otherwise plain head. */
body[data-masthead="stripe"] .site-head{border-top:6px solid var(--accent);border-bottom-color:var(--line)}
/* ink: the head inverts to the page's own ink, with the accent as its underline. */
body[data-masthead="ink"] .site-head{background:var(--ink);border-bottom:4px solid var(--accent)}
body[data-masthead="ink"] .site-head,
body[data-masthead="ink"] .site-head a{color:var(--bg)}
body[data-masthead="ink"] .search input,
body[data-masthead="ink"] .search button{border-color:color-mix(in srgb,var(--bg) 35%,var(--ink))}
.brand{font-weight:900;text-decoration:none;font-size:1.4rem;letter-spacing:-.045em;
  text-transform:uppercase;color:var(--accent);white-space:nowrap}
.site-head nav{display:flex;gap:20px;min-width:0;flex-wrap:wrap}
@media(min-width:760px){
  /* Only the desktop row scrolls; on a phone the panel wraps instead, because a
     horizontal scroller inside a dropdown is a trap. */
  .site-head nav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none}
}
.site-head nav::-webkit-scrollbar{display:none}
.site-head nav a{text-decoration:none;white-space:nowrap;font-weight:700;font-size:.95rem}
.site-head nav a:hover{color:var(--accent)}
.search{display:flex;gap:6px;min-width:0}
@media(min-width:760px){.search{margin-left:auto}}
.search input{padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius);
  flex:1 1 auto;width:100%;background:var(--bg);color:var(--ink);min-width:0}
.search button{padding:7px 13px;border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--bg);color:var(--ink);cursor:pointer;font-weight:700;white-space:nowrap}
@media(min-width:760px){.search input{flex:0 0 auto;width:150px}}
@media(min-width:1060px){.search input{width:190px}}

/* ---- topic strip: plain links divided by rules ---- */
.trending{display:flex;align-items:center;overflow-x:auto;scrollbar-width:none;
  padding:16px 0;font-size:1rem;white-space:nowrap;border-bottom:1px solid var(--line)}
.trending::-webkit-scrollbar{display:none}
.trending a{text-decoration:none;padding:0 18px;border-right:1px solid var(--line)}
.trending a:first-child{padding-left:0}
.trending a:last-child{border-right:0}
.trending a:hover{color:var(--accent);text-decoration:underline}

/* ---- the page label ---- */
/* This is the H1. It names what the site is for, which is the one thing the front page
   cannot say any other way, and it stays deliberately quieter than the lead headline
   below it - a masthead label, not a second headline competing with the first. */
.page-head{padding:18px 0 0}
.page-title{font-family:var(--head);font-size:1.15rem;font-weight:800;margin:0;
  letter-spacing:-.01em;color:var(--ink)}
.page-sub{margin:.25em 0 0;color:var(--muted);font-size:.82rem}
@media(min-width:760px){.page-title{font-size:1.3rem}}

/* ---- three columns ---- */
/* The lead is FIRST in the markup so the headings descend properly - it carries the h2
   and the rails carry h3s. Its visual position is set here instead, because reading
   order and column order are different questions. */
.frontpage{display:grid;grid-template-columns:1fr;gap:30px;padding:22px 0 8px}
@media(min-width:760px){
  .frontpage{grid-template-columns:1fr 1fr;gap:30px}
  .fp-lead{grid-column:1 / -1}
}
@media(min-width:1080px){
  .frontpage{grid-template-columns:minmax(0,300px) minmax(0,1fr) minmax(0,300px);gap:0}
  .fp-lead{grid-column:2;grid-row:1;padding:0 32px}
  .fp-left{grid-column:1;grid-row:1;border-right:1px solid var(--line);padding-right:32px}
  .fp-right{grid-column:3;grid-row:1;border-left:1px solid var(--line);padding-left:32px}
}

/* ---- the lead: headline, then artwork, then the supporting line ---- */
.lead-title{font-family:var(--head);font-size:2rem;line-height:1.08;letter-spacing:-.025em;font-weight:800;
  margin:0 0 16px;text-align:center}
@media(min-width:760px){.lead-title{font-size:2.6rem}}
@media(min-width:1080px){.lead-title{font-size:2.9rem}}
.lead-title a{text-decoration:none}
.lead-title a:hover{text-decoration:underline}
.lead-art{display:block;position:relative}
.lead-art img{width:100%;display:block;background:var(--line)}
.lead-badge{position:absolute;top:0;left:0;background:var(--bg);color:var(--ink);
  font-size:.8rem;font-weight:800;padding:8px 14px;z-index:2}
.lead-sub{font-size:1.15rem;line-height:1.25;font-weight:700;letter-spacing:-.012em;
  margin:16px 0 8px}
@media(min-width:760px){.lead-sub{font-size:1.5rem}}
.lead-sub a{text-decoration:none}
.lead-sub a:hover{text-decoration:underline}
.lead-meta,.byline{color:var(--muted);font-size:.88rem;margin:6px 0 0;
  display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ---- artwork with the chapter count laid over it ---- */
.art{display:block;position:relative;line-height:0}
.art img{display:block;width:100%}
.art.wide img{aspect-ratio:16/10;object-fit:cover}
.ch-badge{position:absolute;right:0;bottom:0;z-index:2;
  background:rgba(0,0,0,.78);color:#fff;font-size:.74rem;font-weight:800;
  letter-spacing:.02em;padding:5px 9px;line-height:1;text-transform:uppercase}
@media(min-width:760px){.ch-badge{font-size:.78rem;padding:6px 10px}}

/* ---- completed / ongoing, as a mark ---- */
/* A full circle is a finished story; a half-filled one is still being drawn. Drawn in
   CSS rather than set as a glyph: the partial circle characters render at wildly
   different weights across fonts and one of them is simply missing on Android. */
.status{display:inline-block;width:.62em;height:.62em;margin-right:.45em;border-radius:50%;
  vertical-align:baseline;border:.14em solid currentColor;box-sizing:border-box}
.status.is-done{color:var(--accent);background:currentColor}
.status.is-live{color:var(--muted);
  background:linear-gradient(to right,currentColor 0 50%,transparent 50% 100%)}

.byline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.kicker{color:var(--accent);font-weight:700;text-decoration:none}

/* ---- side columns: artwork on top, headline beneath ---- */
.li-list{list-style:none;margin:0;padding:0;display:grid;gap:26px}
.li{margin:0}
.li-art{display:block}
.li-art{display:block}
.li h3{font-family:var(--head);font-size:1.28rem;line-height:1.2;letter-spacing:-.015em;margin:12px 0 0;
  font-weight:800;text-transform:none;color:var(--ink)}
.li h3 a{text-decoration:none}
.li h3 a:hover{text-decoration:underline}

/* ---- shelves below ---- */
.shelf{margin-top:38px}
.shelf-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  border-top:var(--rule-weight) solid var(--rule);padding-top:10px;margin-bottom:16px}
.shelf-head h2{text-transform:var(--caps);font-size:1.05rem;letter-spacing:-.01em;margin:0;font-weight:800}
.row-more{color:var(--accent);text-decoration:none;font-size:.85rem;font-weight:700;white-space:nowrap}
/* auto-FIT, not auto-fill: empty tracks collapse, so a shelf of six stretches across
   the row instead of leaving two blank columns at the end. A short section then reads
   as a short section rather than as something that failed to load. */
.grid{list-style:none;margin:0;padding:0;display:grid;gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(var(--tile-min),1fr))}
@media(min-width:760px){.grid{grid-template-columns:repeat(auto-fit,minmax(166px,1fr))}}
/* Except when a handful of items would each become enormous. */
.grid{--max-tile:230px}
.grid > li{max-width:var(--max-tile);justify-self:stretch;width:100%}
.card a{display:block;text-decoration:none;height:100%}
.card img,.card .noart{display:block;width:100%;aspect-ratio:var(--tile-ratio);object-fit:cover;background:var(--line)}
/* A missing cover still reserves its box, so a shelf holding one does not
   reflow around the gap or collapse the row it sits in. */
.noart{display:block;width:100%;aspect-ratio:var(--tile-ratio);background:var(--line)}
.card strong{display:block;padding:10px 0 3px;font-family:var(--head);font-size:1rem;line-height:1.22;font-weight:800;
  letter-spacing:-.012em}
.card span{display:block;color:var(--muted);font-size:.8rem}

/* ---- interior pages ---- */
h1{font-family:var(--head);font-size:1.8rem;line-height:1.12;margin:.15em 0 .4em;letter-spacing:-.025em;font-weight:800}
h2{font-family:var(--head);font-size:1.12rem;margin:1.7em 0 .6em;font-weight:800;letter-spacing:-.012em}
h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:0 0 6px;font-weight:800}
@media(min-width:760px){h1{font-size:2.4rem}}
.lede{color:var(--muted);max-width:64ch}
.crumbs{color:var(--muted);font-size:.83rem;margin:16px 0 10px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.crumbs a{text-decoration:none}.crumbs a:hover{text-decoration:underline;color:var(--accent)}
.series-head{display:grid;grid-template-columns:1fr;gap:20px;align-items:start}
@media(min-width:720px){.series-head{grid-template-columns:290px 1fr;gap:32px}}
.series-art img{width:100%;max-width:290px;display:block;background:var(--line)}
.alt{color:var(--muted);margin:.2em 0 0;font-size:.9rem}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:12px;margin:18px 0;
  padding:15px 0;border-top:var(--rule-weight) solid var(--rule);border-bottom:1px solid var(--line)}
.facts dt{color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.facts dd{margin:3px 0 0;font-weight:800;font-size:.96rem}
.more{display:inline-block;padding:13px 24px;border-radius:var(--radius);
  background:var(--accent);color:#fff;text-decoration:none;font-weight:800}
.summary p{max-width:70ch}
.terms{margin:0 0 14px}
.terms ul,.terms-index{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.terms a,.terms-index a{display:inline-flex;gap:6px;padding:7px 13px;border:1px solid var(--line);
  text-decoration:none;font-size:.86rem;font-weight:600}
.terms a:hover,.terms-index a:hover{border-color:var(--accent);color:var(--accent)}
.terms-index span{color:var(--muted);font-size:.78rem;font-weight:400}
.chapter-list{list-style:none;margin:0;padding:0}
.chapter-list a{display:flex;justify-content:space-between;gap:12px;padding:14px 2px;
  border-bottom:1px solid var(--line);text-decoration:none;font-weight:700}
.chapter-list span{color:var(--muted);font-size:.82rem;font-weight:400}
.chapter-list a:hover{color:var(--accent)}

/* ---- reader ---- */
.reader-sub{color:var(--muted);font-size:.87rem;margin:.1em 0 14px}
.reader-sub a{color:var(--accent)}
.reader{margin:0 -16px;background:#000;font-size:0}
@media(min-width:820px){.reader{margin:0 auto;max-width:880px}}
.reader img{display:block;width:100%;margin:0;background:#111}
.reader-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;
  padding:15px 0;font-size:.9rem}
.reader-nav a{text-decoration:none;color:var(--accent);font-weight:800}
.reader-nav .nav-prev{text-align:left}.reader-nav .nav-next{text-align:right}
.reader-nav .nav-index{color:var(--muted);font-weight:700;white-space:nowrap}
.reader-nav .is-off{color:var(--muted);opacity:.45}
.reader-nav.bottom{border-top:1px solid var(--line)}
.chapter-strip{margin-top:26px}
.chapter-strip ol{list-style:none;margin:0;padding:0 0 6px;display:flex;gap:8px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.chapter-strip ol::-webkit-scrollbar{display:none}
.chapter-strip a{display:block;padding:9px 15px;border:1px solid var(--line);
  text-decoration:none;white-space:nowrap;font-size:.87rem;font-weight:600}
.chapter-strip .is-current a{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* ---- fixed reader bar: phone and tablet ---- */
.reader-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:grid;grid-template-columns:58px 1fr 58px;align-items:center;
  background:var(--bg);border-top:var(--rule-weight) solid var(--rule);
  padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
.reader-bar a,.reader-bar span{text-decoration:none;color:var(--ink)}
.reader-bar .rb-prev,.reader-bar .rb-next{font-size:1.4rem;text-align:center;padding:8px 0;
  font-weight:800;color:var(--accent)}
.reader-bar .is-off{opacity:.28;color:var(--muted)}
.reader-bar .rb-index{text-align:center;overflow:hidden;line-height:1.2}
.reader-bar .rb-index strong{display:block;font-size:.9rem;font-weight:800;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reader-bar .rb-index span{display:block;font-size:.75rem;color:var(--muted)}
body:has(.reader-bar){padding-bottom:78px}
@media(min-width:1080px){.reader-bar{display:none}body:has(.reader-bar){padding-bottom:0}}

/* ---- pagination, footer ---- */
/* ---- share ---- */
.share{margin-top:34px;padding-top:16px;border-top:var(--rule-weight) solid var(--rule)}
.share h2{font-size:.82rem;text-transform:uppercase;letter-spacing:.07em;margin:0 0 12px;font-weight:800}
.share-links{display:flex;flex-wrap:wrap;gap:8px}
.share-links a{padding:9px 15px;border:1px solid var(--line);text-decoration:none;
  font-weight:700;font-size:.87rem;color:var(--ink)}
.share-links a:hover{border-color:var(--accent);color:var(--accent)}
.share-copy{display:flex;gap:8px;margin-top:12px;max-width:560px}
.share-copy input{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--line);
  background:var(--bg);color:var(--ink);font-size:.87rem;font-family:inherit}
.share-copy button{padding:10px 18px;border:1px solid var(--rule);background:var(--ink);
  color:var(--bg);font-weight:800;cursor:pointer;white-space:nowrap}
.share-copy button.is-done{background:var(--accent);border-color:var(--accent)}

.pagination{display:flex;gap:7px;flex-wrap:wrap;margin:30px 0}
.pagination a{padding:9px 14px;border:1px solid var(--line);text-decoration:none;font-weight:600}
.pagination a[aria-current]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.hub-intro{max-width:70ch;margin:0 0 22px;color:var(--muted)}
.hub-intro p{margin:0 0 .6em}
.hub-intro strong,.hub-intro a{color:var(--ink)}
.hub-intro a{color:var(--accent)}
.prose{max-width:72ch;padding-bottom:20px}
.prose h2{margin:1.8em 0 .5em}
.prose div{margin:0 0 1em}
.prose ul{margin:0 0 1em;padding-left:1.2em}
.prose li{margin:.35em 0}
.prose a{color:var(--accent)}
.empty,.listing-empty{color:var(--muted);padding:22px 0}
.site-foot{border-top:var(--rule-weight) solid var(--rule);padding:26px 16px 44px;color:var(--muted);
  font-size:.87rem;max-width:1300px;margin:0 auto}
.site-foot nav{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px}
.site-foot a{text-decoration:none;font-weight:600}
.site-foot a:hover{text-decoration:underline;color:var(--accent)}

.ptile{margin:0}
.ptile a{display:block;text-decoration:none}
.ptile img{display:block;width:100%;height:auto;border-radius:var(--radius);background:var(--line)}
.ptitle{display:block;padding:6px 0 0;font-size:.84rem;color:var(--muted);line-height:1.3}
.ptile a:hover .ptitle{color:var(--accent)}
.photo-frame{margin:0 0 18px}
.photo-frame img{display:block;max-width:100%;max-height:82vh;width:auto;height:auto;margin:0 auto;
  border-radius:var(--radius);background:var(--line)}
.photo-meta{max-width:72ch}
.photo-desc{font-size:1.05rem;line-height:1.55}
.download{margin:6px 0 18px}
.facts{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:0 0 16px;font-size:.92rem}
.facts dt{color:var(--muted)}.facts dd{margin:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips a{padding:6px 12px;border:1px solid var(--line);border-radius:999px;text-decoration:none;font-size:.86rem}
.chips a:hover{border-color:var(--accent);color:var(--accent)}
.term-list{list-style:none;padding:0;columns:220px auto;column-gap:24px}
.term-list li{break-inside:avoid;padding:6px 0;border-bottom:1px solid var(--line)}
.term-list a{text-decoration:none;font-weight:600}.term-list span{color:var(--muted);font-size:.85rem}
.hub-count{color:var(--muted);margin-top:-6px}

/* ---- the notice under the header on reused domains ---- */
.notice{max-width:1300px;margin:0 auto;padding:9px 16px;font-size:.84rem;color:var(--muted);
  border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--accent) 6%,var(--bg))}

/* ---- seven layouts; each listing is <ul class="pgrid pgrid-KIND"> ---- */
.pgrid{list-style:none;margin:0;padding:0}
.pgrid-masonry{columns:var(--tile-min) auto;column-gap:14px}
.pgrid-masonry .ptile{break-inside:avoid;margin:0 0 14px}
/* The sidebar layout crops to one 4:3 shape: a catalogue sheet, not a mosaic. */
.pgrid-sidebar{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--tile-min),1fr));gap:18px 14px}
.pgrid-sidebar img{aspect-ratio:4/3;object-fit:cover;width:100%;height:auto}
.pgrid-sidebar .ptitle{font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}

.pgrid-justified{display:flex;flex-wrap:wrap;gap:8px}
.pgrid-justified .ptile{flex-grow:calc(var(--r) * 100);flex-basis:calc(var(--r) * 190px);margin:0}
.pgrid-justified .ptile img{width:100%;height:auto;border-radius:var(--radius)}
.pgrid-justified .ptitle{display:none}
.pgrid-justified .spacer{flex-grow:999999;height:0}

.pgrid-square{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--tile-min),1fr));gap:4px}
.pgrid-square img{aspect-ratio:1;object-fit:cover;width:100%;height:auto;border-radius:0}
.pgrid-square .ptitle{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.pgrid-editorial{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--tile-min),1fr));gap:28px 22px}
.pgrid-editorial img{aspect-ratio:3/2;object-fit:cover;width:100%;height:auto}
.pgrid-editorial .ptitle{font-family:var(--head);font-size:1.08rem;color:var(--ink);font-weight:700;padding-top:10px}
.pexcerpt{margin:6px 0 0;color:var(--muted);font-size:.9rem;line-height:1.45}

.pgrid-polaroid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--tile-min),1fr));gap:34px 26px;padding:10px 4px}
.pgrid-polaroid .ptile a{display:block;background:#fff;padding:10px 10px 0;box-shadow:0 6px 18px rgba(0,0,0,.12);
  transform:rotate(-1.2deg);transition:transform .2s ease}
.pgrid-polaroid .ptile:nth-child(3n+2) a{transform:rotate(1deg)}
.pgrid-polaroid .ptile:nth-child(3n) a{transform:rotate(-.4deg)}
.pgrid-polaroid .ptile a:hover{transform:rotate(0) scale(1.02)}
.pgrid-polaroid img{aspect-ratio:1;object-fit:cover;width:100%;height:auto;border-radius:0}
.pgrid-polaroid .ptitle{font-family:var(--head);font-style:italic;color:#333;padding:12px 4px 16px;text-align:center}
@media(prefers-reduced-motion:reduce){.pgrid-polaroid .ptile a{transition:none}}

.pgrid-cinematic{display:grid;grid-template-columns:1fr;gap:34px}
@media(min-width:1000px){.pgrid-cinematic{grid-template-columns:1fr 1fr}}
.pgrid-cinematic img{width:100%;height:auto;border-radius:var(--radius)}
.pgrid-cinematic .ptitle{font-family:var(--head);font-size:1.05rem;padding-top:10px;color:var(--ink)}

/* ---- front-page leads ---- */
.lead-photo{display:grid;gap:22px;margin:22px 0 10px}
@media(min-width:900px){.lead-photo{grid-template-columns:3fr 2fr;align-items:center}}
.lead-photo img{width:100%;height:auto;border-radius:var(--radius)}
.lead-photo h2{font-family:var(--head);font-size:1.9rem;line-height:1.15;margin:.2em 0 .4em}
.lead-photo h2 a{text-decoration:none}
.kicker{text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;color:var(--accent);font-weight:800;margin:0}
.hero{position:relative;margin:18px 0 0}
.hero img{width:100%;height:auto;max-height:78vh;object-fit:cover;display:block;border-radius:var(--radius)}
.hero figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 22px 18px;color:#fff;
  font-family:var(--head);font-size:1.5rem;background:linear-gradient(transparent,rgba(0,0,0,.72))}
.hero figcaption span{display:block;font-family:var(--body);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;opacity:.8;margin-bottom:6px}
.hero a{text-decoration:none}

/* ---- the sidebar layout's frame ---- */
.with-side{max-width:1300px;margin:0 auto}
@media(min-width:900px){.with-side{display:grid;grid-template-columns:230px 1fr}
  .with-side > main{margin:0;max-width:none;min-width:0}}
.side{padding:18px 16px}
@media(min-width:900px){.side{position:sticky;top:64px;align-self:start;max-height:calc(100vh - 80px);overflow:auto;
  border-right:1px solid var(--line)}}
.side h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;margin:0 0 10px}
.side ul{list-style:none;margin:0;padding:0}
.side li{display:flex;justify-content:space-between;gap:8px;padding:5px 0;font-size:.92rem}
.side a{text-decoration:none}.side a:hover{color:var(--accent)}
.side span{color:var(--muted);font-size:.8rem}

/* ---- the photo page, per layout ---- */
body[data-layout="editorial"] .photo{display:grid;gap:10px 34px}
@media(min-width:980px){
  body[data-layout="editorial"] .photo{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
  body[data-layout="editorial"] .photo h1{grid-column:1 / -1}
  body[data-layout="editorial"] .photo .share{grid-column:1 / -1}}
body[data-layout="cinematic"] .photo-frame{background:#000;margin:0 -16px 20px;padding:20px 0}
body[data-layout="cinematic"] .photo-frame img{max-height:86vh;border-radius:0}
body[data-layout="polaroid"] .photo-frame img{background:#fff;padding:14px 14px 48px;box-shadow:0 10px 30px rgba(0,0,0,.14);border-radius:0}
body[data-layout="square"] .photo-frame img,body[data-layout="justified"] .photo-frame img{border-radius:0}
body[data-layout="polaroid"] h1,body[data-layout="polaroid"] .page-title{font-style:italic}

/* ================================================================================
   The photography design layer. Everything above is structure shared with the comics
   sites; this is what makes a photo site read as a photographer's site - the name set
   in the theme's display face, quiet navigation, generous space, captions that step
   aside for the pictures, and images large enough to be looked at.
   ================================================================================ */
body[data-kind="photos"]{font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
body[data-kind="photos"] main{padding-bottom:80px}
body[data-kind="photos"] .site-head{padding:18px 20px;gap:22px}
body[data-kind="photos"] .brand{font-family:var(--head);font-weight:600;text-transform:none;
  letter-spacing:.01em;font-size:1.45rem;color:var(--ink)}
body[data-kind="photos"][data-masthead="solid"] .brand,
body[data-kind="photos"][data-masthead="ink"] .brand{color:inherit}
body[data-kind="photos"] .site-head nav a{font-weight:500;font-size:.9rem;letter-spacing:.06em;
  text-transform:uppercase;opacity:.85}
body[data-kind="photos"] .site-head nav a:hover{opacity:1}
body[data-kind="photos"] .search input{border-radius:999px;padding:8px 14px;font-size:.9rem}
body[data-kind="photos"] .search button{border-radius:999px;font-weight:600;font-size:.85rem;padding:7px 14px}
body[data-kind="photos"] .notice{font-size:.78rem;text-align:center}
body[data-kind="photos"] h1{font-weight:600;letter-spacing:-.015em}
body[data-kind="photos"] .shelf{margin-top:56px}
body[data-kind="photos"] .shelf-head{border-top:0;padding-top:0;margin-bottom:18px}
body[data-kind="photos"] .shelf-head h2{font-family:var(--head);font-weight:600;font-size:1.35rem;
  text-transform:none;letter-spacing:0}
body[data-kind="photos"] .shelf-head a{font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;color:var(--accent);font-weight:600}
body[data-kind="photos"] .crumbs{margin-top:22px}

/* ---- the front page's opening ---- */
.intro{padding:46px 0 26px;max-width:760px}
.intro .page-title{font-size:clamp(2.1rem,6vw,3.6rem);line-height:1.05;font-weight:600;margin:0}
.intro .tagline{margin:.55em 0 0;font-size:clamp(1.02rem,2.2vw,1.25rem);color:var(--muted);font-family:var(--head)}
body[data-masthead="centred"] .intro{margin:0 auto;text-align:center}
body[data-layout="masonry"] .intro{padding:70px 0 40px}
body[data-layout="masonry"] .intro .page-title{font-size:clamp(2.6rem,9vw,5.6rem);letter-spacing:-.04em}
body[data-layout="polaroid"] .intro{margin:0 auto;text-align:center}
body[data-layout="polaroid"] .intro .page-title{font-style:italic}
body[data-layout="cinematic"] .intro{padding:34px 0 20px}
.text-link{display:inline-block;margin-top:10px;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);font-weight:700;text-decoration:none;border-bottom:1px solid currentColor}

.chips-nav{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:6px 0 4px;margin:4px 0 0}
.chips-nav::-webkit-scrollbar{display:none}
.chips-nav a{flex:0 0 auto;padding:7px 15px;border:1px solid var(--line);border-radius:999px;
  text-decoration:none;font-size:.88rem;white-space:nowrap;transition:border-color .15s,color .15s}
.chips-nav a:hover{border-color:var(--accent);color:var(--accent)}
body[data-masthead="centred"] .chips-nav{justify-content:safe center}

.triptych{display:grid;grid-template-columns:1fr;gap:10px;margin:10px 0 18px}
.triptych img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:var(--radius)}
@media(min-width:760px){.triptych{grid-template-columns:1fr 1.3fr 1fr}
  .triptych img{aspect-ratio:auto;height:440px}}
.opening-square{display:grid;gap:24px;align-items:center;padding-bottom:10px}
@media(min-width:900px){.opening-square{grid-template-columns:1fr 1fr}}
.mosaic{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mosaic img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block;border-radius:var(--radius)}

/* ---- tiles: the picture first, the caption when asked for ---- */
.ptile a{position:relative;overflow:hidden;border-radius:var(--radius)}
.ptile img{transition:transform .5s ease,filter .3s ease}
.ptile a:hover img{transform:scale(1.025)}
.pgrid-masonry .ptitle,.pgrid-justified .ptitle,.pgrid-sidebar .ptitle{position:absolute;left:0;right:0;bottom:0;
  padding:30px 12px 10px;color:#fff;font-size:.82rem;line-height:1.3;
  background:linear-gradient(transparent,rgba(0,0,0,.6));opacity:0;transition:opacity .25s ease}
.pgrid-masonry .ptile a:hover .ptitle,.pgrid-justified .ptile a:hover .ptitle,
.pgrid-sidebar .ptile a:hover .ptitle,
.pgrid-masonry .ptile a:focus-visible .ptitle,.pgrid-justified .ptile a:focus-visible .ptitle{opacity:1}
.pgrid-justified .ptitle{display:block}
.pgrid-sidebar .ptitle{text-transform:none;letter-spacing:0}
.pgrid-polaroid .ptile a,.pgrid-editorial .ptile a,.pgrid-cinematic .ptile a{overflow:visible}
.pgrid-polaroid .ptile a:hover img,.pgrid-cinematic .ptile a:hover img{transform:none}
.pgrid-cinematic .ptile a:hover img{filter:brightness(1.08)}
@media(hover:none){.pgrid-masonry .ptitle,.pgrid-justified .ptitle,.pgrid-sidebar .ptitle{display:none}}
@media(prefers-reduced-motion:reduce){.ptile img,.ptitle{transition:none}.ptile a:hover img{transform:none}}

/* ---- the photograph's own page ---- */
body[data-kind="photos"] .photo h1{font-size:clamp(1.5rem,3.4vw,2.3rem);max-width:30ch;line-height:1.15}
body[data-kind="photos"] .photo-frame img{max-height:84vh}
body[data-kind="photos"] .download{border-radius:999px;padding:12px 26px;font-weight:600;letter-spacing:.03em}
body[data-kind="photos"] .facts{border-top:1px solid var(--line);padding-top:16px}
body[data-kind="photos"] .facts dt{text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;padding-top:3px}
body[data-kind="photos"] .share{border-top:1px solid var(--line)}

/* ---- footer ---- */
body[data-kind="photos"] .site-foot{padding:44px 20px 60px;border-top:1px solid var(--line)}
.foot-brand{font-family:var(--head);font-size:1.3rem;color:var(--ink);margin:0}
.foot-line{margin:.3em 0 14px}
body[data-kind="photos"] .site-foot nav a{font-weight:500}

/* ---- phones ---- */
@media(max-width:600px){
  body[data-kind="photos"] .site-head{padding:14px 16px}
  body[data-kind="photos"] .brand{font-size:1.2rem;white-space:normal}
  .intro{padding:28px 0 16px}
  body[data-layout="masonry"] .intro{padding:40px 0 22px}
  .pgrid-masonry{columns:2;column-gap:8px}
  .pgrid-masonry .ptile{margin-bottom:8px}
  .pgrid-square{grid-template-columns:repeat(3,1fr);gap:2px}
  .pgrid-sidebar,.pgrid-editorial{grid-template-columns:1fr 1fr;gap:18px 10px}
  .pgrid-polaroid{grid-template-columns:1fr 1fr;gap:22px 14px}
  .pgrid-polaroid .ptile a{padding:6px 6px 0}
  .pgrid-polaroid .ptitle{font-size:.72rem;padding:8px 2px 10px}
  .pgrid-justified .ptile{flex-basis:calc(var(--r) * 120px)}
  .hero figcaption{font-size:1.1rem;padding:36px 14px 12px}
  .hero img{max-height:70vh}
  .lead-photo h2{font-size:1.45rem}
  body[data-kind="photos"] .shelf{margin-top:40px}
  body[data-layout="cinematic"] .photo-frame{margin:0 -16px 16px;padding:0}
  /* A centred masthead is a desktop luxury: on a phone the name and the menu button
     share one row like every other header, instead of stacking two. */
  body[data-kind="photos"][data-masthead="centred"] .site-head{flex-direction:row;text-align:left}
  body[data-kind="photos"][data-masthead="centred"] .brand{font-size:1.25rem}
  /* The category chips already sit above the grid; a second list would push the
     photographs a whole screen down. */
  .with-side .side{display:none}
  /* One photograph large, two beside each other below it. */
  .triptych{grid-template-columns:1fr 1fr;gap:6px}
  .triptych a:first-child{grid-column:1 / -1}
  .triptych img{aspect-ratio:4/3}
  .triptych a:not(:first-child) img{aspect-ratio:1}
  body[data-kind="photos"] .notice{font-size:.72rem;padding:7px 14px}
  /* The headline sits right below; on a phone the breadcrumb need not say it twice. */
  body[data-kind="photos"] .crumbs [aria-current]{display:none}
}

/* ---- subject pages at old addresses ---- */
.topic{max-width:72ch;margin-bottom:26px}
.topic-intro p{font-size:1.06rem;line-height:1.65;margin:0 0 1em}
.topic-more{margin:28px 0 0}
.topic-links{margin-top:48px;border-top:1px solid var(--line);padding-top:20px}
.topic-links h2{font-family:var(--head);font-weight:600;font-size:1.2rem;margin:0 0 10px}
.topic-links ul{list-style:none;padding:0;margin:0;columns:260px auto;column-gap:24px}
.topic-links li{padding:5px 0;break-inside:avoid}
.topic-links a{text-decoration:none}.topic-links a:hover{color:var(--accent)}