/* The Protocol — visual overrides on top of Headline's screen.css.
   Loaded after the built theme CSS in default.hbs so these win the cascade. */

:root {
  --bg: #fbf8f1;
  --ink: #121212;
  --ink-soft: #3a3a36;
  --ink-mute: #6b6660;
  --rule: #c8c2b3;
  --rule-soft: #e3decf;
  --accent: #a8202b;
  --font-display: "Playfair Display", "Times New Roman", Georgia, serif;
  --font-body: "Lora", Georgia, "Times New Roman", serif;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

body,
.gh-content,
.gh-card-excerpt,
.gh-article-excerpt {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
}

body {
  background: var(--bg);
}

.gh-head-logo,
.gh-card-title,
.gh-topic-name,
.gh-topic-name a,
.gh-article-title,
.gh-pagehead-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink);
}

/* Masthead title — newspaper-scale Playfair display.
   Headline's wrapper is display:flex row by default, so the tagline ends up
   inline with the title. Force column so the tagline drops to its own line. */
.gh-head-brand-wrapper {
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

/* Headline's stacked-layout brand container is hard-locked to 80px which
   clips our larger Playfair title + tagline. Let it grow with the content,
   and replace the menu's absolutely-positioned rules (tied to the old 80px)
   with normal borders. */
.is-head-stacked .gh-head-brand {
  height: auto;
  min-height: 13rem;
  padding: 3rem 0 2rem;
}
.is-head-stacked .gh-head-menu {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.is-head-stacked .gh-head-menu::before,
.is-head-stacked .gh-head-menu::after {
  display: none;
}
.gh-head-logo {
  font-size: clamp(4.8rem, 7vw, 8rem);
  font-weight: 900;
  line-height: 1;
}

.gh-head-menu .nav,
.gh-head-link,
.gh-card-author,
.gh-card-date,
.gh-article-tag,
.gh-author-name,
.gh-article-date,
.gh-foot-menu .nav {
  font-family: var(--font-ui);
}

/* Section headings — newspaper-style underlined rule. */
.gh-topic-name {
  border-top: 2px solid var(--ink);
  padding-top: 0.8rem;
  margin-top: 3.2rem;
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.gh-topic-name a {
  color: var(--ink);
}

/* Cards: text-first, no images. Tighter, type-driven. */
.gh-card {
  border-bottom: 1px solid var(--rule-soft);
  padding-bottom: 1.2rem;
}
.gh-card-link {
  background: transparent;
}
.gh-card-title {
  font-size: 2.2rem;
  line-height: 1.22;
  margin-top: 0.4rem;
}
.gh-card.large .gh-card-title {
  font-size: 3rem;
  line-height: 1.15;
}
.gh-card-excerpt {
  font-size: 1.6rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-top: 0.6rem;
}
.gh-card-footer {
  font-family: var(--font-ui);
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-mute);
  margin-top: 0.8rem;
}

/* Eyebrow above card title (primary tag). */
.gh-card-eyebrow {
  display: block;
  font-family: var(--font-ui);
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 0.4rem;
}

/* Article page typography. */
.gh-article-tag {
  display: inline-block;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 1.6rem;
}
.gh-article-title {
  font-size: clamp(4rem, 5.5vw, 6rem);
  line-height: 1.1;
  margin-bottom: 1.6rem;
}
.gh-article-excerpt {
  font-style: italic;
  font-size: clamp(2rem, 2.3vw, 2.6rem);
  line-height: 1.4;
  color: var(--ink-soft);
}

/* Drop cap on the first paragraph — articles (posts) only, not Pages like
   Impressum/Privacy/About where it makes a single italic line look broken. */
.post-template .gh-content > p:first-of-type::first-letter {
  font-family: var(--font-display);
  float: left;
  font-size: 8rem;
  line-height: 0.88;
  font-weight: 700;
  padding: 0.5rem 0.7rem 0 0;
  color: var(--ink);
}

/* Body text inside the article. */
.gh-content {
  font-size: 2rem;
  line-height: 1.65;
}
/* Headline spaces adjacent block-level children of .gh-content with
   margin-top: 1.6em, which at 2rem body = 32px between paragraphs — visibly
   loose. Tighten to 1em (~20px) for a denser, newspaper-like rhythm. */
.gh-content > * + * {
  margin-top: 1em;
}
.gh-content a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
}
.gh-content a:hover {
  text-decoration-color: var(--accent);
  color: var(--accent);
}
.gh-content em {
  color: var(--ink-soft);
}

/* Audience-tag chips below the article header. */
.tp-tag-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0;
  margin: 0.6rem 0 1.2rem;
  font-family: var(--font-ui);
}
.tp-tag-chips li {
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.4rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-mute);
}

/* About page — persona/masthead grid. */
.persona-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}
.persona-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.2rem;
  border: 1px solid var(--rule-soft);
  background: #fff;
}
.persona-card--editor {
  border-color: var(--ink);
}
.persona-portrait {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1.2rem;
}
.persona-name-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.5rem;
}
.persona-name {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--ink);
}
.persona-role {
  font-family: var(--font-ui);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}
.persona-role--editor {
  color: var(--accent);
}
.persona-area {
  font-family: var(--font-ui);
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-bottom: 0.8rem;
}
.persona-voice {
  font-family: var(--font-body);
  font-size: 1.5rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

/* Author archive header — Headline's .gh-pagehead is a 560px flex column
   with no horizontal centering, so on the 1200px .gh-inner it sits pinned
   to the left while the card grid below spans full width. Center the block
   and its children so the header aligns visually with the articles. */
.author-template .gh-pagehead {
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  text-align: center;
}
.author-template .gh-author-social {
  justify-content: center;
}

/* Site tagline under the masthead logo. */
.tp-tagline {
  display: block;
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(1.6rem, 1.8vw, 2.1rem);
  letter-spacing: 0;
  color: var(--ink-soft);
  margin-top: 1rem;
  font-weight: 400;
  max-width: 56rem;
  line-height: 1.4;
}

/* Header rule below the masthead. */
.gh-head {
  background: var(--bg);
  border-bottom: 1px solid var(--ink);
}

/* Footer: editorial-responsibility framing. Headline's defaults are sized
   for a dark, full-height marketing footer (6.4rem top / 12rem bottom
   padding, 24px flex-gap between rows, 32–64px margin-top on .gh-copyright).
   On our cream-bg two-line footer that leaves a sea of whitespace — tighten. */
.gh-foot {
  border-top: 1px solid var(--rule);
  background: var(--bg);
  padding-top: 1rem;
  padding-bottom: 3.2rem;
}
.gh-foot,
.gh-foot a,
.gh-foot a:hover {
  color: var(--ink);
}
.gh-foot-inner {
  gap: 1.2rem;
}
.gh-copyright,
.gh-subscribe ~ .gh-copyright {
  margin-top: 0;
}

/* Subscribe panel — Headline defaults to white text on dark bg, but our
   footer is the warm off-white bg, so the text was invisible. */
.gh-subscribe {
  background: var(--bg);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  padding: 2.4rem 1rem;
  margin-bottom: 0;
}
.gh-subscribe-title {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
}
.gh-subscribe-description {
  color: var(--ink-soft);
  font-family: var(--font-body);
}
.gh-subscribe-btn {
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-ui);
  font-weight: 500;
}
.gh-subscribe-btn:hover {
  background: var(--accent);
}
.tp-foot-disclaimer {
  font-family: var(--font-ui);
  font-size: 1.3rem;
  color: var(--ink-mute);
  max-width: 72rem;
  line-height: 1.6;
  margin: 0 auto 1.6rem;
  text-align: center;
  /* Headline sets white-space: nowrap on .gh-foot, which makes our long
     disclaimer overflow and look off-center. Override. */
  white-space: normal;
}