/*
Theme Name: China Economic Review
Theme URI: https://chinaeconomicreview.com
Author: Earnshaw Books / Graham Earnshaw
Description: Custom homepage theme for the China Economic Review website. Reproduces the front-page design mockup exactly. Dynamic sections (Latest Briefs, CER Weekly, Archives search, Markets data) are wired to WordPress queries and a JSON data file — see front-page.php and inc/markets.json for dev notes.
Version: 13.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: Proprietary
Text Domain: cer-theme
*/

/* ============================================================
   DESIGN TOKENS — change brand colours / fonts here
   ============================================================ */
:root {
  --ink:        #1C1B19;
  --paper:      #FCFBF7;
  --crimson:    #E11F28;
  --hair:       #D8D5CE;
  --hair-strong:#B9B5AC;
  --muted:      #6B675F;
  --up:         #137A4E;
  --down:       #B42318;
  /* Web fonts — loaded via Google Fonts in functions.php */
  --serif: "Baskervville", "GFS Baskerville", Georgia, serif;
  --body:  "Source Serif 4", "Bitstream Charter", Georgia, serif;
  --sans:  "Inter", "Liberation Sans", Arial, sans-serif;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #E8E6DF; }
body {
  font-family: var(--body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ============================================================
   PAGE WRAPPER  (1180 px centred, 56 px side gutters)
   ============================================================ */
.cer-page {
  width: 1180px;
  margin: 36px auto 0;
  background: var(--paper);
  padding: 0 56px;
  box-shadow: 0 10px 40px rgba(0,0,0,.10);
}

/* ============================================================
   MASTHEAD
   ============================================================ */
.masthead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 30px 0 14px;
}
.brand .namewrap {
  display: flex;
  align-items: center;
  gap: 22px;
}
.brand .full {
  font-family: var(--serif);
  font-size: 44px;
  line-height: .96;
  letter-spacing: .005em;
}
.brand .logo-side,
.brand .custom-logo {
  /* 2026-07-26: red backdrop restored — the logo image itself can be
     hard to see against the white masthead depending on which asset
     (custom logo vs. theme default) is active, so the block colour is
     forced here rather than relying on the image file alone. */
  height: 52px;
  display: block;
  background-color: #b5131a;
  border: 10px solid #b5131a;
  box-sizing: content-box;
}
.brand .tag {
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 12px;
}
.menubtn {
  display: none;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
}
.burger { display: inline-block; width: 30px; }
.burger span { display: block; height: 2px; background: var(--ink); margin: 5px 0; }

/* ============================================================
   NAV
   ============================================================ */
.rule-double {
  border-top: 3px solid var(--crimson);
  border-bottom: 1px solid var(--ink);
  height: 4px;
}
.cer-nav {
  display: flex;
  justify-content: center;
  gap: 30px;
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 11px 0 12px;
  border-bottom: 1px solid var(--hair);
}
/* WordPress wp_nav_menu wraps in ul/li — flatten visually */
.cer-nav ul  { display: flex; gap: 30px; list-style: none; padding: 0; margin: 0; }
.cer-nav li  { display: block; }
.cer-nav a   { color: inherit; }
.cer-nav a:hover,
.cer-nav .current-menu-item > a,
.cer-nav .current-page-ancestor > a { color: var(--crimson); }

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.sec-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 30px 0 16px;
}
.sec-head h2 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}
.sec-head .line  { flex: 1; height: 1px; background: var(--hair-strong); }
.sec-head .more  {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--crimson);
  white-space: nowrap;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--crimson);
}
.date {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: .05em;
  color: var(--muted);
}

/* ============================================================
   NEWS BRIEFS  (3 columns)
   ============================================================ */
.briefs { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.briefs .col { padding: 0 26px; }
.briefs .col + .col { border-left: 1px solid var(--hair); }
.briefs .col:first-child { padding-left: 0; }
.briefs .col:last-child  { padding-right: 0; }

.brief {
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--hair);
}
.brief:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.brief h3 {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.18;
  font-weight: 700;
  margin: 6px 0 7px;
}
.brief h3 a { color: var(--ink); }
.brief h3 a:hover { color: var(--crimson); }
.brief p    { font-size: 14px; line-height: 1.5; color: #3a3833; }
.brief .date { margin-top: 7px; display: block; }

/* ============================================================
   ALL BRIEFS ARCHIVE — narrow single column
   (category-brief.php, v11, 2026-08-13)
   Headline + date only, reusing .brief/.brief--headline-only/h3/.date
   as-is (see above) — narrower than the site's normal 1180px width
   per Graham's spec, so 30 headlines read as a comfortable list
   rather than stretching edge-to-edge.
   ============================================================ */
.brief-list-narrow {
  max-width: 640px;
  margin: 0 auto 60px;
  padding-top: 6px;
}
.brief-list-narrow .sec-head h1 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
  margin: 0;
}
.brief-list-narrow .brief h3 { font-size: 18px; }
.brief-list-more {
  margin-top: 8px;
  text-align: center;
}
.brief-list-more a {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--crimson);
  text-decoration: none;
  border: 1px solid var(--hair-strong);
  padding: 10px 28px;
  border-radius: 3px;
}
.brief-list-more a:hover { background: var(--crimson); color: #fff; border-color: var(--crimson); }

@media (max-width: 768px) {
  .brief-list-narrow { max-width: 100%; }
}

/* ============================================================
   ARCHIVE PAGE — standalone (page-archive.php, v11, 2026-08-13)
   Reuses .arch-section/.arch-search/.arch-form/.arch-hint exactly as
   defined below for the homepage's embedded Archives band; this just
   adds generous top/bottom padding so the search band reads as
   sitting in the middle of an otherwise empty page, per Graham's spec.
   ============================================================ */
.arch-page-wrap { padding: 70px 0 120px; }
.arch-section--standalone { margin-top: 0; margin-bottom: 0; }

@media (max-width: 768px) {
  .arch-page-wrap { padding: 40px 0 70px; }
}

/* ============================================================
   HOME PAGE REDESIGN — 3-COLUMN BRIEFS / CITY PHOTO / MARKET REVIEWS
   (v10, 2026-08-03)
   Headlines in both side columns reuse the EXACT same .brief h3
   rule above (19px, var(--serif)) — and .eyebrow / .date are the
   same shared classes too, so typography matches the live Briefs
   list exactly, by construction, not by re-declaring matching
   values here.
   ============================================================ */
.briefs-3col {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr 1.3fr;
  gap: 32px;
  align-items: stretch;
}
.briefs-3col .sec-head { margin: 0 0 16px; }

.col-briefs .brief--headline-only { padding-bottom: 12px; margin-bottom: 12px; }

/* Center column stretches to match the taller of the Briefs / Market
   Reviews columns (align-items: stretch on .briefs-3col above), rather
   than a fixed height — the photo fills whatever space is available.
   Recommended source photo size: portrait orientation, at minimum
   600x1200px (1200x2400px for retina-sharp display); this column is
   ~288px wide at the theme's 1180px fixed page width, and typically
   runs 550-750px tall depending on how many Briefs/Market Reviews
   items are showing that day — object-fit: cover crops any photo at
   least that large to fit cleanly with no distortion. */
.col-cityphoto {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.col-cityphoto img {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  margin-bottom: 28px; /* photo runs a bit shorter than the full column height */
  object-fit: cover;
  object-position: center 68%;
  display: block;
  border: 1px solid var(--hair);
}
.cityphoto-cap {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  margin-top: 4px; /* sits closer to the image's bottom edge, not floating
                       further down in the shortened space below it */
  flex-shrink: 0;
}

.col-marketreviews { padding-left: 32px; }
.market-review {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  /* Matches .col-briefs .brief--headline-only's 12px/12px exactly —
     these two columns need identical per-item spacing so the same
     number of 2-line items comes out to the same total height on
     both sides (previously 14px/14px here vs 12px/12px there added
     up to a visible gap over 6 items). */
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--hair);
  text-decoration: none;
}
.market-review:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.market-review .mr-icon {
  width: 52px;
  height: 52px;
  border-radius: 6px;
  flex-shrink: 0;
  /* Headlines here are exactly 2 lines (h3: 19px, line-height 1.18) —
     13px lands the icon's vertical center on the second line of the
     headline. If the headline copy or font size ever changes,
     re-check this offset. */
  margin-top: 13px;
}
.market-review .mr-text { display: block; }
.market-review .mr-text h3 {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.18;
  font-weight: 700;
  /* margin-top intentionally 0, not 6px like .brief h3: .brief h3 sits
     directly in a plain block container, so its 6px top margin
     collapses away against the container's own top edge and is
     invisible. .mr-text is a flex item's child, and flex items don't
     allow child margins to collapse through them — so the same 6px
     here would NOT collapse, it would add 6px of real, visible extra
     height per item versus the Briefs column. This was the actual
     root cause of the two columns drifting apart in height. */
  margin: 0 0 7px;
}
.market-review .mr-text .date { display: block; }

@media (max-width: 900px) {
  .briefs-3col { grid-template-columns: 1fr 1fr; }
  .col-marketreviews {
    grid-column: 1 / -1;
    border-left: none;
    border-top: 1px solid var(--hair);
    padding-left: 0;
    padding-top: 20px;
    margin-top: 4px;
  }
}
@media (max-width: 640px) {
  .briefs-3col { grid-template-columns: 1fr; }
  .col-cityphoto { order: -1; }
  .col-cityphoto img { height: 220px; }
  .col-marketreviews { border-top: 1px solid var(--hair); padding-top: 18px; margin-top: 4px; }
}


/* ============================================================
   NEWSLETTER SIGNUP BAND
   ============================================================ */
.signup {
  margin: 30px -56px;
  padding: 30px 56px;
  background: #2F2E34;
  color: #F4F2EC;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}
.signup .txt { max-width: 600px; }
.signup .k {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #C9A24A;
  margin-bottom: 7px;
}
.signup h3 {
  font-family: var(--serif);
  font-size: 27px;
  margin: 0 0 7px;
  font-weight: 700;
  line-height: 1;
}
.signup p {
  font-family: var(--body);
  font-size: 15.5px;
  color: #C9C6BE;
  line-height: 1.45;
}
.signup .signup-form { display: flex; flex: 0 0 auto; }
.signup input {
  width: 300px; height: 46px;
  border: 1px solid #4a4843;
  background: #211F25;
  color: #F4F2EC;
  padding: 0 16px;
  font-family: var(--body);
  font-size: 15px;
}
.signup button {
  height: 46px;
  padding: 0 26px;
  border: none;
  background: var(--crimson);
  color: #fff;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}

/* ============================================================
   CER WEEKLY
   ============================================================ */
.weekly { display: grid; grid-template-columns: 46% 54%; gap: 0; }
.weekly .pic { padding-right: 28px; }
.weekly .pic .frame {
  width: 100%; height: 248px;
  border: 1px solid var(--hair-strong);
  overflow: hidden;
  background: #0f1722;
}
.weekly .pic .frame img { width: 100%; height: 100%; object-fit: cover; }
.weekly .pic .cap {
  font-family: var(--sans);
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 7px;
  letter-spacing: .02em;
}
.weekly .body { padding-left: 30px; border-left: 1px solid var(--hair); }
.weekly .body h3 {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.1;
  font-weight: 700;
  margin: 6px 0 10px;
}
.weekly .body h3 a { color: var(--ink); }
.weekly .body h3 a:hover { color: var(--crimson); }
.weekly .body p {
  font-size: 15px;
  line-height: 1.55;
  color: #3a3833;
  margin-bottom: 14px;
}
.weekly .more-list { border-top: 1px solid var(--hair); padding-top: 10px; }
.weekly .more-list .it {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid var(--hair);
  font-family: var(--serif);
  font-size: 15px;
}
.weekly .more-list .it:last-child { border-bottom: none; }
.weekly .more-list .it a { color: var(--ink); }
.weekly .more-list .it a:hover { color: var(--crimson); }
.weekly .more-list .it .date { font-family: var(--sans); }

/* ============================================================
   ARCHIVES  (dark band)
   ============================================================ */
.arch-section {
  background: #2F2E34;
  margin: 36px -56px;
  padding: 34px 56px 40px;
}
.arch-section .sec-head h2   { color: #F4F2EC; }
.arch-section .sec-head .line { background: rgba(255,255,255,.20); }
.arch-section .sec-head .more { color: #E1656B; }

.arch-search { margin-bottom: 0; }
.arch-search .arch-form { display: flex; max-width: 600px; }
.arch-search input {
  flex: 1; height: 48px;
  border: 1px solid var(--hair-strong);
  background: #fff;
  padding: 0 16px;
  font-family: var(--body);
  font-size: 15px;
  color: var(--ink);
}
.arch-search button {
  height: 48px;
  padding: 0 28px;
  border: none;
  background: var(--crimson);
  color: #fff;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}
.arch-search .arch-hint {
  font-family: var(--body);
  font-size: 14.5px;
  color: #9C988F;
  margin-top: 12px;
}

/* ============================================================
   MARKETS  (3 columns)
   ============================================================ */
.markets { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.mkt-note {
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--muted);
  margin: -6px 0 16px;
  letter-spacing: .01em;
}
.markets .col { padding: 0 28px; }
.markets .col + .col { border-left: 1px solid var(--hair); }
.markets .col:first-child { padding-left: 0; }
.markets .col:last-child  { padding-right: 0; }
.markets h4 {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 9px;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 4px;
}
.mkt-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hair);
}
.mkt-row:last-child { border-bottom: none; }
.mkt-row .nm  { font-family: var(--body);   font-size: 14px; }
.mkt-row .px  { font-family: var(--sans);   font-size: 13px; text-align: right; }
.mkt-row .ch  { font-family: var(--sans);   font-size: 12px; text-align: right; width: 62px; }
.mkt-row .ch.u { color: var(--up); }
.mkt-row .ch.d { color: var(--down); }

/* ============================================================
   FOOTER
   ============================================================ */
.cer-footer {
  width: 1180px;
  margin: 0 auto;
  padding: 26px 56px 30px;
  background: #2F2E34;
  color: #CFCCC4;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.cer-footer .fmenu .flogo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.cer-footer .fmenu .flogo-text {
  font-family: var(--serif);
  font-size: 20px;
  color: #F4F2EC;
  font-weight: 700;
}
.cer-footer .fmenu .flogo-text .cer { color: #E0696B; }
.cer-footer .fmenu .flogo img { height: 34px; }

.cer-footer .fmenu nav { display: flex; gap: 64px; max-width: 560px; }
/* WordPress menu inside footer — flatten ul/li */
.cer-footer .fmenu nav ul {
  display: flex;
  flex-direction: column;
  gap: 9px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.cer-footer .fmenu nav li { display: block; }
.cer-footer .fmenu nav a {
  color: #CFCCC4;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cer-footer .fmenu nav a:hover { color: #F4F2EC; }
.cer-footer .fmenu .cp {
  font-family: var(--sans);
  font-size: 11px;
  color: #7d7a72;
  margin-top: 16px;
  letter-spacing: .04em;
}

.cer-footer .fsign { text-align: right; }
.cer-footer .fsign .k {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #C9A24A;
  margin-bottom: 9px;
}
.cer-footer .fsign .footer-form { display: flex; justify-content: flex-end; }
.cer-footer .fsign input {
  width: 220px; height: 40px;
  border: 1px solid #4a4843;
  background: #211F25;
  color: #F4F2EC;
  padding: 0 14px;
  font-family: var(--body);
  font-size: 14px;
}
.cer-footer .fsign button {
  height: 40px;
  padding: 0 18px;
  border: none;
  background: var(--crimson);
  color: #fff;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}

/* ============================================================
   BOTTOM SPACER
   ============================================================ */
.pad-bottom { height: 6px; }

/* ============================================================
   NEWSLETTER PLUGIN FORM OVERRIDES
   Styles whatever a WordPress newsletter plugin renders inside
   .signup-form (homepage band) and .footer-form (footer band).
   Tested against MailPoet and the Newsletter plugin; adjust
   selectors if your plugin outputs different markup.
   ============================================================ */
.signup-form form,
.signup-form > div { display: flex; }

.signup-form input[type="email"],
.signup-form input[type="text"] {
  width: 300px;
  height: 46px;
  border: 1px solid #4a4843;
  background: #211F25;
  color: #F4F2EC;
  padding: 0 16px;
  font-family: var(--body);
  font-size: 15px;
  border-radius: 0;
}
.signup-form input[type="submit"],
.signup-form button[type="submit"] {
  height: 46px;
  padding: 0 26px;
  border: none;
  background: var(--crimson);
  color: #fff;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0;
}
/* Hide plugin's own labels (they're replaced by the band heading) */
.signup-form label { display: none; }
/* MailPoet wrapper */
.signup-form .mailpoet_form { display: flex; }

.footer-form form,
.footer-form > div { display: flex; }

.footer-form input[type="email"],
.footer-form input[type="text"] {
  width: 220px;
  height: 40px;
  border: 1px solid #4a4843;
  background: #211F25;
  color: #F4F2EC;
  padding: 0 14px;
  font-family: var(--body);
  font-size: 14px;
  border-radius: 0;
}
.footer-form input[type="submit"],
.footer-form button[type="submit"] {
  height: 40px;
  padding: 0 18px;
  border: none;
  background: var(--crimson);
  color: #fff;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0;
}
.footer-form label { display: none; }
.footer-form .mailpoet_form { display: flex; }

/* ============================================================
   RESPONSIVE — FLUID WRAPPER
   Below 1293 px (1180 + 2×56.5) the fixed-width wrapper goes
   fluid. Below that, padding and multi-column grids collapse
   in stages down to a single-column mobile layout.
   ============================================================ */

/* --- Full-width container below 1293 px ------------------- */
@media ( max-width: 1292px ) {
  .cer-page,
  .cer-footer {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .cer-page { margin-top: 0; }
}

/* --- Tablet-large  (≤ 1024 px) ---------------------------- */
@media ( max-width: 1024px ) {
  .cer-page    { padding: 0 40px; }
  .cer-footer  { padding: 26px 40px 30px; }
  .signup      { margin: 30px -40px; padding: 30px 40px; }
  .arch-section{ margin: 36px -40px; padding: 34px 40px 40px; }

  .brand .full          { font-size: 38px; }
  .weekly .body h3      { font-size: 24px; }
  .signup input,
  .signup-form input[type="email"],
  .signup-form input[type="text"] { width: 240px; }
}

/* --- Tablet  (≤ 768 px) ----------------------------------- */
@media ( max-width: 768px ) {
  .cer-page    { padding: 0 24px; }
  .cer-footer  { padding: 26px 24px 30px; }
  .signup      { margin: 30px -24px; padding: 30px 24px; }
  .arch-section{ margin: 36px -24px; padding: 34px 24px 40px; }

  /* Briefs: last col wraps full-width, shows its 2 posts side-by-side */
  .briefs { grid-template-columns: 1fr 1fr; }
  .briefs .col:nth-child(3) {
    grid-column: 1 / -1;
    display: flex;
    gap: 26px;
    border-left: none;
    border-top: 1px solid var(--hair);
    padding: 18px 0 0;
  }
  .briefs .col:nth-child(3) .brief { flex: 1; }

  /* Weekly: stack image above body */
  .weekly { grid-template-columns: 1fr; }
  .weekly .pic { padding-right: 0; margin-bottom: 22px; }
  .weekly .body {
    padding-left: 0;
    border-left: none;
    border-top: 1px solid var(--hair);
    padding-top: 20px;
  }

  /* Markets: 3 → 1 col */
  .markets { grid-template-columns: 1fr; }
  .markets .col { padding: 0; margin-bottom: 24px; }
  .markets .col:last-child { margin-bottom: 0; }
  .markets .col + .col {
    border-left: none;
    border-top: 1px solid var(--hair);
    padding-top: 16px;
  }

  /* Signup band: stack text above form */
  .signup { flex-direction: column; gap: 20px; }
  .signup .signup-form,
  .signup-form .mailpoet_form { flex-direction: column; gap: 8px; }
  .signup input,
  .signup-form input[type="email"],
  .signup-form input[type="text"]   { width: 100%; max-width: 480px; }
  .signup button,
  .signup-form input[type="submit"],
  .signup-form button[type="submit"] { width: 100%; max-width: 480px; }

  /* Archives form: stack */
  .arch-search .arch-form { flex-direction: column; gap: 8px; max-width: 100%; }
  .arch-search input  { width: 100%; }
  .arch-search button { width: 100%; height: 44px; }

  /* Footer: stack menu above signup */
  .cer-footer { flex-direction: column; gap: 28px; }
  .cer-footer .fsign { text-align: left; }
  .cer-footer .fsign .footer-form,
  .cer-footer .fsign .footer-form .mailpoet_form { justify-content: flex-start; }
  .footer-form input[type="email"],
  .footer-form input[type="text"] { width: 200px; }
}

/* --- Mobile  (≤ 640 px) ----------------------------------- */
@media ( max-width: 640px ) {
  .cer-page    { padding: 0 16px; }
  .cer-footer  { padding: 24px 16px 28px; }
  .signup      { margin: 30px -16px; padding: 28px 16px; }
  .arch-section{ margin: 36px -16px; padding: 28px 16px 36px; }

  /* Masthead: keep brand left. 2026-07-26 (Graham's request): the Menu
     button is removed entirely on mobile — nav links show stacked and
     always open below the masthead instead of behind a hamburger toggle.
     This also removes the earlier logo/button overlap, since there's no
     absolutely-positioned button left to collide with the logo. */
  .masthead { padding: 18px 0 12px; position: relative; }
  .brand .full { font-size: 28px; }
  .menubtn { display: none; }

  /* Mobile nav: always visible, stacked — no hamburger toggle */
  .cer-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-bottom: 1px solid var(--hair);
    padding: 4px 0 8px;
  }
  .cer-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
  }
  .cer-nav li { width: 100%; }
  .cer-nav a {
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid var(--hair);
    font-size: 13px;
  }
  .cer-nav li:last-child > a { border-bottom: none; }

  /* Briefs: fully single-column */
  .briefs { grid-template-columns: 1fr; }
  .briefs .col { padding: 0; }
  .briefs .col:nth-child(2) { border-left: none; border-top: 1px solid var(--hair); padding-top: 18px; }
  .briefs .col:nth-child(3) {
    flex-direction: column;
    gap: 0;
    padding-top: 0;
    border-top: none;
  }

  /* Footer nav: stack columns */
  .cer-footer .fmenu nav { flex-direction: column; gap: 20px; }
}

/* --- Small phone  (≤ 380 px) ------------------------------ */
@media ( max-width: 380px ) {
  .brand .full { font-size: 22px; }
  .brand .tag  { font-size: 10px; }
  .weekly .body h3 { font-size: 20px; }
}