@charset "UTF-8";
/* Table of Contents
/* ------------------------------------------------------------

This is a development CSS file which is built to a minified
production stylesheet in assets/built/screen.css

1.  Global Styles
2.  Layout
3.  Site Header
4.  Site Navigation
5.  Post Feed
6.  Single Post
  6.1. Post Byline
  6.2. Subscribe
  6.3. Read More
  6.4. Comments
7.  Author Template
8.  Tag Template
9.  Error Template
10. Site Footer
11. Lightbox

*/
/* 1. Global - Set up the things
/* ---------------------------------------------------------- */
/* Import CSS reset and base styles */
/* Reset
/* ---------------------------------------------------------- */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

body {
  line-height: 1;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

html {
  box-sizing: border-box;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

a {
  background-color: transparent;
}

b,
strong {
  font-weight: bold;
}

i,
em,
dfn {
  font-style: italic;
}

h1 {
  margin: 0.67em 0;
  font-size: 2em;
}

small {
  font-size: 80%;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

mark {
  background-color: #fdffb6;
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

kbd {
  padding: 3px 5px;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  background: #f6f8fa;
  border: 1px solid rgba(124, 139, 154, 0.25);
  border-radius: 6px;
  box-shadow: inset 0 -1px 0 rgba(124, 139, 154, 0.25);
}

@media (max-width: 600px) {
  kbd {
    font-size: 1.3rem;
  }
}
button,
input,
optgroup,
select,
textarea {
  margin: 0; /* 3 */
  color: inherit; /* 1 */
  font: inherit; /* 2 */
}

button {
  overflow: visible;
  border: none;
}

button,
select {
  text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer; /* 3 */
  -webkit-appearance: button; /* 2 */
}

button[disabled],
html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

input {
  line-height: normal;
}

input:focus {
  outline: none;
}

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

input[type="search"] {
  box-sizing: content-box; /* 2 */
  -webkit-appearance: textfield; /* 1 */
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

legend {
  padding: 0; /* 2 */
  border: 0; /* 1 */
}

textarea {
  overflow: auto;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

td,
th {
  padding: 0;
}

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
html {
  font-size: 62.5%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  color: #fff;
  font-family: var(--gh-font-body, var(--font-sans));
  font-size: 1.6rem;
  line-height: 1.6em;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -moz-font-feature-settings: "liga" on;
}

::-moz-selection {
  text-shadow: none;
  background: #daf2fd;
  color: var(--color-darkgrey);
}

::selection {
  text-shadow: none;
  background: #daf2fd;
  color: var(--color-darkgrey);
}

hr {
  position: relative;
  display: block;
  width: 100%;
  margin: 2.5em 0 3.5em;
  padding: 0;
  height: 1px;
  border: 0;
  border-top: 1px solid #f0f0f0;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

textarea {
  resize: vertical;
}

::not(.gh-content) p,
::not(.gh-content) ul,
::not(.gh-content) ol,
::not(.gh-content) dl,
::not(.gh-content) blockquote {
  margin: 0 0 1.5em 0;
}

ol,
ul {
  padding-left: 1.3em;
  padding-right: 1.5em;
}

ol ol,
ul ul,
ul ol,
ol ul {
  margin: 0.5em 0;
}

ul,
ol {
  max-width: 100%;
}

li {
  padding-left: 0.3em;
  line-height: 1.6em;
}

li + li {
  margin-top: 0.5em;
}

dt {
  float: left;
  margin: 0 20px 0 0;
  width: 120px;
  color: #daf2fd;
  font-weight: 500;
  text-align: right;
}

dd {
  margin: 0 0 5px 0;
  text-align: left;
}

blockquote {
  margin: 1.5em 0;
  padding: 0 1.6em 0 1.6em;
  border-left: #daf2fd;
}

blockquote small {
  display: inline-block;
  margin: 0.8em 0 0.8em 1.5em;
  font-size: 0.9em;
  opacity: 0.8;
}

/* Quotation marks */
blockquote small:before {
  content: "— ";
}

blockquote cite {
  font-weight: bold;
}

blockquote cite a {
  font-weight: normal;
}

a {
  color: #fff;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  line-height: 1.15;
  /* font-family: var(--gh-font-heading, var(--font-sans)); */
  font-weight: 400;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.01em;
}

h1 {
  margin: 0 0 0.5em 0;
  font-size: 4.8rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

@media (max-width: 600px) {
  h1 {
    font-size: 2.8rem;
  }
}
h2 {
  margin: 1.5em 0 0.5em 0;
  font-size: 2.8rem;
  font-weight: 700;
}

@media (max-width: 600px) {
  h2 {
    font-size: 2.3rem;
  }
}
h3 {
  margin: 1.5em 0 0.5em 0;
  font-size: 2.4rem;
  font-weight: 600;
}

@media (max-width: 600px) {
  h3 {
    font-size: 1.7rem;
  }
}
h4 {
  margin: 1.5em 0 0.5em 0;
  font-size: 2rem;
}

@media (max-width: 600px) {
  h4 {
    font-size: 1.7rem;
  }
}
h5 {
  margin: 1.5em 0 0.5em 0;
  font-size: 2rem;
}

h6 {
  margin: 1.5em 0 0.5em 0;
  font-size: 1.8rem;
}

:root {
  /*
  An accent color is also set by Ghost itself in
  Ghost Admin > Settings > Brand

  --ghost-accent-color: var(--color-background);

  You can use this variable throughout your styles
   */
  --outer-margin: 16px;
  --grid-gap: 8px;
  /* Fonts */
  --font-scale: 1.618;
  --font-size-small: 16px;
  --font-size-extrasmall: 12px;
  --font-size-medium: calc(var(--font-scale) * var(--font-size-small));
  --font-size-large: calc(var(--font-scale) * var(--font-scale) * var(--font-size-small));
  --font-size-xlarge: calc(
    var(--font-scale) * var(--font-scale) * var(--font-scale) * var(--font-size-small)
  );
  --line-height-text: 1.5;
  --line-height-small: 1.3;
  --line-height-medium: 1.1;
  --line-height-large: 1;
  --font-weight: bold;
  --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", Times, serif;
  --font-mono: Menlo, Courier, monospace;
}
@media screen and (min-width: 768px) {
  :root {
    --outer-margin: 24px;
    --grid-gap: 16px;
  }
}
@media screen and (min-width: 1024px) {
  :root {
    --font-size-small: 15px;
    --font-size-extrasmall: 11px;
  }
}
@media screen and (min-width: 1280px) {
  :root {
    --outer-margin: 36px;
    --grid-gap: 24px;
  }
}
@media screen and (min-width: 1440px) {
  :root {
    --outer-margin: 54px;
    --grid-gap: 36px;
    --font-size-small: 16px;
    --font-size-extrasmall: 12px;
  }
}
@media screen and (min-width: 1600px) {
  :root {
    --font-size-small: 17px;
  }
}
@media screen and (min-width: 1800px) {
  :root {
    --font-size-small: 18px;
    --font-size-extrasmall: 13px;
  }
}

/* 2. Layout - Page building blocks
/* ---------------------------------------------------------- */
.small {
  font-size: var(--font-size-extrasmall);
  line-height: var(--line-height-text);
  letter-spacing: 0.03em;
}

.medium {
  font-size: var(--font-size-medium);
  line-height: var(--line-height-medium);
}

.large {
  font-size: var(--font-size-large);
  line-height: var(--line-height-large);
}

.xlarge {
  font-size: var(--font-size-xlarge);
  line-height: var(--line-height-large);
}

body {
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-sans);
  line-height: 1.3;
  font-weight: normal;
  /*
  &.tag-hash-font-serif,
  .tag-hash-font-serif {
      font-family: var(--font-serif);
      font-weight: normal;

  }
  &.tag-hash-font-regular,
  .tag-hash-font-regular {
      font-weight: normal;

  }
  &.tag-hash-font-bold,
  .tag-hash-font-bold {
      font-weight: bold;
  }
  */
}

.container {
  width: 100%;
  max-width: calc(100% - 2 * var(--outer-margin));
  margin: 0 auto;
}

#guidelines {
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 9999;
  pointer-events: none;
}
#guidelines .columns {
  align-items: stretch;
}
#guidelines .columns .column {
  grid-column: span 1;
  border-left: 1px solid aqua;
  border-right: 1px solid aqua;
  display: none;
}
#guidelines .columns .column.phone {
  display: block;
}
@media screen and (min-width: 768px) {
  #guidelines .columns .column.tablet {
    display: block;
  }
}
@media screen and (min-width: 1280px) {
  #guidelines .columns .column {
    display: block;
  }
}

.columns {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gap);
  align-items: start;
}
.columns > * {
  grid-column: span 2;
}
@media screen and (min-width: 600px) {
  .columns > .col-4 .columns {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (min-width: 768px) {
  .columns {
    grid-template-columns: repeat(4, 1fr);
  }
  .columns > .col-1 {
    grid-column: span 1;
  }
  .columns > .col-2 {
    grid-column: span 1;
  }
  .columns > .col-3 {
    grid-column: span 2;
  }
  .columns > .col-4 {
    grid-column: span 2;
  }
  .columns > .col-4 .columns {
    grid-template-columns: repeat(4, 1fr);
  }
  .columns > .col-6 {
    grid-column: span 3;
  }
  .columns > .col-8 {
    grid-column: span 4;
  }
}
@media screen and (min-width: 1280px) {
  .columns {
    grid-template-columns: repeat(8, 1fr);
  }
  .columns > .col-1 {
    grid-column: span 1;
  }
  .columns > .col-2 {
    grid-column: span 2;
  }
  .columns > .col-3 {
    grid-column: span 3;
  }
  .columns > .col-4 {
    grid-column: span 4;
  }
  .columns > .col-6 {
    grid-column: span 6;
  }
  .columns > .col-8 {
    grid-column: span 8;
  }
}
@media screen and (max-width: 767px) {
  .columns .post-card {
    margin-bottom: 3em;
  }
}
.columns.columns-medium {
  margin-bottom: 4.2em;
}
@media screen and (max-width: 767px) {
  .columns.columns-medium {
    margin-bottom: 1.2em;
  }
}
@media screen and (min-width: 1280px) {
  .columns.columns-medium {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* Homepage "Recent Interviews" — 3-up on desktop, single-column stack on mobile.
   Mobile inherits the base .columns rules (2-col grid + children span 2 = full width). */
@media screen and (min-width: 768px) {
  .columns.columns-three {
    grid-template-columns: repeat(3, 1fr);
  }
  .columns.columns-three > .post-card {
    grid-column: span 1;
  }
}
section.recent-interviews.outer {
  background: var(--color-vert-anglais);
  color: white;
  padding: 1.6em 0 2em;
  margin-top: 3.6em;
  margin-bottom: 3.6em;
}
.recent-interviews-content {
  width: calc(100% - 2 * var(--outer-margin));
  margin: 0 auto;
}
.recent-interviews .latest-news-title {
  margin-top: 0;
  margin-bottom: 1.6em;
}
.recent-interviews .post-card-title a,
.recent-interviews .post-card-excerpt,
.recent-interviews .post-card-date {
  color: white;
}
.recent-interviews-more {
  margin-top: 1.6em;
  text-align: right;
  font-size: var(--font-size-small);
}
.recent-interviews-more a {
  color: white;
}
.recent-interviews-more a:hover,
.recent-interviews-more a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Visually hide content but keep it available to screen readers. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
a {
  color: var(--color-link);
  text-decoration: none;
  text-underline-offset: 0.3em;
}
@media screen and (hover: hover) {
  a:hover {
    color: var(--color-highlight);
  }
}
a:focus-visible {
  color: var(--color-highlight);
}

h1 {
  font-size: var(--font-size-large);
  line-height: 1;
  font-weight: inherit;
}

h2,
h1#heading-markdown {
  font-size: var(--font-size-medium);
  line-height: 1.1;
  font-weight: inherit;
}

h3,
h4,
h5,
h6 {
  font-size: var(--font-size-small);
  font-weight: inherit;
  margin-bottom: 1.3em;
}

.site-main section.homepage-hero,
.site-main section.homepage-feed {
  margin-bottom: 3.6em;
}

.section-label {
  margin: 0 0 1em 0;
  font-size: var(--font-size-small);
  font-weight: inherit;
  color: var(--color-text);
  line-height: 1;
  text-align: left;
}

/* Homepage feed: Featured column left, news area right — Latest stack and
   widget rail a quarter width each, podcast band spanning the half below
   them. Single column below 768px. */
.homepage-feed {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--grid-gap);
  align-items: start;
}
.homepage-feed-right {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--grid-gap);
  align-items: start;
}
.homepage-feed-rail {
  display: flex;
  flex-direction: column;
  gap: 2em;
}
/* Match the .post-card width cap while the rail is a full-width single column. */
.homepage-feed-rail > * {
  width: 100%;
  max-width: 720px;
}
/* The rail's flex gap spaces the house ad; its base margin would double it. */
.homepage-feed-rail .call-to-action {
  padding-left: 1.2em;
  padding-right: 1.2em;
  margin-bottom: 0;
}
.homepage-feed-latest .post-card {
  margin-bottom: 2em;
}
/* More News pairs its cards two-up whenever its column affords two ~200px
   tracks — wide desktops and mid tablet — and stacks otherwise. */
.homepage-feed-more-news {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0 var(--grid-gap);
}
.homepage-feed-more-news > .more-news-label {
  grid-column: 1 / -1;
}
/* Cards span two tracks globally; one cell each here. */
.homepage-feed-more-news > .post-card {
  grid-column: auto;
}
/* Neutralise the global label pull-up; the feed columns share a flush top edge. */
.homepage-feed h2.latest-news-title {
  margin-top: 0;
}
@media screen and (min-width: 768px) {
  .homepage-feed {
    grid-template-columns: 1fr 1fr;
  }
}
/* Tablet: Featured and Latest side by side, then the widgets two-up across
   the full feed width, then the band. display: contents hoists the
   right-half children into the feed grid, so every hoisted item needs
   explicit placement. */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .homepage-feed-right {
    display: contents;
  }
  .homepage-feed-articles {
    grid-column: 1;
    grid-row: 1;
  }
  .homepage-feed-latest {
    grid-column: 2;
    grid-row: 1;
  }
  .homepage-feed-rail {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--grid-gap);
  }
  /* The house ad stretches to the food-map widget's height; centre its
     content in the shared row instead of pinning it to the top. */
  .homepage-feed-rail > .call-to-action {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .homepage-feed-right > .podcast-band {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}
/* Desktop: lead story beside the widget rail (house ad, then food map),
   More News two-up across the full half below them (the quarter column
   can't fit two cards on a 13" screen). The rail stays one flex column so
   the map sits under the ad whatever the lead card's height. */
@media screen and (min-width: 1024px) {
  .homepage-feed-right {
    grid-template-columns: 1fr 1fr;
  }
  .homepage-feed-latest,
  .homepage-feed-more-news {
    display: contents;
  }
  .homepage-feed-lead {
    grid-column: 1;
    grid-row: 1;
  }
  /* Spans lead, label and first card (rows 1-3); remaining cards pair up below. */
  .homepage-feed-rail {
    grid-column: 2;
    grid-row: 1 / 4;
    /* Stands in for the "Latest" label so the ad top-aligns with the lead card. */
    margin-top: calc(var(--font-size-small) + 1em);
    margin-bottom: 2em;
  }
  .homepage-feed-more-news > .more-news-label {
    grid-column: 1;
    grid-row: 2;
  }
  .homepage-feed-more-news > .more-news-label + .post-card {
    grid-column: 1;
    grid-row: 3;
  }
  /* Cards span two tracks globally; one cell each here. */
  .homepage-feed-more-news > .post-card {
    grid-column: auto;
  }
  .homepage-feed-right > .podcast-band {
    grid-column: 1 / -1;
  }
}
.homepage-feed-right > .podcast-band {
  margin-top: 2em;
}
/* Mobile order: feature → latest → house ad → more features → food map →
   more news → podcast. display: contents hoists everything into the feed
   grid; each hoisted item needs explicit order, placement, and margins
   (the flex gaps and label alignment above no longer apply). */
@media screen and (max-width: 767px) {
  .homepage-feed-articles,
  .homepage-feed-right,
  .homepage-feed-latest,
  .homepage-feed-rail {
    display: contents;
  }
  .homepage-first-feature,
  .homepage-feed-lead,
  .homepage-more-features,
  .homepage-feed-more-news,
  .homepage-feed-rail > *,
  .homepage-feed-right > .podcast-band {
    grid-column: 1 / -1;
  }
  .homepage-first-feature {
    order: 10;
  }
  .homepage-feed-lead {
    order: 20;
  }
  .homepage-feed-rail > .call-to-action {
    order: 30;
  }
  .homepage-more-features {
    order: 40;
  }
  .homepage-feed-rail > .food-map-widget {
    order: 50;
  }
  .homepage-feed-more-news {
    order: 60;
  }
  .homepage-feed-right > .podcast-band {
    order: 70;
    margin-top: 0;
  }
  /* One 3em rhythm between every stacked feed item, widgets included. The
     house ad needs its own selector to out-rank its margin-bottom: 0 rule. */
  .homepage-feed-rail > *,
  .homepage-feed-rail > .call-to-action,
  .homepage-feed-latest .post-card,
  .homepage-feed .post-card.post-card-large {
    margin-bottom: 3em;
  }
}
@media screen and (min-width: 768px) {
  .more-features-label {
    display: none;
  }
}

.viewport {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-content {
  flex-grow: 1;
}

/* Full width page blocks */
.outer {
  position: relative;
  width: calc(100% - 2 * var(--outer-margin));
  margin: 0 auto;
}

/* Centered content container blocks */
.inner {
  margin: 0 auto;
  width: calc(100% - 2 * var(--outer-margin));
}
@media screen and (min-width: 768px) {
  .inner {
    width: calc(
      (100% - 2 * var(--outer-margin) - 7 * var(--grid-gap)) / 8 * 6 + 5 * var(--grid-gap)
    );
  }
}

.outer .inner {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .outer .inner {
    width: calc((100% - 7 * var(--grid-gap)) / 8 * 6 + 5 * var(--grid-gap));
  }
}

.outer .outer {
  margin: 0 calc(-1 * var(--outer-margin));
  width: calc(100% + 2 * var(--outer-margin));
}

.tag-archive .tag-archive-header {
  margin: 2.4em auto 3.6em;
}
.tag-archive .tag-archive-header h2 {
  color: var(--color-highlight);
}

/* 3. Site Header
/* ---------------------------------------------------------- */
.site-header {
  position: relative;
  color: var(--color-text);
  background: var(--ghost-accent-color);
}

.site-header-cover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.site-header-content {
  position: relative;
  z-index: 100;
  display: flex;
  align-items: center;
  padding-top: calc(19vmin + 44px);
  padding-bottom: 19vmin;
  text-align: center;
  color: var(--color-text);
}

.has-cover .site-header-content {
  min-height: 560px;
  background-color: var(--color-background);
  color: var(--color-text);
}

.site-header-content.no-content {
  padding-top: 0;
  padding-bottom: 2vmin;
}

.site-header-inner {
  position: relative;
}

.site-logo {
  flex-shrink: 0;
  margin: 0 auto;
  max-height: 120px;
}

.site-title {
  z-index: 10;
  margin: 0;
  padding: 0;
  font-size: var(--font-size-small);
  font-weight: inherit;
}

.has-cover .site-title {
  font-size: var(--font-size-large);
  color: var(--color-highlight);
}

.site-description {
  display: inline-block;
  z-index: 10;
  max-width: 960px;
  font-size: var(--font-size-small);
  font-weight: inherit;
  line-height: 1.1;
}

.site-signup-tagline {
  z-index: 10;
  max-width: 960px;
  font-weight: inherit;
  line-height: 1.1;
  margin: 0 auto;
  padding-top: 0;
}

.homepage-signup-button {
  margin-top: 24px;
  text-decoration: none;
}

:is(.site-logo, .site-title) + .site-description {
  max-width: 640px;
  margin-top: 16px;
  font-size: var(--font-size-small);
  font-weight: inherit;
  line-height: 1.4;
}

.site-logo + .site-description {
  margin-top: 20px;
}

.site-title + .site-description {
  color: var(--color-text);
}

.has-cover .site-description {
  letter-spacing: -0.005em;
  color: var(--color-text);
}

.has-cover :is(.site-logo, .site-title) + .site-description {
  font-size: var(--font-size-small);
}

@media (max-width: 991px) {
  .site-header-content {
    padding-top: calc(19vmin + 32px);
  }
}
@media (max-width: 767px) {
  .has-cover .site-header-content {
    min-height: 240px;
  }
  .site-header-inner {
    gap: 16px;
  }
  .site-logo {
    max-width: 60%;
  }
  .site-title {
    font-size: var(--font-size-small);
  }
  .site-description {
    font-size: var(--font-size-small);
  }
  .site-logo + .site-description {
    margin-top: 12px !important;
  }
  .site-title + .site-description {
    margin-top: 12px !important;
  }
}
/* 4. Site Navigation
/* ---------------------------------------------------------- */
.gh-head {
  margin-top: 4em;
  margin-bottom: 3em;
  height: 4em;
  font-size: var(--font-size-small);
  line-height: 1.3em;
  background-color: var(--color-background);
  z-index: 150;
  position: sticky;
  top: 0;
}
@media screen and (max-width: 480px) {
  .gh-head {
    margin-top: 2.4721878863em;
    margin-bottom: 1.8541409147em;
    height: 3.3333333333em;
  }
}

.gh-head a {
  text-decoration: none;
}

.gh-head-inner {
  display: grid;
  /* gap yields first at laptop widths so the six nav tags fit */
  -moz-column-gap: clamp(16px, 3vw, 40px);
  column-gap: clamp(16px, 3vw, 40px);
  grid-template-columns: auto 1fr auto;
  grid-auto-flow: row dense;
  align-items: center;
  height: 100%;
}
/* grow past the 6/8 grid only when the nav needs it, up to the content edges */
@media screen and (min-width: 820px) {
  .gh-head-inner {
    width: fit-content;
    min-width: calc(
      (100% - 2 * var(--outer-margin) - 7 * var(--grid-gap)) / 8 * 6 + 5 * var(--grid-gap)
    );
    max-width: calc(100% - 2 * var(--outer-margin));
  }
}

/* Header styles
/* ---------------------------------------------------------- */
.is-head-left-logo .gh-head-inner {
  grid-template-columns: auto 1fr auto;
}

@media (min-width: 992px) {
  .is-head-left-logo .gh-head-menu {
    margin-right: 64px;
    margin-left: 16px;
  }
}
/* Brand
/* ---------------------------------------------------------- */
.logo {
  position: relative;
  color: var(--color-highlight);
  font-style: italic;
  overflow: visible;
  font-weight: bold;
  display: inline-block;
}
.logo a {
  color: var(--color-highlight);
}
.logo.logo-variant-1::before,
.logo.logo-variant-2::before,
.logo.logo-variant-3::before,
.logo.logo-variant-4::before,
.logo.logo-variant-5::before {
  position: absolute;
  width: 100%;
  height: 100%;
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  z-index: 9;
  pointer-events: none;
}
.logo.logo-variant-1::before {
  background-image: url("../images/bandit.svg");
  top: -0.8em;
  left: -0.65em;
  width: 100%;
  height: 175%;
}
.logo.logo-variant-2::before {
  background-image: url("../images/fox.png");
  bottom: -1.2em;
  right: -1.3em;
  width: 100%;
  height: 200%;
}
.logo.logo-variant-3::before {
  background-image: url("../images/ladder_truck.png");
  bottom: -1em;
  left: 1.05em;
  width: 100%;
  height: 300%;
}
.logo.logo-variant-4::before {
  background-image: url("../images/nofretete.png");
  z-index: 0;
  left: 50%;
  top: -0.73em;
  width: 100%;
  height: 3em;
  z-index: 0;
  transform: translateX(-50%);
}
.logo.logo-variant-4 a,
.logo.logo-variant-4 span {
  z-index: 9;
  position: relative;
  display: inline-block;
}
.logo.logo-variant-5::before {
  background-image: url("../images/speed.svg");
  bottom: -0.6em;
  left: -1.35em;
  width: 100%;
  height: 200%;
}

.logo.gh-head-logo {
  margin: -0.05em 0 0;
  font-family: var(--font-sans);
  font-weight: bold;
  display: block;
  line-height: 1;
}
@media screen and (max-width: 480px) {
  .logo.gh-head-logo {
    font-size: var(--font-size-large);
  }
}
.logo.gh-head-logo .strapline {
  position: absolute;
  font-size: var(--font-size-extrasmall);
  bottom: -1em;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  color: var(--color-highlight);
  letter-spacing: 0.02em;
  font-style: normal;
  font-weight: normal;
}
.logo.gh-head-logo.logo-variant-1::before,
.logo.gh-head-logo.logo-variant-2::before,
.logo.gh-head-logo.logo-variant-3::before,
.logo.gh-head-logo.logo-variant-5::before {
  z-index: 9999;
}

.call-to-action .logo {
  color: white;
}

.gh-head-logo {
  font-size: var(--font-size-xlarge);
}

@media screen and (min-width: 820px) {
  body.scrolled .gh-head-brand .logo {
    font-size: var(--font-size-large) !important;
  }
}
body.scrolled .gh-head-brand .logo {
  margin-bottom: 0;
  line-height: 1;
  transform: translateY(-1px);
}
body.scrolled .gh-head-brand .logo::before,
body.scrolled .gh-head-brand .logo .strapline {
  display: none !important;
}

/* .gh-head-logo.no-image {
    margin-top: -5px;
} */
.has-cover .gh-head-logo {
  color: var(--color-text);
}
/* logo and a:hover default to black, which vanishes on the members tag's near-black accent */
body.tag-members {
  --color-highlight: var(--color-ocre-jaune-clair);
}

/* .gh-head-logo img {
    max-height: 40px;
} */
/* Primary Navigation
/* ---------------------------------------------------------- */
.gh-head-menu {
  display: flex;
  align-items: center;
  margin-top: 1px;
  font-weight: inherit;
}

.gh-head-menu .nav {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gh-head-menu .nav li {
  margin: 0;
  padding: 0;
}

.gh-head-menu .nav a {
  display: inline-block;
  line-height: 1.7;
  color: var(--color-link);
  /* multi-word labels ("Food Map") never break onto two lines */
  white-space: nowrap;
}

.gh-head-menu ul.nav > li > a:hover,
.gh-head-menu ul.nav > li > a:focus-visible {
  outline: 1px solid var(--color-text);
  outline-offset: 2px;
  text-decoration: none;
}

.gh-head-menu .nav-more-toggle {
  position: relative;
  width: 30px;
  height: 30px;
  margin: 0 -6px;
  padding: 0;
  font-size: var(--font-size-small);
  background-color: var(--color-background);
  text-transform: inherit;
}

.gh-head-menu .nav-more-toggle svg {
  width: 24px;
  height: 24px;
}

.gh-head-menu .nav-current a {
  color: var(--color-highlight);
}

.gh-head-menu ul.nav li a {
  padding: 0.4em 0.7em;
  font-weight: normal;
  line-height: 1;
}

.gh-head-menu a:focus-visible {
  color: var(--color-highlight);
  text-decoration: underline;
  text-underline-offset: 4px;
}
@media screen and (hover: hover) {
  .gh-head-menu a:hover {
    color: var(--color-highlight);
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}
/* Dropdown
/* ---------------------------------------------------------- */
.gh-dropdown {
  position: absolute;
  top: 100%;
  right: -16px;
  z-index: 90;
  width: 200px;
  padding: 12px 0;
  margin-top: 24px;
  opacity: 0;
  visibility: hidden;
  text-align: left;
  background-color: var(--color-background);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 7px 20px -5px rgba(0, 0, 0, 0.15);
  transform: translate3d(0, 6px, 0);
  transition:
    opacity 0.3s,
    transform 0.2s;
}

.is-dropdown-mega .gh-dropdown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  -moz-column-gap: 40px;
  column-gap: 40px;
  min-width: 320px;
  padding: 20px 32px;
}

.is-dropdown-open .gh-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.gh-head-menu .gh-dropdown li a {
  display: block;
  padding: 6px 20px;
  color: var(--color-text);
}

.is-dropdown-mega .gh-dropdown li a {
  padding: 8px 0;
}

/* Secondary Navigation
/* ---------------------------------------------------------- */
button {
  color: var(--color-link);
}

.gh-social {
  display: flex;
  align-items: center;
  gap: 20px;
}

.gh-social-link {
  display: inline-flex;
  line-height: 0;
  color: var(--color-text);
}

.gh-social-link:hover,
.gh-social-link:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 2px;
}

.gh-social-link svg {
  width: 18px;
  height: 18px;
}

.gh-head-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
  list-style: none;
  text-align: right;
}

.gh-head-members {
  display: flex;
  gap: 20px;
  align-items: center;
}

.gh-head-link {
  font-weight: inherit;
  color: var(--color-link);
  /* keep "Sign in" on one line when the header grid is squeezed */
  white-space: nowrap;
}

.gh-head-link:hover,
.gh-head-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.gh-head-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 8px 20px;
  height: 44px;
  font-weight: inherit;
  letter-spacing: -0.005em;
  font-size: var(--font-size-small);
  color: var(--color-primary-button-text);
  background: var(--color-primary-button-background);
  /* keep multi-word labels ("Level Up") on one line */
  white-space: nowrap;
}

.has-cover .gh-head-button {
  color: var(--color-primary-button-text);
  background: var(--color-primary-button-background);
}
.gh-head-button:hover,
.gh-head-button:focus-visible {
  outline: 1px solid var(--color-text);
  outline-offset: 2px;
}

@media (max-width: 819px) {
  .gh-head-members {
    flex-direction: column-reverse;
    gap: 16px;
    width: 100%;
  }
}
/* Search
/* ---------------------------------------------------------- */
.gh-search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  cursor: pointer;
  background-color: var(--color-background);
  border: 0;
}

.gh-search:hover,
.gh-search:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 2px;
}

.gh-head-brand .gh-search {
  margin-right: 8px;
}

.gh-head-actions .gh-search {
  margin-right: -4px;
}

@media (max-width: 819px) {
  .gh-head-actions .gh-search {
    display: none;
  }
}
@media (min-width: 820px) {
  .gh-head-brand .gh-search {
    display: none;
  }
}
/* Mobile Menu Trigger
/* ---------------------------------------------------------- */
.gh-burger {
  position: relative;
  display: none;
  width: 30px;
  height: 30px;
  padding: 0;
  margin-right: -3px;
  cursor: pointer;
  background-color: var(--color-background);
  border: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.gh-burger::before,
.gh-burger::after {
  position: absolute;
  left: 3px;
  width: 24px;
  height: 2px;
  content: "";
  background-color: var(--color-background);
  transition: all 0.2s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}

.has-cover .gh-burger::before,
.has-cover .gh-burger::after {
  background-color: var(--color-text);
}

.gh-burger::before {
  top: 11px;
}

.gh-burger::after {
  bottom: 11px;
}

.gh-head-open .gh-burger::before {
  top: 14px;
  transform: rotate(45deg);
}

.gh-head-open .gh-burger::after {
  bottom: 14px;
  transform: rotate(-45deg);
}

/* Mobile Menu
/* ---------------------------------------------------------- */
/* IDs needed to ensure sufficient specificity */
@media screen and (min-width: 820px) and (max-width: 1279px) {
  #gh-head .gh-head-logo {
    font-size: var(--font-size-large);
  }
  body:not(.scrolled) #gh-head .gh-head-brand:has(.logo-variant-5) {
    padding-left: 3.2em;
  }
}
/* Squeezed desktop header: six nav tags + member actions need tighter spacing */
@media screen and (min-width: 820px) and (max-width: 1279px) {
  #gh-head .gh-head-inner {
    column-gap: 16px;
  }
  #gh-head .nav {
    gap: 0.4em;
  }
  #gh-head .gh-head-menu ul.nav li a {
    padding: 0.4em 0.5em;
  }
  #gh-head .gh-head-actions {
    gap: 12px;
  }
  #gh-head .gh-head-members {
    gap: 12px;
  }
  #gh-head .gh-head-button {
    padding: 8px 14px;
  }
}
/* Tightest tier: below ~1050px the squeezed six tags still clip into the
   scroll overflow, so drop the header a type size until the mobile menu. */
@media screen and (min-width: 820px) and (max-width: 1049px) {
  #gh-head .gh-head-logo {
    font-size: var(--font-size-medium);
  }
  #gh-head .gh-head-menu ul.nav li a {
    font-size: var(--font-size-extrasmall);
  }
  #gh-head .gh-head-link,
  #gh-head .gh-head-button {
    font-size: var(--font-size-extrasmall);
  }
  #gh-head .gh-head-button {
    height: 36px;
    padding: 6px 12px;
  }
}
/* overflow safety: tags scroll rather than pushing the CTA off-screen */
@media screen and (min-width: 820px) {
  #gh-head .gh-head-menu {
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    /* padding keeps hover outlines inside the scroll clip */
    padding: 4px;
    margin: -4px;
  }
  #gh-head .gh-head-menu::-webkit-scrollbar {
    display: none;
  }
}
/* 820px: even the squeezed six-tag nav + member actions don't fit below this */
@media (max-width: 819px) {
  #gh-head .gh-head-inner {
    grid-template-columns: 1fr;
    gap: 48px;
    /* .inner narrows to the 6/8 grid from 768px up; mobile header stays full width */
    width: calc(100% - 2 * var(--outer-margin));
  }
  #gh-head .gh-head-brand {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  body:not(.scrolled) #gh-head .gh-head-brand:has(.logo-variant-5) {
    padding-left: 3.2em;
  }
  /* Hidden on mobile — the drawer's .gh-head-actions search covers it. */
  #gh-head .gh-head-brand .gh-search {
    display: none;
  }
  #gh-head .gh-burger {
    display: block;
    position: absolute;
    right: 0;
  }
  #gh-head .gh-head-menu,
  #gh-head .gh-head-actions {
    position: fixed;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
  }
  #gh-head .gh-head-menu {
    margin: 0;
    transition: none;
    transform: translateY(0);
  }
  #gh-head .nav {
    gap: 16px;
    align-items: center;
    line-height: 1.4;
    width: 100%;
    text-align: center;
  }
  #gh-head .nav a {
    font-size: var(--font-size-medium);
    font-weight: inherit;
    text-transform: none;
    display: block;
    width: 100%;
  }
  #gh-head .nav li {
    opacity: 0;
    transform: translateY(-4px);
    width: 100%;
  }
  #gh-head :is(.gh-head-button, .gh-head-link) {
    opacity: 0;
    transform: translateY(8px);
  }
  #gh-head .gh-head-button {
    width: 100%;
    font-size: var(--font-size-small);
    text-transform: none;
    opacity: 0;
    transform: translateY(8px);
  }
  .gh-head-open #gh-head {
    position: fixed;
    inset: 0;
    z-index: 3999999;
    height: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    margin-top: 0;
    padding-top: 1.2em;
  }
  .gh-head-open .gh-head-inner {
    grid-template-rows: auto 1fr auto;
  }
  .gh-head-open.has-cover #gh-head,
  .gh-head-open.has-cover #gh-head .gh-head-actions {
    background-color: var(--color-background);
  }
  .gh-head-open #gh-head .gh-head-menu,
  .gh-head-open #gh-head .gh-head-actions {
    position: static;
    visibility: visible;
    opacity: 1;
  }
  .gh-head-open #gh-head .nav {
    display: flex;
    flex-direction: column;
  }
  .gh-head-open #gh-head .nav li {
    opacity: 1;
    transition:
      transform 0.2s,
      opacity 0.2s;
    transform: translateY(0);
  }
  .gh-head-open #gh-head .gh-head-actions {
    position: sticky;
    right: 0;
    bottom: 0;
    left: 0;
    display: inline-flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    padding: max(4vmin, 20px) 0 max(4vmin, 28px);
    background-color: var(--color-background);
  }
  .gh-head-open #gh-head :is(.gh-head-button, .gh-head-link) {
    opacity: 1;
    transition:
      transform 0.4s,
      opacity 0.4s;
    transition-delay: 0.2s;
    transform: translateY(0);
  }
  .gh-head-open #gh-head .gh-head-link {
    transition-delay: 0.4s;
  }
}
/* 5. Post Feed
/* ---------------------------------------------------------- */
.post-feed {
  position: relative;
}
.post-feed article {
  display: block;
  margin: 0;
  padding-bottom: 1.8em;
  width: 100%;
}

.call-to-action {
  background: blue;
  width: 100%;
  text-align: center;
  padding: 4em 0 3em;
  margin-bottom: 3.6em;
  overflow: hidden;
}
.call-to-action h1 {
  text-align: center;
}
.call-to-action p {
  color: white;
}
.call-to-action .homepage-signup-button {
  background: white;
  color: blue;
  /* Unlike the header button, wrap long labels in narrow columns instead of
     clipping against the widget's overflow: hidden. */
  max-width: 100%;
  height: auto;
  min-height: 44px;
  white-space: normal;
  text-align: center;
}
.call-to-action .site-signup-tagline {
  font-size: var(--font-size-medium);
  line-height: var(--line-height-medium);
}
.call-to-action .logo.logo-variant-4 {
  padding-top: 0.2em;
  padding-bottom: 0.85em;
}
.call-to-action .logo.logo-variant-3 {
  padding-bottom: 0.5em;
}
.call-to-action.banner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: calc(100% + 2 * var(--outer-margin));
  margin-left: calc(-1 * var(--outer-margin));
  padding: 3em var(--outer-margin);
}
.call-to-action.banner p {
  font-size: var(--font-size-medium);
  line-height: var(--line-height-medium);
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.call-to-action.banner p.button-wrapper {
  text-align: center;
}
.call-to-action.banner p.homepage-signup-disclaimer {
  font-size: var(--font-size-extrasmall);
  line-height: var(--line-height-small);
  margin-top: 1.2em;
}
.call-to-action.banner p.homepage-signup-disclaimer a,
.call-to-action.banner p.homepage-signup-disclaimer a:hover,
.call-to-action.banner p.homepage-signup-disclaimer a:focus-visible {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
}
@media (max-width: 767px) {
  .call-to-action.banner p.homepage-signup-disclaimer > span.line {
    display: block;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .call-to-action .xlarge {
    font-size: var(--font-size-large);
    line-height: var(--line-height-large);
  }
}

.homepage-signup-form {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 500px;
  margin: 1.5em auto 0;
  padding: 3px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  transition: border-color 0.2s;
}

.homepage-signup-form:hover,
.homepage-signup-form:focus-within {
  border-color: var(--color-background);
}

.homepage-signup-input {
  width: 100%;
  min-width: 0;
  height: 2.9em;
  min-height: 46px;
  margin: 0 3px 0 0;
  padding: 12px 16px;
  color: var(--color-darkgrey);
  background: #fff;
  border: 0;
  font-family: inherit;
  font-size: 1.1em;
}

.homepage-signup-input::placeholder {
  color: #8a8a8a;
}

.homepage-signup-input:focus {
  outline: 0;
}

.homepage-signup-submit {
  display: flex;
  position: relative;
  flex-shrink: 0;
  align-items: center;
  min-height: 46px;
  padding: 0 1.2em;
  color: var(--color-primary-button-text);
  background: var(--color-primary-button-background);
  border: 0;
  border-radius: 3px;
  font-family: inherit;
  font-size: 1em;
  font-weight: 600;
  line-height: 1em;
  letter-spacing: 0.2px;
  white-space: nowrap;
  cursor: pointer;
}

.homepage-signup-submit:hover,
.homepage-signup-submit:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 2px;
}

.homepage-signup-message {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  margin: 0;
  color: white;
  text-align: center;
}
/* Outrank .call-to-action.banner p (medium) so the message reads as small print, not a headline. */
.call-to-action.banner p.homepage-signup-message {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

.homepage-signup-message[hidden] {
  display: none;
}

/* Ghost toggles .success/.error on the form; reveal the matching message (overriding [hidden]). */
.homepage-signup-form.success .homepage-signup-message--success,
.homepage-signup-form.error .homepage-signup-message--error {
  display: block;
}
/* The message is absolutely positioned over the disclaimer's row, so hide the disclaimer while it shows. */
.call-to-action.banner:has(.homepage-signup-form.success, .homepage-signup-form.error)
  .homepage-signup-disclaimer {
  visibility: hidden;
}

h2.latest-news-title {
  margin: 0 0 1em 0;
  font-size: var(--font-size-small);
  font-weight: inherit;
  color: var(--color-text);
  line-height: 1;
  text-align: left !important;
}
@media screen and (min-width: 768px) {
  h2.latest-news-title {
    margin-top: calc(-1 * var(--font-size-small) - 1em);
  }
}

.latest-news-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.latest-news-list .latest-news-item {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  align-items: flex-start;
  padding: 0.6em 0;
}
.latest-news-list .latest-news-item .latest-news-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 3px;
}
.latest-news-list .latest-news-item .latest-news-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.latest-news-list .latest-news-item .latest-news-text {
  min-width: 0;
}
.latest-news-list .latest-news-item .latest-news-text h4 {
  font-size: var(--font-size-medium);
  margin: 0;
  line-height: 1.1;
}
.latest-news-list .latest-news-item .latest-news-text a {
  text-decoration: none;
}
.latest-news-list .latest-news-item .latest-news-text a:focus-visible {
  color: var(--color-highlight);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
@media screen and (hover: hover) {
  .latest-news-list .latest-news-item .latest-news-text a:hover {
    color: var(--color-highlight);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
  }
}
.latest-news-list .latest-news-item time {
  display: block;
  font-size: var(--font-size-extrasmall);
}

.tag-template .post-feed {
  margin-top: 4vmin;
}

.author-template .author-profile {
  margin-top: 4vmin;
}

.author-template .columns-medium {
  margin-top: 4vmin;
}

.archive-title {
  margin-top: 2vmin;
  margin-bottom: 8vmin;
  text-align: center;
}

@media (max-width: 991px) {
  .post-feed {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 767px) {
  .post-feed {
    grid-template-columns: 1fr;
    grid-gap: 40px;
  }
}
.post-card {
  position: relative;
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  background-size: cover;
  word-break: break-word;
}
@media screen and (min-width: 768px) {
  /* Cap card width so image+text scale proportionally with text under
     browser zoom — mirrors the .gh-canvas .article-image cap from #92. */
  .post-card {
    max-width: 720px;
  }
}
.post-card.post-card-large {
  margin-bottom: 4.2em;
}

.post-card-image-link {
  position: relative;
  overflow: hidden;
  display: block;
  margin-bottom: 1.2em;
}

.post-card-image-link::after {
  content: "";
  display: block;
  padding-bottom: 55%;
}

.post-card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--color-lightgrey) no-repeat center center;
  -o-object-fit: cover;
  object-fit: cover;
}

.post-card-content-link {
  position: relative;
  display: block;
  color: var(--color-link);
}

a.post-card-content-link:hover,
a.post-card-content-link:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* Excerpt anchor (added in #182) shouldn't carry the headline hover state. */
a.post-card-content-link:has(.post-card-excerpt):hover,
a.post-card-content-link:has(.post-card-excerpt):focus-visible {
  text-decoration: none;
}

.post-feed .no-image .post-card-content-link {
  padding: 0;
}

.no-image .post-card-header {
  margin-top: 0;
}

.post-card-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1em;
  margin: 0 0 1.3em;
  color: white;
  font-size: var(--font-size-extrasmall);
  font-family: var(--font-sans);
  font-weight: normal;
  line-height: 1;
}
.post-card-tags a {
  color: white;
  display: block;
  background: var(--color-tag-background-default);
  padding: 0.4em 0.7em;
  line-height: 1;
  word-break: normal;
  overflow-wrap: anywhere;
}
.post-card-tags a:hover,
.post-card-tags a:focus-visible {
  outline: 1px solid var(--color-text);
  outline-offset: 2px;
}
.post-template .article .post-card-tags {
  font-size: var(--font-size-small);
  margin-bottom: 28px;
}
.post-template .article .post-card-tags a.post-card-primary-tag {
  color: var(--color-text);
  padding-left: 0;
  padding-right: 0;
}

/* /topics/ index and homepage browse-by-topic strip */
.topic-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8em;
  align-items: baseline;
}
.topic-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: white;
  background: var(--color-tag-background-default);
  padding: 0.5em 0.8em;
  line-height: 1.1;
  font-size: var(--font-size-medium);
}
.topic-tag:hover,
.topic-tag:focus-visible {
  outline: 1px solid var(--color-text);
  outline-offset: 2px;
  color: white;
}
.topic-tag-count {
  font-size: var(--font-size-small);
  font-weight: 700;
}
.topics-index .topic-tags {
  margin-bottom: 6vmin;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .topic-tag {
    font-size: var(--font-size-small);
  }
  .topic-tag-count {
    font-size: var(--font-size-extrasmall);
  }
}

/* Homepage browse-by-topic strip: centered label + row of tags, no box.
   The label joins the row on wide screens. */
.homepage-topics {
  margin-bottom: 3.6em;
}
.homepage-topics-title {
  margin: 0 0 0.8em;
  font-size: calc(1.25 * var(--font-size-small));
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
  text-align: center;
}
.homepage-topics .topic-tag {
  font-size: var(--font-size-small);
  padding: 0.45em 1em;
}
.homepage-topics .topic-tags {
  gap: 0.6em;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
}
@media screen and (min-width: 1280px) {
  .homepage-topics {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
  }
  .homepage-topics-title {
    margin: 0;
  }
}
.homepage-topics-more {
  display: inline-flex;
  align-items: center;
  margin-left: 0.5em;
  color: inherit;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}
.homepage-topics-more [aria-hidden="true"] {
  margin-left: 0.3em;
}
.homepage-topics-more:hover,
.homepage-topics-more:focus-visible {
  color: var(--color-highlight);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Tighten feature-card spacing on side-by-side so the features column
   doesn't run shorter than the news column. */
@media screen and (min-width: 768px) {
  .homepage-feed-articles .post-card.post-card-large {
    margin-bottom: 3em;
  }
}

.post-card-date {
  display: block;
  margin-top: 12px;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-size-extrasmall);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
}

.post-card-title {
  margin: 0;
  font-size: var(--font-size-medium);
  text-align: left;
  font-weight: inherit;
  line-height: 1.1;
  font-family: inherit;
  font-weight: bold;
}

.col-6 .tag-hero .post-card-title {
  font-size: var(--font-size-large);
  line-height: var(--line-height-large);
}
@media screen and (min-width: 768px) {
  .col-6 .tag-hero .post-card-image-link {
    display: block;
    width: 100%;
  }
  .col-6 .tag-hero .post-card-excerpt {
    font-size: var(--font-size-medium);
    line-height: var(--line-height-medium);
  }
}

.no-image .post-card-title {
  margin-top: 0;
}

.post-card-title svg {
  margin-top: -3px;
  margin-left: -1px;
}

.post-card-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.post-card-excerpt {
  display: -webkit-box;
  overflow-y: hidden;
  margin-top: 12px;
  max-width: 720px;
  color: var(--color-text);
  font-size: var(--font-size-small);
  line-height: 1.5;
  word-break: break-word;
}

.post-card:not(.post-card-large):not(.post-card-full):not(.dynamic):not(.no-image)
  .post-card-excerpt {
  -webkit-line-clamp: 2;
}

.tag-template .post-card-excerpt {
  margin-top: 6px;
}

:is(.tag-template, .author-template) .post-card-large .post-card-excerpt {
  display: block;
  overflow-y: auto;
}

.post-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 0;
  font-size: var(--font-size-small);
  color: var(--color-text);
}

.post-card-meta > * {
  display: flex;
  align-items: center;
  gap: 6px;
}

.post-card-meta > * + *:not(script)::before {
  width: 2px;
  height: 2px;
  content: "";
  background-color: var(--color-background);
  border-radius: 50%;
}

.post-card-meta .sep {
  margin: 0 4px;
}

.author-profile-image {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.author-list {
  display: flex;
  margin: 0 0 0 4px;
  padding: 0;
  list-style: none;
}

.author-list-item {
  position: relative;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
}

/* Special Styling for home page grid (below):

The first post in the list is styled to be bigger than the others and take over
the full width of the grid to give it more emphasis. Wrapped in a media query to
make sure this only happens on large viewports / desktop-ish devices.

*/
/* Pagination
/* ---------------------------------------------------------- */
.pagination {
  display: none;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-top: 8vmin;
}

html.no-infinite-scroll .pagination {
  display: grid;
}

.pagination a {
  font-size: var(--font-size-small);
  font-weight: inherit;
}

.pagination a:hover,
.pagination a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.pagination .older-posts {
  grid-column-start: 3;
  text-align: right;
}

.pagination + .call-to-action.banner {
  margin-top: 8vmin;
}
/* 6. Single Post
/* ---------------------------------------------------------- */
.article {
  word-break: break-word;
}

.post-template .article {
  padding: var(--font-size-small) 0 max(8vmin, 64px);
}
@media screen and (min-width: 480px) {
  .post-template .article {
    padding-top: calc(2 * var(--font-size-small));
  }
}
@media screen and (min-width: 768px) {
  .post-template .article {
    padding-top: calc(4 * var(--font-size-small));
  }
}

.post-template .article-header {
  padding: 0 0 max(4.8vmin, 32px);
}

.page-template .article-header {
  padding: max(12vmin, 64px) 0 max(3.2vmin, 28px);
}

.article-tag {
  font-size: var(--font-size-small);
}

.article-tag a {
  color: var(--color-link);
}

.article-title {
  margin-bottom: 16px;
  font-size: var(--font-size-large);
  /* text-transform: uppercase; */
  font-weight: bold;
  line-height: 1;
  color: var(--color-text);
  /* font-style: italic; */
  max-width: 720px;
}

.article-excerpt {
  margin: 0 0 32px;
  max-width: 720px;
  font-size: var(--font-size-medium);
  line-height: var(--line-height-medium);
}

.gh-canvas .article-image {
  grid-column: main-start/main-end;
  width: 100%;
  margin: max(6.4vmin, 40px) 0 0;
}
@media screen and (max-width: 767px) {
  .gh-canvas .article-image {
    grid-column: full-start/full-end !important;
  }
}

.image-full .article-image {
  grid-column: full-start/full-end;
}

.image-small .article-image {
  grid-column: main-start/main-end;
}

.gh-canvas .article-image img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

@media (max-width: 767px) {
  .article-excerpt {
    margin-bottom: 24px;
    font-size: var(--font-size-small);
  }
}
/* -------- */
/* Content grid
/* ---------------------------------------------------------- */
/* Canvas creates a multi-column, centered grid which the post
is laid out on top of. Canvas just defines the grid, we don't
use it for applying any other styles. */
.gh-canvas,
.kg-width-full.kg-content-wide {
  --gap: var(--grid-gap);
  --main: calc(100% - 2 * var(--outer-margin));
  --wide: minmax(0, calc((var(--container-width, 1200px) - var(--content-width, 720px)) / 2));
  --full: minmax(var(--gap), 1fr);
}
@media screen and (min-width: 768px) {
  .gh-canvas,
  .kg-width-full.kg-content-wide {
    --main: calc(
      ((100% - 2 * var(--outer-margin)) - 7 * var(--grid-gap)) / 8 * 6 + 5 * var(--grid-gap)
    );
  }
}
.gh-canvas,
.kg-width-full.kg-content-wide {
  display: grid;
  grid-template-columns:
    [full-start] var(--full) [wide-start] var(--wide) [main-start] var(--main)
    [main-end] var(--wide) [wide-end] var(--full) [full-end];
}

.gh-canvas > * {
  grid-column: main-start/main-end;
}

@media screen and (min-width: 768px) {
  .kg-width-wide,
  .kg-content-wide > div {
    grid-column: main-start/main-end;
  }
}
.kg-width-full {
  grid-column: full-start/full-end;
}

.kg-width-full img {
  width: 100%;
}

/* Content
/* ---------------------------------------------------------- */
/* Content refers to styling all page and post content that is
created within the Ghost editor. The main content handles
headings, text, images and lists. We deal with cards lower down. */
/* Default vertical spacing */
.gh-content > * + * {
  margin-top: max(3.2vmin, 24px);
  margin-bottom: 0;
}

/* Remove space between full-width cards */
.gh-content
  > .kg-width-full
  + .kg-width-full:not(.kg-width-full.kg-card-hascaption + .kg-width-full) {
  margin-top: 0;
}

/* [id] represents all headings h1-h6, reset all margins */
.gh-content > [id] {
  margin: 0;
  color: var(--color-text);
}

/* Add back a top margin to all headings, unless a heading
is the very first element in the post content */
.gh-content > [id]:not(:first-child) {
  margin: 2em 0 0;
}

/* Add a small margin between a heading and anything after it */
.gh-content > [id] + * {
  margin-top: 1.5rem !important;
}

/* A larger margin before/after HRs and blockquotes */
.gh-content > hr,
.gh-content > blockquote {
  position: relative;
  margin-top: max(4.8vmin, 32px);
}

.gh-content > hr + *,
.gh-content > blockquote + * {
  margin-top: max(4.8vmin, 32px) !important;
}

/* Now the content typography styles */
.gh-content a {
  color: var(--color-text);
  text-decoration: underline;
  word-break: break-word;
}

/* Buttons embedded in content shouldn't pick up the content-link underline. */
.gh-content a.gh-head-button {
  text-decoration: none;
}

.gh-content > blockquote:not([class]),
.gh-content > ol,
.gh-content > ul,
.gh-content > dl {
  /* font-family: var(--gh-font-body, var(--font-serif)); */
  font-weight: inherit;
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

.gh-content > p {
  font-weight: inherit;
  font-size: var(--font-size-small);
  line-height: var(--line-height-text);
  max-width: 720px;
}

.gh-content > p img {
  margin: 0 auto;
}

/* Interview Q/A layout — see docs/interview-layout.md; classes from interview-layout.js */
.tag-interview .gh-content > p.is-question ~ p:not(.is-question, .is-closing-note) {
  padding-left: clamp(2rem, 6vw, 5rem);
}

.page-template .gh-content:only-child > *:first-child:not(.kg-width-full) {
  margin-top: max(12vmin, 64px);
}

.page-template .gh-content > *:last-child:not(.kg-width-full) {
  margin-bottom: max(12vmin, 64px);
}

.gh-content .kg-callout-card .kg-callout-text,
.gh-content .kg-toggle-card .kg-toggle-content > ol,
.gh-content .kg-toggle-card .kg-toggle-content > ul,
.gh-content .kg-toggle-card .kg-toggle-content > p {
  /* font-family: var(--font-serif); */
  font-weight: inherit;
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

.gh-content .kg-product-card .kg-product-card-description > p,
.gh-content .kg-product-card .kg-product-card-description > ol,
.gh-content .kg-product-card .kg-product-card-description > ul {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

.gh-content .kg-callout-card .kg-callout-emoji {
  font-size: var(--font-size-small);
  line-height: 1.4em;
}

.gh-content .kg-toggle-card .kg-toggle-heading-text {
  font-size: var(--font-size-small);
}

.gh-content > ul,
.gh-content > ol,
.gh-content > dl,
.gh-content .kg-toggle-card .kg-toggle-content > ol,
.gh-content .kg-toggle-card .kg-toggle-content > ul,
.gh-content .kg-product-card .kg-product-card-description > ol,
.gh-content .kg-product-card .kg-product-card-description > ul {
  padding-left: 1.9em;
}

.gh-content > blockquote:not([class]) {
  position: relative;
  font-style: italic;
  padding: 0;
  font-size: var(--font-size-medium);
  line-height: 1.1;
  color: var(--color-text);
  max-width: 720px;
  font-weight: bold;
}

.gh-content > blockquote:not([class])::before {
  content: "";
  position: absolute;
  left: -1.5em;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-highlight);
}

.gh-content :not(pre) > code {
  vertical-align: middle;
  padding: 0.15em 0.4em 0.15em;
  border: #e1eaef 1px solid;
  font-weight: inherit;
  font-size: var(--font-size-small);
  line-height: 1em;
  color: var(--color-text);
  background: #f0f6f9;
}

.gh-content pre {
  overflow: auto;
  padding: 16px 20px;
  color: var(--color-text);
  font-size: var(--font-size-small);
  line-height: 1.5em;
  background: var(--color-darkgrey);
  box-shadow:
    0 2px 6px -2px rgba(0, 0, 0, 0.1),
    0 0 1px rgba(0, 0, 0, 0.4);
}

.gh-content ol ol li {
  list-style-type: lower-alpha;
}

.gh-content ol ol ol li {
  list-style-type: lower-roman;
}

@media (max-width: 650px) {
  .gh-content > ol,
  .gh-content > ul,
  .gh-content > dl,
  .gh-content > p,
  .gh-content .kg-callout-card .kg-callout-text,
  .gh-content .kg-toggle-card .kg-toggle-content > ol,
  .gh-content .kg-toggle-card .kg-toggle-content > ul,
  .gh-content .kg-toggle-card .kg-toggle-content > p {
    font-size: var(--font-size-small);
  }
  .gh-content .kg-product-card .kg-product-card-description > p,
  .gh-content .kg-product-card .kg-product-card-description > ol,
  .gh-content .kg-product-card .kg-product-card-description > ul {
    font-size: var(--font-size-small);
  }
  .gh-content blockquote:not([class])::before {
    left: min(-4vmin, -20px);
  }
}
/* Cards
/* ---------------------------------------------------------- */
/* Cards are dynamic blocks of content which appear within Ghost
posts, for example: embedded videos, tweets, galleries, or
specially styled bookmark links. We add extra styling here to
make sure they look good, and are given a bit of extra spacing. */
/* Add extra margin before/after any cards,
except for when immediately preceeded by a heading */
.gh-content :not(.kg-card):not([id]) + .kg-card {
  margin-top: 6vmin;
}

.gh-content .kg-card + :not(.kg-card) {
  margin-top: 6vmin;
}

/* Cap embeds to the 720px text column so iframes (Instagram, YouTube, etc.)
   center on the same axis as paragraph text instead of the wider grid column. */
.kg-embed-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 720px;
}

/* Instagram embeds pasted as raw HTML (Ghost has no native Instagram embed
   card, so contributors paste the script-driven embed code into an HTML card).
   Anchor to the paragraph's left edge and let Instagram's own inline
   max-width: 540px on the blockquote drive the natural size — anything wider
   makes vertical reels feel oversized.
   !important is required to beat Instagram's embed.js rewriting inline styles
   and the existing iframe.instagram-media auto-margin rule. */
.gh-content .instagram-media {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Bookmark cards — unused today, capped for consistency. */
.gh-content .kg-bookmark-card {
  max-width: 720px;
}

/* Podigee players pasted as raw HTML carry width="100%", which fills the grid column. */
.gh-content iframe[src*="podigee.io"] {
  display: block;
  width: 100%;
  max-width: 720px;
  /* Podigee's copy-paste embed says height=100, which clips the player */
  height: 150px;
}

/* Podigee's script embed swaps itself for an iframe (same class); !important beats its inline min-width:100% */
.gh-content .podigee-podcast-player {
  display: block;
  width: 100%;
  min-width: 0 !important;
  max-width: 720px;
}

/* This keeps small images centered */
.kg-image-card img {
  margin: 0;
}

/* Cap Ghost CTA cards (used as donate/membership callouts) to the 720px text
   column so the separator lines and content sit on the same axis as the
   surrounding paragraphs instead of spanning the wider main grid column. */
.gh-content .kg-cta-card {
  max-width: 720px;
}

/* Same cap for Koenig's native callout card. Currently unused on production
   but kept aligned so it doesn't drift when an editor reaches for it later. */
.gh-content .kg-callout-card {
  max-width: 720px;
}

/* ============================================================= */
/* Article paywall — Ghost renders partials/content-cta.hbs       */
/* server-side in place of a locked post body.                    */
/* ============================================================= */

/* Ghost injects #gh-members-styles AFTER this sheet (centring, 40px 4vw padding, rounded
   corners, its own button rules); the .gh-content qualifiers below out-specify it. */
.gh-content .gh-post-upgrade-cta {
  max-width: 720px;
  margin-top: 16px;
  align-items: stretch;
  text-align: center;
}

/* Background inline from @site.accent_color. Zero Ghost's padding — .paywall-body owns it
   so the strip can sit flush at the top. */
.gh-content .paywall {
  padding: 0;
  border-radius: 0;
  text-align: center;
  font-family: var(--font-sans);
  box-shadow: 0 14px 30px -24px rgba(0, 0, 0, 0.4);
}

.gh-content .paywall-body {
  padding: 20px 28px 22px;
}

/* Reading-progress strip — first child of .paywall, flush to the top (panel has padding:0).
   Mobile-first; desktop overrides in the min-width:768px block. */
.gh-content .paywall-strip {
  display: flex;
  align-items: center;
  width: 100%; /* the panel centres its flex children; force full width so the track can fill */
  gap: 12px;
  padding: 8px 20px;
  background: #000;
  text-align: left;
}

/* Tighter body padding only while the strip is present (scripts.js removes it otherwise). */
.gh-content .paywall-strip + .paywall-body {
  padding: 18px 28px 20px;
}

.gh-content .paywall-strip-label {
  flex: 0 0 auto;
  color: #fff;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}

.gh-content .paywall-strip-track {
  flex: 1 1 auto;
  height: 8px;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
}

/* Fill width is set by scripts.js; background comes inline from @site.accent_color. */
.gh-content .paywall-strip-fill {
  display: block;
  height: 100%;
  width: 0;
}

.gh-content .paywall-title {
  margin: 0;
  color: #fff;
  font-style: italic;
  font-weight: 900;
  font-size: 23px;
  line-height: 1.02;
  letter-spacing: -0.025em;
  /* Width drives wrapping (balanced) — no ch cap, so it only breaks when genuinely narrow. */
  text-wrap: balance;
  overflow-wrap: break-word;
}

.gh-content .paywall-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 20px;
}

/* Button text colour comes inline from @site.accent_color.
   Extra .gh-post-upgrade-cta qualifier beats Ghost's `.gh-post-upgrade-cta a.gh-btn`. */
.gh-content .gh-post-upgrade-cta .paywall-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  padding: 15px 26px;
  border-radius: 0;
  background: #fff;
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  white-space: nowrap;
}

.gh-content .paywall-signin {
  color: rgba(255, 255, 255, 0.92);
  font-size: 15px;
  font-weight: 500;
}
.gh-content .gh-post-upgrade-cta .paywall-signin a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Free email trap — inline magic-link field */
.gh-content .paywall-field {
  display: flex;
  justify-content: center;
  gap: 8px;
  max-width: 580px;
  margin: 14px auto 0;
}
.gh-content .paywall-field + .paywall-field {
  margin-top: 8px;
}

.gh-content .paywall-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: #000;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  box-shadow: 0 14px 30px -20px rgba(0, 0, 0, 0.6);
}
.gh-content .paywall-input::placeholder {
  color: #8a8a8a;
  font-weight: 500;
}
.gh-content .paywall-input:focus {
  outline: 0;
  box-shadow: inset 0 -3px 0 #1d00f5;
}

.gh-content .gh-post-upgrade-cta .paywall-submit {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 0;
  background: #000;
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 14px 30px -20px rgba(0, 0, 0, 0.6);
}
.gh-content .gh-post-upgrade-cta .paywall-submit:hover {
  background: #171717;
}

.gh-content .paywall-fine {
  margin: 10px auto 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
}
.gh-content .gh-post-upgrade-cta .paywall-fine a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Ghost toggles .error; [hidden] keeps it out until then. */
.gh-content .paywall-error {
  margin: 14px 0 0;
  font-size: 13px;
}
.gh-content .paywall-signup.error .paywall-error {
  display: block;
}

.gh-content .paywall-default .paywall-signin {
  display: block;
  margin-top: 10px;
}

/* Confirmation state — revealed by .success */
.gh-content .paywall-done {
  display: none;
  text-align: left;
}
.gh-content .paywall-signup.success .paywall-default {
  display: none;
}
.gh-content .paywall-signup.success .paywall-done {
  display: block;
}

.gh-content .paywall-done-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.gh-content .paywall-done-check {
  flex: 0 0 auto;
  display: flex;
  color: #fff;
}
.gh-content .paywall-done-check svg {
  width: 26px;
  height: 26px;
}
.gh-content .paywall-done-title {
  margin: 0;
  color: #fff;
  font-style: italic;
  font-weight: 900;
  font-size: 25px;
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.gh-content .paywall-done-copy {
  margin: 16px 0 0;
  max-width: 46ch;
  font-size: 15.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}
.gh-content .paywall-done-copy b {
  font-weight: 800;
  color: #fff;
}

.gh-content .paywall-done-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 22px;
}
.gh-content .gh-post-upgrade-cta .paywall-done-resend {
  padding: 13px 22px;
  border: 0;
  border-radius: 0;
  background: #fff;
  font-family: inherit;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
}
.gh-content .gh-post-upgrade-cta .paywall-done-resend:hover {
  background: #eeebfe;
}
.gh-content .gh-post-upgrade-cta .paywall-done-change {
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* Fixed teaser copy, blurred for effect — not the real body (that's stripped server-side).
   Markup carries aria-hidden + user-select:none. */
.gh-content .paywall-locked {
  max-width: 720px;
  margin-top: 10px;
  -webkit-mask-image: linear-gradient(#000 0 40%, transparent 92%);
  mask-image: linear-gradient(#000 0 40%, transparent 92%);
}
.gh-content .paywall-locked p {
  margin: 0 0 14px;
  filter: blur(3.4px);
  opacity: 0.5;
  user-select: none;
}
@media screen and (max-width: 767px) {
  /* Shorter ghosted tail on mobile; the fade mask hides the clip edge. */
  .gh-content .paywall-locked {
    max-height: 300px;
    overflow: hidden;
  }

  /* Stack the field row; let the disclaimer wrap. */
  .gh-content .paywall-field {
    flex-direction: column;
    max-width: none;
  }
  .gh-content .gh-post-upgrade-cta .paywall-submit {
    width: 100%;
  }
  .gh-content .paywall-fine {
    max-width: 42ch;
    font-size: 11px;
    white-space: normal;
  }
  .gh-content .paywall-done-title {
    font-size: 21px;
  }
  .gh-content .paywall-done-copy {
    font-size: 14.5px;
  }
}

@media screen and (min-width: 768px) {
  .gh-content .paywall-title {
    font-size: 27px;
  }

  .gh-content .paywall-strip {
    gap: 18px;
    padding: 9px 28px;
  }
  .gh-content .paywall-strip-label {
    font-size: 12px;
    letter-spacing: 0.18em;
  }

  /* Feature image: fixed 720px wide so layout stays consistent even if the
     uploaded image is smaller than the body text column. Tall uploads get
     center-cropped to 600px via object-fit so the layout stays predictable. */
  .gh-canvas .article-image {
    max-width: 720px;
  }
  .gh-canvas .article-image img {
    max-height: 600px;
    object-fit: cover;
  }
  /* "Full" admin option opts out of the 720px cap to span the full viewport. */
  .image-full .article-image {
    max-width: none;
  }
  .gh-content .kg-image-card {
    max-width: 800px;
  }
  .gh-content .kg-image-card img {
    max-width: 100%;
    width: auto;
    height: auto;
    margin-left: 0;
    margin-right: auto;
  }
  /* Editors: click the Wide button in Koenig's image toolbar to center an image. */
  .gh-content .kg-image-card.kg-width-wide img {
    margin-left: auto;
  }
}

.kg-image[width][height],
.kg-gallery-image {
  cursor: pointer;
}

.gh-content .kg-callout-card-accent a {
  text-decoration: underline;
}

.kg-blockquote-alt {
  /* font-family: var(--font-serif); */
  color: var(--color-text);
}

/* Pull quotes — Ghost's bundled CSS sets text-align: center without a max. */
.gh-content .kg-blockquote-alt {
  max-width: 720px;
}

.kg-card.kg-header-card.kg-style-dark {
  background: var(--color-darkgrey);
}

.kg-header-card.kg-style-light h2.kg-header-card-header {
  color: var(--color-text);
}

/* Captions */
figcaption {
  padding: 1.5rem 0 0;
  text-align: left;
  color: var(--color-text);
  font-size: var(--font-size-small);
  line-height: 1.4em;
  font-style: italic;
}
@media screen and (max-width: 767px) {
  .gh-canvas .article-image figcaption {
    padding-left: var(--outer-margin);
    padding-right: var(--outer-margin);
  }
}
figcaption span {
  max-width: 720px;
}

figcaption strong {
  color: var(--color-text);
}

figcaption a {
  text-decoration: underline;
}

@media screen and (min-width: 768px) {
  .kg-width-wide figcaption,
  .kg-width-full figcaption {
    width: calc(
      (100vw - 2 * var(--outer-margin) - 7 * var(--grid-gap)) / 8 * 6 + 5 * var(--grid-gap)
    );
    margin-left: auto;
    margin-right: auto;
  }
}
/* Highly specific styles for traditional Instagram embeds */
iframe.instagram-media {
  margin-top: 6vmin !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 0 !important;
}

iframe.instagram-media + script + :not([id]) {
  margin-top: 6vmin;
}

/* Card captions
/* ---------------------------------------------------------- */
.kg-width-full.kg-card-hascaption {
  display: grid;
  grid-template-columns: inherit;
}

.kg-width-wide.kg-card-hascaption img {
  grid-column: wide-start/wide-end;
}

.kg-width-full.kg-card-hascaption img {
  grid-column: 1/-1;
}

.kg-width-full.kg-card-hascaption figcaption {
  grid-column: main-start/main-end;
}

.article-comments {
  margin: 6vmin 0 0 0;
}

/* -----old------ */
.footnotes-sep {
  margin-bottom: 30px;
}

.footnotes {
  font-size: var(--font-size-small);
}

.footnotes p {
  margin: 0;
}

.footnote-backref {
  font-size: var(--font-size-small);
  font-weight: inherit;
  text-decoration: none !important;
  box-shadow: none !important;
}

/* Tables */
.gh-content table:not(.gist table) {
  display: inline-block;
  overflow-x: auto;
  max-width: 100%;
  width: auto;
  border-spacing: 0;
  border-collapse: collapse;
  /* font-family: var(--font-sans); */
  font-size: var(--font-size-small);
  white-space: nowrap;
  vertical-align: top;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,
    radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;
  background-attachment: scroll, scroll;
  background-size:
    10px 100%,
    10px 100%;
  background-repeat: no-repeat;
}

.gh-content table:not(.gist table) td:first-child {
  background-image: linear-gradient(to right, rgb(255, 255, 255) 50%, rgba(255, 255, 255, 0) 100%);
  background-size: 20px 100%;
  background-repeat: no-repeat;
}

.gh-content table:not(.gist table) td:last-child {
  background-image: linear-gradient(to left, rgb(255, 255, 255) 50%, rgba(255, 255, 255, 0) 100%);
  background-position: 100% 0;
  background-size: 20px 100%;
  background-repeat: no-repeat;
}

.gh-content table:not(.gist table) th {
  color: var(--color-text);
  font-size: var(--font-size-small);
  font-weight: inherit;
  letter-spacing: 0.2px;
  text-align: left;
  background-color: var(--color-background);
}

.gh-content table:not(.gist table) th,
.gh-content table:not(.gist table) td {
  padding: 6px 12px;
}

/* 6.1. Post Byline
/* ---------------------------------------------------------- */
.article-byline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
}

/* Cap to the body-text width so Share aligns with the text edge, not the far column edge */
@media (min-width: 768px) {
  .article-byline {
    max-width: 720px;
  }
}

.article-byline-content {
  flex-grow: 1;
  display: flex;
  align-items: center;
}

.article-byline-content .author-list {
  justify-content: flex-start;
  padding: 0 14px 0 0;
}

.article-byline-meta {
  color: var(--color-text);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  /* Hug text (override body 1.6em) so the centred Share button sits level */
  line-height: 1.2;
}

.article-byline-meta .byline-meta-date {
  display: inline;
  margin: 0;
}

.article-byline-meta .author-name {
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}

/* Centre the dot against the line so it aligns with the larger/bold news date */
.article-byline-meta .byline-sep {
  align-self: center;
  opacity: 0.5;
}

.article-byline-meta .author-name a:hover,
.article-byline-meta .author-name a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.article-byline-meta .bull {
  display: inline-block;
  margin: 0 2px;
}

/* News primary-tag posts get a dateline-style emphasis to satisfy the
   habit editors are reaching for when they retype the date in the body. */
.byline-meta-date--news {
  font-size: 1.125em;
  font-weight: 700;
  line-height: 1.2;
}

.article-share {
  flex-shrink: 0;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-small);
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  padding: 0.25em 0.55em;
  border: 1px solid color-mix(in srgb, currentColor 55%, transparent);
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.article-share .icon {
  width: 15px;
  height: 15px;
}

.article-share:hover,
.article-share:focus-visible {
  color: var(--color-highlight);
  border-color: currentColor;
  box-shadow: inset 0 0 0 1px currentColor;
  text-decoration: none;
}

/* Width matches the 720px body-text column */
.article-footer-share {
  max-width: 720px;
  margin-top: max(6.4vmin, 40px);
  padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
}

.article-footer-share-label {
  font-size: var(--font-size-small);
  font-weight: 400;
}

.article-share-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Override global li margin/padding that breaks row alignment */
.article-share-list li {
  margin: 0;
  padding: 0;
  line-height: 0;
}

.article-share-list a,
.article-share-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 5px 4px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  background: none;
  border: 0;
  /* Transparent border reserves space so hover doesn't shift the row */
  border-bottom: 2px solid transparent;
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
  cursor: pointer;
}

.article-share-list a:hover,
.article-share-list a:focus-visible,
.article-share-copy:hover,
.article-share-copy:focus-visible {
  color: var(--color-text);
  border-bottom-color: currentColor;
}

.article-share-list .icon {
  display: block;
  width: 18px;
  height: 18px;
}

/* Normalise sizes — these glyphs fill their viewBox differently */
.article-share-list .share-reddit .icon,
.article-share-list .share-linkedin .icon {
  width: 16px;
  height: 16px;
}

.article-share-list .share-email .icon,
.article-share-list .article-share-copy .icon {
  width: 20px;
  height: 20px;
}

.article-share-copy {
  position: relative;
}

.article-share-copy::after {
  content: "Copied!";
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 7px;
  border-radius: 3px;
  /* Fixed dark pill, not the page's --color-text/--color-background: those flip per tag
     (e.g. body.tag-news) and aren't a guaranteed contrasting pair on post pages. */
  background: var(--color-darkgrey);
  color: #fff;
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.article-share-copy.is-copied::after {
  opacity: 1;
}

/* Swap the link glyph for a checkmark while "Copied!" shows */
.article-share-copy .icon-check {
  display: none;
}
.article-share-copy.is-copied .icon:not(.icon-check) {
  display: none;
}
.article-share-copy.is-copied .icon-check {
  display: block;
}

/* Address-led byline, pin posts only (ADR 0007). Display rules scoped under the modifier so [hidden] wins on non-pin posts. */
.article-byline-address {
  margin: 0;
}
.article-byline-bull {
  display: none;
}
.article-byline--food-map {
  margin-top: -16px;
}
.article-byline--food-map .article-byline-content {
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.article-byline--food-map .article-byline-address {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.article-byline--food-map .article-byline-address-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text);
}
.article-byline--food-map .article-byline-address-link:hover,
.article-byline--food-map .article-byline-address-link:focus-visible {
  outline: none;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.article-byline--food-map .article-byline-address-pin {
  flex-shrink: 0;
  opacity: 0.7;
}
.article-byline--food-map .article-byline-map-cta {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 55%, transparent);
  font-size: 0.85em;
  background: transparent;
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.article-byline--food-map .article-byline-map-cta:hover,
.article-byline--food-map .article-byline-map-cta:focus-visible {
  outline: none;
  text-decoration: none;
  color: var(--color-highlight);
  border-color: currentColor;
  box-shadow: inset 0 0 0 1px currentColor;
}

.author-avatar {
  display: block;
  overflow: hidden;
  margin: 0 -4px;
  width: min(56px, 13.6vmin);
  height: min(56px, 13.6vmin);
  border: #fff 2px solid;
  border-radius: 50%;
  background-color: var(--color-background);
}

.page-template .article-title {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .article-byline-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .article-byline-content .author-list {
    padding-right: 12px;
  }
  /* Stack author and date, no separator dot */
  .article-byline-meta {
    flex-direction: column;
    align-items: flex-start;
  }
  .article-byline-meta .byline-sep {
    display: none;
  }
}
/* Suppress footer CTA when an embedded card duplicates the variant the viewer would see. */
body:not(.is-member) main:has(.gh-content .kg-signup-card) .call-to-action.banner,
body.is-member
  main:has(.gh-content .kg-cta-content a[href*="buy.stripe.com"])
  .call-to-action.banner {
  display: none;
}

/* 6.2. Read more
/* ---------------------------------------------------------- */
.read-more-wrap {
  margin-top: 2.4vmin;
}

.call-to-action.banner + .read-more-wrap {
  margin-top: max(12vmin, 72px);
}

.read-more {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: var(--grid-gap);
}
/* Override .post-card's global span 2 so cards stay one cell wide here. */
.read-more > .post-card {
  grid-column: span 1;
}

@media (max-width: 1279px) {
  .read-more {
    grid-template-columns: repeat(3, 1fr);
  }
  .read-more .post-card:nth-child(4) {
    display: none;
  }
}
@media (max-width: 1023px) {
  .read-more {
    grid-template-columns: repeat(2, 1fr);
  }
  .read-more .post-card:nth-child(3) {
    display: none;
  }
}
@media (max-width: 767px) {
  .read-more {
    grid-template-columns: 1fr;
    row-gap: 6vmin;
  }
}
/* 6.4. Comments
/* ---------------------------------------------------------- */
.comments {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 60px 0 44px;
}

.comments-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 32px;
  width: 100%;
  max-width: 720px;
}

.comments h2 {
  width: 100%;
  max-width: 720px;
  font-weight: inherit;
  font-size: var(--font-size-small);
}

.comments .comment-count {
  color: var(--color-text);
  font-weight: inherit;
  white-space: nowrap;
}

.comments #ghost-comments-root {
  width: 100%;
  max-width: 720px;
}

/* 7. Author Template
/* ---------------------------------------------------------- */
.author-profile .post-card-content-link {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

@media (min-width: 600px) {
  .author-profile .post-card-content-link {
    flex-direction: row;
  }
}

.author-profile-text {
  flex: 1 1 auto;
  min-width: 0;
}

.author-profile-pic {
  display: block;
  width: 96px;
  height: 96px;
  flex: 0 0 auto;
  -o-object-fit: cover;
  object-fit: cover;
  margin: 0;
  border-radius: 50%;
}

.author-profile-name {
  margin: 0 0 16px;
}

.author-profile-bio {
  margin-top: 0;
  margin-bottom: 20px;
  max-width: 640px;
  font-size: var(--font-size-small);
  line-height: 1.5;
}

.author-profile-footer {
  margin-top: 8px;
}

.author-profile-location {
  margin-bottom: 8px;
  font-weight: inherit;
  color: var(--color-secondary-text, var(--color-text));
}

.author-profile-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.author-profile-social-link {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-small);
  color: var(--color-text);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease;
}

.author-profile-social-link:hover,
.author-profile-social-link:focus-visible {
  border-bottom-color: currentColor;
}

.author-profile-social-link svg {
  width: 18px;
  height: 18px;
}

/* Website link is text — match footer text-link convention */
.author-profile-website {
  padding-bottom: 0;
  border-bottom: 0;
}

.author-profile-website:hover,
.author-profile-website:focus-visible {
  border-bottom: 0;
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (min-width: 1001px) {
  .author-template .post-card-large .post-card-content {
    grid-column: span 2;
    max-width: 800px;
  }
}
/* 8. Tag Template
/* ---------------------------------------------------------- */
.tag-template .post-card-large .post-card-image-link {
  grid-column: 2 / span 2;
  order: 2;
}

.tag-template .post-card-large .post-card-content {
  order: 1;
}

@media (min-width: 1001px) {
  .tag-template .post-card-large .post-card-content:only-child {
    grid-column: span 2;
    max-width: 640px;
  }
}
/* 9. Error Templates
/* ---------------------------------------------------------- */
/* 9.1. 404 — crime-scene poster on rouge carmin, same system as the podcast page */
/* header + footer repaint too (error routes get no body class) */
body:has(.error-404) {
  --color-background: var(--color-rouge-carmin);
  /* logo and a:hover default to black, which fails contrast on carmin */
  --color-highlight: var(--color-ocre-jaune-clair);
}

.error-404 {
  overflow: hidden;
  padding: max(6vmin, 40px) 0 max(8vmin, 56px);
}

.error-404-scene {
  text-align: center;
}

.error-404-flag {
  display: inline-block;
  margin: 0;
  padding: 4px 16px;
  background: var(--color-ocre-jaune-clair);
  color: black;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(13px, 1.5vw, 18px);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  transform: rotate(-2deg);
}

.error-404-display {
  margin: 0;
  color: var(--color-blanc-ivoire);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(110px, 24vw, 280px);
  line-height: 0.9;
  letter-spacing: -0.045em;
}

.error-404-display .out {
  color: transparent;
  -webkit-text-stroke: 4px var(--color-blanc-ivoire);
}

.error-404-lede {
  max-width: 44ch;
  margin: 20px auto 0;
  color: var(--color-blanc-ivoire);
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 600;
  line-height: 1.4;
}

.error-404-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

/* transparent border at rest so the hover frame doesn't shift layout */
.error-404-actions a,
.error-404-actions button {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  border: 2px solid transparent;
  background: var(--color-blanc-ivoire);
  color: var(--color-rouge-carmin);
  font-style: italic;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 3px 3px 0 black;
  transition:
    transform 0.12s ease-out,
    box-shadow 0.12s ease-out,
    background-color 0.12s ease-out,
    color 0.12s ease-out;
}

.error-404-actions a:hover,
.error-404-actions a:focus-visible,
.error-404-actions button:hover,
.error-404-actions button:focus-visible {
  background: var(--color-rouge-carmin);
  border-color: var(--color-blanc-ivoire);
  color: var(--color-blanc-ivoire);
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 black;
}

.error-404-actions a:focus-visible,
.error-404-actions button:focus-visible {
  outline: 2px solid var(--color-blanc-ivoire);
  outline-offset: 2px;
}

/* the lift is decorative; colour changes carry the state on their own */
@media (prefers-reduced-motion: reduce) {
  .error-404-actions a,
  .error-404-actions button {
    transition: none;
  }
  .error-404-actions a:hover,
  .error-404-actions a:focus-visible,
  .error-404-actions button:hover,
  .error-404-actions button:focus-visible {
    transform: none;
  }
}

.error-404 .section-label {
  margin: max(8vmin, 48px) 0 24px;
  color: var(--color-ocre-jaune-clair);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* 9.2. 400/500 (error.hbs) — stays plain; that template must be dependency-free */
.error-content {
  padding: 14vw 4vw 2vw;
}

.error-message {
  padding-bottom: 10vw;
  text-align: center;
}

.error-code {
  margin: 0;
  font-size: var(--font-size-large);
  line-height: 1em;
  letter-spacing: -5px;
  text-align: center;
}

.error-description {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-small);
  line-height: 1.3em;
  letter-spacing: -0.005em;
  font-weight: inherit;
}

.error-link {
  display: inline-block;
  margin-top: 5px;
}

@media (max-width: 800px) {
  .error-content {
    padding-top: 24vw;
  }
  .error-code {
    font-size: var(--font-size-small);
  }
  .error-message {
    padding-bottom: 16vw;
  }
  .error-description {
    margin: 5px 0 0 0;
    font-size: var(--font-size-small);
  }
}
@media (max-width: 500px) {
  .error-content {
    padding-top: 28vw;
  }
  .error-message {
    padding-bottom: 14vw;
  }
}
/* 10. Site Footer
/* ---------------------------------------------------------- */
.site-footer {
  position: relative;
  width: 100%;
  margin: max(8vmin, 32px) 0 0 0;
  padding: 32px calc(var(--outer-margin) * 2);
  color: var(--color-text);
}

.page-template .site-footer {
  margin-top: 0;
}

.site-footer .inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  color: var(--color-text);
  font-size: var(--font-size-small);
}

@media (min-width: 800px) {
  .site-footer {
    margin-top: 48px;
    padding: 48px calc(var(--outer-margin) * 2);
  }
}

.site-footer-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.site-footer-columns {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.site-footer-column-heading {
  margin: 0 0 16px 0;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight);
  color: var(--color-text);
  letter-spacing: -0.015em;
}

.site-footer-column-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer-column-list li {
  margin: 0;
  padding: 0;
}

@media (max-width: 799px) {
  .site-footer-column {
    border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
  }
  .site-footer-column:last-of-type {
    border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
  }
  .site-footer-column-heading {
    margin: 0;
    font-size: 20px;
  }
  .site-footer-column-heading button {
    background: none;
    border: 0;
    margin: 0;
    padding: 20px 0;
    width: 100%;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .site-footer-column-heading button::after {
    content: "";
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    margin-top: -4px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
  }
  .site-footer-column.is-open .site-footer-column-heading button::after {
    margin-top: 4px;
    transform: rotate(-135deg);
  }
  .site-footer-column-list {
    display: none;
  }
  .site-footer-column.is-open .site-footer-column-list {
    display: flex;
    padding-bottom: 20px;
  }
}

@media (min-width: 800px) {
  .site-footer-main {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .site-footer-columns {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--grid-gap);
  }
}

.site-footer a {
  color: var(--color-link);
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.site-footer-social {
  flex: 0 0 auto;
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  align-self: center;
  justify-content: center;
  width: 100%;
}

.site-footer-social li {
  margin: 0;
  padding: 0;
}

.site-footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease;
}

.site-footer-social-link svg {
  width: 28px;
  height: 28px;
}

@media (min-width: 800px) {
  .site-footer-social {
    gap: 16px;
    align-self: auto;
    justify-content: flex-end;
    width: auto;
  }
  .site-footer-social-link svg {
    width: 20px;
    height: 20px;
  }
}

.site-footer-social-link:hover,
.site-footer-social-link:focus-visible {
  border-bottom-color: currentColor;
  text-decoration: none;
}

.site-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
  font-size: var(--font-size-extrasmall);
  color: var(--color-text);
}

.site-footer-copyright a,
.site-footer-powered-by a {
  color: inherit;
}

.site-footer-copyright a {
  letter-spacing: -0.015em;
  font-weight: inherit;
}
/* 11. Lightbox
/* ---------------------------------------------------------- */
.pswp {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3999999;
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: none;
  outline: none;
  backface-visibility: hidden;
  -webkit-text-size-adjust: 100%;
}

.pswp img {
  max-width: none;
}

.pswp--animate_opacity {
  opacity: 0.001;
  transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
  will-change: opacity;
}

.pswp--open {
  display: block;
}

.pswp--zoom-allowed .pswp__img {
  cursor: zoom-in;
}

.pswp--zoomed-in .pswp__img {
  cursor: grab;
}

.pswp--dragging .pswp__img {
  cursor: grabbing;
}

.pswp__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-background);
  opacity: 0;
  transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: opacity;
}

.pswp__scroll-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.pswp__container,
.pswp__zoom-wrap {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  touch-action: none;
  backface-visibility: hidden;
}

.pswp__container,
.pswp__img {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: var(--color-background);
  -webkit-touch-callout: none;
}

.pswp__zoom-wrap {
  position: absolute;
  width: 100%;
  transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
  transform-origin: left top;
}

.pswp--animated-in .pswp__bg,
.pswp--animated-in .pswp__zoom-wrap {
  transition: none;
}

.pswp__item {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

.pswp__img {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
}

.pswp__img--placeholder {
  backface-visibility: hidden;
}

.pswp__img--placeholder--blank {
  background: #000;
}

.pswp--ie .pswp__img {
  top: 0;
  left: 0;
  width: 100% !important;
  height: auto !important;
}

.pswp__error-msg {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  margin-top: -8px;
  font-size: var(--font-size-small);
  line-height: 16px;
  color: var(--color-text);
  text-align: center;
}

.pswp__error-msg a {
  color: var(--color-text);
  text-decoration: underline;
}

.pswp__button {
  position: relative;
  display: block;
  float: right;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  overflow: visible;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  background: none;
  border: 0;
  box-shadow: none;
  transition: opacity 0.2s;
}

.pswp__button:focus,
.pswp__button:focus-visible,
.pswp__button:hover {
  opacity: 1;
  outline: 1px solid currentColor;
  outline-offset: 2px;
}

.pswp__button:active {
  outline: none;
  opacity: 0.9;
}

.pswp__button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.pswp__ui--over-close .pswp__button--close {
  opacity: 1;
}

.pswp__button,
.pswp__button--arrow--left::before,
.pswp__button--arrow--right::before {
  width: 44px;
  height: 44px;
  background: url("../images/default-skin.png") 0 0 no-repeat;
  background-size: 264px 88px;
}

@media (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
  .pswp--svg .pswp__button,
  .pswp--svg .pswp__button--arrow--left::before,
  .pswp--svg .pswp__button--arrow--right::before {
    background-image: url("../images/default-skin.svg");
  }
  .pswp--svg .pswp__button--arrow--left,
  .pswp--svg .pswp__button--arrow--right {
    background: none;
  }
}
.pswp__button--close {
  background-position: 0 -44px;
}

.pswp__button--share {
  background-position: -44px -44px;
}

.pswp__button--fs {
  display: none;
}

.pswp--supports-fs .pswp__button--fs {
  display: block;
}

.pswp--fs .pswp__button--fs {
  background-position: -44px 0;
}

.pswp__button--zoom {
  display: none;
  background-position: -88px 0;
}

.pswp--zoom-allowed .pswp__button--zoom {
  display: block;
}

.pswp--zoomed-in .pswp__button--zoom {
  background-position: -132px 0;
}

.pswp--touch .pswp__button--arrow--left,
.pswp--touch .pswp__button--arrow--right {
  visibility: hidden;
}

.pswp__button--arrow--left,
.pswp__button--arrow--right {
  position: absolute;
  top: 50%;
  width: 70px;
  height: 100px;
  margin-top: -50px;
  background: none;
}

.pswp__button--arrow--left {
  left: 0;
}

.pswp__button--arrow--right {
  right: 0;
}

.pswp__button--arrow--left::before,
.pswp__button--arrow--right::before {
  position: absolute;
  top: 35px;
  width: 32px;
  height: 30px;
  content: "";
}

.pswp__button--arrow--left::before {
  left: 6px;
  background-position: -138px -44px;
}

.pswp__button--arrow--right::before {
  right: 6px;
  background-position: -94px -44px;
}

.pswp__counter {
  position: absolute;
  top: 0;
  left: 0;
  height: 44px;
  padding: 0 15px;
  font-size: var(--font-size-small);
  font-weight: inherit;
  line-height: 44px;
  color: var(--color-text);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pswp__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  min-height: 44px;
}

.pswp__caption__center {
  max-width: 420px;
  padding: 25px 15px 30px;
  margin: 0 auto;
  font-size: var(--font-size-small);
  line-height: 1.6;
  color: var(--color-text);
  text-align: center;
}

.pswp__caption__center .post-caption-title {
  margin-bottom: 7px;
  font-size: var(--font-size-small);
  font-weight: inherit;
  text-transform: uppercase;
}

.pswp__caption__center .post-caption-meta-item + .post-caption-meta-item::before {
  padding: 0 4px;
  content: "•";
}

.pswp__caption--empty {
  display: none;
}

.pswp__caption--fake {
  visibility: hidden;
}

.pswp__preloader {
  position: absolute;
  top: 0;
  left: 50%;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  opacity: 0;
  transition: opacity 0.25s ease-out;
  direction: ltr;
  will-change: opacity;
}

.pswp__preloader__icn {
  width: 20px;
  height: 20px;
  margin: 12px;
}

.pswp__preloader--active {
  opacity: 1;
}

.pswp__preloader--active .pswp__preloader__icn {
  background: url("../images/preloader.gif") 0 0 no-repeat;
}

.pswp--css_animation .pswp__preloader--active {
  opacity: 1;
}

.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
  animation: clockwise 500ms linear infinite;
}

.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
  animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
}

.pswp--css_animation .pswp__preloader__icn {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 14px;
  height: 14px;
  margin: 0;
  background: none;
  opacity: 0.75;
}

.pswp--css_animation .pswp__preloader__cut {
  position: relative;
  width: 7px;
  height: 14px;
  overflow: hidden;
}

.pswp--css_animation .pswp__preloader__donut {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  margin: 0;
  background: none;
  border: 2px solid #fff;
  border-bottom-color: var(--color-background);
  border-left-color: var(--color-background);
  border-radius: 50%;
}

@media screen and (max-width: 1024px) {
  .pswp__preloader {
    position: relative;
    top: auto;
    left: auto;
    float: right;
    margin: 0;
  }
}
@keyframes clockwise {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes donut-rotate {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(-140deg);
  }
  100% {
    transform: rotate(0);
  }
}
.pswp__ui {
  z-index: 1550;
  visibility: visible;
  opacity: 1;
  -webkit-font-smoothing: auto;
}

.pswp__top-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 44px;
}

.pswp__caption,
.pswp__top-bar,
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
  backface-visibility: hidden;
  transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
  will-change: opacity;
}

.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
  visibility: visible;
}

.pswp__ui--idle .pswp__top-bar {
  opacity: 0;
}

.pswp__ui--idle .pswp__button--arrow--left,
.pswp__ui--idle .pswp__button--arrow--right {
  opacity: 0;
}

.pswp__ui--hidden .pswp__top-bar,
.pswp__ui--hidden .pswp__caption,
.pswp__ui--hidden .pswp__button--arrow--left,
.pswp__ui--hidden .pswp__button--arrow--right {
  opacity: 0.001;
}

.pswp__ui--one-slide .pswp__button--arrow--left,
.pswp__ui--one-slide .pswp__button--arrow--right,
.pswp__ui--one-slide .pswp__counter {
  display: none;
}

.pswp__element--disabled {
  display: none !important;
}

.pswp--minimal--dark .pswp__top-bar {
  background: none;
}

/* Signup form
/* ---------------------------------------------------------- */
.signup-section {
  padding: 40px 0;
}

.signup-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.signup-fields {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 480px;
}

.signup-email {
  flex: 1;
  padding: 10px 16px;
  font-size: var(--font-size-small);
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-text);
}

.signup-email::-moz-placeholder {
  color: var(--color-text);
}

.signup-email::placeholder {
  color: var(--color-text);
}

.signup-email:focus {
  background: rgba(255, 255, 255, 0.2);
  border-color: var(--color-background);
  outline: none;
}

.signup-button {
  padding: 10px 24px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--font-size-small);
  font-weight: inherit;
  color: var(--color-text);
  background: #fff;
  cursor: pointer;
  white-space: nowrap;
}

.signup-button:hover,
.signup-button:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 2px;
}

.signup-success,
.signup-error {
  display: none;
  font-size: var(--font-size-small);
  color: var(--color-text);
}

.signup-form.success .signup-fields,
.signup-form.error .signup-fields {
  display: none;
}

.signup-form.success .signup-success {
  display: block;
}

.signup-form.error .signup-error {
  display: block;
}

@media (max-width: 500px) {
  .signup-fields {
    flex-direction: column;
  }
}
/* Ghost Signup card — input has a light background set by the card,
   so force a dark text color so typed text stays legible on pages
   where --color-text is white (for example, /sign-up/). */
.kg-signup-card input[type="email"] {
  color: var(--color-darkgrey);
}
/* ----- */
.tag-archive .featured article h2 {
  font-size: var(--font-size-medium);
  line-height: var(--line-height-medium);
}
.tag-archive .news-archive article time,
.tag-archive .news-archive article .post-card-meta-length,
.tag-archive .news-archive article .post-card-excerpt {
  font-size: var(--font-size-extrasmall);
  line-height: var(--line-height-text);
  letter-spacing: 0.03em;
}

:root {
  /* Polychromie — declared on first use (see docs/colour-palette.md). */
  --color-vert-anglais: #2c695a;
  --color-outremer-clair: #b3c8cd;
  --color-ceruleen-pale: #cad8cd;
  --color-rouge-carmin: #811c35;
  --color-terre-sienne-brulee-59: #69372b;
  --color-rose-vif: #de8da0;
  --color-blanc-ivoire: #fffceb;
  --color-bleu-outremer-31: #4e6498;
  --color-ocre-jaune-clair: #f2b573;
  --color-ombre-naturelle: #333230;
  --color-gris-fonce-59: #4a535b;

  /* Off-palette — declared on first use (see docs/colour-palette.md). */
  --color-green: #a4d037;
  --color-yellow: #fecd35;
  --color-red: #f05230;
  --color-darkgrey: #15171a;
  --color-midgrey: #d4b8ba;
  --color-lightgrey: rgba(255, 255, 255, 0.15);
  --color-secondary-text: #e0c8ca;
  --color-border: rgba(255, 255, 255, 0.15);
  --color-wash: #7a4f53;
  --color-darkmode: #151719;
  --color-background: #4a412a;
  --color-text: white;
  --color-highlight: black;
  --color-link: white;
  --color-primary-button-background: blue;
  --color-primary-button-text: white;
  --color-tag-background-default: gray;
}

.home-template {
  --color-highlight: DeepPink;
}

article.post-card.tag-hash-highlight h2 a {
  color: var(--color-highlight);
}

.gh-head-menu ul.nav li a {
  background: var(--color-tag-background-default);
  color: white;
}
.gh-head-menu ul.nav li.nav-home a {
  background-color: var(--color-background);
}
.gh-head-menu ul.nav li.nav-news a {
  background-color: #d399ad;
  color: black;
}
.gh-head-menu ul.nav li.nav-features a {
  background-color: #ffffff;
  color: black;
}
.gh-head-menu ul.nav li.nav-weekend a {
  background-color: #8e2848;
}
.gh-head-menu ul.nav li.nav-about a {
  background-color: #9c411a;
}
.gh-head-menu ul.nav li.nav-interviews a {
  background-color: #2c695a;
}
.gh-head-menu ul.nav li.nav-podcast a {
  background-color: #bfe27e;
  color: black;
}
.gh-head-menu ul.nav li.nav-food-map a {
  background-color: #142b4d; /* Dusk, matches the map shell's --brut-bg */
}

.tag-features a.post-card-primary-tag {
  color: black;
}

body.tag-features {
  --color-text: black;
  --color-highlight: black;
  --color-link: black;
}

.tag-news a.post-card-primary-tag {
  color: black;
}

body.tag-news {
  --color-text: black;
  --color-highlight: red;
  --color-link: black;
}

body.tag-weekend {
  --color-highlight: black;
}

/* Cookie consent (Klaro!)
/* ---------------------------------------------------------- */
.klaro {
  font-family: var(--font-sans);
  font-size: var(--font-size-small);
  line-height: var(--line-height-text);
  color: white;
}

.klaro a {
  color: white;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.klaro a:hover,
.klaro a:focus-visible {
  text-decoration-thickness: 2px;
}

.klaro em {
  font-style: italic;
}

.klaro .cookie-notice {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 16px calc(var(--outer-margin) * 2);
  background: var(--color-darkgrey);
  border-top: 1px solid color-mix(in srgb, white 15%, transparent);
}

@media (max-width: 799px) {
  .klaro .cookie-notice {
    padding: 16px var(--outer-margin);
  }
}

.klaro .cookie-notice .cn-body {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "description ok"
    "changes     ok";
  gap: 4px 64px;
  align-items: center;
}

@media (max-width: 799px) {
  .klaro .cookie-notice .cn-body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "description"
      "changes"
      "ok";
    row-gap: 0;
  }

  /* Tight under description (related text), generous before buttons. */
  .klaro .cookie-notice .cn-body > p.cn-changes {
    margin-top: 4px;
  }

  .klaro .cookie-notice .cn-body > .cn-ok {
    margin-top: 20px;
  }

  /* Stack: buttons on top (Reject + Accept), Manage settings underneath.
     column-reverse flips the DOM order (Manage settings is first child). */
  .klaro .cookie-notice .cn-ok {
    flex-direction: column-reverse;
    align-items: center;
    gap: 10px;
  }

  .klaro .cookie-notice .cn-buttons {
    justify-content: center;
  }
}

.klaro .cookie-notice .cn-body > p {
  grid-area: description;
  margin: 0;
  color: white;
}

.klaro .cookie-notice .cn-body > p.cn-changes {
  grid-area: changes;
  font-size: var(--font-size-extrasmall);
  opacity: 0.7;
}

.klaro .cookie-notice .cn-body > .cn-ok {
  grid-area: ok;
}

.klaro .cookie-notice .cn-ok,
.klaro .cookie-notice .cn-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}

/* Buttons — share .gh-head-button geometry. Reject visually equal to Accept (EDPB 05/2020). */
.klaro .cm-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 8px 24px;
  height: 44px;
  font-family: inherit;
  font-size: var(--font-size-small);
  font-weight: inherit;
  letter-spacing: -0.005em;
  background: transparent;
  color: white;
  border: 1px solid white;
  cursor: pointer;
}

.klaro .cm-btn:hover,
.klaro .cm-btn:focus-visible {
  outline: 1px solid white;
  outline-offset: 2px;
}

.klaro .cm-btn.cm-btn-success,
.klaro .cm-btn.cm-btn-accept,
.klaro .cm-btn.cm-btn-accept-all {
  background: var(--color-primary-button-background);
  color: var(--color-primary-button-text);
  border-color: var(--color-primary-button-background);
}

/* "Manage settings" — text link, not button; secondary weight. */
.klaro .cn-learn-more {
  background: transparent;
  border: 0;
  padding: 0;
  height: auto;
  font: inherit;
  color: white;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.klaro .cn-learn-more:hover,
.klaro .cn-learn-more:focus-visible {
  text-decoration-thickness: 2px;
  outline: 0;
}

/* Modal */
.klaro .cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  padding: var(--outer-margin);
}

@media (min-width: 800px) {
  .klaro .cookie-modal {
    align-items: center;
  }
}

.klaro .cookie-modal .cm-modal {
  width: 100%;
  max-width: 600px;
  max-height: calc(100vh - calc(var(--outer-margin) * 2));
  overflow-y: auto;
  background: var(--color-darkgrey);
  color: white;
  border: 1px solid color-mix(in srgb, white 15%, transparent);
}

/* Header */
.klaro .cookie-modal .cm-header {
  position: relative;
  padding: 24px 32px;
  border-bottom: 1px solid color-mix(in srgb, white 15%, transparent);
}

.klaro .cookie-modal .cm-header h1 {
  margin: 0 40px 8px 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-medium);
  font-weight: var(--font-weight);
  letter-spacing: -0.015em;
  color: white;
}

.klaro .cookie-modal .cm-header h1 .title {
  font-family: inherit;
  font-weight: inherit;
}

.klaro .cookie-modal .cm-header p {
  margin: 0;
  color: color-mix(in srgb, white 70%, transparent);
  font-size: var(--font-size-extrasmall);
  line-height: var(--line-height-text);
}

.klaro .cookie-modal .cm-header .hide {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 0;
  color: white;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.klaro .cookie-modal .cm-header .hide:hover,
.klaro .cookie-modal .cm-header .hide:focus-visible {
  outline: 1px solid white;
  outline-offset: 2px;
}

/* Klaro renders the X as two <line> elements without a stroke attribute;
   set it explicitly so the icon is visible on the dark modal. */
.klaro .cookie-modal .cm-header .hide svg {
  stroke: white;
}

/* Body — strip <ul> defaults across the whole modal */
.klaro .cookie-modal .cm-body,
.klaro .cookie-modal .cm-purposes,
.klaro .cookie-modal .cm-services,
.klaro .cookie-modal ul,
.klaro .cookie-modal li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.klaro .cookie-modal .cm-purpose {
  padding: 20px 32px;
  border-bottom: 1px solid color-mix(in srgb, white 15%, transparent);
}

.klaro .cookie-modal .cm-purpose:last-child {
  border-bottom: 0;
}

/* Service list inside an expanded purpose — subtle left rail instead of indent */
.klaro .cookie-modal .cm-services {
  display: block;
  margin-top: 16px;
  padding-left: 16px;
  border-left: 2px solid color-mix(in srgb, white 10%, transparent);
}

.klaro .cookie-modal .cm-service {
  padding: 12px 0;
  border-top: 1px solid color-mix(in srgb, white 10%, transparent);
}

.klaro .cookie-modal .cm-service:first-child {
  border-top: 0;
  padding-top: 4px;
}

/* Title row: name (grows) + (required tag) + toggle (end) */
.klaro .cookie-modal .cm-list-label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.klaro .cookie-modal .cm-list-title {
  flex: 1;
  font-family: var(--font-sans);
  font-size: var(--font-size-small);
  font-weight: bold;
  color: white;
  line-height: 1.3;
}

.klaro .cookie-modal .cm-required {
  font-size: var(--font-size-extrasmall);
  font-weight: normal;
  font-style: italic;
  color: color-mix(in srgb, white 70%, transparent);
  margin-left: 4px;
}

.klaro .cookie-modal .cm-list-description {
  margin-top: 6px;
  color: color-mix(in srgb, white 70%, transparent);
  font-size: var(--font-size-extrasmall);
  line-height: var(--line-height-text);
}

/* The redundant "Purpose: X" line and the per-purpose expander
   (services are always shown — see .cm-services above). */
.klaro .cookie-modal .cm-service .purposes,
.klaro .cookie-modal .cm-purpose > .purposes,
.klaro .cookie-modal .cm-caret {
  display: none;
}

/* Hide the inner service row when a purpose contains only one required service
   (e.g. Essential). The purpose-level toggle is the meaningful affordance;
   the indented service entry just duplicates it. */
.klaro .cookie-modal .cm-purpose:has(.cm-service:only-child .cm-list-input[disabled]) .cm-services {
  display: none;
}

/* Toggle switch — replaces the native checkbox.
   Klaro renders the <input> as the previous sibling of the <label>, so the
   visual state is driven via `.cm-list-input:checked + .cm-list-label .slider`.
   The `.active` class on .slider is always present and is NOT the state. */
.klaro .cookie-modal .cm-list-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Switch track */
.klaro .cookie-modal .cm-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex: 0 0 auto;
}

/* Slider fills the track, knob is the ::before pseudo */
.klaro .cookie-modal .cm-switch .slider {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, white 20%, transparent);
  border-radius: 999px;
  transition: background 0.15s ease;
}

.klaro .cookie-modal .cm-switch .slider::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  transition: transform 0.15s ease;
}

/* On state — input is checked */
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider {
  background: var(--color-primary-button-background);
}

.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider::before {
  transform: translateX(16px);
}

/* Focus ring */
.klaro .cookie-modal .cm-list-input:focus-visible + .cm-list-label .slider {
  outline: 2px solid white;
  outline-offset: 2px;
}

/* Disabled (required services — always on, can't be unchecked) */
.klaro .cookie-modal .cm-list-input[disabled] + .cm-list-label .slider {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Footer */
.klaro .cookie-modal .cm-footer {
  padding: 20px 32px;
  border-top: 1px solid color-mix(in srgb, white 15%, transparent);
}

.klaro .cookie-modal .cm-footer-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

.klaro .cookie-modal .cm-powered-by {
  margin-top: 12px;
  font-size: var(--font-size-extrasmall);
  text-align: center;
  color: color-mix(in srgb, white 70%, transparent);
}

.klaro .cookie-modal .cm-powered-by a {
  color: inherit;
  text-decoration: none;
}

/* Footer "Cookie preferences" link */
.site-footer-cookie-preferences {
  display: inline-flex;
  align-items: center;
}

.site-footer-cookie-link {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.site-footer-cookie-link:hover,
.site-footer-cookie-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* /sign-up/ page */
.signup-page {
  --sp-fg: var(--color-blanc-ivoire);
  --sp-muted: var(--color-ceruleen-pale);
  --sp-accent: var(--color-ocre-jaune-clair);
  --sp-hair: rgba(246, 241, 226, 0.18);
  background: var(--color-gris-fonce-59);
  color: var(--sp-fg);
  font-family: var(--font-sans);
}
.signup-page ::selection {
  background: var(--color-rose-vif);
  color: var(--color-ombre-naturelle);
}

/* Green ground, scoped to this page (global chrome untouched). */
body:has(.signup-page) {
  background-color: var(--color-gris-fonce-59);
}
body:has(.signup-page) .gh-head {
  background-color: var(--color-gris-fonce-59);
}
body:has(.signup-page) .gh-search,
body:has(.signup-page) .gh-burger {
  background-color: transparent;
}
/* Logo defaults to black — unreadable on the green ground. */
body:has(.signup-page) .logo,
body:has(.signup-page) .logo a {
  color: var(--color-blanc-ivoire);
}

.signup-page-wrap {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 56px;
}
@media (max-width: 980px) {
  .signup-page-wrap {
    padding: 0 28px;
  }
}

.signup-page-hero {
  padding: 36px 0 64px;
  border-bottom: 1px solid var(--sp-hair);
}
.signup-page-hero--member {
  padding-bottom: 120px;
  border-bottom: 0;
}
.signup-page-hero--member .signup-page-display {
  font-size: clamp(28px, 3vw, 36px);
}
.signup-page-hero--member .signup-page-dek {
  font-size: 18px;
  max-width: 46ch;
}
.signup-page-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 980px) {
  .signup-page-hero-grid {
    grid-template-columns: 1fr;
  }
  /* Member heading returns to full size once it's no longer beside the donate card. */
  .signup-page-hero--member .signup-page-display {
    font-size: clamp(40px, 4.6vw, 60px);
  }
}
/* After the media block so the paid heading holds two lines at every width. */
.signup-page-hero--paid .signup-page-display {
  font-size: clamp(34px, 3.8vw, 50px);
}

.signup-page-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sp-accent);
}
.signup-page-eyebrow-rule {
  width: 26px;
  height: 1px;
  background: var(--sp-accent);
}

.signup-page-display {
  margin: 0;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(40px, 4.6vw, 60px);
  line-height: 0.96;
  letter-spacing: -0.03em;
  color: var(--sp-fg);
  text-wrap: balance;
}
.signup-page-display em {
  font-style: italic;
  color: var(--sp-accent);
}

.signup-page-dek {
  margin: 26px 0 0;
  max-width: 52ch;
  font-size: 19px;
  line-height: 1.5;
  color: var(--sp-fg);
}

.signup-page-form {
  margin-top: 36px;
  max-width: 560px;
}
.signup-page-field {
  display: grid;
  grid-template-columns: 1fr auto;
  overflow: hidden;
  background: #fff;
  border: 2px solid #fff;
  border-radius: 5px;
  transition: border-color 0.15s;
}
.signup-page-input {
  min-width: 0;
  padding: 18px 20px;
  font-size: 17px;
  color: var(--color-darkgrey);
  background: #fff;
  border: 0;
  outline: 0;
}
.signup-page-input::placeholder {
  color: #9a978c;
}
.signup-page-submit {
  display: inline-flex;
  align-items: center;
  padding: 0 28px;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: var(--color-primary-button-background);
  border: 0;
  cursor: pointer;
  transition: filter 0.15s;
}
.signup-page-submit:hover,
.signup-page-submit:focus-visible {
  filter: brightness(1.12);
}
/* Mobile: split the pill into field + button so the input reads as a field. */
@media (max-width: 540px) {
  .signup-page-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: visible;
    background: transparent;
    border: 0;
  }
  .signup-page-input {
    border-radius: 5px;
  }
  .signup-page-submit {
    justify-content: center;
    padding: 15px 28px;
    border-radius: 5px;
  }
}

.signup-page-hint {
  margin: 12px 0 0;
  min-height: 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--sp-muted);
}
.signup-page-hint a {
  color: inherit;
  text-decoration: underline;
}
.signup-page-hint[hidden] {
  display: none;
}
.signup-page-hint--success {
  color: var(--sp-fg);
}
.signup-page-hint--error {
  color: var(--color-rose-vif);
}
/* Ghost toggles .success/.error on the form itself; reveal the matching hint (overriding [hidden]). */
.signup-page-form.success .signup-page-hint--success,
.signup-page-form.error .signup-page-hint--error {
  display: block;
}
.signup-page-form.success .signup-page-hint--default,
.signup-page-form.error .signup-page-hint--default {
  display: none;
}
.signup-page-form.error .signup-page-field {
  border-color: var(--color-rose-vif);
}

.signup-page-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  margin: 26px 0 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--sp-muted);
}
.signup-page-status-item {
  white-space: nowrap; /* not flex — keeps the space before each <b> */
}
.signup-page-status b {
  color: var(--sp-fg);
  font-weight: 700;
}
.signup-page-blip {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  vertical-align: middle;
  border-radius: 50%;
  background: var(--sp-accent);
  animation: signup-page-pulse 1.5s ease-in-out infinite;
}
.signup-page-blip--latest {
  background: var(--color-rose-vif);
  animation: none;
}
@keyframes signup-page-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.7);
  }
}
@media (prefers-reduced-motion: reduce) {
  .signup-page-blip {
    animation: none;
  }
}

.signup-page-hero-image {
  min-height: 520px;
  /* Background-removed bust on transparent, so the slate ground shows through. */
  background: url("../images/nefertiti-cutout.webp") center / contain no-repeat;
}
@media (max-width: 980px) {
  .signup-page-hero-image {
    min-height: 280px;
  }
}

.signup-page-band {
  padding: 64px 0;
  /* Clip the cutouts' transparent horizontal overflow past the viewport edge without
     clipping the vertical overlap onto the cards (clip keeps the other axis visible). */
  overflow-x: clip;
}
.signup-page-band--get {
  background: var(--color-terre-sienne-brulee-59);
}
.signup-page-band--support {
  background: var(--color-bleu-outremer-31);
}
.signup-page-band-intro {
  position: relative;
  margin-bottom: 40px;
}
/* Out of flow; shared right edge anchors both cutouts ~76px past the content edge so they
   line up, but max() clamps to the viewport edge so it never overflows on narrow screens.
   Bottom-anchored per band; transparent PNG, no box. */
.signup-page-band-image {
  position: absolute;
  right: max(-76px, calc((100% - 100vw) / 2));
  height: auto;
  z-index: 1;
  pointer-events: none;
}
/* max-width freezes the size at its ~1080px proportions so it doesn't balloon
   (and ride too high) on wide screens. right overrides the shared clamp to offset this
   PNG's wide right padding, so the bird stays at the cards' edge on smaller screens too
   (its transparent overflow is clipped by the band's overflow-x). */
.signup-page-band--get .signup-page-band-image {
  bottom: -90px;
  width: 44%;
  max-width: 430px;
  right: -150px;
}
/* Smaller than --get so the tall CHANEL sign stays within the blue band (doesn't
   bleed up into the brown band above). */
.signup-page-band--support .signup-page-band-image {
  bottom: -120px;
  width: 42%;
  max-width: 400px;
}
/* Narrow screens: hoist the intro's contents up to the wrap (display: contents) so the
   cutout can be ordered after the cards, which live outside the intro. Per-band width
   compensates for each PNG's transparent padding. */
@media (max-width: 980px) {
  .signup-page-band .signup-page-wrap {
    display: flex;
    flex-direction: column;
  }
  .signup-page-band-intro,
  .signup-page-band-text {
    display: contents;
  }
  .signup-page-band-image {
    order: 1;
    position: static;
    display: block;
    /* Top margin mirrors the band's 64px bottom padding so the cutout sits with equal
       space above and below. */
    margin: 64px auto 0;
  }
  .signup-page-band--get .signup-page-band-image {
    width: 75%;
    max-width: 370px;
  }
  .signup-page-band--support .signup-page-band-image {
    width: 58%;
    max-width: 290px;
  }
}
.signup-page-sec-title {
  margin: 0;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--sp-fg);
}
.signup-page-sec-title em {
  font-style: italic;
  color: var(--sp-accent);
}
.signup-page-sec-dek {
  margin: 18px 0 0;
  max-width: calc(66.667% - 6px);
  font-size: 17px;
  line-height: 1.55;
  color: var(--sp-muted);
}
.signup-page-band--get .signup-page-sec-dek {
  color: var(--sp-fg);
}
@media (max-width: 980px) {
  .signup-page-sec-dek {
    max-width: none;
  }
}

.signup-page-get-grid,
.signup-page-support-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 980px) {
  .signup-page-get-grid,
  .signup-page-support-grid {
    grid-template-columns: 1fr;
    margin-top: 40px;
  }
}

.signup-page-get-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 22px 26px;
  border: 1.5px solid var(--sp-accent);
}
.signup-page-get-title {
  margin: 0;
  font-style: italic;
  font-weight: 900;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--sp-fg);
}
.signup-page-get-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sp-fg);
}

.signup-page-support-card {
  padding: 28px 24px;
  border: 1.5px solid var(--sp-accent);
}
.signup-page-support-title {
  margin: 0 0 12px;
  font-style: italic;
  font-weight: 900;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--sp-fg);
}
.signup-page-support-text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--sp-muted);
}

.signup-page-donate-card {
  position: relative;
  padding: 34px 36px;
  background: var(--color-rouge-carmin);
  color: var(--sp-fg);
  border: 1.5px solid var(--sp-accent);
}
/* White whoosh in the card's bottom-left corner; offset down-left past the card edge. */
.signup-page-whoosh {
  position: absolute;
  left: -75px;
  bottom: -30px;
  width: 180px;
  pointer-events: none;
}
@media (max-width: 980px) {
  /* Hidden on narrow screens — the outward spill would push horizontal overflow. */
  .signup-page-whoosh {
    display: none;
  }
}
.signup-page-donate-heading {
  margin: 0 0 6px;
  font-style: italic;
  font-weight: 900;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--sp-fg);
}
.signup-page-donate-heading em {
  font-style: italic;
  color: var(--sp-accent);
}
.signup-page-donate-heading--one-line {
  font-size: 32px;
  letter-spacing: -0.035em;
  white-space: nowrap;
}
@media (max-width: 980px) {
  .signup-page-donate-heading--one-line {
    font-size: 26px;
  }
}
.signup-page-donate-sub {
  margin: 0 0 24px;
  font-size: 15px;
  color: #e7c6cf;
}
.signup-page-donate-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 16px;
  padding: 17px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-rouge-carmin);
  text-decoration: none;
  background: #fff;
  border: 0;
}
/* Explicit colour overrides the global a:hover→black. */
.signup-page-donate-btn:hover,
.signup-page-donate-btn:focus-visible {
  color: var(--color-rouge-carmin);
  outline: 2px solid var(--sp-accent);
  outline-offset: 2px;
}

/* Gift page — shrunk share card nudged toward the hero text. */
.signup-page-gift-nudge {
  transform: translate(-28px, 18px) scale(0.86);
  transform-origin: center right;
}
.signup-page-share-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.signup-page-share-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 14px 4px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--sp-fg);
  text-decoration: none;
  background: transparent;
  border: 1.5px solid var(--sp-accent);
  cursor: pointer;
  transition: background 0.15s;
}
/* Explicit colour overrides the global a:hover→black. */
.signup-page-share-tile:hover,
.signup-page-share-tile:focus-visible {
  color: var(--sp-fg);
  background: rgba(241, 182, 115, 0.14);
}
.signup-page-share-icon {
  display: inline-flex;
  color: var(--sp-accent);
}
.signup-page-share-icon .icon {
  width: 22px;
  height: 22px;
}
/* Copied feedback is CSS-only — scripts.js just toggles the class. */
.signup-page-share-copy.is-copied .signup-page-share-label {
  display: none;
}
.signup-page-share-copy.is-copied::after {
  content: "Copied ✓";
}
.signup-page-gift-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #dcb8c1;
}
.signup-page-gift-or::before,
.signup-page-gift-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.16);
}
.signup-page-donate-btn .icon {
  width: 18px;
  height: 18px;
}
.signup-page-hint a:hover,
.signup-page-hint a:focus-visible {
  color: inherit;
}
@media (max-width: 540px) {
  .signup-page-status {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 36px;
  }
  .signup-page-donate-card {
    padding: 30px 24px;
  }
  .signup-page-donate-heading {
    font-size: clamp(28px, 8.5vw, 34px);
  }
  /* Re-assert below the heading clamp — nowrap at clamp size would overflow. */
  .signup-page-donate-heading--one-line {
    font-size: 26px;
  }
}

/* 12. Podcast (/podcast/ landing + episode posts) — poster system */
.podcast,
.podcast-episode,
.podcast-cta,
.podcast-more,
.podcast-band {
  /* handoff pistachio ground + album maroon (see docs/colour-palette.md) */
  --podcast-pistachio: #bfe27e;
  --podcast-album-maroon: #641c30;
  --podcast-charcoal: #4f4c47;
  --podcast-cream: #f4efe0;
  --podcast-black: #16140f;
}
.podcast {
  overflow: hidden;
  background: var(--podcast-pistachio);
  line-height: 1.45;
}
.podcast .bwrap,
.podcast-cta .bwrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 56px;
}

/* poster type, shared by flags, chips, buttons, and the follow label */
.podcast-flag,
.podcast-subscribe a,
.podcast-more-link a,
.podcast-email button,
.podcast-episode .article-share,
.podcast-episode .article-footer-share-label {
  font-style: italic;
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* lift-and-invert hover system, shared by every blocky link/button */
.podcast-subscribe a,
.podcast-more-link a,
.podcast-email button,
.podcast-episode .article-share,
.podcast-episode .article-share-list a {
  /* transparent at rest so the hover frame doesn't shift layout */
  border: 2px solid transparent;
  box-shadow: 3px 3px 0 var(--podcast-album-maroon);
  transition:
    transform 0.12s ease-out,
    box-shadow 0.12s ease-out,
    background-color 0.12s ease-out,
    color 0.12s ease-out;
}
.podcast-subscribe a:hover,
.podcast-subscribe a:focus-visible,
.podcast-more-link a:hover,
.podcast-more-link a:focus-visible,
.podcast-email button:hover,
.podcast-email button:focus-visible,
.podcast-episode .article-share:hover,
.podcast-episode .article-share:focus-visible,
.podcast-episode .article-share-list a:hover,
.podcast-episode .article-share-list a:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--podcast-album-maroon);
}
/* maroon chips invert to framed pistachio */
.podcast-subscribe a:hover,
.podcast-subscribe a:focus-visible,
.podcast-more-link a:hover,
.podcast-more-link a:focus-visible,
.podcast-episode .article-share-list a:hover,
.podcast-episode .article-share-list a:focus-visible {
  background: var(--podcast-pistachio);
  border-color: var(--podcast-album-maroon);
  color: var(--podcast-album-maroon);
}
/* the lift is decorative; colour changes carry the state on their own */
@media (prefers-reduced-motion: reduce) {
  .podcast-subscribe a,
  .podcast-more-link a,
  .podcast-email button,
  .podcast-episode .article-share,
  .podcast-episode .article-share-list a,
  .podcast-ep-grid .podcast-ep-card {
    transition: none;
  }
  .podcast-subscribe a:hover,
  .podcast-subscribe a:focus-visible,
  .podcast-more-link a:hover,
  .podcast-more-link a:focus-visible,
  .podcast-email button:hover,
  .podcast-email button:focus-visible,
  .podcast-episode .article-share:hover,
  .podcast-episode .article-share:focus-visible,
  .podcast-episode .article-share-list a:hover,
  .podcast-episode .article-share-list a:focus-visible,
  .podcast-ep-grid .podcast-ep-card:is(:hover, :focus-within) {
    transform: none;
  }
}

/* hero */
.podcast-hero {
  padding: 24px 0 8px;
}
.podcast-hero-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
}
.podcast-flag {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 16px;
  background: var(--podcast-album-maroon);
  color: var(--podcast-cream);
  font-size: clamp(13px, 1.5vw, 18px);
}
.podcast-display {
  margin: 0;
  color: var(--podcast-album-maroon);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(46px, 6.8vw, 106px);
  line-height: 0.82;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  white-space: nowrap;
}
.podcast-display .out {
  color: transparent;
  -webkit-text-stroke: 3px var(--podcast-album-maroon);
}
.podcast-lede {
  max-width: 42ch;
  margin: 22px 0 0;
  color: var(--color-ombre-naturelle);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.4;
}
.podcast-hero-cut {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}
.podcast-hero-cut img {
  width: 245px;
  height: auto;
  transform: rotate(-2deg);
  filter: drop-shadow(8px 12px 0 rgba(0, 0, 0, 0.22));
  pointer-events: none;
}

/* subscribe chips (landing hero + episode posts) */
.podcast-subscribe {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.podcast-subscribe a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: var(--podcast-album-maroon);
  color: var(--podcast-cream);
  font-size: 15px;
  text-decoration: none;
}
/* keyboard focus keeps an explicit ring on top of the inversion */
.podcast-subscribe a:focus-visible {
  outline: 2px solid var(--podcast-album-maroon);
  outline-offset: 2px;
}
.podcast-subscribe .icon {
  width: 1em;
  height: 1em;
}

/* landing: trailer + about, platform-style show header */
.podcast-episodes {
  margin-top: 2em;
  padding-bottom: 3.6em;
}
.podcast-episodes-title {
  margin: 0 0 24px;
  color: var(--podcast-album-maroon);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.podcast-about {
  max-width: 780px;
  margin: 0 auto 3.4em;
}
.podcast-about .podcast-episodes-title {
  margin: 34px 0 12px;
}
.podcast-about-text {
  margin: 0;
  color: var(--color-ombre-naturelle);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.6;
}
.podcast-about-text a {
  color: var(--podcast-album-maroon);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* marker-fill hover; the spread shadow pads it without nudging the text */
.podcast-about-text a:hover,
.podcast-about-text a:focus-visible,
.podcast-episode .gh-content a:hover,
.podcast-episode .gh-content a:focus-visible {
  background: var(--podcast-album-maroon);
  box-shadow: 0 0 0 3px var(--podcast-album-maroon);
  color: var(--podcast-cream);
  text-decoration: none;
}
/* inverse marker on the maroon band */
.podcast-email-gdpr a:hover,
.podcast-email-gdpr a:focus-visible {
  background: var(--podcast-cream);
  box-shadow: 0 0 0 3px var(--podcast-cream);
  color: var(--podcast-album-maroon);
  text-decoration: none;
}
.podcast-all .pagination {
  margin-top: 2em;
}

/* numbered episode cards — chunky poster frames */
.podcast-ep-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px 22px;
}
.podcast-ep-grid .podcast-ep-card {
  background: var(--podcast-pistachio);
  border: 3px solid var(--podcast-album-maroon);
  box-shadow: 6px 6px 0 var(--podcast-album-maroon);
  transition:
    transform 0.12s ease-out,
    box-shadow 0.12s ease-out,
    background-color 0.12s ease-out;
}
/* poster lifts towards the cursor and inverts */
.podcast-ep-grid .podcast-ep-card:is(:hover, :focus-within) {
  transform: translate(-3px, -3px);
  box-shadow: 10px 10px 0 var(--podcast-album-maroon);
  background: var(--podcast-album-maroon);
}
.podcast-ep-grid .podcast-ep-card:is(:hover, :focus-within) .podcast-ep-card-link,
.podcast-ep-grid .podcast-ep-card:is(:hover, :focus-within) .podcast-ep-number,
.podcast-ep-grid .podcast-ep-card:is(:hover, :focus-within) .podcast-ep-title {
  color: var(--podcast-cream);
}
.podcast-ep-grid .podcast-ep-card:is(:hover, :focus-within) .podcast-ep-date {
  color: var(--podcast-pistachio);
}
.podcast-ep-grid .podcast-ep-card:is(:hover, :focus-within) .podcast-ep-play {
  border-left-color: var(--podcast-pistachio);
}
.podcast-ep-card-link {
  display: block;
  height: 100%;
  padding: 18px 20px 22px;
  color: var(--color-ombre-naturelle);
  text-decoration: none;
}
.podcast-ep-card-link:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: -4px;
}
.podcast-ep-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
}
.podcast-ep-number {
  color: var(--podcast-album-maroon);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(32px, 3.4vw, 42px);
  line-height: 1;
}
/* border-trick play triangle */
.podcast-ep-play {
  width: 0;
  height: 0;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  border-left: 26px solid var(--podcast-album-maroon);
}
.podcast-ep-date {
  display: block;
  margin-top: 12px;
  color: var(--podcast-charcoal);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.podcast-ep-title {
  margin: 6px 0 0;
  color: var(--podcast-album-maroon);
  font-style: italic;
  font-weight: 900;
  font-size: 19px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.podcast-ep-excerpt {
  margin: 10px 0 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}

/* cream player frame (trailer on the landing, Podigee embeds in posts) */
.podcast-player {
  margin-bottom: 14px;
  background: var(--podcast-cream);
  border: 3px solid var(--podcast-charcoal);
  box-shadow: 8px 9px 0 var(--podcast-charcoal);
}
.podcast-player iframe {
  display: block;
  width: 100%;
  border: 0;
}

/* episode posts: podcast link + episode flag on one row */
.podcast-episode-tagrow {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: start;
  margin-bottom: 14px;
}
/* subtle twin: flag typography, no ground */
a.podcast-flag {
  padding-right: 0;
  padding-left: 0;
  background: none;
  color: var(--podcast-album-maroon);
  text-decoration: none;
}
a.podcast-flag:hover,
a.podcast-flag:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}
a.podcast-flag:focus-visible {
  outline: 2px solid var(--podcast-album-maroon);
  outline-offset: 2px;
}
.podcast-episode .article-title {
  color: var(--podcast-album-maroon);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(28px, 3.8vw, 48px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.podcast-episode .article-excerpt {
  color: var(--color-ombre-naturelle);
  font-size: clamp(17px, 1.8vw, 21px);
  font-weight: 600;
}
.podcast-episode .article-byline-meta .author-name,
.podcast-episode .byline-sep {
  display: none;
}
.podcast-episode .byline-meta-date {
  color: var(--podcast-charcoal);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.podcast-episode .article-share {
  border-color: var(--podcast-album-maroon);
  color: var(--podcast-album-maroon);
}
.podcast-episode .article-share:hover,
.podcast-episode .article-share:focus-visible {
  background: var(--podcast-album-maroon);
  color: var(--podcast-cream);
}
.podcast-episode .gh-content h2,
.podcast-episode .gh-content h3 {
  color: var(--podcast-album-maroon);
  font-style: italic;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.podcast-episode .gh-content h2 {
  font-size: clamp(24px, 2.8vw, 34px);
}
.podcast-episode .gh-content h3 {
  font-size: clamp(20px, 2.2vw, 26px);
}
.podcast-episode .gh-content p,
.podcast-episode .gh-content li {
  color: var(--color-ombre-naturelle);
  font-weight: 500;
}
.podcast-episode .gh-content a {
  color: var(--podcast-album-maroon);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.podcast-episode .gh-content iframe[src*="podigee.io"] {
  background: var(--podcast-cream);
  border: 3px solid var(--podcast-charcoal);
  box-shadow: 8px 9px 0 var(--podcast-charcoal);
}
/* Podigee draws its own rounded border; echo only the offset shadow */
.podcast-episode .gh-content .podigee-podcast-player {
  border-radius: 12px;
  box-shadow: 8px 9px 0 var(--podcast-charcoal);
}
.podcast-episode .gh-content > ul,
.podcast-episode .gh-content > ol {
  max-width: 720px;
}
/* follow-the-show row: heading-weight label, chip-square icons, no divider */
.podcast-episode .article-footer-share {
  border-top: 0;
}
.podcast-episode .article-footer-share-label {
  color: var(--podcast-album-maroon);
  font-size: 19px;
}
.podcast-episode .article-share-list a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--podcast-album-maroon);
  color: var(--podcast-cream);
}
.podcast-episode .article-share-list a svg {
  width: 22px;
  height: 22px;
}

/* more episodes on episode pages */
.podcast-more {
  margin-top: 3em;
  margin-bottom: 3.6em;
}
.podcast-more-link {
  margin-top: 1.6em;
  text-align: right;
}
.podcast-more-link a {
  display: inline-block;
  padding: 8px 18px;
  background: var(--podcast-album-maroon);
  color: var(--podcast-cream);
  font-size: 16px;
  text-decoration: none;
}

/* email capture band */
.podcast-cta {
  padding: 56px 0;
  background: var(--podcast-album-maroon);
  text-align: center;
}
.podcast-cta--post {
  margin-top: 3em;
}
.podcast-cta h2 {
  margin: 0 0 22px;
  color: var(--podcast-cream);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(22px, 3.2vw, 40px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
/* input and button separated, like the article email trap */
.podcast-email {
  display: flex;
  gap: 8px;
  max-width: 560px;
  margin: 0 auto;
}
.podcast-email input {
  flex: 1;
  min-width: 0;
  padding: 14px 18px;
  border: 3px solid var(--podcast-charcoal);
  outline: none;
  background: var(--podcast-cream);
  color: var(--podcast-black);
  font-size: 17px;
  font-weight: 600;
}
.podcast-email input::placeholder {
  color: #8a857a;
}
.podcast-email button {
  flex-shrink: 0;
  padding: 0 26px;
  /* frame matches the input's so both blocks read as one size */
  border: 3px solid var(--podcast-charcoal);
  background: var(--podcast-pistachio);
  color: var(--podcast-black);
  font-size: 17px;
  cursor: pointer;
  /* ink shadow — the shared maroon one vanishes on the band */
  box-shadow: 3px 3px 0 var(--podcast-black);
}
.podcast-email button.tcase {
  text-transform: none;
}
.podcast-email button:hover,
.podcast-email button:focus-visible {
  background: var(--podcast-cream);
  color: var(--podcast-album-maroon);
  box-shadow: 5px 5px 0 var(--podcast-black);
}
.podcast-email-gdpr {
  max-width: 520px;
  margin: 12px auto 0;
  color: var(--podcast-cream);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
.podcast-email-gdpr a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.podcast-email-gdpr--success,
.podcast-email-gdpr--error {
  display: none;
}
/* Ghost toggles .success/.error on the form */
.podcast-email-form.success .podcast-email-gdpr--success,
.podcast-email-form.error .podcast-email-gdpr--error {
  display: block;
}
.podcast-email-form.success .podcast-email-gdpr--default,
.podcast-email-form.error .podcast-email-gdpr--default {
  display: none;
}

/* Unified signup feedback across all three forms: bold text + leading icon, no fill.
   Doubled class outranks per-form colour rules; icon inherits the state colour. */
.signup-feedback {
  font-weight: 600;
}
.signup-feedback svg {
  width: 1em;
  height: 1em;
  margin-right: 6px;
  vertical-align: -0.15em;
}
/* Lighter tints of the brand green/rose so text clears AA (>=4.5:1) on all three
   form grounds — pure blue, charcoal, and maroon (charcoal is the tightest). */
.signup-feedback.signup-feedback--success {
  color: #b6dc63;
}
.signup-feedback.signup-feedback--error {
  color: #f4b9c4;
}

/* header + footer repaint on /podcast/ and episode posts only
   (literal hexes — body sits outside the token scope) */
body:has(.podcast, .podcast-episode) {
  --color-background: #bfe27e;
  --color-text: var(--color-ombre-naturelle);
  --color-link: var(--color-ombre-naturelle);
}
body:has(.podcast, .podcast-episode) .gh-search,
body:has(.podcast, .podcast-episode) .gh-burger {
  background-color: transparent;
}
body:has(.podcast, .podcast-episode) .logo,
body:has(.podcast, .podcast-episode) .logo a {
  color: #641c30;
}

@media (max-width: 900px) {
  .podcast-ep-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* mobile */
@media (max-width: 620px) {
  .podcast .bwrap,
  .podcast-cta .bwrap {
    padding: 0 22px;
  }
  .podcast-ep-grid {
    grid-template-columns: 1fr;
  }
  .podcast .podcast-display {
    font-size: clamp(52px, 17vw, 74px);
    white-space: normal;
  }
  .podcast .podcast-hero-grid {
    flex-direction: column;
    gap: 18px;
  }
  .podcast .podcast-lede {
    max-width: none;
    font-size: 20px;
  }
  .podcast .podcast-hero-cut {
    width: 100%;
  }
  .podcast .podcast-hero-cut img {
    width: clamp(180px, 52vw, 230px);
    max-width: 80%;
  }
}

/* homepage podcast band (partials/podcast-band.hbs): half-width module under
   the news columns; poster left, lede + episode table + buttons right */
.podcast-band {
  display: grid;
  grid-template-columns: clamp(150px, 16vw, 205px) 1fr;
  gap: 20px;
  align-items: center;
  padding: 14px 18px;
  background: var(--podcast-pistachio);
  border: 3px solid var(--podcast-album-maroon);
}
.podcast-band-poster {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 205px;
  text-align: center;
}
.podcast-band-mark {
  margin: 2px 0 6px;
  color: var(--podcast-album-maroon);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 0.78;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.podcast-band-mark span {
  display: block;
}
.podcast-band-mark .the {
  font-size: 0.3em;
  letter-spacing: -0.02em;
  margin-bottom: 0.04em;
}
.podcast-band-mark .out {
  color: transparent;
  -webkit-text-stroke: 2.5px var(--podcast-album-maroon);
  font-size: 0.62em;
}
.podcast-band-poster img {
  width: auto;
  max-width: 100%;
  /* Headphones tuck up over the bottom of the wordmark. */
  margin-top: -10%;
  filter: drop-shadow(5px 7px 0 rgba(0, 0, 0, 0.16));
}
/* Mobile (matching the feed's single-column breakpoint): the band stacks,
   with a one-line wordmark above the headphones. */
@media screen and (max-width: 767px) {
  .podcast-band {
    position: relative;
    grid-template-columns: 1fr;
    gap: 18px;
    overflow: hidden;
  }
  .podcast-band-poster {
    width: fit-content;
    max-width: none;
    margin: 0 auto;
  }
  .podcast-band-poster img {
    max-width: min(170px, 48vw);
    margin-top: -8px;
  }
  /* One-line headline at uniform size — the stacked mark with its tiny
     "The" is illegible this small. "Podcast" keeps its outline, with the
     stroke thinned to match the smaller type. */
  .podcast-band-mark {
    display: flex;
    justify-content: center;
    gap: 0.25em;
    margin: 0;
    font-size: clamp(22px, 7.5vw, 34px);
    line-height: 1;
  }
  .podcast-band-mark .the,
  .podcast-band-mark .out {
    font-size: 1em;
    margin: 0;
  }
  .podcast-band-mark .out {
    -webkit-text-stroke-width: 1.5px;
  }
  .podcast-band-lede {
    text-align: center;
  }
  .podcast-band-actions {
    justify-content: center;
  }
}
.podcast-band-lede {
  margin: 0 0 10px;
  color: var(--podcast-album-maroon);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.35;
}
.podcast-band-eps {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 3px solid var(--podcast-album-maroon);
}
/* Padding/line-height/margin reset the global list rhythm so rows sit flush. */
.podcast-band-ep {
  padding-left: 0;
  line-height: inherit;
}
.podcast-band-ep + .podcast-band-ep {
  margin-top: 0;
}
/* Row dividers per cell: maroon over the lime title area, lime through the
   maroon numeral column so the number blocks stay distinct. */
.podcast-band-ep + .podcast-band-ep .podcast-ep-number {
  border-top: 3px solid var(--podcast-pistachio);
}
.podcast-band-ep + .podcast-band-ep .podcast-band-ep-title {
  border-top: 3px solid var(--podcast-album-maroon);
}
.podcast-band-ep-link {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: stretch;
  color: inherit;
  text-decoration: none;
}
/* Numeral block sits flush to every border — no padding, no lime slivers. */
.podcast-band-ep .podcast-ep-number {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--podcast-album-maroon);
  color: var(--podcast-pistachio);
  font-style: italic;
  font-weight: 900;
  font-size: 16px;
}
.podcast-band-ep-title {
  display: flex;
  align-items: center;
  padding: 7px 12px;
  color: var(--color-ombre-naturelle);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.25;
}
/* Row hover inverts: maroon row, cream title, numeral block flips to lime. */
.podcast-band-ep-link:hover,
.podcast-band-ep-link:focus-visible {
  background: var(--podcast-album-maroon);
}
.podcast-band-ep-link:hover .podcast-band-ep-title,
.podcast-band-ep-link:focus-visible .podcast-band-ep-title {
  color: var(--podcast-cream);
}
.podcast-band-ep-link:hover .podcast-ep-number,
.podcast-band-ep-link:focus-visible .podcast-ep-number {
  background: var(--podcast-pistachio);
  color: var(--podcast-album-maroon);
}
.podcast-band-ep-link:focus-visible {
  outline: 2px solid var(--podcast-album-maroon);
  outline-offset: 2px;
}
.podcast-band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 10px;
}
.podcast-band-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  background: var(--podcast-album-maroon);
  color: var(--podcast-cream);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: inset 0 0 0 2px var(--podcast-album-maroon);
  transition:
    background-color 0.2s,
    color 0.2s;
}
.podcast-band-btn [aria-hidden] {
  font-size: 0.8em;
}
/* Inversion hovers, matching the podcast page's maroon-to-framed-pistachio chips. */
.podcast-band-btn:hover,
.podcast-band-btn:focus-visible {
  background: var(--podcast-pistachio);
  color: var(--podcast-album-maroon);
}
.podcast-band-btn.ghost {
  background: transparent;
  color: var(--podcast-album-maroon);
}
.podcast-band-btn.ghost:hover,
.podcast-band-btn.ghost:focus-visible {
  background: var(--podcast-album-maroon);
  color: var(--podcast-cream);
}
.podcast-band-btn:focus-visible {
  outline: 2px solid var(--podcast-album-maroon);
  outline-offset: 2px;
}
/*# sourceMappingURL=screen.css.map */