/* News: the list of posts and each post. Same paper-white type and rust accent as the home page. */
:root {
  color-scheme: dark;
  --night: #070707;
  --panel: #111110;
  --line: rgba(237, 230, 214, .12);
  --ink: #EDE6D6;
  --ink-soft: rgba(237, 230, 214, .8);
  --ink-dim: rgba(237, 230, 214, .5);
  --rust: #B5562A;
  --rust-hi: #D06A37;
  --display: "Cormorant Garamond", "Times New Roman", serif;
  --label: "Archivo", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--night); color: var(--ink); font: 400 16px/1.7 var(--label); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img, video, iframe { display: block; max-width: 100%; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.caps { font: 500 10.5px/1.3 var(--label); letter-spacing: .24em; text-transform: uppercase; }
body::after { content: ""; position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.2 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Menu, as on the home page */
.menu { display: flex; justify-content: center; gap: clamp(13px, 4.5vw, 64px); padding: max(26px, env(safe-area-inset-top)) 16px 0; margin: 0; list-style: none; }
.menu a { font: 500 11.5px/1 var(--label); letter-spacing: .26em; text-transform: uppercase; text-decoration: none; color: rgba(237,230,214,.6); padding: 6px 0; transition: color .2s; }
.menu a:hover, .menu [aria-current] { color: var(--ink); }

/* ---------- News index ---------- */
.page-head { max-width: 1040px; margin: clamp(60px, 10vw, 120px) auto clamp(30px, 5vw, 56px); padding: 0 20px; text-align: center; }
.page-head h1 { margin: 0 0 8px; font: 500 clamp(56px, 9vw, 112px)/.92 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.page-head p { margin: 0; color: var(--ink-dim); }
.posts { max-width: 1040px; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 32px); }
.post-card { display: grid; grid-template-rows: auto 1fr; text-decoration: none; border-top: 1px solid var(--line); padding-top: 18px; }
.post-card .img { aspect-ratio: 3 / 2; overflow: hidden; background: #000; }
.post-card .img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.post-card:hover .img img { transform: scale(1.03); }
.post-card .txt { padding-top: 16px; }
.post-card .txt .caps { color: var(--ink-dim); }
.post-card h2 { margin: 8px 0 6px; font: 500 clamp(26px, 3vw, 34px)/1.1 var(--display); }
.post-card p { margin: 0; color: var(--ink-dim); font-size: 14.5px; }
.post-card:hover h2 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.post-card.featured { grid-column: 1 / -1; grid-template-columns: 1.35fr 1fr; grid-template-rows: auto; gap: clamp(20px, 3vw, 40px); align-items: center; }
.post-card.featured .txt { padding: 0; }
.post-card.featured h2 { font-size: clamp(34px, 4.4vw, 54px); }

/* ---------- A post ---------- */
.post { max-width: 720px; margin: clamp(56px, 9vw, 110px) auto 0; padding: 0 20px; }
.post .back { display: inline-block; margin-bottom: 26px; color: var(--ink-dim); text-decoration: none; }
.post .back:hover { color: var(--ink); }
.post h1 { margin: 0 0 14px; font: 500 clamp(42px, 6.4vw, 72px)/1 var(--display); letter-spacing: .01em; }
.post .dek { margin: 0 0 18px; font: italic 500 clamp(20px, 2.4vw, 24px)/1.4 var(--display); color: var(--ink-soft); }
.post .byline { color: var(--ink-dim); padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.post .cover { margin: 32px -20px 0; }
.post .cover img { width: 100%; }
.prose { padding-top: 30px; }
.prose p { margin: 0 0 1.25em; color: var(--ink-soft); }
.prose h2 { margin: 1.8em 0 .5em; font: 500 32px/1.15 var(--display); }
.prose figure { margin: 2em 0; }
.prose figure img, .prose figure video { width: 100%; }
.prose figure.portrait { max-width: 360px; margin-inline: auto; }
.prose figcaption { margin-top: 10px; font-size: 13px; color: var(--ink-dim); }
.prose blockquote { margin: 2em 0; padding: 0 0 0 22px; border-left: 2px solid var(--rust); font: italic 500 26px/1.35 var(--display); color: var(--ink); }
.prose .listen { margin: 2em 0; }
.prose .listen iframe { width: 100%; border: 0; border-radius: 12px; }
.post-nav { display: flex; justify-content: space-between; gap: 20px; max-width: 720px; margin: 40px auto 0; padding: 26px 20px 0; border-top: 1px solid var(--line); }
.post-nav a { text-decoration: none; max-width: 48%; }
.post-nav a span { display: block; color: var(--ink-dim); }
.post-nav a strong { font: 500 21px/1.2 var(--display); }
.post-nav a:hover strong { text-decoration: underline; text-underline-offset: 4px; }
.post-nav .next { margin-left: auto; text-align: right; }

/* Footer, as on the home page */
footer.small { margin-top: clamp(60px, 9vw, 110px); padding: 30px 16px max(18px, env(safe-area-inset-bottom)); text-align: center; color: rgba(237,230,214,.32); border-top: 1px solid var(--line); }
.links { display: flex; justify-content: center; gap: 24px; margin: 0 0 16px; padding: 0; list-style: none; }
.links a { display: block; padding: 2px; color: var(--ink-dim); }
.links a:hover { color: var(--ink); }
.links svg { display: block; width: 17px; height: 17px; fill: currentColor; }

@media (max-width: 720px) {
  .menu a { font-size: 10px; letter-spacing: .14em; }
  .posts { grid-template-columns: 1fr; }
  .post-card.featured { grid-template-columns: 1fr; }
}