/*
Theme Name: Boris Peña López
Theme URI: https://borispenalopez.com
Author: Boris Peña López
Author URI: https://borispenalopez.com
Description: A fast, dark, editorial theme built for an operator's personal site — ventures, speaking, and a public founder log. No page builder required.
Version: 1.0.2
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: borispenalopez
Tags: one-column, custom-menu, custom-logo, featured-images, blog, editor-style, translation-ready
*/

/* ============================================================
   1. Tokens
   ============================================================ */
:root {
  --bg:        #0b0b0c;
  --bg-2:      #121215;
  --bg-elev:   #17171b;
  --paper:     #f3f1ed;
  --paper-2:   #e7e3dc;
  --fg:        #f4f2ef;
  --fg-muted:  #97979f;
  --fg-ink:    #111113;
  --fg-ink-muted: #55555d;
  --line:      #26262c;
  --line-ink:  #d4cfc6;
  --accent:    #ff4d19;
  --accent-ink:#d93c0c;

  --max:       1180px;
  --gutter:    clamp(20px, 5vw, 56px);
  --section-y: clamp(72px, 10vw, 136px);

  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.33rem + 0.85vw, 2.1rem);
  --step-3:  clamp(1.95rem, 1.6rem + 1.75vw, 3.1rem);
  --step-4:  clamp(2.5rem, 1.75rem + 3.75vw, 5rem);
}

/* ============================================================
   2. Reset & base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1.1em; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.08; letter-spacing: -0.025em; font-weight: 650; text-wrap: balance; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
ul, ol { padding-left: 1.15em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
blockquote {
  margin: 2rem 0; padding: .2rem 0 .2rem 1.4rem;
  border-left: 3px solid var(--accent);
  font-size: var(--step-1); line-height: 1.45; color: var(--fg);
}
code, pre, kbd { font-family: var(--font-mono); font-size: .9em; }
pre { background: var(--bg-elev); border: 1px solid var(--line); padding: 1.1rem; overflow-x: auto; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--accent); color: #fff; padding: .75rem 1.25rem; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ============================================================
   3. Layout primitives
   ============================================================ */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 760px; }
.section { padding-block: var(--section-y); }
.section--paper { background: var(--paper); color: var(--fg-ink); }
.section--paper h1, .section--paper h2, .section--paper h3 { color: var(--fg-ink); }
.section--alt { background: var(--bg-2); }
.section + .section--alt, .section--alt + .section { border-top: 1px solid var(--line); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.1rem;
  display: flex; align-items: center; gap: .7rem;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; flex: none; }
.section--paper .eyebrow { color: var(--accent-ink); }

.lede { font-size: var(--step-1); line-height: 1.5; color: var(--fg-muted); max-width: 62ch; }
.section--paper .lede { color: var(--fg-ink-muted); }

/* ============================================================
   4. Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .9rem 1.5rem;
  font-weight: 600; font-size: var(--step--1); letter-spacing: .02em;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: #ff6236; }
.btn--ghost { border-color: var(--line); color: var(--fg); }
.btn--ghost:hover { border-color: var(--fg); }
.section--paper .btn--ghost { border-color: var(--line-ink); color: var(--fg-ink); }
.section--paper .btn--ghost:hover { border-color: var(--fg-ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }

.arrow { transition: transform .18s ease; }
.btn:hover .arrow, .card:hover .arrow { transform: translateX(4px); }

/* ============================================================
   5. Header
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-height: 68px;
}
.brand { display: flex; align-items: center; gap: .7rem; font-weight: 650; letter-spacing: -0.02em; }
.brand__mark {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  font-family: var(--font-mono); font-size: .78rem; font-weight: 700; letter-spacing: -0.04em;
}
.brand__text { font-size: 1rem; }
.brand__text small { display: block; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .17em; text-transform: uppercase; color: var(--fg-muted); font-weight: 500; }

.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav ul { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.nav a { font-size: var(--step--1); font-weight: 500; color: var(--fg-muted); transition: color .15s ease; }
.nav a:hover, .nav .current-menu-item > a, .nav .current_page_item > a { color: var(--fg); }
.header-cta { display: inline-flex; }
/* The CTA inside the drawer is for narrow screens only; the header keeps its own. */
@media (min-width: 861px) { .nav > .btn { display: none; } }

.nav-toggle {
  display: none; width: 42px; height: 42px; background: none; border: 1px solid var(--line);
  color: var(--fg); cursor: pointer; padding: 0; place-items: center;
}
.nav-toggle span { display: block; width: 17px; height: 1.5px; background: currentColor; position: relative; transition: background .15s ease; }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 1.5px; background: currentColor; transition: transform .2s ease;
}
.nav-toggle span::before { top: -5px; }
.nav-toggle span::after  { top: 5px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: grid; }
  .nav {
    position: fixed; inset: 68px 0 auto 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--gutter); display: none;
  }
  .nav.is-open { display: flex; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav li { border-bottom: 1px solid var(--line); }
  .nav a { display: block; padding: 1rem 0; font-size: var(--step-1); color: var(--fg); }
  .header-cta { display: none; }
  .nav .btn { margin-top: 1.5rem; justify-content: center; }
}

/* ============================================================
   6. Hero
   ============================================================ */
.hero { position: relative; padding-block: clamp(80px, 13vw, 170px) clamp(56px, 8vw, 100px); overflow: hidden; }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(720px 380px at 82% -8%, rgba(255,77,25,.20), transparent 68%),
    radial-gradient(560px 340px at 6% 108%, rgba(255,77,25,.08), transparent 70%);
}
.hero > * { position: relative; z-index: 1; }
.hero__status {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-mono); font-size: var(--step--1); color: var(--fg-muted);
  border: 1px solid var(--line); padding: .45rem .85rem; margin-bottom: 2rem;
}
.hero__status i {
  width: 7px; height: 7px; background: var(--accent); border-radius: 50%; flex: none;
  box-shadow: 0 0 0 0 rgba(255,77,25,.6); animation: pulse 2.4s infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 9px rgba(255,77,25,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,77,25,0); }
}
.hero h1 { max-width: 15ch; margin-bottom: .35em; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero__lede { font-size: var(--step-1); line-height: 1.5; color: var(--fg-muted); max-width: 54ch; }

.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); margin-top: clamp(48px, 7vw, 84px);
}
/* Flex column + margin-top:auto keeps every label on the same baseline,
   however many lines the number above it takes. */
.stat { background: var(--bg); padding: 1.5rem 1.4rem; display: flex; flex-direction: column; }
.stat__num { font-size: var(--step-2); font-weight: 650; letter-spacing: -0.03em; line-height: 1.1; margin: 0; }
.stat__label {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-muted);
  margin: auto 0 0; padding-top: .8rem;
}

/* ============================================================
   7. Section heading
   ============================================================ */
.sec-head { display: grid; gap: 1.5rem; margin-bottom: clamp(40px, 5vw, 64px); }
@media (min-width: 900px) {
  .sec-head { grid-template-columns: 1fr 1fr; align-items: end; gap: 3rem; }
  .sec-head__aside { padding-bottom: .4rem; }
}
.sec-head h2 { margin-bottom: 0; }

/* ============================================================
   8. Ventures
   ============================================================ */
.ventures { display: grid; gap: 1px; background: var(--line-ink); border: 1px solid var(--line-ink); }
@media (min-width: 860px) { .ventures { grid-template-columns: repeat(3, 1fr); } }
.venture {
  background: var(--paper); padding: clamp(28px, 3.4vw, 44px);
  display: flex; flex-direction: column; gap: .9rem;
  transition: background-color .2s ease;
}
.venture:hover { background: var(--paper-2); }
.venture__idx { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .16em; color: var(--accent-ink); }
.venture h3 { margin: 0; font-size: var(--step-1); }
.venture p { margin: 0; color: var(--fg-ink-muted); font-size: var(--step--1); line-height: 1.62; }
.venture__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: 1.4rem; }
.venture__tags span {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--line-ink); padding: .3rem .55rem; color: var(--fg-ink-muted);
}
.venture__link { font-size: var(--step--1); font-weight: 600; color: var(--accent-ink); display: inline-flex; gap: .4rem; align-items: center; }

/* ============================================================
   9. Services
   ============================================================ */
.services { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 760px) { .services { grid-template-columns: repeat(2, 1fr); } }
.service { background: var(--bg); padding: clamp(28px, 3.4vw, 44px); }
.service h3 { display: flex; align-items: baseline; gap: .8rem; }
.service h3 b { font-family: var(--font-mono); font-size: .72rem; color: var(--accent); font-weight: 500; letter-spacing: .1em; }
.service p { color: var(--fg-muted); font-size: var(--step--1); margin: 0; }

/* ============================================================
   10. Principles
   ============================================================ */
.principles { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.principle {
  border-bottom: 1px solid var(--line);
  display: grid; gap: .4rem 2.5rem; padding-block: clamp(24px, 3vw, 34px);
  transition: padding-left .22s ease;
}
@media (min-width: 820px) {
  .principle { grid-template-columns: 72px minmax(0, 22ch) 1fr; align-items: baseline; }
  .principle:hover { padding-left: 12px; }
}
.principle__n { font-family: var(--font-mono); font-size: .78rem; color: var(--accent); letter-spacing: .1em; }
.principle__t { font-size: var(--step-1); font-weight: 650; letter-spacing: -0.02em; }
.principle__d { color: var(--fg-muted); font-size: var(--step--1); margin: 0; }

/* ============================================================
   11. Post cards / FLoG
   ============================================================ */
.cards { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 760px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: var(--bg); padding: clamp(26px, 3vw, 38px);
  display: flex; flex-direction: column; gap: .8rem; min-height: 240px;
  transition: background-color .2s ease;
}
.card:hover { background: var(--bg-elev); }
.card__meta { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); display: flex; gap: .7rem; flex-wrap: wrap; }
.card__meta .sep { color: var(--line); }
.card h3 { margin: 0; font-size: var(--step-1); }
.card p { margin: 0; color: var(--fg-muted); font-size: var(--step--1); }
.card__more { margin-top: auto; padding-top: 1.4rem; font-size: var(--step--1); font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: .45rem; }
.card__thumb { margin: -.2rem 0 .4rem; aspect-ratio: 16 / 9; overflow: hidden; }
.card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.card:hover .card__thumb img { transform: scale(1.04); }

/* ============================================================
   12. CTA band
   ============================================================ */
.cta { background: var(--accent); color: #fff; }
.cta h2 { color: #fff; max-width: 18ch; }
.cta p { color: rgba(255,255,255,.86); max-width: 52ch; font-size: var(--step-1); line-height: 1.5; }
.cta .btn--primary { background: #fff; color: var(--fg-ink); }
.cta .btn--primary:hover { background: var(--fg-ink); color: #fff; }
.cta .btn--ghost { border-color: rgba(255,255,255,.45); color: #fff; }
.cta .btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); }
.cta__grid { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .cta__grid { grid-template-columns: 1.1fr .9fr; align-items: center; } }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: rgba(255,255,255,.28); border: 1px solid rgba(255,255,255,.28); }
.contact-list li { background: var(--accent); padding: 1.15rem 1.35rem; display: flex; justify-content: space-between; gap: 1rem; align-items: center; flex-wrap: wrap; }
.contact-list dt, .contact-list .k { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.contact-list .v { font-weight: 600; word-break: break-word; }
.contact-list a:hover { text-decoration: underline; }

/* ============================================================
   13. Page / entry content
   ============================================================ */
.page-hero { padding-block: clamp(64px, 9vw, 120px) clamp(32px, 4vw, 48px); border-bottom: 1px solid var(--line); }
.page-hero h1 { max-width: 20ch; }
.page-hero .lede { margin-top: 1.2rem; }

.entry { padding-block: clamp(48px, 7vw, 88px); }
.entry-content { font-size: var(--step-0); line-height: 1.75; }
.entry-content > * { margin-bottom: 1.35em; }
.entry-content h2 { font-size: var(--step-2); margin-top: 2.2em; }
.entry-content h3 { font-size: var(--step-1); margin-top: 1.8em; }
.entry-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.entry-content a:hover { color: var(--fg); }
.entry-content img, .entry-content figure { margin-block: 2rem; }
.entry-content figcaption { font-size: var(--step--1); color: var(--fg-muted); margin-top: .7rem; font-family: var(--font-mono); }
.entry-content ul, .entry-content ol { padding-left: 1.3em; }
.entry-content li { margin-bottom: .5em; }
.entry-content table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.entry-content th, .entry-content td { border: 1px solid var(--line); padding: .7rem .9rem; text-align: left; }

.entry-meta { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1.6rem; }
.entry-thumb { margin-bottom: clamp(32px, 5vw, 56px); }
.entry-thumb img { width: 100%; max-height: 560px; object-fit: cover; }

.post-nav { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); margin-top: clamp(48px, 7vw, 80px); }
@media (min-width: 700px) { .post-nav { grid-template-columns: 1fr 1fr; } }
.post-nav a { background: var(--bg); padding: 1.8rem; display: block; transition: background-color .2s ease; }
.post-nav a:hover { background: var(--bg-elev); }
.post-nav .k { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); display: block; margin-bottom: .5rem; }
.post-nav .t { font-weight: 600; }
.post-nav .next { text-align: right; }

.pagination { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: clamp(40px, 6vw, 64px); font-family: var(--font-mono); font-size: var(--step--1); }
.pagination .page-numbers { border: 1px solid var(--line); padding: .6rem .95rem; color: var(--fg-muted); transition: border-color .15s ease, color .15s ease; }
.pagination .page-numbers:hover { border-color: var(--fg); color: var(--fg); }
.pagination .current { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Alignment support */
.alignleft  { float: left;  margin: .4rem 1.6rem 1.2rem 0; }
.alignright { float: right; margin: .4rem 0 1.2rem 1.6rem; }
.aligncenter { margin-inline: auto; }
.alignwide, .alignfull { margin-inline: auto; }
@media (min-width: 1100px) { .entry-content .alignwide { width: min(1000px, 92vw); margin-inline: calc(50% - min(500px, 46vw)); max-width: none; } }
.wp-caption { max-width: 100%; }
.sticky .card__meta::after { content: "PINNED"; color: var(--accent); }

/* Search form */
.search-form { display: flex; gap: .5rem; max-width: 460px; }
.search-form input[type="search"] {
  flex: 1; background: var(--bg-elev); border: 1px solid var(--line); color: var(--fg);
  padding: .85rem 1rem; font: inherit; font-size: var(--step--1);
}
.search-form input[type="search"]:focus { border-color: var(--accent); outline: none; }

/* ============================================================
   14. Footer
   ============================================================ */
.site-footer { border-top: 1px solid var(--line); background: var(--bg-2); padding-block: clamp(48px, 7vw, 80px) 2rem; }
.site-footer__grid { display: grid; gap: 2.5rem; }
@media (min-width: 820px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; } }
.site-footer h4 { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-muted); font-weight: 500; margin-bottom: 1.1rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.site-footer a { color: var(--fg-muted); font-size: var(--step--1); transition: color .15s ease; }
.site-footer a:hover { color: var(--fg); }
.site-footer__blurb { color: var(--fg-muted); font-size: var(--step--1); max-width: 42ch; }
.site-footer__bottom {
  margin-top: clamp(40px, 6vw, 64px); padding-top: 1.6rem; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted);
}

/* ============================================================
   15. Reveal on scroll
   ============================================================ */
/* Scoped to .js so that without JavaScript everything is simply visible. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* ============================================================
   16. Hero with portrait
   ============================================================ */
.hero__grid { display: grid; gap: clamp(36px, 5vw, 64px); }
@media (min-width: 940px) {
  .hero--photo .hero__grid { grid-template-columns: 1.15fr .85fr; align-items: center; }
}
.hero__photo { position: relative; }
.hero__photo::before {
  content: ""; position: absolute; inset: 14px -14px -14px 14px;
  border: 1px solid var(--accent); z-index: 0; pointer-events: none;
}
.hero__photo img {
  position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 5;
  object-fit: cover; filter: grayscale(1) contrast(1.08);
  transition: filter .4s ease;
}
.hero__photo:hover img { filter: grayscale(0) contrast(1); }
.hero--photo h1 { max-width: 13ch; }

/* ============================================================
   17. Chapters (About)
   ============================================================ */
.chapters { border-top: 1px solid var(--line); }
.chapter {
  border-bottom: 1px solid var(--line);
  display: grid; gap: 1.4rem 3rem;
  padding-block: clamp(34px, 4.5vw, 56px);
}
@media (min-width: 880px) {
  .chapter { grid-template-columns: 190px minmax(0, 1fr); }
  .chapter--photo { grid-template-columns: 190px minmax(0, 1fr) 260px; }
}
.chapter__marker { display: flex; flex-direction: column; gap: .4rem; }
.chapter__label {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
}
.chapter__years { font-family: var(--font-mono); font-size: .8rem; color: var(--fg-muted); }
.chapter__body h3 { font-size: var(--step-2); margin-bottom: .5rem; }
.chapter__body p { color: var(--fg-muted); margin: 0; max-width: 62ch; }
.chapter__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) contrast(1.06); }

/* ============================================================
   18. Takeaways (Speaking)
   ============================================================ */
.takeaways {
  list-style: none; margin: 0 0 clamp(40px, 5vw, 60px); padding: 0;
  display: grid; gap: .9rem;
}
@media (min-width: 760px) { .takeaways { grid-template-columns: repeat(2, 1fr); gap: .9rem 2.5rem; } }
.takeaways li {
  display: flex; align-items: flex-start; gap: .8rem;
  padding-bottom: .9rem; border-bottom: 1px solid var(--line);
  font-size: var(--step-0);
}
.takeaways span { color: var(--accent); font-weight: 700; flex: none; line-height: 1.5; }

/* ============================================================
   19. Contact page
   ============================================================ */
.contact-grid { display: grid; gap: clamp(40px, 6vw, 72px); }
@media (min-width: 960px) { .contact-grid { grid-template-columns: 1.25fr .75fr; align-items: start; } }
.contact-aside h3 { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-muted); font-weight: 500; margin-bottom: 1.1rem; }
.contact-aside .contact-list { background: var(--line); border-color: var(--line); }
.contact-aside .contact-list li { background: var(--bg-elev); }
.contact-aside .contact-list .k { color: var(--fg-muted); }

.direct-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.direct-list a {
  background: var(--bg-elev); padding: 1.1rem 1.35rem;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-weight: 600; font-size: var(--step--1); transition: background-color .18s ease, color .18s ease;
}
.direct-list a:hover { background: var(--accent); color: #fff; }

/* ============================================================
   20. Forms
   ============================================================ */
.form-wrap { max-width: 680px; }
.field { display: grid; gap: .5rem; margin: 0 0 1.2rem; }
.field-row { display: grid; gap: 0 1.2rem; }
@media (min-width: 620px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field label, .comment-form label {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-muted);
}
.field label span { color: var(--accent); }
.field input, .field select, .field textarea,
.comment-form input:not([type="checkbox"]):not([type="submit"]), .comment-form textarea {
  width: 100%; background: var(--bg-elev); border: 1px solid var(--line); color: var(--fg);
  padding: .9rem 1rem; font: inherit; font-size: var(--step-0);
  transition: border-color .15s ease, background-color .15s ease;
}
.field textarea, .comment-form textarea { resize: vertical; min-height: 150px; }
.field input:focus, .field select:focus, .field textarea:focus,
.comment-form input:focus, .comment-form textarea:focus {
  border-color: var(--accent); outline: none; background: var(--bg-2);
}
.field input::placeholder, .field textarea::placeholder { color: #5f5f68; }
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-muted) 50%), linear-gradient(135deg, var(--fg-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.8rem;
}
.field select option { background: var(--bg-elev); color: var(--fg); }

.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-notice { border-left: 3px solid var(--accent); padding: 1rem 1.2rem; background: var(--bg-elev); margin-bottom: 1.8rem; font-size: var(--step--1); }
.form-notice--ok { border-left-color: #34d17c; }
.form-notice--error { border-left-color: #ff4d19; }
.form-fineprint { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; color: var(--fg-muted); margin: 1.1rem 0 0; }

/* ============================================================
   21. Comments
   ============================================================ */
.comments { margin-top: clamp(48px, 7vw, 80px); }
.comment-list { list-style: none; margin: 0 0 3rem; padding: 0; }
.comment-list li { border-top: 1px solid var(--line); padding-block: 1.6rem; }
.comment-list .children { list-style: none; padding-left: clamp(16px, 4vw, 40px); }
.comment-author { display: flex; align-items: center; gap: .7rem; font-weight: 600; }
.comment-author img { border-radius: 50%; }
.comment-metadata { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); margin: .4rem 0 .9rem; }
.comment-content { color: var(--fg-muted); }
.comment-reply-link { font-size: var(--step--1); color: var(--accent); font-weight: 600; }
.comment-form { max-width: 680px; }
.comment-form p { margin-bottom: 1.2rem; }
.comment-form .submit { display: inline-flex; align-items: center; gap: .6rem; padding: .9rem 1.5rem; font-weight: 600; font-size: var(--step--1); background: var(--accent); color: #fff; border: 0; cursor: pointer; }
.comment-form .submit:hover { background: #ff6236; }
.comment-form .comment-notes, .comment-form .form-submit { font-size: var(--step--1); color: var(--fg-muted); }

/* ============================================================
   22. Footer widgets
   ============================================================ */
.footer-widget { margin-bottom: 1.4rem; font-size: var(--step--1); color: var(--fg-muted); }
/* Block-based widgets emit their own heading level, so normalise them all. */
.footer-widget h1, .footer-widget h2, .footer-widget h3, .footer-widget h4, .footer-widget h5,
.footer-widget .wp-block-heading {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--fg-muted); font-weight: 500;
  margin: 0 0 .9rem; letter-spacing: .16em;
}
.footer-widget ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.footer-widget li { font-size: var(--step--1); }

/* ============================================================
   23. Print
   ============================================================ */
@media print {
  .site-header, .site-footer, .cta, .nav-toggle, .btn-row, .post-nav, .comments { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
}

/* ============================================================
   24. Page-builder content (Elementor, WPBakery, Divi, Beaver)
   ------------------------------------------------------------
   Layouts made in a page builder are authored against whatever
   background the previous theme had, and bake near-black text
   colours into their own stylesheet. On this theme's dark canvas
   that text disappears, so such content gets the light band it
   was designed for instead of being forced onto the dark one.
   ============================================================ */
.builder-canvas {
  background: var(--paper);
  color: var(--fg-ink);
  padding-block: clamp(40px, 6vw, 72px);
  padding-inline: var(--gutter);
  border-top: 1px solid var(--line);
}
.builder-canvas .entry-content { font-size: var(--step-0); }
.builder-canvas .entry-content > * { margin-bottom: 0; }

/* Anything in there without its own colour inherits a readable one. */
.builder-canvas :where(h1, h2, h3, h4, h5, h6, p, li, td, th, dt, dd, blockquote, figcaption, span) {
  color: inherit;
}
/* The theme's own link colour must not reach a builder's buttons: they are
   filled shapes that carry their own palette, and `.entry-content a` outranks
   the builder's own rule. Seen live as accent orange, underlined, on a green
   Elementor button. White is what every one of these builders fills with. */
.builder-canvas .entry-content a[class*="elementor-button"],
.builder-canvas .entry-content a[class*="et_pb_button"],
.builder-canvas .entry-content a[class*="vc_btn"],
.builder-canvas .entry-content a[class*="fl-button"] {
  color: #fff;
  text-decoration: none;
}
/* Plain links inside builder content, kept above `.entry-content a`. */
.builder-canvas .entry-content a:not([class*="button"]):not([class*="btn"]) { color: var(--accent-ink); }
.builder-canvas .entry-content a:not([class*="button"]):not([class*="btn"]):hover { color: var(--fg-ink); }
.builder-canvas hr, .builder-canvas :where(table) th, .builder-canvas :where(table) td { border-color: var(--line-ink); }

/* A real builder wrapper handles its own gutters, so give it the full width
   back. Anything else keeps the gutter above and never touches the edge. */
.builder-canvas .entry-content > :where(.elementor, .wpb_row, .et_pb_section, .fl-builder-content) {
  width: auto; max-width: none;
  margin-inline: calc(var(--gutter) * -1);
}

/* Keep the theme's own sections readable when a builder page also uses a template. */
.builder-canvas + .section { border-top: 1px solid var(--line); }