/*
Theme Name: Hello World Theme
Theme URI: https://example.com
Author: Nightfire Studios
Description: A minimal block theme editable by non-developers.
Version: 1.0
Requires at least: 6.3
Requires PHP: 7.4
Text Domain: hello-world-theme
*/
:root {
  /* Dr. Talawa Adodo palette */
  --cream: #f4f0e4;
  --cream-soft: #faf8f0;
  --cream-dark: #e6dfc8;
  --green: #21402f;
  --green-deep: #1a3325;
  --green-mid: #2c5240;
  --green-accent: #3a6b4e;
  --green-tint: #8aa07e;
  --ink: #1c2b22;
  --ink-soft: #3a4a41;
  --muted: #4a564e;
  --muted-soft: #6a756d;
  --line: rgba(33, 64, 47, 0.1);
  --highlight: #d3e6a6;
  --gold: #e0a94a;

  --sans: 'Maven', system-ui, -apple-system, sans-serif;
  --display: 'Trust', Georgia, serif;
  --serif: 'Trust', Georgia, serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;

  color-scheme: light;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Trust (primary) ---------- */
@font-face {
  font-family: 'Trust';
  src: url('./assets/trust/Trust1ATRIAL-XLight-BF661737666ffbb.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Trust';
  src: url('./assets/trust/Trust1ATRIAL-XLightItalic-BF6617376687348.otf') format('opentype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Trust';
  src: url('./assets/trust/Trust1ATRIAL-Light-BF6617376637283.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Trust';
  src: url('./assets/trust/Trust1ATRIAL-LightItalic-BF661737666cd5e.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Trust';
  src: url('./assets/trust/Trust1ATRIAL-Regular-BF661737664502a.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Trust';
  src: url('./assets/trust/Trust1ATRIAL-RegularItalic-BF661737666de49.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Trust';
  src: url('./assets/trust/Trust1ATRIAL-Medium-BF661737662056a.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Trust';
  src: url('./assets/trust/Trust1ATRIAL-MediumItalic-BF661737661d4ef.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Trust';
  src: url('./assets/trust/Trust1ATRIAL-Bold-BF66173766193c9.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Trust';
  src: url('./assets/trust/Trust1ATRIAL-BoldItalic-BF6617376620e12.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Trust';
  src: url('./assets/trust/Trust1ATRIAL-XBold-BF661737667415d.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Trust';
  src: url('./assets/trust/Trust1ATRIAL-XBoldItalic-BF661737668710c.otf') format('opentype');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Trust';
  src: url('./assets/trust/Trust1ATRIAL-Black-BF661737655da58.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Trust';
  src: url('./assets/trust/Trust1ATRIAL-BlackItalic-BF6617376568db7.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Trust';
  src: url('./assets/trust/Trust1ATRIAL-XBlack-BF6617376672997.otf') format('opentype');
  font-weight: 950;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Trust';
  src: url('./assets/trust/Trust1ATRIAL-XBlackItalic-BF6617376689145.otf') format('opentype');
  font-weight: 950;
  font-style: italic;
  font-display: swap;
}

/* ---------- Maven (secondary) ---------- */
@font-face {
  font-family: 'Maven';
  src: url('./assets/maven/MavenPro-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Maven';
  src: url('./assets/maven/MavenPro-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Maven';
  src: url('./assets/maven/MavenPro-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Maven';
  src: url('./assets/maven/MavenPro-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Instrument Serif (hero display) ---------- */
@font-face {
  font-family: 'Instrument Serif';
  src: url('./assets/instrument-serif/InstrumentSerif-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Serif';
  src: url('./assets/instrument-serif/InstrumentSerif-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---------- base layer ----------
   Ported from the design's global stylesheet. Without these the browser's
   default margins on headings/paragraphs and content-box sizing push every
   section apart, so the per-component rules below never line up. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  background: var(--cream-soft);
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

a:hover {
  opacity: 0.75;
}

h1,
h2,
h3 {
  font-family: var(--display);
  margin: 0;
}

p {
  margin: 0;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green-accent);
  width: fit-content;
}

/* Editor-authored page content still needs normal flow spacing, since the
   reset above strips the default margins the block editor assumes. */
.wp-block-post-content > * {
  margin-block: 0 1.2em;
}

.wp-block-post-content > *:last-child {
  margin-block-end: 0;
}

/* Inner pages (About / Services) are just title + content, so they need their
   own breathing room from the header and footer. */
main:has(> .wp-block-post-title) {
  padding: 72px 24px 88px;
}

.wp-block-post-title {
  font-size: 46px;
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-block-end: 20px;
}

.wp-block-post-content {
  font-size: 17px;
  line-height: 1.7;
  color: var(--muted);
}


.nav-1 {
  background-color: var(--green);
  width: 100%;
  display: grid;
  place-items: center;
  border-bottom: .5px solid rgba(128, 128, 128, 0.379);
}

.wp-block-image {
  margin: 0;
}

/* Size the img directly rather than the figure, so the surrounding padding
   can't eat into the logo's height under border-box sizing. */
.logo {
  padding: 20px 0;
  margin: 0;
}

/* The size is also set inline in parts/header.html — the block editor's own
   image styles override this rule, so the markup has to carry it too. */
.logo img {
  display: block;
  width: auto;
  height: 45px;
  /* If the logo file is ever swapped for a different aspect ratio, it
     letterboxes instead of stretching. */
  object-fit: contain;
  object-position: left center;
}

/* Both are part of the collapsed panel only — see the mobile query. */
.nav-toggle,
.nav-buy {
  display: none;
}

.nav-2 {
  background-color: var(--green-deep);
  display: grid;
  place-items: center;
  padding: 25px 1rem;
  margin-top: 0;
}

.about {
  padding: 84px 48px;
  text-align: center;
  /* Gold emblem above the heading. This was an ::after on this element, but
     .about is a block in the editor and Gutenberg attaches its own pseudo
     element to blocks, which knocked the emblem to the block's top-left corner
     on hover. A background can't be clobbered that way, and needs no
     containing block. logo-gold.png is square, so 60x60 matches the old
     `contain` fit inside the 80x60 box. */
  background-image: url('assets/images/logo-gold.png');
  background-repeat: no-repeat;
  background-position: center 60px;
  background-size: 60px 60px;
  border-bottom: 1px solid rgba(33, 64, 47, 0.09);
  position: relative;
  overflow: hidden;
  min-height: 560px;
}

.about-inner {
  position: relative;
  z-index: 3;
  max-width: 470px;
  margin: 0 auto;
  /* Clears the gold emblem pinned at top: 60px. This used to come from
     .about-title's collapsing top margin, but WordPress zeroes a flow
     container's first-child margin, so in the editor the whole column rode up
     into the emblem. Padding can't collapse and can't be zeroed by that rule. */
  padding-top: 42px;
}

.about::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  transform: translate(-50%, -50%);
  background-image: url('assets/images/logo-bw.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.05;
  z-index: 0;
  pointer-events: none;
}

.about .eyebrow {
  position: relative;
  z-index: 1;
}

.about-title {
  position: relative;
  z-index: 1;
  font-weight: 700;
  font-size: 34px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 22px;
}

.about-body {
  position: relative;
  z-index: 1;
  font-size: 17px;
  line-height: 1.75;
  color: var(--muted);
  max-width: 660px;
  margin: 0 auto 24px;
}

/* The pill has to live on the <a>, not on this wrapper: core styles
   wp-element-button with its own background and radius, which otherwise
   renders as a second, smaller button inside this one. */
.about-cta {
  position: relative;
  z-index: 1;
  display: inline-flex;
}

.about-cta .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  background: var(--green);
  color: var(--cream);
  transition: opacity 0.2s ease, background 0.2s ease;
}

/* focus cards scattered around the about copy */
.about-card {
  z-index: 3;
  width: max(400px, 20%);
  text-align: left;
  background: #fff;
  border-radius: 16px;
  padding: 22px 24px 24px;
  box-shadow: 0 12px 32px rgba(33, 64, 47, 0.1);
  transform: scale(.8);
}

/* Desktop scatter. Every child shares one grid cell so the cards can overlap
   the centre column, and each is nudged into place with translate(). Grid
   placement plus a transform needs no positioned ancestor — unlike the
   absolute layout this replaces, which the block editor resolved against the
   wrong box, dropping the cards into normal flow. translate() also keeps the
   cards out of row sizing, so the section stays exactly as tall as before.
   Scoped to the breakpoint above the stacked layout so nothing leaks into it. */
@media (min-width: 1081px) {
  .about {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
  }

  .about > * {
    grid-area: 1 / 1;
    align-self: start;
    justify-self: start;
  }

  .about-inner {
    justify-self: center;
  }

  .about-card--1 {
    transform: translate(-28px, 2px) scale(0.8);
  }

  .about-card--2 {
    transform: translate(36px, 258px) scale(0.8);
  }

  .about-card--3 {
    justify-self: end;
    transform: translate(48px, 141px) scale(0.8);
  }
}

.about-card-label {
  font-family: var(--serif);
  /* font-style: italic; */
  font-size: 14px;
  color: var(--green-accent);
}

.about-card-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 21px;
  color: var(--ink);
  margin: 8px 0 10px;
}

.about-card-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

/* hand-drawn style arrows pointing toward the about copy */
.about-arrow {
  position: absolute;
  z-index: 2;
  color: var(--green-tint);
  pointer-events: none;
  display: none;
}

.about-arrow--1 {
  top: 150px;
  left: 236px;
}

.about-arrow--2 {
  top: 396px;
  left: 268px;
}

.about-arrow--3 {
  top: 250px;
  right: 236px;
}



.nav-2 ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

.nav-2 ul li {
  list-style-type: none;
  line-height: 1;

}

.nav-2 ul li a {
  color: #f4f0e4b3;
  ;
  text-decoration: none;
  font-size: .9rem;
  padding: .6em .9em;
}

.nav-2 ul li a[aria-current="page"] {
  background-color: white;
  color: var(--green);
  border-radius: 25px;
  font-weight: bold;
}

/* ---------- About page ----------
   The layout lives in patterns/page-about.php, which also seeds the About
   page's content under Pages, so every heading and paragraph stays editable
   in the block editor. */

/* post-content sits between the constrained <main> and the section below, so
   it has to opt out of the 800px content width — otherwise the 65% column
   resolves against that box instead of the viewport and renders half-width. */
.about-page > .wp-block-post-content {
  max-width: none;
  width: 100%;
}

.about-detail {
  position: relative;
  width: 65%;
  margin: 0 auto;
  padding: 92px 0 100px;
}

/* Hairline across the full viewport, marking where the page body starts. */
.about-detail::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background: rgba(33, 64, 47, 0.09);
}

.about-top {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: start;
  gap: 56px;
}

.about-eyebrow {
  color: var(--muted-soft);
}

.about-heading {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 16px 0 24px;
}

.about-heading em {
  font-style: italic;
}

.about-intro-body {
  max-width: 540px;
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
}

.about-intro-body:last-child {
  margin-bottom: 0;
}

.about-portrait {
  position: relative;
  align-self: stretch;
  min-height: 320px;
  border: 1px solid rgba(33, 64, 47, 0.1);
  border-radius: 16px;
  overflow: hidden;
}

/* The image block renders <figure><img>, so the height has to be carried down
   the chain for object-fit to have a box to fill. */
.about-portrait .wp-block-image {
  height: 100%;
}

.about-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.about-creds {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.cred-card {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 26px 30px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(33, 64, 47, 0.06);
}

.cred-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--green);
  color: var(--cream);
}

.cred-badge svg {
  width: 30px;
  height: 30px;
}

.cred-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 6px;
}

.cred-sub {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-accent);
}

.about-focus {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 40px;
}

.focus-card {
  background: #fff;
  border-radius: 16px;
  padding: 30px 30px 34px;
  box-shadow: 0 10px 30px rgba(33, 64, 47, 0.06);
}

.focus-label {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--green-accent);
}

.focus-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  color: var(--ink);
  margin: 10px 0 12px;
}

.focus-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

@media (max-width: 1080px) {
  .about-detail {
    width: 85%;
  }
}

@media (max-width: 820px) {
  .about-detail {
    width: 90%;
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .about-top {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .about-portrait {
    min-height: 240px;
  }

  .about-creds {
    grid-template-columns: 1fr;
    margin-top: 32px;
  }

  .about-heading {
    font-size: 36px;
  }

  .about-focus {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 32px;
  }
}

/* ---------- inner page shell ----------
   Shared by Contact, Videos and Writings. Each section carries the design's
   own "page" class, but every rule is scoped to the page's own class —
   WordPress puts a bare "page" class on <body> too, and an unscoped .page
   rule would shrink the whole document to 65%. */

.contact-page-main > .wp-block-post-content,
.archive-main > .wp-block-post-content {
  max-width: none;
  width: 100%;
}

.contact-page,
.videos-page,
.blogs-page {
  position: relative;
  width: 65%;
  margin: 0 auto;
  padding: 92px 0 100px;
}

.contact-page {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The head of an archive is followed by the block that renders its cards, so
   the bottom padding belongs to the grid container instead. */
.videos-page,
.blogs-page {
  padding-bottom: 0;
}

/* Hairline across the full viewport, marking where the page body starts. */
.contact-page::before,
.videos-page::before,
.blogs-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background: rgba(33, 64, 47, 0.09);
}

.contact-page .page-head,
.videos-page .page-head,
.blogs-page .page-head {
  max-width: 660px;
  margin-bottom: 52px;
}

.contact-page .page-title,
.videos-page .page-title,
.blogs-page .page-title {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: 46px;
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 14px 0 20px;
}

.contact-page .page-title em,
.videos-page .page-title em,
.blogs-page .page-title em {
  font-style: italic;
}

.contact-page .page-intro,
.videos-page .page-intro,
.blogs-page .page-intro {
  max-width: 560px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--muted);
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 26px;
  max-width: 420px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.contact-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--cream);
  color: var(--green);
}

.contact-item-icon svg {
  width: 22px;
  height: 22px;
}

.contact-item-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.contact-item-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-soft);
}

.contact-item-value {
  font-size: 15.5px;
  color: var(--ink);
}

.contact-socials {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

/* A list block, so socials can be added or removed by pressing Enter in the
   editor. The pill styling sits on the link rather than the item. */
.contact-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-social {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid rgba(33, 64, 47, 0.2);
  border-radius: 100px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--green);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.contact-social:hover {
  opacity: 1;
  background: rgba(33, 64, 47, 0.05);
  border-color: rgba(33, 64, 47, 0.4);
}

@media (max-width: 1080px) {
  .contact-page,
  .videos-page,
  .blogs-page {
    width: 85%;
  }
}

@media (max-width: 820px) {
  .contact-page,
  .videos-page,
  .blogs-page {
    width: 90%;
    padding: 60px 0 72px;
  }

  .videos-page,
  .blogs-page {
    padding-bottom: 0;
  }

  .contact-page .page-head,
  .videos-page .page-head,
  .blogs-page .page-head {
    margin-bottom: 40px;
  }

  .contact-page .page-title,
  .videos-page .page-title,
  .blogs-page .page-title {
    font-size: 36px;
  }
}

/* ---------- Home banner ---------- */

/* ---------- hero ---------- */
.hero-section {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  /* gap: 24px; */
  min-height: 360px;
  /* padding: 40px 48px; */
  background: linear-gradient(to top, var(--cream), var(--cream-soft));
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid rgb(209, 210, 198);
}

.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('assets/images/logo-bw.webp');
  background-size: 70px 70px;
  background-repeat: repeat;
  mix-blend-mode: overlay;
  /* opacity: 0.03; */
  pointer-events: none;
}

.hero-portrait {
  flex: 1 1 320px;
  max-width: 500px;
  aspect-ratio: 1;
  position: relative;
  z-index: 1;

}

.hero-portrait img {
  display: block;
  width: 175%;
  height: 150%;
  object-fit: cover;
  position: absolute;
  left: 0%;
  top: 40px;
}

.hero-copy {
  flex: 1 1 380px;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.hero-title {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: 64px;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 18px 0 24px;
}

.hero-mark {
  font-style: italic;
  background: var(--highlight);
  padding: 0.02em 0.22em;
  border-radius: 10px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.hero-line {
  display: inline-block;
}

.hero-lede {
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 460px;
  margin: 0;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.hero-btn .wp-block-button__link {
  font-family: var(--sans);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.hero-btn--primary .wp-block-button__link {
  background: var(--green-deep);
  color: var(--cream);
}

.hero-btn--ghost .wp-block-button__link {
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(33, 64, 47, 0.35);
}

.hero-btn--ghost .wp-block-button__link:hover {
  opacity: 1;
  background: rgba(33, 64, 47, 0.05);
}

/* ---------- featured videos ---------- */
.videos {
  padding: 56px 4% 64px;
  margin: 0 auto;
  position: relative;
  background-color: #fafaf3;
}

.videos-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 26px;
}

.videos-title {
  font-weight: 700;
  font-size: 30px;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.videos-viewall {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  background: var(--green-deep);
  color: var(--cream);
  transition: opacity 0.2s ease, background 0.2s ease;
}

.videos-viewall--mobile {
  display: none;
}

.videos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

/* ---------- reading thread ----------
   A progress line down the left margin of an article. Purely decorative, so
   it is aria-hidden and pointer-events:none. */
.thread-track {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 34px;
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.thread-track.is-visible {
  opacity: 1;
}

.thread-track svg {
  height: 100%;
  width: 100%;
}

.thread-line {
  stroke: var(--line);
  stroke-width: 2;
  fill: none;
}

.thread-progress {
  stroke: #f7a500;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
}

/* The knot sits outside the SVG — preserveAspectRatio="none" stretches the
   viewBox to the viewport, which would squash a circle into an oval. */
.thread-knot {
  position: absolute;
  left: 50%;
  top: 0;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--cream-soft);
  border: 2px solid #f7a500;
}

/* No room for a left margin rail on narrow screens. */
@media (max-width: 900px) {
  .thread-track {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .thread-track {
    transition: none;
  }
}

/* ---------- single article ---------- */
.article-shell {
  --art-thread: #f7a500;
  --art-max: 720px;
  background: var(--cream-soft);
}

.article-hero {
  max-width: var(--art-max);
  margin: 0 auto;
  padding: 64px 24px 40px;
}

.article-back {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin-bottom: 30px;
  transition: color 0.2s ease;
}

.article-back:hover {
  opacity: 1;
  color: var(--green-accent);
}

.article-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-accent);
  margin: 0 0 18px;
}

.article-kicker::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--green-accent);
}

.article-kicker a {
  color: inherit;
}

.article-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 5.2vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 22px;
}

.article-cover {
  display: block;
  margin: 8px 0 28px;
}

.article-cover img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 4px;
}

.article-byline {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted-soft);
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.article-byline strong {
  color: var(--ink);
  font-weight: 600;
}

.article-avatar {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green), var(--green-accent));
  flex-shrink: 0;
}

.article-avatar--lg {
  width: 52px;
  height: 52px;
}

/* ---------- article body ---------- */
.article-body {
  counter-reset: article-section;
  max-width: var(--art-max);
  margin: 0 auto;
  padding: 8px 24px 0;
  font-size: 18.5px;
  line-height: 1.72;
  color: var(--ink-soft);
}

.article-body p {
  margin: 0 0 26px;
}

/* Drop cap on the opening paragraph — either the editor's own toggle, or
   automatically on the first paragraph after the credit line. */
.article-content > p:not(.pub):first-of-type::first-letter,
.article-content > p.pub + p::first-letter,
.article-content p.has-drop-cap::first-letter {
  font-family: var(--serif);
  font-size: 72px;
  line-height: 0.78;
  float: left;
  padding: 6px 10px 0 0;
  color: var(--art-thread);
}

/* Optional credit line — give a paragraph the class "pub" in the editor. */
.article-body p.pub {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin-bottom: 30px;
}

/* Headings number themselves 01, 02, 03 — nothing typed by hand. */
.article-body h2 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  counter-increment: article-section;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 52px 0 22px;
}

.article-body h2::before {
  content: counter(article-section, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--art-thread);
}

/* A heading with the class "no-count" opts out of the numbering. */
.article-body h2.no-count {
  counter-increment: none;
}

.article-body h2.no-count::before {
  content: '·';
}

.article-body h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 21px;
  color: var(--ink);
  margin: 36px 0 14px;
}

.article-body strong {
  color: var(--ink);
  font-weight: 600;
}

.article-content a {
  color: var(--green-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article-body blockquote,
.article-body .wp-block-pullquote {
  margin: 44px 0;
  padding: 2px 0 2px 26px;
  border-left: 2px solid var(--art-thread);
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1.4;
  color: var(--ink);
}

.article-body .wp-block-pullquote blockquote {
  margin: 0;
  padding: 0;
  border: 0;
}

.article-body blockquote p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

.article-body cite {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin-top: 12px;
}

/* A paragraph or group given the class "note" in the editor. */
.article-body .note {
  position: relative;
  font-size: 14px;
  line-height: 1.6;
  color: var(--green-accent);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 14px 16px;
  margin: 36px 0;
}

.article-body .note::before {
  content: 'Note';
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--art-thread);
  font-weight: 600;
  margin-bottom: 6px;
}

.article-body ul,
.article-body ol {
  margin: 0 0 26px;
  padding-left: 20px;
}

.article-body li {
  margin-bottom: 8px;
}

/* A list given the class "terms" becomes the definition grid. */
.article-body ul.terms {
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.article-body ul.terms li {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 18px;
  align-items: baseline;
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
}

.article-body ul.terms li:first-child {
  border-top: 1px solid var(--line);
}

.article-body ul.terms strong {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 17px;
  color: var(--green-accent);
}

.article-body img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

.article-body figure {
  margin: 44px 0;
}

.article-body figcaption {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted-soft);
  margin-top: 10px;
}

.article-body hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 44px 0;
}

/* ---------- attached pdf ---------- */
.article-pdf {
  margin: 52px 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--cream);
}

.article-pdf-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.article-pdf-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--art-thread);
}

.article-pdf-title {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.3;
  color: var(--ink);
  margin: 6px 0 0;
  max-width: 42ch;
}

.article-pdf-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.article-pdf-btn {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--green);
  background: transparent;
  border: 1px solid rgba(33, 64, 47, 0.3);
  padding: 8px 16px;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.article-pdf-btn:hover {
  opacity: 1;
  background: var(--green);
  color: var(--cream);
  border-color: var(--green);
}

.article-pdf-btn--primary {
  background: var(--green-deep);
  color: var(--cream);
  border-color: var(--green-deep);
}

.article-pdf-frame {
  display: block;
  width: 100%;
  height: 720px;
  border: 0;
  background: #525659;
}

/* Only an editor sees this — a reader gets nothing when no PDF is attached. */
.article-pdf--empty {
  border-style: dashed;
}

.article-pdf--empty .article-pdf-head {
  border-bottom: 0;
  padding-bottom: 0;
}

.article-pdf-hint {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted-soft);
  padding: 10px 20px 18px;
  margin: 0;
}

/* Mobile browsers largely refuse to render an inline PDF — the Open and
   Download actions above are the path there instead. */
@media (max-width: 820px) {
  .article-pdf-frame {
    display: none;
  }
}

/* ---------- article footer ---------- */
.article-divider {
  max-width: var(--art-max);
  margin: 64px auto 0;
  padding: 0 24px;
}

.article-divider hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 0;
}

.article-author {
  max-width: var(--art-max);
  margin: 0 auto;
  padding: 40px 24px 90px;
  display: flex;
  gap: 18px;
}

.article-author h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  margin: 0 0 6px;
}

.article-author p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
  max-width: 52ch;
}

.article-back--footer {
  margin: 16px 0 0;
}

@media (max-width: 820px) {
  .article-cover img {
    aspect-ratio: 4 / 3;
    border-radius: 0;
  }
}

@media (max-width: 560px) {
  .article-hero {
    padding-top: 44px;
  }

  .article-body ul.terms li {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ---------- archive pages (Videos / Writings) ----------
   The listings are rendered by the Videos Archive and Writings Archive
   blocks; the intro above each one is editable page content. */

/* Faint tiled logo behind the top of the page, fading out as it descends. */
.archive-main {
  position: relative;
  isolation: isolate;
}

.archive-main::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url('assets/images/logo-bw.webp');
  background-repeat: repeat;
  background-size: 70px 70px;
  opacity: 0.04;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 15%, transparent);
  mask-image: linear-gradient(#000 15%, transparent);
}

/* The feature card and the filter chips sit in the same 65% column as the
   intro; the card grid below runs wider. */
.videos-page-body,
.blogs-page-body {
  width: 65%;
  margin: 0 auto;
}

.vid-grid-container,
.post-grid-container {
  width: 90%;
  margin: 0 auto;
  padding-bottom: 150px;
}

.vid-grid,
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 38px;
}

/* Fills the card's frame regardless of the uploaded image's shape, so a
   featured image of any aspect ratio crops rather than distorts. */
.card-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-image--empty {
  background: linear-gradient(150deg, var(--cream-soft), var(--cream-dark));
}

/* ---------- videos archive ---------- */

.vid-feature {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  align-items: center;
  gap: 44px;
  margin-bottom: 56px;
}

.vid-feature-thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
}

.vid-cat {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-accent);
}

.vid-feature-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.1;
  color: var(--ink);
  margin: 14px 0 16px;
}

.vid-feature-desc {
  max-width: 460px;
  margin-bottom: 26px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
}

.vid-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 34px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line);
}

.chip {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  border: 1px solid rgba(33, 64, 47, 0.2);
  border-radius: 100px;
  padding: 9px 20px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.chip:hover {
  border-color: rgba(33, 64, 47, 0.45);
}

.chip.is-active {
  background: var(--green-deep);
  color: var(--cream);
  border-color: var(--green-deep);
}

.vid-card {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vid-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(33, 64, 47, 0.1);
}

.vid-thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  cursor: pointer;
}

.vid-card-body {
  padding: 20px 22px 26px;
}

.vid-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.22;
  color: var(--ink);
  margin: 10px 0;
}

.vid-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted-soft);
}

/* ---------- writings archive ---------- */

.post-feature {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: 44px;
  margin-bottom: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line);
}

.post-feature:hover {
  opacity: 1;
}

.post-feature-cover {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  overflow: hidden;
}

.post-feature-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.post-cat {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-accent);
}

.post-feature-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.12;
  color: var(--ink);
  margin: 4px 0 2px;
  transition: color 0.2s ease;
}

.post-feature:hover .post-feature-title {
  color: var(--green-accent);
}

.post-feature-excerpt {
  max-width: 480px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--muted-soft);
}

.post-feature-body .btn-pill {
  align-self: flex-start;
}

.post-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.post-card:hover {
  opacity: 1;
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(33, 64, 47, 0.1);
}

.post-cover {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.post-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
  padding: 22px 22px 24px;
}

.post-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.2;
  color: var(--ink);
  margin: 2px 0;
  transition: color 0.2s ease;
}

.post-card:hover .post-title {
  color: var(--green-accent);
}

.post-excerpt {
  flex: 1;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted-soft);
}

.post-card-body .post-meta {
  margin-top: 4px;
}

.post-read-btn {
  display: inline-block;
  align-self: flex-start;
  padding: 8px 16px;
  border: 1px solid rgba(33, 64, 47, 0.3);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  color: var(--green);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.post-read-btn:hover {
  opacity: 1;
  background: var(--green);
  color: var(--cream);
  border-color: var(--green);
}

/* ---------- shared archive furniture ---------- */

.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 30px;
  border: 1px solid transparent;
  border-radius: 100px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.btn-pill--primary {
  background: var(--green-deep);
  color: var(--cream);
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 56px;
}

.pagination-num,
.pagination-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(33, 64, 47, 0.2);
  border-radius: 100px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
}

.pagination-num:hover,
.pagination-arrow:hover {
  opacity: 1;
  border-color: rgba(33, 64, 47, 0.45);
}

.pagination-num.is-active {
  background: var(--green-deep);
  color: var(--cream);
  border-color: var(--green-deep);
}

.pagination-arrow.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.pagination-arrow.is-disabled:hover {
  opacity: 0.35;
  border-color: rgba(33, 64, 47, 0.2);
}

/* Shown until the first post in the section's category is published. */
.archive-empty {
  padding: 60px 24px 90px;
  text-align: center;
}

.archive-empty-title {
  font-family: var(--serif);
  font-size: 24px;
  color: var(--ink);
  margin-bottom: 8px;
}

.archive-empty-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted-soft);
}

@media (max-width: 1080px) {
  .videos-page-body,
  .blogs-page-body {
    width: 85%;
  }

  .vid-grid-container,
  .post-grid-container {
    width: 85%;
  }

  .vid-feature,
  .post-feature {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .vid-grid,
  .post-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 820px) {
  .videos-page-body,
  .blogs-page-body {
    width: 90%;
  }

  .vid-grid-container,
  .post-grid-container {
    width: 90%;
    padding-bottom: 72px;
  }

  .vid-grid,
  .post-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .vid-feature-title,
  .post-feature-title {
    font-size: 28px;
  }
}

/* ---------- video overlay ----------
   Clicking a video card plays it here instead of leaving for YouTube.
   assets/js/video-modal.js builds this markup. */

.video-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 25, 20, 0.85);
}

.video-modal {
  position: relative;
  width: 100%;
  max-width: 960px;
}

.video-modal-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

.video-modal-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Sits above the player rather than beside it, so the 16:9 frame keeps the
   full width of the overlay on every screen. */
.video-modal-close {
  position: absolute;
  top: -46px;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  transition: background 0.2s ease;
}

.video-modal-close:hover,
.video-modal-close:focus-visible {
  background: rgba(244, 240, 228, 0.15);
}

.video-modal-close svg {
  width: 20px;
  height: 20px;
}

/* iOS cannot play an iframe inline in fullscreen, so the player is taken
   fullscreen and rotated to landscape — matching the site's own behaviour. */
@media (max-width: 820px) and (orientation: portrait) {
  .video-modal-frame:fullscreen iframe {
    position: fixed;
    top: 0;
    left: 100%;
    width: 100vh;
    height: 100vw;
    transform: rotate(90deg);
    transform-origin: 0 0;
  }
}

@media (max-width: 820px) {
  .video-modal-overlay {
    padding: 16px;
  }

  .video-modal-close {
    top: -40px;
  }
}

/* ---------- featured writings ---------- */
.featured-writing {
  position: relative;
  isolation: isolate;
  padding: 60px 48px;
  background: var(--green);
  color: var(--cream);
  text-align: center;
}

/* Tiled logo watermark over the green, same treatment as the hero. */
.featured-writing::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('assets/images/logo-bw.webp');
  background-size: 70px 70px;
  background-repeat: repeat;
  mix-blend-mode: overlay;
  opacity: 0.12;
  pointer-events: none;
  z-index: -1;
}

.featured-writing-inner {
  width: 60%;
  max-width: 720px;
  margin: 0 auto;
}

.featured-writing-cover {
  display: block;
  width: 100%;
  max-width: 560px;
  /* height:auto is required — the img's height attribute is a presentational
     hint, and a definite width+height makes the browser ignore aspect-ratio. */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
  margin: 0 auto 28px;
  border: 1px solid var(--cream);
}

.featured-writing-eyebrow {
  color: var(--green-tint);
  margin-inline: auto;
}

.featured-writing-title {
  font-weight: 700;
  font-size: 38px;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 14px auto 18px;
  max-width: 640px;
}

.featured-writing-body {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(244, 240, 228, 0.8);
  max-width: 520px;
  margin: 0 auto 28px;
}

.featured-writing-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--cream);
  color: var(--green);
  font-weight: 700;
  font-size: 15px;
  padding: 14px 28px;
  border-radius: 100px;
}

/* Shown until the first Article post is published. */
.featured-writing-empty-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.1;
  color: var(--cream);
  margin: 14px auto 14px;
}

/* Stands in for the card grid until the first Video post is published. */
.videos-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 64px 24px;
  border: 1px dashed rgba(33, 64, 47, 0.25);
  border-radius: 12px;
  background: var(--cream-soft);
}

.videos-empty-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: rgba(33, 64, 47, 0.12);
}

/* The shared triangle is cream, for use on dark thumbnails — on this light
   panel it needs the green instead. */
.videos-empty-mark .video-card-triangle {
  border-left-color: var(--green);
}

.videos-empty-title {
  font-family: var(--serif);
  font-size: 21px;
  color: var(--ink);
}

.videos-empty-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted-soft);
  max-width: 420px;
}

.video-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--cream-soft);
}

.video-card-thumb {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  background-color: var(--cream-dark);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.video-card-thumb:hover {
  opacity: 1;
}

/* Fills the 16:10 thumb regardless of the uploaded image's aspect ratio, so a
   featured image of any shape crops rather than distorts. */
.video-card-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-card-play {
  position: relative;
  z-index: 1;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(33, 64, 47, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-card-triangle {
  width: 0;
  height: 0;
  border-left: 15px solid var(--cream);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 4px;
}

.video-card-body {
  padding: 18px 18px 22px;
}

.video-card-title {
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  margin: 0 0 8px;
}

.video-card-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted-soft);
  margin: 0 0 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-card-watch {
  display: inline-block;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--green);
  background: transparent;
  border: 1px solid rgba(33, 64, 47, 0.3);
  padding: 8px 16px;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.video-card-watch:hover {
  opacity: 1;
  background: var(--green);
  color: var(--cream);
  border-color: var(--green);
}

/* WordPress core's base layout emits
   `:where(.wp-site-blocks) > * { margin-block-start: 24px }`, which puts a
   strip of the cream page background between the last section (Featured
   Writings) and the footer. The header/main/footer bands are meant to sit
   flush, so zero it. */
.wp-site-blocks > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 48px;
  background: var(--green-deep);
  color: rgba(244, 240, 228, 0.7);
  font-size: 13px;
  position: relative;
}

/* Site Editor only. On the front end a wp:html block emits its markup raw, so
   the button is a direct child of .footer. In the editor canvas it is wrapped
   in a block wrapper that the editor gives `position: relative` (it needs that
   for the block toolbar) — so the button anchored to that 44px wrapper instead
   of the footer, landing off the left edge, and the empty wrapper took a slot
   in the space-between row and shoved the brand out of the corner. Collapsing
   the wrapper restores the front-end layout. */
.footer > .block-editor-block-list__block,
.footer > .wp-block[data-type="core/html"] {
  display: contents;
}

/* Overhangs the footer's top edge at the right. The selector is deliberately
   more specific than a bare class so a stale/minified copy of this file can't
   win; the flex fallbacks (order + auto margin) keep the button on the right
   even if the absolute positioning is ever dropped, since it is the first
   child of a space-between flex row and would otherwise land far left. */
.footer .footer-to-top,
.wp-block-group.footer .footer-to-top {
  position: absolute;
  top: 0;
  right: 48px;
  left: auto;
  bottom: auto;
  transform: translateY(-50%);
  z-index: 2;
  order: 99;
  margin-left: auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--cream);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.footer .footer-to-top:hover,
.wp-block-group.footer .footer-to-top:hover {
  opacity: 0.85;
  transform: translateY(calc(-50% - 5px));
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 11px;
}

/* The image block renders <figure><a><img>>, so the height has to be carried
   down to the img itself — .footer-logo alone only sizes the figure. */
.footer-logo,
.footer-logo a,
.footer-logo img {
  display: block;
  height: 32px;
  width: auto;
  margin: 0;
}

.footer-name {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: 11px;
  color: var(--cream);
}

.footer-nav {
  display: flex;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Media Queries */

/* Collapse the scattered focus cards into a stacked column — below this width
   their absolute pixel offsets overflow the viewport. */
@media (max-width: 1080px) {
  .about {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 0;
  }

  /* centred flex items size to their content, so they need an explicit
     width or the fixed max-widths above push past the viewport */
  .about-inner {
    width: 100%;
  }

  .about-arrow {
    display: none;
  }

  .about-card {
    position: static;
    width: 100%;
    max-width: 420px;
    margin-top: 20px;
    transform: none;
  }

  .about-card--1 {
    margin-top: 44px;
  }
}

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

@media (max-width: 820px) {
  .about {
    padding-left: 24px;
    padding-right: 24px;
  }

  .videos {
    padding-left: 24px;
    padding-right: 24px;
  }

  .featured-writing {
    padding-left: 24px;
    padding-right: 24px;
  }

  .featured-writing-inner {
    width: 90%;
  }

  .featured-writing-title {
    font-size: 30px;
  }

  .videos-grid {
    grid-template-columns: 1fr;
  }

  .videos-head {
    justify-content: center;
  }

  .videos-viewall {
    display: none;
  }

  .videos-viewall--mobile {
    display: inline-flex;
    width: 100%;
    margin-top: 26px;
    padding: 22px 30px;
  }
}

@media (max-width: 720px) {
  .footer {
    flex-direction: column;
    gap: 18px;
    text-align: center;
    padding: 28px 24px;
  }

  .footer .footer-to-top,
  .wp-block-group.footer .footer-to-top {
    right: 24px;
  }
}


@media (max-width: 781px) {

  /* The two stacked bars collapse into one: logo left, hamburger right, with
     the links moving into the panel below. */
  .nav-1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 18px;
  }

  .logo {
    padding: 18px 0;
  }

  .logo img {
    height: 38px;
  }

  .nav-toggle {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    /* Pulls the 44px tap target back so the bars line up with the bar's
       18px gutter rather than sitting inset from it. */
    margin-right: -7px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
  }

  .nav-toggle-bar {
    display: block;
    width: 32px;
    height: 2px;
    border-radius: 2px;
    background: var(--cream);
    transition: transform 0.25s ease, opacity 0.2s ease;
  }

  .nav-toggle.is-open .nav-toggle-bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .nav-toggle.is-open .nav-toggle-bar:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle.is-open .nav-toggle-bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .nav-2 {
    display: none;
    /* The desktop rule centres grid items, and browsers now honour
       justify-items on block containers too — left unreset it shrink-wraps
       the open panel to the width of its longest link. */
    place-items: stretch;
    position: relative;
    padding: 28px 32px 36px;
  }

  .nav-2.is-open {
    display: block;
  }

  /* Same motif as the hero, dropped to a whisper so it reads as texture
     against the deep green rather than as artwork. */
  .nav-2::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('assets/images/logo-bw.webp');
    background-size: 70px 70px;
    background-repeat: repeat;
    opacity: 0.05;
    pointer-events: none;
  }

  .nav-2 > * {
    position: relative;
    z-index: 1;
  }

  .nav-2 ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .nav-2 ul li {
    width: auto;
  }

  .nav-2 ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 132px;
    width: fit-content;
    padding: 12px 24px;
    border: 1px solid rgba(244, 240, 228, 0.5);
    border-radius: 100px;
    font-size: 17px;
    line-height: 1.2;
  }

  .nav-2 ul li a[aria-current="page"] {
    /* The pill outline is the shared shape; the current page is marked with
       gold type instead of the desktop rule's white fill. */
    background-color: transparent;
    border-radius: 100px;
    color: var(--gold);
    font-weight: 400;
  }

  .nav-buy {
    display: block;
  }

  .nav-2 ul li.nav-buy a {
    background: #fff;
    border-color: #fff;
    color: var(--ink);
    font-weight: 700;
  }

  .nav-2 ul li.nav-buy a::before {
    content: '';
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c2b22' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.5' cy='20' r='1.2'/%3E%3Ccircle cx='18' cy='20' r='1.2'/%3E%3Cpath d='M2.5 3.5h2.7l2.5 11.6a1.4 1.4 0 0 0 1.4 1.1h8a1.4 1.4 0 0 0 1.4-1.1L21.5 8H6'/%3E%3C/svg%3E");
  }

  /* The focus cards are desktop scatter-decoration; stacked on a phone they
     bury the CTA. The same three sit on the About page the CTA links to. */
  .about-card {
    display: none;
  }

  .about-body {
    margin-bottom: 34px;
  }

  .hero-section {
    min-height: 0;
    flex-direction: column;
    padding: 0 0 40px;
    text-align: center;
  }

  /* Full-bleed on mobile: the cutout's lower edge is faded out so the body
     dissolves into the cream instead of ending on a hard crop line. */
  .hero-portrait {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    aspect-ratio: 1 / 1;
    margin-inline: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, rgba(0, 0, 0, 0) 95%);
    mask-image: linear-gradient(to bottom, #000 60%, rgba(0, 0, 0, 0) 95%);
  }

  /* Scaled past the frame so the subject reads at the same size as the
     design; the figure's overflow trims the excess off the bottom. */
  .hero-portrait img {
    position: absolute;
    top: 2%;
    left: 52%;
    transform: translateX(-50%);
    width: 106%;
    max-width: none;
    height: auto;
    object-fit: contain;
  }

  .hero-copy {
    max-width: none;
    width: 100%;
    align-items: center;
    padding: 0 22px 2rem;
    /* Rides up into the portrait's fade so the eyebrow sits over it. */
    margin-top: -38px;
  }

  .hero-copy .eyebrow {
    margin-inline: auto;
  }

  .hero-title {
    /* Tracks the viewport so the two title lines keep the same proportions
       from a 320px phone up to the breakpoint. */
    font-size: clamp(40px, 13vw, 56px);
    margin: 16px 0 18px;
  }

  /* "Adodo." drops to its own line, as in the design. */
  .hero-line {
    display: block;
  }

  .hero-lede {
    max-width: none;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 12px;
    margin-top: 28px;
  }

  .hero-btn,
  .hero-btn .wp-block-button__link {
    width: 100%;
  }

  .hero-btn .wp-block-button__link {
    padding: 18px 24px;
    font-size: 16px;
  }
}