/* SPDX-License-Identifier: AGPL-3.0-or-later */
/* CHEZABLE — Articles and Coaches.
 *
 * Built on site.css and theme.css: the same tokens, the same three type roles
 * (Fraunces for headings and the reading voice's set pieces, Archivo for
 * prose and controls, Plex Mono for every number a reader must trust), the
 * same tile. What is new is the long read, so most of this file is about a
 * page somebody stays on for ten minutes:
 *
 *   - prose at a size and measure made for reading, not for scanning;
 *   - the first letter of an article set as a tile, the game's own drop cap;
 *   - a picture-less cover drawn as the title's initials on a board, so an
 *     article without a photo still looks intended rather than missing.
 */

.journal { padding-bottom:56px }
.journal section { border-bottom:0 }
.journal-head { padding:56px 0 18px }
.journal-head .lede { font-size:17px }
.feed-link { margin-top:6px }
.feed-link a { font:500 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase }

.crumb { display:inline-block; margin-bottom:18px }
.crumb:hover { color:var(--text) }

/* ————— covers ————— */

/* A board under the tiles: the premium squares are a quiet lattice, and the
   category tints it, so a page of tile covers still varies. */
.cover-tiles {
  --tint:var(--clay);
  position:relative; display:flex; align-items:center; justify-content:center; gap:10px;
  aspect-ratio:16/10; width:100%;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--tint) 22%, transparent), transparent 62%),
    repeating-linear-gradient(0deg, transparent 0 23px, var(--line-soft) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, var(--line-soft) 23px 24px),
    var(--table);
}
.cover-tiles .tile:nth-child(2) { transform:translateY(-6px) rotate(3deg) }
.cover-tiles .tile:nth-child(3) { transform:translateY(4px) rotate(-2deg) }
.cat-strategy  { --tint:var(--gold) }
.cat-interview { --tint:#6d8fb3 }
.cat-news      { --tint:#7aa37a }
.cat-opinion   { --tint:#b07aa1 }

/* ————— story cards ————— */

.stories { display:grid; gap:22px; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)) }
.story {
  display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s;
}
.story:hover { transform:translateY(-4px); border-color:var(--clay-line);
  box-shadow:0 14px 34px -18px var(--shadow) }
.story-cover { display:block; overflow:hidden; background:var(--table) }
.story-cover img { width:100%; aspect-ratio:16/10; object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.8,.2,1) }
.story:hover .story-cover img { transform:scale(1.04) }
.story-body { display:flex; flex-direction:column; gap:8px; padding:18px 20px 20px; flex:1 }
.story-body h3 { font-size:21px; line-height:1.25; text-wrap:balance }
.story-body h3 a { color:var(--text) }
.story-body h3 a:hover { color:var(--clay) }
.story-body p { margin:0; font-size:14px; color:var(--body); max-width:none }
.story-body .byline { margin-top:auto; padding-top:8px }
.story-meta { display:flex; align-items:center; gap:8px }
.cat {
  font:600 10px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--clay);
}

/* The lead story: the same card, laid on its side. */
.lead { padding:10px 0 30px }
.story-wide { display:grid; grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr) }
.story-wide .story-cover img, .story-wide .cover-tiles { height:100%; aspect-ratio:auto; min-height:320px }
.story-wide .story-body { padding:34px 36px; justify-content:center; gap:14px }
.story-wide h3 { font-size:clamp(26px, 3.2vw, 38px); line-height:1.12 }
.story-wide p { font-size:16px }

.byline { display:flex; align-items:center; gap:10px; font-size:13px }
.byline > span { display:flex; flex-direction:column; line-height:1.35 }
.byline a { color:var(--text); font-weight:600 }
.byline a:hover { color:var(--clay) }
.byline .mono { font-size:11px; color:var(--muted) }

.avatar { width:36px; height:36px; border-radius:50%; object-fit:cover; flex:none;
  box-shadow:0 0 0 2px var(--surface), 0 0 0 3px var(--line) }
.avatar-lg { width:72px; height:72px }
.avatar.portrait-tiles { display:grid; place-items:center; background:var(--table); overflow:hidden }
.avatar.portrait-tiles .tile { width:20px; height:20px; font-size:12px }
.avatar.portrait-tiles .tile ~ .tile { display:none }
.avatar-lg.portrait-tiles .tile { width:34px; height:34px; font-size:20px }

/* ————— filters ————— */

.filters { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 20px }
.filters button {
  font:500 12.5px/1 var(--sans); color:var(--muted); background:var(--bg2);
  border:1px solid var(--line); border-radius:999px; padding:9px 14px; cursor:pointer;
  transition:color .2s, border-color .2s, background .2s;
}
.filters button:hover { color:var(--text); border-color:var(--clay-line) }
.filters button[aria-pressed="true"] { color:var(--on-clay); background:var(--clay); border-color:var(--clay) }
.filter-bar { display:flex; flex-wrap:wrap; gap:6px 28px; margin-top:26px }
.filter-group .group-k { display:block; margin:0 0 8px }
.filter-group .filters { margin:0 }
.filter-group select {
  font:500 12.5px/1 var(--sans); color:var(--text); background:var(--bg2);
  border:1px solid var(--line); border-radius:999px; padding:9px 14px;
}
.no-match { color:var(--muted) }

/* ————— writers ————— */

.writers { padding-top:30px }
.writer-strip { display:flex; flex-wrap:wrap; gap:12px; margin-top:16px }
.writer-chip {
  display:flex; align-items:center; gap:12px; padding:10px 18px 10px 10px;
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
  transition:border-color .2s, transform .2s;
}
.writer-chip:hover { border-color:var(--clay-line); transform:translateY(-2px) }
.writer-chip .avatar { width:48px; height:48px }
.writer-chip span { display:flex; flex-direction:column; line-height:1.3 }
.writer-chip strong { color:var(--text); font-weight:600; font-size:14px }
.writer-chip span span { font-size:12px; color:var(--muted) }

.writer-head { padding:48px 0 10px }
.writer-hero { display:grid; grid-template-columns:160px 1fr; gap:34px; align-items:start }
.writer-hero .portrait { width:160px; aspect-ratio:1; border-radius:22px; object-fit:cover }
.writer-hero h1 { margin-top:10px }
.place { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 }

/* ————— the long read ————— */

.reading { padding:44px 0 10px }
.reading-head { max-width:760px; margin:0 auto }
.reading-head h1 { font-size:clamp(34px, 5.4vw, 58px); line-height:1.04 }
.dek {
  font-family:var(--serif); font-style:italic; font-size:clamp(18px, 2.2vw, 22px);
  line-height:1.5; color:var(--body); max-width:none; margin:4px 0 0;
}
.reading-meta { display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin:26px 0 0; padding:16px 0; border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft) }

.hero-cover { margin:34px 0 0 }
.hero-cover img { width:100%; max-height:620px; object-fit:cover; border-radius:18px }
figcaption {
  margin-top:10px; font:500 11px/1.5 var(--mono); letter-spacing:.04em; color:var(--muted);
}
.hero-cover figcaption { max-width:760px; margin-left:auto; margin-right:auto }

.prose { max-width:700px; margin:38px auto 0; font-size:17.5px; line-height:1.78; color:var(--body) }
.prose p { max-width:none; margin:0 0 1.15em }
.prose > p:first-of-type::first-letter {
  float:left; margin:.12em .14em 0 0; padding:.08em .14em .02em;
  font:600 3.1em/0.9 var(--serif); color:var(--tile-ink);
  background:linear-gradient(160deg, var(--tile-1), var(--tile-2)); border-radius:8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65), inset 0 -3px 0 rgba(140,112,66,.55),
             0 4px 10px var(--shadow);
}
.prose h2 { font-size:clamp(24px, 3vw, 30px); margin:1.6em 0 .5em }
.prose h3 { font-size:21px; margin:1.4em 0 .4em }
.prose a { color:var(--clay); text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:3px }
.prose strong { color:var(--text) }
.prose ul, .prose ol { margin:0 0 1.15em 1.3em }
.prose li { margin:.3em 0 }
.prose li::marker { color:var(--clay) }
.prose blockquote {
  margin:1.6em 0; padding:6px 0 6px 26px; border-left:3px solid var(--clay);
  font-family:var(--serif); font-style:italic; font-size:1.3em; line-height:1.45; color:var(--text);
}
.prose blockquote p { margin:0 }
.prose hr { border:0; height:1px; background:var(--line); margin:2.4em 0 }
.prose hr::after { content:"" }
.prose code { font-family:var(--mono); font-size:.88em; background:var(--bg2);
  padding:2px 6px; border-radius:5px }
.prose table { width:100%; border-collapse:collapse; margin:1.4em 0; font-size:15px }
.prose th, .prose td { padding:9px 10px; border-bottom:1px solid var(--line-soft); text-align:left }
.prose th { font:600 10.5px/1.3 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--muted) }
/* Scores and ratings in a report read as numbers to trust: tabular mono. */
.prose td { font-variant-numeric:tabular-nums }
.prose figure.inline { margin:2em -40px }
.prose figure.inline img { width:100%; border-radius:14px }
.prose figure.inline figcaption { padding:0 40px }

/* ————— video ————— */

.video {
  position:relative; margin:2em 0; border-radius:16px; overflow:hidden;
  border:1px solid var(--line); background:var(--table);
}
.video::before { content:""; display:block; aspect-ratio:16/9;
  background:
    radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--clay) 20%, transparent), transparent 55%),
    repeating-linear-gradient(0deg, transparent 0 31px, var(--line-soft) 31px 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, var(--line-soft) 31px 32px) }
.video-play { position:absolute; inset:0 0 auto 0; aspect-ratio:16/9; display:grid; place-items:center;
  background:none; border:0; cursor:pointer }
.video-play .tile { font-size:26px; padding-left:4px }
.video-play:hover .tile { transform:translateY(-3px) rotate(-3deg) scale(1.06) }
.video figcaption { margin:0; padding:12px 16px; border-top:1px solid var(--line-soft) }
.video iframe { position:absolute; inset:0; width:100%; height:100%; border:0 }
.video.playing .video-play { display:none }

/* ————— end of an article ————— */

.tags { display:flex; flex-wrap:wrap; gap:8px; max-width:700px; margin:30px auto 0 }
.writer-card {
  display:grid; grid-template-columns:72px 1fr; gap:20px; align-items:start;
  max-width:700px; margin:40px auto 0; padding:24px; background:var(--surface);
  border:1px solid var(--line); border-radius:16px;
}
.writer-card .group-k { margin:0 0 6px }
.writer-card h3 a { color:var(--text) }
.writer-card p { font-size:14px; margin:8px 0 0 }
.shelf { padding-top:26px }
.shelf h2 { margin:30px 0 18px }

/* ————— coaches ————— */

.coaches { display:grid; gap:22px; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)) }
.coach {
  display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line);
  border-radius:18px; overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s;
}
.coach:hover { transform:translateY(-4px); border-color:var(--clay-line);
  box-shadow:0 14px 34px -18px var(--shadow) }
.coach[hidden] { display:none }
.coach-photo { display:block; overflow:hidden }
.coach .portrait, .coach-side .portrait { width:100%; aspect-ratio:4/5; object-fit:cover }
.coach .portrait.portrait-tiles { aspect-ratio:16/10 }
.coach-side .portrait.portrait-tiles { aspect-ratio:4/3 }
.portrait.portrait-tiles .tile { width:46px; height:46px; font-size:26px; border-radius:8px }
.portrait.portrait-tiles .tile:nth-child(2) { transform:translateY(-5px) rotate(3deg) }
.portrait.portrait-tiles {
  display:flex; align-items:center; justify-content:center; gap:8px; background:
    repeating-linear-gradient(0deg, transparent 0 23px, var(--line-soft) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, var(--line-soft) 23px 24px),
    var(--table);
}
.coach-body { display:flex; flex-direction:column; gap:8px; padding:18px 20px 20px; flex:1 }
.coach-body h3 { font-size:22px }
.coach-body h3 a { color:var(--text) }
.coach-body p { margin:0; font-size:14px; max-width:none }
.coach-body .place, .writer-hero .place { font-size:11px }
.coach-body .meta { margin:4px 0 6px }
.coach-body .btn { margin-top:auto; align-self:flex-start }

.be-listed { margin:40px 0 0; padding:30px 34px; background:var(--bg2);
  border:1px dashed var(--line); border-radius:18px }

.coach-page { padding:44px 0 10px }
.coach-layout { display:grid; grid-template-columns:340px minmax(0, 1fr); gap:46px; align-items:start }
.coach-side { position:sticky; top:92px; display:flex; flex-direction:column; gap:18px;
  background:var(--surface); border:1px solid var(--line); border-radius:18px; overflow:hidden;
  padding-bottom:20px }
.coach-side .btn { margin:0 20px }
.facts { display:grid; gap:12px; padding:0 20px }
.fact { display:flex; flex-direction:column; gap:4px; font-size:14px; color:var(--text) }
.fact .group-k { margin:0 }
.coach-main h1 { margin-top:12px }
.coach-main .prose { margin:28px 0 0 }
.coach-main .prose > p:first-of-type::first-letter { all:unset }
.coach-main h2 { margin-top:34px }

/* ————— the enquiry form ————— */

.enquiry { margin:46px 0 0; padding:38px 40px 34px; background:var(--surface);
  border:1px solid var(--line); border-radius:22px; scroll-margin-top:90px }
.enquiry-form { margin-top:22px }
.form-grid { display:grid; gap:16px 18px; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)) }
.enquiry label { display:flex; flex-direction:column; gap:7px;
  font:600 11px/1.3 var(--sans); letter-spacing:.06em; color:var(--muted) }
.enquiry label.wide { margin-top:16px }
.enquiry input, .enquiry select, .enquiry textarea {
  font:400 15px/1.4 var(--sans); color:var(--text); background:var(--bg);
  border:1px solid var(--line); border-radius:10px; padding:11px 13px; width:100%;
  transition:border-color .2s, box-shadow .2s;
}
.enquiry input:focus, .enquiry select:focus, .enquiry textarea:focus {
  outline:none; border-color:var(--clay); box-shadow:0 0 0 3px var(--clay-line) }
.enquiry textarea { resize:vertical; min-height:120px }
.enquiry label.consent { flex-direction:row; align-items:flex-start; gap:10px; margin:18px 0;
  font:400 13.5px/1.55 var(--sans); letter-spacing:0; color:var(--body) }
.enquiry label.consent input { width:18px; height:18px; flex:none; margin-top:2px; accent-color:var(--clay) }
.enquiry .trap { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
.form-foot { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:16px }
.form-status { margin:0; font-size:14px }
.form-status.ok { color:var(--clay) }
.form-status.bad { color:var(--danger) }
.cf-turnstile { margin-top:6px }

/* ————— small screens ————— */

@media (max-width: 860px) {
  .story-wide { grid-template-columns:1fr }
  .story-wide .story-cover img, .story-wide .cover-tiles { min-height:0; aspect-ratio:16/10 }
  .story-wide .story-body { padding:22px 22px 24px }
  .coach-layout { grid-template-columns:1fr; gap:28px }
  .coach-side { position:static }
  /* On one column, who the coach is comes before the facts about them. */
  .coach-main { order:-1 }
  .writer-hero { grid-template-columns:1fr }
  .writer-hero .portrait { width:120px }
}
@media (max-width: 720px) {
  .prose { font-size:16.5px }
  .prose figure.inline { margin:1.6em 0 }
  .prose figure.inline figcaption { padding:0 }
  .enquiry { padding:26px 20px }
  .be-listed { padding:24px 20px }
}