/*
 * HD Publications: the reader and the gallery.
 *
 * The reader has no frame of its own: no dark backdrop, no panels over the pages. It takes the
 * site's font and text color, and sits on whatever is behind it. To give it a background, style
 * the container, e.g. `.hdpub { background: #f4efe6; padding: 2rem; border-radius: 12px; }`.
 * Accent (links, search marks, the current page): --hdpub-accent, set in Publications → Settings.
 */
.hdpub, .hdpub-gallery, .hdpub-spot { --a: var(--hdpub-accent, #136fa5); --line: color-mix(in srgb, currentColor 16%, transparent); --soft: color-mix(in srgb, currentColor 7%, transparent); --paper: #fff; --e: cubic-bezier(.16, 1, .3, 1); }
.hdpub *, .hdpub-gallery *, .hdpub-spot * { box-sizing: border-box; }
.hdpub svg, .hdpub-gallery svg, .hdpub-spot svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.hdpub button, .hdpub-gallery button { font: inherit; color: inherit; }

.hdpub { position: relative; margin: 1.5rem 0 2rem; max-width: 100%; }
/* wide (the default): break out of a narrow text column, up to 1320px, centered on the page */
.hdpub.hdpub--wide, .hdpub-gallery.hdpub--wide { width: min(1320px, calc(100vw - 40px)); max-width: none; margin-left: calc(50% - min(660px, 50vw - 20px)); margin-right: calc(50% - min(660px, 50vw - 20px)); }

/* ---------------------------------------------------------------- search and filters (above) */
.hdpub-top, .hdpub-gallery__tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; margin: 0 0 18px; }
.hdpub-find { position: relative; display: flex; align-items: center; flex: 1 1 280px; max-width: 460px; height: 44px; margin: 0; padding: 0 6px 0 14px; border: 1px solid var(--line); border-radius: 999px; transition: border-color .2s, box-shadow .2s; }
.hdpub-find:focus-within { border-color: var(--a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a) 18%, transparent); }
.hdpub-find > svg { opacity: .55; }
.hdpub-find input[type=search] { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0 8px; border: 0 !important; outline: 0; background: none !important; box-shadow: none !important; font: inherit; font-size: 15px; color: inherit; -webkit-appearance: none; appearance: none; }
.hdpub-find input::-webkit-search-cancel-button { cursor: pointer; }
.hdpub-find__n { padding: 0 6px; font-size: 12.5px; opacity: .65; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hdpub-find__step { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.hdpub-find__step:hover { background: var(--soft); }
.hdpub-find__step[hidden] { display: none; }
.hdpub-find__step svg { width: 18px; height: 18px; }
.hdpub.is-searching .hdpub-find > svg { animation: hdpub-pulse 1s ease-in-out infinite; }
@keyframes hdpub-pulse { 50% { opacity: .15; } }

.hdpub-scope { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 999px; }
.hdpub-scope button { height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: none; font-size: 14px; cursor: pointer; opacity: .75; transition: background .25s, color .25s, opacity .25s; }
.hdpub-scope button[aria-checked=true] { background: var(--a); color: #fff; opacity: 1; }
.hdpub-pick select { height: 44px; max-width: 220px; margin: 0; padding: 0 36px 0 16px; border: 1px solid var(--line); border-radius: 999px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center / 16px; font: inherit; font-size: 15px; font-weight: 600; color: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; }
.hdpub-pick select:focus { outline: 0; border-color: var(--a); }
.hdpub-pick select option, .hdpub-pick select optgroup { color: #1d1d1f; background: #fff; }

/* ---------------------------------------------------------------- drawer: results, all pages */
.hdpub-drawer { margin: 0 0 18px; padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: 18px; max-height: min(380px, 46vh); overflow: auto; overscroll-behavior: contain; }
.hdpub-drawer__h { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin: 0 0 12px; font-size: 15px; }
.hdpub-drawer__h span { opacity: .7; font-size: 14px; }
.hdpub-drawer__x { display: grid; place-items: center; width: 34px; height: 34px; margin-left: auto; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.hdpub-drawer__x:hover { background: var(--soft); }
.hdpub-hits { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.hdpub-hit { display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 8px; border: 1px solid transparent; border-radius: 12px; background: none; text-align: left; cursor: pointer; transition: background .2s, border-color .2s; }
.hdpub-hit:hover { background: var(--soft); }
.hdpub-hit[aria-current] { border-color: var(--a); }
.hdpub-hit img { width: 52px; height: auto; border-radius: 2px; box-shadow: 0 2px 8px -3px rgba(0, 0, 0, .4); }
.hdpub-hit > span { display: grid; gap: 2px; min-width: 0; }
.hdpub-hit b { font-size: 13.5px; }
.hdpub-hit span span, .hdpub-hit--x span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; line-height: 1.45; opacity: .85; }
.hdpub-drawer mark, .hdpub-gallery mark, .hdpub-textview mark { padding: 0 1px; border-radius: 2px; background: #ffe36e; color: #1d1d1f; }
.hdpub-groups { display: grid; gap: 14px; }
.hdpub-group { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: start; }
.hdpub-group img { width: 64px; border-radius: 2px; box-shadow: 0 3px 10px -4px rgba(0, 0, 0, .45); }
.hdpub-group > div { display: grid; gap: 2px; }
.hdpub-group > div > b { margin: 2px 0 2px 8px; }
.hdpub-hit--x { display: grid; gap: 1px; padding: 6px 8px; }
.hdpub-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 14px 10px; }
.hdpub-thumbs button { display: grid; gap: 5px; justify-items: center; padding: 0; border: 0; background: none; cursor: pointer; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.hdpub-thumbs img { width: 100%; height: auto; border-radius: 2px; box-shadow: 0 2px 8px -3px rgba(0, 0, 0, .4); transition: transform .3s var(--e), box-shadow .3s; }
.hdpub-thumbs button:hover img { transform: translateY(-3px); box-shadow: 0 10px 18px -8px rgba(0, 0, 0, .45); }
.hdpub-thumbs button[aria-current] img { outline: 3px solid var(--a); outline-offset: 2px; }

/* ---------------------------------------------------------------- the stage and the book */
.hdpub-stage { position: relative; display: flex; justify-content: center; padding: 6px 0; touch-action: pan-y pinch-zoom; -webkit-tap-highlight-color: transparent; }
.hdpub.is-ready .hdpub-stage { height: calc(var(--ph) + 12px); }
.hdpub-zoom { transform-origin: 50% 50%; transition: transform .45s var(--e); will-change: transform; }
.hdpub.is-panning .hdpub-zoom { transition: none; }
.hdpub.is-zoomed .hdpub-stage { overflow: hidden; cursor: grab; touch-action: none; }
.hdpub.is-panning .hdpub-stage { cursor: grabbing; }

.hdpub-book { position: relative; transform: translateX(var(--shift, 0)); }
.hdpub.is-ready .hdpub-book { width: calc(var(--pw) * 2); height: var(--ph); perspective: calc(var(--pw) * 7); }
.hdpub.is-ready.is-single .hdpub-book { width: var(--pw); }
.hdpub-book:not(.is-turning) { transition: transform .6s var(--e); }
.hdpub-cover { display: block; }
.hdpub-cover img { display: block; width: auto; max-width: 100%; max-height: 78vh; margin: 0 auto; box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .5); }

.hdpub-slot { position: absolute; top: 0; width: var(--pw); height: var(--ph); }
.hdpub-slot--l { left: 0; }
.hdpub-slot--r { left: var(--pw); }
.is-single .hdpub-slot--l { display: none; }
.is-single .hdpub-slot--r { left: 0; }
.hdpub-pg { position: absolute; inset: 0; overflow: hidden; background: var(--paper); }
.hdpub-pg.is-blank { background: none; }
.hdpub-slot .hdpub-pg:not(.is-blank) { box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 22px 44px -26px rgba(0, 0, 0, .5); }
.hdpub-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; margin: 0; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; pointer-events: none; }
/* the fold: a little shade either side of the spine */
.is-spread .hdpub-book:not(.is-front):not(.is-back) .hdpub-slot--l .hdpub-pg::after,
.is-spread .hdpub-book:not(.is-front):not(.is-back) .hdpub-slot--r .hdpub-pg::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.is-spread .hdpub-book:not(.is-front):not(.is-back) .hdpub-slot--l .hdpub-pg::after { background: linear-gradient(to left, rgba(0, 0, 0, .2), rgba(0, 0, 0, .05) 3%, transparent 8%, rgba(255, 255, 255, .07) 13%, transparent 22%); }
.is-spread .hdpub-book:not(.is-front):not(.is-back) .hdpub-slot--r .hdpub-pg::after { background: linear-gradient(to right, rgba(0, 0, 0, .2), rgba(0, 0, 0, .05) 3%, transparent 8%, rgba(255, 255, 255, .07) 13%, transparent 22%); }

/* the turning leaf: a chain of thin strips, each hinged on the last, so the paper can bend */
.hdpub-leaf { position: absolute; top: 0; z-index: 5; width: var(--pw); height: var(--ph); transform-style: preserve-3d; pointer-events: none; }
.hdpub-leaf.is-right { left: var(--pw); }
.hdpub-leaf.is-left { left: 0; }
.is-single .hdpub-leaf.is-right { left: 0; }
.hdpub-strip { position: absolute; top: 0; height: var(--ph); transform-style: preserve-3d; will-change: transform; }
.hdpub-leaf.is-right .hdpub-strip { transform-origin: 0 50%; }
.hdpub-leaf.is-left .hdpub-strip { transform-origin: 100% 50%; }
/* each face runs a little past its strip on both sides, so no seam opens where the paper bends */
.hdpub-sf { position: absolute; top: 0; bottom: 0; left: -.75px; right: -1.75px; background: var(--paper) no-repeat; backface-visibility: hidden; -webkit-backface-visibility: hidden; outline: 1px solid transparent; }
.hdpub-sf--back { transform: rotateY(180deg); }
.hdpub-sf.is-plain { background: #f6f4ef; }
/* shade (turned away from the light) and sheen (the crest of the curl) */
.hdpub-sf::before, .hdpub-sf::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.hdpub-sf { --g: 90deg; }
.hdpub-leaf.is-right .hdpub-sf--back, .hdpub-leaf.is-left .hdpub-sf:not(.hdpub-sf--back) { --g: 270deg; }
.hdpub-sf::before { background: linear-gradient(var(--g), rgba(16, 20, 28, var(--s0, 0)), rgba(16, 20, 28, var(--s1, 0))); }
.hdpub-sf::after { background: linear-gradient(var(--g), rgba(255, 255, 255, var(--h0, 0)), rgba(255, 255, 255, var(--h1, 0))); mix-blend-mode: soft-light; }
.hdpub-curl { position: absolute; z-index: 5; display: block; pointer-events: none; }
.hdpub-curl[hidden] { display: none; }
/* pages lying open, drawn as curved paper under the page's links, words and photo spots */
.hdpub-rest { position: absolute; z-index: 0; display: block; pointer-events: none; }
.hdpub-rest[hidden] { display: none; }
.hdpub-pg.is-gl { background: none; }
.hdpub-pg.is-gl > .hdpub-img { opacity: 0; }
.hdpub-pg.is-gl::after { content: none !important; }
.hdpub-cast { position: absolute; top: 0; z-index: 4; height: var(--ph); background: linear-gradient(to right, rgba(0, 0, 0, .28), rgba(0, 0, 0, .1) 35%, transparent); filter: blur(2px); pointer-events: none; }
.hdpub-cast.is-rev { background: linear-gradient(to left, rgba(0, 0, 0, .28), rgba(0, 0, 0, .1) 35%, transparent); }

/* the shadow under the magazine: soft all round, deeper where the pages arc up beside the spine */
.hdpub-shadow { position: absolute; top: 0; left: 0; z-index: 0; width: calc(var(--pw) * 2); height: var(--ph); border-radius: 2px; pointer-events: none; box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 10px 26px -8px rgba(0, 0, 0, .28), 0 34px 70px -26px rgba(0, 0, 0, .38); transition: left .6s var(--e), width .6s var(--e); }
.is-single .hdpub-shadow { width: var(--pw); }
.hdpub-shadow.is-snap { transition: none; }
.hdpub-shadow.is-r { left: var(--pw); width: var(--pw); }
.hdpub-shadow.is-l { width: var(--pw); }
.hdpub-shadow::before, .hdpub-shadow::after { content: ""; position: absolute; top: 4%; bottom: -16px; width: calc(var(--pw) * .5); opacity: 0; filter: blur(14px); transition: opacity .6s; }
.hdpub-shadow::before { left: calc(var(--pw) * .5); background: radial-gradient(60% 52% at 82% 58%, rgba(0, 0, 0, .3), transparent 70%); }
.hdpub-shadow::after { left: var(--pw); background: radial-gradient(60% 52% at 18% 58%, rgba(0, 0, 0, .3), transparent 70%); }
.hdpub-shadow.is-open::before, .hdpub-shadow.is-open::after { opacity: 1; }
.hdpub-slot .hdpub-pg:not(.is-blank) { box-shadow: none; }

/* page edges: click or drag to turn; a corner lifts when the pointer comes near */
.hdpub-hot { position: absolute; top: 0; bottom: 0; z-index: 6; width: clamp(26px, 7%, 80px); padding: 0; border: 0; background: none; cursor: grab; touch-action: none; }
/* the wider strips: drag to turn; rest on a link, photo or words for .5s and they take the pointer */
.hdpub-grab { position: absolute; top: 0; bottom: 0; z-index: 5; width: calc(var(--pw) * .7); cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
/* while a page is held nothing on the spread can be selected or dragged */
.hdpub-hot, .hdpub.is-pulling .hdpub-stage, .hdpub.is-pulling .hdpub-stage *, .hdpub-book.is-turning, .hdpub-book.is-turning * { user-select: none; -webkit-user-select: none; }
.hdpub.is-pulling .hdpub-txt ::selection { background: transparent; }
.hdpub-grab--prev { left: 0; }
.hdpub-grab--next { right: 0; }
.is-single .hdpub-grab { width: calc(var(--pw) * .5); }
.hdpub-grab[hidden], .hdpub.is-zoomed .hdpub-grab, .hdpub-book.is-turning .hdpub-grab, .is-front .hdpub-grab--prev, .is-back .hdpub-grab--next { display: none; }
.hdpub-grab.is-pass { display: block; pointer-events: none; }
.hdpub:not(.has-mouse) .hdpub-grab { display: none; }
.hdpub-book.is-turning, .hdpub-book.is-turning * { cursor: grabbing !important; }
.hdpub-hot[hidden], .hdpub.is-zoomed .hdpub-hot, .hdpub-book.is-turning .hdpub-hot { display: none; }
.hdpub-hot--prev { left: 0; }
.hdpub-hot--next { right: 0; }
.hdpub-hot::after { content: ""; position: absolute; bottom: 0; width: 0; height: 0; transition: width .35s var(--e), height .35s var(--e); }
.hdpub-hot--next::after { right: 0; background: linear-gradient(to top left, transparent 50%, rgba(0, 0, 0, .2) 50%, #fbfaf6 56%, #e9e6df); box-shadow: -3px -3px 8px -4px rgba(0, 0, 0, .35); border-top-left-radius: 2px; }
.hdpub-hot--prev::after { left: 0; background: linear-gradient(to top right, transparent 50%, rgba(0, 0, 0, .2) 50%, #fbfaf6 56%, #e9e6df); box-shadow: 3px -3px 8px -4px rgba(0, 0, 0, .35); border-top-right-radius: 2px; }
@media (pointer: fine) { .hdpub-hot:hover::after { width: 46px; height: 46px; } }
.is-front .hdpub-hot--prev, .is-back .hdpub-hot--next { display: none; }

/* links */
.hdpub-links, .hdpub-figs { position: absolute; inset: 0; pointer-events: none; }
.hdpub-links { z-index: 3; }
.hdpub-figs { z-index: 2; }
.hdpub-link { position: absolute; pointer-events: auto; border-radius: 3px; transition: box-shadow .25s, background-color .25s; }
/* a faint blue outline, only once the pointer has rested on it for half a second */
.hdpub-link:hover, .hdpub-fig:hover { transition-delay: .5s; }
.hdpub-link:hover, .hdpub-link.is-live, .hdpub-link:focus-visible { outline: 0; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--a) 55%, transparent), 0 0 10px -2px color-mix(in srgb, var(--a) 40%, transparent); background: color-mix(in srgb, var(--a) 5%, transparent); }
.hdpub-link.is-live, .hdpub-fig.is-live { transition-delay: 0s; }
.hdpub-link[data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: 9; transform: translate(-50%, 4px); padding: 5px 10px; border-radius: 8px; background: var(--a); color: #fff; font: 600 12px/1.3 system-ui, sans-serif; white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s var(--e), visibility 0s .2s; }
.hdpub-link[data-tip]:hover::after, .hdpub-link[data-tip].is-live::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .2s .5s, transform .25s var(--e) .5s, visibility 0s .5s; }
.hdpub-link[data-tip].is-live::after { transition-delay: 0s; }
@keyframes hdpub-tip { from { opacity: 0; transform: translate(-50%, 4px); } }

/* photos you can lift off the page */
.hdpub-fig { position: absolute; padding: 0; border: 0; border-radius: 2px; background: none; pointer-events: auto; cursor: zoom-in; transition: box-shadow .25s; }
.hdpub-fig span { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #1d1d1f; box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .45); opacity: 0; transform: scale(.7); transition: opacity .25s, transform .3s var(--e); }
.hdpub-fig span svg { width: 18px; height: 18px; }
.hdpub-fig:hover, .hdpub-fig.is-live, .hdpub-fig:focus-visible { outline: 0; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--a) 55%, transparent), 0 0 12px -2px color-mix(in srgb, var(--a) 40%, transparent); }
.hdpub-fig:hover span, .hdpub-fig.is-live span, .hdpub-fig:focus-visible span { opacity: 1; transform: none; transition-delay: .5s; }
.hdpub-fig.is-live span { transition-delay: 0s; }


/* selectable words */
.hdpub-txt { position: absolute; inset: 0; z-index: 1; overflow: hidden; color: transparent; font-family: sans-serif; line-height: 1; white-space: pre; }
.hdpub-txt span { position: absolute; transform-origin: 0 0; cursor: text; }
.hdpub-txt ::selection { background: color-mix(in srgb, var(--a) 38%, transparent); color: transparent; }
.hdpub-marks { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: multiply; }
.hdpub-marks i { position: absolute; border-radius: 2px; background: #ffd84a; box-shadow: 0 0 0 2px #ffd84a; opacity: .6; animation: hdpub-mark .5s var(--e) both; }
@keyframes hdpub-mark { from { opacity: 0; transform: scale(1.6); } }

/* ---------------------------------------------------------------- controls (below) */
.hdpub-bar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: center; margin: 16px auto 0; }
.hdpub-bar[hidden] { display: none; }
.hdpub-btn { position: relative; display: inline-flex; gap: 6px; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 11px; border: 0; border-radius: 999px; background: none; color: inherit !important; font-size: 14px; text-decoration: none !important; cursor: pointer; transition: background .2s, opacity .2s; }
.hdpub-btn:hover { background: var(--soft); }
.hdpub-btn:disabled { opacity: .3; cursor: default; background: none; }
.hdpub-btn[aria-pressed=true] { background: var(--a); color: #fff !important; }
.hdpub-btn[hidden] { display: none; }
.hdpub-btn:focus-visible, .hdpub-where:focus-visible, .hdpub-hot:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; }
.hdpub-btn.is-told::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: 5px 10px; border-radius: 8px; background: var(--a); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; animation: hdpub-tip .2s var(--e); }
.hdpub-where { height: 42px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: none; font-size: 14.5px; font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color .2s, background .2s; }
.hdpub-where:hover, .hdpub-where[aria-expanded=true] { border-color: var(--a); }
.hdpub-where__p { font-weight: 700; }
.hdpub-where__of { opacity: .7; }
.hdpub-bar__gap { width: 14px; }
@media (max-width: 520px) { .hdpub-bar__gap { width: 100%; height: 0; } .hdpub-btn span { display: none; } }

/* ---------------------------------------------------------------- the words, as text */
.hdpub-textview { max-height: 60vh; margin: 18px 0 0; padding: 4px 18px 10px 0; overflow: auto; overscroll-behavior: contain; font-size: 1rem; line-height: 1.7; }
.hdpub-textview[hidden] { display: none; }
.hdpub-textview section { max-width: 66ch; margin: 0 0 1.6em; }
.hdpub-textview h3 { margin: 0 0 .5em; font-size: .85rem; font-weight: 600; opacity: .6; }
.hdpub-textview p { margin: 0 0 .9em; }
.hdpub-textview__none { opacity: .6; }
@media (min-width: 1100px) {
	.hdpub.has-text { display: grid; grid-template-columns: minmax(0, 1fr) min(420px, 34%); grid-template-areas: "top top" "drawer drawer" "stage text" "bar text"; column-gap: 24px; align-items: start; }
	.hdpub.has-text .hdpub-top { grid-area: top; }
	.hdpub.has-text .hdpub-drawer { grid-area: drawer; }
	.hdpub.has-text .hdpub-stage { grid-area: stage; }
	.hdpub.has-text .hdpub-bar { grid-area: bar; }
	.hdpub.has-text .hdpub-textview { grid-area: text; max-height: calc(var(--ph) + 70px); margin: 6px 0 0; padding-left: 20px; border-left: 1px solid var(--line); }
}

/* full screen: the one place the reader paints its own background (override with --hdpub-fs-bg) */
.hdpub:fullscreen { overflow: auto; margin: 0; padding: 22px 24px; background: var(--hdpub-fs-bg, #f3f2ee); color: #1d1d1f; }

/* ---------------------------------------------------------------- spotlight (an enlarged photo) */
.hdpub-spot { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; background: rgba(248, 247, 244, 0); color: #1d1d1f; transition: background .45s, backdrop-filter .45s, -webkit-backdrop-filter .45s; cursor: zoom-out; }
.hdpub-spot.is-open { background: rgba(248, 247, 244, .86); backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.1); }
.hdpub-spot__pic { background-repeat: no-repeat; border-radius: 10px; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .12); }
.hdpub-spot__x { position: fixed; top: 18px; right: 18px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #1d1d1f; box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .4); cursor: pointer; opacity: 0; transition: opacity .3s .15s; }
.hdpub-spot__cap { position: fixed; bottom: 3vh; left: 0; right: 0; margin: 0; text-align: center; font-size: 13px; opacity: 0; transition: opacity .3s .2s; }
.hdpub-spot.is-open .hdpub-spot__x { opacity: 1; }
.hdpub-spot.is-open .hdpub-spot__cap { opacity: .65; }

/* ---------------------------------------------------------------- issue pages */
.hdpub-fulltext { margin: 2rem 0; }
.hdpub-fulltext summary { cursor: pointer; font-weight: 600; opacity: .8; }
.hdpub-fulltext section { max-width: 70ch; margin: 1.4em 0 0; }
.hdpub-fulltext h3 { font-size: .9rem; opacity: .6; }
.hdpub-empty { padding: 1rem 1.25rem; border: 1px dashed var(--line, #ccc); border-radius: 12px; }

/* ---------------------------------------------------------------- the gallery */
.hdpub-gallery { margin: 3rem 0 2rem; }
.hdpub-gallery__h { margin: 0 0 1rem; text-align: center; }
.hdpub-gallery__tools { justify-content: center; margin-bottom: clamp(22px, 3vw, 36px); }
.hdpub-years { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.hdpub-years button { height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: none; font-size: 14.5px; font-variant-numeric: tabular-nums; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.hdpub-years button:hover { border-color: var(--a); }
.hdpub-years button[aria-pressed=true] { border-color: var(--a); background: var(--a); color: #fff; }
.hdpub-years small { margin-left: 4px; font-size: 12px; opacity: .7; }
.hdpub-grid { display: grid; grid-template-columns: repeat(var(--hdpub-cols, 4), minmax(0, 1fr)); gap: clamp(26px, 3.6vw, 52px) clamp(16px, 2.6vw, 36px); margin: 0; padding: 0; list-style: none; }
@media (max-width: 960px) { .hdpub-grid { grid-template-columns: repeat(min(3, var(--hdpub-cols, 4)), minmax(0, 1fr)); } }
@media (max-width: 620px) { .hdpub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; } }
.hdpub-card { margin: 0; padding: 0; }
.hdpub-card[hidden] { display: none; }
.hdpub-card a { display: grid; gap: 12px; color: inherit; text-decoration: none; }
.hdpub-card__cover { position: relative; display: block; overflow: hidden; border-radius: 3px; background: var(--soft); box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 16px 30px -20px rgba(0, 0, 0, .55); transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0)); transition: transform .55s var(--e), box-shadow .55s var(--e); }
.hdpub-card__cover::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, rgba(0, 0, 0, .2), rgba(255, 255, 255, .14) 1.4%, rgba(0, 0, 0, .05) 3%, transparent 6%); pointer-events: none; }
.hdpub-card__cover::after { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgba(255, 255, 255, .28), transparent 55%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.hdpub-card__cover img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.hdpub-card a:hover .hdpub-card__cover, .hdpub-card a:focus-visible .hdpub-card__cover { --ty: -5px; box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 30px 46px -24px rgba(0, 0, 0, .6); }
.hdpub-card a:hover .hdpub-card__cover::after { opacity: 1; }
.hdpub-card a:focus-visible { outline: 0; }
.hdpub-card a:focus-visible .hdpub-card__cover { outline: 3px solid var(--a); outline-offset: 4px; }
.hdpub-card__label { font-size: 1.02rem; font-weight: 600; line-height: 1.3; text-align: center; }
.hdpub-card.is-current .hdpub-card__cover { outline: 3px solid var(--a); outline-offset: 5px; }
.hdpub-card.is-current .hdpub-card__label { color: var(--a); }
.hdpub-card__hit { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; margin-top: -4px; font-size: 13px; line-height: 1.45; opacity: .85; text-align: left; }
.hdpub-gallery__more { margin: 2rem 0 0; text-align: center; }
.hdpub-more { height: 44px; padding: 0 22px; border: 1px solid var(--line); border-radius: 999px; background: none; font-weight: 600; cursor: pointer; transition: border-color .2s; }
.hdpub-more:hover { border-color: var(--a); }
.hdpub-gallery__none { text-align: center; opacity: .7; }
::view-transition-group(*) { animation-duration: .45s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }

@media (prefers-reduced-motion: reduce) {
	.hdpub *, .hdpub-gallery *, .hdpub-spot { transition-duration: .01ms !important; animation-duration: .01ms !important; }
	.hdpub-card__cover { transform: none !important; }
}