:root {
  --ink: #152929;
  --cream: #f3f0e8;
  --paper: #fbf9f3;
  --copper: #c7663b;
  --copper-light: #e08a65;
  --sage: #9ba596;
  --line: rgba(21, 41, 41, .18);
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--cream); color: var(--ink); font-family: var(--sans); margin: 0; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--copper); outline-offset: 4px; }
.skip-link { background: var(--paper); left: 1rem; padding: .7rem 1rem; position: fixed; top: -5rem; z-index: 100; }
.skip-link:focus { top: 1rem; }

.site-header {
  align-items: center; background: rgba(243,240,232,.94); border-bottom: 1px solid var(--line); display: grid;
  gap: 2rem; grid-template-columns: 1fr auto 1fr; min-height: 88px; padding: 0 4.5vw; position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(12px);
}
.brand { align-items: center; display: inline-flex; gap: .8rem; justify-self: start; }
.brand-mark { align-items: center; border: 1px solid currentColor; border-radius: 50%; display: inline-flex; font-family: var(--serif); font-size: .7rem; height: 38px; justify-content: center; letter-spacing: .08em; width: 38px; }
.brand strong { display: block; font-family: var(--serif); font-size: 1.08rem; font-weight: 500; }
.brand small { display: block; font-size: .64rem; letter-spacing: .14em; margin-top: .15rem; text-transform: uppercase; }
#main-nav { display: flex; font-size: .78rem; font-weight: 650; gap: clamp(1rem, 2vw, 2.2rem); }
#main-nav a, .text-link { border-bottom: 1px solid transparent; padding: .25rem 0; }
#main-nav a:hover, .text-link:hover { border-bottom-color: currentColor; }
.header-cta { border: 1px solid var(--ink); border-radius: 999px; font-size: .76rem; font-weight: 700; justify-self: end; padding: .75rem 1.1rem; transition: .2s ease; }
.header-cta:hover { background: var(--ink); color: var(--cream); }
.menu-toggle { background: transparent; border: 1px solid var(--ink); border-radius: 999px; display: none; font-size: .72rem; font-weight: 700; padding: .65rem .85rem; }

.hero { display: grid; gap: clamp(2rem, 6vw, 7rem); grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); min-height: calc(100vh - 88px); padding: clamp(3rem, 7vh, 6rem) 4.5vw 3.5rem; }
.hero-copy { align-self: center; }
.eyebrow { align-items: center; display: flex; font-size: .7rem; font-weight: 750; letter-spacing: .14em; margin: 0 0 2rem; text-transform: uppercase; }
.eyebrow span { background: var(--copper); border-radius: 50%; flex: 0 0 auto; height: 7px; margin-right: .7rem; width: 7px; }
.eyebrow.light span { background: var(--copper-light); }
.hero h1, .section-heading h2, .course-intro h2, .teacher-copy h2, .first-course h2, .archive-hero h1 { font-family: var(--serif); font-weight: 400; letter-spacing: -.055em; margin: 0; }
.hero h1 { font-size: clamp(4.2rem, 7.2vw, 8.2rem); line-height: .78; }
h1 em, h2 em { color: var(--copper); font-weight: 400; }
.hero-intro { font-family: var(--serif); font-size: clamp(1.05rem, 1.4vw, 1.35rem); line-height: 1.55; margin: 2.5rem 0 0; max-width: 610px; }
.hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 2.1rem; }
.button { border-radius: 999px; display: inline-flex; font-size: .82rem; font-weight: 750; justify-content: center; padding: 1rem 1.35rem; transition: .2s ease; }
.button-primary { background: var(--ink); color: white; }
.button-primary:hover { background: var(--copper); }
.text-link { font-size: .8rem; font-weight: 700; }
.text-link span { color: var(--copper); font-size: 1.1rem; margin-left: .25rem; }
.quick-facts { border-top: 1px solid var(--line); display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); list-style: none; margin: clamp(2.4rem, 7vh, 5.5rem) 0 0; max-width: 700px; padding: 1.25rem 0 0; }
.quick-facts li { display: grid; gap: .2rem; }
.quick-facts strong { font-family: var(--serif); font-size: .96rem; font-weight: 500; }
.quick-facts span { font-size: .68rem; opacity: .68; }

.practice-card { align-self: stretch; background: var(--ink); color: var(--cream); display: flex; flex-direction: column; min-height: 600px; padding: 1.5rem; position: relative; }
.practice-card-top { display: flex; font-size: .63rem; font-weight: 700; justify-content: space-between; letter-spacing: .16em; text-transform: uppercase; }
.practice-orbit { flex: 1; min-height: 340px; position: relative; }
.orbit { border: 1px solid rgba(243, 240, 232, .23); border-radius: 50%; left: 50%; position: absolute; top: 48%; transform: translate(-50%, -50%); }
.orbit-one { height: min(27vw, 360px); width: min(27vw, 360px); }
.orbit-two { height: min(18vw, 240px); width: min(18vw, 240px); }
.breath-line { background: var(--copper); height: 1px; left: 50%; position: absolute; top: 48%; transform-origin: left center; width: min(15vw, 210px); }
.breath-one { transform: rotate(24deg); }
.breath-two { transform: rotate(156deg); }
.center-word { font-family: var(--serif); font-size: clamp(2rem, 3vw, 3.6rem); left: 50%; line-height: .9; position: absolute; text-align: center; top: 48%; transform: translate(-50%, -50%); }
.center-word em { color: var(--copper-light); font-weight: 400; }
.pillar-list { border-top: 1px solid rgba(243, 240, 232, .22); display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0; padding: 0; }
.pillar-list li { border-right: 1px solid rgba(243, 240, 232, .15); display: grid; gap: .55rem; padding: 1rem .65rem 0; }
.pillar-list li:last-child { border-right: 0; }
.pillar-list span { color: var(--copper-light); font-size: .62rem; }
.pillar-list strong { font-family: var(--serif); font-size: clamp(.72rem, 1vw, .95rem); font-weight: 400; }

.section-pad { padding: clamp(5rem, 10vw, 10rem) 7vw; }
.section-heading { max-width: 850px; }
.section-heading h2, .course-intro h2, .first-course h2 { font-size: clamp(3.3rem, 6vw, 7rem); line-height: .88; }
.principle-grid { border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(3rem, 6vw, 6rem); }
.principle-grid article { border-right: 1px solid var(--line); min-height: 310px; padding: 1.6rem clamp(1.4rem, 3vw, 3rem) 0 0; }
.principle-grid article + article { padding-left: clamp(1.4rem, 3vw, 3rem); }
.principle-grid article:last-child { border-right: 0; }
.principle-grid article > span { color: var(--copper); font-size: .68rem; font-weight: 800; }
.principle-grid h3 { font-family: var(--serif); font-size: 2rem; font-weight: 400; margin: 3rem 0 1rem; }
.principle-grid p { font-size: .92rem; line-height: 1.7; max-width: 330px; opacity: .78; }

.course-section { background: var(--ink); color: var(--cream); display: grid; gap: clamp(4rem, 9vw, 10rem); grid-template-columns: .85fr 1.15fr; }
.course-intro > p:not(.eyebrow) { font-family: var(--serif); font-size: 1.15rem; line-height: 1.65; margin: 2.4rem 0; max-width: 480px; }
.course-intro h2 em { color: var(--copper-light); }
.button-light { border: 1px solid rgba(243,240,232,.6); color: var(--cream); }
.button-light:hover { background: var(--cream); color: var(--ink); }
.course-steps { list-style: none; margin: 0; padding: 0; }
.course-steps li { align-items: start; border-top: 1px solid rgba(243,240,232,.2); display: grid; gap: 2rem; grid-template-columns: 2.2rem 1fr; padding: 1.4rem 0; }
.course-steps li:last-child { border-bottom: 1px solid rgba(243,240,232,.2); }
.course-steps li > span { color: var(--copper-light); font-size: .66rem; font-weight: 750; padding-top: .35rem; }
.course-steps h3 { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; margin: 0 0 .35rem; }
.course-steps p { font-size: .8rem; margin: 0; opacity: .68; }

.teacher { align-items: stretch; display: grid; gap: 7vw; grid-template-columns: 1fr 1fr; }
.teacher-statement { background: var(--copper); color: #fff; display: flex; flex-direction: column; justify-content: space-between; min-height: 580px; padding: clamp(2rem, 5vw, 4.5rem); position: relative; }
.teacher-statement::after { border: 1px solid rgba(255,255,255,.28); border-radius: 50%; content: ""; height: 42%; position: absolute; right: 8%; top: 8%; width: 42%; }
.statement-mark { font-family: var(--serif); font-size: 8rem; line-height: .5; opacity: .55; }
.teacher-statement blockquote { font-family: var(--serif); font-size: clamp(1.7rem, 3.1vw, 3.7rem); line-height: 1.06; margin: auto 0 0; position: relative; }
.teacher-copy { align-self: center; }
.teacher-copy h2 { font-size: clamp(2.7rem, 4.5vw, 5rem); line-height: .95; }
.teacher-copy > p:not(.eyebrow) { font-size: .96rem; line-height: 1.8; margin: 2rem 0 0; max-width: 570px; }

.article-selection { background: var(--paper); }
.row-heading { align-items: end; display: flex; justify-content: space-between; max-width: none; }
.row-heading .text-link { margin-bottom: .7rem; }
.article-grid { border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 4rem; }
.article-card { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 420px; padding: 1.6rem 2.3rem 1.7rem 0; }
.article-card + .article-card { padding-left: 2.3rem; }
.article-card:last-child { border-right: 0; }
.article-meta { display: flex; font-size: .62rem; font-weight: 700; justify-content: space-between; letter-spacing: .05em; text-transform: uppercase; }
.article-meta time { opacity: .55; }
.article-card h3 { font-family: var(--serif); font-size: clamp(1.8rem, 2.6vw, 3.3rem); font-weight: 400; line-height: 1.02; margin: 4rem 0 1.2rem; }
.article-card p { font-size: .86rem; line-height: 1.65; opacity: .7; }
.card-link { border-top: 1px solid var(--line); display: flex; font-size: .72rem; font-weight: 750; justify-content: space-between; margin-top: auto; padding-top: 1rem; }
.card-link span { color: var(--copper); font-size: 1rem; }

.faq { display: grid; gap: 7vw; grid-template-columns: .8fr 1.2fr; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); padding: 1.35rem 0; }
.faq-list summary { cursor: pointer; font-family: var(--serif); font-size: 1.28rem; list-style: none; padding-right: 3rem; position: relative; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { color: var(--copper); font-family: var(--sans); font-size: 1.4rem; position: absolute; right: .5rem; transition: transform .2s; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { font-size: .88rem; line-height: 1.75; max-width: 650px; opacity: .72; }

.first-course { background: var(--ink); color: var(--cream); display: grid; gap: 7vw; grid-template-columns: 1fr 1fr; }
.first-course h2 em { color: var(--copper-light); }
.first-course-copy { align-self: end; }
.first-course-copy > p:first-child { font-family: var(--serif); font-size: 1.2rem; line-height: 1.65; max-width: 620px; }
.first-course-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 2rem; }
.button-copper { background: var(--copper); color: #fff; }
.button-copper:hover { background: var(--cream); color: var(--ink); }
.light-link { border-bottom-color: rgba(243,240,232,.4); }
.microcopy { font-size: .67rem; margin-top: 1rem; opacity: .58; }

footer { background: #0c1d1d; color: var(--cream); display: grid; font-size: .77rem; gap: 3rem; grid-template-columns: 1.6fr 1fr 1fr; padding: 4rem 7vw 2rem; }
footer > div:not(.brand) { display: grid; gap: .45rem; }
footer > div > span { color: var(--copper-light); font-size: .62rem; font-weight: 800; letter-spacing: .12em; margin-bottom: .55rem; text-transform: uppercase; }
footer p { border-top: 1px solid rgba(243,240,232,.14); grid-column: 1 / -1; margin: 2rem 0 0; opacity: .45; padding-top: 1.4rem; }

/* Article directory */
.archive-hero { border-bottom: 1px solid var(--line); display: grid; gap: 4rem; grid-template-columns: 1.3fr .7fr; padding: clamp(4rem, 9vw, 8rem) 7vw; }
.archive-hero h1 { font-size: clamp(4rem, 8vw, 9rem); line-height: .78; }
.archive-hero aside { align-self: end; border-left: 1px solid var(--line); padding-left: 2rem; }
.archive-hero aside strong { display: block; font-family: var(--serif); font-size: 4rem; font-weight: 400; line-height: 1; margin-bottom: .75rem; }
.archive-hero aside p { font-size: .8rem; line-height: 1.6; opacity: .7; }
.archive-tools { align-items: center; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; padding: 1.3rem 7vw; position: sticky; top: 88px; z-index: 10; background: rgba(243,240,232,.95); backdrop-filter: blur(10px); }
.search-field { min-width: min(100%, 340px); position: relative; }
.search-field input { background: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; color: var(--ink); padding: .7rem 2rem .7rem 0; width: 100%; }
.search-field span { position: absolute; right: .2rem; top: .65rem; }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.filter-button { background: transparent; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); cursor: pointer; font-size: .7rem; padding: .55rem .8rem; }
.filter-button[aria-pressed="true"], .filter-button:hover { background: var(--ink); color: var(--cream); }
.archive-content { padding: 4rem 7vw 8rem; }
.archive-status { display: flex; font-size: .7rem; justify-content: space-between; margin-bottom: 1.2rem; opacity: .65; }
.archive-list { border-top: 1px solid var(--line); }
.archive-item { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 2rem; grid-template-columns: 7rem 1fr auto; padding: 1.7rem 0; }
.archive-item time, .archive-item .category { font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.archive-item .category { color: var(--copper); }
.archive-item h2 { font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 3rem); font-weight: 400; line-height: 1; margin: .35rem 0; }
.archive-item p { font-size: .78rem; margin: .55rem 0 0; opacity: .68; }
.archive-item > a:last-child { align-items: center; border: 1px solid var(--ink); border-radius: 50%; display: flex; height: 42px; justify-content: center; width: 42px; }
.archive-item[hidden] { display: none; }
.migration-note { background: var(--paper); border: 1px solid var(--line); margin-top: 2rem; padding: 1.5rem; }
.migration-note h2 { font-family: var(--serif); font-size: 1.4rem; font-weight: 400; margin: 0 0 .5rem; }
.migration-note p { font-size: .8rem; line-height: 1.6; margin: 0; opacity: .72; }
.page-hero aside strong { font-size: clamp(2.5rem, 5vw, 5rem); }
.practical-section { background: var(--paper); }
.practical-grid, .teaching-grid { border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(3rem, 6vw, 6rem); }
.teaching-grid { grid-template-columns: repeat(4, 1fr); }
.practical-grid article, .teaching-grid article { border-right: 1px solid var(--line); min-height: 250px; padding: 1.6rem clamp(1.4rem, 2.4vw, 2.6rem) 1rem 0; }
.practical-grid article + article, .teaching-grid article + article { padding-left: clamp(1.4rem, 2.4vw, 2.6rem); }
.practical-grid article:last-child, .teaching-grid article:last-child { border-right: 0; }
.practical-grid article > span, .teaching-grid article > span { color: var(--copper); font-size: .68rem; font-weight: 800; }
.practical-grid h3, .teaching-grid h3 { font-family: var(--serif); font-size: 2rem; font-weight: 400; margin: 3rem 0 1rem; }
.practical-grid p, .teaching-grid p { font-size: .82rem; line-height: 1.7; margin: 0; opacity: .72; }

/* Long article */
.article-shell { display: grid; gap: 5vw; grid-template-columns: minmax(160px,.32fr) minmax(0,1fr) minmax(190px,.38fr); margin: 0 auto; max-width: 1440px; padding: clamp(3rem,7vw,7rem) 5vw; }
.article-toc { align-self: start; border-top: 1px solid var(--line); position: sticky; top: 120px; }
.article-toc strong { display: block; font-size: .64rem; letter-spacing: .1em; padding: 1rem 0; text-transform: uppercase; }
.article-toc a { border-top: 1px solid var(--line); display: block; font-size: .72rem; line-height: 1.4; padding: .8rem 0; opacity: .7; }
.long-article { min-width: 0; }
.long-article .article-kicker { color: var(--copper); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.long-article h1 { font-family: var(--serif); font-size: clamp(3.5rem, 7vw, 7.5rem); font-weight: 400; letter-spacing: -.05em; line-height: .83; margin: 1.5rem 0 2rem; }
.long-article .article-byline { border-bottom: 1px solid var(--line); display: flex; font-size: .72rem; gap: 1rem; margin-bottom: 3rem; padding-bottom: 1.2rem; }
.long-article .lead { font-family: var(--serif); font-size: 1.45rem; line-height: 1.55; }
.long-article h2 { font-family: var(--serif); font-size: clamp(2rem, 3.8vw, 3.5rem); font-weight: 400; line-height: 1.02; margin: 4rem 0 1.5rem; }
.long-article p { font-family: var(--serif); font-size: 1.08rem; line-height: 1.8; }
.long-article .article-note { border-left: 3px solid var(--copper); font-family: var(--sans); font-size: .76rem; margin: 3rem 0; padding: .8rem 0 .8rem 1.2rem; }
.article-aside { align-self: start; background: var(--ink); color: var(--cream); padding: 1.5rem; position: sticky; top: 120px; }
.article-aside span { color: var(--copper-light); font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.article-aside h2 { font-family: var(--serif); font-size: 1.8rem; font-weight: 400; margin: 2rem 0 1rem; }
.article-aside p { font-size: .75rem; line-height: 1.6; opacity: .75; }

@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto auto; min-height: 76px; }
  #main-nav { background: var(--paper); border-bottom: 1px solid var(--line); display: none; flex-direction: column; gap: 0; left: 0; padding: 1rem; position: absolute; top: 76px; width: 100%; }
  #main-nav[data-open="true"] { display: flex; }
  #main-nav a { border-bottom: 1px solid var(--line); padding: 1rem; }
  .menu-toggle { display: block; }
  .hero { grid-template-columns: 1fr; padding-top: 3.5rem; }
  .practice-card { min-height: 560px; }
  .orbit-one { height: min(75vw, 360px); width: min(75vw, 360px); }
  .orbit-two { height: min(50vw, 240px); width: min(50vw, 240px); }
  .breath-line { width: min(35vw, 210px); }
  .course-section, .teacher, .faq, .first-course, .archive-hero { grid-template-columns: 1fr; }
  .teaching-grid { grid-template-columns: repeat(2, 1fr); }
  .article-shell { grid-template-columns: minmax(150px,.3fr) minmax(0,1fr); }
  .article-aside { display: none; }
}

@media (max-width: 700px) {
  .site-header { gap: .65rem; padding: 0 1rem; }
  .brand small { display: none; }
  .header-cta { display: none; }
  .hero { gap: 2.5rem; padding: 2.8rem 1rem 2rem; }
  .hero h1 { font-size: clamp(3.7rem, 20vw, 5.3rem); }
  .hero-intro { margin-top: 2rem; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .quick-facts { grid-template-columns: 1fr; }
  .quick-facts li { border-bottom: 1px solid var(--line); padding-bottom: .7rem; }
  .practice-card { min-height: 510px; padding: 1.1rem; }
  .pillar-list { grid-template-columns: repeat(2, 1fr); }
  .pillar-list li { border-top: 1px solid rgba(243, 240, 232, .15); padding-bottom: .8rem; }
  .section-pad { padding-left: 1rem; padding-right: 1rem; }
  .principle-grid, .article-grid { grid-template-columns: 1fr; }
  .practical-grid, .teaching-grid { grid-template-columns: 1fr; }
  .practical-grid article, .teaching-grid article, .practical-grid article + article, .teaching-grid article + article { border-bottom: 1px solid var(--line); border-right: 0; min-height: 0; padding: 1.6rem 0 2.5rem; }
  .principle-grid article, .article-card, .article-card + .article-card { border-bottom: 1px solid var(--line); border-right: 0; min-height: 0; padding: 1.6rem 0 2.5rem; }
  .principle-grid h3, .article-card h3 { margin-top: 2rem; }
  .article-card p { margin-bottom: 3rem; }
  .teacher-statement { min-height: 440px; }
  .row-heading { align-items: flex-start; flex-direction: column; gap: 1.5rem; }
  .first-course-actions { align-items: flex-start; flex-direction: column; }
  footer { grid-template-columns: 1fr; padding-left: 1rem; padding-right: 1rem; }
  footer p { grid-column: 1; }
  .archive-hero { padding-left: 1rem; padding-right: 1rem; }
  .archive-tools { align-items: stretch; padding-left: 1rem; padding-right: 1rem; position: static; }
  .filters { width: 100%; }
  .archive-content { padding-left: 1rem; padding-right: 1rem; }
  .archive-item { align-items: start; grid-template-columns: 1fr auto; gap: .75rem 1rem; }
  .archive-item time { grid-column: 1 / -1; }
  .article-shell { display: block; padding-left: 1rem; padding-right: 1rem; }
  .article-toc { margin-bottom: 3rem; position: static; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* WordPress integration */
body.systema-redesign { background: var(--cream) !important; }
body.systema-redesign #page-container { padding-top: 0 !important; }
#main-nav .menu { align-items: center; display: flex; gap: clamp(1rem, 2vw, 2.2rem); list-style: none; margin: 0; padding: 0; }
#main-nav .menu li { margin: 0; padding: 0; }
#main-nav .menu a { font-size: .78rem; font-weight: 650; }
.long-article > p:first-of-type:not(.article-kicker) { font-size: 1.35rem; }
.long-article .wp-caption, .long-article figure { max-width: 100%; }
.long-article img { height: auto; max-width: 100%; }
.page-shell { grid-template-columns: minmax(0,.3fr) minmax(0,1fr) minmax(0,.3fr); }
.page-content h2, .page-content h3 { font-family: var(--serif); font-weight: 400; }
.page-content h2 { font-size: clamp(2rem, 3.8vw, 3.5rem); margin-top: 3rem; }
.page-content h3 { font-size: 1.6rem; margin-top: 2.5rem; }
.navigation.pagination { margin-top: 3rem; }
.nav-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.page-numbers { border: 1px solid var(--line); border-radius: 999px; min-width: 2.2rem; padding: .55rem .8rem; text-align: center; }
.page-numbers.current { background: var(--ink); color: var(--cream); }
.screen-reader-text { clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; width: 1px; }

@media (max-width: 980px) {
  #main-nav .menu { align-items: stretch; flex-direction: column; gap: 0; }
}

@media (max-width: 700px) {
  .page-shell { display: block; }
}