/* GALOK Writing hub · section sheet on the unified foundation (assets/galok/foundation.css).
   Signature of the Writing section: the editorial voice — a serif italic inside sans headlines, generous reading measure.
   Every colour is a --g-* token (complete light and dark). */

/* ---------- hero ---------- */
.wr-hero{padding:clamp(48px,9vw,128px) 0 clamp(28px,4vw,48px)}
.wr-hero .f-eyebrow{margin-bottom:22px}
.wr-hero .f-display{max-width:10.5em;margin-bottom:26px}
.wr-hero .f-lede{max-width:34em}
.wr-hero .ab-fact{margin:18px 0 0;font:500 12px/1.4 var(--g-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--g-muted)}

/* ---------- selected ---------- */
.wr-selected{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,5vw,72px);align-items:center;padding:clamp(28px,4vw,48px) 0 clamp(36px,5vw,64px)}
.wr-selected h2{margin:14px 0 14px;font:560 clamp(2rem,4.2vw,3.6rem)/1.02 var(--g-sans);letter-spacing:-.05em;text-wrap:balance}
.wr-selected .f-lede{margin-bottom:26px}
.wr-selected .f-figure{order:2}
.wr-selected .f-figure img{aspect-ratio:4/3;object-fit:cover}

/* ---------- toolbar: the three lenses as one segmented control ---------- */
.wr-toolbar{display:inline-flex;flex-wrap:wrap;gap:4px;margin:8px 0 0;padding:4px;border:1px solid var(--g-rule-strong);border-radius:999px}
@media (pointer:coarse){.wr-toolbar .f-tag{min-height:44px}}

/* ---------- the list ---------- */
.wr-list{margin:24px 0 0;padding:0;list-style:none;border-top:1px solid var(--g-ink)}
.wr-row{border-bottom:1px solid var(--g-rule)}
.wr-row.is-hidden{display:none}
.wr-row a{display:grid;grid-template-columns:minmax(0,1fr) clamp(120px,16vw,200px);gap:clamp(18px,4vw,56px);align-items:center;padding:clamp(20px,2.6vw,30px) 0;color:inherit;text-decoration:none}
.wr-row-main{display:grid;gap:10px;min-width:0}
.wr-row-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;color:var(--g-muted)}
.wr-row-meta{font:500 12px/1.4 var(--g-mono);letter-spacing:.04em;color:var(--g-muted)}
.wr-row-title{font:560 clamp(1.35rem,2.4vw,2.05rem)/1.1 var(--g-sans);letter-spacing:-.035em;color:var(--g-ink);text-wrap:balance;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:.18em;transition:text-decoration-color .25s}
.wr-row a:hover .wr-row-title,.wr-row a:focus-visible .wr-row-title{text-decoration-color:var(--g-signal)}
.wr-row-deck{max-width:46em;color:var(--g-ink-2);font:italic 400 clamp(1rem,1.3vw,1.12rem)/1.5 var(--g-serif)}
.wr-row-side{display:block;overflow:hidden;border-radius:4px;background:var(--g-surface);aspect-ratio:4/3}
.wr-row img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--g-ease),opacity .7s var(--g-ease),filter .9s var(--g-ease)}
.wr-row a:hover img{transform:scale(1.03)}
.wr-row-noimg .wr-row-side{display:flex;align-items:center;justify-content:center;border:1px dashed var(--g-rule-strong);background:transparent}
.wr-row-noimg .wr-row-side::after{content:"Text only";font:500 11px/1 var(--g-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--g-muted)}
.wr-empty{display:none;padding:48px 0;color:var(--g-muted)}
.wr-list.is-empty .wr-empty{display:block}
.wr-list.is-empty .wr-row{display:none}

/* ---------- data desk and other paths ---------- */
.writing-page .notes-feature{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);overflow:hidden;border:1px solid var(--g-rule-strong);border-radius:18px;color:inherit;text-decoration:none;transition:border-color .2s}
.writing-page .notes-feature:hover{border-color:var(--g-ink)}
.writing-page .notes-feature-art{background:var(--g-surface);min-height:260px}
.writing-page .notes-feature-art img{width:100%;height:100%;max-height:420px;object-fit:cover}
.writing-page .notes-feature-copy{display:grid;gap:12px;align-content:center;padding:clamp(22px,4vw,48px)}
.writing-page .notes-feature-copy .archive-kicker{margin:0;font:500 12px/1.4 var(--g-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--g-muted)}
.writing-page .notes-feature-copy h2{margin:0;font:560 clamp(1.6rem,3vw,2.4rem)/1.06 var(--g-sans);letter-spacing:-.04em}
.writing-page .notes-feature-copy p{margin:0;color:var(--g-ink-2);line-height:1.55}
.writing-page .notes-feature-copy span{color:var(--g-ink);font-weight:560}
.writing-page .about-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,40px)}
.writing-page .about-columns article{display:grid;gap:10px;align-content:start;padding-top:16px;border-top:1px solid var(--g-ink)}
.writing-page .archive-card-meta{margin:0;font:500 12px/1.4 var(--g-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--g-muted)}
.writing-page .about-columns h3{margin:0;font:560 1.35rem/1.15 var(--g-sans);letter-spacing:-.03em}
.writing-page .about-columns p{margin:0;color:var(--g-ink-2);line-height:1.55}
.writing-page .about-contact a{display:inline-flex;align-items:center;min-height:44px;color:var(--g-ink);font-weight:560;text-decoration:underline;text-decoration-color:var(--g-signal);text-decoration-thickness:2px;text-underline-offset:.25em}

@media (max-width:860px){
  .wr-selected{grid-template-columns:1fr}
  .wr-selected .f-figure{order:0}
  .wr-row a{grid-template-columns:minmax(0,1fr) 96px;align-items:start}
  .writing-page .notes-feature{grid-template-columns:1fr}
  .writing-page .notes-feature-art img{max-height:300px}
  .writing-page .about-columns{grid-template-columns:1fr}
}
@media (max-width:480px){
  .wr-row a{grid-template-columns:minmax(0,1fr) 76px;gap:14px}
  .wr-toolbar{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;border-radius:999px}
  .wr-toolbar .f-tag{flex:none}
}