/*
Theme Name: Dino Latoga
Theme URI: https://dinolatoga.com/
Author: Dino Latoga
Description: A bright, editorial block theme for personal writing, technology, life, and cat-supervised curiosity.
Version: 0.1.0
Requires at least: 7.0
Requires PHP: 7.4
Text Domain: dinolatoga
*/

/*
 * Mobile first. Every rule outside a media query describes the narrow layout,
 * and the wider ones are added on top through `min-width` queries, so a browser
 * that never evaluates a query still gets a complete, usable page.
 *
 * Three widths add something:
 *
 *   600px      the core Navigation breakpoint. Below it the nav is an overlay
 *              behind a toggle, so the masthead runs logo-left / toggle-right;
 *              at and above it the three-slot masthead appears. The number is
 *              core's, not ours — wp-includes/blocks/navigation/style.css flips
 *              the block there — so it cannot be moved without also moving that.
 *   680px      the main layout step: one column becomes two, the page gutter
 *              goes 17px to 32px, and type steps up.
 *   900px      the wide step: the hero splits, the topic cards go four across,
 *              and the thread switcher stops being a scroll strip.
 *
 * These two are plain integers because nothing pairs with them. A lone
 * `min-width` splits the axis at one point and can neither gap nor overlap; only
 * a `max-width`/`min-width` pair can. They were written `680.02px` and `900.02px`
 * while this sheet was being converted from desktop-first, so that each new query
 * was the exact complement of the `max-width` it replaced and the two sheets
 * could be proved identical at every width. Those `max-width` queries are gone,
 * so the decimals were describing a relationship the file no longer contained.
 * The boundary width itself now belongs to the wider layout: 680 is the first
 * two-column width, not the last one-column width.
 *
 * The `599.98px` at the bottom is the exception and stays fractional. It is the
 * complement of core's own `min-width: 600px`, and it is explained there.
 */

/*
 * Fonts are self-hosted — see theme.json's `fontFace` entries and
 * assets/fonts/. There is no `@import` here on purpose: an `@import` inside a
 * stylesheet cannot start until that stylesheet has been fetched and parsed, so
 * the font CSS and then the font files queued up behind style.css in a chain
 * three requests deep, across two extra origins. Declaring the faces in
 * theme.json puts them in the document head instead, and functions.php preloads
 * the two latin files so they start with the HTML rather than after it.
 */

:root {
  --dl-ink: #102336;
  --dl-paper: #f5f8f6;
  --dl-blue: #4e7fe8;
  --dl-mint: #77d6b5;
  --dl-sky: #b9d9e8;
  --dl-coral: #f07867;
  --dl-line: rgba(16, 35, 54, 0.22);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; overflow-x: clip; padding: 0; font-size: 19px; line-height: 1.6; }
.wp-site-blocks { margin: 0; padding: 0 !important; }
.wp-site-blocks > *, .dl-home > *, .dl-contact-scene > *, .wp-site-blocks > .dl-contact-scene { margin-block: 0 !important; }
/*
 * The homepage lives in the page record, so its sections arrive inside
 * core/post-content, which carries theme.json's content typography — 20px with
 * a 1.65 line height, where the sections previously inherited the body's 16px
 * and 1.5. Rules that set a font size but no line height then resolve against
 * the wrong ratio: `.dl-meta` grew from 15px to 16.5px and pushed everything
 * below it down. Inherit through the wrapper so the sections see what they saw
 * as children of the template.
 */
.dl-home > .wp-block-post-content { font-size: inherit; line-height: inherit; }
:where(.dl-home, .dl-contact-scene, .dl-masthead__inner, .dl-archive-hero, .dl-archive-list, .dl-topic-index, .dl-topic-switcher, .dl-article-mast, .dl-related, .dl-newsletter, .dl-about-page-hero, .dl-about-story, .dl-about-beliefs) :where(.is-layout-flow, .is-layout-constrained) > * { margin-block-start: 0; }
.dl-home .alignwide, .dl-contact-scene .alignwide { width: 100% !important; max-width: 1220px !important; margin-inline: auto !important; }
body::before {
  position: fixed;
  z-index: 30;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.76' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  content: "";
  opacity: 0.13;
  pointer-events: none;
  mix-blend-mode: multiply;
}

a { text-underline-offset: 0.2em; }
.wp-site-blocks { overflow-x: clip; }

/* Body copy shrinks once the measure widens; narrow columns read better big. */
@media (min-width: 680px) {
  body { font-size: 16px; line-height: 1.5; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Shared shell */
.dl-masthead { width: calc(100% - 34px); min-height: 72px; margin-inline: auto; padding-inline: 0 !important; }
.dl-masthead__inner { position: relative; display: grid; grid-template-columns: auto 1fr auto; min-height: 72px; align-items: center; }
.dl-masthead__inner { width: 100%; max-width: none !important; margin: 0 !important; }
.dl-masthead__inner > *, .dl-invitation__inner > * { margin-block-start: 0 !important; }
.dl-main-nav { grid-column: 3; grid-row: 1; justify-self: end; }
.dl-main-nav .wp-block-navigation__container { gap: 38px; }
.dl-main-nav .wp-block-navigation-item__content { font-weight: 500; letter-spacing: 1.3px; }
.dl-logo { grid-column: 1; grid-row: 1; display: grid; width: 68px; height: 68px; place-items: center; justify-self: start; }
.dl-logo span { display: block; width: 44px; height: 60px; background: url("assets/images/dl-blackletter-solid.png") center / contain no-repeat; }
.dl-note-link { display: none; grid-column: 3; grid-row: 1; margin: 0; justify-self: end; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; }
.dl-note-link a, .dl-under-link a, .dl-footer__top a { display: inline-flex; gap: .32em; align-items: center; }
.dl-arrow { display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.dl-arrow--up-right { -webkit-mask-image: url("assets/icons/arrow-up-right.svg"); mask-image: url("assets/icons/arrow-up-right.svg"); }
.dl-arrow--right { -webkit-mask-image: url("assets/icons/arrow-right.svg"); mask-image: url("assets/icons/arrow-right.svg"); }
.dl-arrow--down { -webkit-mask-image: url("assets/icons/arrow-down.svg"); mask-image: url("assets/icons/arrow-down.svg"); }
.dl-arrow--up { -webkit-mask-image: url("assets/icons/arrow-up.svg"); mask-image: url("assets/icons/arrow-up.svg"); }

/*
 * At the core Navigation breakpoint the masthead opens out to three slots: nav
 * on the left, logo centred, "send a note" on the right. Below it the logo
 * takes the left slot and the nav collapses to the overlay toggle on the right,
 * which is the arrangement above.
 */
@media (min-width: 600px) {
  .dl-masthead__inner { grid-template-columns: 1fr auto 1fr; }
  .dl-main-nav { grid-column: 1; justify-self: start; }
  .dl-logo { grid-column: 2; justify-self: center; }
  .dl-note-link { display: block; }
  /* "Send a note" belongs to the overlay only; up here the masthead shows the
     separate .dl-note-link instead. */
  .dl-main-nav .dl-nav-note { display: none; }
}

@media (min-width: 680px) {
  .dl-masthead { width: min(calc(100% - 64px), 1220px); min-height: 86px; }
  .dl-masthead__inner { min-height: 86px; }
}

.dl-eyebrow, .dl-under-link { color: var(--dl-blue); font-size: 11px; font-weight: 600; line-height: 1.5; text-transform: uppercase; }
.dl-eyebrow { margin: 0; letter-spacing: 1.5px; }
/*
 * Class doubled to reach (0,2,0) and outrank core's flow-layout reset,
 * `:root :where(.is-layout-flow) > * { margin-block: 0 }`, which is also
 * (0,1,0). A plain `.dl-under-link` only wins on the front end because
 * style.css is enqueued after core; in the editor canvas core is injected last
 * and the 34px offset disappears. Specificity makes the order irrelevant.
 */
.dl-under-link.dl-under-link { margin-top: 34px; margin-bottom: 0; letter-spacing: 1.2px; }
.dl-under-link a { padding-bottom: 7px; border-bottom: 1px solid currentColor; text-decoration: none; }

/* Homepage */
.dl-hero { display: grid; grid-template-columns: 1fr; min-height: 690px; padding-left: 0; border-bottom: 1px solid var(--dl-line); }
.dl-hero__copy { align-self: center; margin: 0; padding: 66px 17px 58px; }
.dl-hero__copy > * { margin-left: 0 !important; margin-right: 0 !important; }
.dl-hero__copy h1 { margin: 24px 0 26px; font-size: clamp(51px,15vw,70px) !important; line-height: .93; letter-spacing: -.045em; }
.dl-hero__intro { max-width: 480px; margin: 0; font-size: 18px !important; line-height: 1.55; }
/*
 * Hero illustration. A core/image rather than a background: an empty group
 * shows the "Group blocks together" variation picker in the editor, and as a
 * block the art can be swapped without touching the theme.
 */
.dl-hero__art { display: grid; min-height: 480px; margin: 0; background: var(--dl-sky); }
.dl-hero__art img { width: 100%; height: 100%; object-fit: cover; object-position: 57% center; }
.dl-currently { padding-inline: 0 !important; border-bottom: 1px solid var(--dl-line); }
.dl-currently__inner { display: grid; grid-template-columns: 1fr; gap: 10px; min-height: 140px; padding-block: 24px; align-items: center; }
.dl-home .dl-currently__inner { width: calc(100% - 34px) !important; max-width: none !important; margin-inline: auto !important; }
.dl-currently__inner p { margin: 0; }
.dl-currently__inner > p:first-child { font-size: 11px; line-height: 1.5; }
.dl-currently__inner > p:last-child { font-size: 18px !important; line-height: 1.35; }
.dl-currently__inner strong { color: var(--dl-blue); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.dl-writing { position: relative; z-index: 2; width: calc(100% - 34px); overflow: visible; margin-inline: auto; padding: 78px 0 135px; }
/*
 * These three carry a parent purely for specificity. Their margins tie at
 * (0,1,0) with core's `:root :where(.is-layout-flow, .is-layout-constrained)
 * > * { margin-block: 0 }`, so they won only on the front end, where style.css
 * is enqueued after core. In the editor canvas core is injected last and the
 * spacing vanished. Specificity makes the order irrelevant in both.
 */
.dl-writing .dl-section-head { display: grid; grid-template-columns: 1fr; gap: 22px; margin-bottom: 44px; }
.dl-section-head h2, .dl-topics-head h2, .dl-about h2 { font-size: 48px !important; line-height: .98; letter-spacing: -.047em; }
.dl-section-head h2 { grid-column: 1; margin: 0; text-align: left; white-space: normal; }
.dl-writing > *, .dl-topics > *, .dl-about > * { margin-block-start: 0 !important; }
.dl-story-layout { display: grid; grid-template-columns: 1fr; gap: 58px; }
.dl-story-layout > * { margin-block-start: 0 !important; }
.dl-featured-query { border-top: 0; padding-top: 0; }
.dl-featured-query .wp-block-post-featured-image { margin-bottom: 24px; }
.dl-featured-query .wp-block-post-title { margin: 19px 0 10px; font-size: clamp(32px,3vw,46px) !important; line-height: 1.06; letter-spacing: -.034em; }
.dl-featured-query .wp-block-post-excerpt { max-width: 570px; margin: 0; font-size: 18px; line-height: 1.5; }
.dl-featured-query .wp-block-read-more.dl-under-link { display: inline-flex; gap: .35em; width: auto; align-items: center; padding-bottom: 7px; border-bottom: 1px solid currentColor; color: var(--dl-ink); letter-spacing: 1.2px; text-decoration: none; }
.dl-featured-query .wp-block-read-more.dl-under-link::after { display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; background: currentColor; content: ""; -webkit-mask: url("assets/icons/arrow-right.svg") center / contain no-repeat; mask: url("assets/icons/arrow-right.svg") center / contain no-repeat; }
.dl-meta { display: flex; flex-wrap: wrap; gap: 18px; color: var(--dl-blue); font-size: 10px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; }
/* Block layout rules try to auto-centre these; metadata always reads inline-start. */
.dl-meta > * { margin-inline: 0 !important; }
.dl-meta a { color: inherit; text-decoration: none; }
.dl-meta time { color: var(--dl-ink); opacity: .65; }
.dl-featured-query .dl-meta { flex-wrap: nowrap; justify-content: space-between; }
.dl-story-row .dl-meta { justify-content: flex-start; }
.dl-story-list { border-top: 0; }
.dl-story-list .wp-block-post-template { gap: 0 !important; margin: 0; padding: 0; }
.dl-story-list .wp-block-post { margin: 0 !important; }
.dl-story-row { position: relative; display: grid; min-height: 150px; align-content: center; padding: 22px 50px 22px 44px; border-bottom: 1px solid var(--dl-line); }
.dl-story-row::before { position: absolute; left: 0; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--dl-mint); content: ""; transform: translateY(-50%); }
.dl-story-list li:nth-child(2) .dl-story-row::before { background: var(--dl-blue); }
.dl-story-list li:nth-child(3) .dl-story-row::before { background: var(--dl-coral); }
.dl-story-row .wp-block-post-title { margin: 13px 0 0; }
.dl-story-row .wp-block-post-title { font-size: 23px !important; line-height: 1.15; letter-spacing: -.02em; }
.dl-story-row .dl-story-arrow { position: absolute; right: 4px; top: 50%; width: 22px; height: 22px; margin: -11px 0 0; background: rgba(16,35,54,.38); font-size: 0; -webkit-mask: url("assets/icons/arrow-up-right.svg") center / contain no-repeat; mask: url("assets/icons/arrow-up-right.svg") center / contain no-repeat; }
.dl-writing::after { position: absolute; z-index: 3; right: -17px; bottom: -50px; width: min(440px, calc(100vw - 12px)); aspect-ratio: 2 / 1; background: url("assets/images/yarn-thread-transparent.png") right bottom / contain no-repeat; content: ""; pointer-events: none; }
.dl-topics { padding: 78px 17px; }
.dl-topics .dl-topics-head { display: grid; grid-template-columns: 1fr; gap: 22px; margin-bottom: 44px; }
.dl-topics-head h2 { grid-column: 1; margin: 0; text-align: left; white-space: normal; }
/*
 * The topic cards are a core/columns block. It stacks to one card per row here,
 * goes two across at 680px and four across at 900px — `flex-basis` and
 * `flex-wrap` below are inert while the grid is `display: block`, and take over
 * the moment it becomes a flex row.
 */
.dl-topic-grid { display: block !important; gap: 0; border-top: 1px solid rgba(16,35,54,.25); }
/* Class doubled to clear core's `.wp-block-columns.is-not-stacked-on-mobile
   { flex-wrap: nowrap !important }` (0,2,0), which comes bundled with the
   opt-out the block carries. Two rows are wanted in between. */
.dl-topics .dl-topic-grid.dl-topic-grid { flex-wrap: wrap !important; }
.dl-topic { position: relative; display: flex; flex-basis: 50% !important; flex-direction: column; min-height: 239.375px; padding: 26px 24px; border-right: 0; border-bottom: 0; }
.dl-topic:last-child { border-right: 0; }
/* Stacked, every card after the first needs a rule above it. Two across, only
   the third onward do — `2n`/`n+3` rather than fixed positions so adding a
   topic still lands. */
.dl-topic + .dl-topic { border-top: 1px solid rgba(16,35,54,.25); }
.dl-topic:nth-child(2n) { border-right: 0; }
.dl-topic:nth-child(n+3) { border-top: 1px solid rgba(16,35,54,.25); }
.dl-topic > p:first-child { margin: 0; color: var(--dl-blue); font-size: 11px; font-weight: 600; letter-spacing: .12em; }
.dl-topic h3 { margin-top: 38px; font-size: 24px !important; }
.dl-topic h3 a { text-decoration: none; }
.dl-topic > p:last-of-type { margin-top: 18px; margin-bottom: 24px; font-size: 14px; line-height: 1.55; }
.dl-topic__go { display: block; width: 22px; height: 22px; margin-top: auto; background: rgba(16,35,54,.38); -webkit-mask: url("assets/icons/arrow-up-right.svg") center / contain no-repeat; mask: url("assets/icons/arrow-up-right.svg") center / contain no-repeat; }
.dl-topic h3 a::before { position: absolute; inset: 0; content: ""; }
.dl-about { position: relative; overflow: hidden; padding: 78px 17px; }
.dl-about::before { position: absolute; top: 3%; right: -45px; width: 200px; height: 200px; background: url("assets/images/about-scratches.png") center / contain no-repeat; content: ""; filter: brightness(2.35) saturate(.9); opacity: .25; pointer-events: none; }
.dl-about > * { position: relative; z-index: 1; }
/* Band carried so the gap outranks core's `:root :where(.is-layout-flex)
   { gap: 0 }` (0,1,0) instead of depending on stylesheet order. */
.dl-about .dl-about__layout { display: flex; flex-direction: column-reverse; gap: 50px; }
.dl-about__art { position: relative; display: grid; overflow: hidden; aspect-ratio: 1.25; place-items: center; background: var(--dl-blue); }
.dl-about__art::before { position: absolute; inset: 0; background-image: radial-gradient(var(--dl-paper) .9px,transparent .9px); background-size: 6px 6px; content: ""; opacity: .22; }
.dl-about__art-mark { margin: 0; color: transparent; font: 500 clamp(150px,20vw,280px)/1 ui-monospace,monospace; -webkit-text-stroke: 2px var(--dl-paper); transform: rotate(-8deg); }
.dl-about__art-tag { position: absolute; margin: 0; left: 8%; bottom: 9%; padding: 8px 12px; background: var(--dl-mint); color: var(--dl-ink); font: italic 500 17px/1.2 Fraunces,Georgia,serif; transform: rotate(-4deg); }
.dl-about h2 { margin: 22px 0 30px; }
.dl-about .has-lead-font-size { margin: 0 0 22px; font-size: 25px !important; line-height: 1.45; }
.dl-about .has-lead-font-size + p { max-width: 520px; margin-top: 0 !important; color: #c6d0d6; font-size: 16px; line-height: 1.7; }
.dl-about .dl-eyebrow { color: var(--dl-mint); }
.dl-about .dl-under-link { display: inline-block; color: var(--dl-paper); }
.dl-about .dl-under-link a { color: inherit; letter-spacing: 1.2px; }
.dl-contact-scene { position: relative; isolation: isolate; }
.dl-invitation { position: relative; z-index: 0; overflow: hidden; padding: 0; padding-inline: 17px; background: var(--dl-mint); }
/*
 * The right-hand column is empty on purpose — the cat in `.dl-contact-foreground`
 * is positioned over it — so the height that keeps room for it lives on the grid
 * itself rather than on a second child. There used to be an empty
 * `.dl-invitation__art` group here, which the block editor drew as a "Group
 * blocks together. Select a layout:" placeholder in every canvas that includes
 * this part.
 *
 * One column here, so the room for the cat sits below the copy rather than
 * beside it: padding, not a taller row, since the copy alone is already taller
 * than the 420px the illustration needs. Two columns from 680px up, where
 * the column track keeps the copy its width and the grid's `min-height` gives
 * the empty side its 520px.
 */
.dl-invitation__inner { display: grid; grid-template-columns: 1fr; gap: 0; min-height: 0; padding-bottom: 420px; align-items: stretch; }
.dl-invitation__copy { align-self: center; margin: 0; padding: 76px 0; }
.dl-invitation__copy .dl-eyebrow { margin: 0 0 24px; color: var(--dl-ink); letter-spacing: 1.4px; }
.dl-invitation__copy h2 { max-width: 690px; margin: 0; font-size: clamp(36px,4vw,56px) !important; line-height: 1.05; letter-spacing: -2px; }
.dl-invitation__copy .dl-under-link { margin-top: 34px; }
.dl-contact-foreground { position: absolute; z-index: 2; right: -44px; bottom: 172px; width: 540px; max-width: none; aspect-ratio: 4 / 3; background: url("assets/images/cta-foreground.png") right bottom / contain no-repeat; pointer-events: none; }
.dl-footer { position: relative; z-index: 0; overflow: hidden; padding-inline: 0 !important; background-image: url("assets/images/footer-floor.png"); background-position: center top; background-size: auto 381px; background-repeat: repeat-x; }
.dl-footer__inner { display: grid; grid-template-columns: 1fr; gap: 18px; width: calc(100% - 34px) !important; max-width: none !important; min-height: 230px; margin-inline: auto !important; align-items: center; align-content: center; }
.dl-contact-scene .dl-footer__inner { width: calc(100% - 34px) !important; max-width: none !important; }
.dl-footer__inner { font-size: 12px; line-height: 18px; }
.dl-footer__inner > p:not(.dl-footer__title):not(.dl-footer__top) { font-size: 12px !important; line-height: 18px; opacity: .7; }
/*
 * The site name in the footer, set in the heading face rather than the monospace
 * it used to borrow, so the mark reads as part of the same voice as the display
 * type above it. Smaller than the old 23px and deliberately restrained — it is a
 * signature, not a second headline — and the tracking comes down with it, since
 * Fraunces is a wider face than the monospace was and 5px would have pushed the
 * name past the centre column it sits in.
 *
 * Weight 500 is not a preference: it is the only weight of Fraunces the theme
 * ships (see theme.json). Asking for 600 here would get a synthesised bold.
 *
 * The band on the selector is the usual reason. The block carries `fontSize:
 * small`, so core emits `.has-small-font-size { font-size: var(...) !important }`
 * — also (0,1,0), also `!important`, so the two tie and source order decides.
 * That order is opposite in the two environments, and the editor showed the
 * preset's 13px against the front end's 15px. `.dl-footer__inner` makes it
 * (0,2,0) and the size stops depending on which stylesheet loaded last.
 */
.dl-footer__inner .dl-footer__title { font-family: "Fraunces", Georgia, serif; font-size: clamp(15px, 1.5vw, 18px) !important; font-weight: 500; line-height: normal; letter-spacing: 2.5px; text-transform: uppercase; }
.dl-footer__inner > p { margin: 0; }
.dl-footer__top { justify-self: start; font-size: 10px !important; line-height: 15px; letter-spacing: 1px; text-transform: uppercase; }
.dl-footer__top a { color: inherit; font: inherit; letter-spacing: inherit; }

@media (hover: hover) {
  .dl-story-row:hover .dl-story-arrow { background: var(--dl-blue); transform: translate(3px,-3px); }
  .dl-topic:hover { background: rgba(245,248,246,.22); }
}

@media (min-width: 680px) {
  .dl-hero__copy { padding: 80px 32px; }
  .dl-hero__copy h1 { font-size: clamp(58px,5.6vw,88px) !important; letter-spacing: -4.5px; }
  .dl-hero__intro { font-size: 20px !important; }
  .dl-hero__art { min-height: 620px; }
  .dl-hero__art img { object-position: 58% center; }
  .dl-currently__inner { grid-template-columns: 150px 1fr; gap: 32px; min-height: 106px; padding-block: 0; }
  .dl-home .dl-currently__inner { width: min(calc(100% - 64px), 1220px) !important; }
  .dl-currently__inner > p:last-child { font-size: 21px !important; }
  .dl-writing { width: min(calc(100% - 64px), 1220px); padding: 116px 0 170px; }
  .dl-writing .dl-section-head { grid-template-columns: 1fr 2fr; gap: normal; margin-bottom: 68px; }
  .dl-section-head h2, .dl-topics-head h2, .dl-about h2 { font-size: clamp(50px,5vw,74px) !important; }
  .dl-section-head h2 { grid-column: auto; text-align: start; white-space: nowrap; }
  .dl-story-layout { grid-template-columns: 1.1fr .9fr; gap: 50px; }
  .dl-story-row .wp-block-post-title { font-size: 27px !important; }
  .dl-writing::after { right: -28px; bottom: -80px; width: min(680px, 62vw); }
  .dl-topics { padding: 105px max(32px, calc((100vw - 1220px) / 2)) 115px; }
  .dl-topics .dl-topics-head { grid-template-columns: repeat(4, 1fr); gap: normal; margin-bottom: 70px; }
  .dl-topics-head h2 { grid-column: 2 / -1; text-align: right; white-space: nowrap; }
  .dl-topic-grid { display: flex !important; }
  .dl-topic { min-height: 260px; padding: 24px 26px 26px; border-right: 1px solid rgba(16,35,54,.25); }
  .dl-topic:last-child { border-right: 0; }
  .dl-topic:nth-child(2n) { border-right: 0; }
  /* Two across: the cards no longer simply follow one another, so the stacked
     rule above has to go and the row rule takes over. */
  .dl-topic + .dl-topic { border-top: 0; }
  .dl-topic:nth-child(n+3) { border-top: 1px solid rgba(16,35,54,.25); }
  .dl-topic h3 { margin-top: 60px; }
  .dl-about { padding: 120px max(32px, calc((100vw - 1220px) / 2)); }
  .dl-about::before { top: 2%; right: 2%; width: 344px; height: 344px; opacity: .32; }
  .dl-about .dl-about__layout { flex-direction: row; }
  .dl-invitation { padding-inline: 0; }
  .dl-invitation__inner { grid-template-columns: 1.05fr .95fr; gap: 54px; min-height: 520px; padding-bottom: 0; }
  .dl-invitation__copy { padding: 92px 0; }
  .dl-contact-foreground { right: max(32px, calc((100vw - 1220px) / 2)); bottom: 59px; width: min(760px,54vw); }
  .dl-footer { background-size: auto 471px; }
  .dl-footer__inner { grid-template-columns: 1fr auto 1fr; gap: normal; width: min(calc(100% - 64px), 1220px) !important; min-height: 170px; align-content: normal; }
  .dl-contact-scene .dl-footer__inner { width: min(calc(100% - 64px), 1220px) !important; }
  .dl-footer__top { justify-self: end; }
}

@media (min-width: 900px) {
  .dl-hero { grid-template-columns: minmax(390px, 42%) 1fr; padding-left: max(32px, calc((100vw - 1220px) / 2)); }
  .dl-hero__copy { padding: 72px 50px 72px 0; }
  .dl-hero__art { min-height: 690px; }
  .dl-hero__art img { object-position: center; }
  .dl-story-layout { gap: 90px; }
  .dl-topics .dl-topic-grid.dl-topic-grid { flex-wrap: nowrap !important; }
  /* Four across in one row: no card has a rule above it, and only the last has
     no rule to its right. */
  .dl-topic { flex-basis: 0 !important; }
  .dl-topic:nth-child(2n) { border-right: 1px solid rgba(16,35,54,.25); }
  .dl-topic:last-child { border-right: 0; }
  .dl-topic:nth-child(n+3) { border-top: 0; }
  .dl-about .dl-about__layout { gap: 90px; }
}

/* Inner templates */
.dl-archive-hero { background: var(--dl-sky); }
.dl-archive-hero__grid { display: grid; grid-template-columns: 1fr 2fr; gap: 44px; width: min(1220px, calc(100% - 64px)); min-height: 500px; margin: auto; padding: 88px 0 60px; }
.dl-archive-hero__copy h1 { margin: 0 0 28px; font-size: clamp(56px,7vw,102px); line-height: .96; letter-spacing: -.05em; }
.dl-archive-hero__copy > p { max-width: 700px; font-size: 22px; }
/*
 * Decorative archive cat, same treatment as `.dl-about-story::before`: it is
 * absolutely positioned and bleeds past the hero, so it is painted rather than
 * placed as a block. Scoped to the Writing hero — the topic archive uses the
 * same shell with different art.
 */
.dl-writing-archive-hero .dl-archive-hero__grid::before { min-height: 220px; background: url("assets/images/writing-archive-cat.png") right bottom / contain no-repeat; content: ""; }
.dl-archive-list { width: min(1220px, calc(100% - 64px)); margin: 0 auto; counter-reset: posts; }
.dl-archive-list .wp-block-post-template { margin: 0; padding: 0; }
.dl-archive-row { display: grid; grid-template-columns: 72px 1fr 36px; gap: 34px; align-items: center; min-height: 250px; padding: 48px 0; border-bottom: 1px solid var(--dl-line); counter-increment: posts; }
/*
 * The ordinal is the row's own `::before` rather than an empty `<span>`. The row
 * is a grid, so the pseudo-element becomes its first grid item and fills the
 * number column exactly as the span did — and the span could not survive the
 * conversion to blocks, because raw HTML inside `wp:post-template` made the
 * block invalid. Same move `.dl-belief-grid article::before` made.
 */
.dl-archive-row::before { color: var(--dl-blue); font-weight: 700; content: counter(posts, decimal-leading-zero); }
.dl-archive-copy h2 { max-width: 850px; margin: 18px 0 14px; line-height: 1; }
.dl-archive-copy h2 a { text-decoration: none; }
.dl-archive-copy .wp-block-post-excerpt { max-width: 760px; margin: 0; }
.dl-archive-arrow { width: 24px; height: 24px; background: rgba(16,35,54,.38); font-size: 0; -webkit-mask: url("assets/icons/arrow-up-right.svg") center / contain no-repeat; mask: url("assets/icons/arrow-up-right.svg") center / contain no-repeat; }
.dl-topic-index, .dl-topic-switcher { width: min(1220px, calc(100% - 64px)); margin: 90px auto; }
/*
 * The topic index is a core/categories block, so its cells are `li` rather than
 * the `a` the switcher still uses — hence the split selectors below. The `a`
 * carries only the link text; the ordinal is generated on the `li`.
 */
/* `--dl-line`, not `--dl-ink`: the rule above the grid is one of its own
   dividers, so it reads at the same weight as the ones between the cells
   rather than as a section rule. Same correction `.dl-topic-grid` took. */
.dl-topic-index > ul, .dl-topic-switcher > div { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--dl-line); }
.dl-topic-index > ul { margin: 0; padding: 0; list-style: none; counter-reset: topics; }
.dl-topic-index li { display: block; min-height: 130px; padding: 24px; counter-increment: topics; }
.dl-switcher-all, .dl-topic-switcher li { display: block; min-height: 130px; padding: 24px; }
.dl-topic-switcher a { text-decoration: none; }
.dl-topic-index li a { text-decoration: none; }
.dl-topic-index li::before { color: var(--dl-blue); font-size: 10px; font-weight: 600; content: counter(topics, decimal-leading-zero); }
.dl-switcher-label { display: block; margin-bottom: 18px; color: var(--dl-blue); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.dl-topic-switcher > div { grid-template-columns: repeat(5,1fr); }
.dl-switcher-all, .dl-topic-switcher li { min-height: auto; }
.dl-article-mast { padding-block: 100px 80px; }
.dl-article-mast .dl-meta { display: flex; justify-content: space-between; }
.dl-article-mast h1 { max-width: 1050px; margin: 28px 0; line-height: .96; letter-spacing: -.05em; }
.dl-article-mast .wp-block-post-excerpt { max-width: 760px; }
.dl-article-hero img { max-height: 820px; object-fit: cover; }
.dl-article-body { padding-block: 90px; }
.dl-article-body > * { max-width: 760px; }
.dl-single .dl-article-body > * { margin-block: 0; }
.dl-single .dl-article-body > * + * { margin-block-start: 1.5em; }
.dl-article-body p { font-size: 20px; line-height: 1.75; }
.dl-single .dl-article-body h2 { margin-top: 2.2em; font-size: clamp(40px,5vw,64px); line-height: 1.02; }
.dl-related { padding-block: 90px; border-top: 1px solid var(--dl-line); }
.dl-related > h2 { max-width: 760px; margin: 0 0 55px; line-height: 1; }
.dl-related .wp-block-post-template { display: grid; grid-template-columns: repeat(3,1fr); margin: 0; padding: 0; }
.dl-related-card { min-height: 320px; padding: 30px; border-top: 1px solid var(--dl-line); border-right: 1px solid var(--dl-line); }
.dl-newsletter { display: grid; grid-template-columns: 1fr; min-height: 570px; background: var(--dl-mint); }
.dl-newsletter__art { min-height: 430px; background: url("assets/images/newsletter-printer-cat.png") center / cover no-repeat; }
.dl-newsletter__copy { align-self: center; max-width: 600px; padding: 60px 17px; }
.dl-newsletter__copy h2 { font-size: clamp(42px,5vw,70px); line-height: 1; }
.dl-about-page-hero, .dl-about-story, .dl-about-beliefs > div { width: min(1220px, calc(100% - 64px)); margin: auto; }
.dl-about-page-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 640px; align-items: center; }
.dl-about-page-hero h1 { margin: 28px 0; font-size: clamp(64px,8vw,110px); line-height: .94; }
.dl-about-page-hero__copy > p:last-child { max-width: 620px; font-size: 22px; }
/*
 * The hero cat is a core/image block, so this box only frames it: the flex
 * centring reproduces what `background-position` used to do, and the img width
 * below reproduces `background-size`.
 */
.dl-about-page-cat { display: flex; min-height: 560px; margin: 0; align-items: center; justify-content: center; }
.dl-about-story { position: relative; display: grid; grid-template-columns: 1fr 2fr; gap: 50px; padding-block: 110px 180px; }
.dl-about-story h2 { margin: 0 0 48px; font-size: clamp(54px,7vw,90px); line-height: .95; }
.dl-about-story__copy { columns: 2; column-gap: 50px; }
.dl-about-story__copy p { margin-top: 0; break-inside: avoid; }
/*
 * Decorative yarn cat. A pseudo-element rather than a block: it bleeds past the
 * section's left edge, which a section background-image would clip, and it is
 * decoration with nothing to announce. Keeping it out of the content also keeps
 * an empty core/html block out of the page editor, where the sandboxed preview
 * iframe never receives theme styles and the block collapses to zero height.
 *
 * `::before`, not `::after`: the editor paints every block's selection outline
 * with `::after` — `.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after`
 * is (0,3,1) and sets `inset: 0`, so an `::after` decoration on a block jumps to
 * cover the whole block the moment it is clicked. Only two editor rules touch
 * block `::before`, both narrowly scoped, so it is safe territory.
 */
.dl-about-story::before { position: absolute; left: min(-12vw,-80px); bottom: -20px; width: 390px; height: 260px; background: url("assets/images/about-playful-yarn-cat-mark.png") left bottom / contain no-repeat; content: ""; }
.dl-about-beliefs { padding-block: 110px; background: var(--dl-sky); }
.dl-about-beliefs h2 { max-width: 860px; font-size: clamp(54px,7vw,90px); line-height: .95; }
.dl-belief-grid { display: grid; grid-template-columns: 1fr; margin-top: 70px; border-top: 1px solid var(--dl-ink); counter-reset: beliefs; }
.dl-belief-grid article { min-height: 260px; padding: 28px; border-right: 1px solid rgba(16,35,54,.2); counter-increment: beliefs; }
.dl-belief-grid article:last-child { border-right: 0; }
/*
 * Ordinals are generated, not authored — they follow card order, so reordering
 * or adding a card renumbers on its own. Mirrors `.dl-archive-row::before`.
 */
.dl-belief-grid article::before { color: var(--dl-blue); font-size: 10px; font-weight: 600; letter-spacing: 1.4px; content: counter(beliefs, decimal-leading-zero); }

@media (min-width: 680px) {
  .dl-newsletter { grid-template-columns: 1fr 1fr; }
  .dl-newsletter__art { min-height: 0; }
  .dl-newsletter__copy { padding: 70px; }
  .dl-belief-grid { grid-template-columns: repeat(3,1fr); }
}

/* Final prototype parity: archives, articles, About, editor and mobile menu. */
.dl-archive-page + .dl-contact-scene,
.dl-about-page + .dl-contact-scene,
.dl-single + .dl-contact-scene { margin-block-start: 0 !important; }

.dl-archive-hero { padding: 65px 0 72px; background: var(--dl-sky); }
.dl-archive-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  width: calc(100% - 34px);
  min-height: 0;
  margin: auto;
  padding: 0;
}
.dl-archive-hero__copy h1,
.dl-archive-hero__copy .wp-block-query-title {
  max-width: 900px;
  margin: 0;
  font-size: 50px !important;
  line-height: .94;
  letter-spacing: -2.5px;
}
.dl-archive-hero__copy > p,
.dl-archive-hero__copy .wp-block-term-description {
  max-width: 690px;
  margin: 30px 0 0;
  font-size: 18px;
  line-height: 1.55;
}
/*
 * Stacked, the reserved space sits below the copy instead of beside it, so the
 * art box is anchored to that band rather than riding up over the italic aside.
 * The box height is the band plus the 55px it drops past it, so its top edge
 * lands exactly on the bottom of the copy — the band and the art cannot drift
 * apart. The hero keeps 72px of bottom padding below the grid, of which the art
 * reclaims 55px, so it sits 17px up from the hero's bottom edge and bleeds 11px
 * past its right edge (17px grid gutter, 28px of overhang).
 */
.dl-writing-archive-hero .dl-archive-hero__grid { padding-right: 0; padding-bottom: 205px; }
.dl-writing-archive-hero .dl-archive-hero__grid::before {
  position: absolute;
  right: -32px;
  bottom: -65px;
  width: 320px;
  height: 270px;
  min-height: 0;
}
/*
 * The topic cat is background decoration, not foreground artwork, so the hero
 * paints it as its own background image — no extra element, no pseudo-element.
 * It is confined to the gutter the hero grid reserves for it: one custom
 * property drives both the reserved gutter and the art box, so the two cannot
 * drift apart at any viewport width.
 *
 * --dl-topic-art-w does by hand what `background-size: contain` would do
 * inside that box: the fitted width is the box width, or the width the box
 * height allows at this cat's intrinsic ratio, whichever is smaller. Paired
 * with `auto` height it reproduces the box fit exactly for every category.
 */
.dl-topic-archive-hero {
  --dl-topic-art-band: 205px;
  --dl-topic-art-gutter: min(350px, 28vw);
  --dl-topic-art-box-w: 290px;
  --dl-topic-art-box-h: calc(var(--dl-topic-art-band) + 55px);
  --dl-topic-art-ratio: 962 / 854;
  --dl-topic-art-w: min(var(--dl-topic-art-box-w), calc(var(--dl-topic-art-box-h) * var(--dl-topic-art-ratio)));
  background-color: var(--dl-sky);
  background-image: url("assets/images/topic-tech-cat.png");
  background-repeat: no-repeat;
  background-position: right -11px bottom 17px;
  background-size: var(--dl-topic-art-w) auto;
}
/* Each cat carries its own intrinsic ratio so the box fit stays exact. */
.category-building-learning .dl-topic-archive-hero { --dl-topic-art-ratio: 750 / 848; background-image: url("assets/images/topic-building-cat.png"); }
.category-life-in-progress .dl-topic-archive-hero { --dl-topic-art-ratio: 1249 / 1009; background-image: url("assets/images/topic-life-cat.png"); }
.category-then-and-now .dl-topic-archive-hero { --dl-topic-art-ratio: 1009 / 782; background-image: url("assets/images/topic-then-now-cat.png"); }
.dl-topic-archive-hero .dl-archive-hero__grid { padding-right: 0; padding-bottom: var(--dl-topic-art-band); }
/*
 * The topic aside is the hero grid's own `::after`, not an element. It held no
 * markup — every line below is generated from the category on `<body>` — so as
 * an empty `<aside>` it was a blank block in the editor with a layout picker in
 * it, the same objection that moved the About hero cat out of the content.
 * `::after` rather than `::before` so it stays the last grid item; the writing
 * hero's cat has already taken `::before` on this grid.
 */
.dl-topic-archive-hero .dl-archive-hero__grid::after {
  grid-column: 1;
  max-width: 520px;
  margin-top: 20px;
  padding-top: 22px;
  border-top: 1px solid var(--dl-line);
  content: "";
  font-size: 17px;
  font-style: italic;
  line-height: 1.5;
}
.category-technology-ai .dl-topic-archive-hero .dl-archive-hero__grid::after { content: "Trying the new stuff without pretending it explains everything."; }
.category-building-learning .dl-topic-archive-hero .dl-archive-hero__grid::after { content: "Make a thing. Break a thing. Write down what happened."; }
.category-life-in-progress .dl-topic-archive-hero .dl-archive-hero__grid::after { content: "No finished version. The cat has reviewed the paperwork."; }
.category-then-and-now .dl-topic-archive-hero .dl-archive-hero__grid::after { content: "Old web memories, new web questions, same questionable passwords."; }
.dl-topic-eyebrow { font-size: 0; }
.dl-topic-eyebrow::before { font-size: 11px; letter-spacing: 1.5px; }
.category-technology-ai .dl-topic-eyebrow::before { content: "01 / Topic / one thread"; }
.category-building-learning .dl-topic-eyebrow::before { content: "02 / Topic / one thread"; }
.category-life-in-progress .dl-topic-eyebrow::before { content: "03 / Topic / one thread"; }
.category-then-and-now .dl-topic-eyebrow::before { content: "04 / Topic / one thread"; }
.dl-archive-list { width: calc(100% - 34px); padding: 25px 0 80px; }
.dl-archive-row {
  grid-template-columns: 34px 1fr 20px;
  gap: 10px;
  min-height: 0;
  align-items: start;
  padding: 32px 0;
}
.dl-archive-row::before { padding-top: 6px; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; }
.dl-archive-copy .dl-meta { letter-spacing: 1.15px; }
.dl-archive-copy .dl-meta time { opacity: .6; }
.dl-archive-copy h2,
.dl-archive-copy .wp-block-post-title {
  max-width: none;
  margin: 15px 0 12px;
  font-size: 30px !important;
  line-height: 1.03;
  letter-spacing: -1.5px;
}
.dl-archive-copy .wp-block-post-excerpt { max-width: 680px; font-size: 17px; line-height: 1.5; }
.dl-archive-arrow { width: 22px; height: 22px; align-self: start; justify-self: center; margin-top: 46px; }
.dl-topic-index { width: calc(100% - 34px); margin: 0 auto; padding: 0 0 80px; }
.dl-topic-index > ul { margin-top: 26px; }
/* Lock the label line box so the mobile body size bump cannot shift the card title. */
.dl-topic-index li,
.dl-belief-grid article { font-size: 16px; line-height: 1.5; }
.dl-topic-index li { position: relative; min-height: 155px; padding: 18px; border-right: 1px solid var(--dl-line); }
.dl-topic-index li:last-child { border-right: 0; }
.dl-topic-index li a { display: block; margin-top: 32px; color: inherit; font-family: "Fraunces", Georgia, serif; font-size: 19px; font-weight: 500; line-height: 1.1; }
/* The whole cell was the link before the block took over the markup; this keeps
   the full target clickable, above the arrow so no corner is dead. */
.dl-topic-index li a::before { position: absolute; z-index: 1; inset: 0; content: ""; }
.dl-topic-index li::after {
  position: absolute;
  right: 22px;
  bottom: 22px;
  width: 22px;
  height: 22px;
  background: rgba(16,35,54,.38);
  content: "";
  -webkit-mask: url("assets/icons/arrow-up-right.svg") center / contain no-repeat;
  mask: url("assets/icons/arrow-up-right.svg") center / contain no-repeat;
}
/*
 * Two topic cells per row until 900px. Four across held all the way down at
 * one point, and by 700px the cells were 150px wide: "Building & Learning"
 * broke over three lines and ran into the arrow `li::after` pins to the
 * bottom-right corner.
 *
 * `minmax(0, 1fr)` rather than `1fr`, whose auto floor let the longest word in
 * a cell widen its whole column — at 700px the first column measured 170px
 * against 150px for the other three.
 */
.dl-topic-index > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* The divider belongs between the pair, never against the outer edge, and every
   row after the first needs its own rule above it. Written against `2n`/`n+3`
   rather than fixed positions so adding a topic still lands. */
.dl-topic-index li:nth-child(2n) { border-right: 0; }
.dl-topic-index li:nth-child(n+3) { border-top: 1px solid var(--dl-line); }
/*
 * The thread switcher is a scroll strip until 900px. Its wide layout is a
 * `170px repeat(5, 1fr)` grid, and `1fr` floors at the cell's min-content:
 * below about 780px the columns stopped shrinking, the row grew past its own
 * container, and the last thread was simply clipped. Fixed-width cells that
 * scroll fit any number of threads instead of squeezing them.
 *
 * The label sits outside the row here because the wide label lives in
 * `> div::before`, which is a grid cell; in a scrolling flex row it would
 * scroll away with everything else.
 */
.dl-topic-switcher { width: 100%; margin: 0; overflow: visible; border-top: 0; }
.dl-switcher-label {
  display: block;
  width: calc(100% - 34px);
  color: var(--dl-blue);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
/* Band carried so the margin outranks core's flow-layout `margin-block: 0`,
   which is also (0,1,0) and wins in the editor, where core is injected last. */
.dl-topic-switcher .dl-switcher-label { margin: 10px auto; }
.dl-topic-switcher > div {
  display: flex;
  grid-template-columns: 170px repeat(5, 1fr);
  width: 100%;
  min-width: 0;
  min-height: 72px;
  margin: 0;
  overflow-x: auto;
  border-top: 1px solid var(--dl-line);
  align-items: stretch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.dl-topic-switcher > div::-webkit-scrollbar { display: none; }
.dl-topic-switcher > div::before {
  display: none;
  align-self: center;
  color: var(--dl-blue);
  content: none;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.dl-switcher-all, .dl-topic-switcher li {
  display: flex;
  flex: 0 0 180px;
  gap: 11px;
  min-width: 180px;
  min-height: 72px;
  align-items: center;
  padding: 0 14px;
  border-top: 0;
  border-left: 1px solid var(--dl-line);
  font-family: "Fraunces", Georgia, serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  scroll-snap-align: start;
}
.dl-switcher-all::before, .dl-topic-switcher li::before {
  color: var(--dl-blue);
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 9px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 1px;
}
/*
 * `display: contents` drops the block's own `ul` box so its `li` become items of
 * the switcher row directly, alongside the fixed "All writing" anchor — the row
 * stays one grid (or one flex line on mobile) rather than two nested ones.
 */
.dl-switcher-list { counter-reset: threads; }
.dl-switcher-list > ul { display: contents; }
.dl-topic-switcher li { counter-increment: threads; }
.dl-switcher-all::before { content: "00"; }
.dl-topic-switcher li::before { content: counter(threads, decimal-leading-zero); }
/* The `li` is the cell, so stretch its link across it to keep the whole target. */
.dl-topic-switcher li a { position: static; color: inherit; }
.dl-topic-switcher li a::before { position: absolute; inset: 0; content: ""; }
.dl-topic-switcher li { position: relative; }
/*
 * "All writing" is a paragraph carrying a link rather than the bare `<a>` it
 * used to be — a loose anchor is raw HTML, and the switcher is a block now. The
 * paragraph is the cell and the anchor stretches over it, same as the `li`.
 */
.dl-switcher-all { position: relative; margin: 0; }
.dl-switcher-all a { position: static; color: inherit; }
.dl-switcher-all a::before { position: absolute; inset: 0; content: ""; }
/* `current-cat` is added by wp_list_categories() on the archive being viewed,
   so the active thread no longer needs a hardcoded selector per category. */
.dl-topic-switcher li.current-cat { background: rgba(185,217,232,.42); }

.dl-article-mast {
  width: 100%;
  max-width: none !important;
  margin: auto !important;
  padding: 62px 17px 38px;
}
.dl-article-mast h1,
.dl-article-mast .wp-block-post-title {
  max-width: 1050px;
  margin: 24px 0 22px;
  font-size: clamp(50px,15vw,68px) !important;
  line-height: .92;
  letter-spacing: -3px;
}
.dl-article-mast .wp-block-post-excerpt { max-width: 620px; margin: 0; font-size: 19px !important; line-height: 1.45; }
/* The mast metadata reads as one eyebrow line, not a spread-out row. */
.dl-article-mast .dl-meta { justify-content: flex-start; gap: 0; font-size: 11px; letter-spacing: 1.5px; }
.dl-article-mast .dl-meta > * + *::before { content: "/"; margin-inline: .5em; }
.dl-article-mast .dl-meta time { color: inherit; opacity: 1; }
/* Band carried so the offset outranks core's flow-layout margin reset, which
   now applies because the mast is a real group block. */
.dl-article-mast .dl-read-time { margin: 28px 0 0; color: var(--dl-blue); font-size: 10px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; }
.dl-read-time::before { content: "◷  "; }
.dl-article-hero { width: 100%; height: 390px; margin-bottom: 0 !important; }
.dl-article-hero img { width: 100%; height: 100%; min-height: 0; max-height: none; object-fit: cover; object-position: 43% center; }
.dl-article-body {
  width: calc(100% - 34px);
  max-width: none !important;
  margin: auto;
  padding: 54px 0 75px;
  font-size: 18px;
  line-height: 1.65;
}
.dl-article-body > * { max-width: none; }
.dl-article-body p,
.dl-article-body li { font-size: 19px; line-height: 1.6; }
/* Carries the band so the paragraph rhythm outranks core's flow-layout
   `margin-block: 0`, which is also (0,1,0). Without it the article body
   loses every gap in the editor, where core is injected last. */
.dl-single .dl-article-body > * + * { margin-block-start: 28px; }
/*
 * One size at every width. The old sheet also carried
 * `.dl-article-body h2 { font-size: 36px !important }` below 680px, but that is
 * (0,1,1) against this rule's (0,2,1) and never won — the heading has always
 * been 42px on a phone. Dropped rather than preserved.
 */
.dl-single .dl-article-body h2 {
  margin-top: 52px;
  font-size: 42px !important;
  line-height: 1.05;
  letter-spacing: -1.6px;
}
.dl-single .dl-article-body h2 + * { margin-block-start: 18px; }
.dl-article-body ul,
.dl-article-body ol { padding-left: 20px; }
.dl-article-body li { margin: 8px 0; padding-left: 7px; }
.dl-article-body li::marker { color: var(--dl-blue); }
.dl-single .dl-article-body blockquote { margin: 34px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--dl-blue); color: var(--dl-blue); }
.dl-article-body blockquote,
.dl-article-body blockquote p { font-size: 22.5px; line-height: 1.45; }
.dl-related { width: calc(100% - 34px); max-width: none !important; margin: auto !important; padding: 0 0 76px; border-top: 0; }
.dl-related > h2 { max-width: none; margin: 0 0 34px; font-size: 38px !important; line-height: .98; letter-spacing: -1px; text-align: left; }
.dl-related > .wp-block-query,
.dl-related .wp-block-post-template { width: 100% !important; max-width: none !important; margin-inline: 0 !important; }
.dl-related .wp-block-post-template { grid-template-columns: 1fr; border-top: 1px solid var(--dl-line); }
.dl-related-card { min-height: 160px; padding: 22px 0; border-top: 0; border-right: 0; border-bottom: 1px solid var(--dl-line); }
.dl-related .wp-block-post:last-child .dl-related-card { border-right: 0; }
.dl-related-card .wp-block-post-title { margin: 0; color: var(--dl-blue); font-size: 20px !important; line-height: 1.15; }
.dl-related-card .wp-block-post-title a { color: inherit; }
.dl-related-card .dl-meta { margin-top: 14px; font-size: 9px; letter-spacing: 1px; }
.dl-related-card .dl-meta > * + *::before { content: "/"; margin-inline: .5em; }
.dl-related-card .dl-meta time { color: inherit; opacity: 1; }
.dl-related-card .wp-block-post-excerpt { margin: 14px 0; font-size: 14px; line-height: 1.45; }
.dl-related-card .dl-under-link {
  display: inline-flex;
  gap: .32em;
  align-items: center;
  margin-top: 0;
  padding-bottom: 0;
  border-bottom: 0;
  color: var(--dl-ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
}
.dl-related-card .dl-under-link::after {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  background: currentColor;
  content: "";
  -webkit-mask: url("assets/icons/arrow-right.svg") center / contain no-repeat;
  mask: url("assets/icons/arrow-right.svg") center / contain no-repeat;
}

.dl-contact-scene .dl-invitation__inner {
  width: min(1220px, calc(100% - 64px)) !important;
  max-width: none !important;
  margin: auto !important;
}
.dl-contact-scene .dl-invitation__inner { width: 100% !important; margin-inline: 0 !important; }
.dl-newsletter-note { max-width: 560px; margin: 22px 0 0; font-size: 17px; line-height: 1.55; }
.dl-newsletter-form { display: grid; grid-template-columns: 1fr; gap: 12px; max-width: 580px; margin-top: 34px; }
.dl-newsletter-form input,
.dl-newsletter-form button { padding: 13px 2px; border: 0; border-bottom: 1px solid var(--dl-ink); border-radius: 0; background: transparent; color: var(--dl-ink); font: 600 11px/1.2 "DM Sans", sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.dl-newsletter-form button { display: inline-flex; gap: .32em; align-items: center; justify-self: start; cursor: pointer; }
.dl-newsletter-secondary { margin: 18px 0 0; font-size: 13px; opacity: .72; }
.dl-newsletter-secondary a { border-bottom: 1px solid rgba(16,35,54,.45); }
.dl-newsletter-scene .dl-invitation__copy { padding-bottom: 118px; }
.dl-newsletter-scene .dl-contact-foreground { right: -70px; bottom: 154px; width: 590px; aspect-ratio: 3 / 2; background-image: url("assets/images/newsletter-printer-cat.png"); }

.dl-about-page-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
  width: calc(100% - 34px);
  min-height: auto;
  margin: auto;
  padding-top: 65px;
  align-items: center;
}
.dl-about-page { background: var(--dl-paper); }
.dl-about-page-hero { position: relative; z-index: 0; }
.dl-about-page-hero::before { position: absolute; z-index: -1; inset-block: 0; left: 50%; width: 100vw; background: var(--dl-sky); content: ""; transform: translateX(-50%); }
.dl-about-page :where(.dl-eyebrow) { margin: 0; letter-spacing: 1.5px; }
.dl-about-page-hero h1 { max-width: 720px; margin: 24px 0 26px; font-size: 54px; line-height: .93; letter-spacing: -4.5px; }
.dl-about-page-hero__copy > p:last-child { max-width: 610px; margin: 0; font-size: 19px; line-height: 1.5; }
.dl-about-page-cat { min-height: 350px; align-self: stretch; align-items: flex-end; }
.dl-about-page-cat img { width: 82%; height: auto; }
.dl-about-story {
  grid-template-columns: none;
  gap: 0;
  width: calc(100% - 34px);
  padding: 78px 0;
  background: var(--dl-paper);
}
.dl-about-story > div { display: grid; grid-template-columns: 1fr; gap: 30px; margin-top: 28px; }
.dl-about-story h2,
.dl-about-beliefs h2,
.dl-about-now h2 { margin: 0; font-size: 46px; line-height: .98; letter-spacing: -3px; }
.dl-about-story__copy { max-width: 590px; columns: 1; font-size: 19px; line-height: 1.65; }
.dl-about-story__copy p { margin: 0 0 28px; }
.dl-about-story__copy p:last-child { margin-bottom: 0; }
.dl-about-story__copy p:first-child { font-size: 21px; line-height: 1.45; }
/*
 * Stacked, the cat drops into normal flow, where its height sets the gap below
 * the copy and the -48px pull-up tightens it again. Core's flow-layout
 * `:where(.is-layout-flow) > :last-child { margin-block-end: 0 }` cannot reach
 * a pseudo-element, so no specificity workaround is needed here.
 *
 * `order` because this is the only layout where the cat is in flow: as a
 * ::before it would otherwise be laid out first, above the eyebrow.
 */
.dl-about-story::before { position: relative; order: 99; left: -17px; bottom: auto; width: 320px; max-width: calc(100vw - 8px); height: auto; margin: 42px 0 -48px; aspect-ratio: 3 / 2; }
.dl-about-beliefs { padding: 78px 0; background: var(--dl-ink); color: var(--dl-paper); }
.dl-about-beliefs > div { width: calc(100% - 34px); }
.dl-about-beliefs header { display: grid; grid-template-columns: 1fr; gap: 30px; }
.dl-about-beliefs .dl-eyebrow { color: var(--dl-mint); }
/* Band carried for the same reason as `.dl-under-link` above: beat core's
   (0,1,0) flow-layout margin reset instead of relying on stylesheet order. */
.dl-about-beliefs .dl-belief-grid { grid-template-columns: 1fr; margin-top: 48px; border-color: rgba(245,248,246,.35); }
.dl-belief-grid article { min-height: 310px; padding: 30px 35px 30px 0; border-color: rgba(245,248,246,.2); }
.dl-belief-grid article + article { padding-left: 35px; }
.dl-belief-grid article,
.dl-belief-grid article + article { min-height: auto; padding: 28px 0 36px; border-right: 0; border-bottom: 1px solid rgba(245,248,246,.2); }
.dl-belief-grid article::before { color: var(--dl-mint); }
/*
 * Selector carries the band so it outranks core's
 * `:root :where(.is-layout-flow) > :first-child { margin-block-start: 0 }`
 * (0,2,0). The heading became the card's first element child once the numeral
 * moved to `article::before`, and a pseudo-element cannot take `:first-child`
 * off it. Without this the cards lose their heading offset.
 */
.dl-about-beliefs .dl-belief-grid h3 { margin: 28px 0 14px; font-size: 30px; line-height: 1.08; }
.dl-belief-grid p { max-width: 330px; margin: 0; color: #c6d0d6; font-size: 15px; line-height: 1.65; }
.dl-about-now { display: grid; grid-template-columns: 1fr; gap: 30px; width: calc(100% - 34px); margin: auto; padding: 78px 0 84px; background: var(--dl-paper); }
.dl-about-now > div > p:not(.dl-under-link) { max-width: 650px; margin: 28px 0 0; font-size: 19px; line-height: 1.55; }

@media (min-width: 680px) {
  .dl-archive-hero { padding: 98px 0 105px; }
  .dl-archive-hero__grid { grid-template-columns: 1fr 2fr; gap: 50px; width: min(1220px, calc(100% - 64px)); }
  .dl-archive-hero__copy h1,
  .dl-archive-hero__copy .wp-block-query-title { font-size: clamp(58px, 6vw, 92px) !important; letter-spacing: -4px; }
  .dl-archive-hero__copy > p,
  .dl-archive-hero__copy .wp-block-term-description { font-size: 21px; }
  .dl-writing-archive-hero .dl-archive-hero__grid { padding-right: min(390px, 31vw); padding-bottom: 0; }
  .dl-writing-archive-hero .dl-archive-hero__grid::before { right: -35px; bottom: -110px; width: min(470px, 37vw); height: 390px; }
  /*
   * Side by side, the art sits in the gutter the grid reserves beside the copy,
   * and the offset is measured from the hero's right edge to match the box's
   * anchor — 45px past the grid's right edge. Wide enough for the 1220px grid
   * to stop growing, that lands at (hero / 2 - 655px): the 50% resolves against
   * (hero width - image width), and adding back half the image width cancels
   * the image term, leaving the grid's own centring gutter minus the 45px
   * bleed. Narrower than that the grid gutter is a flat 32px, so the offset
   * settles at -13px. A percentage rather than 100vw because 100vw counts a
   * classic scrollbar the grid's own width does not, which would slide the cat
   * left into the text column on those platforms.
   */
  .dl-topic-archive-hero {
    --dl-topic-art-box-w: calc(var(--dl-topic-art-gutter) + 45px);
    --dl-topic-art-box-h: 430px;
    background-position: right max(-13px, calc(50% - 655px + var(--dl-topic-art-w) / 2)) bottom 0;
  }
  .dl-topic-archive-hero .dl-archive-hero__grid { padding-right: var(--dl-topic-art-gutter); padding-bottom: 0; }
  .dl-topic-archive-hero .dl-archive-hero__grid::after { grid-column: 2; }
  .dl-archive-list { width: min(1220px, calc(100% - 64px)); padding-bottom: 120px; }
  .dl-archive-row { grid-template-columns: 58px 1fr 30px; gap: 28px; padding: 42px 0; }
  .dl-archive-copy h2,
  .dl-archive-copy .wp-block-post-title { font-size: clamp(31px, 3.2vw, 48px) !important; }
  .dl-archive-arrow { margin-top: 50px; }
  .dl-topic-index { width: min(1220px, calc(100% - 64px)); padding-bottom: 120px; }
  .dl-topic-index li { min-height: 180px; padding: 24px; }
  .dl-topic-index li a { margin-top: 42px; font-size: 22px; }
  .dl-switcher-label { width: calc(100% - 64px); }

  .dl-article-mast { width: min(1220px, calc(100% - 64px)); padding: 88px 32px 48px; }
  .dl-article-mast h1,
  .dl-article-mast .wp-block-post-title { font-size: clamp(62px, 6vw, 92px) !important; letter-spacing: -4.5px; }
  .dl-article-mast .wp-block-post-excerpt { font-size: 22px !important; }
  .dl-article-hero { height: 560px; }
  .dl-article-hero img { object-position: center; }
  .dl-article-body { width: min(680px, calc(100% - 64px)); padding: 70px 0 105px; }
  .dl-article-body p,
  .dl-article-body li { font-size: 18px; line-height: 1.65; }
  .dl-article-body blockquote,
  .dl-article-body blockquote p { font-size: 22px; }
  .dl-related { width: min(1220px, calc(100% - 64px)); padding: 15px 0 105px; }
  .dl-related > h2 { font-size: 36px !important; text-align: center; }
  .dl-related .wp-block-post-template { grid-template-columns: repeat(4, 1fr); }
  .dl-related-card { min-height: 190px; padding: 24px; border-right: 1px solid var(--dl-line); border-bottom: 0; }
  .dl-contact-scene .dl-invitation__inner { width: min(1220px, calc(100% - 64px)) !important; margin-inline: auto !important; }
  .dl-newsletter-form { grid-template-columns: minmax(220px,1fr) auto; gap: 18px; }
  .dl-newsletter-form button { justify-self: auto; }
  .dl-newsletter-scene .dl-invitation__copy { padding-bottom: 92px; }
  .dl-newsletter-scene .dl-contact-foreground { right: max(32px, calc((100vw - 1220px) / 2)); bottom: 42px; width: min(820px, 58vw); }

  .dl-about-page-hero { grid-template-columns: 1.08fr .92fr; gap: 70px; width: min(1220px, calc(100% - 64px)); min-height: 650px; padding-top: 0; }
  .dl-about-page-hero h1 { font-size: clamp(58px, 5.6vw, 88px); }
  .dl-about-page-hero__copy > p:last-child { font-size: 22px; }
  .dl-about-page-cat { min-height: 560px; align-items: center; }
  .dl-about-page-cat img { width: 72%; }
  .dl-about-story { width: min(1220px, calc(100% - 64px)); padding: 120px 0; }
  .dl-about-story > div { grid-template-columns: 1fr 1fr; gap: 90px; margin-top: 34px; }
  .dl-about-story h2,
  .dl-about-beliefs h2,
  .dl-about-now h2 { font-size: clamp(46px,5vw,72px); }
  .dl-about-story__copy { columns: initial; }
  .dl-about-story__copy p:first-child { font-size: 24px; }
  .dl-about-story::before { position: absolute; order: 0; left: calc((100vw - 100%)/-2 + 10px); bottom: 22px; width: 430px; max-width: none; margin: 0; }
  .dl-about-beliefs { padding: 110px 0; }
  .dl-about-beliefs > div { width: min(1220px, calc(100% - 64px)); }
  .dl-about-beliefs header { grid-template-columns: 1fr 2fr; gap: 50px; }
  .dl-about-beliefs .dl-belief-grid { grid-template-columns: repeat(3,1fr); margin-top: 75px; }
  /*
   * Three across: the divider moves from under each card to beside it. The
   * colour is restated because the stacked rule's `border-right: 0` shorthand
   * resets it to currentColor, and currentColor here is the paper the cards are
   * written in — the divider would come back solid instead of at 20%.
   * `border-bottom` goes away by longhand for the reverse reason: its colour is
   * already right and a shorthand would throw it away.
   */
  .dl-belief-grid article,
  .dl-belief-grid article + article {
    min-height: 310px;
    padding: 30px 35px 30px 0;
    border-right: 1px solid rgba(245,248,246,.2);
    border-bottom-width: 0;
    border-bottom-style: none;
  }
  .dl-belief-grid article + article { padding-left: 35px; }
  .dl-about-beliefs .dl-belief-grid h3 { margin: 68px 0 18px; }
  .dl-about-now { grid-template-columns: 1fr 2fr; gap: 50px; width: min(1220px, calc(100% - 64px)); padding: 115px 0 125px; }
}

@media (min-width: 900px) {
  .dl-topic-index > ul { grid-template-columns: repeat(4, 1fr); }
  .dl-topic-index li:nth-child(2n) { border-right: 1px solid var(--dl-line); }
  .dl-topic-index li:last-child { border-right: 0; }
  .dl-topic-index li:nth-child(n+3) { border-top: 0; }

  /* Wide enough for six columns, so the switcher becomes the grid it was drawn
     as, the label moves back into it as `> div::before`, and the standalone
     label above the row is no longer needed. */
  .dl-topic-switcher { border-top: 1px solid var(--dl-line); }
  .dl-switcher-label { display: none; }
  .dl-topic-switcher > div {
    display: grid;
    width: min(1220px, calc(100% - 64px));
    min-height: 88px;
    margin: auto;
    overflow-x: visible;
    border-top: 0;
    scroll-snap-type: none;
    scrollbar-width: auto;
  }
  .dl-topic-switcher > div::before { display: block; content: "Choose another thread"; }
  .dl-switcher-all, .dl-topic-switcher li { flex: 0 1 auto; min-width: auto; min-height: 88px; scroll-snap-align: none; }

  .dl-article-mast { padding-inline: 120px; }
  .dl-article-hero { height: 680px; }
}

/* Editor canvas rules live in assets/css/editor.css (see functions.php). */

/*
 * Overlay menu. The one `max-width` query left in the sheet, and deliberately:
 * it styles a control that only exists below the core Navigation breakpoint.
 * Core flips the block to its desktop form at min-width:600px
 * (wp-includes/blocks/navigation/style.css: the responsive container becomes
 * display:block/position:relative and the open button becomes display:none), so
 * these rules describe a component that is gone above the bound, not a narrow
 * variant of one that stays. Written as base rules they would have to re-hide
 * core's own toggle, close button and overlay logo at 600px — the theme fighting
 * core to undo itself. The bound is core's number; the rest of the sheet steps
 * at 680px and 900px.
 *
 * `599.98`, not `599`, and it is not copied from core — core has no such number.
 * Core's mobile state is its *base* layer (`.wp-block-navigation__responsive-container-open
 * { display: flex }`), removed at `min-width: 600px`, so the width core still
 * shows its toggle at is "anything below 600", with no lower query to match.
 * This block has to name that range explicitly, and the only exact complement of
 * `>= 600` is `< 600`, which `max-width` cannot express — it can only name a
 * value. `599px` would leave a real hole: viewport widths are fractional under
 * OS display scaling and browser zoom, and 599.2 (DPR 1.25) and 599.5 (DPR 2)
 * are both reachable and would match neither query, leaving core's unstyled
 * hamburger on screen. `599.98` shrinks that hole to widths no device lattice
 * lands on — it would take a device pixel ratio above 50 to produce one.
 *
 * `@media not (min-width: 600px)` or `(width < 600px)` would close it exactly,
 * and core itself ships `@media not (prefers-reduced-motion)` in the same file.
 * Not used here: a browser that cannot parse either form drops this whole block
 * at every width, which unstyles the mobile menu on the phones that are its only
 * audience. A theoretical 0.02px hole is the cheaper failure.
 */
@media (max-width: 599.98px) {
  /* Closed state: the scratch mark, rotated 45deg like the prototype. */
  .dl-main-nav .wp-block-navigation__responsive-container-open {
    position: relative;
    display: grid;
    width: 46px;
    height: 46px;
    padding: 0;
    background: none;
    place-items: center;
  }
  .dl-main-nav .wp-block-navigation__responsive-container-open svg { display: none; }
  .dl-main-nav .wp-block-navigation__responsive-container-open::before {
    display: block;
    width: 42px;
    height: 42px;
    background: url("assets/images/about-scratches.png") center / contain no-repeat;
    content: "";
    transform: rotate(45deg);
  }

  /* Open state: full-screen paper overlay, everything optically centred. */
  .dl-main-nav .wp-block-navigation__responsive-container.is-menu-open {
    position: fixed;
    z-index: 100;
    inset: 0;
    display: grid;
    width: 100%;
    height: 100dvh;
    padding: 80px 24px;
    background-color: var(--dl-paper) !important;
    align-content: center;
    justify-items: center;
    /*
     * Core animates the open overlay with opacity + translateY(.5em) over .1s.
     * Keep the fade, drop the slide: opacity only, a touch slower so it reads
     * as a soft reveal rather than a flash. Animation, not transition — the
     * container is display:none until .is-menu-open lands.
     */
    animation: dl-menu-fade-in 200ms ease-out both;
  }
  .dl-main-nav .wp-block-navigation__responsive-dialog,
  .dl-main-nav .wp-block-navigation__responsive-container-content { width: 100%; }
  .dl-main-nav .wp-block-navigation__responsive-container-content {
    padding-top: 0 !important;
    align-items: center !important;
  }
  .dl-main-nav .wp-block-navigation__responsive-container-content::before {
    display: block;
    width: 54px;
    height: 78px;
    margin: 0 0 38px;
    background: url("assets/images/dl-blackletter-solid.png") center / contain no-repeat;
    content: "";
  }
  .dl-main-nav .wp-block-navigation__container { gap: 10px !important; align-items: center !important; }
  .dl-main-nav .wp-block-navigation-item { align-items: center !important; }
  .dl-main-nav .wp-block-navigation-item__content {
    padding: 8px 18px !important;
    font-family: "Fraunces", Georgia, serif;
    font-size: clamp(30px, 9.5vw, 42px);
    line-height: 1;
    letter-spacing: -1.2px;
    text-align: center;
    text-transform: none;
  }
  .dl-main-nav .dl-nav-note { margin-top: 22px; }
  .dl-main-nav .dl-nav-note .wp-block-navigation-item__content {
    display: inline-flex;
    gap: .32em;
    align-items: center;
    font-family: "DM Sans", Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 1.2px;
    text-transform: uppercase;
  }
  .dl-main-nav .dl-nav-note .wp-block-navigation-item__content::after {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    background: currentColor;
    content: "";
    -webkit-mask: url("assets/icons/arrow-up-right.svg") center / contain no-repeat;
    mask: url("assets/icons/arrow-up-right.svg") center / contain no-repeat;
  }

  /* Close control sits back in the masthead slot, as the scratch X. */
  .dl-main-nav .wp-block-navigation__responsive-container-close {
    position: fixed;
    top: 13px;
    right: 17px;
    display: grid;
    width: 46px;
    height: 46px;
    padding: 0;
    place-items: center;
  }
  .dl-main-nav .wp-block-navigation__responsive-container-close svg { display: none; }
  .dl-main-nav .wp-block-navigation__responsive-container-close::before {
    display: block;
    width: 31px;
    height: 31px;
    background: var(--dl-ink);
    content: "";
    -webkit-mask: url("assets/icons/scratch-close.svg") center / contain no-repeat;
    mask: url("assets/icons/scratch-close.svg") center / contain no-repeat;
  }

  /*
   * Logged in, the admin bar is position:absolute at this width, so it scrolls
   * away with the document. Insetting the overlay under it would leave a 46px
   * hole once scrolled, so the overlay covers it instead (core's own z-index).
   * Core also pushes the dialog down 46px when the modal is open, which would
   * throw off the optical centring — neutralise it.
   */
  .dl-main-nav .wp-block-navigation__responsive-container.is-menu-open { z-index: 100000; }
  .admin-bar .dl-main-nav .wp-block-navigation__responsive-dialog { margin-top: 0 !important; }
}

@keyframes dl-menu-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Same selector as the open state, declared later, so it wins the override. */
@media (max-width: 599.98px) and (prefers-reduced-motion: reduce) {
  .dl-main-nav .wp-block-navigation__responsive-container.is-menu-open { animation: none; }
}

/* ==========================================================================
 * Interaction states
 *
 * One convention, applied everywhere: a link sitting in ink turns blue, and a
 * link already set in blue turns ink. The reverse pair keeps the change legible
 * in both directions without introducing a third colour.
 *
 * theme.json already declares that convention for the light half
 * (`elements.link` plus its `:hover`), but it lands as
 * `:root :where(a:where(:not(.wp-element-button)):hover)`, which is (0,1,0)
 * because `:where()` contributes nothing. Every component below sets `color`
 * on its own anchor — usually `inherit`, to pull a panel or card colour
 * through — and each of those selectors outranks (0,1,0). The result was that
 * the global hover survived only on the anchors no component had touched, so
 * "Read the essay", "More about me", "Back to top", the topic index, the
 * thread switcher and the related cards had no hover at all. These rules
 * restate the convention at the specificity each component actually needs;
 * they are not a second design, just the first one reaching its targets.
 *
 * `:focus-visible` is paired with every `:hover` so a keyboard reaches the
 * same state, and the shared outline below carries the non-colour half of the
 * signal. Colour alone is never the only cue.
 * ========================================================================== */

/*
 * Keyboard focus. `outline` rather than a border or a shadow: it is painted
 * outside the box and cannot move a neighbour, so nothing reflows. The offset
 * keeps it clear of the 1px underline `.dl-under-link a` already carries.
 */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--dl-blue);
  outline-offset: 3px;
}
/*
 * The About panel is ink, where blue reaches only 4.3:1. Sky is the same
 * family two steps lighter and clears 12:1 on that ground.
 */
.dl-about a:focus-visible { outline-color: var(--dl-sky); }

/*
 * 150ms is long enough to read as a fade and short enough that the pointer
 * never waits on it. Only colour-ish properties are listed, so nothing here
 * can move a box; the one transform belongs to the arrows below, which
 * already animated instantly before this file gave them a duration.
 */
a,
button,
.dl-topic,
.dl-story-arrow,
.dl-archive-arrow,
.dl-topic__go,
.dl-topic-index li::after {
  transition: color .15s ease, background-color .15s ease, border-color .15s ease, transform .15s ease;
}

@media (prefers-reduced-motion: reduce) {
  a,
  button,
  .dl-topic,
  .dl-story-arrow,
  .dl-archive-arrow,
  .dl-topic__go,
  .dl-topic-index li::after { transition: none; }
}

/* --- ink -> blue ------------------------------------------------------- */

/* Homepage "Read the essay". Its underline is `currentColor`, so it follows. */
.dl-featured-query .wp-block-read-more.dl-under-link:hover,
.dl-featured-query .wp-block-read-more.dl-under-link:focus-visible { color: var(--dl-blue); }

/* Footer "Back to top". `color: inherit` on the anchor was shadowing the global rule. */
.dl-footer__top a:hover,
.dl-footer__top a:focus-visible { color: var(--dl-blue); }

/* "Keep following the thread" — the read-more under each related card. */
.dl-related-card .dl-under-link:hover,
.dl-related-card .dl-under-link:focus-visible { color: var(--dl-blue); }

/*
 * "Browse by thread" and the thread switcher. Both stretch their anchor over
 * the whole cell with an inset `::before`, so the cell is the hover target and
 * the rule reads from the cell down to the link it contains.
 */
.dl-topic-index li:hover a,
.dl-topic-index li:focus-within a { color: var(--dl-blue); }
.dl-topic-index li:hover::after,
.dl-topic-index li:focus-within::after { background: var(--dl-blue); }

.dl-topic-switcher li:hover a,
.dl-topic-switcher li:focus-within a,
.dl-switcher-all:hover a,
.dl-switcher-all:focus-within a { color: var(--dl-blue); }

/*
 * Navigation. Core sets the item colour with a doubled class,
 * `.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content`
 * (0,3,0). Doubling here too puts the hover a step above it rather than level
 * with it, so the result does not depend on which sheet loaded last.
 */
.dl-main-nav .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.dl-main-nav .wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible { color: var(--dl-blue); }

/* The newsletter button is a `button`, so no link rule ever reached it. */
.dl-newsletter-form button:hover,
.dl-newsletter-form button:focus-visible { color: var(--dl-blue); border-bottom-color: var(--dl-blue); }

/* This underline is a fixed rgba rather than `currentColor`; bring it along. */
.dl-newsletter-secondary a:hover,
.dl-newsletter-secondary a:focus-visible { border-bottom-color: var(--dl-blue); }

/* --- blue -> ink ------------------------------------------------------- */

/* Category and date lines. `.dl-meta` is blue; `.dl-meta a { color: inherit }`. */
.dl-meta a:hover,
.dl-meta a:focus-visible { color: var(--dl-ink); }

/* Related-card titles are set in blue, so they travel the other way. */
.dl-related-card .wp-block-post-title a:hover,
.dl-related-card .wp-block-post-title a:focus-visible { color: var(--dl-ink); }

/* --- paper -> sky, on the ink panel ------------------------------------ */

/*
 * Homepage "More about me". Paper on ink, so neither half of the convention
 * applies: blue would drop to 4.3:1 against this background. Sky is the same
 * hue family and stays legible, and the underline is `currentColor`.
 */
.dl-about .dl-under-link a:hover,
.dl-about .dl-under-link a:focus-visible { color: var(--dl-sky); }

/* --- arrow glyphs ------------------------------------------------------ */

/*
 * The masked arrows sit at 38% ink until their row is hovered. `.dl-story-row`
 * already did this (see the `hover: hover` block above); the archive row and
 * the topic card now match it. `:focus-within` is the keyboard equivalent of
 * hovering the row, since the arrow itself is not the thing being focused.
 */
.dl-archive-row:hover .dl-archive-arrow,
.dl-archive-row:focus-within .dl-archive-arrow { background: var(--dl-blue); }

.dl-topic:hover .dl-topic__go,
.dl-topic:focus-within .dl-topic__go { background: var(--dl-blue); }

.dl-story-row:focus-within .dl-story-arrow { background: var(--dl-blue); }

/* ==========================================================================
 * Privacy Policy title
 *
 * `.privacy-policy` is added to `body` by core for whichever page
 * `wp_page_for_privacy_policy` points at, so this follows the setting rather
 * than a post ID and survives the page being replaced.
 *
 * Scoped deliberately: `templates/page.html` is the fallback for every plain
 * page, and the rest of them keep the left-aligned mast the essays use.
 * The mast holds nothing but the title on that template, so centring the
 * container is enough; `margin-inline` re-centres the 1050px measure the
 * shared rule pins to the left edge.
 * ========================================================================== */
.privacy-policy .dl-article-mast { text-align: center; }
.privacy-policy .dl-article-mast .wp-block-post-title { margin-inline: auto; }