/* ===========================================================
   Echo Sinclair — personal site & field-notes blog
   Forked & extended from the Echo Sinclair design-system kit.
   Editorial · warm paper · cairn motif. Reading-first.
   =========================================================== */
@import url('tokens.css');

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--paper); color: var(--ink); font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
button { font: inherit; cursor: pointer; }
a { color: var(--pine); text-decoration: none; }

/* ---- accent / paper / reading tweaks ------------------------------ */
.es-root[data-accent="moss"]  { --pine: #3F6B47; --pine-deep: #244A30; }
.es-root[data-accent="clay"]  { --pine: #9A5A36; --pine-deep: #5E3620; --moss: #B06A41; }
.es-root[data-paper="light"]  { --paper: #FAF8F1; --paper-raised: #FFFFFF; --paper-sunken: #F2EEE2; }
.es-root[data-paper="dusk"]   { --paper: #ECE7D8; --paper-raised: #F4F0E3; --paper-sunken: #E2DCCB; }
.es-root[data-reading="large"] .es-prose { font-size: 1.42rem; }
.es-root { background: var(--paper); transition: background var(--dur) var(--ease); }

.es-app { min-height: 100vh; display: flex; flex-direction: column; }
.es-main { flex: 1; }

/* ---- shared primitives -------------------------------------------- */
.es-eyebrow { font-family: var(--font-sans); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--moss); }
.es-btn {
  display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-sans);
  font-weight: 600; font-size: 0.9rem; border-radius: var(--r-pill); padding: 10px 18px;
  border: 1px solid transparent; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.es-btn:active { transform: scale(0.98); }
.es-btn--primary { background: var(--pine); color: #FBFAF3; }
.es-btn--primary:hover { background: var(--pine-deep); }
.es-btn--secondary { background: transparent; color: var(--pine); border-color: var(--line-strong); }
.es-btn--secondary:hover { border-color: var(--pine); background: var(--sage-tint); }
.es-btn--ghost { background: transparent; color: var(--ink-2); }
.es-btn--ghost:hover { color: var(--pine); background: var(--paper-sunken); }
.es-btn .ph { font-size: 1.05em; }

.es-iconbtn { width: 38px; height: 38px; border-radius: var(--r-pill); border: none; background: transparent; color: var(--ink-2); display: grid; place-items: center; font-size: 1.15rem; transition: background var(--dur-fast), color var(--dur-fast); }
.es-iconbtn:hover { background: var(--paper-sunken); color: var(--pine); }

.es-cairn-div { display: flex; align-items: center; justify-content: center; gap: 14px; margin: var(--s-7) 0; }
.es-cairn-div::before, .es-cairn-div::after { content: ""; height: 1px; background: var(--line); flex: 1; max-width: 120px; }
.es-cairn-div__dots { display: flex; gap: 6px; align-items: center; }
.es-cairn-div__dots i { width: 5px; height: 5px; border-radius: 999px; background: var(--moss); display: block; }
.es-cairn-div__dots i:nth-child(2) { width: 8px; height: 8px; background: var(--pine); }
.es-cairn-div__label { font-family: var(--font-sans); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }

/* ---- art ----------------------------------------------------------- */
.es-art { width: 100%; height: 100%; background: var(--paper-sunken); }
.es-art svg { width: 100%; height: 100%; display: block; }

/* ---- wordmark ------------------------------------------------------ */
.es-wordmark { display: inline-flex; align-items: center; gap: 11px; background: none; border: none; padding: 0; }
.es-wordmark__name { font-family: var(--font-serif); font-weight: 500; font-size: 1.4rem; letter-spacing: -0.02em; white-space: nowrap; }

/* ---- header -------------------------------------------------------- */
.es-header { position: sticky; top: 0; z-index: 40; transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur); border-bottom: 1px solid transparent; }
.es-header.is-scrolled { background: rgba(246,243,234,0.82); backdrop-filter: blur(12px) saturate(1.1); border-bottom-color: var(--line); box-shadow: var(--shadow-xs); }
.es-root[data-paper="light"] .es-header.is-scrolled { background: rgba(250,248,241,0.84); }
.es-root[data-paper="dusk"]  .es-header.is-scrolled { background: rgba(236,231,216,0.85); }
.es-header__inner { max-width: 1120px; margin: 0 auto; padding: 16px 32px; display: flex; align-items: center; gap: 24px; }
.es-nav { display: flex; gap: 4px; margin-left: 12px; }
.es-nav__link { background: none; border: none; padding: 8px 14px; border-radius: var(--r-pill); font-family: var(--font-sans); font-weight: 500; font-size: 0.92rem; color: var(--ink-2); white-space: nowrap; transition: color var(--dur-fast), background var(--dur-fast); }
.es-nav__link:hover { color: var(--pine); }
.es-nav__link.is-active { color: var(--pine); background: var(--sage-tint); }
.es-header__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ---- layout -------------------------------------------------------- */
.es-page { max-width: 1120px; margin: 0 auto; padding: 0 32px; }
.es-page--narrow { max-width: 760px; }

/* ---- hero (3 variants) -------------------------------------------- */
.es-hero { padding: 84px 0 36px; }
.es-hero__display { font-family: var(--font-serif); font-weight: 400; font-size: clamp(3rem, 6.4vw, 5.4rem); line-height: 1.0; letter-spacing: -0.025em; margin: 18px 0 0; color: var(--ink); text-wrap: balance; }
.es-hero__display em { font-style: italic; color: var(--moss); }
.es-hero__intro { font-family: var(--font-serif); font-size: 1.4rem; line-height: 1.55; color: var(--ink-2); max-width: 42ch; margin: 26px 0 0; }
.es-hero__cta { display: flex; align-items: center; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.es-subscribe { display: flex; gap: 8px; background: var(--paper-raised); border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 5px 5px 5px 18px; max-width: 360px; }
.es-subscribe input { flex: 1; border: none; background: none; outline: none; font-family: var(--font-sans); font-size: 0.95rem; color: var(--ink); min-width: 0; }
.es-subscribe input::placeholder { color: var(--ink-3); }

/* variant: stacked (default) = above. variant: split */
.es-hero--split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.es-hero--split .es-hero__art { aspect-ratio: 4/5; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--line); }
.es-hero--split .es-hero__intro { max-width: 38ch; }
/* variant: minimal */
.es-hero--minimal { padding: 120px 0 44px; max-width: 900px; }
.es-hero--minimal .es-hero__display { font-size: clamp(3.2rem, 7.2vw, 6rem); }
.es-hero--minimal .es-hero__byline { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 0.92rem; margin-top: 30px; }
.es-hero--minimal .es-hero__byline span { height: 1px; flex: 1; max-width: 80px; background: var(--line-strong); }

/* ---- section heads ------------------------------------------------ */
.es-sec { padding: 40px 0; }
.es-sec__head { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--line-strong); padding-bottom: 14px; margin-bottom: 28px; gap: 16px; }
.es-sec__title { font-family: var(--font-serif); font-weight: 500; font-size: 1.9rem; letter-spacing: -0.01em; margin: 6px 0 0; }
.es-sec__more { background: none; border: none; color: var(--pine); font-weight: 600; font-size: 0.9rem; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; transition: gap var(--dur-fast); }
.es-sec__more:hover { gap: 9px; }

/* ---- latest feature ----------------------------------------------- */
.es-latest { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--paper-raised); box-shadow: var(--shadow-sm); transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); text-align: left; width: 100%; cursor: pointer; }
.es-latest:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.es-latest__art { min-height: 320px; }
.es-latest__body { padding: 40px 40px; display: flex; flex-direction: column; justify-content: center; }
.es-latest__title { font-family: var(--font-serif); font-weight: 500; font-size: 2.4rem; line-height: 1.07; letter-spacing: -0.018em; margin: 14px 0 14px; color: var(--ink); }
.es-latest:hover .es-latest__title { color: var(--pine); }
.es-latest__dek { font-family: var(--font-serif); font-size: 1.18rem; line-height: 1.55; color: var(--ink-2); margin: 0 0 22px; max-width: 42ch; }
.es-latest__meta { font-size: 0.82rem; color: var(--ink-3); display: flex; gap: 12px; align-items: center; }

/* ---- post grid ---------------------------------------------------- */
.es-postgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; }
.es-post { text-align: left; background: none; border: none; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.es-post__thumb { aspect-ratio: 16/10; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.es-post:hover .es-post__thumb { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.es-post__title { font-family: var(--font-serif); font-weight: 500; font-size: 1.4rem; line-height: 1.16; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
.es-post:hover .es-post__title { color: var(--pine); }
.es-post__dek { font-size: 0.92rem; color: var(--ink-2); line-height: 1.5; margin: 0; }
.es-post__meta { font-size: 0.76rem; color: var(--ink-3); letter-spacing: 0.02em; }

/* ---- archive (blog index) ----------------------------------------- */
.es-archive-head { padding: 72px 0 8px; }
.es-archive-title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(2.4rem,5vw,3.6rem); letter-spacing: -0.02em; margin: 14px 0 10px; }
.es-archive-sub { font-family: var(--font-serif); font-size: 1.3rem; color: var(--ink-2); max-width: 48ch; margin: 0; }

.es-filter { display: flex; align-items: center; gap: 14px; margin: 32px 0 0; flex-wrap: wrap; }
.es-search { display: flex; align-items: center; gap: 9px; background: var(--paper-raised); border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 9px 16px; flex: 1; min-width: 220px; max-width: 360px; color: var(--ink-3); }
.es-search input { border: none; background: none; outline: none; font-family: var(--font-sans); font-size: 0.95rem; color: var(--ink); flex: 1; min-width: 0; }
.es-search:focus-within { border-color: var(--moss); box-shadow: var(--shadow-ring); }
.es-count { font-size: 0.82rem; color: var(--ink-3); margin-left: auto; white-space: nowrap; }

.es-tagbar { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 4px; }
.es-tagbtn { font-family: var(--font-sans); font-weight: 600; font-size: 0.74rem; letter-spacing: 0.02em; padding: 6px 13px; border-radius: var(--r-pill); background: var(--paper-raised); border: 1px solid var(--line); color: var(--ink-2); transition: all var(--dur-fast); }
.es-tagbtn:hover { border-color: var(--moss); color: var(--pine); }
.es-tagbtn.is-on { background: var(--pine); border-color: var(--pine); color: #FBFAF3; }
.es-tagbtn__n { opacity: 0.6; margin-left: 5px; font-variant-numeric: tabular-nums; }

.es-list { margin-top: 26px; border-top: 1px solid var(--line-strong); }
.es-row { display: grid; grid-template-columns: 96px 84px 1fr auto; gap: 24px; align-items: baseline; padding: 24px 4px; border-bottom: 1px solid var(--line); text-align: left; background: none; border-left: none; border-right: none; border-top: none; width: 100%; transition: background var(--dur-fast); }
.es-row:hover { background: var(--paper-raised); }
.es-row__thumb { grid-row: span 1; width: 96px; height: 60px; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line); align-self: center; }
.es-row:hover .es-row__title { color: var(--pine); }
.es-row__date { font-size: 0.8rem; color: var(--ink-3); font-variant-numeric: tabular-nums; align-self: center; }
.es-row__title { font-family: var(--font-serif); font-weight: 500; font-size: 1.5rem; line-height: 1.15; margin: 0 0 7px; letter-spacing: -0.01em; }
.es-row__dek { font-size: 0.93rem; color: var(--ink-2); margin: 0; max-width: 60ch; line-height: 1.5; }
.es-row__read { font-size: 0.78rem; color: var(--ink-3); white-space: nowrap; align-self: center; }
.es-row__empty { padding: 60px 0; text-align: center; font-family: var(--font-serif); font-size: 1.3rem; color: var(--ink-2); }

/* ---- pagination ---------------------------------------------------- */
.es-pager { display: flex; align-items: center; justify-content: space-between; padding: 36px 0 12px; gap: 16px; }
.es-pager__nums { display: flex; gap: 4px; align-items: center; }
.es-pager__b { min-width: 38px; height: 38px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid transparent; background: none; color: var(--ink-2); font-weight: 600; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 6px; transition: all var(--dur-fast); }
.es-pager__b:hover:not(:disabled) { color: var(--pine); background: var(--sage-tint); }
.es-pager__b.is-on { background: var(--pine); color: #FBFAF3; }
.es-pager__b:disabled { color: var(--ink-4); cursor: default; }
.es-pager__dots { color: var(--ink-3); padding: 0 4px; }

/* ---- article ------------------------------------------------------- */
.es-article { padding: 40px 0 32px; }
.es-article__hero { max-width: 1120px; margin: 0 auto; padding: 0 32px; }
.es-article__heroart { aspect-ratio: 21/9; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); margin-top: 8px; }
.es-article__head { max-width: 760px; margin: 36px auto 0; text-align: center; padding: 0 32px; }
.es-article__title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1.06; letter-spacing: -0.02em; margin: 16px 0 18px; text-wrap: balance; }
.es-article__meta { display: flex; gap: 14px; justify-content: center; align-items: center; color: var(--ink-3); font-size: 0.88rem; }
.es-article__dot { width: 3px; height: 3px; border-radius: 999px; background: var(--ink-3); }
.es-article__body { max-width: 64ch; margin: 44px auto 0; padding: 0 32px; }
.es-backlink { background: none; border: none; color: var(--pine); font-weight: 600; font-size: 0.9rem; display: inline-flex; gap: 7px; align-items: center; padding: 0; margin: 0 0 4px; white-space: nowrap; transition: gap var(--dur-fast); }
.es-backlink:hover { gap: 11px; }

/* prose — targets standard HTML elements (from kramdown/markdown output) */
.es-prose { font-family: var(--font-serif); font-size: 1.27rem; line-height: 1.72; color: var(--ink); }
.es-prose p { margin: 0 0 1.35em; }
.es-prose em { font-style: italic; }
.es-prose strong { font-weight: 600; }
.es-prose code { font-family: var(--font-mono); font-size: 0.86em; background: var(--paper-sunken); padding: 0.1em 0.4em; border-radius: var(--r-xs); }
.es-prose pre { background: var(--paper-sunken); padding: 1em 1.2em; border-radius: var(--r-md); overflow-x: auto; margin: 1.4em 0; }
.es-prose pre code { background: none; padding: 0; font-size: 0.88em; }
.es-prose a { color: var(--pine); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: var(--line-strong); transition: text-decoration-color var(--dur-fast); }
.es-prose a:hover { text-decoration-color: var(--pine); }
.es-root[data-dropcap="on"] .es-prose > p:first-child::first-letter { font-size: 3.4em; line-height: 0.78; float: left; font-weight: 500; padding: 0.04em 0.1em 0 0; color: var(--pine); font-family: var(--font-serif); }
.es-prose h2, .es-prose h3, .es-prose h4 { font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.012em; line-height: 1.18; margin: 1.7em 0 0.5em; }
.es-prose h2 { font-size: 1.72rem; }
.es-prose h3 { font-size: 1.34rem; color: var(--ink); }
.es-prose h4 { font-size: 1.1rem; font-family: var(--font-sans); font-weight: 600; }
.es-prose blockquote { margin: 1.6em 0; padding-left: 1.1em; border-left: 3px solid var(--moss); font-style: italic; color: var(--ink-2); font-size: 1.15rem; }
.es-prose blockquote p { margin-bottom: 0.5em; }
.es-prose blockquote p:last-child { margin-bottom: 0; }
.es-prose ul, .es-prose ol { margin: 1.2em 0; padding-left: 1.3em; }
.es-prose ul li, .es-prose ol li { margin: 0.4em 0; padding-left: 0.2em; }
.es-prose ul li::marker { color: var(--moss); }
.es-prose hr { border: none; height: auto; background: none; margin: 2.2em 0; text-align: center; overflow: visible; }
.es-prose hr::after { content: "·  ◆  ·"; color: var(--moss); letter-spacing: 0.5em; font-size: 0.7rem; }
.es-prose img { max-width: 100%; height: auto; border-radius: var(--r-md); }
.es-prose .lead-img { display: none; }

/* tags + share */
.es-article__foot { max-width: 64ch; margin: 0 auto; padding: 0 32px; }
.es-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.es-tag { font-family: var(--font-sans); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.03em; padding: 5px 12px; border-radius: var(--r-pill); background: var(--sage-tint); color: var(--pine-deep); border: none; transition: background var(--dur-fast); }
.es-tag:hover { background: var(--lichen); }

/* prev / next */
.es-adjacent { max-width: 880px; margin: 56px auto 0; padding: 0 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.es-adj { text-align: left; background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 22px; transition: all var(--dur) var(--ease); }
.es-adj:hover { border-color: var(--moss); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.es-adj.is-next { text-align: right; }
.es-adj__lbl { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--moss); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.es-adj.is-next .es-adj__lbl { justify-content: flex-end; }
.es-adj__t { font-family: var(--font-serif); font-weight: 500; font-size: 1.2rem; line-height: 1.2; margin: 8px 0 0; color: var(--ink); }
.es-adj:hover .es-adj__t { color: var(--pine); }

/* ---- about --------------------------------------------------------- */
.es-about { padding: 72px 0; display: grid; grid-template-columns: 260px 1fr; gap: 56px; align-items: start; }
.es-about__portrait { width: 260px; aspect-ratio: 4/5; border-radius: var(--r-lg); overflow: hidden; position: sticky; top: 100px; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.es-about__lede { font-family: var(--font-serif); font-size: 1.8rem; line-height: 1.36; color: var(--ink); margin: 14px 0 1em; letter-spacing: -0.01em; }
.es-about .es-prose { font-size: 1.18rem; }
.es-about__defs { list-style: none; padding: 0; margin: 0.4em 0 1.4em; display: flex; flex-direction: column; gap: 12px; }
.es-about__defs li { font-family: var(--font-sans); font-size: 1rem; color: var(--ink-2); line-height: 1.5; padding-left: 18px; position: relative; }
.es-about__defs li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; border-radius: 999px; background: var(--moss); }
.es-about__defs strong { color: var(--ink); font-weight: 600; }
.es-contact { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.es-contact a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); color: var(--ink); font-size: 0.9rem; font-weight: 500; transition: all var(--dur-fast); }
.es-contact a:hover { border-color: var(--pine); color: var(--pine); background: var(--sage-tint); }
.es-contact .ph { font-size: 1.1em; color: var(--moss); }

/* ---- projects ------------------------------------------------------ */
.es-projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.es-project { display: flex; flex-direction: column; background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: all var(--dur) var(--ease); }
.es-project:hover { border-color: var(--moss); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.es-project__art { aspect-ratio: 16/9; border-bottom: 1px solid var(--line); }
.es-project__body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.es-project__status { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--ember); margin-bottom: 8px; }
.es-project__title { font-family: var(--font-serif); font-weight: 500; font-size: 1.5rem; letter-spacing: -0.01em; margin: 0 0 10px; }
.es-project__dek { font-size: 0.95rem; color: var(--ink-2); line-height: 1.55; margin: 0 0 18px; flex: 1; }
.es-project__links { display: flex; gap: 14px; flex-wrap: wrap; }
.es-project__links a, .es-project__links button { background: none; border: none; padding: 0; color: var(--pine); font-weight: 600; font-size: 0.88rem; display: inline-flex; align-items: center; gap: 6px; transition: gap var(--dur-fast); }
.es-project__links a:hover, .es-project__links button:hover { gap: 9px; }

/* ---- newsletter band ---------------------------------------------- */
.es-cta-band { background: var(--pine-deep); border-radius: var(--r-lg); padding: 56px 48px; text-align: center; color: #E7ECE0; margin: 8px 0; position: relative; overflow: hidden; }
.es-cta-band__art { position: absolute; inset: 0; opacity: 0.16; }
.es-cta-band__inner { position: relative; }
.es-cta-band h2 { font-family: var(--font-serif); font-weight: 500; font-size: 2.2rem; color: #FBFAF3; margin: 12px 0 10px; letter-spacing: -0.015em; }
.es-cta-band p { color: var(--sage); font-family: var(--font-serif); font-size: 1.2rem; max-width: 40ch; margin: 0 auto 26px; }
.es-cta-band .es-subscribe { margin: 0 auto; background: rgba(251,250,243,0.95); border-color: transparent; }
.es-cta-band__eyebrow { color: var(--ember); }

/* ---- footer -------------------------------------------------------- */
.es-footer { background: var(--pine-deep); color: #C3D0BC; margin-top: 48px; }
.es-footer__inner { max-width: 1120px; margin: 0 auto; padding: 56px 32px 32px; display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.es-footer__motto { font-family: var(--font-serif); font-style: italic; font-size: 1.15rem; color: var(--sage); margin: 16px 0 0; max-width: 30ch; }
.es-footer__cols { display: flex; gap: 56px; flex-wrap: wrap; }
.es-footer__col { display: flex; flex-direction: column; gap: 11px; }
.es-footer__h { font-family: var(--font-sans); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage); margin-bottom: 4px; }
.es-footer__col a, .es-footer__col button { background: none; border: none; color: #C3D0BC; text-align: left; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 8px; padding: 0; transition: color var(--dur-fast); }
.es-footer__col a:hover, .es-footer__col button:hover { color: #FBFAF3; }
.es-footer__col--community a { align-items: flex-start; }
.es-footer__col--community .ph { line-height: 1.5; }
.es-footer__lk { display: flex; flex-direction: column; gap: 2px; }
.es-footer__note { color: var(--moss); font-size: 0.82rem; }
.es-footer__col a:hover .es-footer__note { color: var(--sage); }
.es-footer__base { max-width: 1120px; margin: 0 auto; padding: 22px 32px; border-top: 1px solid var(--line-on-dark); display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--sage); flex-wrap: wrap; gap: 8px; }

/* ---- entrance ------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .es-rise { animation: esrise var(--dur-slow) var(--ease); }
  .es-rise-1 { animation-delay: 0.04s; } .es-rise-2 { animation-delay: 0.10s; }
  .es-rise-3 { animation-delay: 0.16s; } .es-rise-4 { animation-delay: 0.22s; }
  /* transform-only: base state is always fully visible, so a paused/backgrounded
     timeline never leaves content hidden (opacity is never animated to 0). */
  @keyframes esrise { from { transform: translateY(12px); } to { transform: none; } }
}

/* ---- responsive ---------------------------------------------------- */
@media (max-width: 920px) {
  .es-postgrid, .es-projects { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .es-nav { display: none; }
  .es-latest, .es-hero--split, .es-about { grid-template-columns: 1fr; }
  .es-hero--split .es-hero__art { display: none; }
  .es-about__portrait { position: static; width: 180px; }
  .es-row { grid-template-columns: 70px 1fr; gap: 14px; }
  .es-row__thumb, .es-row__read { display: none; }
}
@media (max-width: 560px) {
  .es-postgrid, .es-projects { grid-template-columns: 1fr; }
  .es-header__inner, .es-page { padding-left: 20px; padding-right: 20px; }
  .es-adjacent { grid-template-columns: 1fr; }
}