/* blog.agejev.com — copper & verdigris on paper; amber on walnut at night. */

/* ------------------------------------------------------------ fonts */
@font-face { font-family: 'Newsreader'; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url(/fonts/newsreader-latin-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Newsreader'; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url(/fonts/newsreader-latin-ext-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Newsreader'; font-style: italic; font-display: swap; font-weight: 200 800;
  src: url(/fonts/newsreader-latin-opsz-italic.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Newsreader'; font-style: italic; font-display: swap; font-weight: 200 800;
  src: url(/fonts/newsreader-latin-ext-opsz-italic.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-display: swap; font-weight: 400 700;
  src: url(/fonts/instrument-sans-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-display: swap; font-weight: 400 700;
  src: url(/fonts/instrument-sans-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ------------------------------------------------------------ tokens */
:root {
  --paper: #F3ECDF;           /* Beige, from share.agejev.com */
  --surface: #EAE0CF;
  --surface-2: #E0D4C0;
  --ink: #2B2723;
  --ink-2: #4A4139;
  --muted: #6F6357;
  --rule: #DCCDB8;
  --accent: #82512E;          /* copper */
  --accent-strong: #653D21;
  --accent-soft: #E8D6C1;
  --accent-ink: #FFFFFF;
  --quote-rule: #C5AE94;
  --quote-ink: #62574D;
  --patina: #3F6B5F;          /* verdigris */
  --ok: #3F6B5F;
  --danger: #A3312A;
  --serif: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
  --measure: 45rem;
  --wide: 62rem;
  --radius: 8px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #242322; --surface: #2C2A28; --surface-2: #353230; --ink: #E8E0D5; --ink-2: #D3C8BA; --muted: #A89B8C;
    --rule: #3D3935; --accent: #C7976B; --accent-strong: #DDB18A; --accent-soft: #3B3128; --accent-ink: #242322;
    --quote-rule: #685543; --quote-ink: #C3B8AA; --patina: #8FB8A9; --ok: #8FB8A9; --danger: #F08A80; color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --paper: #242322; --surface: #2C2A28; --surface-2: #353230; --ink: #E8E0D5; --ink-2: #D3C8BA; --muted: #A89B8C;
    --rule: #3D3935; --accent: #C7976B; --accent-strong: #DDB18A; --accent-soft: #3B3128; --accent-ink: #242322;
    --quote-rule: #685543; --quote-ink: #C3B8AA; --patina: #8FB8A9; --ok: #8FB8A9; --danger: #F08A80; color-scheme: dark;
}

/* ------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5.5rem; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--serif); font-size: 1.1667rem; line-height: 1.75;   /* 14pt */
  font-optical-sizing: auto; font-kerning: normal; text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, video, iframe { max-width: 100%; }
img { height: auto; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-strong); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--accent-soft); color: var(--ink); }
.visually-hidden, .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.skip-link { position: absolute; left: 1rem; top: -3rem; padding: .5rem .8rem; background: var(--ink); color: var(--paper); font-family: var(--sans); z-index: 10; border-radius: 6px; }
.skip-link:focus { top: 1rem; }

.wrap { width: min(var(--wide), 100% - 2.5rem); margin-inline: auto; }
.wrap-text { width: min(var(--measure), 100% - 2.5rem); margin-inline: auto; }

/* ------------------------------------------------------------ header */
/* Sticky bar that slides away while you read and returns when you scroll up.
   Its lower edge is a soft blur, so text fades out as it passes underneath. */
.site-header {
  position: sticky; top: 0; z-index: 40; isolation: isolate;
  padding: 1rem 0 1.15rem;
  transition: transform .45s cubic-bezier(.25, 1, .5, 1);
}
.site-header::before {
  content: ''; position: absolute; inset: 0 0 -1.6rem; z-index: -1; pointer-events: none;
  background: linear-gradient(var(--paper) 50%, color-mix(in srgb, var(--paper) 0%, transparent));
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent);
}
.site-header.is-hidden { transform: translateY(calc(-100% - 1.7rem)); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.wordmark { font-family: var(--serif); font-weight: 600; font-size: 1.45rem; letter-spacing: -0.015em; color: var(--ink); text-decoration: none; }
.wordmark:hover { color: var(--accent); }
.site-nav { display: flex; align-items: center; gap: 1.25rem; font-family: var(--sans); font-size: .92rem; }
.site-nav a { color: var(--ink-2); text-decoration: none; }
.site-nav a:hover { color: var(--accent); }
.theme-toggle { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 1px solid var(--rule); border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; padding: 0; }
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
.icon-sun { display: none; }
:root[data-theme='dark'] .icon-sun { display: block; }
:root[data-theme='dark'] .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .icon-sun { display: block; }
  :root:not([data-theme='light']) .icon-moon { display: none; }
}

/* ------------------------------------------------------------ front page */
.intro { padding: clamp(3rem, 9vw, 6.5rem) 0 clamp(2rem, 5vw, 3.5rem); }
.intro-statement {
  margin: 0; max-width: 21ch; font-family: var(--serif); font-weight: 360;
  font-size: clamp(2.2rem, 5.2vw, 3.75rem); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance;
}
.intro-topic { color: var(--accent); }
.intro-sub { font-family: var(--sans); font-size: 1rem; color: var(--muted); margin-top: 1.2rem; }

.topics { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-family: var(--sans); font-size: .92rem; padding-bottom: 2.2rem; }
.topics a { color: var(--muted); text-decoration: none; }
.topics a:hover { color: var(--accent); }
.topics a[aria-current='page'] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .35em; text-decoration-thickness: 2px; }
.count { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .85em; }

.entries { list-style: none; margin: 0; padding: 0; }
.entry { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 0 2rem; padding: 0 0 2.6rem; }
.entry-date { font-family: var(--sans); font-size: .85rem; color: var(--muted); padding-top: .55rem; font-variant-numeric: tabular-nums; }
.entry-title { margin: 0; font-weight: 480; font-size: clamp(1.45rem, 2.6vw, 1.85rem); line-height: 1.2; letter-spacing: -0.012em; text-wrap: balance; }
.entry-title a { color: var(--ink); text-decoration: none; }
.entry-title a:hover { color: var(--accent); }
.entry-dek { margin: .45rem 0 0; color: var(--ink-2); font-size: 1.05rem; line-height: 1.55; max-width: 38rem; }
.entry-meta { margin: .6rem 0 0; font-family: var(--sans); font-size: .85rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.entry-tags { display: inline-flex; gap: .7rem; }
.tag { color: var(--patina); text-decoration: none; }
.tag:hover { color: var(--accent); text-decoration: underline; }
.entries-compact .entry { grid-template-columns: 1fr; padding-bottom: 1.6rem; }
.entries-compact .entry-date { order: 2; padding-top: .3rem; }
.entries-compact .entry-title { font-size: 1.3rem; }

.pager { display: flex; justify-content: space-between; font-family: var(--sans); font-size: .95rem; padding: 0 0 4rem; }
.empty { font-family: var(--sans); color: var(--muted); padding: 1rem 0 4rem; }
.topic-list ul { list-style: none; padding: 0; margin: 0 0 4rem; columns: 2 14rem; }
.topic-list li { font-size: 1.3rem; padding: .25rem 0; break-inside: avoid; }
.topic-list a { color: var(--ink); text-decoration: none; }
.topic-list a:hover { color: var(--accent); }

@media (max-width: 640px) {
  .entry { grid-template-columns: 1fr; }
  .entry-date { order: 2; padding-top: .35rem; }
  .site-nav { gap: .9rem; }
  .site-nav a[href='/feed.xml'] { display: none; }
}

/* ------------------------------------------------------------ article */
.preview-banner { position: sticky; top: 0; z-index: 5; margin: 0; padding: .6rem 1rem; text-align: center; background: var(--accent-soft); color: var(--ink); font-family: var(--sans); font-size: .9rem; }
.post-header { padding: clamp(2.5rem, 7vw, 5rem) 0 2rem; }
.post-title { margin: 0; font-weight: 700; font-size: clamp(2.3rem, 5.4vw, 3.25rem); line-height: 1.12; letter-spacing: -0.035em; color: var(--accent); text-wrap: balance; }
.post-dek { margin: 1rem 0 0; font-size: 1.32rem; line-height: 1.45; color: var(--ink-2); font-style: italic; text-wrap: pretty; }
.post-meta { margin: 1.3rem 0 0; font-family: var(--sans); font-size: .9rem; color: var(--muted); }
.post-cover { width: min(52rem, 100% - 2.5rem); margin: 0 auto 2.75rem; }
.post-cover img { display: block; width: 100%; border-radius: 4px; }

.prose { hyphens: auto; -webkit-hyphens: auto; text-wrap: pretty; overflow-wrap: break-word; }
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 1.2em; }
.callout a, .subscribe-card a { --link-bg: var(--surface) !important; }
.prose a::selection, .comment-body a::selection { text-shadow: none; }
/* Link underline, after larsfaye.com: a fine dashed line that, on hover, rises toward
   the text, thickens and fills in solid. Drawn with gradients rather than
   text-decoration so the dash length can be set: 4.5px dashes, 3px gaps
   (50% longer than the browser's 3px / 2px). Registered properties let the
   colours, thickness and position animate smoothly. */
@property --u-dash  { syntax: '<color>';  inherits: false; initial-value: transparent; }
@property --u-solid { syntax: '<color>';  inherits: false; initial-value: transparent; }
@property --u-lift  { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --u-thick { syntax: '<length>'; inherits: false; initial-value: 1px; }
.prose a:not([data-footnote-ref]):not([data-footnote-backref]), .comment-body a {
  --u-dash: color-mix(in srgb, var(--accent) 70%, transparent);
  --u-solid: color-mix(in srgb, var(--accent-strong) 0%, transparent);
  --u-lift: 0px;
  --u-thick: 1px;
  text-decoration: none;
  padding-bottom: .1em;
  background-image:
    linear-gradient(var(--u-solid), var(--u-solid)),
    repeating-linear-gradient(90deg, var(--u-dash) 0 4.5px, transparent 4.5px 7.5px);
  background-repeat: no-repeat;
  background-size: 100% var(--u-thick), 100% var(--u-thick);
  background-position: 0 calc(100% - var(--u-lift)), 0 calc(100% - var(--u-lift));
  -webkit-box-decoration-break: slice; box-decoration-break: slice;
  /* Like the browser's skip-ink: a thin outline in the background colour hides the
     line wherever letters such as p, g and y reach down through it. */
  --link-bg: var(--paper);
  text-shadow: .045em 0 var(--link-bg), -.045em 0 var(--link-bg), .09em 0 var(--link-bg), -.09em 0 var(--link-bg),
    0 .03em var(--link-bg), .045em .03em var(--link-bg), -.045em .03em var(--link-bg);
  transition: --u-dash .3s ease, --u-solid .3s ease, --u-lift .3s ease, --u-thick .3s ease, color .3s ease;
}
.prose a:not([data-footnote-ref]):not([data-footnote-backref]):hover, .comment-body a:hover,
.prose a:not([data-footnote-ref]):not([data-footnote-backref]):focus-visible, .comment-body a:focus-visible {
  color: var(--accent-strong);
  --u-dash: color-mix(in srgb, var(--accent) 0%, transparent);
  --u-solid: var(--accent-strong);
  --u-lift: 3px;
  --u-thick: 2px;
}
/* Emphasis: a warm tint of the text colour rather than full copper. Raise the % for more colour. */
.prose em, .prose i, .prose strong, .prose b { color: color-mix(in srgb, var(--accent) 45%, var(--ink)); }
.prose a em, .prose a strong { color: inherit; }
.prose > p:first-child::first-letter {
  float: left; font-size: 4.3em; line-height: .78; font-weight: 500; color: var(--accent);
  padding: .055em .085em 0 0; margin-top: .04em;
}
.prose h2 { font-weight: 700; font-size: 1.8rem; line-height: 1.25; letter-spacing: -0.015em; margin: 2.4rem 0 1.25rem; color: var(--accent); text-wrap: balance; }
.prose h3 { font-weight: 700; font-size: 1.35rem; line-height: 1.3; margin: 2rem 0 .9rem; color: var(--accent); }
.prose h4 { font-family: var(--sans); font-weight: 600; font-size: 1rem; margin: 1.6em 0 .4em; }
.prose ul, .prose ol { padding-left: 1.35em; margin: 0 0 1.2em; }
.prose li { margin: .3em 0; }
.prose li::marker { color: var(--muted); }
.prose blockquote {
  margin: 1.75rem 0; padding: .1em 0 .1em 1.5rem; color: var(--quote-ink);
  /* Dashed rule in the same 4.5px / 3px rhythm as the link underlines. */
  background-image: repeating-linear-gradient(180deg, var(--quote-rule) 0 4.5px, transparent 4.5px 7.5px);
  background-size: 2px 100%; background-repeat: no-repeat; background-position: 0 0;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose hr { border: 0; border-top: 1px solid var(--quote-rule); margin: 2.5rem 0; }
.prose figure { margin: 2.2em 0; text-align: center; }
.prose figure img { display: block; margin: 0 auto; border-radius: 3px; }
.prose figcaption { margin-top: .7rem; font-family: var(--sans); font-size: .85rem; color: var(--muted); line-height: 1.45; }
.prose code { font-family: var(--mono); font-size: .84em; background: var(--surface); padding: .1em .32em; border-radius: 4px; }
.prose pre { font-family: var(--mono); font-size: .84rem; line-height: 1.6; background: var(--surface); padding: 1rem 1.15rem; border-radius: var(--radius); overflow-x: auto; margin: 1.6em 0; hyphens: none; }
.prose pre code { background: none; padding: 0; font-size: inherit; }
.prose table { display: block; overflow-x: auto; border-collapse: collapse; font-family: var(--sans); font-size: .93rem; margin: 1.6em 0; }
.prose th, .prose td { text-align: left; padding: .5rem .9rem .5rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.prose th { font-weight: 600; }
.prose img { border-radius: 3px; }
.prose sup { line-height: 0; }
.prose sup a, .prose a[data-footnote-ref] {
  font-family: var(--sans); font-size: .72em; font-weight: 600; text-decoration: none; padding: 0 .12em; color: var(--accent);
}
.prose input[type='checkbox'] { accent-color: var(--accent); }
.prose .footnotes { margin-top: 3.2em; font-size: .9rem; line-height: 1.6; color: var(--ink-2); }
.prose .footnotes::before { content: ''; display: block; width: 4rem; height: 2px; background: var(--accent); margin-bottom: 1.5em; }
.prose .footnotes ol { padding-left: 1.3em; }
.prose .footnotes li { margin: 0 0 .8em; }
.prose .footnotes li::marker { font-family: var(--sans); font-size: .85em; color: var(--accent); }
.prose .footnotes p { margin: 0; }
.prose [data-footnote-backref] { font-family: var(--sans); text-decoration: none; margin-left: .2em; }
.prose :target { background: var(--accent-soft); border-radius: 3px; transition: background 1.5s; }

.callout { margin: 1.6em 0; padding: 1rem 1.2rem; border-radius: var(--radius); background: var(--surface); border-left: 3px solid var(--accent); font-size: .97em; }
.callout > :last-child { margin-bottom: 0; }
.callout-title { font-family: var(--sans); font-size: .85rem; font-weight: 600; color: var(--accent); margin: 0 0 .35rem !important; }
.callout-tip { border-left-color: var(--patina); } .callout-tip .callout-title { color: var(--patina); }
.callout-warning, .callout-caution { border-left-color: var(--danger); } .callout-warning .callout-title, .callout-caution .callout-title { color: var(--danger); }

.embed { margin: 2em 0; }
.embed iframe { display: block; width: 100%; border: 0; border-radius: var(--radius); background: var(--surface); }
.prose video, .embed video, .embed audio { display: block; width: 100%; border-radius: var(--radius); }
.embed-sandbox iframe { background: transparent; min-height: 3rem; }

.post-footer { padding: 1rem 0 0; }

/* ------------------------------------------------------------ contents sidebar */
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr) min(var(--measure), 100% - 2.5rem) minmax(0, 1fr); }
.post-layout > .prose, .post-layout > .post-footer { grid-column: 2; width: auto; }
.toc {
  grid-column: 1; grid-row: 1 / span 2; justify-self: end; align-self: start;
  position: sticky; top: 6rem; width: 15rem; margin-right: 3.5rem;
  max-height: calc(100vh - 8rem); overflow-y: auto; scrollbar-width: none;
  font-family: var(--sans);
}
.toc::-webkit-scrollbar { display: none; }
.toc-title {
  margin: 0 0 1.1rem; font-family: var(--serif); font-weight: 700; font-size: 1.05rem; line-height: 1.25;
  color: var(--accent); letter-spacing: -0.01em; opacity: 0; transform: translateY(-4px);
  transition: opacity .35s, transform .35s;
}
.toc.show-title .toc-title { opacity: 1; transform: none; }
.toc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; position: relative; }
.toc-list::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--rule); }
.toc-list a {
  position: relative; display: block; padding-left: 1rem; font-size: .86rem; line-height: 1.4;
  color: var(--muted); text-decoration: none; transition: color .2s;
}
.toc-list a::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: transparent; transition: background .2s; }
.toc-list a:hover { color: var(--ink); }
.toc-list a.is-active { color: var(--accent); }
.toc-list a.is-active::before { background: var(--accent); }
.toc-inline { display: none; margin: 0 0 2rem; font-family: var(--sans); font-size: .92rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: .8rem 0; }
.toc-inline summary { cursor: pointer; font-weight: 600; color: var(--ink-2); }
.toc-inline ol { margin: .8rem 0 .2rem; padding-left: 1.3rem; display: grid; gap: .45rem; }
.toc-inline a { color: var(--ink-2); text-decoration: none; }
.toc-inline a:hover { color: var(--accent); }
.prose > .toc-inline:first-child + * { margin-top: 0; }
@media (max-width: 1240px) {
  .toc { display: none; }
  .toc-inline { display: block; }
}
/* the drop cap belongs to the first real paragraph, not the contents box */
.prose > .toc-inline + p::first-letter {
  float: left; font-size: 4.3em; line-height: .78; font-weight: 500; color: var(--accent);
  padding: .055em .085em 0 0; margin-top: .04em;
}
.end-mark { margin: 0 0 2rem; }
.end-mark::before { content: ''; display: inline-block; width: .55rem; height: .55rem; background: var(--accent); transform: rotate(45deg); }
.post-tags { font-family: var(--sans); font-size: .92rem; color: var(--muted); margin: 0 0 2.5rem; }
.post-tags .tag { margin-left: .45rem; }

/* ------------------------------------------------------------ forms */
input, textarea, button, select { font: inherit; }
.subscribe-form { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; max-width: 30rem; }
.subscribe-form input[type='email'] { flex: 1 1 14rem; }
input[type='email'], input[type='text'], input:not([type]), textarea {
  font-family: var(--sans); font-size: 1rem; color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--radius); padding: .72rem .9rem; width: 100%;
}
input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
textarea { resize: vertical; line-height: 1.5; min-height: 8rem; }
button[type='submit'], .button {
  display: inline-block; font-family: var(--sans); font-weight: 600; font-size: 1rem; line-height: 1;
  padding: .82rem 1.2rem; border: 0; border-radius: var(--radius); background: var(--accent); color: var(--accent-ink);
  cursor: pointer; text-decoration: none;
}
button[type='submit']:hover, .button:hover { background: var(--accent-strong); color: var(--accent-ink); }
button[disabled] { opacity: .6; cursor: progress; }
.form-status { flex-basis: 100%; margin: .2rem 0 0; font-family: var(--sans); font-size: .9rem; min-height: 1.2em; }
.form-status.is-ok { color: var(--ok); }
.form-status.is-error { color: var(--danger); }
.link-button { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; }

.subscribe-card { background: var(--surface); border-radius: 12px; padding: 1.6rem 1.6rem 1.3rem; margin: 0 0 3.5rem; }
.subscribe-card h2 { margin: 0; font-size: 1.35rem; font-weight: 560; }
.subscribe-card p { margin: .3rem 0 0; font-family: var(--sans); font-size: .95rem; color: var(--muted); }
.subscribe-card .subscribe-form input { background: var(--paper); }

/* ------------------------------------------------------------ comments */
.comments { padding: 0 0 3rem; }
.comments > h2 { font-size: 1.45rem; font-weight: 560; margin: 0 0 1.5rem; }
.comment-list, .replies { list-style: none; margin: 0; padding: 0; }
.comment { padding: 0 0 1.6rem; }
.comment-head { margin: 0 0 .35rem; font-family: var(--sans); font-size: .9rem; color: var(--muted); display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.comment-name { color: var(--ink); font-weight: 600; }
.comment-date { color: var(--muted); text-decoration: none; }
.comment-date:hover { color: var(--accent); }
.badge { font-size: .72rem; font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: .12rem .45rem; border-radius: 4px; }
.comment-body { font-size: 1.02rem; line-height: 1.6; }
.comment-body p { margin: 0 0 .7em; }
.reply-button { background: none; border: 0; padding: 0; color: var(--muted); font-family: var(--sans); font-size: .85rem; cursor: pointer; }
.reply-button:hover { color: var(--accent); }
.replies .comment:last-child { padding-bottom: 0; }
.replies { margin: 1rem 0 0 .2rem; padding-left: 1.2rem; border-left: 2px solid var(--rule); }
.comments-empty, .comments-closed { font-family: var(--sans); color: var(--muted); font-size: .95rem; }
.comment-form { margin-top: 2rem; padding-top: .5rem; }
.comment-form-title { font-size: 1.2rem; font-weight: 560; margin: 0 0 1rem; }
.field { margin: 0 0 1rem; flex: 1 1 14rem; }
.field label { display: block; font-family: var(--sans); font-size: .88rem; font-weight: 600; margin-bottom: .35rem; }
.field-row { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.hint { font-weight: 400; color: var(--muted); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.fine { margin: 0; font-family: var(--sans); font-size: .85rem; color: var(--muted); }
.replying-to { font-family: var(--sans); font-size: .9rem; margin: 0 0 1rem; color: var(--ink-2); }
.cf-turnstile { margin: 0 0 1rem; }
.more { padding: 1rem 0 3rem; }
.more > h2 { font-size: 1.1rem; font-family: var(--sans); font-weight: 600; margin: 0 0 1.25rem; color: var(--muted); }

/* ------------------------------------------------------------ footer */
.site-footer { background: var(--surface); margin-top: 2rem; padding: 3.2rem 0 2.6rem; }
.footer-inner { display: grid; gap: 2.4rem; }
.subscribe h2 { margin: 0; font-size: 1.5rem; font-weight: 520; letter-spacing: -0.01em; }
.subscribe > p { margin: .35rem 0 0; font-family: var(--sans); font-size: .95rem; color: var(--muted); }
.colophon { margin: 0; font-family: var(--sans); font-size: .85rem; color: var(--muted); }
.colophon a { color: var(--muted); }

.admin-bar { position: fixed; right: 1rem; bottom: 1rem; z-index: 20; display: flex; gap: .2rem; padding: .3rem; border-radius: 999px; background: var(--ink); box-shadow: 0 4px 18px rgb(0 0 0 / .18); font-family: var(--sans); font-size: .85rem; }
.admin-bar a { color: var(--paper); text-decoration: none; padding: .4rem .8rem; border-radius: 999px; }
.admin-bar a:hover { background: var(--accent); color: var(--accent-ink); }

@media (prefers-reduced-motion: reduce) { *, html { transition: none !important; scroll-behavior: auto !important; } }
@media print {
  .site-header, .site-footer, .comments, .more, .subscribe-card, .admin-bar, .theme-toggle { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
}