/* Marten's Archive — base styles
   Google Fonts are enqueued separately in functions.php (handle 'ma-fonts'). */

:root{
  /* Palette — Parchment (default) */
  --ivory: #F7F2EA;
  --parchment: #EFE4D6;
  --linen: #DCCCBD;
  --ink: #43352D;
  --ink-soft: #5a4a40;
  --ink-mute: #8a7a6e;
  /* Accent colour intentionally collapsed into the ink scale
     so the design reads as pure parchment + ink. */
  --clay: var(--ink-mute);
  --brass: var(--ink-soft);
  --brass-dim: var(--ink-soft);
  --rule: rgba(67,53,45,.14);
  --rule-soft: rgba(67,53,45,.08);
  --paper-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 14px 40px -22px rgba(67,53,45,.25);
  --serif: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --sans: 'Inter', 'Source Sans 3', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --max-w: 1240px;
  --gutter: 56px;
}

/* Palette themes (driven by Tweaks). Each theme keeps brass/clay tied
   to its own ink so the accent never reappears. */
[data-palette="parchment"]{
  --ivory:#F7F2EA; --parchment:#EFE4D6; --linen:#DCCCBD;
  --ink:#43352D; --ink-soft:#5a4a40; --ink-mute:#8a7a6e;
  --clay:var(--ink-mute); --brass:var(--ink-soft); --brass-dim:var(--ink-soft);
}
[data-palette="linen"]{
  --ivory:#F4EFE6; --parchment:#E7DCC9; --linen:#CDBBA6;
  --ink:#3a2e25; --ink-soft:#54443a; --ink-mute:#827268;
  --clay:var(--ink-mute); --brass:var(--ink-soft); --brass-dim:var(--ink-soft);
}
[data-palette="ivory"]{
  --ivory:#FAF6EE; --parchment:#F1E8D8; --linen:#E1D2BD;
  --ink:#4a3b32; --ink-soft:#5e4d42; --ink-mute:#90806f;
  --clay:var(--ink-mute); --brass:var(--ink-soft); --brass-dim:var(--ink-soft);
}
[data-palette="clay"]{
  --ivory:#F1EAE0; --parchment:#E2D2BD; --linen:#C9B299;
  --ink:#352822; --ink-soft:#4a382f; --ink-mute:#7e6d60;
  --clay:var(--ink-mute); --brass:var(--ink-soft); --brass-dim:var(--ink-soft);
}

/* Typography variants */
[data-type="garamond"]{ --serif: 'Cormorant Garamond', Georgia, serif; --sans:'Inter',system-ui,sans-serif; }
[data-type="eb"]{ --serif: 'EB Garamond', Georgia, serif; --sans:'Source Sans 3','Inter',system-ui,sans-serif; }
[data-type="mix"]{ --serif: 'EB Garamond', Georgia, serif; --sans:'Inter',system-ui,sans-serif; }

/* Density */
[data-density="airy"]{ --gutter:72px; }
[data-density="regular"]{ --gutter:56px; }
[data-density="compact"]{ --gutter:40px; }

*{box-sizing:border-box}
html,body{margin:0;padding:0}

/* ─────────────── PENCIL CURSOR ─────────────── */
html, body{
  cursor: url('../img/pencil-cursor.svg') 7 25, default;
}
/* Inherit the pencil for every descendant, since we stripped explicit
   `cursor: default` declarations elsewhere. */
*, *::before, *::after{ cursor: inherit; }
/* …except text fields, where the I-beam should remain. */
input[type="text"], input[type="email"], input[type="password"],
input:not([type]), textarea, [contenteditable="true"]{
  cursor: text;
}

/* ─────────────── Home banner ─────────────── */
/* Sits as the first section of front-page.php. The sticky header
   overlays it without any background so the photograph reads
   edge-to-edge; once the user scrolls past the banner, the header
   picks up its parchment fade-in (.hdr-wrap.scrolled). */
.home-banner{
  position: relative;
  /* Header is now absolute on top — banner starts at the very top of the
     page, no negative margin needed. */
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 140px 24px 100px;
  /* Stack: light parchment-tinted gradient on top, then the image. */
  background-color: #6e5a4a;
  background-image:
    linear-gradient(180deg,
      rgba(247, 242, 234, .18) 0%,
      rgba(247, 242, 234, .04) 35%,
      rgba(31, 26, 23, .10)    75%,
      rgba(31, 26, 23, .28)    100%),
    url('../img/banner.png');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  color: var(--ivory);
  text-align: center;
  isolation: isolate;
}
.home-banner-inner{
  position: relative;
  z-index: 1;
  max-width: 920px;
  padding: 0 24px;
}
.home-banner-title{
  font-family: var(--serif);
  font-size: clamp(36px, 6.5vw, 92px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.005em;
  color: var(--ivory);
  margin: 0 0 24px;
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.home-banner-title em{
  font-style: italic;
  font-weight: 400;
}
.home-banner-sub{
  font-family: var(--sans);
  font-size: clamp(11px, 1.05vw, 13px);
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(247, 242, 234, .92);
  margin: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,.2);
}

/* On the homepage, the sticky header should never get a parchment
   background while sitting over the banner — but it SHOULD when the
   user scrolls into the rest of the page. The existing .scrolled
   handler already manages that; we just lighten the link color while
   over the banner so the nav reads against the photograph. */
/* Smooth out the swap between transparent-over-banner and scrolled
   parchment so the header doesn't flicker as you cross the threshold. */
.hdr-nav a,
.logo,
.logo-name,
.logo-mono,
.logo-sub,
.acct-btn,
.icon-btn{
  transition: color .35s ease, border-color .35s ease, background-color .35s ease;
}

/* On the homepage the header floats over the banner photograph — every
   piece of chrome flips to ivory so it reads against the dark image. */
body.home .hdr-nav a,
body.home .logo,
body.home .logo-name,
body.home .logo-mono,
body.home .acct-btn,
body.home .icon-btn{
  color: var(--ivory);
}
body.home .logo-sub{ color: rgba(247,242,234,.72); }
body.home .acct-btn{ border-color: rgba(247,242,234,.6); }
body.home .acct-btn:hover{ background: rgba(255,255,255,.08); }
/* Stamp pill on the active nav item — on the homepage it loses the
   parchment fill and reads as an ivory hairline ring over the banner,
   so it stays subtle against the photograph. */
body.home .hdr-nav a[aria-current="page"],
body.home .hdr-nav a.current-menu-item,
body.home .hdr-nav a.current_page_item,
body.home .hdr-nav li.current-menu-item > a,
body.home .hdr-nav li.current_page_item > a{
  background: transparent;
  border-color: rgba(247, 242, 234, .85);
  color: var(--ivory);
  box-shadow: none;
}

@media (max-width: 720px){
  .home-banner{
    padding: 110px 16px 80px;
    min-height: 90vh;
  }
}

/* ─────────────── DOODLE LAYER ─────────────── */
#doodle-layer{
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;          /* between body paper texture and #root content */
}
/* Stamp layer is anchored to the DOCUMENT (position: absolute) so
   each stamp stays where it was clicked and scrolls with the page.
   Sits behind all page content (only above the body background). */
#stamp-layer{
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.doodle{
  position: absolute;
  color: var(--ink);
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  transition: opacity .6s ease;
  mix-blend-mode: multiply;
  user-select: none;
  will-change: opacity;
}
.doodle-text{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.doodle-svg{ display: inline-block; }
.doodle-svg svg{ display: block; }
.doodle.is-in{ opacity: var(--target-opacity, .2); }
.doodle.is-out{ opacity: 0 !important; transition: opacity 1.2s ease; }

/* Click-press rubber stamp */
.stamp-mark{
  position: absolute;
  color: var(--ink);
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1.35);
  opacity: 0;
  transition: transform .42s cubic-bezier(.2,.85,.25,1), opacity .42s ease;
  mix-blend-mode: multiply;
  user-select: none;
  will-change: opacity, transform;
}
.stamp-mark.is-pressed{
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1);
  opacity: var(--target-opacity, .42);
}
.stamp-mark.is-out{ opacity: 0 !important; transition: opacity 1.2s ease; }
.stamp-mark svg{ display: block; }
body{
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Paper grain — applied to body */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(167,138,94,.10), transparent 60%),
    radial-gradient(900px 700px at 110% 30%, rgba(183,154,140,.10), transparent 60%),
    radial-gradient(700px 500px at 50% 110%, rgba(67,53,45,.05), transparent 60%);
  mix-blend-mode: multiply;
}
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.45;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.26  0 0 0 0 0.21  0 0 0 0 0.17  0 0 0 0.07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}

#root{position:relative; z-index:1;}

/* Type primitives */
.serif{ font-family: var(--serif); font-weight: 400; }
.sans{ font-family: var(--sans); }
.mono{ font-family: var(--mono); }
.eyebrow{
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brass-dim);
}
.eyebrow-rule{
  display:inline-flex; align-items:center; gap:14px;
  color: var(--brass-dim);
  font-family: var(--sans);
  font-size: 11px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
}
.eyebrow-rule::before, .eyebrow-rule::after{
  content:""; height:1px; width:32px; background: currentColor; opacity:.45;
}
h1,h2,h3,h4{ font-family: var(--serif); font-weight: 500; color: var(--ink); margin: 0; letter-spacing: -0.005em; }
h1{ font-size: clamp(28px, 6vw, 72px); line-height: 1.04; }
h2{ font-size: clamp(22px, 4vw, 44px); line-height: 1.1; }
h3{ font-size: clamp(18px, 2.6vw, 22px); line-height: 1.25; }
p{ margin: 0; }

.italic{ font-style: italic; }

/* Layout */
.shell{ width:100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
.section{ padding: clamp(56px, 8vw, 120px) 0; position: relative; }

/* Safety net — prevents fixed-width media + iframes from blowing past
   the viewport on mobile. Doesn't affect the inline styles theme uses
   for crops; just stops accidental horizontal overflow.
   IMPORTANT: do NOT override .shell's max-width here — that breaks the
   1240px page width on desktop. .shell already has its own max-width. */
img, video, iframe { max-width: 100%; height: auto; }
.news-card, .reply-form, .reply-attach { max-width: 100%; box-sizing: border-box; }
.section + .section{ border-top: 1px solid var(--rule-soft); }

.rule{ height:1px; background: var(--rule); width:100%; }
.rule-thick{ height:2px; background: var(--ink); width:48px; }
.rule-dot{ height:6px; width:6px; border-radius:50%; background: var(--brass); display:inline-block; }

/* ─────────────── HEADER ─────────────── */
/* Header: absolute over the top of the page (no sticky, no scroll-state
   parchment background). On the homepage it floats over the banner; on
   inner pages it sits above the content with the ivory body showing
   through, which still reads cleanly because the links are ink. */
.hdr-wrap{
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: transparent;
}
/* Inner pages need to leave room for the floating header — homepage
   doesn't, because the banner runs full-bleed under the header. The
   logo image is up to 96px tall + the header has its own padding, so
   we reserve generous breathing room here.
   !important is needed because several templates set inline padding on
   the <main> element AND class rules like .read-wrap / .ma-profile-wrap
   include a `padding` shorthand that would otherwise win on the top. */
body:not(.home) main{
  padding-top: clamp(160px, 14vw, 220px) !important;
}
@media (max-width: 720px){
  body:not(.home) main{
    padding-top: clamp(120px, 24vw, 160px) !important;
  }
}
.hdr{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 22px 0;
  gap: 24px;
  transition: padding .35s ease;
}
.hdr-wrap.scrolled .hdr{ padding: 14px 0; }
.hdr-nav{ display:flex; gap: 28px; align-items:center; }
.hdr-nav.right{ justify-content: flex-end; }
/* Left header cluster: a hamburger (mobile only) sitting beside the primary
   nav. On desktop the burger, drawer chrome and backdrop are all hidden and
   the nav shows inline exactly as before. */
.hdr-left{ display:flex; align-items:center; gap: 28px; min-width: 0; }
/* `.hdr-left .hdr-burger` (0,2,0) is needed to beat `.icon-btn`'s
   display:inline-flex (0,1,0) — the burger carries both classes, and .icon-btn
   is defined later, so a bare `.hdr-burger` would lose and show on desktop. */
.hdr-left .hdr-burger,
.hdr-drawer-head,
.hdr-nav-backdrop{ display: none; }
.hdr-nav a{
  color: var(--ink); text-decoration: none;
  font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 500;
  padding: 6px 0;
  position: relative;
  transition: color .3s ease;
}
.hdr-nav a:hover{ color: var(--brass-dim); }
.hdr-nav a::after,
.hdr-nav a:hover::after,
.hdr-nav a.active::after { content: none; }

/* Rubber-stamp active state — applied to whichever nav link matches the
   current page. Uses the same visual language as the click-stamps and
   "By Post" stamp elsewhere on the site: a hairline rounded border with
   parchment background, a small rotation to suggest a hand-pressed mark. */
.hdr-nav a[aria-current="page"],
.hdr-nav a.current-menu-item,
.hdr-nav a.current_page_item,
.hdr-nav li.current-menu-item > a,
.hdr-nav li.current_page_item > a {
  color: var(--ink);
  padding: 6px 14px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: rgba(247, 242, 234, .85);
  transform: rotate(-2.5deg);
  display: inline-block;
  position: relative;
  letter-spacing: .14em;
  /* small drop shadow + inset highlight gives the "pressed" feel */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .55) inset,
    0 1px 4px rgba(31, 26, 23, .15);
  transition: transform .2s ease;
}
.hdr-nav a[aria-current="page"]:hover,
.hdr-nav a.current-menu-item:hover,
.hdr-nav a.current_page_item:hover,
.hdr-nav li.current-menu-item > a:hover,
.hdr-nav li.current_page_item > a:hover {
  transform: rotate(-2.5deg) scale(1.02);
  color: var(--ink);
}

.logo{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--ink);
}
.logo-img{
  display: block;
  height: clamp(64px, 7vw, 96px);
  width: auto;
  max-width: 220px;
  object-fit: contain;
}
/* Default: inner logo (logomain.png) shows. On the homepage we swap to
   the all-white variant so it reads over the dark banner. */
.logo-img-home{ display: none; }
body.home .logo-img-inner{ display: none; }
body.home .logo-img-home{ display: block; }
.logo-mono{
  width: 44px; height: 44px;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid var(--ink);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 22px; font-style: italic;
  letter-spacing: -.02em;
  background: transparent;
}
.logo-name{
  font-family: var(--serif);
  font-size: 13px; font-weight: 500;
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--ink);
}
.logo-sub{
  font-family: var(--serif); font-style: italic;
  font-size: 11px; letter-spacing: .04em;
  color: var(--ink-mute);
  margin-top: -2px;
}
.hdr-wrap.scrolled .logo-sub{ display:none; }
.hdr-wrap.scrolled .logo-mono{ width: 32px; height: 32px; font-size: 17px; }

.icon-btn{
  appearance:none; background:transparent; border: none;
  color: var(--ink);
  width: 32px; height: 32px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 50%;
  transition: background .25s ease;
}
.icon-btn:hover{ background: rgba(67,53,45,.06); }

.pill-btn{
  appearance:none;
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: all .3s ease;
}
.pill-btn:hover{ background: var(--ink); color: var(--ivory); }
.pill-btn.brass{ border-color: var(--brass-dim); color: var(--brass-dim); }
.pill-btn.brass:hover{ background: var(--brass-dim); color: var(--ivory); }
.pill-btn.solid{ background: var(--ink); color: var(--ivory); }
.pill-btn.solid:hover{ background: var(--brass-dim); border-color: var(--brass-dim); }
.pill-btn.tiny{ padding: 5px 12px; font-size: 10px; }

/* Search overlay */
.search-overlay{
  position: fixed; inset: 0;
  background: rgba(247, 242, 234, .92);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  z-index: 100;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 18vh;
  animation: fade .3s ease;
}
.search-box{
  width: min(720px, 92%);
  border-bottom: 1px solid var(--ink);
  padding: 14px 8px;
  display:flex; align-items:center; gap: 16px;
}
.search-box input{
  flex:1;
  background: transparent;
  border: 0; outline: 0;
  font-family: var(--serif);
  font-size: 38px; font-style: italic; font-weight: 400;
  color: var(--ink);
}
.search-box input::placeholder{ color: var(--ink-mute); }
.search-suggest{
  margin: 36px auto 0; width: min(720px, 92%);
  color: var(--ink-mute); font-size: 13px;
}
.search-suggest-row{
  display:flex; gap: 14px; flex-wrap:wrap; margin-top: 12px;
}
.search-chip{
  border: 1px solid var(--rule);
  padding: 6px 12px; border-radius: 999px;
  font-size: 12px; color: var(--ink);
  background: rgba(247,242,234,.5);
}

/* ─────────────── HERO CAROUSEL ─────────────── */
.hero{
  position: relative;
  padding: 36px 0 96px;
}
.hero-frame{
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 72px;
  align-items: center;
  min-height: 620px;
}

/* Image stack — layers crossfade */
.hero-img-wrap{
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--parchment);
  overflow: hidden;
  border: 1px solid var(--rule);
  box-shadow: 0 30px 60px -40px rgba(67,53,45,.45);
}
.hero-img-wrap::after{
  content:""; position:absolute; inset:0; z-index: 4;
  background: linear-gradient(180deg, transparent 50%, rgba(67,53,45,.18));
  pointer-events:none;
}
.hero-img-edge{
  /* the page-edge of the next slide peeking from the right */
  position: absolute;
  top: 6%; bottom: 6%; right: -10px;
  width: 14px;
  background: linear-gradient(90deg, rgba(67,53,45,.18), transparent);
  border-left: 1px solid var(--rule);
  border-radius: 0 4px 4px 0;
  z-index: 5;
  pointer-events: none;
}
.hero-layer{
  position: absolute; inset: 0;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1100ms cubic-bezier(.4,0,.2,1);
  z-index: 1;
}
.hero-layer.is-active{
  opacity: 1;
  z-index: 2;
  animation: hero-kenburns 14s ease-out forwards;
}
.hero-layer.is-leaving{
  opacity: 0;
  z-index: 1;
}
@keyframes hero-kenburns{
  0%   { transform: scale(1.08) translate(0, 0); }
  100% { transform: scale(1.16) translate(-1.5%, -1.5%); }
}
.hero-img-corner{
  position:absolute; top: 16px; left: 16px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .14em;
  color: var(--ink-mute);
  background: rgba(247,242,234,.88);
  padding: 5px 9px;
  z-index: 6;
  opacity: 0;
  transform: translateY(-6px);
  animation: hero-revealDown .9s .25s cubic-bezier(.2,.7,.2,1) both;
}
.hero-img-stamp{
  position:absolute; bottom: 18px; right: 18px;
  z-index: 6;
  opacity: 0;
  transform: translateY(6px) rotate(-3deg) scale(.96);
  animation: hero-revealStamp 1.1s .55s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes hero-revealDown{
  from{ opacity: 0; transform: translateY(-6px); }
  to  { opacity: 1; transform: translateY(0); }
}
@keyframes hero-revealStamp{
  from{ opacity: 0; transform: translateY(8px) rotate(-3deg) scale(.96); }
  to  { opacity: .98; transform: translateY(0) rotate(-3deg) scale(1); }
}

/* Right column copy — staggered reveal */
.hero-copy{
  position: relative;
  min-height: 540px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-meta-row{
  display:flex; align-items:center; gap: 14px;
  margin-bottom: 22px;
  color: var(--brass-dim);
}
.hero-cat{
  font-family: var(--sans); font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase;
  font-weight: 500;
}

/* Animated reveal — each child fades + lifts in sequence */
.hero-reveal > *{
  opacity: 0;
  transform: translateY(14px);
  animation: hero-rise 900ms cubic-bezier(.2,.7,.2,1) forwards;
}
.hero-reveal > *:nth-child(1){ animation-delay: .05s; }
.hero-reveal > *:nth-child(2){ animation-delay: .18s; }
.hero-reveal > *:nth-child(3){ animation-delay: .32s; }
.hero-reveal > *:nth-child(4){ animation-delay: .46s; }
.hero-reveal > *:nth-child(5){ animation-delay: .60s; }
.hero-reveal > *:nth-child(6){ animation-delay: .74s; }
.hero-reveal > *:nth-child(7){ animation-delay: .88s; }
@keyframes hero-rise{
  to{ opacity: 1; transform: translateY(0); }
}

.hero-title{
  font-family: var(--serif);
  font-size: clamp(30px, 7vw, 84px);
  line-height: 1.02;
  font-weight: 400;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin-bottom: 22px;
  text-wrap: balance;
}
.hero-title em{ font-style: italic; color: var(--ink); }
.hero-byline{
  font-family: var(--serif); font-style: italic;
  font-size: clamp(15px, 1.9vw, 19px);
  color: var(--ink-soft);
  margin-bottom: 30px;
}
.hero-excerpt{
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 40ch;
  margin-bottom: 36px;
}
.hero-cta-row{
  display: flex; gap: 16px; align-items: center;
  margin-bottom: 32px;
}

.hero-footer{
  position: relative;
  margin-top: 22px;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 36px;
  align-items: end;
}
.hero-meta{
  display:flex; gap: 36px;
  font-family: var(--sans); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-mute);
}
.hero-meta-item{ display:flex; flex-direction:column; gap: 4px; }
.hero-meta-item b{
  font-family: var(--serif); font-style: italic;
  font-size: 18px; font-weight: 500; color: var(--ink);
  letter-spacing: 0; text-transform: none;
}

/* Cinematic controls */
.hero-controls{
  display: flex;
  align-items: center;
  gap: 22px;
  justify-self: end;
}
.hero-arrow{
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: transparent;
  display:flex; align-items:center; justify-content:center;
  color: var(--ink);
  transition: border-color .5s ease, background .5s ease, color .5s ease, transform .5s ease;
}
.hero-arrow:hover{
  border-color: var(--ink);
  background: var(--ink);
  color: var(--ivory);
}
.hero-arrow:active{ transform: scale(.96); }
.hero-counter{
  font-family: var(--serif); font-style: italic;
  font-size: 22px; color: var(--ink);
  min-width: 64px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.hero-counter span{ color: var(--ink-mute); font-style: normal; font-size: 14px; }

/* Progress rule + slide ticks */
.hero-progress-row{
  display: flex; align-items: center; gap: 14px;
  margin-top: 28px;
}
.hero-progress{
  position: relative;
  flex: 1; height: 1px;
  background: var(--rule);
  overflow: hidden;
}
.hero-progress-fill{
  position: absolute; left: 0; top: -.5px;
  height: 2px;
  background: var(--ink);
  width: 0%;
  transition: width .25s linear;
}
.hero-progress.is-running .hero-progress-fill{
  transition: width 7000ms linear;
}
.hero-progress.is-paused .hero-progress-fill{
  transition: width 0s linear;
}
.hero-ticks{
  display: flex; gap: 6px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .12em; color: var(--ink-mute);
}
.hero-tick{
  padding: 2px 4px;
  transition: color .35s ease;
}
.hero-tick.is-active{ color: var(--ink); }

/* Up next murmur */
.hero-upnext{
  margin-top: 22px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  font-family: var(--serif);
  color: var(--ink-mute);
  font-size: 14px;
  opacity: 0;
  animation: hero-rise 1s 1.1s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero-upnext .label{
  font-family: var(--sans); font-size: 10px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--brass-dim);
  white-space: nowrap;
}
.hero-upnext .title{
  font-style: italic;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-upnext .num{
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .14em; color: var(--ink-mute);
}

/* Image placeholders — striped paper */
.placeholder{
  position: relative;
  background:
    repeating-linear-gradient(135deg,
      rgba(67,53,45,.05) 0px, rgba(67,53,45,.05) 1px,
      transparent 1px, transparent 14px),
    linear-gradient(180deg, var(--parchment), var(--linen));
  display:flex; align-items:center; justify-content:center;
  color: var(--ink-mute);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
}
.placeholder.book{ background:
  repeating-linear-gradient(180deg, rgba(67,53,45,.07) 0 1px, transparent 1px 30px),
  linear-gradient(160deg, #d9c8b1, #b89a82);
}
.placeholder.film{ background:
  repeating-linear-gradient(90deg, rgba(67,53,45,.08) 0 2px, transparent 2px 8px),
  linear-gradient(160deg, #c7b9a4, #8d7866);
}
.placeholder.album{ background:
  radial-gradient(circle at 50% 50%,
    rgba(67,53,45,.18) 0 1px,
    transparent 1px 6px),
  linear-gradient(160deg, #dbcbb3, #b09680);
}
.placeholder-label{
  background: rgba(247,242,234,.9);
  padding: 6px 12px;
  border: 1px solid var(--rule);
}

/* Real featured images — fill their container */
.ma-cover,
.placeholder .ma-entry-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Postal/archival stamp */
.stamp{
  display:inline-flex; flex-direction:column; align-items:center;
  padding: 8px 14px;
  border: 1.5px solid var(--brass-dim);
  color: var(--brass-dim);
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: .22em; text-transform: uppercase;
  font-weight: 600;
  background: rgba(247,242,234,.7);
  position: relative;
  transform: rotate(-3deg);
}
.stamp::before, .stamp::after{
  content:""; position:absolute; left:6px; right:6px; height:1px; background: currentColor;
  opacity:.35;
}
.stamp::before{ top: 3px; } .stamp::after{ bottom: 3px; }
.stamp b{
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 13px;
  letter-spacing: 0; text-transform: none;
  margin: 2px 0;
  color: var(--brass-dim);
}

/* ─────────────── CATEGORIES ─────────────── */
.cat-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom: 64px;
  gap: 40px;
}
.cat-head .lhs{ max-width: 540px; }
.cat-head h2{
  margin-top: 14px;
}
.cat-head h2 em{ font-style: italic; color: var(--brass-dim); }
.cat-head .rhs{
  font-family: var(--serif); font-style: italic;
  font-size: 17px; color: var(--ink-soft);
  max-width: 360px;
  text-align: right;
}
/* On mobile the two-column header crunches the right-side copy into a
   3-words-per-line column. Stack and center the whole categories
   section so header + cards read as one centered block. */
@media (max-width: 720px){
  .cat-head{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
    margin-bottom: 40px;
  }
  .cat-head .lhs,
  .cat-head .rhs{
    max-width: none;
    text-align: center;
    width: 100%;
  }
  .cat-head .rhs{
    font-size: 16px;
    line-height: 1.5;
  }
  .cat-head h2{ margin-top: 10px; }

  /* Cards: stack centered + never overflow the viewport. The grid is
     constrained to viewport width, each card capped at 100% of its grid
     cell, content padding tightened, and the foot stacks so "Enter
     shelf" never gets clipped off the right edge. */
  .cat-grid{
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 22px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .cat-card{
    width: 100%;
    max-width: min(420px, 100%);
    box-sizing: border-box;
    overflow: hidden;          /* belt: anything that escapes gets cropped */
  }
  .cat-card-img{
    height: auto;
    aspect-ratio: 4 / 3;
    width: 100%;
  }
  .cat-card-meta{
    padding: 22px 20px 24px;
    align-items: center;
    text-align: center;
    overflow-wrap: break-word;
    word-wrap: break-word;
    min-width: 0;
  }
  .cat-card-meta h3{
    overflow-wrap: break-word;
    max-width: 100%;
  }
  .cat-card-desc{
    overflow-wrap: break-word;
    max-width: 100%;
  }
  /* Foot stacks on mobile so the two items don't fight over horizontal
     space and one gets clipped off the right edge. */
  .cat-card-foot{
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

.cat-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.cat-card{
  background: var(--ivory);
  border: 1px solid var(--rule);
  padding: 0;
  display:flex; flex-direction:column;
  position: relative;
  transition: transform .5s ease, box-shadow .5s ease;
}
.cat-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--paper-shadow);
}
.cat-card-img{
  height: 240px;
  position: relative;
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
  background: var(--paper-soft);
}
.cat-card-photo{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s ease, filter .5s ease;
  filter: saturate(.92);
}
.cat-card:hover .cat-card-photo{
  transform: scale(1.04);
  filter: saturate(1);
}
/* Small centered caption pill ("A reading room.", "A small cinema.", "A listening hour.") */
.cat-card-cap{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(247,242,234,.92);
  padding: 6px 14px;
  border: 1px solid var(--rule);
  white-space: nowrap;
}
.cat-card-meta{
  padding: 26px 28px 28px;
  display:flex; flex-direction:column; gap: 12px;
}
.cat-card-num{
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .18em; color: var(--brass-dim);
}
.cat-card h3{
  font-size: clamp(22px, 3.2vw, 32px);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -.005em;
}
.cat-card h3 em{ font-style: italic; }
.cat-card-desc{
  font-family: var(--serif); font-style: italic;
  font-size: 16px; color: var(--ink-soft);
  line-height: 1.45;
}
.cat-card-foot{
  display:flex; justify-content:space-between; align-items:center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-family: var(--sans); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-mute);
}
.cat-card-foot .count{ color: var(--ink); }
.cat-card-tag{
  position: absolute; top: 16px; left: 16px;
  z-index: 2;
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink);
  background: rgba(247,242,234,.92);
  padding: 5px 10px;
  border: 1px solid var(--rule);
}

/* ─────────────── QUOTE ─────────────── */
.quote-sec{
  background: var(--parchment);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Image background — quotebackground.png covers the section, with a
   light parchment-tinted veil over the top so text stays readable. */
.quote-sec.has-bg-image{
  background-color: var(--parchment);
  background-image: url('../img/quotebackground.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.quote-sec.has-bg-image::before{ content: none; }
.quote-sec.has-bg-image .quote-bg-veil{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Light parchment gradient — top and bottom slightly tinted, middle
     a bit more transparent so the photo can come through. */
  background:
    linear-gradient(180deg,
      rgba(245, 239, 227, .35) 0%,
      rgba(245, 239, 227, .20) 50%,
      rgba(245, 239, 227, .35) 100%);
}
.quote-sec::before{
  content:""; position:absolute; inset:0;
  opacity:.4;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence baseFrequency='0.7' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.26  0 0 0 0 0.21  0 0 0 0 0.17  0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}
.quote-inner{
  position: relative;
  text-align: center;
  padding: 28px 0;
  max-width: 920px;
  margin: 0 auto;
  z-index: 1;
}

/* Reduce-motion users get a still poster instead of the looping video */
@media (prefers-reduced-motion: reduce){
  .quote-bg-video{ display: none; }
  .quote-sec.has-bg-video{ background: var(--parchment); }
}
.quote-mark{
  font-family: var(--serif); font-style: italic;
  font-size: 120px; line-height: 0.5;
  color: var(--brass);
  opacity: .6;
  margin-bottom: 24px;
  display: block;
}
.quote-text{
  font-family: var(--serif);
  font-size: clamp(20px, 4.4vw, 46px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 32px;
  text-wrap: balance;
}
.quote-attr{
  font-family: var(--sans);
  font-size: 11px; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--ink-mute);
  display: flex; align-items: center; justify-content: center; gap: 14px;
}
.quote-attr::before, .quote-attr::after{
  content:""; height:1px; width: 28px; background: var(--ink-mute);
}
.quote-rotate{
  display:flex; justify-content:center; gap: 6px; margin-top: 28px;
}
.quote-rotate-dot{
  width: 6px; height: 6px; border-radius: 50%; background: var(--rule);
  transition: background .3s;
}
.quote-rotate-dot.active{ background: var(--brass-dim); }

/* ─────────────── ARCHIVE FEED ─────────────── */
.archive-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom: 56px;
  gap: 40px;
}
.archive-head h2 em{ font-style: italic; }
.archive-tabs{
  display:flex; gap: 4px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0;
}
.archive-tab{
  appearance:none; background:transparent; border: 0;
  padding: 10px 18px;
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-mute);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .3s, border-color .3s;
}
.archive-tab.active{ color: var(--ink); border-bottom-color: var(--ink); }
.archive-tab:hover{ color: var(--ink); }

.archive-list{
  display:flex; flex-direction:column;
}
.archive-row{
  display: grid;
  grid-template-columns: 86px 1fr 280px 200px 80px;
  gap: 32px;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule-soft);
  align-items: center;
  transition: background .25s ease, padding .25s ease;
  position: relative;
}
.archive-row:hover{
  background: rgba(239,228,214,.5);
  padding-left: 14px;
  padding-right: 14px;
  margin: 0 -14px;
}
.archive-num{
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  color: var(--ink-mute);
}
.archive-main h3{
  font-family: var(--serif); font-weight: 500;
  font-size: 26px; line-height: 1.1;
  margin-bottom: 6px;
}
.archive-main h3 em{ font-style: italic; }
.archive-main .by{
  font-family: var(--serif); font-style: italic;
  font-size: 15px; color: var(--ink-soft);
}
.archive-excerpt{
  font-family: var(--serif); font-style: italic;
  font-size: 14.5px; line-height: 1.45;
  color: var(--ink-soft);
}
.archive-tagcol{
  display:flex; flex-direction:column; gap: 8px;
  align-items: flex-start;
}
.archive-tag{
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--brass-dim);
  border: 1px solid var(--brass-dim);
  padding: 3px 8px;
  border-radius: 2px;
}
.archive-meta{
  font-family: var(--sans); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-mute);
  display:flex; flex-direction:column; gap: 4px;
}
.archive-meta b{
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 15px; color: var(--ink);
  letter-spacing: 0; text-transform: none;
}
.archive-rating{
  font-family: var(--serif); font-style: italic;
  font-size: 30px; color: var(--brass-dim);
  text-align: right;
  font-weight: 500;
}
.archive-rating small{
  display:block;
  font-family: var(--sans); font-size: 9px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-mute);
  font-style: normal;
  font-weight: 500;
}
.archive-foot{
  display:flex; justify-content:center; margin-top: 56px;
  gap: 18px;
  align-items: center;
}
.archive-foot .info{
  font-family: var(--serif); font-style: italic;
  color: var(--ink-mute); font-size: 14px;
}

/* ─────────────── NEWSLETTER ─────────────── */
.news-sec{
  position: relative;
}
.news-card{
  background:
    repeating-linear-gradient(0deg,
      rgba(67,53,45,.04) 0 1px, transparent 1px 36px),
    var(--ivory);
  border: 1px solid var(--rule);
  padding: 72px 64px;
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: center;
}
.news-card::before{
  content:""; position:absolute;
  top: 14px; left: 14px; right: 14px; bottom: 14px;
  border: 1px solid var(--rule-soft);
  pointer-events:none;
}
.news-stamp{
  position:absolute; top: -22px; right: 56px;
  z-index: 2;
}
/* Decorative element in the top-left corner of the newsletter card. */
.news-element{
  position: absolute;
  top: -28px;
  left: -28px;
  width: clamp(80px, 12vw, 140px);
  height: auto;
  z-index: 2;
  pointer-events: none;
  user-select: none;
}
.news-eyebrow{ margin-bottom: 18px; }
.news-card h2{
  font-size: clamp(22px, 5vw, 52px);
  line-height: 1.05;
  margin-bottom: 22px;
}
.news-card h2 em{ font-style: italic; }
.news-card p{
  font-family: var(--serif); font-size: 17px;
  color: var(--ink-soft); line-height: 1.55;
  max-width: 46ch;
  margin-bottom: 28px;
}
.news-form{
  display:flex; flex-direction:column; gap: 18px;
}
.news-field{
  display:flex; flex-direction:column; gap: 6px;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 8px;
}
.news-field label{
  font-family: var(--sans); font-size: 10px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
}
.news-field input{
  background: transparent; border: 0; outline: 0;
  font-family: var(--serif); font-size: 22px;
  color: var(--ink);
  padding: 4px 0;
}
.news-field input::placeholder{ color: var(--ink-mute); font-style: italic; }

/* Auth modal — newsletter opt-in checkbox (Register tab only). */
.ma-auth-newsletter {
	display: flex; align-items: flex-start; gap: 10px;
	margin: 12px 0 6px;
	font-family: var(--serif, Georgia), serif;
	font-size: 13px; line-height: 1.5;
	color: var(--ink-soft, #5a4a40);
	cursor: pointer;
}
.ma-auth-newsletter input[type="checkbox"] {
	flex: 0 0 auto;
	margin-top: 3px;
	width: 16px; height: 16px;
	accent-color: var(--ink, #2A2823);
	cursor: pointer;
}
.news-checks{
  display:flex; gap: 20px; flex-wrap: wrap;
  margin-top: 6px;
}
.news-check{
  display:flex; align-items:center; gap: 8px;
  font-family: var(--serif); font-size: 14.5px; font-style: italic;
  color: var(--ink-soft);
}
.news-check input{
  appearance:none;
  width: 14px; height: 14px;
  border: 1px solid var(--ink);
  background: transparent;
  display:grid; place-items:center;
}
.news-check input:checked{ background: var(--ink); }
.news-check input:checked::after{
  content:"✓"; color: var(--ivory); font-size: 10px; font-family: var(--sans);
}
.news-consent{
  display:flex; align-items:flex-start; gap: 10px;
  margin-top: 18px;
  font-family: var(--serif); font-size: 13px; font-style: italic;
  color: var(--ink-soft); line-height: 1.5;
  cursor: pointer;
}
.news-consent input{
  appearance:none;
  width: 14px; height: 14px; flex: 0 0 14px;
  margin-top: 3px;
  border: 1px solid var(--ink); background: transparent;
  display:grid; place-items:center; cursor: pointer;
}
.news-consent input:checked{ background: var(--ink); }
.news-consent input:checked::after{
  content:"✓"; color: var(--ivory); font-size: 10px; font-family: var(--sans);
}
.news-consent .mono{ font-style: normal; font-family: var(--mono); font-size: 12px; }
.news-note{
  text-align:center; padding: 16px 0;
  font-family: var(--serif); font-style: italic; color: var(--ink-soft);
}
.news-note.err{ color: #b14a3a; }
.news-submit-row{
  display:flex; align-items:center; justify-content:space-between;
  gap: 18px; margin-top: 20px;
}
.news-issued{
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .14em; color: var(--ink-mute);
}
.news-consent-note{
  margin: 14px 0 0; padding: 0;
  font-family: var(--serif); font-size: 12px; font-style: italic;
  line-height: 1.55; color: var(--ink-mute);
}
.news-consent-note .mono{ font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--ink-soft); }

/* ─────────────── FOOTER ─────────────── */
.ftr{
  /* Layered backgrounds (top → bottom):
     1. very light parchment overlay just for text legibility
     2. background.png itself, full-bleed
     3. parchment fallback colour if the PNG is slow to load */
  background-color: var(--parchment);
  background-image:
    linear-gradient(rgba(245, 239, 227, .28), rgba(245, 239, 227, .42)),
    url('../img/background.png');
  background-size: auto, cover;
  background-position: center top, center center;
  background-repeat: no-repeat, no-repeat;
  border-top: 1px solid var(--rule);
  padding: 80px 0 32px;
  position: relative;
}
/* Text inside the footer needs a tiny shadow to stay readable over the
   illustration — only on the dark-ish blocks, not the small links. */
.ftr-brand h3,
.ftr-brand p,
.ftr-col h4,
.ftr-col a,
.ftr-base { text-shadow: 0 1px 0 rgba(245, 239, 227, .55); }
.ftr-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
}
.ftr-col h4{
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--brass-dim);
  margin-bottom: 20px;
}
.ftr-col ul{ list-style: none; padding: 0; margin: 0; display:flex; flex-direction:column; gap: 10px; }
.ftr-col a{
  color: var(--ink); text-decoration: none;
  font-family: var(--serif); font-size: 17px;
  font-style: italic;
  transition: color .25s;
}
.ftr-col a:hover{ color: var(--brass-dim); }
.ftr-brand h3{
  font-family: var(--serif); font-style: italic;
  font-size: clamp(22px, 3.4vw, 36px);
  line-height: 1.1;
  margin-bottom: 14px;
  font-weight: 500;
}
.ftr-brand p{
  font-family: var(--serif); font-size: 16px;
  color: var(--ink-soft); line-height: 1.5;
  max-width: 36ch;
}
.ftr-base{
  display:flex; justify-content:space-between; align-items:center;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  font-family: var(--sans); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-mute);
}
.ftr-base .socials{ display:flex; gap: 20px; }
.ftr-base .socials a{ color: var(--ink-mute); }
.ftr-base .socials a:hover{ color: var(--ink); }

/* ─────────────── READING VIEW ─────────────── */
.read-wrap{
  padding: 56px 0 100px;
}
.read-back{
  display:inline-flex; align-items:center; gap: 10px;
  font-family: var(--sans); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-mute);
  text-decoration: none;
  margin-bottom: 36px;
}
.read-back:hover{ color: var(--ink); }
.read-head{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 72px;
  margin-bottom: 72px;
  align-items: end;
}
.read-meta-row{
  display:flex; align-items:center; gap: 14px;
  color: var(--brass-dim);
  margin-bottom: 24px;
}
.read-title{
  font-size: clamp(28px, 6.4vw, 80px);
  line-height: 1.05;
  margin-bottom: 24px;
}
.read-title em{ font-style: italic; }
.read-byline{
  font-family: var(--serif); font-style: italic;
  font-size: clamp(15px, 2vw, 20px);
  color: var(--ink-soft);
  margin-bottom: 32px;
}
.read-statsbar{
  display:flex; gap: 56px;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0;
}
.read-stat{
  display:flex; flex-direction:column; gap: 4px;
}
.read-stat .l{
  font-family: var(--sans); font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 500;
}
.read-stat .v{
  font-family: var(--serif); font-style: italic;
  font-size: 22px; color: var(--ink); font-weight: 500;
}
.read-img{
  aspect-ratio: 3/4; position: relative;
  border: 1px solid var(--rule);
}
.read-body{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 80px;
  margin-bottom: 80px;
}
.read-aside{
  position: sticky; top: 120px;
  align-self: start;
}
.read-aside h4{
  font-family: var(--sans); font-size: 10px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--brass-dim);
  margin-bottom: 14px;
}
.read-aside ul{ list-style:none; padding:0; margin: 0 0 30px;
  font-family: var(--serif); font-size: 16px; color: var(--ink-soft);
  display:flex; flex-direction:column; gap: 6px;
}
.read-aside ul b{ font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--ink); }
.read-prose{
  font-family: var(--serif);
  font-size: clamp(16px, 2.1vw, 21px);
  line-height: 1.6;
  color: var(--ink);
  max-width: 64ch;
}
.read-prose p{ margin-bottom: 24px; }
.read-prose .dropcap::first-letter{
  font-family: var(--serif);
  font-size: 5.4em;
  float: left;
  line-height: 0.85;
  padding-right: 14px;
  padding-top: 6px;
  color: var(--brass-dim);
  font-weight: 500;
}
.read-prose blockquote{
  border-left: 2px solid var(--brass);
  padding-left: 28px;
  font-style: italic;
  color: var(--ink-soft);
  margin: 32px 0;
  font-size: 22px;
  line-height: 1.5;
}
.read-prose h3{
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 28px;
  margin: 40px 0 16px;
}

/* Replies */
.replies-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom: 36px;
  border-top: 1px solid var(--rule);
  padding-top: 56px;
}
.replies-head h2{ font-size: clamp(22px, 3.6vw, 36px); }
.replies-head h2 em{ font-style: italic; }
.replies-count{
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-mute); letter-spacing: .14em;
}
.reply-form{
  background: var(--ivory);
  border: 1px solid var(--rule);
  padding: 26px 28px;
  margin-bottom: 40px;
  position: relative;
}
.reply-form-head{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.reply-form-head .who{
  display:flex; align-items:center; gap: 12px;
  font-family: var(--serif); font-style: italic; font-size: 16px;
  color: var(--ink);
}
.avatar{
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--linen);
  border: 1px solid var(--clay);
  display:grid; place-items:center;
  font-family: var(--serif); font-style: italic;
  color: var(--ink);
  font-size: 15px;
}
.reply-form textarea{
  width: 100%;
  background: transparent;
  border: 0; outline: 0;
  font-family: var(--serif);
  font-size: 18px; line-height: 1.5;
  color: var(--ink);
  min-height: 90px;
  resize: vertical;
}
.reply-form textarea::placeholder{ color: var(--ink-mute); font-style: italic; }
.reply-form-foot{
  display:flex; justify-content:space-between; align-items:center;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--rule-soft);
}
.reply-form-hint{
  font-family: var(--sans); font-size: 11px;
  color: var(--ink-mute);
}

.reply{
  display:grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.reply .avatar.lg{ width: 44px; height: 44px; font-size: 18px; }
.reply-body .who{
  display:flex; align-items:center; gap: 14px;
  margin-bottom: 6px;
  font-family: var(--serif); font-style: italic;
  font-size: 17px;
}
.reply-body .who b{ font-style: normal; font-weight: 500; color: var(--ink); }
.reply-body .when{
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .14em; color: var(--ink-mute);
}
.reply-body .badge{
  font-family: var(--sans); font-size: 9px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--brass-dim);
  border: 1px solid var(--brass-dim);
  padding: 2px 6px;
  border-radius: 2px;
}
.reply-body .text{
  font-family: var(--serif); font-size: 17.5px; line-height: 1.55;
  color: var(--ink); margin-top: 8px;
}
.reply-body .reactions{
  display:flex; gap: 22px; margin-top: 14px;
  font-family: var(--sans); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-mute);
}
.reply-body .reactions span{ transition: color .25s; }
.reply-body .reactions span:hover{ color: var(--ink); }

.reply-nested{
  margin-top: 18px;
  padding-left: 20px;
  border-left: 1px solid var(--rule);
}

/* ─────────────── AUTH MODAL ─────────────── */
.modal-bd{
  position: fixed; inset: 0;
  background: rgba(67,53,45,.34);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 200;
  display: grid; place-items: center;
  animation: fade .25s ease;
}
/* The HTML markup uses the [hidden] attribute — but the rule above sets
   display:grid, which would otherwise force the modal visible on every
   page load. Restore the hidden semantics explicitly. */
.modal-bd[hidden] { display: none !important; }
.modal{
  background: var(--ivory);
  border: 1px solid var(--rule);
  width: min(480px, 92vw);
  padding: 44px 44px 38px;
  position: relative;
  box-shadow: 0 30px 80px -20px rgba(67,53,45,.4);
}
.modal::before{
  content:""; position:absolute;
  inset: 10px;
  border: 1px solid var(--rule-soft);
  pointer-events:none;
}
.modal-x{
  position:absolute; top: 14px; right: 14px;
  background: transparent; border: 0;
  width: 28px; height: 28px;
  font-family: var(--serif); font-size: 22px;
  color: var(--ink-mute);
}
.modal-x:hover{ color: var(--ink); }

/* Registration success state — replaces the form with a confirmation card. */
.ma-reg-success {
	text-align: center;
	padding: 16px 4px 4px;
}
.ma-reg-success-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 80px; height: 80px;
	margin: 0 auto 20px;
	color: #3a7d3a;
	background: rgba(58,125,58,.08);
	border-radius: 50%;
	animation: ma-reg-mark-pop .45s cubic-bezier(.34,1.56,.64,1) both;
}
.ma-reg-success-check {
	stroke-dasharray: 60;
	stroke-dashoffset: 60;
	animation: ma-reg-check-draw .55s ease .25s forwards;
}
@keyframes ma-reg-mark-pop  { 0% { transform: scale(.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes ma-reg-check-draw { to { stroke-dashoffset: 0; } }
.modal h2{
  font-size: 30px;
  font-weight: 400;
  font-style: normal;
  margin-bottom: 6px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.modal h2 em{ font-style: normal; }
.modal-sub{
  font-family: var(--sans);
  font-style: normal;
  font-size: 14px;
  color: var(--ink-mute);
  margin-bottom: 26px;
  line-height: 1.5;
}
.modal-tabs{
  display:flex; gap: 4px;
  margin-bottom: 22px;
}
.modal-tab{
  appearance:none; background:transparent; border: 0;
  padding: 8px 14px;
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: .04em;
  color: var(--ink-mute);
  border-radius: 999px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.modal-tab:hover{ color: var(--ink); background: rgba(31,26,23,.04); }
.modal-tab.active{
  color: var(--ink);
  background: rgba(31,26,23,.06);
}
.modal-foot{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--sans);
  font-style: normal;
  font-size: 13px;
  color: var(--ink-mute);
  text-align: center;
}
.modal-link{
  color: var(--ink);
  text-decoration: none;
  border-bottom: 0;
  font-weight: 500;
}
.modal-link:hover{ color: var(--ink-soft); }
.modal-link-sep{
  display: inline-block;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--ink-mute);
  vertical-align: middle;
  margin: 0 8px 2px;
  opacity: .5;
}

/* ─────────────── ADMIN OVERLAYS ─────────────── */
[data-admin="true"] .editable{
  position: relative;
  outline: 1px dashed transparent;
  outline-offset: 4px;
  transition: outline-color .2s;
}
[data-admin="true"] .editable:hover{
  outline-color: var(--brass-dim);
}
[data-admin="true"] .editable:hover::before{
  content: attr(data-edit);
  position: absolute;
  top: -22px; left: 0;
  font-family: var(--mono); font-size: 9px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ivory);
  background: var(--brass-dim);
  padding: 2px 7px;
  z-index: 5;
}
.admin-bar{
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
  background: var(--ink);
  color: var(--ivory);
  display:flex; align-items:center; gap: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  z-index: 60;
  box-shadow: 0 10px 30px -10px rgba(67,53,45,.5);
  font-family: var(--sans); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
}
.admin-bar .dot{
  width: 8px; height: 8px; border-radius:50%; background: var(--brass);
  animation: pulse 2s infinite;
}
.admin-bar button{
  appearance:none; border:0; background: rgba(255,255,255,.08);
  color: var(--ivory); font: inherit;
  padding: 4px 10px; border-radius: 999px;
  letter-spacing: .14em;
}
.admin-bar button:hover{ background: rgba(255,255,255,.18); }
.admin-bar button.primary{ background: var(--brass); color: var(--ink); }

@keyframes pulse{
  0%,100%{ opacity:1; transform: scale(1); }
  50%{ opacity:.6; transform: scale(.86); }
}
@keyframes fade{ from{ opacity: 0; } to { opacity:1; } }
@keyframes slide-up{
  from{ opacity:0; transform: translateY(14px); }
  to{ opacity:1; transform: translateY(0); }
}

.slide-in{ animation: slide-up .55s ease both; }
.fade-in{ animation: fade .6s ease both; }

/* ─────────────── Reply attachment ─────────────── */
.ma-reply-attach {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 14px 0 6px;
}
.ma-attach-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  background: transparent;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.ma-attach-btn:hover { background: rgba(31,26,23,.04); color: var(--ink); border-color: var(--ink); }
.ma-attach-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--ink-mute);
  font-family: var(--sans);
}
.ma-attach-preview[hidden] { display: none; }
.ma-attach-preview.is-error { color: #b14a3a; }
.ma-attach-preview img {
  width: 48px; height: 48px;
  object-fit: cover;
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.ma-attach-remove {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .04em;
  padding: 4px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-mute);
  cursor: pointer;
}
.ma-attach-remove:hover { color: #b14a3a; border-color: #b14a3a; }

/* Comment-list rendered attachment */
.reply-attach { margin-top: 12px; }
.reply-attach img {
  max-width: 100%;
  max-height: 360px;
  object-fit: cover;
  border: 1px solid var(--rule);
  border-radius: 4px;
  display: block;
}
.reply-attach audio,
.reply-attach video { width: 100%; max-width: 480px; }
.reply-attach-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink);
  text-decoration: none;
}
.reply-attach-link:hover { background: rgba(31,26,23,.04); border-color: var(--ink); }

/* ─────────────── Responsive ─────────────── */

/* Tablet: collapse multi-column layouts but keep most type sizes. */
@media (max-width: 1080px){
  .hero-frame{ grid-template-columns: 1fr; gap: 40px; }
  .read-head{ grid-template-columns: 1fr; gap: 28px; }
  .read-body{ grid-template-columns: 1fr; gap: 32px; }
  .read-aside{ position: static; }
  .archive-row{ grid-template-columns: 60px 1fr 80px; }
  .archive-row .archive-tagcol, .archive-row .archive-meta{ display:none; }
  .news-card{ grid-template-columns: 1fr; padding: 56px 36px; gap: 32px; }
  .ftr-grid{ grid-template-columns: 1fr 1fr; }
  .cat-grid{ grid-template-columns: 1fr; }
}

/* Mobile: shrink the chrome, collapse the primary nav to an icon-only
   strip (account + search remain), reduce section padding and type. */
@media (max-width: 720px){
  :root{ --gutter: 18px; }

  /* Header — search + account stay put on the right; the primary text links
     collapse into a hamburger beside the logo that opens a slide-in drawer. */
  .hdr{ grid-template-columns: auto 1fr auto; padding: 18px 0; }
  .hdr-wrap.scrolled .hdr{ padding: 10px 0; }
  .hdr-nav.right{ display: flex; gap: 10px; }
  .hdr-left .hdr-burger{ display: inline-flex; }

  /* The primary nav becomes an off-canvas drawer sliding in from the left. */
  .hdr-nav:not(.right){
    position: fixed; top: 0; left: 0; bottom: 0;
    z-index: 9400;
    width: min(78vw, 300px);
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 20px 22px calc(20px + env(safe-area-inset-bottom));
    background: var(--parchment, #f7f2ea);
    box-shadow: 6px 0 28px rgba(20,16,12,.28);
    transform: translateX(-100%);
    transition: transform .32s cubic-bezier(.4,0,.2,1);
    overflow-y: auto; overscroll-behavior: contain;
  }
  body.ma-nav-open .hdr-nav:not(.right){ transform: translateX(0); }
  /* Drawer links stack as comfortable tap rows. */
  .hdr-nav:not(.right) a{
    padding: 14px 4px; font-size: 14px;
    border-bottom: 1px solid var(--rule-soft, rgba(67,53,45,.10));
  }
  /* The drawer is light parchment, so its text must be brown ink — even on the
     homepage, where the header bar links are ivory to read over the dark
     banner. These selectors are specific enough to win over the body.home
     ivory rules. */
  body.home .hdr-nav:not(.right) a,
  .hdr-nav:not(.right) a{ color: var(--ink); }
  body.home .hdr-nav:not(.right) a[aria-current="page"],
  body.home .hdr-nav:not(.right) a.current-menu-item,
  body.home .hdr-nav:not(.right) a.current_page_item,
  body.home .hdr-nav:not(.right) li.current-menu-item > a,
  body.home .hdr-nav:not(.right) li.current_page_item > a{
    color: var(--ink); border-color: var(--ink);
    background: rgba(247, 242, 234, .85);
  }
  /* Close (×) inside the drawer — brown ink, not ivory. */
  body.home .hdr-drawer-close,
  .hdr-drawer-close{ color: var(--ink); }
  /* Drawer header: a title + close button, shown only inside the drawer. */
  .hdr-drawer-head{
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 6px; padding-bottom: 12px;
    border-bottom: 1px solid var(--rule-soft, rgba(67,53,45,.18));
  }
  .hdr-drawer-title{
    font-family: var(--serif); font-style: italic;
    font-size: 19px; color: var(--ink);
  }
  /* Backdrop behind the open drawer. */
  .hdr-nav-backdrop{
    display: block;
    position: fixed; inset: 0; z-index: 9390;
    background: rgba(20,16,12,.5);
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
  }
  body.ma-nav-open .hdr-nav-backdrop{ opacity: 1; visibility: visible; }
  body.ma-nav-open{ overflow: hidden; }   /* lock page scroll while drawer is open */
  /* .hdr-wrap (position:absolute; z-index:50) is a stacking context, which
     traps the drawer at the header's level — so the backdrop would otherwise
     paint over the panel. Lift the whole header above the backdrop while open
     so the drawer reads crisp and the page behind it is dimmed. */
  body.ma-nav-open .hdr-wrap{ z-index: 9401; }

  .logo-name{ font-size: 11px; letter-spacing: .24em; }
  .logo-sub{ display: none; }
  .logo-mono{ width: 36px; height: 36px; font-size: 18px; }

  /* Section paddings — every full-bleed section becomes compact. */
  .section{ padding: 56px 0; }

  /* Hero carousel */
  .hero{ padding: 32px 0 48px; }
  .hero-frame{ gap: 24px; }
  .hero-title{ font-size: 44px; line-height: 1.02; }
  .hero-meta-row{ flex-wrap: wrap; gap: 8px; }
  .hero-meta{ flex-wrap:wrap; gap: 14px; }
  .hero-cta-row{ flex-wrap: wrap; gap: 10px; }
  .hero-cta-row .pill-btn{ width: 100%; text-align: center; }
  .hero-img-wrap .stamp,
  .hero-img-stamp,
  .hero-img-corner{ display: none; }     /* deco overlays clutter on small screens */
  .hero-upnext{ display: none; }
  .hero-controls{ width: 100%; justify-content: space-between; }
  .hero-progress-row{ flex-wrap: wrap; gap: 10px; }

  /* Categories */
  .cat-card-img{ aspect-ratio: 16/10; }
  .cat-card-title{ font-size: 28px; }

  /* Quote section */
  .quote-text{ font-size: 26px; line-height: 1.25; }
  .quote-mark{ font-size: 80px; }

  /* Archive feed */
  .archive-head{ flex-direction: column; align-items: stretch; gap: 18px; }
  .archive-tabs{ flex-wrap: wrap; gap: 6px; }
  .archive-row{ grid-template-columns: 1fr; padding: 16px 0; gap: 6px; }
  .archive-row .archive-num{ font-size: 11px; }
  .archive-row .archive-title{ font-size: 22px; }

  /* Newsletter */
  .news-card{ padding: 36px 22px; }
  .news-card h2{ font-size: 28px; }
  .news-stamp,
  .news-element{ display: none; }
  .news-checks{ gap: 10px; }
  .news-submit-row{ flex-direction: column; align-items: stretch; gap: 12px; }
  .news-submit-row .pill-btn{ width: 100%; text-align: center; }
  .news-issued{ text-align: center; }

  /* Single entry — read view */
  .read-wrap{ padding: 24px 0 64px; }
  .read-title{ font-size: 40px; line-height: 1.05; }
  .read-statsbar{ flex-wrap: wrap; gap: 14px; }
  .read-aside{ font-size: 13px; }
  .read-prose{ font-size: 16px; line-height: 1.65; }
  .read-prose h3{ font-size: 22px; }
  .read-prose blockquote{ font-size: 22px; padding: 10px 0 10px 18px; }

  /* Comments — discussion panel */
  .replies-head h2{ font-size: 26px; }
  .reply{ flex-direction: column; gap: 14px; }
  .reply .avatar.lg{ width: 44px; height: 44px; }
  .reply-form{ padding: 18px; }
  .reply-form-head{ flex-direction: column; align-items: flex-start; gap: 8px; }
  .reply-form-foot{ flex-direction: column; align-items: stretch; gap: 10px; }
  .reply-form-foot .pill-btn{ width: 100%; text-align: center; }

  /* Modals */
  .modal{ width: min(100%, 92vw); padding: 28px 24px 24px; }
  .modal h2{ font-size: 24px; }

  /* Footer */
  .ftr{ padding: 56px 0 36px; }
  .ftr-grid{ grid-template-columns: 1fr; gap: 28px; }
  .ftr-base{ flex-direction: column; gap: 14px; text-align: center; }

  /* Archive heading */
  main > header h1{ font-size: 36px; }

  /* Profile card */
  .ma-profile-wrap{ padding: 16px 0 56px; }
  .ma-profile-card{ grid-template-columns: 1fr; text-align: center; padding: 22px; gap: 16px; }
  .ma-profile-name{ font-size: 28px; }
  .ma-profile-avatar{ margin: 0 auto; }
  .ma-profile-bio{ margin-left: auto; margin-right: auto; }
  .ma-profile-stats{ justify-content: center; gap: 28px; }
  .ma-profile-actions{ justify-content: center; }
  .ma-profile-pill{ flex: 1 1 auto; min-width: 0; text-align: center; }
  .ma-profile-panel{ padding: 18px 18px 20px; }

  /* Auth modal foot */
  .modal-foot{ font-size: 12px; line-height: 1.7; }
  .modal-link-sep{ display: none; }    /* dot separator looks busy when text wraps */
}

/* Catch-all on mobile: never allow horizontal scroll. */
@media (max-width: 720px){
  html { overflow-x: hidden; }

  /* Defensive centering — guarantees nothing inherits a leftward bias on
     phones (notably iOS Safari with safe-area insets). */
  html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100vw;
  }
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  main, .site-main, .shell { margin-left: auto; margin-right: auto; }
  .home-banner, .home-banner-inner { width: 100%; max-width: 100%; box-sizing: border-box; margin-left: auto; margin-right: auto; }
  .home-banner-title, .home-banner-sub { text-align: center; }

  /* Centre most content blocks on mobile so they don't feel left-aligned
     against the small viewport. */
  .archive-row,
  .read-head,
  .read-aside,
  .archive-foot,
  .replies-head,
  .reply-form-foot { text-align: center; }
  .archive-row{ justify-items: center; }
  .read-statsbar,
  .hero-meta,
  .read-aside ul,
  .ftr-base { justify-content: center; }

  /* Footer 4 columns → 2×2 grid. */
  .ftr-grid{
    grid-template-columns: 1fr 1fr;
    gap: 28px 24px;
    text-align: center;
  }
  .ftr-col ul{ align-items: center; }

  /* Newsletter preferences (4 boxes) → 2×2 grid. */
  .news-checks{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .news-check{ justify-content: center; }

  /* Inner-page headers (archive / search / author) — center the title
     block so it doesn't lean against the left edge. */
  body:not(.home) main > header,
  .archive-list .archive-row,
  .ma-profile-card{ text-align: center; }
  body:not(.home) main > header{ grid-template-columns: 1fr !important; }
}

/* Small phones: drop heaviest type sizes another notch and tighten
   gutters so 320px devices still read comfortably. */
@media (max-width: 480px){
  :root{ --gutter: 14px; }

  .section{ padding: 44px 0; }

  .hero-title{ font-size: 36px; }
  .read-title{ font-size: 32px; }
  .cat-card-title{ font-size: 24px; }
  .quote-text{ font-size: 22px; }
  .news-card h2{ font-size: 24px; }
  .ma-profile-name{ font-size: 24px; }
  main > header h1{ font-size: 28px; }

  .ma-profile-stat .val{ font-size: 18px; }
  .ma-profile-stats{ gap: 22px; }

  .hero-frame{ gap: 18px; }
  .read-statsbar .read-stat .v{ font-size: 14px; }

  /* Account dropdown — anchor right edge to viewport, never overflow. */
  .acct-menu{ right: -8px; min-width: 220px; max-width: calc(100vw - 24px); }
}