/* Equal Blog cards with the user-requested 5% page gutters.
   Palette, type, spacing, corners and motion inherit the current Poto system. */
.blog-section { --blog-bg:var(--poto-paper); --blog-ink:var(--poto-ink); --blog-muted:var(--poto-muted); --blog-rule:var(--poto-rule); position:relative; padding:calc(var(--poto-space-xxl) * 2) 5% var(--poto-space-xl); background:var(--blog-bg); color:var(--blog-ink); scroll-margin-top:calc(var(--poto-control-height) + var(--poto-space-xl)); font-family:'Poto Reference Variable',Arial,sans-serif; }
html[data-landscape-mode='night'] .blog-section { --blog-bg:var(--poto-ink); --blog-ink:var(--poto-paper); --blog-muted:var(--poto-paper); --blog-rule:var(--poto-muted); color-scheme:dark; }
.blog-shell { width:100%; margin:auto; }
.blog-section :is(h1,h2,h3,p,figure) { margin:0; }
.blog-section :is(h2,h3) { font-weight:500; letter-spacing:-.03em; text-wrap:balance; }
.blog-section a { color:inherit; text-decoration:none; text-underline-offset:var(--poto-space-xs); }
.blog-section a:is(:hover,:focus-visible) { text-decoration:underline; }
.blog-section :focus-visible { outline:2px solid currentColor; outline-offset:var(--poto-space-xs); }
.blog-section h2:focus { outline:none; }
.blog-section ::selection { background:var(--blog-ink); color:var(--blog-bg); }
.blog-heading { text-align:center; }
.blog-heading h2 { font-size:clamp(2.5rem,4vw,4rem); line-height:1.08; }
.blog-heading p { color:var(--blog-muted); font-size:.9375rem; line-height:1.65; margin-top:var(--poto-space-md); }
.blog-toolbar { display:flex; align-items:center; justify-content:space-between; gap:var(--poto-space-lg); margin:var(--poto-space-xl) 0 var(--poto-space-xl); }
.blog-search { display:flex; align-items:center; gap:var(--poto-space-sm); flex:0 1 calc(var(--poto-space-xxl) * 6); margin:0; padding:var(--poto-space-xs) var(--poto-space-md); border-radius:var(--poto-control-radius); background:color-mix(in srgb,var(--blog-ink) 5%,var(--blog-bg)); }
.blog-search svg { flex:none; width:var(--poto-space-lg); height:var(--poto-space-lg); transition:transform var(--poto-fast) var(--poto-ease); }
/* Lucide Animated search: a restrained focus response, no perpetual motion. */
.blog-search:focus-within svg { transform:rotate(-12deg); }
.blog-search:focus-within { outline:1px solid var(--blog-muted); }
.blog-search input { border:0; padding:var(--poto-space-xs) 0; min-height:var(--poto-control-height); width:100%; min-width:0; background:transparent; color:inherit; font:inherit; caret-color:var(--blog-ink); outline:none; }
.blog-search input::placeholder { color:var(--blog-muted); opacity:1; }
.blog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:var(--poto-space-lg); }
.blog-card { min-width:0; }
.blog-card-art { display:block; position:relative; overflow:hidden; border-radius:var(--poto-space-lg); }
.blog-card-art img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; }
.blog-category { position:absolute; left:var(--poto-space-md); bottom:var(--poto-space-md); max-width:calc(100% - var(--poto-space-xl)); padding:var(--poto-space-sm) var(--poto-space-md); border-radius:var(--poto-card-radius); background:var(--poto-ink); color:var(--poto-paper); font-size:.8125rem; line-height:1.3; }
.blog-card :is(h2,h3) { font-size:clamp(1.125rem,1.4vw,1.5rem); line-height:1.3; margin:var(--poto-space-lg) 0 var(--poto-space-sm); }
.blog-description { color:var(--blog-muted); font-size:.9375rem; line-height:1.65; text-wrap:pretty; }
.blog-meta { display:grid; gap:var(--poto-space-xs); margin-top:var(--poto-space-lg)!important; color:var(--blog-muted); font-size:.75rem; line-height:1.5; }
.blog-meta time { font-variant-numeric:tabular-nums; }
.blog-filters { display:flex; gap:var(--poto-space-xs); max-width:100%; margin:0; padding:var(--poto-space-xs); border-radius:var(--poto-control-radius); background:color-mix(in srgb,var(--blog-ink) 5%,var(--blog-bg)); overflow-x:auto; scrollbar-width:thin; }
.blog-filters button,.blog-empty button { border:0; border-radius:var(--poto-control-radius); padding:var(--poto-space-sm) var(--poto-space-md); min-height:var(--poto-control-height); color:var(--blog-ink); font:inherit; font-size:.875rem; white-space:nowrap; background:transparent; cursor:pointer; }
.blog-filters button[aria-pressed='true'],.blog-empty button { background:var(--blog-ink); color:var(--blog-bg); }
.blog-filters button:not([aria-pressed='true']):hover { background:color-mix(in srgb,var(--blog-ink) 8%,transparent); }
.blog-grid.is-filtered { grid-template-columns:repeat(3,minmax(0,1fr)); }
.blog-empty { padding:var(--poto-space-xxl); min-height:calc(var(--poto-space-xxl) * 6); text-align:center; }
.blog-empty h3 { font-size:2rem; }
.blog-empty p { margin-block:var(--poto-space-lg); color:var(--blog-muted); }
/* Article reuses the Project sheet: same 1:1.5:1 grid, material and opening geometry. */
/* Local reading scale reuses the existing 18px lead and 24px heading sizes. */
.blog-sheet { --blog-reading-size:1.125rem; --blog-reading-leading:1.65; font-family:'Poto Reference Variable',Arial,sans-serif; }
html[data-landscape-mode='night'] .blog-sheet { --case-secondary:var(--poto-paper); }
.blog-sheet :is(h1,h2,h3) { font-family:inherit; }
.blog-sheet :is(.blog-article-lead,.blog-chapter-copy,.blog-article-ending) :is(p,li,dt,dd,blockquote) { font-size:var(--blog-reading-size); line-height:var(--blog-reading-leading); letter-spacing:0; text-wrap:pretty; }
.blog-sheet .case-aside p { max-width:none; }
.blog-sheet :is(.blog-article-lead,.blog-chapter-copy,.blog-article-ending) { max-width:60ch; font-size:var(--blog-reading-size); }
.blog-sheet h1 { font-size:clamp(2rem,3vw,3.5rem); line-height:1.12; }
.blog-sheet h2 { font-size:1.5rem; line-height:1.3; font-weight:600; max-width:24ch; text-wrap:pretty; }
.blog-sheet .case-topline { margin-bottom:var(--poto-space-xl); }
.blog-sheet [data-blog-back] { display:inline-flex; gap:var(--poto-space-sm); align-items:center; min-height:var(--poto-control-height); text-decoration:none; }
.blog-sheet [data-blog-back]:is(:hover,:focus-visible) { text-decoration:underline; }
.blog-sheet [data-blog-back]:is(:hover,:focus-visible) .case-back-head { animation:case-back-head calc(var(--poto-fast) * 2) var(--poto-ease); }
.blog-sheet [data-blog-back]:is(:hover,:focus-visible) .case-back-shaft { animation:case-back-shaft calc(var(--poto-fast) * 2) var(--poto-ease); }
.blog-sheet figure { margin:0; }
.blog-sheet :is(img,video) { display:block; width:100%; height:auto; border-radius:var(--poto-space-lg); }
.blog-sheet video { max-height:75dvh; object-fit:contain; background:transparent; }
.blog-sheet figcaption { color:var(--case-secondary); font-size:.875rem; line-height:1.5; margin:var(--poto-space-sm) 0 var(--poto-space-md); }
.blog-sheet .blog-meta { color:var(--case-secondary); font-size:.8125rem; }
.blog-sheet .case-themes { font-size:.8125rem; line-height:1.6; }
.blog-sheet .blog-article-lead p + p,.blog-sheet .blog-chapter-copy p + p { margin-top:var(--poto-space-lg); }
.blog-sheet .blog-article-lead p:first-child { color:var(--case-fg); }
.blog-sheet .blog-chapter { margin-top:var(--poto-space-xxl); }
.blog-sheet .blog-chapter-text .blog-chapter-copy { grid-column:2/4; max-width:60ch; }
.blog-sheet .blog-storyPair,.blog-sheet .blog-referenceImagePair { display:grid; gap:calc(var(--poto-space-lg) / 2); }
.blog-sheet blockquote { margin:var(--poto-space-lg) 0 0; padding-left:var(--poto-space-lg); border-left:1px solid currentColor; font-weight:500; color:var(--case-fg); }
.blog-sheet ol { display:grid; gap:var(--poto-space-lg); margin:0; padding-left:var(--poto-space-lg); }
.blog-sheet li { margin:0; padding-left:var(--poto-space-sm); }
.blog-sheet li::marker { font-size:inherit; font-weight:500; }
.blog-sheet li strong { display:block; margin-bottom:var(--poto-space-xs); font-weight:600; }
.blog-sheet li > span { display:none; }
.blog-sheet dt { margin-bottom:var(--poto-space-sm); font-weight:600; }
.blog-sheet dd { margin:0 0 var(--poto-space-lg); color:var(--case-secondary); }
.blog-sheet .blog-article-ending { max-width:42rem; margin:var(--poto-space-xxl) auto; }
.blog-sheet .blog-article-ending small { display:block; margin-top:var(--poto-space-lg); color:var(--case-secondary); line-height:1.8; font-size:.8125rem; }
.blog-sheet .case-related-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:900px) { .blog-grid,.blog-grid.is-filtered { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px) { .blog-sheet .blog-chapter-text .blog-chapter-copy { grid-column:1; } }
@media(max-width:600px) { .blog-section { padding:var(--poto-space-xxl) 5%; } .blog-heading :is(h1,h2) { font-size:2.5rem; } .blog-grid,.blog-grid.is-filtered { grid-template-columns:1fr; } .blog-filters { position:relative; bottom:auto; width:100%; } .blog-filters button { padding-inline:var(--poto-space-sm); font-size:.75rem; } .blog-sheet .case-related-grid { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { .blog-search svg { transition:none; } .blog-sheet [data-blog-back] :is(.case-back-head,.case-back-shaft) { animation:none!important; } }
.reduce-motion .blog-search svg { transition:none; }
.reduce-motion .blog-sheet [data-blog-back] :is(.case-back-head,.case-back-shaft) { animation:none!important; }
@supports not (backdrop-filter:blur(1px)) { .blog-filters { background:var(--blog-bg); } }
@media(prefers-reduced-transparency:reduce) { .blog-filters { background:var(--blog-bg); backdrop-filter:none; -webkit-backdrop-filter:none; } }

/* The two controls share one quiet row; stacking is only a narrow-width fallback. */
@media(max-width:700px) { .blog-toolbar { flex-wrap:wrap; } .blog-toolbar .blog-search { flex-basis:100%; } }
.blog-sheet .blog-chapter-text .case-aside p { max-width:none; }

.blog-heading h1 { font-size:clamp(2.5rem,4vw,4rem); line-height:1.08; font-weight:500; letter-spacing:-.03em; }
/* Direct article URLs reuse the same material and geometry without booting portfolio scenes. */
.blog-standalone { overflow-y:auto; background:var(--poto-paper); color:var(--poto-ink); }
.blog-standalone.is-blog-article { background:var(--poto-paper) url('/potodesign/assets/forest-lake-day-poster-v1.jpg') center/cover fixed; }
.blog-standalone .poto-header { background:var(--poto-paper); color:var(--poto-ink); }
.blog-standalone .poto-header::before { background:var(--poto-paper)!important; }
.blog-standalone .blog-section { padding-top:calc(var(--poto-space-xxl) * 3); min-height:100dvh; }
html[data-landscape-mode='night'] .blog-standalone .poto-header { color:var(--poto-paper); background:var(--poto-ink); }
html[data-landscape-mode='night'] .blog-standalone .poto-header::before { background:var(--poto-ink)!important; }
html[data-landscape-mode='night'] .blog-standalone .wordmark-logo { filter:none; }

.blog-search input:focus-visible { outline:none; }

/* Word masks keep the heading reveal within its original line box. */
.blog-title-mask { display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.12em; margin-bottom:-.12em; }
.blog-title-word { display:inline-block; }

/* The shell stays in normal document flow; native scrolling supplies a short
   65vh chapter beat. No wheel interception or nested scrolling. */
.blog-section.has-scroll-hold { min-height:var(--blog-track-height); }
.has-scroll-hold .blog-shell { position:sticky; top:var(--blog-pin-top); }
@media(prefers-reduced-motion:reduce) {
  .blog-section.has-scroll-hold { min-height:0; }
  .has-scroll-hold .blog-shell { position:static; }
}