/* Blog index ("The Wall Edit") layout only. Tokens and components live in site.css.
   Cards come from tools/blog/card.template.html via render.mjs, which tags each one with its
   place in the edit (post--feature | post--pair | post--trio | post--row, see CARD_LAYOUT):
   the newest guide large, two beside each other, a material triptych, then the archive as a ruled list.
   Card photos are 16:9; --pos (set per card from tools/blog/overrides.json) picks the part of the
   photo a narrow box shows (the wall beside the TV, not the TV). */

.nw{white-space:nowrap}
.blog{padding-bottom:clamp(72px,8vw,128px)}
.blog .crumbs{padding-top:var(--space-xs)}

/* ---------- head ---------- */
.blog-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--space-md);align-items:end;padding:clamp(24px,3.2vw,48px) 0 clamp(32px,3.6vw,52px);margin-bottom:clamp(32px,3.6vw,52px);border-bottom:1px solid var(--ink)}
.blog-head__t{grid-column:1 / 8;display:grid;gap:var(--space-sm)}
.blog-head__k{font-size:var(--fs-ui);font-weight:500;color:var(--tobacco)}
.blog-head__lede{grid-column:8 / 13;font-size:var(--fs-lead);line-height:1.5;color:var(--ink-2);max-width:40ch;padding-bottom:.35em}

/* ---------- the edit ---------- */
.posts{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);border-bottom:1px solid var(--rule)}
.post{position:relative;display:grid;align-content:start;gap:var(--space-sm);min-width:0}
.post__media{background:var(--linen)}
.post__media img{object-position:var(--pos,50% 50%);transition:transform 1.4s var(--ease-expo)}
.post:hover .post__media img{transform:scale(1.035)}
.post__body{display:grid;gap:var(--space-xs);align-content:start;min-width:0}
/* separators that never start a line: every item carries its "·" in a slot pulled back over the gap before it;
   the first item of each line has its slot outside the box (clipped), so a wrapped "31 min read" starts clean at 320 px */
.post__meta{--sep:1.1em;display:flex;flex-wrap:wrap;overflow:hidden;font-size:var(--fs-small);line-height:1.4;color:var(--ink-2)}
.post__meta > *{margin:0 var(--sep) 0 calc(var(--sep) * -1);white-space:nowrap}
.post__meta > *::before{content:"·";display:inline-block;width:var(--sep);text-align:center;color:var(--ink-3)}
/* material + room first (its own line), then date · reading time */
.post__meta > .post__tag{flex-basis:100%;margin:0 0 2px;font-weight:500;color:var(--ink);white-space:normal}
.post__meta > .post__tag::before{content:none}
.post__t{font-family:var(--display);font-size:1.375rem;font-weight:440;line-height:1.18;text-wrap:balance}
.post__t a{text-decoration:none}
.post__t a::after{content:"";position:absolute;inset:0;z-index:1}
.post__t a:focus-visible{outline:none}
.post:has(.post__t a:focus-visible){outline:2px solid var(--focus);outline-offset:6px}
.post:hover .post__t a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;text-decoration-color:var(--rule-strong)}
.post__yr{color:var(--ink-3)}
.post__text{font-size:var(--fs-ui);line-height:1.55;color:var(--ink-2);max-width:52ch}
.post__more{display:inline-flex;align-items:center;gap:var(--space-2xs);justify-self:start;margin-top:var(--space-2xs);font-weight:500;text-decoration:underline;text-decoration-color:var(--rule-strong);text-underline-offset:.3em}
.post__more::after{content:"";width:.95em;height:.95em;background:currentColor;-webkit-mask:var(--arr) center/contain no-repeat;mask:var(--arr) center/contain no-repeat;transition:transform .4s var(--ease-expo)}
.post:hover .post__more{text-decoration-color:currentColor}
.post:hover .post__more::after{transform:translateX(4px)}

/* the newest guide: photo across seven columns, words on the right */
.post--feature{grid-column:1 / -1;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start;margin-bottom:clamp(64px,7vw,112px)}
.post--feature .post__media{grid-column:1 / 8;aspect-ratio:3 / 2}
.post--feature .post__body{grid-column:8 / 13;gap:var(--space-sm);padding-top:var(--space-2xs)}
.post--feature .post__t{font-size:clamp(1.875rem,1.25rem + 1.6vw,2.875rem);font-weight:370;line-height:1.06;letter-spacing:-.012em}
.post--feature .post__text{font-size:1.0625rem}

/* two side by side */
.post--pair{grid-column:span 6;margin-bottom:clamp(56px,6vw,96px)}
.post--pair .post__media{aspect-ratio:3 / 2}
.post--pair .post__t{font-size:clamp(1.5rem,1.2rem + .9vw,2rem);font-weight:400;line-height:1.12}

/* three in a row: tall 4:5 crops that show the material, a triptych rather than three TV frames */
.post--trio{grid-column:span 4;margin-bottom:clamp(56px,6vw,96px)}
.post--trio .post__media{aspect-ratio:4 / 5}
.post--trio .post__media img{object-position:var(--pos-trio,var(--pos,50% 50%))}
.post--trio .post__text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.post--trio .post__more{display:none}

/* the archive: a small heading, then a ruled two-column list with small photos */
.posts__label{grid-column:1 / -1;padding-bottom:var(--space-xs);border-bottom:1px solid var(--ink);font-size:var(--fs-small);font-weight:500;line-height:1.4;color:var(--ink-2)}
.post--row{grid-column:span 6;grid-template-columns:200px minmax(0,1fr);column-gap:var(--space-md);align-items:start;padding-block:var(--space-md);border-top:1px solid var(--rule)}
.posts__label + .post--row,.posts__label + .post--row + .post--row{border-top:0}
.post--row .post__media{aspect-ratio:3 / 2}
.post--row .post__body{gap:6px;padding-top:2px}
.post--row .post__t{font-size:1.25rem;line-height:1.2}
.post--row .post__text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin-top:2px;font-size:var(--fs-small);line-height:1.5}
.post--row .post__more{display:none}
.post--row:nth-child(odd of .post--row){padding-right:var(--gutter)}

/* ---------- closing band ---------- */

@media (prefers-reduced-motion:no-preference){
  .blog-head > *{animation:blogRise 1s var(--ease-expo) both}
  .blog-head > :nth-child(2){animation-delay:.08s}
  .post--feature .post__media img{animation:blogSettle 2.2s var(--ease-expo) both}
}
@keyframes blogRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes blogSettle{from{transform:scale(1.04)}to{transform:none}}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .blog-head__t{grid-column:1 / 7}
  .blog-head__lede{grid-column:7 / 13;font-size:1.125rem}
  /* the feature stays a spread: the title is on the first screen at 1024 x 768 */
  .post--feature .post__media{grid-column:1 / 8}
  .post--feature .post__body{grid-column:8 / 13;gap:var(--space-xs)}
  .post--feature .post__t{font-size:clamp(1.625rem,1rem + 1.4vw,2rem);line-height:1.1}
  .post--feature .post__text{font-size:var(--fs-ui)}
  .post--trio .post__t{font-size:1.25rem}
  .post--row{grid-template-columns:160px minmax(0,1fr)}
  .post--row .post__text{display:none}
}
@media (max-width:900px){
  .blog-head__t,.blog-head__lede{grid-column:1 / -1}
  .post--feature{row-gap:var(--space-md)}
  .post--feature .post__media{grid-column:1 / -1;aspect-ratio:2 / 1}
  .post--feature .post__body{grid-column:1 / 11}
}
@media (max-width:760px){
  .page-blog{--section:60px}
  .blog .crumbs{padding-top:0}
  .blog-head{padding:var(--space-2xs) 0 0;row-gap:var(--space-xs);margin-bottom:var(--space-md);border-bottom:0}
  .blog-head__t{gap:var(--space-2xs)}
  .blog-head__k{font-size:var(--fs-small)}
  .blog-head__t .display{font-size:2.5rem}
  .blog-head__lede{font-size:1rem;line-height:1.5;padding-bottom:0}
  .post--feature,.post--pair{grid-column:1 / -1;margin-bottom:var(--space-xl)}
  .post--feature{row-gap:var(--space-sm)}
  .post--feature .post__media{margin-inline:calc(var(--margin) * -1);aspect-ratio:16 / 9}
  .post--feature .post__body{grid-column:1 / -1;gap:var(--space-xs);padding-top:0}
  .post--feature .post__t{font-size:1.75rem;line-height:1.08}
  .post--pair .post__t{font-size:1.5rem}
  /* trios and the archive become one compact ruled list on phones */
  .post--trio,.post--row{grid-column:1 / -1;grid-template-columns:112px minmax(0,1fr);column-gap:var(--space-sm);align-items:start;margin-bottom:0;padding:var(--space-sm) 0;border-top:1px solid var(--rule)}
  .post--pair + .post--trio{border-top-color:var(--ink)}
  .posts__label{margin-top:var(--space-lg)}
  .post--trio .post__media,.post--row .post__media{aspect-ratio:3 / 2}
  .post--trio .post__body,.post--row .post__body{gap:4px}
  .post--trio .post__t,.post--row .post__t{font-size:1.125rem;line-height:1.22}
  .post--trio .post__text{display:none}
  .post--row:nth-child(odd of .post--row){padding-right:0}
  .post__meta{font-size:.8125rem}
}
/* short phones (375 x 667): the lede steps aside so the newest guide's title is on the first screen */
@media (max-width:760px) and (max-height:700px){
  .blog-head__k,.blog-head__lede{display:none}
  .post--feature .post__media{aspect-ratio:2 / 1}
}