/*
Theme Name:  Daily Wisdom Child
Theme URI:   https://dailywisdombooks.com/
Author:      Mitra Goris
Author URI:  https://dailywisdombooks.com/mitra-goris/
Description: Child theme of GeneratePress for dailywisdombooks.com, the brand site of Daily Wisdom Books. All front-end CSS lives in this file. No build step, no preprocessor.
Template:    generatepress
Version:     0.1.0
Requires PHP: 8.2
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: daily-wisdom-child
*/

/* ==========================================================================
   Layer order. Declared once, up front, so later blocks cannot accidentally
   win on source order alone.
   ========================================================================== */

@layer tokens, fonts, base, a11y, paper, layout, header, components, footer;

/* The @font-face rules are not here. They live in fonts/fonts.css, which
   inc/enqueue.php loads only when the woff2 files are actually present. A
   @font-face pointing at a missing file costs a 404 on every page load, and
   the site currently ships on the fallback stacks by design. Drop the files
   into fonts/ and they activate on their own, with no code change. */

/* ==========================================================================
   TOKENS
   Family layer values are identical on every page. The unit layer (one accent
   per title) is set per page in PHP with an inline custom property on the
   article element, never with a class per book.
   ========================================================================== */

@layer tokens {

  :root {

    /* Paper. Measured from the brand asset, not estimated.
       Total luminance range is 9.7 of 255, under 4 percent. */
    --paper-base:  #F8F5ED;  /* global average */
    --paper-wash:  #F5F0E5;  /* darkest point of the wash */
    --paper-light: #FBFAF6;  /* lightest clearing */
    --paper-card:  rgba(255, 255, 255, .62);
    --paper-panel: #EFE9DA;

    /* Ink */
    --ink:       #1A1A1A;
    --ink-soft:  #4A4A4A;
    --ink-faint: #6B6B6B;
    --rule:      #DCD5C2;

    /* Unit layer. One accent per title, confirmed by the owner.
       Never sample these from a file. */
    --accent-buddhism: #8B0000;
    --accent-tao:      #1A5C40;
    --accent-stoicism: #5C3317;
    --accent-gita:     #A64014;

    /* The 30-Day Shift uses one accent for the whole series, never per title,
       because the Shift is one path and not a library of doors. */
    --accent-shift:    #014032;

    /* The imprint gold, sampled from the flame in the lantern mark rather than
       invented. It measures 6.3:1 against ink, which passes AA, and 2.6:1
       against the paper, which does not. So it carries text only on the dark
       ground, and on the light ground it is limited to rules and the mark. */
    --gold:      #B79858;
    --gold-soft: rgba(183, 152, 88, .28);

    /* Overridden per page from dwb_accent_color. Shared pages (home, about,
       reading lists) never set it and therefore never show an accent. */
    --accent: var(--accent-stoicism);

    /* Type families. Both are self hosted, see the fonts directory.
       The fallbacks are metric neighbours, so a missing font file degrades
       quietly rather than reflowing the page. */
    --font-display: "Glacial Indifference", "Century Gothic", "Futura", "Trebuchet MS", system-ui, sans-serif;
    --font-body: "EB Garamond", Georgia, "Iowan Old Style", "Times New Roman", serif;

    /* Scale */
    --text-sm:   clamp(0.88rem, 0.85rem + 0.15vw, 0.95rem);
    --text-base: clamp(1.05rem, 1.00rem + 0.25vw, 1.18rem);
    --text-lg:   clamp(1.20rem, 1.13rem + 0.35vw, 1.38rem);
    --text-xl:   clamp(1.45rem, 1.32rem + 0.60vw, 1.75rem);
    --text-2xl:  clamp(1.75rem, 1.55rem + 1.00vw, 2.30rem);
    --text-3xl:  clamp(2.10rem, 1.75rem + 1.70vw, 3.10rem);

    --leading-body:    1.65;
    --leading-display: 1.2;

    /* Space */
    --space-2xs: 0.25rem;
    --space-xs:  0.5rem;
    --space-sm:  0.75rem;
    --space-md:  1.25rem;
    --space-lg:  2rem;
    --space-xl:  3rem;
    --space-2xl: 4.5rem;
    --space-3xl: 7rem;

    /* Measure. 34rem holds 62 to 72 characters at our body size, which is the
       readable range. This is a site about reading. */
    --measure: 34rem;
    --wide:    72rem;
    --gutter:  clamp(1.25rem, 5vw, 2.5rem);

    /* Interaction */
    --focus-ring: 2px;
    --tap-min:    24px;  /* WCAG 2.2 target size minimum */
  }
}

/* ==========================================================================
   BASE
   ========================================================================== */

@layer base {

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

  html { -webkit-text-size-adjust: 100%; }

  body {
    background-color: var(--paper-base);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-body);
    font-synthesis-weight: none;
    text-rendering: optimizeLegibility;
  }

  /* Left aligned, never justified. Justification without hyphenation opens
     rivers of white space, the clearest visual signal of an amateur layout. */
  body,
  p, li, dd, blockquote, figcaption, td, th {
    text-align: left;
    text-wrap: pretty;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: var(--leading-display);
    color: var(--ink);
    letter-spacing: -0.01em;
    text-wrap: balance;
    margin-block: 0 var(--space-sm);
  }

  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); margin-block-start: var(--space-xl); }
  h3 { font-size: var(--text-xl); margin-block-start: var(--space-lg); }
  h4 { font-size: var(--text-lg); margin-block-start: var(--space-md); }
  h5,
  h6 { font-size: var(--text-base); margin-block-start: var(--space-md); }

  /* Paragraph spacing, not indents. */
  p {
    margin-block: 0 var(--space-md);
    text-indent: 0;
  }

  a {
    color: var(--ink);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    text-decoration-color: var(--rule);
    transition: text-decoration-color 120ms ease;
  }

  a:hover { text-decoration-color: currentColor; }

  strong, b { font-weight: 600; }

  em, i, cite { font-style: italic; }

  hr {
    border: 0;
    border-block-start: 1px solid var(--rule);
    margin-block: var(--space-xl);
  }

  img, picture, svg, video {
    max-width: 100%;
    height: auto;
  }

  ul, ol {
    margin-block: 0 var(--space-md);
    padding-inline-start: 1.4em;
  }

  li { margin-block-end: var(--space-2xs); }

  /* Real tables for anything comparative, never a styled div grid. Tables are
     among the most reliably extracted structures in retrieval, and a div grid
     is not a table to a parser. */
  table {
    inline-size: 100%;
    border-collapse: collapse;
    margin-block: var(--space-lg);
    font-size: var(--text-sm);
  }

  caption {
    caption-side: bottom;
    color: var(--ink-faint);
    font-size: var(--text-sm);
    padding-block-start: var(--space-xs);
  }

  th, td {
    text-align: left;
    padding: var(--space-sm) var(--space-md);
    border-block-end: 1px solid var(--rule);
    vertical-align: top;
  }

  th {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ink-soft);
  }

  code, pre, kbd, samp {
    font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
    font-size: 0.9em;
  }

  /* Real label elements, never placeholder only. */
  label {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    margin-block-end: var(--space-2xs);
  }

  input, textarea, select, button {
    font: inherit;
    color: inherit;
  }
}

/* ==========================================================================
   ACCESSIBILITY
   WCAG 2.2 AA is a build requirement, not a polish pass.
   ========================================================================== */

@layer a11y {

  /* Visible focus indicator on everything interactive. Never outline: none
     without a replacement. */
  :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
    outline: var(--focus-ring) solid var(--ink);
    outline-offset: 3px;
    border-radius: 2px;
  }

  /* Target size, a WCAG 2.2 addition. Applies to standalone controls, not to
     links inside a sentence, which are exempt. */
  .dwb-nav a,
  .dwb-footer a,
  .dwb-button {
    min-block-size: var(--tap-min);
    min-inline-size: var(--tap-min);
    display: inline-flex;
    align-items: center;
  }

  .screen-reader-text,
  .dwb-visually-hidden {
    position: absolute !important;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* Skip link. First focusable element on the page. Visible on focus. */
  .dwb-skip-link,
  .screen-reader-text.skip-link {
    position: absolute;
    inset-block-start: var(--space-xs);
    inset-inline-start: var(--space-xs);
    z-index: 100;
    padding: var(--space-xs) var(--space-md);
    background: var(--paper-light);
    color: var(--ink);
    border: 1px solid var(--ink);
    border-radius: 2px;
    font-family: var(--font-display);
    text-decoration: none;
  }

  .dwb-skip-link:not(:focus):not(:focus-visible) {
    position: absolute !important;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* Nothing on this site moves, but honour the preference anyway for anything
     the parent theme or the editor introduces. */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ==========================================================================
   THE PAPER BACKGROUND
   Reproduced in CSS gradients at zero bytes rather than shipping the 736 KB
   source PNG. The character of the brand asset comes almost entirely from the
   soft wash shape, not from paper texture: measured grain standard deviation
   is 0.59, effectively nothing.

   The background lives on a fixed pseudo element, not on body.
   background-attachment: fixed is janky on mobile scroll; this is not. Fixed
   positioning also means the wash never repeats, never stretches and never
   tiles visibly on a long page, which the source image cannot do since it is
   not a seamless texture.
   ========================================================================== */

@layer paper {

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-color: var(--paper-base);
    background-image:
      radial-gradient(ellipse 78% 58% at 46% 40%,
        var(--paper-wash) 0%, rgba(245, 240, 229, .55) 42%, rgba(245, 240, 229, 0) 72%),
      radial-gradient(ellipse 42% 34% at 64% 57%,
        var(--paper-light) 0%, rgba(251, 250, 246, .5) 45%, rgba(251, 250, 246, 0) 78%),
      linear-gradient(105deg, rgba(245, 240, 229, .35) 0%, rgba(245, 240, 229, 0) 55%);
  }

  /* Dither layer. This is not decoration: a gradient this subtle produces
     visible banding on 8 bit displays, and this noise breaks it up. Inline SVG,
     so it costs zero HTTP requests and zero KB of network. */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .5;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.045'/></svg>");
  }

  @media print {
    body::before,
    body::after { display: none; }
  }
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */

@layer layout {

  .dwb-shell {
    inline-size: min(100% - (var(--gutter) * 2), var(--wide));
    margin-inline: auto;
  }

  /* Prose column. 34rem, which is the readable measure at our body size. */
  .dwb-prose {
    inline-size: min(100%, var(--measure));
  }

  /* Content surfaces that lift off the paper use a translucent white rather
     than solid white, so the wash still reads through them. */
  .dwb-card {
    background: var(--paper-card);
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: var(--space-lg);
  }

  .dwb-panel {
    background: var(--paper-panel);
    border-radius: 3px;
    padding: var(--space-lg);
  }

  /* GeneratePress container widths follow our tokens rather than the
     customizer, so the design system stays in git. */
  .site-content .content-area,
  .inside-article,
  .entry-content > :where(*) {
    max-inline-size: 100%;
  }

  main { display: block; }
}

/* ==========================================================================
   HEADER
   Rendered through GeneratePress hooks, styled here. No accent color appears
   in the header: it is a family layer element.
   ========================================================================== */

@layer header {

  .dwb-header {
    border-block-end: 1px solid var(--rule);
    padding-block: var(--space-md);
  }

  .dwb-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md) var(--space-lg);
  }

  .dwb-wordmark {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-lg);
    letter-spacing: 0.02em;
    line-height: var(--leading-display);
    color: var(--ink);
    text-decoration: none;
  }

  .dwb-wordmark:hover,
  .dwb-wordmark:focus-visible { color: var(--ink); }

  .dwb-wordmark__tagline {
    display: block;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--text-sm);
    font-style: italic;
    letter-spacing: 0;
    color: var(--ink-faint);
    margin-block-start: var(--space-2xs);
  }

  .dwb-nav ul {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-xs) var(--space-md);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dwb-nav li { margin: 0; }

  .dwb-nav a {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    color: var(--ink-soft);
    text-decoration: none;
    padding-block: var(--space-2xs);
  }

  .dwb-nav a:hover,
  .dwb-nav a:focus-visible {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 0.25em;
  }

  .dwb-nav a[aria-current="page"] {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 0.25em;
  }
}

/* ==========================================================================
   FOOTER
   The author page is linked from every page, in the footer at minimum. It
   becomes the most internally linked page on the site, which is correct
   because it is the entity anchor.
   ========================================================================== */

@layer footer {

  .dwb-footer {
    border-block-start: 1px solid var(--rule);
    margin-block-start: var(--space-3xl);
    padding-block: var(--space-2xl) var(--space-lg);
    font-size: var(--text-sm);
  }

  .dwb-footer__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-xl) var(--space-lg);
  }

  .dwb-footer__brand p {
    color: var(--ink-soft);
    max-inline-size: 24rem;
    margin-block-end: 0;
  }

  .dwb-footer h2 {
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-block: 0 var(--space-sm);
  }

  .dwb-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dwb-footer li { margin-block-end: var(--space-xs); }

  .dwb-footer a {
    color: var(--ink-soft);
    text-decoration: none;
  }

  .dwb-footer a:hover,
  .dwb-footer a:focus-visible {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 0.25em;
  }

  .dwb-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-md);
    align-items: baseline;
    justify-content: space-between;
    margin-block-start: var(--space-xl);
    padding-block-start: var(--space-md);
    border-block-start: 1px solid var(--rule);
    color: var(--ink-faint);
  }

  .dwb-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-md);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dwb-footer__legal li { margin: 0; }

  /* GeneratePress prints its own credit line in .site-info. We replace the
     text through the generate_copyright filter and hide the wrapper, because
     an empty bordered strip below our own footer looks like a bug. */
  .site-info { display: none; }
}

/* ==========================================================================
   COMPONENTS

   The accent appears in exactly five places, on that book's own pages only:
   the title rule, the primary buy button fill, the rule under a section
   heading, the left border of a passage, and the top edge of a card in a
   grid. Nowhere else. Not body links, not the header, not the footer, not the
   email capture. Shared pages use no accent at all.

   Contrast was calculated, not assumed. The lightest accent is #A64014, which
   reaches 6.0:1 against cream text and 5.8:1 as text on the paper. Every other
   accent is darker and therefore safer. All five pass AA on a cream fill.
   ========================================================================== */

@layer components {

  .dwb-main {
    display: block;
    padding-block: var(--space-xl) var(--space-2xl);
  }

  .dwb-main:focus { outline: none; }

  /* ---- Breadcrumbs ---- */

  .dwb-breadcrumbs {
    font-size: var(--text-sm);
    color: var(--ink-faint);
    margin-block-end: var(--space-lg);
  }

  .dwb-breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dwb-breadcrumbs li { margin: 0; }

  .dwb-breadcrumbs li + li::before {
    content: "/";
    margin-inline-end: var(--space-xs);
    color: var(--rule);
  }

  .dwb-breadcrumbs a { color: var(--ink-soft); }

  /* ---- Book head ---- */

  .dwb-book__head { margin-block-end: var(--space-xl); }

  .dwb-book__head h1 { margin-block-end: var(--space-sm); }

  /* Accent slot 1: a short rule beneath the title. */
  .dwb-book__head h1::after {
    content: "";
    display: block;
    inline-size: 3.5rem;
    block-size: 3px;
    margin-block-start: var(--space-md);
    background: var(--accent);
  }

  .dwb-hub .dwb-book__head h1::after,
  .dwb-archive__head h1::after { display: none; }

  .dwb-book__subtitle {
    font-size: var(--text-lg);
    color: var(--ink-soft);
    max-inline-size: var(--measure);
    margin-block: 0;
  }

  .dwb-lede {
    font-size: var(--text-lg);
    line-height: 1.5;
  }

  .dwb-book__lead {
    display: grid;
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: start;
    margin-block-end: var(--space-xl);
  }

  @media (max-width: 48rem) {
    .dwb-book__lead { grid-template-columns: minmax(0, 1fr); }
    .dwb-book__cover { max-inline-size: 14rem; }
  }

  .dwb-cover {
    display: block;
    inline-size: 100%;
    block-size: auto;
    border: 1px solid var(--rule);
    border-radius: 2px;
  }

  /* ---- Facts table ---- */

  .dwb-facts {
    background: var(--paper-card);
    border: 1px solid var(--rule);
    border-radius: 3px;
    margin-block: var(--space-xl);
  }

  .dwb-facts th {
    inline-size: 11rem;
    white-space: nowrap;
    color: var(--ink-faint);
    font-size: var(--text-sm);
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .dwb-facts tr:last-child th,
  .dwb-facts tr:last-child td { border-block-end: 0; }

  @media (max-width: 34rem) {
    .dwb-facts th { inline-size: auto; white-space: normal; }
    .dwb-facts th,
    .dwb-facts td { display: block; }
    .dwb-facts th { border-block-end: 0; padding-block-end: 0; }
  }

  /* ---- Buy links ---- */

  .dwb-buy { margin-block: var(--space-lg); }

  .dwb-buy__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dwb-buy__list li { margin: 0; }

  .dwb-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    line-height: 1.2;
    text-decoration: none;
    border: 1px solid var(--accent);
    border-radius: 2px;
    color: var(--accent);
    background: transparent;
  }

  /* Accent slot 2: the primary buy button fill. Cream on accent, verified. */
  .dwb-button--primary {
    background: var(--accent);
    color: var(--paper-light);
    border-color: var(--accent);
  }

  .dwb-button:hover,
  .dwb-button:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; }

  .dwb-buy__status {
    font-size: var(--text-sm);
    color: var(--ink-soft);
    margin-block-end: var(--space-sm);
  }

  .dwb-buy__note {
    font-size: var(--text-sm);
    color: var(--ink-faint);
    max-inline-size: var(--measure);
    margin-block: var(--space-sm) 0;
  }

  /* ---- Section rules ---- */

  /* Accent slot 3: the rule under a section heading, on a book page only. */
  .dwb-book > section > h2,
  .dwb-book__body h2 {
    padding-block-end: var(--space-xs);
    border-block-end: 2px solid var(--accent);
  }

  .dwb-hub h2,
  .dwb-archive__group h2 {
    padding-block-end: var(--space-xs);
    border-block-end: 1px solid var(--rule);
  }

  /* ---- Quote passage ---- */

  /* Accent slot 4: the left border. */
  .dwb-passage {
    margin-block: var(--space-xl);
    padding-inline-start: var(--space-lg);
    border-inline-start: 3px solid var(--accent);
    max-inline-size: var(--measure);
  }

  .dwb-passage blockquote { margin: 0; }

  /* The same treatment for a core quote block carrying the dwb-passage class,
     which is how a passage is written in the editor. */
  blockquote.dwb-passage {
    padding-inline-start: var(--space-lg);
    border-inline-start: 3px solid var(--accent);
    font-style: normal;
  }

  blockquote.dwb-passage p {
    font-style: italic;
    font-size: var(--text-lg);
    margin-block-end: var(--space-sm);
  }

  blockquote.dwb-passage cite {
    display: block;
    font-style: normal;
    font-size: var(--text-sm);
    color: var(--ink-faint);
  }

  .dwb-passage p {
    font-style: italic;
    font-size: var(--text-lg);
    margin-block-end: var(--space-sm);
  }

  .dwb-passage figcaption {
    font-size: var(--text-sm);
    color: var(--ink-faint);
  }

  /* ---- Sources and structure tables ---- */

  .dwb-sources,
  .dwb-structure { margin-block: var(--space-xl); }

  .dwb-sources p { max-inline-size: var(--measure); }

  .dwb-sources__table th,
  .dwb-structure th { vertical-align: top; }

  .dwb-structure caption {
    caption-side: top;
    text-align: left;
    padding-block-end: var(--space-sm);
  }

  /* ---- Series strip ---- */

  .dwb-strip {
    margin-block: var(--space-2xl);
    padding-block-start: var(--space-lg);
    border-block-start: 1px solid var(--rule);
  }

  .dwb-strip__heading {
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint);
    border: 0;
    padding: 0;
    margin-block: 0 var(--space-md);
  }

  .dwb-strip ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-lg);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dwb-strip li { margin: 0; }

  .dwb-strip a {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    color: var(--ink-soft);
    text-decoration: none;
  }

  .dwb-strip a:hover,
  .dwb-strip a:focus-visible { color: var(--ink); text-decoration: underline; }

  .dwb-strip .is-current a {
    color: var(--ink);
    font-weight: 700;
  }

  /* ---- Grid and cards ---- */

  .dwb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--space-lg);
    margin-block: var(--space-lg);
  }

  .dwb-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    background: var(--paper-card);
    border: 1px solid var(--rule);
    /* Accent slot 5: the top edge, so the grid reads like the shelf does. */
    border-block-start: 3px solid var(--accent);
    border-radius: 2px;
    padding: var(--space-md);
  }

  .dwb-card__cover { display: block; }

  .dwb-card__title {
    font-size: var(--text-base);
    margin-block: 0 var(--space-2xs);
  }

  .dwb-card__title a {
    text-decoration: none;
    color: var(--ink);
  }

  .dwb-card__title a:hover,
  .dwb-card__title a:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; }

  .dwb-card__subtitle,
  .dwb-card__status {
    font-size: var(--text-sm);
    color: var(--ink-faint);
    margin-block: 0;
  }

  .dwb-card__status { margin-block-start: var(--space-xs); }

  /* ---- Archive and hub ---- */

  .dwb-archive__head,
  .dwb-hub__head { margin-block-end: var(--space-2xl); }

  .dwb-archive__group { margin-block-end: var(--space-3xl); }

  .dwb-archive__group h2 a {
    text-decoration: none;
    color: var(--ink);
  }

  .dwb-archive__intro,
  .dwb-hub__body { max-inline-size: var(--measure); }

  .dwb-linklist {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dwb-linklist li { margin-block-end: var(--space-xs); }

  /* ---- Email capture, author bio, companion ---- */

  /* No accent here. Both are family layer elements on every page. */
  .dwb-capture {
    background: var(--paper-panel);
    border-radius: 3px;
    padding: var(--space-xl);
    margin-block: var(--space-2xl);
    max-inline-size: 44rem;
  }

  .dwb-capture h2,
  .dwb-author h2 {
    border: 0;
    padding: 0;
    margin-block-start: 0;
  }

  .dwb-capture p { max-inline-size: var(--measure); }

  .dwb-capture .dwb-button--primary {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper-light);
  }

  /* The embed slot holds its space before the script runs. Without this the
     form injects into a zero height box and shifts everything below it, which
     is the single most likely CLS failure on this site. The height itself is
     set inline from the customizer so it can be tuned to the real form. */
  .dwb-capture__form {
    display: block;
    margin-block: var(--space-md);
  }

  .dwb-capture__fine,
  .dwb-capture__admin {
    font-size: var(--text-sm);
    color: var(--ink-faint);
    max-inline-size: var(--measure);
    margin-block-end: 0;
  }

  .dwb-capture__admin {
    border: 1px dashed var(--ink-faint);
    border-radius: 2px;
    padding: var(--space-sm) var(--space-md);
  }

  /* The footer variant is one line, one field, one button, and no visible
     heading competing with the page's own H1. */
  .dwb-capture--footer {
    padding: var(--space-lg);
    max-inline-size: none;
  }

  .dwb-capture--footer .dwb-capture__line {
    font-size: var(--text-base);
    margin-block-end: var(--space-sm);
    max-inline-size: var(--measure);
  }

  .dwb-capture--footer .dwb-capture__form { margin-block: var(--space-sm) 0; }

  /* The Kit embed's own markup. Kept to our tap target and focus rules
     regardless of what the plugin ships. */
  .dwb-capture__form input[type="email"],
  .dwb-capture__form input[type="text"] {
    min-block-size: 2.75rem;
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--rule);
    border-radius: 2px;
    background: var(--paper-light);
  }

  .dwb-capture__form button,
  .dwb-capture__form input[type="submit"] {
    min-block-size: 2.75rem;
    min-inline-size: var(--tap-min);
    cursor: pointer;
  }

  .dwb-author,
  .dwb-companion {
    max-inline-size: var(--measure);
    margin-block: var(--space-2xl);
  }

  /* ---- Articles, notes and lists ---- */

  .dwb-article__head { margin-block-end: var(--space-xl); }

  .dwb-article__meta {
    font-size: var(--text-sm);
    color: var(--ink-faint);
    margin-block: 0;
  }

  .dwb-article__body h2 {
    padding-block-end: var(--space-xs);
    border-block-end: 1px solid var(--rule);
  }

  .dwb-chapter .dwb-article__body h2 { border-block-end-color: var(--accent); }

  .dwb-postlist {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dwb-postlist > li {
    margin-block-end: var(--space-xl);
    padding-block-end: var(--space-xl);
    border-block-end: 1px solid var(--rule);
  }

  .dwb-postlist > li:last-child { border-block-end: 0; }

  .dwb-postlist__title {
    font-size: var(--text-xl);
    margin-block: 0 var(--space-2xs);
    border: 0;
    padding: 0;
  }

  .dwb-postlist__title a {
    color: var(--ink);
    text-decoration: none;
  }

  .dwb-postlist__title a:hover,
  .dwb-postlist__title a:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; }

  .dwb-postlist__meta {
    font-size: var(--text-sm);
    color: var(--ink-faint);
    margin-block: 0 var(--space-xs);
  }

  .dwb-postlist__excerpt {
    max-inline-size: var(--measure);
    margin-block: 0;
  }

  /* An ordered list with explicit positions, which is the shape that survives
     chunking intact and the reason this page type extracts well. */
  .dwb-orderedlist {
    max-inline-size: var(--measure);
    padding-inline-start: 1.6em;
  }

  .dwb-orderedlist li { margin-block-end: var(--space-sm); }

  .dwb-list__note {
    font-size: var(--text-sm);
    color: var(--ink-faint);
    max-inline-size: var(--measure);
  }

  .dwb-chapterlist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: var(--space-xs) var(--space-lg);
    margin: 0 0 var(--space-lg);
    padding: 0;
    list-style: none;
  }

  .dwb-chapterlist li { margin: 0; }

  .dwb-chapternav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: space-between;
    margin-block: var(--space-2xl) var(--space-lg);
    padding-block-start: var(--space-lg);
    border-block-start: 1px solid var(--rule);
  }

  .dwb-chapternav a {
    display: block;
    max-inline-size: 18rem;
    text-decoration: none;
    color: var(--ink);
  }

  .dwb-chapternav__next { text-align: right; margin-inline-start: auto; }

  .dwb-chapternav a span {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    color: var(--ink-faint);
  }

  .dwb-chapternav a:hover,
  .dwb-chapternav a:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; }

  .dwb-chapter__hub { font-size: var(--text-sm); }

  /* Pagination, from core markup. */
  .pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-block-start: var(--space-xl);
  }

  .pagination a,
  .pagination .current {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--tap-min);
    padding: var(--space-2xs) var(--space-sm);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    text-decoration: none;
    border: 1px solid var(--rule);
    border-radius: 2px;
  }

  .pagination .current {
    background: var(--paper-panel);
    font-weight: 700;
  }

  /* ---- Static pages ---- */

  .dwb-page__head { margin-block-end: var(--space-xl); }

  .dwb-page__body h2 {
    padding-block-end: var(--space-xs);
    border-block-end: 1px solid var(--rule);
  }

  .dwb-404 section { margin-block: var(--space-xl); }

  /* The two verbatim bios. Presented as one selectable block, because the
     point of the press kit is that a third party copies the exact string. */
  .dwb-bio {
    background: var(--paper-card);
    border: 1px solid var(--rule);
    border-inline-start: 3px solid var(--ink-faint);
    border-radius: 2px;
    padding: var(--space-md);
    max-inline-size: var(--measure);
    font-size: var(--text-base);
  }

  .dwb-author-links { margin-block: var(--space-md); }

  /* ---- Wide tables ----
     The press table has seven columns and cannot shrink to a phone. It scrolls
     inside its own container so the page body never scrolls horizontally,
     which is a usability failure Google measures. */

  .dwb-tablewrap {
    overflow-x: auto;
    margin-block: var(--space-lg);
    border: 1px solid var(--rule);
    border-radius: 3px;
  }

  .dwb-tablewrap table {
    margin: 0;
    min-inline-size: 46rem;
  }

  .dwb-press th[scope="row"] {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--ink);
    text-transform: none;
    letter-spacing: 0;
  }

  .dwb-press caption {
    caption-side: top;
    text-align: left;
    padding: var(--space-sm) var(--space-md);
  }
}

/* ==========================================================================
   PRINT
   ========================================================================== */

@media print {

  body {
    background: #FFF;
    color: #000;
    font-size: 11pt;
  }

  .dwb-header,
  .dwb-footer,
  .dwb-skip-link { display: none; }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #444;
  }
}

/* ==========================================================================
   THE AUTHOR PAGE

   An author with no portrait needs another visual anchor, and here it is the
   covers: four saturated spines that already carry the brand colour. So they
   lead, fanned and lit, rather than sitting in a tidy grid under a wall of
   text.

   The hero inverts to ink. That gives the cream site somewhere to start, makes
   the covers glow instead of lying flat on paper, and is the only ground where
   the imprint gold is legible: it measures 6.3:1 on ink and 2.6:1 on cream, so
   on the light half of the page gold is rules and hairlines only, never text.

   Every interaction here is CSS. No script runs on this page.
   ========================================================================== */

@layer components {

  .dwb-authorpage { padding-block: 0 var(--space-3xl); }

  /* ---------------- Hero ---------------- */

  .dwb-ah {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-block-size: clamp(30rem, 82vh, 46rem);
    padding-block: var(--space-3xl);
    margin-block-end: var(--space-3xl);
    background: #111;
    color: var(--paper-light);
    overflow: hidden;
  }

  .dwb-ah__video {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    z-index: -2;
    opacity: .38;
    filter: saturate(.55) contrast(1.05);
  }

  /* The scrim is what keeps text contrast honest over moving footage: the
     heading never sits on a lighter passage than the ratio was checked at. */
  .dwb-ah__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      linear-gradient(105deg, rgba(17, 17, 17, .94) 0%, rgba(17, 17, 17, .82) 46%, rgba(17, 17, 17, .58) 100%),
      radial-gradient(ellipse 70% 80% at 12% 28%, rgba(183, 152, 88, .22) 0%, rgba(183, 152, 88, 0) 62%);
  }

  .dwb-ah__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: center;
    inline-size: min(100% - (var(--gutter) * 2), var(--wide));
    margin-inline: auto;
  }

  .dwb-ah__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gold);
    margin-block: 0 var(--space-md);
  }

  .dwb-ah__mark {
    inline-size: 1.75rem;
    block-size: auto;
    background: var(--paper-base);
    border-radius: 50%;
    padding: 2px;
  }

  .dwb-ah h1 {
    color: #fff;
    font-size: clamp(2.6rem, 1.6rem + 4.4vw, 5.2rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin-block: 0 var(--space-lg);
  }

  .dwb-ah h1::after { display: none; }

  .dwb-ah__bio {
    font-size: clamp(1.18rem, 1.05rem + 0.6vw, 1.5rem);
    line-height: 1.45;
    color: rgba(255, 255, 255, .9);
    max-inline-size: 32rem;
    margin-block: 0 var(--space-md);
  }

  .dwb-ah__meta {
    font-size: var(--text-sm);
    line-height: 1.6;
    color: rgba(255, 255, 255, .62);
    max-inline-size: 30rem;
    margin-block: 0 var(--space-xl);
    padding-inline-start: var(--space-md);
    border-inline-start: 2px solid var(--gold);
  }

  .dwb-ah__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
  }

  .dwb-ah .dwb-button {
    padding: var(--space-md) var(--space-xl);
    font-size: var(--text-base);
    border-radius: 3px;
    transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
  }

  .dwb-button--gold {
    background: var(--gold);
    border-color: var(--gold);
    color: #14110B;
    font-weight: 700;
  }

  .dwb-button--gold:hover,
  .dwb-button--gold:focus-visible { background: #C9A968; border-color: #C9A968; transform: translateY(-2px); }

  .dwb-button--ghost {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .42);
    color: #fff;
  }

  .dwb-button--ghost:hover,
  .dwb-button--ghost:focus-visible { border-color: #fff; transform: translateY(-2px); }

  .dwb-ah :where(a):focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

  /* ---------------- The fanned covers ---------------- */

  .dwb-ah__fan {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-block-size: 24rem;
    perspective: 1400px;
  }

  .dwb-ah__card {
    position: absolute;
    inline-size: clamp(9rem, 15vw, 13.5rem);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .4), 0 26px 60px rgba(0, 0, 0, .55);
    /* Fanned from the centre: each card steps out and rotates a little more. */
    transform:
      translateX(calc((var(--i) - 1.5) * 4.4rem))
      translateY(calc(var(--i) * -0.5rem))
      rotate(calc((var(--i) - 1.5) * 5deg));
    transform-origin: 50% 100%;
    z-index: calc(4 - var(--i));
    transition: transform 320ms cubic-bezier(.2, .7, .3, 1), box-shadow 320ms ease;
  }

  .dwb-ah__card img { display: block; inline-size: 100%; block-size: auto; }

  /* Hovering the group opens the fan. Pure CSS, and it degrades to nothing
     rather than to something broken on touch. */
  .dwb-ah__fan:hover .dwb-ah__card {
    transform:
      translateX(calc((var(--i) - 1.5) * 5.9rem))
      translateY(calc(var(--i) * -0.5rem - 0.5rem))
      rotate(calc((var(--i) - 1.5) * 7deg));
    box-shadow: 0 3px 8px rgba(0, 0, 0, .45), 0 34px 70px rgba(0, 0, 0, .6);
  }

  @media (max-width: 60rem) {
    .dwb-ah { min-block-size: 0; }
    .dwb-ah__inner { grid-template-columns: minmax(0, 1fr); }
    .dwb-ah__fan { min-block-size: 19rem; order: -1; }
    .dwb-ah__card { inline-size: 7.5rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    .dwb-ah__video { display: none; }
    .dwb-ah__card,
    .dwb-ah .dwb-button { transition: none; }
    .dwb-ah__fan:hover .dwb-ah__card { transform: none; }
  }

  /* ---------------- Section titles ---------------- */

  .dwb-rule-title,
  .dwb-work__head h2 {
    font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem);
    margin-block: 0 var(--space-md);
    padding-block-end: var(--space-md);
    border-block-end: 0;
    position: relative;
  }

  .dwb-rule-title::after,
  .dwb-work__head h2::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: 0;
    inline-size: 3.5rem;
    block-size: 3px;
    background: var(--gold);
  }

  .dwb-work__head h2 a { text-decoration: none; color: var(--ink); }

  .dwb-work__head h2 a:hover,
  .dwb-work__head h2 a:focus-visible { text-decoration: underline; text-underline-offset: 0.18em; }

  /* ---------------- The work ---------------- */

  .dwb-work { margin-block-end: var(--space-3xl); }

  .dwb-work__head { margin-block-end: var(--space-xl); }

  .dwb-work__head p {
    max-inline-size: 38rem;
    color: var(--ink-soft);
    font-size: var(--text-lg);
    line-height: 1.5;
    margin: 0;
  }

  .dwb-work__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: var(--space-2xl) var(--space-xl);
  }

  .dwb-work__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    text-decoration: none;
    color: var(--ink);
  }

  .dwb-work__cover {
    display: block;
    position: relative;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(26, 26, 26, .1), 0 14px 32px rgba(26, 26, 26, .14);
    transition: transform 220ms cubic-bezier(.2, .7, .3, 1), box-shadow 220ms ease;
  }

  /* The accent reappears as a lit edge along the spine side of the cover,
     which is where a real book carries its colour. */
  .dwb-work__cover::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 5px;
    background: var(--accent, var(--gold));
    z-index: 1;
  }

  .dwb-work__cover img { display: block; inline-size: 100%; block-size: auto; }

  .dwb-work__item:hover .dwb-work__cover,
  .dwb-work__item:focus-visible .dwb-work__cover {
    transform: translateY(-6px) scale(1.015);
    box-shadow: 0 2px 6px rgba(26, 26, 26, .12), 0 26px 52px rgba(26, 26, 26, .2);
  }

  .dwb-work__meta { display: flex; flex-direction: column; gap: var(--space-2xs); }

  .dwb-work__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-lg);
    line-height: 1.2;
  }

  .dwb-work__item:hover .dwb-work__title,
  .dwb-work__item:focus-visible .dwb-work__title { text-decoration: underline; text-underline-offset: 0.18em; }

  .dwb-work__sub {
    font-size: var(--text-sm);
    color: var(--ink-faint);
    line-height: 1.45;
  }

  .dwb-work__flag {
    align-self: start;
    margin-block-start: var(--space-2xs);
    padding: 0.15em 0.6em;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--paper-light);
    background: var(--accent, var(--ink));
    border-radius: 2px;
  }

  /* ---------------- The story ---------------- */

  .dwb-story {
    background: var(--paper-panel);
    padding-block: var(--space-3xl);
    margin-block-end: var(--space-3xl);
  }

  .dwb-story__body {
    max-inline-size: 40rem;
    margin-inline: auto;
    font-size: var(--text-lg);
    line-height: 1.7;
  }

  .dwb-story__body > p:first-of-type {
    font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.7rem);
    line-height: 1.45;
    color: var(--ink);
  }

  .dwb-story__body h2 {
    font-size: clamp(1.45rem, 1.25rem + 0.9vw, 2rem);
    margin-block: var(--space-2xl) var(--space-md);
    padding-block-end: var(--space-sm);
    border-block-end: 0;
    position: relative;
  }

  .dwb-story__body h2::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: 0;
    inline-size: 3rem;
    block-size: 3px;
    background: var(--gold);
  }

  .dwb-story__body .dwb-bio {
    background: var(--paper-light);
    border-inline-start: 3px solid var(--gold);
    font-size: var(--text-lg);
  }

  /* ---------------- Sources ---------------- */

  .dwb-src { margin-block-end: var(--space-3xl); }

  .dwb-src__lede {
    max-inline-size: 40rem;
    color: var(--ink-soft);
    font-size: var(--text-lg);
    line-height: 1.55;
    margin-block-end: var(--space-xl);
  }

  .dwb-src__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: var(--space-lg);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dwb-src__list li {
    margin: 0;
    padding: var(--space-md) 0 var(--space-md) var(--space-md);
    border-inline-start: 2px solid var(--gold-soft);
  }

  .dwb-src__work {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-lg);
    line-height: 1.25;
    margin-block-end: var(--space-2xs);
  }

  .dwb-src__who {
    display: block;
    font-size: var(--text-sm);
    color: var(--ink-faint);
  }

  /* ---------------- Elsewhere ---------------- */

  .dwb-else .dwb-author-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--space-md);
    margin-block: 0 var(--space-xl);
    padding: 0;
    list-style: none;
  }

  .dwb-else .dwb-author-links li { margin: 0; }

  .dwb-else .dwb-author-links a {
    display: block;
    padding: var(--space-lg);
    background: var(--paper-card);
    border: 1px solid var(--rule);
    border-block-start: 3px solid var(--gold);
    border-radius: 3px;
    font-family: var(--font-display);
    font-size: var(--text-base);
    text-decoration: none;
    color: var(--ink);
    transition: transform 160ms ease, background-color 160ms ease;
  }

  .dwb-else .dwb-author-links a:hover,
  .dwb-else .dwb-author-links a:focus-visible {
    background: var(--paper-light);
    transform: translateY(-2px);
    text-decoration: underline;
    text-underline-offset: 0.18em;
  }

  .dwb-else__mail {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--ink-soft);
  }
}