/* 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); }
}