/* ──────────────────────────────────────────────────────────────
   Static-edition overrides, loaded after main.css / character.css.
   House rules live here instead of edits to the theme sheet, so the
   original stays diffable against the WordPress theme:

   0. Two typefaces with strict roles: Cormorant Garamond for all
      reading matter, Space Grotesk for every number and label.
   1. Numbers sit at consistent sizes.
   2. Hover states lighten; nothing lifts, tilts or scales.
   3. The history feed reads as a proper table with a pager.
   4. No decorative glyphs, no eyebrows, no italics dropped into
      ordinary sentences, as few horizontal rules as possible.
   5. Each home section carries its own background area; drop a
      picture into public/backgrounds/ and it appears behind it.
   ────────────────────────────────────────────────────────────── */

/* ── 0. Typefaces ── */
:root{
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Cormorant Garamond', Georgia, serif;
  --mono:  'Space Grotesk', 'Segoe UI', sans-serif;
  --num:   'Space Grotesk', 'Segoe UI', sans-serif;
}
body{ font-size: 17px; }

/* One shared recipe for every label and number on the site. */
.mono,
.archive-num,
.cat-card-num,
.hero-counter,
.hero-counter em,
.hero-counter span,
.archive-meta,
.archive-table-head,
.archive-tab,
.read-stat .l,
.read-stat .v,
.hero-meta-item span,
.hero-meta-item b,
.hero-tick,
.hero-upnext .label,
.hero-upnext .num,
.kind-tag,
.cat-card-tag,
.cat-card-foot,
.news-issued,
.stamp,
.search-hint,
.archive-pager button{
  font-family: var(--num);
  font-style: normal;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

/* ── 1. Even numbers and label sizes ── */
.mono{ font-size: 11px; font-weight: 500; }
.hero-counter,
.hero-counter em,
.hero-counter span{ font-size: 11px; font-weight: 500; color: var(--ink-soft); }
.cat-card-num,
.archive-num{ font-size: 11px; font-weight: 500; }
.read-stat .l{ font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; }
.read-stat .v{ font-size: 15px; font-weight: 500; }
.hero-meta-item span{ font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.hero-meta-item b{ font-size: 12px; font-weight: 500; }
.kind-tag{ font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-mute); }
.search-hint{ font-size: 11px; color: var(--ink-mute); }

/* Reading matter stays serif and upright: no stray italics in sentences. */
.hero-byline,
.read-byline,
.archive-main .by,
.archive-excerpt,
.cat-card-cap,
.hero-excerpt{ font-style: normal; }

/* ── 2. Hover: lighten, never move ── */
.cat-card:hover{ transform: none; }
.cat-card:hover .cat-card-photo{
  transform: none;
  filter: saturate(1) brightness(1.06);
}
.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); /* resting pose kept, no scale-up */
}
.hero-arrow:active{ transform: none; }
.pill-btn:hover,
.pill-btn.solid:hover{ transform: none; filter: brightness(1.05); }

/* ── 3. The history feed as a table ── */
.archive-table-head,
.archive-row{
  display: grid;
  grid-template-columns: 52px 1.15fr 1.5fr 120px 64px;
  gap: 20px;
  align-items: center;
}
.archive-table-head{
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-mute);
  padding: 10px 16px;
}
.archive-list{
  background: rgba(247,242,234,.6);
  border-radius: 6px;
}
.archive-list .archive-row{
  padding: 15px 16px;
  margin: 0;
  border-bottom: 1px solid var(--rule-soft);
}
.archive-list .archive-row:last-child{ border-bottom: 0; }
.archive-row:hover{
  background: rgba(255,255,255,.55);
  padding-left: 16px;
  padding-right: 16px;
  margin: 0;
}
.archive-main h3{
  font-size: 18px;
  line-height: 1.25;
  margin-bottom: 3px;
}
.archive-main .by{ font-size: 14px; color: var(--ink-mute); }
.archive-excerpt{
  font-size: 14.5px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.archive-meta{ font-size: 10px; letter-spacing: .06em; }
.archive-rating{
  font-family: var(--num);
  font-size: 15px;
  font-weight: 500;
  text-align: right;
}
.archive-rating small{ display: block; font-size: 9px; color: var(--ink-mute); }

@media (max-width: 860px){
  .archive-table-head{ display: none; }
  .archive-row{ grid-template-columns: 36px 1fr 56px; }
  .archive-excerpt, .archive-meta{ display: none; }
}

/* pager */
.archive-pager{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
}
.archive-pager[hidden]{ display: none; }
.archive-pager button{
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-soft);
  background: rgba(247,242,234,.8);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background .3s ease, color .3s ease;
}
.archive-pager button:hover{ background: rgba(255,255,255,.9); }
.archive-pager button.is-current{
  background: var(--ink);
  color: var(--ivory);
  border-color: var(--ink);
}
.archive-pager button:disabled{ opacity: .35; cursor: default; }

/* ── 4. Fewer horizontal rules ── */
.read-statsbar{ border-top: 0; border-bottom: 0; padding: 12px 0; gap: 44px; }
.entry__facts{ border: 0; }
.hero-progress-row{ border: 0; }
.cat-head{ border-bottom: 0; }
.archive-head{ border-bottom: 0; }
.archive-foot{ border-top: 0; }
.read-aside h4{ border-bottom: 0; }

/* ── 5. Section background areas ──
   Each home section is a canvas: a soft tint now, and the moment a
   picture exists at the path below it shows behind the content at
   low opacity (a missing file simply leaves the tint).

     public/backgrounds/collections.jpg   the three shelves
     public/backgrounds/feed.jpg          newly filed table
     public/backgrounds/newsletter.jpg    the monthly letter
     public/backgrounds/quote.jpg         the rotating quote
*/
.home-sec{ position: relative; }
.home-sec > .shell{ position: relative; z-index: 1; }
.home-sec::before{
  content: "";
  position: absolute; inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: .12;
  pointer-events: none;
}
.sec-collections{ background: #f2e9db; }
.sec-collections::before{ background-image: url('/backgrounds/collections.jpg'); }
.sec-feed{ background: #ece2d0; }
.sec-feed::before{ background-image: url('/backgrounds/feed.jpg'); }
.sec-news{ background: #f5efe4; }
.sec-news::before{ background-image: url('/backgrounds/newsletter.jpg'); }
.quote-sec{
  background-color: #e7dcc9;
  background-image: url('/backgrounds/quote.jpg');
  background-size: cover;
  background-position: center;
}

/* the forum avatar: plain reader initial, no glyphs */
.ma-forum-msg-avatar .avatar{ font-family: var(--num); font-size: 10px; font-weight: 600; }

/* ── 6. Reader account menu and sign-in ──
   Passwordless: a six digit code by email. The old theme's account
   chrome is reused where it fits, restyled to house rules. */
.acct{ position:relative; }
.acct-initials{
  font-family:var(--num); font-size:11px; font-weight:600;
  letter-spacing:.02em;
}
.acct:not(.is-signed-in) .acct-initials{ display:none; }
.acct.is-signed-in .acct-anon{ display:none; }

.acct-menu{
  position:absolute; right:0; top:calc(100% + 10px);
  min-width:214px;
  background:var(--ivory);
  border:1px solid var(--rule);
  border-radius:7px;
  box-shadow:0 16px 40px -22px rgba(67,53,45,.4);
  padding:7px;
  z-index:60;
}
.acct-head{ padding:9px 11px 11px; }
.acct-name{ display:block; font-family:var(--serif); font-size:17px; }
.acct-sub{
  display:block; font-family:var(--num); font-size:11px;
  color:var(--ink-mute); overflow-wrap:anywhere; margin-top:2px;
}
.acct-item{
  display:block; width:100%; text-align:left;
  font-family:var(--num); font-size:12px; font-weight:500;
  color:var(--ink-soft);
  background:none; border:0; border-radius:5px;
  padding:9px 11px; cursor:pointer; text-decoration:none;
  transition:background .2s ease;
}
.acct-item:hover{ background:var(--parchment); color:var(--ink); }
.acct-item-soft{ color:var(--ink-mute); }

/* the modal */
.ma-auth[hidden]{ display:none; }
.ma-auth{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; }
.ma-auth-veil{ position:absolute; inset:0; background:rgba(43,34,29,.5); }
body.ma-auth-open{ overflow:hidden; }
.ma-auth-card{
  position:relative;
  width:min(420px,calc(100vw - 36px));
  background:var(--ivory);
  border-radius:10px;
  padding:32px 30px 26px;
  box-shadow:0 30px 70px -30px rgba(43,34,29,.6);
}
.ma-auth-x{
  position:absolute; top:12px; right:14px;
  background:none; border:0; cursor:pointer;
  font-size:24px; line-height:1; color:var(--ink-mute);
}
.ma-auth-x:hover{ color:var(--ink); }
.ma-auth-title{ font-family:var(--serif); font-weight:500; font-size:26px; margin:0 0 7px; }
.ma-auth-sub{ margin:0 0 20px; color:var(--ink-soft); font-size:15.5px; line-height:1.5; }
.ma-auth-field{ margin-bottom:15px; }
.ma-auth-field label{
  display:block;
  font-family:var(--num); font-size:10px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-mute); margin-bottom:6px;
}
.ma-auth-field input{
  width:100%; box-sizing:border-box;
  font-family:var(--serif); font-size:17px; color:var(--ink);
  background:#fff;
  border:1px solid var(--rule); border-radius:5px;
  padding:11px 13px;
}
.ma-auth-field input:focus{ outline:none; border-color:var(--ink-soft); }
.ma-auth-code{
  font-family:var(--num) !important; font-size:22px !important;
  font-weight:500; letter-spacing:.3em; text-align:center;
}
.ma-auth-form .pill-btn{ margin-right:7px; }
.ma-auth-note{ margin:14px 0 0; font-size:15px; line-height:1.5; color:var(--ink-soft); }
.ma-auth-note.is-err{ color:#8a3a34; }
.ma-auth-note.is-ok{ color:#4a6b4f; }
.ma-auth-switch{
  margin:20px 0 0; padding-top:15px;
  border-top:1px solid var(--rule-soft);
  font-size:15px; color:var(--ink-mute);
}
.ma-auth-switch button{
  font-family:var(--serif); font-size:15px;
  background:none; border:0; padding:0; cursor:pointer;
  color:var(--ink); text-decoration:underline;
}

/* reading room: compose only for signed-in readers */
.ma-forum-signin p{ font-size:15.5px; color:var(--ink-soft); }
.ma-forum-signin button{
  font-family:var(--serif); font-size:15.5px;
  background:none; border:0; padding:0; cursor:pointer;
  color:var(--ink); text-decoration:underline;
}

/* ── 7. Editing bar for signed-in editors ──
   The old theme put edit affordances inline on the page. Same idea, but the
   editing itself happens in the console, so there is one editor to maintain
   and nothing editable is exposed to a visitor. */
.ma-editbar{
  position:fixed; left:0; right:0; bottom:0;
  z-index:150;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--ink); color:var(--ivory);
  padding:9px 18px;
  font-family:var(--num); font-size:11px; font-weight:500;
  letter-spacing:.04em;
}
.ma-editbar-who{ color:rgba(247,242,234,.7); margin-right:auto; }
.ma-editbar-btn{
  color:var(--ivory);
  background:rgba(247,242,234,.12);
  border:1px solid rgba(247,242,234,.24);
  border-radius:4px;
  padding:5px 11px;
  text-decoration:none;
  cursor:pointer;
  font:inherit;
  transition:background .2s ease;
}
.ma-editbar-btn:hover{ background:rgba(247,242,234,.24); }
body.ma-has-editbar{ padding-bottom:46px; }

/* Room for the inline Edit chip when an editor is signed in. */
body.ma-signed-in .archive-table-head,
body.ma-signed-in .archive-row{ grid-template-columns: 52px 1.15fr 1.5fr 120px 64px 64px; }
@media (max-width: 860px){
  body.ma-signed-in .archive-row{ grid-template-columns: 36px 1fr 56px 60px; }
}

.ma-row-edit{
  font-family:var(--num); font-size:10px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-mute);
  border:1px solid var(--rule);
  border-radius:4px;
  padding:4px 9px;
  text-decoration:none;
  justify-self:end;
}
.ma-row-edit:hover{ background:#fff; color:var(--ink); }