/* ============================================================
   DURU KOREAN — global stylesheet
   ============================================================ */

/* A component that sets its own `display` beats the UA rule the hidden
   attribute relies on, so `el.hidden = true` silently did nothing on
   .story-signed-out and would have bitten every future flex/grid
   component the same way. One global rule settles it. */
[hidden] { display: none !important; }

:root {
  --bg-deep: #0a2620;
  --bg: #0e332b;
  --bg-soft: #123a32;
  --cream: #f4efe2;
  --cream-dim: rgba(244, 239, 226, 0.68);
  --cream-faint: rgba(244, 239, 226, 0.4);
  --line: rgba(244, 239, 226, 0.2);
  --accent: #cf8a52;
  /* The highlighter behind a post's sub-headings. Warm enough to read
     as a marker pen, pale enough that dark ink stays legible on it. */
  --marker: #fbe3a6;
  --accent-red: #b8492f;
  --accent-red-soft: rgba(184, 73, 47, 0.12);
  --paper: #f8f5ed;
  --paper-alt: #f1ece0;
  --ink: #16302b;
  --ink-dim: #4c635c;
  --radius: 14px;
  --shadow: 0 20px 50px -25px rgba(10, 38, 32, 0.35);
  --maxw: 1180px;

  /* Header (warm toupe beige) + banner (dark green) palette.
     The three-band flow is deliberate: toupe menu → dark green page
     banner → light ivory body, so each area reads as its own region. */
  --header-bg: #d8ccbc;
  --header-border: #b9aa97;
  --logo-duru: #123c32;
  --logo-korean: #b8492d;
  --nav-text: #243831;
  --nav-hover-bg: rgba(243, 214, 200, 0.5);
  --nav-active-bg: #f3d6c8;
  --nav-active-text: #9f3f27;
  --login-text: #28483e;
  --login-bg: transparent;
  --banner-bg: #103f35;
  --banner-title: #faf8f2;
  --banner-desc: #d7e2db;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 100px; }

body {
  margin: 0;
  font-family: 'Inter', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
.card:focus-visible {
  outline: 2px solid var(--accent-red);
  outline-offset: 3px;
  border-radius: 4px;
}

.kr { font-family: 'Noto Sans KR', sans-serif; }

/* ---------- Line breaking ----------
   Left to itself the browser fills each line to the edge and lets the
   last one keep whatever is left, which strands a word or splits a
   phrase across the break. `pretty` asks it to look ahead over the
   whole block, `balance` to even out a heading or a short lead, so a
   phrase stays together and no line ends alone.

   Korean breaks between any two syllables by default, mid-word;
   `keep-all` holds each word together, and Korean writes spaces between
   words so there is always somewhere else to break. Japanese and Chinese
   are left alone: they write no spaces, so holding characters together
   would leave a heading nowhere to break at all. A pasted URL or another
   long unbroken run is the one case that still has to break anywhere,
   or it would push its card wider than the screen. */

p, li, figcaption, blockquote, dd, .eyebrow, .btn, label {
  text-wrap: pretty;
}

h1, h2, h3, h4, h5,
.section-lead-in,
.page-hero p,
.page-hero-tagline,
.authors-lede,
.cta-banner p,
.newsletter p,
.entry-body span {
  text-wrap: balance;
}

:root:lang(ko) {
  word-break: keep-all;
  overflow-wrap: break-word;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
}

section { position: relative; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color .18s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: var(--accent-red);
  color: var(--cream);
}
.btn-primary:hover { background: #a13f29; }

.btn-outline {
  background: transparent;
  border-color: var(--line);
  color: var(--cream);
}
.btn-outline:hover { border-color: var(--cream); }

.btn-dark {
  background: var(--bg);
  color: var(--cream);
}
.btn-dark:hover { background: var(--bg-deep); }

.btn-ghost {
  background: var(--accent-red-soft);
  color: var(--accent-red);
}
.btn-ghost:hover { background: rgba(184,73,47,0.2); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
}

/* The header bar carries seven nav items plus the wordmark, language
   picker, and account control — more than fits in the 1180px column the
   body text uses. It gets its own wider measure so a large screen shows
   the full menu instead of a hamburger; the body stays at 1180. */
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 84px;
  max-width: 1560px;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

/* Visits sit beside the wordmark, quiet enough not to compete with it. */
.site-visits {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-left: 16px;
  border-left: 1px solid var(--header-border);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  white-space: nowrap;
}
.site-visits b { color: var(--ink); font-weight: 700; margin-left: 3px; }

/* The wordmark is a drawn logo: one file on the ivory header, a light
   version of the same file on the green footer. Its height is set here
   and stepped down with the header; width follows from the picture. */
.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.logo-img {
  display: block;
  height: 46px;
  width: auto;
}

.nav-main {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-main a {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--nav-text);
  padding: 10px 16px;
  border-radius: 999px;
  white-space: nowrap;
  transition: color 0.18s ease, background 0.18s ease;
}
.nav-main a:hover {
  color: var(--nav-text);
  background: var(--nav-hover-bg);
}
.nav-main a.active {
  color: var(--nav-active-text);
  background: var(--nav-active-bg);
  font-weight: 800;
}

.header-actions { display: flex; align-items: center; gap: 12px; }

/* ---------- Auth: login button / account menu ---------- */
.btn-login {
  background: var(--login-bg);
  border: 1px solid var(--login-text);
  color: var(--login-text);
  font-size: 15px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .18s ease, border-color .18s ease;
}
.btn-login:hover { background: rgba(40, 72, 62, 0.1); }

.account-menu { position: relative; }
.account-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--header-bg);
  border: 1px solid var(--header-border);
  color: var(--nav-text);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  max-width: 220px;
}
.account-trigger .avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-red);
  color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; flex-shrink: 0;
}
.account-trigger .email {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px;
}
.account-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 200px;
  background: #fbf8f2;
  border: 1px solid var(--header-border);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 20px 40px -10px rgba(16,59,49,0.18);
  z-index: 200;
}
.account-dropdown a,
.account-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--nav-text);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 12px;
  border-radius: 8px;
}
.account-dropdown a:hover,
.account-dropdown button:hover { background: var(--nav-active-bg); color: var(--nav-active-text); }

/* ---------- Language switcher ---------- */
.lang-switcher { position: relative; }
.lang-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--header-border);
  color: var(--nav-text);
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.lang-trigger:hover { background: var(--nav-hover-bg); border-color: var(--nav-active-bg); color: var(--nav-text); }
.lang-globe { display: flex; line-height: 0; }
.lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 150px;
  background: #fbf8f2;
  border: 1px solid var(--header-border);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 20px 40px -10px rgba(16,59,49,0.18);
  z-index: 200;
  list-style: none;
  margin: 0;
}
.lang-menu li {
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--nav-text);
  cursor: pointer;
}
.lang-menu li:hover { background: var(--nav-active-bg); color: var(--nav-active-text); }
.lang-menu li.is-active { color: var(--nav-active-text); font-weight: 800; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  width: 34px;
  height: 34px;
  position: relative;
}
.nav-toggle span {
  position: absolute;
  left: 6px;
  right: 6px;
  top: 16px;
  height: 2px;
  background: var(--nav-text);
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--nav-text);
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav-toggle.open span { background: transparent; }
.nav-toggle.open span::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span::after { transform: translateY(-7px) rotate(-45deg); }

.site-header a:focus-visible,
.site-header button:focus-visible {
  outline: 2px solid var(--logo-duru);
  outline-offset: 2px;
}

/* ---------- Hero (index) ---------- */
:root { --header-h: 84px; }

.hero {
  background: var(--paper);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 34px 64px 28px;
}

.hero-text h1 {
  font-size: clamp(30px, 3.2vw, 46px);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.14;
  margin: 0 0 12px;
}
.hero-text .kr-sub {
  font-size: 13.5px;
  color: var(--ink-dim);
  margin-bottom: 14px;
}
.hero-lead {
  font-size: 15.5px;
  color: var(--ink-dim);
  max-width: 460px;
  margin: 0 0 22px;
}

.hero-why {
  padding-top: 20px;
  border-top: 1px solid rgba(22, 48, 43, 0.1);
  max-width: 520px;
}
.hero-why-head { margin-bottom: 14px; }
.hero-why-head .eyebrow { display: block; margin-bottom: 6px; }
.hero-why-head h2 {
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 800;
  color: var(--ink);
  margin: 0;
}
.hero-why-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.hero-why-list li { display: flex; flex-direction: column; gap: 8px; }
.hero-why-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--accent-red-soft);
  color: var(--accent-red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.hero-why-list strong { display: block; font-size: 13px; color: var(--ink); margin-bottom: 2px; }
.hero-why-list p { font-size: 12px; color: var(--ink-dim); margin: 0; line-height: 1.4; }

.btn-outline-dark {
  background: transparent;
  border: 1px solid rgba(22, 48, 43, 0.25);
  color: var(--ink);
}
.btn-outline-dark:hover { border-color: var(--ink); }

/* ---- Hero: the folding-screen photograph ---- */

/* The photograph is sized from the cards beside it, not the viewport:
   the frame is pinned to the same top and bottom offsets as the text
   column's padding, so its bottom edge lands level with the last card and
   nothing of it hides below the fold. */
.hero-graphic {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #1b2f26 0%, #13261c 55%, #0b1711 100%);
  min-height: 0;
}

.hero-frame {
  position: absolute;
  top: 34px;
  bottom: 28px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
}

.hero-scene {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

@media (max-width: 980px) {
  .hero-graphic { aspect-ratio: 1 / 1; align-self: start; padding: 0; min-height: 0; }
  .hero-frame { top: 0; bottom: 0; }
}

.hero-cta {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 24px;
  flex-wrap: wrap;
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  position: relative;
  background: var(--banner-bg);
  color: var(--banner-title);
  padding: 40px 0 32px;
  overflow: hidden;
}
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero-mark {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 700;
  font-size: clamp(70px, 9vw, 120px);
  line-height: 1;
  color: rgba(184, 73, 47, 0.2);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.page-hero .eyebrow { margin-bottom: 10px; }
.page-hero h1 {
  font-size: clamp(32px, 3.6vw, 50px);
  font-weight: 800;
  margin: 0 0 10px;
  max-width: 800px;
  line-height: 1.08;
}
.page-hero-rule {
  width: 48px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent-red);
  margin: -2px 0 12px;
}
.page-hero-tagline {
  font-size: 16px;
  font-weight: 600;
  color: var(--banner-title);
  margin: 0 0 8px;
  max-width: 620px;
}
.page-hero p {
  color: var(--banner-desc);
  max-width: 620px;
  font-size: 16px;
}
.page-hero .kr { color: var(--banner-desc); opacity: 0.8; font-size: 12.5px; margin-bottom: 0; }
.section-lead-in {
  color: var(--ink-dim);
  font-size: 16px;
  max-width: 680px;
  margin: 0 0 28px;
}

/* ---------- Generic sections ---------- */
.section { padding: 84px 0; }
.section-compact { padding: 56px 0; }
.section-after-hero { padding-top: 36px; }
.section-alt { background: var(--paper-alt); }
.section-dark { background: var(--bg); color: var(--cream); }

.section-head {
  max-width: 620px;
  margin-bottom: 48px;
}
.section-head h2 {
  font-size: clamp(24px, 3.6vw, 34px);
  font-weight: 800;
  margin: 12px 0 10px;
  color: var(--ink);
}
.section-dark .section-head h2 { color: var(--cream); }
.section-head p { color: var(--ink-dim); font-size: 15.5px; }
.section-dark .section-head p { color: var(--cream-dim); }

.section-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* ---------- Feature / Card grids ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

.card {
  background: var(--paper);
  border: 1px solid rgba(22, 48, 43, 0.08);
  border-radius: var(--radius);
  padding: 30px 26px;
  box-shadow: var(--shadow);
}
.section-alt .card { background: #fff; }

.card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--accent-red-soft);
  color: var(--accent-red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: 'Noto Sans KR', sans-serif;
  margin-bottom: 18px;
  font-size: 17px;
}
.card h3 { font-size: 17px; margin: 0 0 8px; color: var(--ink); }
.card p { font-size: 14px; color: var(--ink-dim); margin: 0; }

/* ---------- Stage cards (Four stages, one clear direction) ---------- */
.stage-card h4 { font-size: 16px; margin: 0 0 8px; color: var(--ink); }
.stage-card p { font-size: 14px; color: var(--ink-dim); margin: 0; }
.stage-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 16px;
}
.stage-badge--blue { background: #e8f0fc; color: #285aa0; }
.stage-badge--apricot { background: #fbebdd; color: #975019; }
.stage-badge--lavender { background: #eee8f8; color: #69469b; }
.stage-badge--rose { background: #f8e6ec; color: #9a3f61; }

/* ---------- Teaser split ---------- */
.split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
}
.split.reverse { grid-template-columns: 1.1fr 0.9fr; }
.split.reverse .split-visual { order: 2; }

.split-visual {
  background: var(--bg);
  border-radius: var(--radius);
  min-height: 320px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.book-mock {
  width: 190px;
  height: 260px;
  background: linear-gradient(160deg, var(--bg-soft), var(--bg-deep));
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px 18px;
  color: var(--cream);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5);
}
.book-mock .eyebrow { font-size: 9px; }
.book-mock .book-title { font-weight: 800; font-size: 19px; line-height: 1.2; }
.book-mock .book-foot { font-size: 10px; color: var(--cream-faint); letter-spacing: 0.1em; text-transform: uppercase; }

.audio-mock {
  width: 100%;
  max-width: 330px;
  background: rgba(244,239,226,0.06);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
  color: var(--cream);
}
.audio-mock .track {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.audio-mock .track:last-child { border-bottom: none; }
.play-dot {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-red);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--cream); flex-shrink: 0;
}

.split-body .eyebrow { margin-bottom: 12px; }
.split-body h2 { font-size: clamp(22px, 3.4vw, 30px); font-weight: 800; margin: 0 0 14px; }
.split-body p { color: var(--ink-dim); margin: 0 0 22px; font-size: 15px; }
.section-dark .split-body h2 { color: var(--cream); }
.section-dark .split-body p { color: var(--cream-dim); }

.check-list { margin-bottom: 24px; }
.check-list li {
  display: flex;
  gap: 10px;
  font-size: 14.5px;
  color: var(--ink-dim);
  padding: 6px 0;
}
.section-dark .check-list li { color: var(--cream-dim); }
.check-list li::before {
  content: '✓';
  color: var(--accent-red);
  font-weight: 700;
  flex-shrink: 0;
}

/* ---------- Resource cards ---------- */
.resource-card {
  background: #fff;
  border: 1px solid rgba(22,48,43,0.08);
  border-radius: var(--radius);
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow);
}
.resource-tag {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-red);
  font-weight: 700;
}
.resource-card h3 { font-size: 16px; margin: 0; color: var(--ink); }
.resource-card p { font-size: 13.5px; color: var(--ink-dim); margin: 0; flex-grow: 1; }
.resource-card .btn { align-self: flex-start; }

/* ---------- Admin-managed resource files ---------- */
.resource-empty-note { color: var(--ink-dim); font-size: 14.5px; margin: 0 0 20px; }
.resource-card--file p.resource-meta { font-size: 12px; color: var(--ink-dim); opacity: 0.85; flex-grow: 0; }
.resource-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}
.resource-card-actions .btn { align-self: auto; }
.resource-unavailable { font-size: 13px; color: var(--ink-dim); font-style: italic; }
.resource-delete-btn {
  background: none;
  border: none;
  color: #b3261e;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 4px;
}
.resource-delete-btn:hover { text-decoration: underline; }

.resource-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 8, 0.6);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}
.resource-confirm-modal {
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--paper);
  border-radius: 18px;
  padding: 32px;
  position: relative;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.5);
}
.resource-confirm-modal h3 { margin: 0 0 10px; font-size: 20px; color: var(--ink); }
.resource-confirm-body { font-size: 14.5px; color: var(--ink-dim); margin: 0 0 22px; }
.resource-confirm-actions { display: flex; gap: 12px; justify-content: flex-end; }
.btn-danger {
  background: #b3261e;
  color: #fff;
  border: 1px solid #b3261e;
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 700;
}
.btn-danger:hover { background: #921f19; }
.btn-danger:disabled, .resource-confirm-actions .btn:disabled { opacity: 0.6; cursor: not-allowed; }

.resource-upload-modal { max-width: 520px; }
.resource-upload-modal select,
.resource-upload-modal textarea,
.resource-upload-modal input[type="file"] {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(22,48,43,0.16);
  background: #fff;
  font-size: 14.5px;
  font-family: inherit;
  color: var(--ink);
}
.resource-upload-modal textarea { resize: vertical; }
.resource-hint { font-size: 12px; color: var(--ink-dim); margin: 6px 0 0; }
.resource-upload-msg {
  font-size: 13.5px;
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 16px;
}
.resource-upload-msg.error { background: rgba(179,38,30,0.1); color: #b3261e; }
.resource-upload-msg.success { background: rgba(58,122,74,0.12); color: #2f6b41; }

/* ---------- Blog cards ---------- */
.blog-card {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(22,48,43,0.08);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.blog-thumb {
  height: 150px;
  background: linear-gradient(135deg, var(--bg-soft), var(--bg));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f7f4ec;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.4;
}
.blog-body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.blog-meta { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-red); font-weight: 700; }
.blog-body h3 { font-size: 16.5px; margin: 0; color: var(--ink); }
.blog-body p { font-size: 13.5px; color: var(--ink-dim); margin: 0; flex-grow: 1; }
.blog-body .read-more { font-size: 13px; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--ink); align-self: flex-start; }

.filter-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 40px; }
.filter-btn {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(22,48,43,0.15);
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-dim);
  position: relative;
}
.filter-btn.active, .filter-btn:hover { background: var(--bg); color: var(--cream); border-color: var(--bg); }
.filter-count {
  font-size: 11px;
  opacity: 0.7;
  margin-left: 4px;
  font-weight: 500;
}

/* ---------- FAQ accordion ---------- */
.faq-item {
  border-bottom: 1px solid rgba(22,48,43,0.1);
}
.faq-q {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
}
.faq-q .plus {
  font-size: 20px;
  color: var(--accent-red);
  transition: transform .2s ease;
  flex-shrink: 0;
  margin-left: 16px;
}
.faq-item.open .faq-q .plus { transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
}
.faq-a p { padding: 0 0 22px; color: var(--ink-dim); font-size: 14.5px; max-width: 640px; }

/* ---------- Curriculum (learning-korean) ---------- */
.level-tabs { display: flex; gap: 10px; margin-bottom: 36px; flex-wrap: wrap; }
.level-block { margin-bottom: 56px; }
.level-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 22px; }
.level-head h3 { font-size: 22px; margin: 0; color: var(--ink); }
.level-head span { font-size: 12.5px; color: var(--accent-red); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }

.lesson-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lesson-card {
  background: #fff;
  border: 1px solid rgba(22,48,43,0.08);
  border-radius: 12px;
  padding: 20px;
}
.lesson-card .lesson-tag { font-size: 11px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; display:block; }
.lesson-card h4 { margin: 0 0 6px; font-size: 15px; color: var(--ink); }
.lesson-card p { margin: 0; font-size: 13px; color: var(--ink-dim); }

/* ---------- About: authors ---------- */
.author-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.author-card {
  background: #fff;
  border: 1px solid rgba(22,48,43,0.08);
  border-radius: var(--radius);
  padding: 36px 32px;
  box-shadow: var(--shadow);
}
.author-card .card-icon { width: 52px; height: 52px; font-size: 20px; margin-bottom: 22px; }
.author-card h3 { font-size: 22px; margin: 0 0 4px; color: var(--ink); }
.author-card .author-role { font-size: 13px; color: var(--accent-red); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 18px; }
.author-card .check-list { margin-bottom: 0; }
.author-card .check-list li { color: var(--ink-dim); }

/* ---------- Testimonial strip ---------- */
.testi-strip { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.testi { border-left: 2px solid var(--accent-red); padding-left: 18px; }
.testi p { font-size: 14.5px; color: var(--ink-dim); margin: 0 0 10px; }
.testi span { font-size: 12.5px; font-weight: 700; color: var(--ink); }

/* ---------- Newsletter ---------- */
.newsletter {
  background: var(--bg);
  color: var(--cream);
  border-radius: 20px;
  padding: 52px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.newsletter h3 { font-size: 24px; margin: 0 0 8px; font-weight: 800; }
.newsletter p { margin: 0; color: var(--cream-dim); font-size: 14.5px; }
.newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.newsletter-form[data-done] input,
.newsletter-form[data-done] button { display: none; }
.newsletter-form input {
  padding: 13px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(244,239,226,0.06);
  color: var(--cream);
  font-size: 14px;
  min-width: 240px;
}
.newsletter-form input::placeholder { color: var(--cream-faint); }

/* ---------- CTA banner ---------- */
.cta-banner {
  text-align: center;
  padding: 90px 0;
  background: var(--bg-deep);
  color: var(--cream);
}
.cta-banner h2 { font-size: clamp(24px, 4vw, 36px); font-weight: 800; margin: 10px 0 20px; }
.cta-banner p { color: var(--cream-dim); max-width: 480px; margin: 0 auto 30px; }
.cta-banner .btn-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--bg-deep);
  color: var(--cream-dim);
  padding: 56px 0 26px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 30px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.footer-top .logo { margin-bottom: 18px; }
.footer-top .logo-img { height: 42px; }
.footer-top p { font-size: 13.5px; max-width: 260px; color: var(--cream-faint); }
.footer-col h5 {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cream);
  margin: 0 0 16px;
}
.footer-col li { margin-bottom: 10px; font-size: 13.5px; }
.footer-col a:hover { color: var(--cream); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-size: 12px;
  color: var(--cream-faint);
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom .socials { display: flex; gap: 16px; }


/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .grid-3, .grid-4, .lesson-grid, .testi-strip { grid-template-columns: repeat(2, 1fr); }
  .grid-2, .split, .split.reverse, .author-grid, .hero-grid { grid-template-columns: 1fr; }
  .split-visual { order: -1; }
  .hero-grid { min-height: auto; }
  .hero-text { padding: 44px 40px 48px; order: 2; }
  .hero-graphic { order: 1; }
  .footer-top { grid-template-columns: repeat(3, 1fr); }
}

/* The header holds the wordmark, the visit counts, five menu items and
   the account controls. Measured with the counts showing and an account
   signed in, that row needs about 1410px at full size in English, 1310px
   with the spacing tightened, and 1190px once type and padding are
   compact; Brazilian Portuguese, the longest, needs 1560 / 1465 / 1315.
   The breakpoints follow those measurements: tighten at 1600px, compact
   at 1320px. Below 1200px (1480px for the four long-label languages) the
   row will not hold everything, so instead of hiding the menu behind a
   hamburger it moves to a second line under the wordmark and controls:
   everything stays in view, nothing overlaps. Only phones, below 600px,
   get the hamburger; the counts step aside there too. */
@media (max-width: 1600px) {
  .logo-img { height: 40px; }
  .nav-main { gap: 2px; }
  .nav-main a { padding: 10px 12px; }
  .site-header .wrap { gap: 16px; }
}

@media (max-width: 1320px) {
  .logo-img { height: 36px; }
  .nav-main { gap: 0; }
  .nav-main a { font-size: 14px; padding: 9px 10px; }
  .site-header .wrap { gap: 12px; }
  .header-brand { gap: 10px; }
  .site-visits { gap: 8px; padding-left: 10px; font-size: 11px; }
  .btn-login { font-size: 13.5px; padding: 8px 14px; }
  .account-trigger .email { max-width: 80px; }
  .lang-trigger { font-size: 12.5px; padding: 7px 10px; }
  .lang-trigger .lang-current { max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 1200px) {
  .site-header .wrap { flex-wrap: wrap; height: auto; padding-top: 12px; }
  .header-brand { order: 1; }
  .header-actions { order: 2; }
  .nav-main {
    order: 3;
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
    margin-top: 10px;
    padding: 8px 0 10px;
    border-top: 1px solid var(--header-border);
  }
  .account-trigger .email { max-width: 60px; }
}

/* Vietnamese, Spanish, Indonesian, Brazilian Portuguese, French and
   German menu labels run 30–150px longer than English, so those six hand
   over to two rows earlier. The selector's specificity keeps them above the 1200px rules
   regardless of source order. */
@media (max-width: 1480px) {
  html:is([lang="vi"], [lang="es"], [lang="id"], [lang="pt-BR"], [lang="fr"], [lang="de"]) .site-header .wrap { flex-wrap: wrap; height: auto; padding-top: 12px; }
  html:is([lang="vi"], [lang="es"], [lang="id"], [lang="pt-BR"], [lang="fr"], [lang="de"]) .header-brand { order: 1; }
  html:is([lang="vi"], [lang="es"], [lang="id"], [lang="pt-BR"], [lang="fr"], [lang="de"]) .header-actions { order: 2; }
  html:is([lang="vi"], [lang="es"], [lang="id"], [lang="pt-BR"], [lang="fr"], [lang="de"]) .nav-main {
    order: 3;
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
    margin-top: 10px;
    padding: 8px 0 10px;
    border-top: 1px solid var(--header-border);
  }
  html:is([lang="vi"], [lang="es"], [lang="id"], [lang="pt-BR"], [lang="fr"], [lang="de"]) .account-trigger .email { max-width: 60px; }
}

/* French is the longest menu of all: even on the widest screens it
   keeps the tighter spacing the other languages switch to below 1600px,
   or the visit counts run into "Apprendre le coréen". */
@media (min-width: 1601px) {
  html[lang="fr"] .logo-img { height: 40px; }
  html[lang="fr"] .nav-main { gap: 2px; }
  html[lang="fr"] .nav-main a { padding: 10px 12px; }
  html[lang="fr"] .site-header .wrap { gap: 16px; }
}

/* Phones: one row again, the menu behind the hamburger. Written for the
   long-label selector too, so it outranks those languages' two-row rules. */
@media (max-width: 600px) {
  .site-header .wrap,
  html:is([lang="vi"], [lang="es"], [lang="id"], [lang="pt-BR"], [lang="fr"], [lang="de"]) .site-header .wrap { flex-wrap: nowrap; height: var(--header-h); padding-top: 0; }
  .nav-main,
  html:is([lang="vi"], [lang="es"], [lang="id"], [lang="pt-BR"], [lang="fr"], [lang="de"]) .nav-main { display: none; }
  .nav-toggle { display: block; }
  .site-visits { display: none; }
  .site-header.menu-open .nav-main,
  html:is([lang="vi"], [lang="es"], [lang="id"], [lang="pt-BR"], [lang="fr"], [lang="de"]) .site-header.menu-open .nav-main {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    margin: 0;
    padding: 20px 28px 30px;
    gap: 10px;
    border-top: 0;
    background: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
    box-shadow: 0 12px 24px -12px rgba(16,59,49,0.18);
  }
  .site-header.menu-open .nav-main a { text-align: center; }
}

@media (max-width: 720px) {
  /* The controls on the right cannot get narrower than their labels, so
     the logo is the part that gives: it scales down to whatever is left
     beside a signed-in account, instead of sliding underneath it. */
  .header-brand { flex: 1 1 auto; min-width: 0; }
  .logo { flex: 1 1 auto; min-width: 0; max-width: min(174px, 40vw); }
  .logo-img { width: 100%; height: auto; }
  .site-visits { flex: none; }
  .footer-top .logo-img { height: 36px; width: auto; }
  .grid-3, .grid-4, .lesson-grid, .testi-strip, .footer-top { grid-template-columns: 1fr; }
  .newsletter { flex-direction: column; align-items: flex-start; }
  .newsletter-form { width: 100%; }
  .newsletter-form input { flex-grow: 1; }
  .section { padding: 60px 0; }
  .hero-text { padding: 40px 24px 40px; }
  .page-hero-mark { display: none; }
  .hero-why-list { grid-template-columns: 1fr; gap: 12px; }
  .section-after-hero { padding-top: 24px; }
  .lang-trigger { padding: 8px; }
  .lang-trigger .lang-current { display: none; }
  .lang-menu { left: auto; right: 0; }
}

/* The narrow end of the two-row band. Vietnamese counts run long enough
   that, beside a signed-in account, the top row would spill into a
   third line, so here the logo and the counts each give a little. */
@media (min-width: 601px) and (max-width: 720px) {
  .logo { max-width: min(174px, 26vw); }
  .site-visits { font-size: 10.5px; gap: 6px; padding-left: 8px; letter-spacing: 0; }
}

/* Phones. Must stay after the 720px block: the header buys back width
   from padding and control sizing so the logo keeps a readable size
   beside a signed-in account, and an equal-specificity rule defined
   later wins. The account keeps its avatar and drops the name. */
@media (max-width: 480px) {
  .site-header .wrap { padding-left: 14px; padding-right: 14px; gap: 8px; }
  .logo { max-width: min(174px, 40vw); }
  .header-actions { gap: 6px; }
  .btn-login { font-size: 12px; padding: 6px 10px; }
  .account-trigger .email { display: none; }
  .lang-trigger { padding: 6px; }
  .nav-toggle { width: 28px; }
}

/* ============================================================
   Auth modal (Supabase Auth)
   ============================================================ */
.auth-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 8, 0.6);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}

.auth-modal {
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--paper);
  border-radius: 18px;
  padding: 36px 32px;
  position: relative;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.5);
}

.auth-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(22,48,43,0.06);
  border: none;
  color: var(--ink);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-close:hover { background: rgba(22,48,43,0.12); }

.auth-tabs { display: flex; gap: 6px; margin-bottom: 24px; background: rgba(22,48,43,0.06); padding: 4px; border-radius: 999px; }
.auth-tab {
  flex: 1;
  background: none;
  border: none;
  padding: 10px 0;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-dim);
}
.auth-tab.active { background: var(--bg); color: var(--cream); }

.auth-panel h2 { font-size: 22px; margin: 0 0 6px; color: var(--ink); }
.auth-panel .auth-sub { font-size: 13.5px; color: var(--ink-dim); margin: 0 0 22px; }

.auth-field { margin-bottom: 16px; }
.auth-field label { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.auth-field input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(22,48,43,0.18);
  background: #fff;
  font-size: 14.5px;
  color: var(--ink);
  font-family: inherit;
}
.auth-field input:focus-visible { outline: 2px solid var(--accent-red); outline-offset: 1px; }

.auth-consents { margin-bottom: 16px; }
.auth-consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 1.4;
}
.auth-consent-row input[type="checkbox"] {
  width: auto;
  height: auto;
  padding: 0;
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
}
.auth-consent-row label {
  margin-bottom: 0;
  font-weight: 400;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}

.auth-row-between { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.auth-link-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent-red);
}

.auth-submit { width: 100%; justify-content: center; margin-bottom: 14px; }
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-dim);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 16px 0;
}
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: rgba(22,48,43,0.14); }

.auth-message {
  font-size: 13px;
  padding: 12px 14px;
  border-radius: 10px;
  margin-bottom: 16px;
  line-height: 1.5;
}
.auth-message.info { background: rgba(207, 138, 82, 0.14); color: #7a4f22; }
.auth-message.success { background: rgba(74, 138, 92, 0.14); color: #2d5c3d; }
.auth-message.error { background: rgba(184, 73, 47, 0.12); color: var(--accent-red); }

.auth-config-notice {
  font-size: 12.5px;
  color: var(--ink-dim);
  background: rgba(22,48,43,0.05);
  border: 1px dashed rgba(22,48,43,0.2);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 18px;
  line-height: 1.6;
}
.auth-config-notice code { background: rgba(22,48,43,0.08); padding: 1px 5px; border-radius: 4px; font-size: 11.5px; }

/* ---- Legal pages (privacy, terms) ------------------------------- */
/* Long-form prose needs a narrower measure than the 1180px content
   column; anything wider becomes tiring to read. */
.legal-wrap { max-width: 760px; }
.legal-updated {
  font-size: 14px;
  color: var(--ink-dim);
  margin: 0 0 32px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(22, 48, 43, 0.12);
}
.legal-wrap h2 {
  font-size: clamp(20px, 2.2vw, 24px);
  margin: 40px 0 12px;
  color: var(--ink);
}
.legal-wrap h2:first-of-type { margin-top: 0; }
.legal-wrap p {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--ink-dim);
  margin: 0 0 14px;
}
.legal-wrap p strong { color: var(--ink); font-weight: 700; }
.legal-wrap a { color: var(--accent-red); font-weight: 600; }

/* ---- Blog: dynamic cards, drafts, single post ------------------- */
.blog-card h3 a { color: inherit; text-decoration: none; }
.blog-card h3 a:hover { color: var(--accent-red); }
.blog-date { font-size: 13px; color: var(--ink-dim); margin: 6px 0 10px; }
.blog-draft-tag {
  display: inline-block; font-size: 11px; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: #8a5a12; background: #fbeccd; border-radius: 999px; padding: 2px 8px;
}
.blog-card-admin { display: flex; gap: 8px; margin-top: 12px; }
.blog-card-admin button {
  font-size: 12.5px; font-weight: 700; border-radius: 6px; padding: 5px 10px;
  border: 1px solid rgba(22, 48, 43, 0.18); background: #fff; color: var(--ink);
}
.blog-card-admin .blog-delete-btn { color: #b3261e; border-color: rgba(179, 38, 30, 0.3); }

/* A single post reads as an article, so it gets the narrow measure the
   legal pages use rather than the three-column card grid's width. */
.blog-single { max-width: 760px; }
.blog-single h1 { font-size: clamp(28px, 4vw, 42px); margin: 10px 0 6px; }
.blog-back {
  display: block; width: fit-content; margin-bottom: 18px;
  font-size: 14px; font-weight: 700; color: var(--accent-red);
}
.post-body { margin-top: 22px; }
.post-body p { font-size: 16.5px; line-height: 1.8; color: var(--ink-dim); margin: 0 0 16px; }

/* ---- Learner stories -------------------------------------------- */
.story-toolbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 28px;
}
.story-signed-out {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 15px; color: var(--ink-dim);
}
.story-list { display: grid; gap: 16px; max-width: 760px; }
.story-card {
  background: #fff; border: 1px solid rgba(22, 48, 43, 0.10);
  border-radius: 14px; padding: 22px 24px;
}
.story-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.story-head h3 { font-size: 16px; margin: 0; color: var(--ink); }
.story-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-red); color: #fff; font-weight: 800; font-size: 15px;
}
.story-meta { font-size: 13px; color: var(--ink-dim); margin: 2px 0 0; }
/* Learner text is unpredictable — a pasted URL or a long unbroken run
   must wrap instead of pushing the card wider than the viewport. */
.story-body p {
  font-size: 15.5px; line-height: 1.75; color: var(--ink-dim); margin: 0 0 12px;
  overflow-wrap: anywhere;
}
.story-body p:last-child { margin-bottom: 0; }
.story-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.story-actions button {
  font-size: 12.5px; font-weight: 700; border-radius: 6px; padding: 5px 10px;
  border: 1px solid rgba(22, 48, 43, 0.18); background: #fff; color: var(--ink);
}
.story-actions .story-delete-btn { color: #b3261e; border-color: rgba(179, 38, 30, 0.3); }

/* ---- Post editor ------------------------------------------------ */
.post-modal { max-width: 620px; }
.auth-field textarea {
  width: 100%; font: inherit; font-size: 15px; line-height: 1.6;
  padding: 10px 12px; border-radius: 8px; resize: vertical;
  border: 1px solid rgba(22, 48, 43, 0.18); background: #fff; color: var(--ink);
}
.auth-field select {
  width: 100%; font: inherit; font-size: 15px; padding: 10px 12px;
  border-radius: 8px; border: 1px solid rgba(22, 48, 43, 0.18);
  background: #fff; color: var(--ink);
}
.field-hint { font-size: 12.5px; color: var(--ink-dim); margin: 6px 0 0; }
.post-publish-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 14.5px; color: var(--ink); margin: 4px 0 16px;
}

/* ---- Search ------------------------------------------------ */
.search-container { max-width: 760px; }
.search-box {
  position: relative; margin-bottom: 24px;
}
.search-input {
  width: 100%; padding: 14px 16px 14px 44px;
  font-size: 16px; border: 2px solid var(--accent-red);
  border-radius: 10px; background: #fff;
  color: var(--ink); font-family: inherit;
}
.search-input:focus { outline: none; box-shadow: 0 0 0 3px rgba(30, 122, 94, 0.1); }
.search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--accent-red); pointer-events: none; flex-shrink: 0;
}
.search-filters {
  display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px;
}
.search-filter-btn {
  padding: 8px 16px; border: 1px solid rgba(22, 48, 43, 0.2);
  border-radius: 20px; background: #fff; color: var(--ink);
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: all 0.18s ease;
}
.search-filter-btn:hover { background: rgba(30, 122, 94, 0.05); }
.search-filter-btn.active {
  background: var(--accent-red); color: #fff; border-color: var(--accent-red);
}

.search-results { display: grid; gap: 16px; margin-bottom: 28px; }
.search-result-card {
  background: #fff; border: 1px solid rgba(22, 48, 43, 0.10);
  border-radius: 12px; padding: 20px 22px;
  transition: all 0.18s ease;
}
.search-result-card:hover { border-color: var(--accent-red); box-shadow: 0 2px 8px rgba(22, 48, 43, 0.08); }
.search-result-link {
  display: block; text-decoration: none; color: inherit;
}
.search-result-type {
  display: inline-block; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.5px;
  padding: 4px 8px; border-radius: 4px; margin-bottom: 8px;
}
.search-result-type.blog { background: rgba(30, 122, 94, 0.1); color: var(--accent-red); }
.search-result-type.stories { background: rgba(184, 73, 47, 0.1); color: #b8492f; }
.search-result-type.resources { background: rgba(70, 70, 70, 0.1); color: #464646; }

.search-result-card h3 {
  font-size: 18px; margin: 0 0 8px; color: var(--ink);
}
.search-result-card p {
  font-size: 15px; line-height: 1.6; color: var(--ink-dim); margin: 0;
}
.search-result-card small {
  font-size: 13px; color: var(--ink-dim); display: block; margin-top: 8px;
}
.search-result-card mark {
  background: rgba(30, 122, 94, 0.2); color: var(--ink); padding: 1px 3px;
  border-radius: 2px; font-weight: 600;
}

.search-empty {
  text-align: center; padding: 40px 20px;
  color: var(--ink-dim); font-size: 16px;
}

/* ---------- Profile page ---------- */
.profile-card {
  background: #fff;
  border: 1px solid rgba(22, 48, 43, 0.1);
  border-radius: 12px;
  padding: 32px;
  margin-bottom: 48px;
}

.profile-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
  gap: 20px;
}

.profile-info h2 {
  margin: 0 0 8px;
  font-size: 28px;
  color: var(--ink);
}

.profile-email {
  font-size: 15px;
  color: var(--ink-dim);
  margin: 0 0 6px;
}

.profile-birthdate {
  font-size: 14px;
  color: var(--ink-dim);
  margin: 0 0 16px;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 24px;
  padding-top: 32px;
  border-top: 1px solid rgba(22, 48, 43, 0.1);
}

.stat {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 32px;
  font-weight: 700;
  color: var(--bg);
  margin-bottom: 8px;
}

.stat-label {
  font-size: 13px;
  color: var(--ink-dim);
  font-weight: 600;
}

.profile-section {
  margin-bottom: 48px;
}

.profile-section h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(22, 48, 43, 0.1);
}

.story-card {
  background: #fff;
  border: 1px solid rgba(22, 48, 43, 0.1);
  border-radius: 8px;
  padding: 16px;
  transition: all 0.18s ease;
}

.story-card:hover {
  border-color: var(--accent-red);
  box-shadow: 0 2px 8px rgba(22, 48, 43, 0.08);
}

.story-preview {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 8px;
}

.story-date {
  font-size: 12px;
  color: var(--ink-dim);
  margin: 0;
}

/* ---------- Blog sharing ---------- */
.blog-share {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(22, 48, 43, 0.1);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.blog-share-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-dim);
}

.blog-share-buttons {
  display: flex;
  gap: 8px;
}

.blog-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 600;
  border: 1px solid rgba(22, 48, 43, 0.2);
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.18s ease;
}

.blog-share-btn:hover {
  background: var(--bg);
  color: var(--cream);
  border-color: var(--bg);
}

.blog-share-btn.twitter:hover { background: #1da1f2; color: #fff; border-color: #1da1f2; }
.blog-share-btn.facebook:hover { background: #1877f2; color: #fff; border-color: #1877f2; }
.blog-share-btn.naver:hover { background: #03c75a; color: #fff; border-color: #03c75a; }
.blog-share-btn.kakao:hover { background: #fee500; color: #191600; border-color: #fee500; }
.blog-share-btn.copy:hover { background: var(--accent-red); color: #fff; border-color: var(--accent-red); }

/* ---------- Blog navigation ---------- */
.blog-nav {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(22, 48, 43, 0.1);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.blog-nav a {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid rgba(22, 48, 43, 0.1);
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink);
  transition: all 0.18s ease;
}

.blog-nav a:hover {
  border-color: var(--accent-red);
  background: rgba(184, 73, 47, 0.03);
}

.blog-nav-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.blog-nav-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.blog-nav a:hover .blog-nav-title { color: var(--accent-red); }

@media (max-width: 768px) {
  .blog-nav { grid-template-columns: 1fr; gap: 16px; }
}

/* ---------- Content likes ---------- */
.like-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid rgba(22, 48, 43, 0.2);
  border-radius: 20px;
  background: #fff;
  color: var(--ink-dim);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}

.like-btn:hover {
  border-color: var(--accent-red);
  color: var(--accent-red);
  background: rgba(184, 73, 47, 0.05);
}

.like-btn.liked {
  background: rgba(184, 73, 47, 0.1);
  color: var(--accent-red);
  border-color: var(--accent-red);
}

.like-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* A signed-out reader's like is in and cannot be taken back. It should
   read as finished rather than as a button that stopped working, so it
   keeps its colour and only loses the hover and the pointer. */
.like-btn.is-spent {
  opacity: 1;
  cursor: default;
}
.like-btn.is-spent:hover {
  background: rgba(184, 73, 47, 0.1);
  color: var(--accent-red);
  border-color: var(--accent-red);
}

.like-count {
  font-weight: 600;
}

/* ---------- Recommendations section ---------- */
.recommendations-section {
  margin: 48px 0;
  padding: 32px;
  background: rgba(16, 63, 53, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(22, 48, 43, 0.1);
}

.recommendations-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 20px;
}

.recommendations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

/* ---------- Blog post actions ---------- */
.blog-post-actions {
  display: flex;
  gap: 12px;
  margin: 24px 0;
}

/* ---------- Auto-save status ---------- */
.auto-save-status {
  font-size: 12px;
  color: var(--ink-dim);
  margin-bottom: 12px;
  font-style: italic;
}

/* ---------- Blog editor preview ---------- */
.post-modal-wide {
  max-width: 90vw;
  width: 1200px !important;
}

.post-editor-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-height: 60vh;
  overflow-y: auto;
}

.post-editor-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.post-preview-pane {
  border-left: 1px solid rgba(22, 48, 43, 0.1);
  padding-left: 20px;
  overflow-y: auto;
}

.post-preview-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.post-preview {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
}

.post-preview .post-body p {
  margin-bottom: 12px;
}

.post-preview .post-body p:last-child {
  margin-bottom: 0;
}

@media (max-width: 1024px) {
  .post-editor-container {
    grid-template-columns: 1fr;
  }
  .post-preview-pane {
    border-left: none;
    border-top: 1px solid rgba(22, 48, 43, 0.1);
    padding-left: 0;
    padding-top: 20px;
  }
}

/* ---------- Admin panel ---------- */
.admin-panel {
  background: #fff;
  border: 1px solid rgba(22, 48, 43, 0.1);
  border-radius: 12px;
  padding: 32px;
}

.admin-section {
  margin-bottom: 32px;
}

.admin-section h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(22, 48, 43, 0.1);
}

.admin-form {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.admin-form input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid rgba(22, 48, 43, 0.15);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}

.admin-form input:focus {
  outline: none;
  border-color: var(--bg);
  box-shadow: 0 0 0 2px rgba(16, 63, 53, 0.1);
}

.admin-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: #f9f7f4;
  border: 1px solid rgba(22, 48, 43, 0.08);
  border-radius: 6px;
}

.admin-item-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.admin-user-id {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  word-break: break-all;
}

.admin-created-date {
  font-size: 12px;
  color: var(--ink-dim);
}

.admin-remove-btn {
  padding: 6px 12px;
  border: 1px solid rgba(179, 38, 30, 0.3);
  border-radius: 4px;
  background: #fff;
  color: #b3261e;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  margin-left: 12px;
}

.admin-remove-btn:hover {
  background: rgba(179, 38, 30, 0.1);
}

/* ---------- Notifications ---------- */
.notifications-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 400px;
}

.notification {
  padding: 14px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  animation: slideIn 0.3s ease;
  word-wrap: break-word;
  word-break: break-word;
}

.notification-info {
  background: #e3f2fd;
  color: #1565c0;
  border-left: 4px solid #1565c0;
}

.notification-success {
  background: #e8f5e9;
  color: #2e7d32;
  border-left: 4px solid #2e7d32;
}

.notification-error {
  background: #ffebee;
  color: #c62828;
  border-left: 4px solid #c62828;
}

.notification-warning {
  background: #fff3e0;
  color: #ef6c00;
  border-left: 4px solid #ef6c00;
}

.notification-exit {
  animation: slideOut 0.3s ease forwards;
}

@keyframes slideIn {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOut {
  to {
    transform: translateX(400px);
    opacity: 0;
  }
}

@media (max-width: 480px) {
  .notifications-container {
    left: 12px;
    right: 12px;
    max-width: none;
  }
}

/* ---- Admin: visitor analytics ---- */

.visitor-stats {
  margin-bottom: 40px;
}
.visitor-stats h2 {
  font-size: 20px;
  margin: 0 0 16px;
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.stat-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 18px;
  border: 1px solid var(--header-border);
  border-radius: var(--radius);
  background: var(--paper);
}
.stat-value {
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-dim);
}
.stat-note {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--ink-dim);
}

@media (max-width: 720px) {
  .stat-grid { grid-template-columns: 1fr; }
}

/* ---- Post tags ---- */

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 0;
}
.post-tag {
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--accent-red-soft);
  color: var(--accent-red);
  text-decoration: none;
  transition: background 0.18s ease;
}
.post-tag:hover { background: var(--accent-red); color: #fff; }

.blog-tag-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 18px;
  margin-bottom: 22px;
  border: 1px solid var(--header-border);
  border-radius: var(--radius);
  background: var(--paper);
  font-size: 14px;
  color: var(--ink-dim);
}
.blog-tag-banner strong { color: var(--accent-red); }
.blog-tag-banner a { color: var(--ink); font-weight: 600; font-size: 13px; }

/* ---- Follow button ---- */

.follow-btn {
  margin-left: auto;
  align-self: flex-start;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--accent-red);
  background: transparent;
  color: var(--accent-red);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease;
}
.follow-btn:hover:not(:disabled) { background: var(--accent-red); color: #fff; }
.follow-btn.is-following {
  border-color: var(--header-border);
  color: var(--ink-dim);
}
.follow-btn:disabled { opacity: 0.55; cursor: default; }

/* ---- Notification bell ---- */

.notify-wrap { position: relative; }

.notify-bell {
  position: relative;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  padding: 7px 8px;
  border-radius: 999px;
  transition: background 0.18s ease;
}
.notify-bell:hover { background: var(--nav-hover-bg); }

.notify-badge {
  position: absolute;
  top: 1px;
  right: 0;
  min-width: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent-red);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

.notify-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(330px, calc(100vw - 32px));
  max-height: 420px;
  overflow-y: auto;
  z-index: 60;
  background: var(--paper);
  border: 1px solid var(--header-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.notify-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--header-border);
  font-size: 14px;
}
.notify-readall {
  border: 0;
  background: transparent;
  color: var(--accent-red);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.notify-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--header-border);
  text-decoration: none;
  color: var(--ink);
}
.notify-item:last-child { border-bottom: 0; }
.notify-item:hover { background: var(--nav-hover-bg); }
.notify-item.unread { background: var(--accent-red-soft); }
.notify-kind {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-red);
}
.notify-text { font-size: 13.5px; line-height: 1.35; }
.notify-empty {
  margin: 0;
  padding: 22px 14px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-dim);
}

/* ---- Admin role section ---- */

.admin-section-note {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.5;
}
.admin-form select {
  padding: 10px 12px;
  border: 1px solid var(--header-border);
  border-radius: 8px;
  background: var(--paper);
  font: inherit;
  font-size: 14px;
  color: var(--ink);
}

/* ---- Markdown output inside a post body ---- */
/* The global reset strips list markers site-wide, so they are restored
   here rather than globally: only rendered Markdown wants them back. */

/* A sub-heading is drawn as a highlighter stroke rather than as a
   bigger, bolder line. The gradient starts part-way down so the colour
   sits under the text the way a marker pen does, and the element is
   shrink-to-fit so the stroke ends where the words do rather than
   running to the edge of the column. `inline-block` is what shrinks it;
   the headings' siblings are all blocks, so each still sits on its own
   line. box-decoration-break keeps the stroke on both lines when a long
   heading wraps. */
.post-body h2,
.post-body h3,
.post-body h4 {
  display: inline-block;
  margin: 30px 0 12px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--ink);
  padding: 0 6px 1px;
  background-image: linear-gradient(transparent 58%, var(--marker) 58%);
  background-repeat: no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.post-body h2 { font-size: 19.5px; }
.post-body h3 { font-size: 17.5px; }
.post-body h4 { font-size: 16.5px; }
.post-body h2:first-child,
.post-body h3:first-child { margin-top: 0; }

.post-body ul,
.post-body ol {
  margin: 0 0 18px;
  padding-left: 1.45em;
}
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body li {
  margin-bottom: 7px;
  line-height: 1.65;
}

.post-body blockquote {
  margin: 20px 0;
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--accent-red);
  color: var(--ink-dim);
  font-style: italic;
}

.post-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(22, 48, 43, 0.07);
}

.post-body hr {
  margin: 30px 0;
  border: 0;
  border-top: 1px solid var(--header-border);
}

.post-body a { color: var(--accent-red); text-decoration: underline; }

.post-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin: 18px 0;
}

/* ============================================================
   About the authors
   ============================================================ */

.authors {
  background: #f7f3ea;
  --a-card: #fffcf7;
  --a-ink: #172b2d;
  --a-sub: #596364;
  --a-accent: #b96743;
  --a-soft: #f5e7df;
  --a-border: #e8ded2;
}

.authors-head {
  max-width: 680px;
  margin: 0 auto 52px;
  text-align: center;
}

/* Small caps label with a hairline reaching out either side. */
.authors-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--a-accent);
  margin-bottom: 20px;
}
.authors-eyebrow::before,
.authors-eyebrow::after {
  content: "";
  width: 42px;
  height: 1px;
  background: var(--a-border);
}

.authors-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.18;
  letter-spacing: 0.005em;
  color: var(--a-ink);
  margin: 0 0 18px;
}

.authors-lede {
  max-width: 560px;
  margin: 0 auto;
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--a-sub);
}

.authors-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
  max-width: 1020px;
  margin: 0 auto;
}

.author-panel {
  display: flex;
  flex-direction: column;
  background: var(--a-card);
  border: 1px solid var(--a-border);
  border-radius: 26px;
  padding: 34px 34px 36px;
  box-shadow: 0 18px 44px -34px rgba(23, 43, 45, 0.5);
}

.author-panel-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 18px;
}

.author-badge {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--a-accent);
  background: var(--a-soft);
  border-radius: 999px;
  padding: 7px 14px;
  white-space: nowrap;
}

.author-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: 31px;
  line-height: 1.15;
  color: var(--a-ink);
  margin: 0 0 6px;
  text-align: center;
}

.author-role {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--a-sub);
  margin: 0 0 26px;
  text-align: center;
}

.author-credentials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.author-credentials li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--a-ink);
}

/* Deliberately quiet: the credential is the content, the icon is a marker. */
.cred-icon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--a-soft);
  color: var(--a-accent);
}
.cred-icon svg { width: 15px; height: 15px; }

/* The strip between the cards, saying the two belong together. */
.authors-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 132px;
  padding: 26px 0;
  text-align: center;
}
.authors-link-rule {
  flex: 1;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--a-border) 22%, var(--a-border) 78%, transparent);
}
.authors-link-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--a-card);
  border: 1px solid var(--a-border);
  color: var(--a-accent);
}
.authors-link-mark svg { width: 20px; height: 20px; }
.authors-link-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--a-accent);
}
.authors-link-note {
  font-size: 12px;
  line-height: 1.45;
  color: var(--a-sub);
  max-width: 118px;
}

.authors-tagline {
  margin: 46px 0 0;
  text-align: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 19px;
  font-style: italic;
  color: var(--a-sub);
}

@media (max-width: 900px) {
  .authors-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  /* On one column the connector reads as a header for the pair, so it
     moves above both cards rather than sitting between them. */
  .authors-link {
    order: -1;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    padding: 0 0 4px;
    gap: 12px;
  }
  .authors-link-rule { display: none; }
  .authors-link-note { max-width: none; }
}

@media (max-width: 520px) {
  .author-panel { padding: 26px 22px 28px; }
  .author-name { font-size: 27px; }
}

/* ---- Hero: the three entry cards ---- */

.hero-entry {
  padding-top: 0;
  margin-top: 0;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hero-entry .hero-why-head { margin-bottom: 6px; }
.hero-entry .hero-why-head .eyebrow {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--accent-red);
  margin-bottom: 4px;
}

.entry-card {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 15px 18px 15px 16px;
  border: 1px solid var(--header-border);
  border-radius: var(--radius);
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.entry-card:hover {
  border-color: var(--accent-red);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -22px rgba(23, 43, 45, 0.5);
}
.entry-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--accent-red-soft);
  color: var(--accent-red);
  font-size: 19px;
  font-weight: 700;
}
.entry-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.entry-body strong { font-size: 15px; color: var(--ink); }
.entry-body span { font-size: 12.5px; line-height: 1.45; color: var(--ink-dim); }
.entry-go {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent-red);
  white-space: nowrap;
}
/* Three columns stop fitting on a phone. Rather than dropping "Open →",
   it moves to a second row under the text, in the text's own column. */
@media (max-width: 480px) {
  .entry-card {
    grid-template-columns: 40px 1fr;
    gap: 8px 14px;
    padding: 15px 16px;
  }
  .entry-go { grid-column: 2; }
}

/* ---- Guestbook replies ---- */

.story-toolbar-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}
.story-reply-btn {
  border: 1px solid var(--header-border);
  background: transparent;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.story-reply-btn:hover { border-color: var(--accent-red); color: var(--accent-red); }

.story-replies {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed rgba(22, 48, 43, 0.14);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.story-replies-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.story-reply {
  display: grid;
  grid-template-columns: 16px 30px 1fr;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--paper-alt);
}
.story-reply .story-avatar {
  width: 30px; height: 30px; font-size: 13px;
}
.story-reply-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.story-reply-head strong { font-size: 13.5px; color: var(--ink); }
.story-reply-head .story-meta { margin: 0; font-size: 12px; }
.story-reply .story-body { font-size: 14px; }
.story-reply .story-body p { margin: 0 0 6px; }
.story-reply .story-actions { margin-top: 6px; }
.story-reply .story-replies {
  margin-top: 10px;
  padding-top: 10px;
  gap: 10px;
}
.story-reply .story-reply { background: rgba(255, 255, 255, 0.55); }
.story-reply > div { min-width: 0; }
.story-reply-mark {
  display: flex;
  align-items: flex-start;
  padding-top: 5px;
  color: var(--ink-dim);
  opacity: 0.75;
}

/* On a phone each level of indent costs the thread width it does not
   have, so replies to replies drop the avatar column and its gap. */
@media (max-width: 480px) {
  .story-reply .story-reply { grid-template-columns: 14px 1fr; gap: 8px; padding: 10px 12px; }
  .story-reply .story-reply > .story-avatar { display: none; }
}

/* Every entry shows all three actions; the ones this visitor may not
   use are dimmed and explain themselves when pressed. */
.story-actions .is-muted {
  opacity: 0.45;
}

/* ---- Newsletter feedback ---- */

.newsletter-note {
  flex-basis: 100%;
  margin: 8px 0 0;
  font-size: 13px;
}
/* Once the form has given way, the answer is all that is left, so it
   carries the weight the field used to. */
.newsletter-form[data-done] .newsletter-note {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}
.newsletter-note[data-kind="success"] { color: #6fcf97; }
.newsletter-note[data-kind="error"] { color: var(--accent-red); }
.newsletter-note[data-kind="info"] { color: var(--ink-dim); }

/* ---- Admin: subscriber count pill ---- */

.stat-pill {
  display: inline-block;
  vertical-align: middle;
  min-width: 26px;
  padding: 2px 9px;
  margin-left: 8px;
  border-radius: 999px;
  background: var(--accent-red-soft);
  color: var(--accent-red);
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
}

/* ---------- Downloads: list ---------- */

.dl-toolbar { margin-bottom: 32px; }
.dl-toolbar .filter-row { margin-bottom: 14px; }
.dl-toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.dl-lang {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-dim);
}
.dl-lang select {
  padding: 9px 36px 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(22,48,43,0.15);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2316302b' stroke-width='2.2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 14px center;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
  max-width: 260px;
}

.resource-empty {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 22px 24px;
  border: 1px dashed rgba(22,48,43,0.2);
  border-radius: var(--radius);
  margin-bottom: 24px;
}
.resource-empty p { margin: 0; color: var(--ink-dim); font-size: 14.5px; }

/* A download reads as one compact row: a small square for the cover or
   its category glyph, then the text. Three to a row on a wide screen,
   so a page of twenty is still a page rather than a scroll. */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

/* The whole card opens the resource. One real link — the title — is
   stretched over the card with ::after, so there is a single tab stop
   and a single target, and the thumbnail and the arrow are plain text
   sitting underneath it. */
.res-card {
  position: relative;
  cursor: pointer;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  background: #fff;
  border: 1px solid rgba(22, 48, 43, 0.1);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: 0 10px 24px -22px rgba(23, 43, 45, 0.5);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.res-card:hover { border-color: rgba(22, 48, 43, 0.22); box-shadow: 0 14px 28px -20px rgba(23, 43, 45, 0.55); }
.res-card--draft { border-style: dashed; border-color: rgba(184, 73, 45, 0.5); }

.res-thumb {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(140deg, var(--bg-soft), var(--bg));
}
.res-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.res-cover-glyph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #f7f4ec;
  font-size: 26px;
  font-weight: 700;
}

.res-card-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.res-draft {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-red);
  font-weight: 700;
}
.res-card-body h3 { font-size: 15px; margin: 0; color: var(--ink); line-height: 1.35; }
.res-card-body h3 a { color: inherit; }
.res-card-body h3 a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.res-card-body h3 a:focus-visible { outline: none; }
.res-card-body h3 a:focus-visible::after {
  outline: 2px solid var(--accent-red);
  outline-offset: 3px;
}
.res-card:hover .res-card-body h3 a { color: var(--accent-red); }
.res-card-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-dim);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.res-meta {
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent-red);
  font-weight: 700;
  margin: 1px 0 0;
}
.res-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.res-langs { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.res-chip {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(22, 48, 43, 0.07);
  color: var(--ink-dim);
}
.res-chip--more { background: transparent; border: 1px solid rgba(22, 48, 43, 0.16); }
.res-chip--none { background: transparent; font-weight: 500; letter-spacing: 0; text-transform: none; }
.res-view { font-size: 12.5px; font-weight: 700; color: var(--accent-red); white-space: nowrap; }
.res-card:hover .res-view { text-decoration: underline; }

/* Empty state: the languages this category does have, as a way out. */
.res-lang-suggest {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.res-lang-suggest-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-dim);
}
.res-lang-suggest .btn { padding: 6px 14px; font-size: 13px; }

/* ---------- Blog: post in several languages ---------- */

.res-status-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }
/* An admin moves a download or a post to another category from here. */
.res-move { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.res-move select { font: inherit; padding: 5px 8px; border: 1px solid #cfd8d4; border-radius: 6px; background: #fff; }
.blog-lang-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 14px 0 18px;
}
.blog-lang-note {
  font-size: 13px;
  color: var(--accent-red);
  margin: 0;
}
.blog-single .res-status { margin-bottom: 20px; }

/* A language inside the editor's translations block. */
.res-more--nested {
  margin: 0 0 8px;
  padding: 0 14px;
  border-radius: 10px;
  background: rgba(22, 48, 43, 0.03);
}
.res-more--nested > summary { font-size: 14px; padding: 10px 0; }
.post-tr-state {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-left: 6px;
}
.post-tr-state.is-written { color: #2f6b41; }

/* ---------- Blog: a post read in two languages at once ---------- */

/* Each source sentence sits above its translation. The pair is one
   block so a long sentence and its translation never drift apart, and
   the marker on the left tells a reader at a glance which line is
   which without a label on every one. */
.mt-para { margin: 0 0 22px; }
.mt-line {
  display: block;
  margin-bottom: 12px;
  padding-left: 14px;
  border-left: 2px solid rgba(22, 48, 43, 0.1);
}
.mt-line:last-child { margin-bottom: 0; }
.mt-src {
  display: block;
  color: var(--ink);
}
.mt-out {
  display: block;
  margin-top: 3px;
  color: var(--ink-dim);
  font-size: 0.94em;
}
.post-body--mt { line-height: 1.65; }

/* A sub-heading in the paired view: the same marker stroke as the
   rendered body above, so a reader meets one kind of sub-heading on
   this site and not two. The hashes that named it in the source are
   stripped in js/blog.js — they are Markdown's marks, not the
   writer's words. */
.mt-line--head {
  border-left-color: transparent;
  margin-top: 24px;
  margin-bottom: 14px;
}
.mt-line--head:first-child { margin-top: 0; }
.mt-line--head .mt-src,
.mt-line--head .mt-out {
  /* `table` rather than `inline-block`: the stroke must still end with
     the words, but the heading and its translation are two lines, one
     above the other, like every other pair on the page. Two
     inline-blocks sat side by side and read as one sentence in two
     languages. */
  display: table;
  font-weight: 700;
  color: var(--ink);
  padding: 0 6px 1px;
  background-image: linear-gradient(transparent 58%, var(--marker) 58%);
  background-repeat: no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.mt-line--head .mt-src { font-size: 1.06em; }
.mt-line--head .mt-out { margin-top: 5px; font-size: 1em; }

.mt-title-src {
  font-size: 15px;
  color: var(--ink-dim);
  margin: -6px 0 0;
}

/* Admin: how far the translation has got. */
.mt-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: -8px 0 20px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(22, 48, 43, 0.05);
  font-size: 13.5px;
  color: var(--ink-dim);
}
.mt-status.is-stale { background: rgba(184, 73, 45, 0.1); color: #8a3b1f; }
.mt-status-langs { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.mt-status .btn { margin-left: auto; padding: 6px 14px; font-size: 13px; }

@media (max-width: 420px) {
  .res-card { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .res-thumb { width: 48px; height: 48px; border-radius: 10px; }
  .res-cover-glyph { font-size: 21px; }
}

/* ---------- Downloads: one resource ---------- */

.page-hero--resource .wrap { position: relative; }
.res-back {
  display: block;
  width: fit-content;
  font-size: 13px;
  font-weight: 600;
  color: var(--banner-desc);
  margin-bottom: 14px;
  opacity: 0.85;
}
.res-back:hover { opacity: 1; text-decoration: underline; }
.page-hero--resource h1 { text-wrap: balance; }

.res-notfound { text-align: center; padding: 40px 0 20px; }
.res-notfound h2 { margin: 0 0 8px; }
.res-notfound p { color: var(--ink-dim); margin: 0 0 20px; }

.res-detail {
  display: grid;
  grid-template-columns: minmax(200px, 260px) 1fr;
  gap: 36px;
  align-items: start;
}
.res-cover--large {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(140deg, var(--bg-soft), var(--bg));
  box-shadow: 0 12px 28px -22px rgba(23, 43, 45, 0.55);
}
.res-cover--large img { width: 100%; height: 100%; object-fit: cover; display: block; }
.res-cover--large .res-cover-glyph { font-size: 46px; }
.res-facts { margin: 18px 0 0; display: grid; gap: 8px; }
.res-facts div { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; border-bottom: 1px solid rgba(22,48,43,0.1); padding-bottom: 8px; }
.res-facts dt { color: var(--ink-dim); font-weight: 600; }
.res-facts dd { margin: 0; color: var(--ink); text-align: right; }

.res-panel {
  background: #fff;
  border: 1px solid rgba(22,48,43,0.1);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.res-panel-eyebrow { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-red); font-weight: 700; }
.res-lang-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-dim); }
.res-lang-field select {
  padding: 12px 40px 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(22,48,43,0.16);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2316302b' stroke-width='2.2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 14px center;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
}
.res-lang-field select:disabled { opacity: 0.6; }
.res-notice {
  margin: 0;
  font-size: 13.5px;
  color: #8a3b1f;
  background: rgba(184,73,45,0.1);
  border-radius: 10px;
  padding: 10px 12px;
}
.res-file-meta { margin: 0; font-size: 13.5px; color: var(--ink-dim); min-height: 1.2em; }
.res-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.res-actions .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.res-login-note { margin: 0; font-size: 13px; color: var(--ink-dim); }
.res-lang-hint { margin: 4px 0 0; font-size: 12px; color: var(--ink-dim); opacity: 0.85; }

.res-body { margin-top: 32px; }
.res-body h2 { font-size: 20px; margin: 0 0 12px; }
.res-lead { font-size: 16.5px; line-height: 1.65; color: var(--ink); margin: 0 0 14px; }
.res-body-text p { font-size: 15.5px; line-height: 1.75; color: var(--ink-dim); margin: 0 0 12px; }
.res-body-empty { font-style: italic; }

.res-admin { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.res-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
}
.res-status--draft { background: rgba(184,73,45,0.12); color: #8a3b1f; border: 1px solid rgba(184,73,45,0.35); }
.res-status--live { background: rgba(58,122,74,0.12); color: #2f6b41; border: 1px solid rgba(58,122,74,0.3); }
.res-files td > div + div { margin-top: 6px; }

.res-editor {
  margin-top: 16px;
  padding: 24px;
  border: 1px solid rgba(22,48,43,0.14);
  border-radius: var(--radius);
  background: var(--paper-alt);
}
.res-editor h3 { margin: 22px 0 10px; font-size: 18px; }
.res-editor h3:first-of-type { margin-top: 0; }
.res-editor .auth-field { margin-bottom: 12px; }
.res-editor input[type="text"], .res-editor input[type="number"], .res-editor textarea, .res-editor select, .res-editor input[type="file"] {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(22,48,43,0.16);
  background: #fff;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
}
.res-editor textarea { resize: vertical; }
.res-editor-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.res-check { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 4px 0 14px; }
.res-translations { display: grid; gap: 8px; margin-bottom: 12px; }
.res-tr { border: 1px solid rgba(22,48,43,0.12); border-radius: 10px; background: #fff; padding: 0 14px; }
.res-tr summary { cursor: pointer; padding: 10px 0; font-weight: 700; font-size: 14px; }
.res-tr .auth-field:last-child { margin-bottom: 14px; }
.res-files { width: 100%; border-collapse: collapse; font-size: 13.5px; background: #fff; border-radius: 10px; overflow: hidden; }
.res-files th, .res-files td { text-align: left; padding: 10px 12px; border-bottom: 1px solid rgba(22,48,43,0.1); vertical-align: middle; }
.res-files th { width: 130px; font-weight: 700; color: var(--ink); }
.res-files td { color: var(--ink-dim); }
.res-files .res-pages { width: 64px; padding: 4px 6px; display: inline-block; }
.res-files-act { white-space: nowrap; text-align: right; }
.res-linkbtn {
  background: none; border: none; padding: 0; font: inherit; font-size: 13px; font-weight: 700;
  color: var(--ink); cursor: pointer; text-decoration: underline;
}
.res-linkbtn--danger { color: #b3261e; }
.res-addfile { margin-top: 14px; padding-top: 14px; border-top: 1px dashed rgba(22,48,43,0.2); }

/* The files chosen in the add-a-download form, before they are sent. */
.res-picked:not(:empty) { margin-top: 10px; display: grid; gap: 6px; }
.res-picked-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(120px, 150px) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(22, 48, 43, 0.14);
  border-radius: 10px;
  background: #fff;
  font-size: 13px;
}
.res-picked-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--ink); }
.res-picked-size { color: var(--ink-dim); font-size: 12px; white-space: nowrap; }
.res-picked-row select { padding: 6px 8px; font-size: 12.5px; }
@media (max-width: 520px) {
  .res-picked-row { grid-template-columns: minmax(0, 1fr) auto; }
  .res-picked-row select { grid-column: 1 / -1; }
}

/* The parts of the editor most uploads never touch. */
.res-more {
  margin: 4px 0 16px;
  border: 1px solid rgba(22, 48, 43, 0.12);
  border-radius: 10px;
  background: #fff;
  padding: 0 14px;
}
.res-more > summary {
  cursor: pointer;
  padding: 11px 0;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}
.res-more[open] > summary { border-bottom: 1px solid rgba(22, 48, 43, 0.1); margin-bottom: 12px; }
.res-more > :last-child { margin-bottom: 14px; }
.res-more .res-translations { margin-bottom: 12px; }
.res-danger { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(179,38,30,0.3); }

@media (max-width: 800px) {
  .res-detail { grid-template-columns: 1fr; gap: 24px; }
  .res-detail-media { max-width: 420px; }
  .res-files th { width: auto; }
  .res-files tr { display: grid; grid-template-columns: 1fr; }
  .res-files-act { text-align: left; }
}

/* ---------- Comments under a post ---------- */

.comments {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid rgba(22, 48, 43, 0.12);
}
.comments-title {
  font-size: 20px;
  margin: 0 0 18px;
  color: var(--ink);
}

.comment-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 26px;
}
.comment-as {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-dim);
}
.comment-signin {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 26px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(22, 48, 43, 0.05);
  font-size: 14px;
  color: var(--ink-dim);
}
.comment .comment-signin { margin: 12px 0 0; }
.comment-body {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(22, 48, 43, 0.18);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink);
  resize: vertical;
}
.comment-body:focus {
  outline: none;
  border-color: var(--accent-red);
}
.comment-form-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: flex-end;
}
.comment-send { padding: 9px 20px; font-size: 14px; }
.comment-form-msg {
  margin: 0;
  font-size: 13px;
  color: var(--accent-red);
}

.comment-thread { list-style: none; margin: 0; padding: 0; }
/* A reply steps in once; the rule on the left is what carries the
   nesting, because indenting far enough to be obvious would leave a
   phone no room for the words. */
.comment-thread--nested {
  margin: 14px 0 0 0;
  padding-left: 16px;
  border-left: 2px solid rgba(22, 48, 43, 0.1);
}
.comment {
  padding: 14px 0;
  border-top: 1px solid rgba(22, 48, 43, 0.08);
}
.comment-thread > .comment:first-child { border-top: none; }
.comment-thread--nested > .comment { padding: 12px 0; }

.comment-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}
.comment-author { font-weight: 700; font-size: 14px; color: var(--ink); }
.comment-when { font-size: 12px; color: var(--ink-dim); }
.comment-body-text p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.65; color: var(--ink); }
.comment-body-text p:last-child { margin-bottom: 0; }
.comment-actions { display: flex; gap: 14px; margin-top: 8px; }
.comment .comment-form-wrap { margin-top: 12px; }
.comment .comment-form { margin-bottom: 0; }
.comment-empty { font-size: 14px; color: var(--ink-dim); margin: 0; }

@media (max-width: 480px) {
  .comment-form-actions { justify-content: space-between; }
  .comment-thread--nested { padding-left: 12px; }
}

/* ---------- Sign in with a service ---------- */

/* One row per service rather than a grid of icons: the name is what a
   visitor scans for, and four full-width rows fit a phone without the
   text shrinking. The mark on the left is the service's own colour, so
   the row is recognisable before the label is read. */
.auth-oauth { display: flex; flex-direction: column; gap: 8px; }
.auth-oauth-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid rgba(22, 48, 43, 0.18);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}
.auth-oauth-btn:hover { background: #f5f5f5; }
.auth-oauth-mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  flex: none;
}
.auth-oauth-btn--google   .auth-oauth-mark { background: #4285f4; }
.auth-oauth-btn--facebook .auth-oauth-mark { background: #1877f2; }
.auth-oauth-btn--twitter  .auth-oauth-mark { background: #000; }
.auth-oauth-btn--kakao    .auth-oauth-mark { background: #fee500; color: #191600; }

/* ---------- Self-study under a Korean post ---------- */

.study {
  margin-top: 40px;
  padding: 26px 28px;
  border-radius: 16px;
  background: rgba(22, 48, 43, 0.045);
  border: 1px solid rgba(22, 48, 43, 0.08);
}
.study-title { font-size: 19px; margin: 0 0 4px; color: var(--ink); }
.study-lead { font-size: 13.5px; color: var(--ink-dim); margin: 0 0 20px; }

.study-list {
  list-style: none;
  counter-reset: study;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.study-word {
  counter-increment: study;
  padding-left: 34px;
  position: relative;
}
/* The number is the only ornament: it keeps five entries countable
   without a bullet competing with the Korean word beside it. */
.study-word::before {
  content: counter(study);
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.study-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.study-term { font-size: 19px; font-weight: 700; color: var(--ink); }
.study-rom { font-size: 13px; color: var(--ink-dim); font-style: italic; }
.study-pos {
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-red);
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(184, 73, 45, 0.1);
}
.study-meaning { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--ink); }
.study-note { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-dim); }
.study-source {
  margin: 8px 0 0;
  padding-left: 12px;
  border-left: 2px solid rgba(22, 48, 43, 0.14);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-dim);
}

@media (max-width: 480px) {
  .study { padding: 20px 18px; }
  .study-word { padding-left: 28px; }
  .study-word::before { width: 19px; height: 19px; font-size: 10px; }
  .study-term { font-size: 17px; }
}

/* ---------- The tags field, which fills itself ---------- */

.post-tags-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.post-tags-row input { flex: 1 1 auto; min-width: 0; }
.post-tags-row .res-linkbtn { flex: none; white-space: nowrap; }
#postTagsHint { margin-top: 6px; }
#postTagsHint.is-error { color: var(--accent-red); }

/* ---------- Blog: the eight topics ----------
   All, then the seven topics, as eight cards at the top of the page.
   That is the whole navigation — no pills, no menus, no glyphs. Each
   one says its name, what is on it, and how many posts it holds; the
   one that is open is filled in.                                      */

/* A blog card has no glyph square, so its body takes the whole width. */
.res-card--plain { grid-template-columns: minmax(0, 1fr); }

/* Green for a visitor, blue for a student, purple for someone settled —
   a label on the card, so nobody opens a post written for somebody
   else. There is no filter on it. */
.aud-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.aud-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.aud-badge--tourists { background: #e3f3ea; color: #1b6b43; }
.aud-badge--students { background: #e2edfa; color: #19538f; }
.aud-badge--expats   { background: #efe6fa; color: #5c3590; }

/* ---------- "This page exists in your language" ----------

   Above the header, in the visitor's own language — see js/langbar.js
   for why it is offered rather than switched. Dark green against the
   ivory header so it reads as the site speaking, not as an
   advertisement someone injected.

   The sentence does not grow to fill the row: it and the buttons sit
   together as one group, and only the close button is pushed to the
   far edge. A sentence stretched across a wide screen puts its answer
   so far from the question that the two stop looking related. */

.langbar {
  background: var(--bg);
  color: var(--cream);
  border-bottom: 2px solid rgba(207, 138, 82, 0.5);
}
.langbar-in {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 13px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.langbar-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(244, 239, 226, 0.12);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
/* `flex: none` is the whole of the fix: the line takes the width of
   its words and no more. */
.langbar-line {
  flex: 0 1 auto;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
}
.langbar-go {
  flex: none;
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #1b2b26;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.langbar-go:hover { transform: translateY(-1px); filter: brightness(1.06); }
.langbar-stay {
  flex: none;
  padding: 9px 2px;
  border: 0;
  background: none;
  color: var(--cream-dim);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.langbar-stay:hover { color: var(--cream); }
/* The only thing that leaves the group. */
.langbar-x {
  flex: none;
  margin-left: auto;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--cream-faint);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.langbar-x:hover { color: var(--cream); background: rgba(244, 239, 226, 0.1); }
.langbar button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 760px) {
  /* The sentence takes a line of its own; the two answers sit under
     it, still next to each other. */
  .langbar-in { flex-wrap: wrap; gap: 10px 12px; padding: 12px 16px; }
  .langbar-mark { order: 0; }
  .langbar-x { order: 0; }
  .langbar-line { order: 1; flex: 1 1 100%; font-size: 14.5px; }
  .langbar-go { order: 2; }
  .langbar-stay { order: 3; }
}

/* ---------- The way into a topic, on Blog and on Community ----------

   The same three pieces on both pages, so they read as one site: a
   wide "All posts" button on its own, a thin rule, then a grid of
   cards. The button is not a ninth card — it is how a reader gets back
   out of a topic, and it is sized and placed to say so. */

.topic-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0 0 22px;
  position: relative;
}
/* The button sits on the centre of the column, not on the centre of
   whatever is left once the language picker has taken its width. The
   picker is lifted out of the flow on desktop for exactly that reason;
   on a narrow screen it drops onto its own line below, where centring
   is no longer in question. */
.topic-bar-side {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.all-posts {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 330px;
  max-width: 100%;
  min-height: 76px;
  padding: 0 26px;
  border: 2px solid var(--bg);
  border-radius: 12px;
  background: var(--bg);
  color: var(--cream);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.all-posts:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -22px rgba(10,38,32,0.55); }
.all-posts:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.all-posts svg { width: 26px; height: 26px; flex: none; }
/* Browsing a topic, the button is still the way back to everything, so
   it stays legible — outlined rather than filled, which is also how a
   reader tells "I am looking at all of them" from "I am looking at
   one". */
.all-posts[aria-pressed="false"] {
  background: transparent;
  color: var(--bg);
}
.all-posts[aria-pressed="false"]:hover { background: rgba(18,58,50,0.07); }

.topic-rule {
  height: 1px;
  background: rgba(22,48,43,0.12);
  margin: 0 0 22px;
}

.browse-head {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-red);
}

.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
/* The cards are signposts, not the content: two-thirds of the size
   they first had, so the posts they lead to start higher up the page. */
.cat-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 11px 14px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid rgba(22,48,43,0.12);
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease,
              border-color 0.18s ease, background 0.18s ease;
}
.cat-card:hover {
  transform: translateY(-2px);
  border-color: rgba(22,48,43,0.24);
  box-shadow: 0 18px 34px -22px rgba(10,38,32,0.4);
}
.cat-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.cat-card-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: var(--paper-alt);
  color: var(--bg);
  flex: none;
}
.cat-card-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cat-card h3 {
  margin: 0 0 4px;
  font-size: 14.5px;
  line-height: 1.25;
  color: var(--bg);
}
/* The sentence is never clipped: a card grows to hold it, and the row
   grows with the tallest card. */
.cat-card p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-dim);
}

/* The topic being read. Outlined rather than filled: the cards carry a
   sentence each, and white text on dark green at 12.5px is harder to
   read than the sentence deserves. */
.cat-card[aria-pressed="true"],
.cat-card.active {
  border-color: var(--bg);
  box-shadow: inset 0 0 0 1px var(--bg);
  background: #eef4f0;
}
.cat-card[aria-pressed="true"] .cat-card-icon,
.cat-card.active .cat-card-icon { background: #fff; }

/* Community reads its three cards as a row of equals, so they are
   centred rather than left-aligned. */
.cat-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cat-grid--three .cat-card { align-items: center; text-align: center; padding: 11px 18px; }

/* The heading over the list, and the button beside it. */
.list-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}
.list-head h2 { margin: 0; font-size: 27px; line-height: 1.2; color: var(--bg); }
.list-head-count { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-dim); }

@media (max-width: 1100px) {
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .topic-bar { flex-direction: column; gap: 14px; }
  .topic-bar-side { position: static; transform: none; }
  .all-posts { font-size: 24px; min-height: 64px; width: 280px; }
  .cat-grid { gap: 12px; }
}

@media (max-width: 600px) {
  .cat-grid { grid-template-columns: 1fr; }
  .cat-grid--three { grid-template-columns: 1fr; }
  .all-posts { font-size: 21px; min-height: 58px; width: 100%; }
  .all-posts svg { width: 21px; height: 21px; }
  .cat-card { padding: 11px 14px; }
  .cat-card-icon { width: 30px; height: 30px; margin-bottom: 7px; }
  .list-head h2 { font-size: 22px; }
}

/* The shelf an entry is on, beside its date. Small and quiet: it says
   which of three, it is not a heading. */
.story-cat {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.story-cat--ask   { background: #fdeadf; color: #a14a20; }
.story-cat--share { background: #e2edfa; color: #19538f; }
.story-cat--meet  { background: #e3f2ea; color: #1d6b48; }

/* The language the author wrote in. It sits beside the shelf and the
   date and stays there whether or not a translation is showing, because
   it is a fact about the post rather than about how it is being read.
   The code is for scanning a list of them; the name is in its own
   language, for finding your own in one. */
.story-lang {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(22, 48, 43, 0.06);
  color: var(--ink-dim);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Under the body: what this is, and the way back to what was written.
   Quiet enough not to compete with the post, loud enough that nobody
   mistakes a machine's words for a person's. */
.story-mt {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 2px 0 12px;
  font-size: 13px;
  color: var(--ink-dim);
}
.story-mt-tag {
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef3f0;
  color: #1d6b48;
  font-size: 11px;
  font-weight: 700;
}
.story-mt-src { font-size: 12.5px; }
.story-mt-go,
.story-mt-orig {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-red);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.story-mt-go:hover,
.story-mt-orig:hover { opacity: 0.75; }
.story-mt.is-busy { font-style: italic; }
.story-mt.is-error { color: #a14a20; }

/* The rest of the list, on request. Centred under the cards and quiet
   — it is a way to carry on reading, not a call to action. */
.story-more {
  display: flex;
  justify-content: center;
  max-width: 760px;
  margin: 22px 0 0;
}
.story-more .btn { min-width: 220px; }

/* A line only an admin ever sees: something is switched off and they
   are the one who can switch it on. Deliberately plain — it is a note
   to the person running the site, not part of the page. */
.story-admin-note {
  max-width: 760px;
  margin: 0 0 16px;
  padding: 11px 14px;
  border: 1px dashed rgba(161, 74, 32, 0.45);
  border-radius: 10px;
  background: #fdf4ee;
  color: #8a4420;
  font-size: 13.5px;
  line-height: 1.6;
}

/* Which language people wrote in, beside the Write button. A select
   rather than another row of cards: it is a narrowing, not a place. */
.story-langfilter {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-dim);
}
.story-langfilter select {
  padding: 7px 10px;
  border: 1px solid rgba(22, 48, 43, 0.18);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 13.5px;
  max-width: 190px;
}

@media (max-width: 600px) {
  /* At this width the toolbar is already stacking; the filter takes a
     line of its own rather than squeezing the Write button off screen. */
  .story-langfilter { width: 100%; }
  .story-langfilter select { flex: 1 1 auto; max-width: none; }
}

/* Nothing here yet, said properly: a panel the width of the list
   rather than a stray line under a heading. Only ever shown when the
   list really is empty — see js/stories.js. */
.story-empty {
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 46px 24px;
  border: 1px solid rgba(22,48,43,0.12);
  border-radius: 10px;
  background: #fff;
  text-align: center;
}
.story-empty-icon { color: var(--ink-dim); opacity: 0.55; }
.story-empty-icon svg { width: 30px; height: 30px; display: block; }
.story-empty-title { margin: 8px 0 0; font-size: 16px; font-weight: 700; color: var(--bg); }
.story-empty-sub { margin: 0; font-size: 13.5px; color: var(--ink-dim); }

/* On the community page the write button sits in the list heading, so
   the old standalone toolbar spacing would push it out of line. */
.list-head .story-toolbar { margin: 0; }

/* ---------- Blog: worth reading first ---------- */

.blog-landing { margin-bottom: 44px; }
.blog-landing-title {
  font-size: 19px;
  margin: 0 0 18px;
  color: var(--ink);
}

/* ---------- Blog editor: who it is for ---------- */

.auth-field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-dim);
  margin-bottom: 6px;
}
.post-aud-row { display: flex; gap: 14px; flex-wrap: wrap; }
.post-aud { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }

@media (max-width: 600px) {
  .blog-landing-title { font-size: 17px; }
}

/* ---------- Blog editor: the titles a draft was born with ---------- */

.post-alts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.post-alts-label {
  flex: 1 1 100%;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-dim);
}
.post-alt {
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(22,48,43,0.16);
  background: #fff;
  font-size: 12.5px;
  color: var(--ink-dim);
  cursor: pointer;
  text-align: left;
}
.post-alt:hover { border-color: var(--ink-dim); color: var(--ink); }
.post-alt.is-current {
  background: var(--bg);
  border-color: var(--bg);
  color: var(--cream);
  cursor: default;
}
#postTopic { margin-top: 8px; }

/* ---------- Blog: the photograph ----------
   Real photographs from Unsplash and Pexels, hotlinked from their CDN.
   A fixed aspect ratio so the page does not jump when one loads, and a
   background under it so the gap before it arrives is not a white hole. */

.post-photo {
  margin: 0 0 26px;
}
.post-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--paper-alt);
}
.post-photo-credit {
  margin: 8px 0 0;
  font-size: 11.5px;
  color: var(--ink-dim);
}
.post-photo-credit a { color: var(--ink-dim); border-bottom: 1px solid rgba(22,48,43,0.25); }
.post-photo-credit a:hover { color: var(--ink); }

/* On a card the picture sits across the top; the credit is left to the
   post itself, where there is room to read it. */
.res-card--photo { grid-template-rows: auto auto; padding: 0; overflow: hidden; }
.post-photo--card { margin: 0; }
.post-photo--card img {
  border-radius: 0;
  aspect-ratio: 16 / 9;
}
.res-card--photo .res-card-body { padding: 14px 16px 16px; }

/* ---------- Blog editor: choosing the photograph ---------- */

.post-photo-box {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 10px;
  background: var(--paper-alt);
  margin-bottom: 10px;
}
.post-photo-box img {
  flex: none;
  width: 132px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 7px;
  background: #fff;
}
.post-photo-meta { min-width: 0; }
.post-photo-alt { margin: 0 0 4px; font-size: 12.5px; color: var(--ink); }
.post-photo-box .post-photo-credit { margin: 0 0 6px; }
.post-photo-none { margin: 0; font-size: 12.5px; color: var(--ink-dim); }
.res-linkbtn.is-danger { color: var(--accent-red); }

.post-photo-find { display: flex; gap: 10px; align-items: center; }
.post-photo-find input { flex: 1 1 auto; min-width: 0; }
.post-photo-find .res-linkbtn { flex: none; white-space: nowrap; }

.post-photo-results {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.post-photo-pick {
  display: block;
  padding: 0;
  border: 1px solid rgba(22,48,43,0.14);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  text-align: left;
}
.post-photo-pick:hover { border-color: var(--bg); }
.post-photo-pick img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--paper-alt);
}
.post-photo-pick span {
  display: block;
  padding: 5px 7px;
  font-size: 10.5px;
  color: var(--ink-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#postPhotoHint { margin-top: 8px; }
#postPhotoHint.is-error { color: var(--accent-red); }

@media (max-width: 860px) {
  .post-photo-results { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .post-photo-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-photo-box { flex-direction: column; }
  .post-photo-box img { width: 100%; }
}

/* ---- the review queue for generated downloads ------------------- */
/* Deliberately plainer than the rest of the site. This is a workbench:
   everything §6 of the brief asks to be seen together, seen together,
   with the things that stop a draft going out loud enough that nobody
   has to hunt for them. */
.review-empty {
  max-width: 760px; padding: 36px 24px; text-align: center;
  border: 1px dashed rgba(22,48,43,0.2); border-radius: 12px; color: var(--ink-dim);
}
.review-error { color: #a14a20; }
.review-card {
  max-width: 860px; background: #fff; border: 1px solid rgba(22,48,43,0.12);
  border-radius: 14px; padding: 22px 24px; margin-bottom: 20px;
}
.review-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.review-head h3 { margin: 0 0 4px; font-size: 19px; }
.review-meta { margin: 0; font-size: 12.5px; color: var(--ink-dim); }
.review-status {
  flex: none; padding: 3px 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  background: #eef3f0; color: #1d6b48;
}
.review-status--changes { background: #fdf4ee; color: #8a4420; }
.review-status--rejected { background: #fbecec; color: #9c2b2b; }
.review-summary { font-size: 14px; color: var(--ink-dim); margin: 12px 0 6px; }
.review-objective { font-size: 13px; margin: 0 0 12px; }
.review-objective b { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #1d6b48; }

/* What is stopping it. Not a hint — the list of doors that are shut. */
.review-blocks {
  border-left: 3px solid #a14a20; background: #fdf4ee;
  padding: 11px 14px; margin: 12px 0; font-size: 13px;
}
.review-blocks b { color: #a14a20; }
.review-blocks ul { margin: 6px 0 0; padding-left: 18px; }
.review-ready { font-size: 13px; color: #1d6b48; margin: 12px 0; }
.review-relaid { font-size: 13px; color: #8a4b12; background: #fbf1e3; border-left: 3px solid #cf8a52; padding: 8px 12px; margin: 12px 0; border-radius: 4px; }

.review-langs { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 10px; }
.review-lang {
  padding: 5px 11px; border: 1px solid rgba(22,48,43,0.18); border-radius: 8px;
  background: #fff; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.review-lang.active { background: var(--bg); color: var(--cream); border-color: var(--bg); }

.review-check { font-size: 12.5px; margin: 0 0 10px; }
.review-check--ok { color: #1d6b48; }
.review-check--bad {
  border-left: 3px solid #a14a20; background: #fdf4ee; padding: 9px 12px; color: #8a4420;
}
.review-check--bad ul { margin: 5px 0 0; padding-left: 18px; }

.review-frame {
  width: 100%; height: 520px; border: 1px solid rgba(22,48,43,0.14);
  border-radius: 10px; background: #f6f6f4;
}
.review-open { display: inline-block; margin-top: 7px; font-size: 12.5px; }
.review-none { font-size: 12.5px; color: var(--ink-dim); }

.review-sub {
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-dim);
  margin: 20px 0 8px; padding-bottom: 5px; border-bottom: 1px solid #e2e7e5;
}
.review-sources { list-style: none; margin: 0; padding: 0; }
.review-source {
  border: 1px solid rgba(22,48,43,0.1); border-radius: 10px;
  padding: 11px 13px; margin-bottom: 9px; font-size: 13px;
}
.review-source--cleared { border-color: rgba(29,107,72,0.3); background: #f4f9f6; }
.review-source--forbidden { border-color: rgba(156,43,43,0.3); background: #fdf3f3; }
.review-source-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.review-rights {
  flex: none; padding: 2px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; background: #fdf4ee; color: #8a4420;
}
.review-source--cleared .review-rights { background: #e3f2ea; color: #1d6b48; }
.review-source--forbidden .review-rights { background: #f7dcdc; color: #9c2b2b; }
.review-source-title { font-weight: 600; }
.review-source-link { font-size: 12px; word-break: break-all; display: block; margin-top: 4px; }
.review-source-note { font-size: 12px; color: var(--ink-dim); margin: 5px 0 0; }
.review-source-do { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.review-source-do .btn { font-size: 12.5px; padding: 6px 12px; }

.review-actions {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid #eef1f0;
}
.review-actions .btn[disabled] { opacity: .45; cursor: not-allowed; }
.review-says { font-size: 13px; color: var(--ink-dim); }
.review-says--ok { color: #1d6b48; font-weight: 600; }
.review-says--bad { color: #a14a20; font-weight: 600; }

@media (max-width: 600px) {
  .review-card { padding: 18px 16px; }
  .review-frame { height: 360px; }
  .review-head { flex-direction: column; }
}

/* ---------- Admin: what is not published yet ---------- */

/* The admin's own filter beside the list heading. Quiet until pressed,
   with the count of what is waiting in a small red disc. */
.pending-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px dashed rgba(184, 73, 45, 0.55);
  background: #fff;
  color: var(--accent-red);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.pending-btn:hover { background: #fbf1ec; }
.pending-btn[aria-pressed="true"] {
  background: var(--accent-red);
  border-style: solid;
  border-color: var(--accent-red);
  color: #fff;
}
.pending-n:empty { display: none; }
.pending-n {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--accent-red);
  color: #fff;
  font-size: 12px;
  text-align: center;
}
.pending-btn[aria-pressed="true"] .pending-n { background: #fff; color: var(--accent-red); }

/* Publish and Reject on the card. Above the title's link, which is
   stretched over the whole card: without this a press on either button
   would open the page instead. */
.res-decide {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px dashed rgba(184, 73, 45, 0.3);
  cursor: default;
}
.res-decide .btn { padding: 7px 16px; font-size: 13px; }
.res-decide .btn:disabled { opacity: 0.55; cursor: wait; transform: none; }
.res-decide-msg { font-size: 12.5px; color: var(--ink-dim); }
.res-decide-msg.ok { color: #1f6b45; font-weight: 700; }
.res-decide-msg.bad { color: var(--accent-red); }

/* A sample post's mark (admins only): a small star beside the name. */
.story-sample {
  display: inline-block;
  margin-left: 4px;
  font-size: 13px;
  line-height: 1;
  vertical-align: 1px;
  color: var(--accent);
  cursor: help;
}

/* "Show more" under the blog and the downloads: the lists load a page
   at a time, like the community's. */
.list-more {
  display: flex;
  justify-content: center;
  margin: 26px 0 0;
}
.list-more .btn { min-width: 220px; }

/* ---- Boxes or a list (js/view-toggle.js) ---- */

/* On the left of the bar, as the language picker is on the right, so
   "All …" stays on the centre of the column. */
.topic-bar-left {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
@media (max-width: 860px) {
  .topic-bar-left { position: static; transform: none; order: 2; }
}

.view-toggle {
  display: inline-flex;
  border: 1px solid rgba(22, 48, 43, 0.18);
  border-radius: 999px;
  background: #fff;
  padding: 3px;
  gap: 2px;
}
.view-toggle button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
}
.view-toggle button svg { width: 18px; height: 18px; }
.view-toggle button:hover { color: var(--ink); }
.view-toggle button[aria-pressed="true"] { background: var(--bg); color: var(--cream); }
.view-toggle button:focus-visible { outline: 2px solid var(--accent-red); outline-offset: 2px; }

/* The list: one line per entry, many to a screen. The same cards, with
   the picture and the summary put away. */
.resource-grid--list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid rgba(22, 48, 43, 0.1);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}
.resource-grid--list .res-card {
  display: block;
  border: 0;
  border-bottom: 1px solid rgba(22, 48, 43, 0.08);
  border-radius: 0;
  box-shadow: none;
  padding: 11px 16px;
}
.resource-grid--list .res-card:last-child { border-bottom: 0; }
.resource-grid--list .res-card:hover { background: var(--paper); box-shadow: none; }
.resource-grid--list .res-thumb,
.resource-grid--list .post-photo,
.resource-grid--list .res-card-desc,
.resource-grid--list .aud-badges,
.resource-grid--list .res-view { display: none; }
.resource-grid--list .res-card-body {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
}
.resource-grid--list .res-card-body h3 {
  flex: 1 1 320px;
  min-width: 0;
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
}
.resource-grid--list .res-meta { margin: 0; font-size: 12.5px; white-space: nowrap; }
.resource-grid--list .res-card-foot { margin: 0; padding: 0; border: 0; }
.resource-grid--list .res-decide { flex-basis: 100%; }
.resource-grid--list .res-draft { margin: 0; }

@media (max-width: 600px) {
  .resource-grid--list .res-card-body h3 { flex-basis: 100%; }
  .resource-grid--list .res-meta { white-space: normal; flex: 1 1 auto; min-width: 0; }
}

.resource-grid--list .res-card--photo { padding: 11px 16px; overflow: visible; }
.resource-grid--list .res-card--photo .res-card-body { padding: 0; }

/* The entry a notification pointed at, lit up for a moment. */
.story-focus {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  animation: story-focus 3.5s ease-out;
}
@keyframes story-focus {
  0%, 40% { background-color: #fff3d6; }
  100% { background-color: inherit; }
}
@media (prefers-reduced-motion: reduce) { .story-focus { animation: none; } }

/* ---- Community as a list (js/view-toggle.js) ----
   One line per post: who, where and when, and how it begins. Pressing
   the line opens the post in full (stories.js adds .story-open). */
.story-list--list {
  gap: 0;
  border: 1px solid rgba(22, 48, 43, 0.1);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}
.story-list--list .story-card {
  border: 0;
  border-bottom: 1px solid rgba(22, 48, 43, 0.08);
  border-radius: 0;
  box-shadow: none;
  padding: 11px 16px;
  cursor: pointer;
}
.story-list--list .story-card:last-child { border-bottom: 0; }
.story-list--list .story-card:hover { background: var(--paper); }
.story-list--list .story-card:not(.story-open) .story-head { margin-bottom: 4px; }
.story-list--list .story-card:not(.story-open) .story-avatar { width: 28px; height: 28px; font-size: 12px; }
.story-list--list .story-card:not(.story-open) .story-head h3 { font-size: 14.5px; }
.story-list--list .story-card:not(.story-open) .story-head > div {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px;
}
.story-list--list .story-card:not(.story-open) .story-body {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  color: var(--ink-dim);
  margin-left: 40px;
}
.story-list--list .story-card:not(.story-open) .story-body p { margin: 0; display: inline; }
.story-list--list .story-card:not(.story-open) .story-body p + p::before { content: ' '; }
.story-list--list .story-card:not(.story-open) .story-actions,
.story-list--list .story-card:not(.story-open) .story-replies,
.story-list--list .story-card:not(.story-open) .story-mt { display: none; }
.story-list--list .story-card.story-open { cursor: default; background: #fff; padding: 18px 20px; }
@media (max-width: 600px) {
  .story-list--list .story-card:not(.story-open) .story-body { margin-left: 0; }
}

/* ---- one download's page (resource.html), as the owner drew it ------ */
/* A pale band: kind of resource, the title in Korean, one line on what
   it is, and chips; then one white card lifted over the band's edge —
   what it is for on the left, the download on the right. */
.rd-hero {
  background: linear-gradient(180deg, #eef2e5 0%, #f3f5ec 100%);
  padding: 36px 0 110px;
  overflow: hidden;
}
.rd-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: center; }
.rd-hero-text { min-width: 0; }
.rd-back { display: inline-block; font-size: 13px; color: #5b6b66; text-decoration: none; margin-bottom: 14px; }
.rd-back:hover { color: #16302b; text-decoration: underline; }
.rd-eyebrow {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: #1f8a4c; margin-bottom: 10px;
}
.rd-hero h1 {
  font-family: 'Noto Sans KR', sans-serif; font-size: clamp(28px, 3.6vw, 42px); line-height: 1.2;
  color: #16302b; margin: 0 0 10px; letter-spacing: -.01em;
}
.rd-subtitle { font-size: 17px; color: #5b6b66; margin: 0 0 20px; max-width: 760px; }
.rd-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.rd-chip {
  display: inline-flex; align-items: center; gap: 7px; background: #fff; border-radius: 999px;
  padding: 7px 14px; font-size: 13px; color: #25413a; box-shadow: 0 1px 0 rgba(22, 48, 43, .06);
}
.rd-chip[hidden] { display: none; }
.rd-chip-icon { width: 16px; height: 16px; fill: none; stroke: #1f8a4c; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.rd-chip-icon svg { display: block; }
.rd-hero-art { justify-self: end; width: 100%; max-width: 300px; }
.rd-art { width: 100%; height: auto; display: block; }
.rd-art-blob { fill: #dfe8d3; }
.rd-art-blob2 { fill: #e4ecd9; }
.rd-art-book path, .rd-art-bulb path { fill: #f8faf4; stroke: #a9c29b; stroke-width: 3; stroke-linejoin: round; }
.rd-art .rd-art-line { fill: none; stroke: #a9c29b; stroke-width: 3; stroke-linecap: round; }
.rd-art .rd-art-rays { stroke: #b9cfae; }
.rd-cover img { width: 100%; max-height: 240px; object-fit: cover; border-radius: 16px; box-shadow: 0 8px 24px rgba(22, 48, 43, .12); }
.rd-cover .res-cover-glyph { display: none; }

.rd-main { padding: 0 0 64px; }
.rd-card {
  position: relative; margin-top: -80px; background: #fff; border-radius: 20px;
  box-shadow: 0 12px 36px rgba(22, 48, 43, .09); padding: 34px 36px;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0;
}
.rd-card[hidden] { display: none; }
.rd-about { padding-right: 34px; border-right: 1px solid #e6ebe8; }
.rd-about[hidden] + .rd-get { grid-column: 1 / -1; }
.rd-card .rd-about-title { font-size: 30px; font-weight: 700; line-height: 1.22; color: #16302b; margin: 0 0 16px; letter-spacing: -.01em; text-transform: none; }
.rd-about-text p { font-size: 15px; line-height: 1.75; color: #5b6b66; margin: 0 0 10px; }
.rd-get { padding-left: 34px; display: flex; flex-direction: column; }
.rd-download {
  display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%;
  min-height: 72px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, #db4f33 0%, #cc3f25 100%); color: #fff;
  font: inherit; font-size: 22px; font-weight: 500; padding: 0 28px;
  box-shadow: 0 8px 20px rgba(204, 63, 37, .28); transition: transform .12s ease, box-shadow .12s ease;
}
.rd-download:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(204, 63, 37, .34); }
.rd-download:disabled { opacity: .55; cursor: default; transform: none; }
.rd-download svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.rd-download .rd-download-chev { width: 22px; height: 22px; margin-left: auto; }
.rd-download .rd-download-icon { margin-left: auto; }
.rd-note { text-align: center; font-size: 13px; color: #6b7a75; margin: 12px 0 0; }
.rd-note[hidden] { display: none; }
.rd-secondary { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.rd-secondary:empty { display: none; }
.rd-linkbtn { background: none; border: 0; padding: 4px 6px; font: inherit; font-size: 14px; color: #1f6e46; text-decoration: underline; cursor: pointer; }
.rd-linkbtn[hidden] { display: none; }
.rd-lang-field { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
/* File language sits right above the download button, on one line. */
.rd-file-lang { align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.rd-file-lang .rd-globe { margin-top: 0; }
.rd-file-lang select { flex: 1 1 140px; max-width: 240px; }
/* Available in closes the "About this resource" column. */
.rd-available { margin-top: 20px; padding-top: 18px; border-top: 1px solid #e6ebe8; }
.rd-globe { width: 24px; height: 24px; fill: none; stroke: #16302b; stroke-width: 1.6; flex: none; margin-top: 1px; }
.rd-lang-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rd-lang-label { font-weight: 700; color: #16302b; font-size: 14px; }
.rd-lang-field select {
  font: inherit; font-size: 14px; padding: 6px 10px; border: 1px solid #d5ddd9; border-radius: 8px;
  background: #fff; color: #16302b; min-width: 110px;
}
.rd-lang-list { color: #5b6b66; line-height: 1.6; }
.rd-below { margin-top: 26px; }
.rd-main .res-notice { margin: 12px 0 0; }

@media (max-width: 900px) {
  .rd-hero { padding: 24px 0 96px; }
  .rd-hero-inner { grid-template-columns: 1fr; }
  .rd-hero-art { display: none; }
  .rd-card { grid-template-columns: 1fr; padding: 24px 20px; }
  /* On a phone the download comes first; what it is for follows. */
  .rd-about { padding-right: 0; border-right: 0; order: 2; }
  .rd-get { padding-left: 0; order: 1; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid #e6ebe8; }
  .rd-card .rd-about-title { font-size: 23px; }
  .rd-download { font-size: 19px; min-height: 62px; }
}

/* Admin only: the sites a draft's facts rest on (schema §43). */
.admin-sources:empty { display: none; }
.admin-sources {
  margin: 18px 0; padding: 14px 18px; border: 1px dashed #b8492f; border-radius: 12px;
  background: #fff8f4; font-size: 14px;
}
.admin-sources[hidden] { display: none; }
.admin-sources-title { margin: 0 0 8px; font-size: 15px; color: #16302b; }
.admin-sources-only { font-size: 11.5px; font-weight: 600; color: #b8492f; margin-left: 6px; }
.admin-sources-list { margin: 0; padding-left: 18px; }
.admin-sources-list li { margin: 6px 0; line-height: 1.5; }
.admin-sources-list a { font-weight: 700; color: #1f6e46; }
.admin-sources-about { display: block; color: #3d4b47; }
.admin-sources-url { display: block; color: #6b7a75; font-size: 12px; word-break: break-all; }
.admin-sources-note { margin: 8px 0 0; color: #6b7a75; font-size: 12.5px; }

/* A post's heading, centred (the owner's design, 2026-09-28): the shelf
   between two diamonds, the title between double rules, then who it is
   for and the day. The diamond is shared with the word list below. */
.dia {
  display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 1.5px;
  background: var(--accent); transform: rotate(45deg);
}
.post-head { text-align: center; margin: 4px 0 22px; }
.post-head-cat {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px;
}
.post-head-cat .blog-meta { letter-spacing: 0.12em; }
.post-head-box {
  border-top: 3px double #103f35; border-bottom: 3px double #103f35;
  padding: 20px 6px 18px; margin: 0 0 14px;
}
.blog-single .post-head h1 { margin: 0; line-height: 1.22; }
.post-head .mt-title-src { margin: 10px 0 0; font-size: 15.5px; }
.post-head .mt-title-src::before { content: "\300C\00A0"; color: var(--accent); }
.post-head .mt-title-src::after { content: "\00A0\300D"; color: var(--accent); }
.post-head-meta {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
}
.post-head-meta .aud-badges { margin: 0; justify-content: center; }
.post-head-meta .blog-date { margin: 0; }

/* The word list's heading: the label in a double outline, lines and
   diamonds either side, centred; no fill, bold. */
.study-title {
  display: flex; align-items: center; gap: 12px; margin: 0 0 12px; text-align: center;
}
.study-title::before, .study-title::after {
  content: ""; flex: 1; height: 1px; background: var(--accent);
}
.study-title .study-label {
  display: inline-block; padding: 8px 26px; border-radius: 999px;
  border: 2px solid #103f35; outline: 1.5px solid #103f35; outline-offset: 3px;
  color: #103f35; font-size: 17px; font-weight: 800; letter-spacing: 0.04em;
}
.study-lead { text-align: center; }
@media (max-width: 480px) {
  .study-title { gap: 8px; }
  .study-title .study-label { padding: 7px 18px; font-size: 16px; }
  .post-head-box { padding: 16px 2px 14px; }
}

/* A post as a PDF, beside "Read in" (scripts/blog-pdf.mjs). */
.blog-pdf-actions { margin-left: auto; display: inline-flex; gap: 8px; flex-wrap: wrap; }
.blog-pdf-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; padding: 8px 18px; }
@media (max-width: 600px) { .blog-pdf-actions { margin-left: 0; } }

/* Review: the read-online text of a draft (owner, 2026-10-10). */
.review-read { margin: 10px 0; border: 1px solid #e6dcdc; border-radius: 10px; padding: 8px 12px; background: #fff; }
.review-read summary { cursor: pointer; font-weight: 600; }
.review-read-body { font-size: 14px; line-height: 1.6; max-height: 420px; overflow: auto; }
.review-read-body h5 { margin: 12px 0 4px; font-size: 13px; color: #7a4a63; }
.review-read-body ul, .review-read-body ol { margin: 0 0 0 18px; padding: 0; }