:root {
  --fg:#1f1f1f; --muted:#5f5f66; --bg:#fbfbfb; --card:#fff; --line:#e6e1d7;
  --accent:#f28e37;        /* theme palette-1: bars, buttons (dark text on it) */
  --link:#b4530f;          /* text links: AA contrast on --bg */
  --on-accent:#1f1f1f;
  --wide:1600px; --media:1200px; --prose:var(--media); /* text and images share one column */
  --sans: Inter, 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --mono: 'Fira Code', ui-monospace, 'Cascadia Code', Consolas, monospace;
  color-scheme: light dark;
}
/* Dark follows the OS unless the reader picked a theme with the header toggle (html[data-theme]). */
:root[data-theme="light"] { color-scheme:light; }
:root[data-theme="dark"] { color-scheme:dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fg:#ebe8e2; --muted:#a6a29a; --bg:#151413; --card:#1f1d1b; --line:#2f2c29; --link:#fb9a52; }
  /* The tile is light: invert it and screen it over the dark background so its lines read as faint light strokes. */
  :root:not([data-theme="light"]) body { background:var(--bg); position:relative; isolation:isolate; }
  :root:not([data-theme="light"]) body::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:url("/wp-content/uploads/2021/12/what-the-hex.png") repeat; filter:invert(1) brightness(1.6); mix-blend-mode:screen; opacity:.55; } }
:root[data-theme="dark"] { --fg:#ebe8e2; --muted:#a6a29a; --bg:#151413; --card:#1f1d1b; --line:#2f2c29; --link:#fb9a52; }
  /* The tile is light: invert it and screen it over the dark background so its lines read as faint light strokes. */
  :root[data-theme="dark"] body { background:var(--bg); position:relative; isolation:isolate; }
  :root[data-theme="dark"] body::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:url("/wp-content/uploads/2021/12/what-the-hex.png") repeat; filter:invert(1) brightness(1.6); mix-blend-mode:screen; opacity:.55; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg) url("/wp-content/uploads/2021/12/what-the-hex.png") repeat; color:var(--fg); font-family:var(--sans); font-size:1.0625rem; line-height:1.65; overflow-x:hidden;
  overflow-wrap:break-word; /* long bare URLs in posts wrap instead of being clipped on phones */ }
/* Sticky footer: short pages (tags, 404, subscribe) keep the footer at the bottom of the window. */
body:has(> .site-footer) { display:flex; flex-direction:column; min-height:100vh; }
body:has(> .site-footer) > .wrap, body:has(> .site-footer) > .site-footer { width:100%; }
body:has(> .site-footer) > main { flex:1 0 auto; }
a { color:var(--link); text-underline-offset:.18em; }
img, video, iframe { max-width:100%; height:auto; }
h1, h2, h3, h4 { line-height:1.2; font-weight:600; letter-spacing:-.01em; }
.wrap { max-width:var(--wide); margin:0 auto; padding:0 clamp(1rem, 3vw, 2.5rem); }
.small, .meta { font-size:.875rem; color:var(--muted); }
.notice { padding:.75rem 1rem; background:var(--card); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:4px; }

/* ---- header -------------------------------------------------------------- */
.site-header { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:2rem 0; }
.site-nav { display:flex; flex-wrap:wrap; align-items:center; gap:.25rem 2rem; text-transform:uppercase; letter-spacing:.06em; font-size:1rem; }
.site-nav a { color:var(--fg); text-decoration:none; padding:.35rem 0; border-bottom:2px solid transparent; }
.site-nav a:hover, .site-nav a:focus-visible { border-bottom-color:var(--accent); }
.has-sub { position:relative; display:flex; align-items:center; gap:.2rem; }
.sub-toggle { background:none; border:0; color:var(--muted); font-size:1.1rem; padding:0 .2rem; cursor:pointer; }
.sub { display:none; position:absolute; top:100%; left:-1rem; z-index:10; list-style:none; margin:0; padding:.5rem 0; min-width:13rem;
  background:var(--card); border:1px solid var(--line); border-top:3px solid var(--accent); box-shadow:0 8px 24px rgb(0 0 0 / .12); text-transform:none; letter-spacing:0; }
.sub a { display:block; padding:.4rem 1rem; border:0; }
.sub a:hover { background:var(--bg); }
.has-sub:hover .sub, .has-sub:focus-within .sub { display:block; }
.header-end { display:flex; align-items:center; gap:1rem; flex-shrink:0; }
.theme-toggle { display:grid; place-items:center; width:2.5rem; height:2.5rem; padding:0; border:1px solid var(--line); border-radius:50%;
  background:var(--card); color:var(--fg); cursor:pointer; transition:border-color .15s, color .15s; }
.theme-toggle:hover, .theme-toggle:focus-visible { border-color:var(--accent); color:var(--accent); }
.theme-toggle[hidden] { display:none; } /* shown by its script, so it never appears without JS */
.theme-toggle svg { width:1.2rem; height:1.2rem; }
/* Show the moon in light mode (click for dark) and the sun in dark mode. */
.theme-toggle .sun { display:none; }
:root[data-theme="dark"] .theme-toggle .sun { display:block; }
:root[data-theme="dark"] .theme-toggle .moon { display:none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .sun { display:block; }
  :root:not([data-theme="light"]) .theme-toggle .moon { display:none; }
}
.site-logo img { display:block; width:clamp(64px, 7vw, 100px); height:auto; }

/* ---- home ------------------------------------------------------------------ */
.hero { display:grid; grid-template-columns:1fr 1fr; gap:2rem 4rem; align-items:center; padding:clamp(2rem, 8vw, 7rem) 0; }
.hero-title { font-size:clamp(3rem, 8vw, 6.5rem); font-weight:300; letter-spacing:.02em; text-transform:uppercase; margin:0; }
.hero-intro { font-size:clamp(1.15rem, 1.8vw, 1.75rem); line-height:1.6; font-weight:300; margin:0; }
.page-content > * + * { margin-top:2.5rem; }
.latest-posts { display:grid; gap:2rem; max-width:var(--media); margin-inline:auto; }

/* ---- Gutenberg blocks (imported content) ---------------------------------- */
.alignfull { --vw:calc(100vw - var(--sbw, 0px)); width:var(--vw); max-width:var(--vw); margin-left:calc(50% - var(--vw) / 2); margin-right:0; }
.alignwide { max-width:var(--wide); margin-inline:auto; }
.aligncenter { margin-inline:auto; text-align:center; }
.has-text-align-center { text-align:center; }
.has-large-font-size { font-size:clamp(1.15rem, 1.6vw, 1.45rem); }
.has-fira-code-font-family { font-family:var(--mono); }
.wp-block-columns { display:flex; flex-wrap:wrap; gap:2rem 4rem; }
.wp-block-column { flex:1 1 20rem; min-width:0; }
.are-vertically-aligned-center, .is-vertically-aligned-center { align-items:center; align-self:center; }
.wp-block-buttons { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }
.wp-block-button__link, button, .button { display:inline-block; font:inherit; font-weight:600; padding:.7rem 1.6rem; border:0; border-radius:3px;
  background:var(--accent); color:var(--on-accent); text-decoration:none; cursor:pointer; }
.wp-block-button__link:hover, button:hover { filter:brightness(1.07); }
.is-style-large .wp-block-button__link { font-size:1.25rem; padding:1rem 2.2rem; }
.wp-block-separator { border:0; border-top:1px solid var(--line); margin:3rem auto; }
.wp-block-image { margin:1.5rem 0; }
.wp-block-image img { display:block; border-radius:3px; }
.wp-block-image figcaption, .wp-element-caption { font-size:.875rem; color:var(--muted); text-align:center; margin-top:.5rem; }

/* Gallery: category tiles with a caption band. The hovered tile widens; its neighbours give up the space. */
.wp-block-gallery { display:flex; gap:0; margin-block:0; }
.wp-block-gallery:not(.is-style-no-gaps) { gap:.5rem; }
.wp-block-gallery .wp-block-image { position:relative; flex:1 1 0; min-width:0; margin:0; overflow:hidden; transition:flex-grow .45s ease; }
.wp-block-gallery .wp-block-image:is(:hover, :focus-within) { flex-grow:1.25; }
/* Fixed strip height so widening a tile never changes the row's height. */
.wp-block-gallery.is-cropped { height:clamp(18rem, 28vw, 40rem); }
.wp-block-gallery.is-cropped img { width:100%; height:100%; object-fit:cover; border-radius:0; transition:filter .45s ease; }
.wp-block-gallery:hover .wp-block-image:not(:hover) img { filter:brightness(.85); }
@media (prefers-reduced-motion: reduce) { .wp-block-gallery .wp-block-image { transition:none; } }
.wp-block-gallery figcaption { position:absolute; inset:auto 0 0 0; margin:0; padding:1rem .5rem; background:rgb(0 0 0 / .62); font-size:1.1rem; }
.wp-block-gallery figcaption a { color:#fff; font-weight:500; }
.wp-block-gallery figcaption a::after { content:''; position:absolute; inset:-100vh 0 0 0; } /* whole tile clickable */

/* Cover */
.wp-block-cover { position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; color:#fff; }
.wp-block-cover__image-background { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.wp-block-cover__background { position:absolute; inset:0; background:#111; opacity:.5; }
.wp-block-cover__inner-container { position:relative; padding:0 1.5rem; width:100%; }
.wp-block-cover h3 { font-size:clamp(1.4rem, 2.6vw, 2.4rem); line-height:1.45; text-shadow:0 2px 12px rgb(0 0 0 / .6); }
.wp-block-cover .wp-block-button__link { background:#1f1f1f; color:var(--accent); }
.home main + .site-footer, .home .page-content > :last-child { margin-bottom:0; }

/* ---- cards ----------------------------------------------------------------- */
.card-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap:2.5rem 2rem; }
.card { background:var(--card); border-top:5px solid var(--accent); padding:1.25rem 1.5rem 1.5rem; box-shadow:0 1px 3px rgb(0 0 0 / .06); }
.card h2 { margin:0 0 .25rem; font-size:1.35rem; }
.card h2 a { color:var(--fg); text-decoration:none; }
.card h2 a:hover { color:var(--link); }
.card .p-summary { margin:.5rem 0; }
.card .thumb { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.card-grid .card { display:flex; flex-direction:column; }
.card-grid .card .thumb-link { order:-1; margin:-1.25rem -1.5rem 1rem; }
/* Mosaic: cards keep their natural height (image proportions + excerpt length).
   The masonry script packs them by row span, keeping left-to-right date order. */
.card-grid .card .thumb-link { display:block; align-self:stretch; }
.card-grid .card .thumb { width:100%; aspect-ratio:auto; max-height:30rem; }
/* Small source images (logos etc.) sit centred at natural size rather than being upscaled. */
.card-grid .card .thumb.is-small { width:auto; max-width:60%; margin:1.5rem auto 0; }
.card-grid.masonry { grid-auto-rows:8px; row-gap:0; align-items:start; }
.card-row { display:grid; grid-template-columns:clamp(8rem, 18vw, 15rem) 1fr; grid-template-rows:auto auto auto auto 1fr;
  grid-template-areas:'thumb title' 'thumb meta' 'thumb body' 'thumb more' 'thumb terms'; column-gap:1.75rem; }
.card-row > h2 { grid-area:title; }
.card-row > .meta { grid-area:meta; margin:0; }
.card-row > .thumb-link { grid-area:thumb; }
.card-row > .thumb-link { align-self:start; }
.card-row > .thumb-link .thumb { aspect-ratio:1; }
.card-row > .p-summary { grid-area:body; }
.card-row > .more { grid-area:more; margin:0 0 .5rem; }
.card-row > .terms { grid-area:terms; }

/* ---- posts & pages --------------------------------------------------------- */
.entry { max-width:var(--media); margin:0 auto; }
.entry > h1, .entry > .meta, .entry > .entry-context, .entry > .terms, .entry > .responses, .entry > p,
.entry .e-content > :not(figure, .wp-block-image, .wp-block-gallery, .wp-block-columns, .embed, .wp-block-cover, .alignwide, .alignfull) {
  max-width:var(--prose); margin-inline:auto;
}
.entry > h1 { font-size:clamp(2.2rem, 4.5vw, 3.6rem); margin-top:1rem; margin-bottom:.5rem; }
.entry > .meta { margin-bottom:2rem; }
.entry .e-content { font-size:1.15rem; line-height:1.8; }
.entry .e-content > figure, .entry .e-content > .wp-block-image { max-width:var(--media); margin:2.5rem auto; }
/* Inside a post, full-width images span the media column (the rule above out-ranks .alignfull's 100vw; without
   this their width stayed 100vw and they overflowed on phones). */
.entry .e-content > .alignfull { width:auto; }
/* Posts imported from Blogger wrap images in <a style="margin-left:1em;margin-right:1em">, which pushes a
   full-width image past the column on phones. The wrapper is already centred, so the margins add nothing. */
.e-content a:has(> img)[style*="margin-left"], .e-content a:has(> img)[style*="margin-right"] { margin-left:0 !important; margin-right:0 !important; }
/* Large/full images span the column so they line up with the text; explicitly resized ones keep their size. */
.entry .e-content :is(.size-large, .size-full, .wp-block-image):not(.is-resized) > img { width:100%; }
.entry .e-content figure:is(.aligncenter, .alignright, .alignleft) { width:fit-content; }
.entry .e-content figure.aligncenter { margin-inline:auto; }
/* Left/right images sit at the column edge with the text wrapping around them; stacked on small screens. */
.entry .e-content figure:is(.alignleft, .alignright) { max-width:min(50%, 30rem); margin-top:.35rem; margin-bottom:1.25rem; }
.entry .e-content figure.alignleft { float:left; margin-left:0; margin-right:2rem; }
.entry .e-content figure.alignright { float:right; margin-right:0; margin-left:2rem; }
.entry .e-content figure:is(.alignleft, .alignright) img { max-width:100%; height:auto; }
.entry .e-content::after { content:''; display:block; clear:both; }
.entry .e-content > :is(h2, h3, h4, hr, .alignwide, .alignfull, .wp-block-columns, .block-gallery) { clear:both; }
@media (max-width: 40rem) {
  .entry .e-content figure:is(.alignleft, .alignright) { float:none; max-width:100%; margin:1.5rem auto; }
}
.featured { display:block; width:100%; max-height:75vh; object-fit:cover; margin:0 auto 2.5rem; border-radius:3px; }
.content blockquote { margin:2rem auto; padding-left:1.25rem; border-left:4px solid var(--accent); color:var(--muted); font-style:italic; }
.embed-video { max-width:var(--media); margin:2.5rem auto; }
.embed-video iframe { width:100%; aspect-ratio:16/9; border:0; }
.embed-audio { max-width:var(--prose); margin:2rem auto; }
.embed-audio iframe { width:100%; height:152px; border:0; border-radius:12px; }
.embed-post { max-width:34rem; margin:2rem auto; }
.embed-post iframe { width:100%; height:640px; border:0; border-radius:6px; background:var(--card); }
.embed figcaption, .block-media figcaption, .block-gallery figcaption { font-size:.875rem; color:var(--muted); text-align:center; margin-top:.5rem; }
/* Block-editor gallery: a plain grid (the WP gallery styles above are the homepage category strip). */
.block-gallery { display:grid; grid-template-columns:repeat(var(--cols, 3), 1fr); gap:.5rem; }
.block-gallery > a { display:block; aspect-ratio:1; overflow:hidden; border-radius:3px; }
.block-gallery img { width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.block-gallery > a:hover img { transform:scale(1.03); }
.block-gallery figcaption { grid-column:1 / -1; }
@media (max-width: 40rem) { .block-gallery { grid-template-columns:repeat(min(var(--cols, 3), 2), 1fr); } }
.block-media video { display:block; width:100%; border-radius:3px; }
.block-audio { max-width:var(--prose); }
.block-audio audio { width:100%; }
.content pre { overflow-x:auto; padding:1rem 1.25rem; background:var(--card); border:1px solid var(--line); border-radius:4px; font-size:.9rem; line-height:1.55; }
.preview-banner { position:sticky; top:0; z-index:50; max-width:var(--media); margin:0 auto 1.5rem; box-shadow:0 4px 12px rgb(0 0 0 / .1); }
/* align-*:flex-start keeps chips their own height when a grid row (e.g. .card-row's 1fr terms row) is taller. */
.terms { display:flex; flex-wrap:wrap; gap:.4rem; align-items:flex-start; align-content:flex-start; overflow-wrap:anywhere; }
/* Meta line: avatar, name, separators and date share one centre line (an inline-flex author sits on its image's
   baseline otherwise, lifting the name above the date). Category chips take their own row underneath. */
p.meta { display:flex; flex-wrap:wrap; align-items:center; column-gap:.4rem; row-gap:.25rem; }
p.meta > .meta-terms { flex-basis:100%; margin-top:.35rem; }
.terms a { display:inline-block; padding:.15rem .7rem; border:1px solid var(--line); border-radius:999px; background:var(--card);
  color:var(--fg); text-decoration:none; font-size:.85rem; line-height:1.5; transition:border-color .15s, background .15s; }
.terms a.category { border-color:var(--accent); font-weight:600; }
.terms a:hover, .terms a:focus-visible { border-color:var(--accent); background:var(--accent); color:var(--on-accent); }
.entry-context { padding:.6rem .9rem; border-left:4px solid var(--accent); background:var(--card); font-size:.95rem; }

/* ---- authors / responses / forms ------------------------------------------ */
.author-card { display:flex; gap:.75rem; align-items:center; }
.avatar { border-radius:50%; }
.author-inline { color:inherit; text-decoration:none; display:inline-flex; gap:.4rem; align-items:center; }
.author-inline img { border-radius:50%; }
.responses { margin-top:4rem; border-top:1px solid var(--line); padding-top:1.5rem; }
.faces { display:flex; flex-wrap:wrap; gap:.3rem; }
.face img, .face .initial { width:32px; height:32px; border-radius:50%; display:inline-grid; place-items:center; background:var(--line); color:var(--fg); }
.comments, .comments ol { list-style:none; padding-left:0; }
.comments ol { padding-left:1.25rem; border-left:2px solid var(--line); }
.comment { margin:1.25rem 0; }
.comment .p-content p { margin:.25rem 0; }
.comment img { border-radius:50%; }
.comment .p-author { display:inline-flex; align-items:center; gap:.4rem; }
.mentions { list-style:none; padding-left:0; }
.mentions li { margin:.4rem 0; }
form label { display:block; margin:.7rem 0; font-size:.9rem; }
input, textarea, select { display:block; width:100%; font:inherit; font-size:1rem; padding:.55rem .7rem; border:1px solid var(--line); border-radius:3px; background:var(--card); color:var(--fg); }
.comment-form { max-width:36rem; }
.webmention-form { margin-top:2rem; }
.webmention-form label { margin:0 0 .4rem; }
.webmention-form .wm-row { display:flex; gap:.5rem; max-width:36rem; }
.webmention-form .wm-row input { flex:1; min-width:0; }
.tag-cloud { gap:.5rem; }
.hp { position:absolute; left:-10000px; }
/* reader sign-in / account */
.narrow { max-width:32rem; margin:2rem auto; }
form label.check { display:flex; align-items:center; gap:.5rem; }
form label.check input { display:inline-block; width:auto; margin:0; }
.notice.error { border-left-color:#c0392b; }
.signin-form button, .account-form button { margin-top:.3rem; }
.account-actions { display:flex; gap:.75rem; margin-top:2rem; padding-top:1rem; border-top:1px solid var(--line); }

/* ---- listings / archive / footer ------------------------------------------- */
.h-feed > h1 { font-size:clamp(2rem, 4vw, 3rem); font-weight:300; text-transform:uppercase; letter-spacing:.03em; margin:1rem 0 2rem; }
.pager { display:flex; justify-content:space-between; margin:3rem 0; }
.archive-year { margin-top:2rem; }
.archive-list { list-style:none; padding:0; columns:2 32rem; }
.archive-list li { display:flex; gap:1rem; padding:.2rem 0; break-inside:avoid; }
.archive-list time { flex:0 0 7rem; }
.site-footer { margin-top:5rem; padding:2.5rem 0; border-top:4px solid var(--accent); background:var(--card); }
.footer-inner { display:flex; flex-wrap:wrap; gap:1.5rem 3rem; align-items:center; justify-content:space-between; }
.footer-nav { display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; }
.home .site-footer { margin-top:0; }

@media (max-width: 52rem) {
  .hero { grid-template-columns:1fr; }
  .site-header { align-items:flex-start; }
  .site-nav { gap:.25rem 1.25rem; font-size:.9rem; }
  .card-row { grid-template-columns:1fr; grid-template-areas:'thumb' 'title' 'meta' 'body' 'more' 'terms'; }
  .card-row > .thumb-link { margin:-1.25rem -1.5rem 1rem; }
  .card-row > .thumb-link .thumb { aspect-ratio:16/9; }
  .wp-block-gallery, .wp-block-gallery.is-cropped { display:grid; grid-template-columns:repeat(2, 1fr); height:auto; }
  .wp-block-gallery.is-cropped img { aspect-ratio:1; height:auto; }
}