/*
Theme Name: Adventure Journal
Template: generatepress
Version: 3.11.56
Description: Adventure Journal child theme for GeneratePress
*/

/* ============================================
   AJ DESIGN SYSTEM
   Chaparral Pro / Acumin Pro Extra Condensed / Proxima Nova
   Cream / Dark / Orange palette
   ============================================ */


:root {
  --cream:       #F5F0E8;
  --cream-dark:  #EDE7D9;
  --dark:        #1C1C1A;
  --dark-mid:    #2E2E2A;
  --orange:      #D4521A;
  --orange-dark: #B84416;
  --text:        #2A2925;
  --text-mid:    #5A5750;
  --text-light:  #8A8780;
  --rule:        #D4C9B5;
}

/* ---- BASE ---- */
body {
  background: var(--cream);
  color: var(--text);
  font-family: proxima-nova, sans-serif;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/*
 * GP and WooCommerce both apply `ol, ul { margin: 0 0 1.5em 3em }`
 * which pushes nav and footer lists 51px right, breaking alignment.
 * Reset margin on all ul/ol inside our nav and footer components globally.
 */
nav ul,
nav ol,
footer ul,
footer ol {
  margin: 0;
  padding: 0;
}

/* ---- NAV ---- */
.site-header {
  background: var(--dark) !important;
  padding: 0 40px;
}
.site-header .inside-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  max-width: 100%;
  padding: 0;
}
.site-title a,
.site-title a:visited {
  font-family: proxima-nova-condensed, sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream) !important;
  text-decoration: none;
}
.site-description { display: none; }
.main-navigation,
.main-navigation ul {
  background: transparent !important;
}
.main-navigation a {
  font-family: proxima-nova-condensed, sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream) !important;
  opacity: 0.75;
  transition: opacity 0.2s;
  padding: 0 !important;
}
.main-navigation a:hover { opacity: 1; }
.main-navigation ul li { margin-left: 32px; }

/* Subscribe nav item */
.main-navigation ul li.nav-subscribe a {
  background: var(--orange);
  color: var(--cream) !important;
  opacity: 1;
  padding: 7px 16px !important;
  font-weight: 600;
}

/* ---- ARTICLE HEADER ---- */
.entry-header {
  max-width: 720px;
  margin: 0 auto;
  padding: 64px 40px 40px;
}
.entry-title {
  font-family: chaparral-pro, Georgia, serif !important;
  font-weight: 700 !important;
  font-size: clamp(32px, 5vw, 52px) !important;
  line-height: 1.1 !important;
  color: var(--dark) !important;
  margin-bottom: 28px !important;
  letter-spacing: -0.01em !important;
}
.entry-meta {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: proxima-nova-condensed, sans-serif;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---- ARTICLE BODY ---- */
.entry-content {
  max-width: 680px;
  margin: 0 auto;
  padding: 40px 40px 64px;
}
.entry-content p {
  font-family: 'Georgia', serif;
  font-size: 18px;
  line-height: 1.75;
  color: var(--text);
  margin-bottom: 24px;
}
.entry-content p:first-of-type::first-letter {
  font-family: chaparral-pro, Georgia, serif;
  font-size: 72px;
  font-weight: 700;
  line-height: 0.8;
  float: left;
  margin-right: 8px;
  margin-top: 8px;
  color: var(--dark);
}
.entry-content blockquote {
  border-left: 3px solid var(--orange);
  margin: 40px 0;
  padding: 4px 0 4px 28px;
  background: none;
}
.entry-content blockquote p {
  font-family: chaparral-pro, Georgia, serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  color: var(--dark-mid);
  margin-bottom: 0;
}

/* ---- CATEGORY LABEL ---- */
.entry-header .cat-links a {
  font-family: proxima-nova-condensed, sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange) !important;
  text-decoration: none;
}

/* ---- SUBSCRIBE STRIP ---- */
.aj-subscribe-strip {
  background: var(--dark);
  padding: 56px 40px;
}
.aj-subscribe-strip-inner {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
}
.aj-subscribe-eyebrow {
  font-family: proxima-nova-condensed, sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 12px;
}
.aj-subscribe-headline {
  font-family: chaparral-pro, Georgia, serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--cream);
  line-height: 1.2;
  margin-bottom: 16px;
}
.aj-subscribe-body {
  font-family: proxima-nova, sans-serif;
  font-size: 15px;
  color: #9A9690;
  line-height: 1.6;
  max-width: 520px;
}
.aj-btn-subscribe {
  display: inline-block;
  background: var(--orange);
  color: var(--cream) !important;
  font-family: proxima-nova-condensed, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 28px;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.2s;
}
.aj-btn-subscribe:hover { background: var(--orange-dark); }
.aj-btn-single-issue {
  display: block;
  margin-top: 12px;
  font-family: proxima-nova, sans-serif;
  font-size: 13px;
  color: #706A60 !important;
  text-decoration: none !important;
  text-align: center;
}
.aj-subscribe-proof {
  margin-top: 10px;
  font-family: proxima-nova, sans-serif;
  font-size: 12px;
  color: #504A42;
  font-style: italic;
  text-align: center;
}

/* ---- FOOTER ---- */
.site-footer {
  background: var(--dark) !important;
  padding: 0 !important;
  color: rgba(245,240,232,0.5) !important;
}
.site-footer .inside-footer {
  max-width: 100%;
  margin: 0;
  padding: 0;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 64px 40px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 64px 40px;
}

/* Footer text hierarchy on dark background */
.footer-brand-name { color: var(--cream) !important; font-family: proxima-nova-condensed, sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 12px; }
.footer-tagline, .fn-footer-tagline, .pod-footer-tagline, .aj-footer-tagline { color: rgba(245,240,232,0.72) !important; font-family: chaparral-pro, Georgia, serif; font-style: italic; font-size: 16px !important; line-height: 1.5; }
.footer-col-label, .fn-footer-col-label, .pod-footer-col-label, .aj-footer-col-label { color: rgba(245,240,232,0.62) !important; font-family: proxima-nova-condensed, sans-serif; font-weight: 600; font-size: 12px !important; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 16px; }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-links a, .footer-links .footer-disabled, .fn-footer-links a, .pod-footer-links a, .aj-footer-links a { color: rgba(245,240,232,0.85) !important; font-family: proxima-nova, sans-serif; font-size: 16px !important; text-decoration: none; transition: color 0.2s; }
.footer-links a:hover, .fn-footer-links a:hover, .pod-footer-links a:hover, .aj-footer-links a:hover { color: #F5F0E8 !important; }
.footer-bottom, .footer-bottom p { color: rgba(245,240,232,0.58) !important; font-family: proxima-nova, sans-serif; font-size: 14px !important; margin: 0; }

/* Footer — mobile. The desktop 4-column grid (1.5fr 1fr 1fr 1fr) with 64px
   padding has no phone treatment, so columns crush and the brand block sits
   ragged next to the first link column. On phones: brand spans the full width
   on its own row, the four link groups fall into an even 2x2 grid, and the
   oversized section padding/gaps come down to phone scale. */
@media (max-width: 768px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 48px 24px;
    padding: 48px 24px 32px;
  }
  .footer-brand {
    grid-column: 1 / -1;
    margin-bottom: 16px;
  }
  .footer-bottom {
    padding: 20px 24px 32px;
  }
}

/* Nav links — slightly brighter than before */
.main-navigation a { opacity: 0.82 !important; }
.main-navigation a:hover { opacity: 1 !important; }

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
  .site-header { padding: 0 20px; }
  .entry-header,
  .entry-content { padding-left: 24px; padding-right: 24px; }
  .aj-subscribe-strip { padding: 40px 24px; }
  .aj-subscribe-strip-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ---- Kill drop cap on demand ---- */
/* Add class="no-dropcap" to any <p> to suppress the drop cap */
.entry-content p.no-dropcap::first-letter,
/* Also kill if the paragraph opens with an <em> tag (italic dialogue etc.) */
.entry-content p:first-of-type > em:first-child::first-letter {
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  float: none !important;
  margin: 0 !important;
  color: inherit !important;
  line-height: inherit !important;
}

/* ---- WOOCOMMERCE: kill drop cap in cart and checkout ---- */
.woocommerce-cart .entry-content p:first-of-type::first-letter,
.woocommerce-checkout .entry-content p:first-of-type::first-letter,
.wc-block-components-product-metadata__description p::first-letter,
.wc-block-components-order-summary-item__description p::first-letter {
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  float: none !important;
}

/* Hide product short description in cart and checkout order summary */
.wc-block-components-product-metadata,
.wc-block-components-order-summary-item__description {
  display: none !important;
}

/* ---- MAGAZINE POSTS: collapse two-column block layout to single column ---- */

/* ---- PULLQUOTE: override WordPress block stylesheet padding (4em 0) ---- */
/* WP injects .wp-block-pullquote { padding: 4em 0 } via inline <style>.
   This affects 9 Field Notes posts that use Gutenberg pullquote blocks.
   AJ design: proxima-nova, flush left, orange top/bottom hairlines. */
.wp-block-pullquote {
  padding: 32px 0 !important;
  margin: 32px 0 !important;
  text-align: left !important;
  border: none !important;
  border-top: 2px solid var(--orange) !important;
  border-bottom: 2px solid var(--orange) !important;
  box-sizing: border-box !important;
}
.wp-block-pullquote blockquote {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
.wp-block-pullquote p {
  font-family: proxima-nova, sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.6 !important;
  color: var(--text) !important;
  text-align: left !important;
  margin: 0 !important;
}
.wp-block-pullquote cite {
  font-family: proxima-nova-condensed, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--text-light) !important;
  font-style: normal !important;
  display: block !important;
  margin-top: 12px !important;
}

/* Also handle the .fn-post-body context (single.php Field Notes branch) */
.fn-post-body .wp-block-pullquote {
  padding: 32px 0 !important;
  margin: 32px 0 !important;
}


.single-post .wp-block-columns {
  flex-direction: column !important;
  gap: 0 !important;
}
.single-post .wp-block-column {
  flex-basis: 100% !important;
  width: 100% !important;
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  padding-top: 0 !important;
}

/* Images within collapsed columns go full width */
.single-post .wp-block-column figure,
.single-post .wp-block-column .wp-block-image {
  max-width: 100% !important;
}

/* Kill any drop cap on non-paragraph first elements */
.single-post .wp-block-group:first-child p::first-letter,
.single-post .wp-block-group:first-child div::first-letter {
  font-size: inherit !important;
  float: none !important;
  font-weight: inherit !important;
  font-family: inherit !important;
  line-height: inherit !important;
  margin: 0 !important;
}

/* ---- RECOMMENDED READING ---- */
.rr-entry {
  padding: 40px 0;
  border-bottom: 1px solid var(--rule);
}
.rr-entry:first-child {
  border-top: 1px solid var(--rule);
}
.rr-grid {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 32px;
  align-items: start;
}
.rr-cover {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.rr-book-title {
  font-family: acumin-pro-extra-condensed, sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--dark);
  margin-bottom: 4px;
}
.rr-book-meta {
  font-family: proxima-nova-condensed, sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 14px;
}
.rr-entry p {
  font-family: chaparral-pro, Georgia, serif;
  font-size: 17px;
  line-height: 1.72;
  color: var(--text);
  margin-bottom: 0;
}
.rr-entry p::first-letter {
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  float: none !important;
  margin: 0 !important;
  line-height: inherit !important;
}
@media (max-width: 480px) {
  .rr-grid {
    grid-template-columns: 100px 1fr;
    gap: 20px;
  }
  .rr-book-title { font-size: 19px; }
  .rr-entry p { font-size: 16px; }
}

/* ---- IMAGE CAPTIONS ---- */
.aj-article-body p.aj-img-caption {
    font-family: proxima-nova, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text-light) !important;
    letter-spacing: 0.02em;
    margin: 8px 0 28px 0 !important;
    width: 100% !important;
    line-height: 1.4 !important;
}

/* Breakout caption: offset left to align with breakout image edges */
.aj-article-body p:has(> img:not(.aj-inline)) + p.aj-img-caption {
    margin-left: -160px !important;
    width: calc(100% + 160px) !important;
}

/* Gallery caption: same left alignment as gallery images */
.aj-article-body .gallery.gallery-columns-2 + p.aj-img-caption {
    margin-top: -24px !important;
    margin-left: -150px !important;
    width: calc(100% + 300px) !important;
}

/* wp-caption figure (Classic Editor [caption] shortcode):
   override GeneratePress max-width:100% so breakout margin works */
.aj-article-body figure.wp-caption {
    max-width: calc(100% + 400px) !important;
    width: calc(100% + 400px) !important;
    margin-left: -200px !important;
    margin-right: -200px !important;
}
.aj-article-body figure.wp-caption img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}
/* wp-caption: INLINE override — keep in column when img has aj-inline */
.aj-article-body figure.wp-caption:has(img.aj-inline) {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Caption aligns flush to the image (left edge of breakout). */
.aj-article-body figure.wp-caption figcaption.wp-caption-text {
    font-family: proxima-nova, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text-light) !important;
    letter-spacing: 0.02em !important;
    line-height: 1.4 !important;
    margin-top: 8px !important;
    padding: 2px 0 2px 0 !important;
}

/* ============================================
   IMAGE SYSTEM
   - Breakout (default): no class needed
   - Inline (in column): add aj-inline to img tag
   ============================================ */

/* Zero bottom margin on image paragraphs */
.aj-article-body p:has(> img) {
    margin-bottom: 0 !important;
}

/* Gap between two consecutive image paragraphs */
.aj-article-body p:has(> img) + p:has(> img) {
    margin-top: 24px !important;
}

/* Space below image paragraph before text resumes */
.aj-article-body p:has(> img) + p:not(:has(> img)):not(.aj-img-caption) {
    margin-top: 28px !important;
}

/* Zero margin on all article body images */
.aj-article-body p > img {
    margin: 0 !important;
}

/* BREAKOUT — default */
.aj-article-body p > img:not(.aj-inline) {
    display: block !important;
    width: calc(100% + 320px) !important;
    max-width: calc(100% + 320px) !important;
    margin-left: -160px !important;
}

/* INLINE — add aj-inline class to keep in column */
.aj-article-body p > img.aj-inline {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
}

/* ---- GALLERY DIPTYCH ---- */
.aj-article-body .gallery.gallery-columns-2 {
    display: flex !important;
    gap: 6px;
    margin: 40px -160px 28px -160px !important;
    width: calc(100% + 320px) !important;
}
.aj-article-body .gallery.gallery-columns-2 .gallery-item {
    flex: 1 !important;
    margin: 0 !important;
}
.aj-article-body .gallery.gallery-columns-2 .gallery-icon {
    aspect-ratio: 2/3;
    overflow: hidden;
}
.aj-article-body .gallery.gallery-columns-2 .gallery-icon img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
}

/* ---- GALLERY GRID (aj-grid): native orientation, 2-col ---- */
.aj-article-body .aj-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin: 40px -160px 28px -160px !important;
    width: calc(100% + 320px) !important;
}
.aj-article-body .aj-grid .aj-grid-item {
    overflow: hidden;
}
.aj-article-body .aj-grid .aj-grid-item img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}
@media (max-width: 768px) {
    .aj-article-body .aj-grid {
        grid-template-columns: 1fr;
    }
}

/* PORTFOLIO IMAGES: use aj-inline class instead */

/* ── This Is Summer — AJ33 (ts-summer-*) ──
   Self-contained photo feature layout.
   Overrides .aj-article-body to allow full-width content.
   ── */

/* Blow out the 760px article body for this feature */
.aj-article-body:has(.ts-summer-wrap) {
  max-width: 100%;
  padding: 0;
}

/* Hide the WP-generated post header (title + byline) when this feature is present */
body:has(.ts-summer-wrap) > .aj-article-header {
  display: none;
}

.ts-summer-wrap {
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  color: var(--text);
  background: var(--cream);
  font-family: chaparral-pro, Georgia, serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Header */
.ts-summer-header {
  max-width: 900px;
  margin: 0 auto;
  padding: 56px 40px 0;
}
.ts-summer-kicker {
  font-family: proxima-nova-condensed, 'Arial Narrow', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 16px 0;
}
.ts-summer-wrap h1 {
  font-family: acumin-pro-extra-condensed, 'Arial Narrow', sans-serif;
  font-weight: 700;
  font-size: clamp(60px, 10vw, 96px);
  line-height: 0.92;
  text-transform: uppercase;
  color: var(--dark);
  margin: 0 0 20px 0;
  letter-spacing: -0.01em;
}
.ts-summer-deck {
  font-family: chaparral-pro, Georgia, serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  max-width: 660px;
  margin: 0 0 12px 0;
}
.ts-summer-warning {
  font-family: proxima-nova-condensed, 'Arial Narrow', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light);
  margin: 0 0 40px 0;
}
.ts-summer-rule {
  display: block;
  width: 36px;
  height: 3px;
  background: var(--orange);
  margin: 0 0 48px 0;
}

/* Photo pairs */
.ts-summer-pair {
  max-width: 1100px;
  margin: 0 auto 56px;
  padding: 0 40px;
}

/* Main + smaller (large left, small right) */
.ts-summer-main-inset {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 16px;
  margin-bottom: 12px;
  align-items: start;
}
.ts-summer-main-inset img {
  width: 100%;
  display: block;
}

/* Small left, large right */
.ts-summer-inset-main {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 16px;
  margin-bottom: 12px;
  align-items: start;
}
.ts-summer-inset-main img {
  width: 100%;
  display: block;
}

/* Equal two-up */
.ts-summer-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 12px;
}
.ts-summer-duo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Captions */
.ts-summer-caption {
  font-family: proxima-nova-condensed, 'Arial Narrow', sans-serif;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
  line-height: 1.5;
  margin: 14px 0 8px 0;
}
.ts-summer-quote {
  font-family: chaparral-pro, Georgia, serif;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  margin: 0 0 6px 0;
}

/* Caption pair (side by side under duo grid) */
.ts-summer-caption-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

/* Credit line */
.ts-summer-credit {
  font-family: proxima-nova, sans-serif;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-light);
  margin: 4px 0 0 0;
}

/* Divider */
.ts-summer-divider {
  max-width: 1100px;
  margin: 0 auto 48px;
  padding: 0 40px;
}
.ts-summer-divider-line {
  height: 1px;
  background: var(--rule);
}

/* Responsive */
@media (max-width: 768px) {
  .ts-summer-header { padding: 36px 20px 0; }
  .ts-summer-pair { padding: 0 20px; margin-bottom: 40px; }
  .ts-summer-duo { grid-template-columns: 1fr; }
  .ts-summer-main-inset { grid-template-columns: 1fr; }
  .ts-summer-inset-main { grid-template-columns: 1fr; }
  .ts-summer-caption-pair { grid-template-columns: 1fr; }
  .ts-summer-wrap h1 { font-size: 56px; }
  .ts-summer-divider { padding: 0 20px; }
}

/* ════════════════════════════════════════════════════════════════════
   HOMEPAGE — DIGITAL COLLECTION HINGE + SURFACES
   ════════════════════════════════════════════════════════════════════
   The "hinge" band sits between the AJ Collection pitch and the
   manifesto/stats. Dark background acts as a visual pivot: "this isn't
   just a magazine — there's a library underneath." Four surface cards
   below it on the cream background. Each card is a full link.
   ──────────────────────────────────────────────────────────────────── */

.section-collection-hinge {
  background: var(--dark, #1C1C1A);
  color: var(--cream, #F5F0E8);
  text-align: center;
  padding: 72px 40px 64px;
}
.collection-hinge-eyebrow {
  font-family: 'proxima-nova-condensed', 'Helvetica Neue', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange, #DE761C);
  margin-bottom: 16px;
}
.collection-hinge-title {
  font-family: 'chaparral-pro', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.2;
  color: var(--cream, #F5F0E8);
  max-width: 760px;
  margin: 0 auto 16px;
}
.collection-hinge-deck {
  font-family: 'proxima-nova', -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(245,240,232,0.7);
  max-width: 720px;
  margin: 0 auto;
}

.section-surfaces {
  background: var(--cream, #F5F0E8);
  padding: 56px 40px 72px;
}
.surfaces-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.surface-card {
  display: flex;
  flex-direction: column;
  background: var(--cream-warm, #FBF6F0);
  border: 0.5px solid rgba(28,28,26,0.1);
  border-radius: 4px;
  padding: 20px 20px 22px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.surface-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(28,28,26,0.08);
  border-color: rgba(28,28,26,0.18);
}
.surface-card-eyebrow {
  font-family: 'proxima-nova-condensed', 'Helvetica Neue', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange, #DE761C);
  margin-bottom: 16px;
}
/* v3.11.09 — Explore cards: one full-bleed real image each, all matching.
   Three Square (dish), Historical Badass (profile hero), Map and Timeline
   fill the 16:10 frame edge to edge. Bookshelf (a tall cover) uses the same
   frame with a top-biased crop so the cover's title stays visible. */
.surface-card-media {
  width: 100%;
  aspect-ratio: 16 / 10;
  margin-bottom: 16px;
  border-radius: 3px;
  overflow: hidden;
  background: #ECE5DB;
  border: 0.5px solid rgba(28,28,26,0.10);
}
.surface-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.surface-card-media.is-cover img {
  object-position: center top;
}

.surface-card-title {
  font-family: 'chaparral-pro', Georgia, serif;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 400;
  color: var(--dark, #1C1C1A);
  margin-bottom: 10px;
}
.surface-card-desc {
  font-family: 'chaparral-pro', Georgia, serif;
  font-size: 14px;
  line-height: 1.55;
  color: #5A5750;
  margin: 0 0 16px;
  flex: 1;
}
.surface-card-cta {
  font-family: 'proxima-nova-condensed', 'Helvetica Neue', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange, #DE761C);
  margin-top: auto;
}

@media (max-width: 1100px) {
  .surfaces-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}
@media (max-width: 760px) {
  .surfaces-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .collection-hinge-title { font-size: 28px; }
  .section-collection-hinge { padding: 48px 24px 40px; }
  .section-surfaces { padding: 36px 24px 48px; }
}
@media (max-width: 520px) {
  .surfaces-grid { grid-template-columns: 1fr; gap: 12px; }
  .collection-hinge-title { font-size: 24px; }
  .collection-hinge-deck { font-size: 14px; }
  .surface-card-title { font-size: 20px; }
}

/* v3.10.14 — Home explore-card + hinge type bump (mobile). Appended after the
   520px block so these win on phones. Body/labels were reading too small. */
@media (max-width: 768px) {
  .surface-card-eyebrow { font-size: 12px; }
  .surface-card-title { font-size: 22px; }
  .surface-card-desc { font-size: 16px; }
  .surface-card-cta { font-size: 13px; }
  .collection-hinge-deck { font-size: 16px; }
}

/* ════════════════════════════════════════════════════════════════════
   RECIPES — [aj_recipes] shortcode grid
   ════════════════════════════════════════════════════════════════════
   Used on the homepage (6–8 random recipes) and on the recipe landing
   page (larger count, title-sorted). Each card is a photo-led link that
   jumps to the recipe's anchor in its parent Three Square article.
   ──────────────────────────────────────────────────────────────────── */

.aj-recipes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px 28px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 40px;
}
.aj-recipe-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease;
}
.aj-recipe-card:hover {
  transform: translateY(-3px);
}
.aj-recipe-card-photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--cream-band);
  margin-bottom: 14px;
}
.aj-recipe-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.aj-recipe-card:hover .aj-recipe-card-photo img {
  transform: scale(1.03);
}
.aj-recipe-card-title {
  font-family: 'chaparral-pro', Georgia, serif;
  font-size: 22px;
  line-height: 1.2;
  color: var(--dark);
  margin: 0 0 6px 0;
  font-weight: 400;
}
.aj-recipe-card-teaser {
  font-family: 'chaparral-pro', Georgia, serif;
  font-size: 14px;
  line-height: 1.5;
  color: #5A5750;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 900px) {
  .aj-recipes-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
}
@media (max-width: 600px) {
  .aj-recipes-grid { grid-template-columns: 1fr; padding: 0 20px; gap: 28px; }
  .aj-recipe-card-title { font-size: 19px; }
  .aj-recipe-card-teaser { font-size: 13px; -webkit-line-clamp: 2; }
}

/* ════════════════════════════════════════════════════════════════════
   RECIPES LANDING — /recipes/ page template
   ════════════════════════════════════════════════════════════════════
   Mad-Lib hero with two dropdowns (meal type + cooking method), a
   results summary, and a grid of recipe cards below. Scoped under
   .recipes-scope so this sheet can share color/type patterns with the
   bookshelf landing without them wrestling over the same class names.
   AJ Typekit fonts throughout.
   ──────────────────────────────────────────────────────────────────── */

.recipes-scope {
  --r-bg:          var(--cream, #F5F0E8);
  --r-text:        var(--dark, #1C1C1A);
  --r-text-light:  #5A5750;
  --r-text-faint:  #9B9B8E;
  --r-accent:      var(--orange, #DE761C);
  --r-accent-dark: #BF4C20;
  --r-rule:        rgba(28,28,26,0.12);
  background: var(--r-bg);
  color: var(--r-text);
}

.recipes-scope .r-hero {
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 52px 40px 32px;
  text-align: center;
}
.recipes-scope .r-hero-compact {
  min-height: 0;
  padding: 40px 40px 28px;
}
.recipes-scope .r-hero-label {
  font-family: 'proxima-nova-condensed', 'Helvetica Neue', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--r-text-faint);
  margin-bottom: 32px;
}
.recipes-scope .r-sentence {
  max-width: 820px;
  line-height: 1.6;
}
.recipes-scope .r-text {
  font-family: 'chaparral-pro', Georgia, serif;
  font-size: clamp(22px, 2.8vw, 32px);
  color: var(--r-text);
}
.recipes-scope .r-dd-wrap {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
}
.recipes-scope .r-dd {
  font-family: 'chaparral-pro', Georgia, serif;
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 24px);
  color: var(--r-accent);
  background: none;
  border: none;
  border-bottom: 2px solid var(--r-accent);
  padding: 0 28px 2px 4px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  line-height: 1.6;
  transition: border-color 0.2s;
  width: auto;
  max-width: 90vw;
}
.recipes-scope .r-dd:hover { border-bottom-color: var(--r-accent-dark); }
.recipes-scope .r-dd option {
  font-family: 'chaparral-pro', Georgia, serif;
  font-size: 16px;
  font-style: normal;
  color: var(--r-text);
  background: var(--r-bg);
}
.recipes-scope .r-dd-arrow {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--r-accent);
  font-size: 12px;
}
.recipes-scope .r-hero-count {
  margin-top: 28px;
  font-family: 'proxima-nova', sans-serif;
  font-size: 14px;
  color: var(--r-text-light);
}
.recipes-scope .r-hero-count strong {
  color: var(--r-accent);
  font-weight: 700;
}

.recipes-scope .r-results-header {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px 16px;
}
.recipes-scope .r-results-bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--r-rule);
}
.recipes-scope .r-results-title {
  font-family: 'chaparral-pro', Georgia, serif;
  font-size: 22px;
  color: var(--r-text);
}
.recipes-scope .r-results-clear {
  font-family: 'proxima-nova', sans-serif;
  font-size: 13px;
  color: var(--r-text-faint);
  text-decoration: none;
}
.recipes-scope .r-results-clear:hover { color: var(--r-text); }

.recipes-scope .r-no-results {
  text-align: center;
  padding: 64px 40px;
}
.recipes-scope .r-no-results-text {
  font-family: 'chaparral-pro', Georgia, serif;
  font-size: 22px;
  color: var(--r-text);
  margin-bottom: 8px;
}
.recipes-scope .r-no-results-sub {
  font-family: 'chaparral-pro', Georgia, serif;
  font-size: 15px;
  font-style: italic;
  color: var(--r-text-light);
}

.recipes-scope .r-grid-section {
  padding: 28px 40px 64px;
}
.recipes-scope .r-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px 28px;
  max-width: 1080px;
  margin: 0 auto;
}
.recipes-scope .r-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease;
}
.recipes-scope .r-card:hover { transform: translateY(-3px); }
.recipes-scope .r-card-photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--cream-band, #EFE8DA);
  margin-bottom: 14px;
  border-radius: 2px;
}
.recipes-scope .r-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.recipes-scope .r-card:hover .r-card-photo img { transform: scale(1.03); }
.recipes-scope .r-card-title {
  font-family: 'chaparral-pro', Georgia, serif;
  font-size: 22px;
  line-height: 1.2;
  color: var(--r-text);
  margin: 0 0 6px;
  font-weight: 400;
}
.recipes-scope .r-card-teaser {
  font-family: 'chaparral-pro', Georgia, serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--r-text-light);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 900px) {
  .recipes-scope .r-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
  .recipes-scope .r-hero { padding: 32px 24px 28px; min-height: 0; }
  .recipes-scope .r-grid-section { padding: 24px 24px 48px; }
}
@media (max-width: 600px) {
  .recipes-scope .r-grid { grid-template-columns: 1fr; gap: 28px; }
  .recipes-scope .r-text, .recipes-scope .r-dd { font-size: 22px; }
  .recipes-scope .r-card-title { font-size: 19px; }
  .recipes-scope .r-card-teaser { font-size: 13px; -webkit-line-clamp: 2; }
}

/* ==========================================================================
   Collection Header — shared masthead system used on Recipes and Bookshelf
   landings. Architecture mirrors The Magazine landing's .page-header (also
   echoed by Historical Badass's .hb-page-header) so all four collection
   landings present a consistent masthead.

   - Eyebrow (orange) → big title (left) + stacked stats (right)
   - Accent rule (orange by default; green for .bookshelf-scope)
   - Description paragraph in Proxima Nova
   - Closing thin rule via padding-bottom + border-bottom on the desc
   ========================================================================== */

.aj-collection-header {
  max-width: 960px;
  margin: 0 auto;
  padding: 56px 40px 0;
}

.aj-collection-eyebrow {
  font-family: 'proxima-nova-condensed', 'proxima-nova', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange, #DE761C);
  margin-bottom: 14px;
}

.aj-collection-header-top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 56px;
  align-items: end;
  padding-bottom: 24px;
}

.aj-collection-title {
  font-family: 'acumin-pro-extra-condensed', sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 4.5vw, 54px);
  line-height: 1;
  color: var(--dark, #1C1C1A);
  letter-spacing: -0.018em;
  margin: 0;
}

/* Book taxonomy archives use a serif title for a quieter, reading-room
   feel. The Mad Libs surface short adjective/place words ("Biography",
   "Sea", "Memoir") that hit too hard in Acumin Extra Condensed at full
   size. Chaparral keeps the masthead system but lets the term breathe. */
body.tax-book_subject .aj-collection-title,
body.tax-book_style .aj-collection-title,
body.tax-book_place .aj-collection-title,
body.tax-book_author .aj-collection-title,
body.tax-book_publisher .aj-collection-title,
body.tax-book_figure .aj-collection-title {
  font-family: 'chaparral-pro', Georgia, serif;
  font-weight: 600;
  font-size: clamp(36px, 4.5vw, 52px);
  letter-spacing: 0;
  line-height: 1.05;
}

.aj-collection-header-stats {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 190px;
  padding-bottom: 2px;
}

.aj-collection-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 9px 0;
  border-top: 1px solid var(--rule, rgba(28,28,26,0.18));
}
.aj-collection-stat:last-child {
  border-bottom: 1px solid var(--rule, rgba(28,28,26,0.18));
}
.aj-collection-stat strong {
  font-family: 'acumin-pro-extra-condensed', sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  color: var(--dark, #1C1C1A);
  letter-spacing: -0.02em;
}
.aj-collection-stat span {
  font-family: 'proxima-nova-condensed', 'proxima-nova', sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-light, #888);
  white-space: nowrap;
}

.aj-collection-rule {
  height: 3px;
  background: var(--orange, #DE761C);
  margin-bottom: 22px;
}

/* Bookshelf override — green accent rule. Eyebrow stays orange so the
   AJ brand identifier reads consistently across all section landings. */
.bookshelf-scope .aj-collection-rule {
  background: #5a7a4d;
}

.aj-collection-desc {
  font-family: 'proxima-nova', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-mid, #5F5E5A);
  max-width: 680px;
  padding-bottom: 52px;
  border-bottom: 1px solid var(--rule, rgba(28,28,26,0.18));
  margin: 0;
}

@media (max-width: 700px) {
  .aj-collection-header { padding: 36px 24px 0; }
  .aj-collection-header-top {
    gap: 24px;
    padding-bottom: 18px;
  }
  .aj-collection-header-stats { min-width: 140px; }
  .aj-collection-stat strong { font-size: 22px; }
  .aj-collection-desc { padding-bottom: 36px; font-size: 17px; }
}

/* ============================================
   UNIFIED NAV  — single source of truth
   Used by the site header (.aj-site-nav) and every
   story header (.aj-nav, .fn-nav). Markup comes from
   aj_nav_inner() + aj_nav_overlay() in functions.php.
   Colors are explicit (#DE761C, not --orange) so all
   bars render identically regardless of page :root.
   ============================================ */
.aj-site-nav,
.aj-nav,
.fn-nav {
  background: #1C1C1A;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  z-index: 100000;
  gap: 24px;
}
.aj-site-nav { position: sticky; top: 0; }
.aj-nav { position: fixed; top: 0; left: 0; right: 0; transform: translateY(0); transition: transform 0.3s ease; }
.aj-nav.nav-hidden { transform: translateY(-100%); }
.fn-nav { position: sticky; top: 0; }
.admin-bar .aj-nav { top: 32px; }

.nav-logo { display: flex; align-items: center; text-decoration: none; line-height: 0; flex-shrink: 0; }

.nav-sections,
.nav-utility { display: flex; list-style: none; align-items: center; margin: 0; padding: 0; }
.nav-sections { gap: 22px; flex: 1; justify-content: center; }
.nav-utility { gap: 18px; flex-shrink: 0; }
.nav-sections li,
.nav-utility li { display: flex; align-items: center; }

.nav-sections a,
.nav-utility a {
  font-family: proxima-nova-condensed, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #F5F0E8;
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 0.2s;
  white-space: nowrap;
}
.nav-utility a { font-size: 11px; letter-spacing: 0.14em; font-weight: 600; }
.nav-sections a:hover,
.nav-utility a:hover { opacity: 1; }

.nav-search-btn {
  background: none; border: none; cursor: pointer; padding: 0;
  display: flex; align-items: center; color: #F5F0E8;
  opacity: 0.75; transition: opacity 0.2s;
}
.nav-search-btn:hover { opacity: 1; }
.nav-search-btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; display: block; }

.nav-cart-link { position: relative; display: flex; align-items: center; opacity: 0.75; transition: opacity 0.2s; color: #F5F0E8; text-decoration: none; }
.nav-cart-link:hover { opacity: 1; }
.nav-cart-link svg { width: 18px; height: 18px; fill: none; stroke: #F5F0E8; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.nav-cart-count {
  position: absolute; top: -6px; right: -7px;
  background: #DE761C; color: #F5F0E8;
  font-family: proxima-nova-condensed, sans-serif; font-size: 10px; font-weight: 700;
  width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.nav-cart-count.empty { display: none; }

.nav-subscribe {
  background: #DE761C;
  color: #F5F0E8 !important;
  opacity: 1 !important;
  padding: 7px 14px;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  transition: background 0.2s !important;
}
.nav-subscribe:hover { background: #BF4C20 !important; }

.nav-hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
.nav-hamburger span { display: block; width: 22px; height: 2px; background: #F5F0E8; border-radius: 1px; }

.nav-mobile-overlay { display: none; position: fixed; top: 56px; left: 0; right: 0; bottom: 0; background: #1C1C1A; z-index: 99999; padding: 32px 24px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.admin-bar .nav-mobile-overlay { top: calc(56px + 32px); }
@media (max-width: 782px) { .admin-bar .nav-mobile-overlay { top: calc(56px + 46px); } }
.nav-overlay-close { position: absolute; top: 12px; right: 16px; background: none; border: none; color: #F5F0E8; font-size: 30px; line-height: 1; cursor: pointer; padding: 4px 10px; opacity: 0.8; }
.nav-overlay-close:hover { opacity: 1; }
.nav-mobile-overlay.open { display: block; }
.nav-mobile-overlay ul { list-style: none; margin: 0; padding: 0; }
.nav-mobile-overlay li { border-bottom: 1px solid #2E2E2A; }
.nav-mobile-overlay a {
  display: block; padding: 16px 0;
  font-family: proxima-nova-condensed, sans-serif; font-weight: 700; font-size: 20px;
  letter-spacing: 0.1em; text-transform: uppercase; color: #F5F0E8; text-decoration: none;
}
.nav-mobile-overlay .nav-overlay-search {
  display: block; width: 100%; text-align: left;
  padding: 16px 0; background: none; border: none; cursor: pointer;
  font-family: proxima-nova-condensed, sans-serif; font-weight: 700; font-size: 20px;
  letter-spacing: 0.1em; text-transform: uppercase; color: #F5F0E8;
}

@media (max-width: 1100px) {
  .aj-site-nav, .aj-nav, .fn-nav { padding: 0 20px; gap: 16px; }
  .nav-sections, .nav-utility { display: none; }
  .nav-hamburger { display: flex; }
}

/* ============================================================
   CART line-item cover — larger, natural aspect
   Targets the WooCommerce Cart block (WC 10.x) + classic fallback.
   NOTE: the square crop is baked into the generated
   woocommerce_thumbnail file. To show the FULL portrait cover,
   set WooCommerce > Settings > Products > Display >
   Thumbnail Cropping = Uncropped, then regenerate thumbnails.
   (Shop grid is unaffected — it uses medium_large.)
   ============================================================ */
.wc-block-cart-item__image,
.woocommerce-cart-form td.product-thumbnail {
  width: 120px;
}
.wc-block-cart-item__image img,
.woocommerce-cart-form td.product-thumbnail img {
  width: 120px !important;
  max-width: 120px !important;
  height: 160px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 2px;
  display: block;
}
@media (max-width: 600px) {
  .wc-block-cart-item__image,
  .woocommerce-cart-form td.product-thumbnail { width: 88px; }
  .wc-block-cart-item__image img,
  .woocommerce-cart-form td.product-thumbnail img {
    width: 88px !important;
    max-width: 88px !important;
    height: 117px !important;
  }
}

/* ============================================================
   FOOTER LOGO — force the PNG wordmark sitewide.
   Defensive: if any footer (incl. a stale/alternate render)
   still outputs a TEXT brand-name, replace it with the logo
   image via CSS so it can't show the wrong font. No-op on
   footers that already use the .footer-brand-logo <img>.
   Lives in style.css (enqueued with ?ver=), so it reloads on
   version bump and is never PHP-opcached.
   ============================================================ */
footer .footer-brand-name,
footer .fn-footer-brand-name,
footer .pod-footer-brand-name,
footer .aj-footer-brand-name {
  display: block !important;
  width: 240px;
  max-width: 100%;
  height: 18px;
  margin-bottom: 14px;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  background: url('https://media.adventure-journal.com/wp-content/uploads/2026/03/17161909/AJ_Logo25_Wht-scaled.png') left center / auto 18px no-repeat !important;
}
/* Keep the real <img> logo capped consistently everywhere */
footer .footer-brand-logo img {
  height: 18px !important;
  width: auto !important;
}

/* ============================================================
   v3.10.13 — Global content wrapper clip. The wrapper (opened in
   header.php after the nav, closed in footer.php before the footer)
   is a normal DIV, so overflow-x:clip here IS honored on iOS Safari
   — unlike root-level html/body clip, which iOS ignores (see v3.9.23
   note below). clip (not hidden) creates NO scroll container, so the
   sticky site nav, sticky .fn-nav, and the HB sticky bars all keep
   sticking to the viewport. This stops the side-to-side slide on
   every page, including the home page.
   ============================================================ */
.aj-page-wrap { overflow-x: clip; }

/* On phones, story-image breakouts extend ±160–200px beyond the column
   (desktop design). Inside the clipping wrapper that would crop their
   edges, so reset them to in-column width on small screens. */
@media (max-width: 768px) {
  .aj-article-body p > img:not(.aj-inline),
  .aj-article-body figure.wp-caption {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .aj-article-body .gallery.gallery-columns-2 {
    width: 100% !important;
    margin: 40px 0 28px 0 !important;
  }
  .aj-article-body p:has(> img:not(.aj-inline)) + p.aj-img-caption,
  .aj-article-body .gallery.gallery-columns-2 + p.aj-img-caption {
    margin-left: 0 !important;
    width: 100% !important;
  }
}

/* ============================================================
   v3.9.21 — Mobile: stop pages sliding side to side, and keep
   WooCommerce cart / account content within the viewport.
   overflow-x: clip (NOT hidden) so the sticky nav is unaffected.
   Scoped to mobile so desktop story-image breakouts are untouched.
   ============================================================ */
@media (max-width: 768px) {
  html, body { overflow-x: clip; max-width: 100% !important; }

  /* Generic safety: nothing in Woo content exceeds the viewport. */
  .woocommerce, .woocommerce-page,
  .wc-block-cart, .wc-block-checkout,
  .wc-block-components-sidebar-layout { max-width: 100% !important; }
  .woocommerce img, .woocommerce table,
  .wc-block-cart img, .wc-block-checkout img { max-width: 100% !important; height: auto; }
  .woocommerce table.shop_table { max-width: 100% !important; }

  /* Cart block (WC 10.x): let the flex children shrink and stack so the line
     totals aren't pushed off-screen. min-width:0 is the real fix — flex items
     default to min-width:auto and refuse to shrink below their content. */
  .wc-block-cart { flex-wrap: wrap !important; }
  .wc-block-cart__main,
  .wc-block-cart__sidebar {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .wc-block-cart__main > *,
  .wc-block-cart-items,
  .wc-block-cart-items__row { min-width: 0 !important; max-width: 100% !important; }

  /* Account / login form fits the viewport. */
  .woocommerce-account .woocommerce,
  .woocommerce form .form-row { max-width: 100% !important; }
  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row select,
  .woocommerce form .form-row textarea { max-width: 100% !important; box-sizing: border-box; }
}

/* ============================================================
   v3.9.23 — iOS-only cart/checkout/account horizontal slide.
   Symptom: clean in Chrome device emulation, slides on the real
   iPhone. Cause: the Stripe/Amazon express-pay buttons and the
   block-cart line totals render wider than the viewport, and a
   root-level overflow-x:clip on html/body doesn't reliably
   contain that on iOS Safari. Two-part fix:
   1) Clip at the content column (#primary). Per the live DOM,
      #primary is a SIBLING of nav.aj-site-nav (both direct
      children of body), so clipping it cannot break the sticky
      nav. overflow-x:hidden is used (not clip) for universal
      iOS support.
   2) Make the wide elements actually fit, so nothing is cut off:
      let cart descendants shrink (min-width:0) and cap the
      express-payment buttons / iframes to the viewport.
   ============================================================ */
@media (max-width: 768px) {

  /* (1) Safety net at the content column — sibling of the nav, so safe. */
  .woocommerce-cart #primary,
  .woocommerce-checkout #primary,
  .woocommerce-account #primary { overflow-x: hidden; }

  /* (2) Outer block wrappers never exceed the viewport. */
  .wp-block-woocommerce-cart,
  .wp-block-woocommerce-checkout { max-width: 100% !important; }

  /* Let every cart/checkout descendant shrink below its intrinsic
     content width instead of forcing the row wider than the screen.
     Flex/grid children default to min-width:auto and refuse to shrink. */
  .wp-block-woocommerce-cart *,
  .wp-block-woocommerce-checkout * { min-width: 0 !important; }

  /* Express-payment row: Stripe (Apple Pay / Link) buttons. */
  .wc-block-components-express-payment,
  .wc-block-components-express-payment__event-buttons,
  .wc-block-components-express-payment__event-buttons > * {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Any iframe-rendered button (Amazon Pay / Apple Pay) caps to the column.
     max-width beats an inline pixel width the payment SDK may set. */
  .wp-block-woocommerce-cart iframe,
  .wp-block-woocommerce-checkout iframe,
  .wp-block-woocommerce-cart [id*="amazon" i],
  .wp-block-woocommerce-cart [class*="amazon" i],
  .wp-block-woocommerce-checkout [id*="amazon" i],
  .wp-block-woocommerce-checkout [class*="amazon" i] {
    max-width: 100% !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   v3.10.29 — iOS /my-account/ horizontal-slide ROOT FIX.
   The ?ajwidth diagnostic showed nothing genuinely wider than the 430px viewport
   (html.scrollWidth = 430, "over by 0"); the only off-edge element was WooCommerce's
   screen-reader cart live region (.widget_shopping_cart_live_region) — a visually-
   hidden .screen-reader-text node rendered near the footer, OUTSIDE .aj-page-wrap
   (so no wrapper clip could ever contain it), sitting with a negative margin box
   (boxR-28, ~28px off the left edge) with ~72px of text spilling its 1px box. On
   iOS Safari that negative-offset accessibility text is enough to make the whole
   page slide. Pin it (and any children) to the origin as a fully-clipped 1px box
   with NO negative coordinates and overflow hidden, so it can never create scroll.
   Scoped to the live region only, so focusable skip-links are untouched.
   ───────────────────────────────────────────────────────────────────────────── */
.widget_shopping_cart_live_region,
.widget_shopping_cart_live_region * {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   v3.10.30 — (a) Bulletproof EVERY visually-hidden .screen-reader-text (the
   ?ajwidth diagnostic flagged two more sr-text spans holding ~72px of spilling
   content beyond the live region fixed in v3.10.29) so none can extend the
   scroll area — focus-safe via :not(:focus) so skip-links still reveal on
   keyboard focus. (b) Site-wide mobile input-zoom guard: any focused field
   below 16px makes iOS Safari zoom and the page pan side-to-side; force >=16px.
   ───────────────────────────────────────────────────────────────────────────── */
.screen-reader-text:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    left: 0 !important;
    top: 0 !important;
}

@media (max-width: 768px) {
    input[type="text"], input[type="email"], input[type="password"],
    input[type="search"], input[type="tel"], input[type="url"],
    input[type="number"], select, textarea {
        font-size: 16px !important;
    }
}


/* ============================================================
   GLOBAL title / drop-cap-kill — relocated from
   woocommerce-cart-checkout.css (v3.11.04) so these stay
   site-wide after that sheet was gated to WooCommerce pages.
   ============================================================ */
h1.wp-block-post-title {
    font-family: acumin-pro-extra-condensed, sans-serif !important;
    font-size: clamp(32px, 4vw, 48px) !important;
    font-weight: 700 !important;
    color: var(--dark) !important;
    letter-spacing: -0.02em !important;
    text-align: left !important;
    padding: 48px 0 8px !important;
    initial-letter: normal !important;
}
h1.wp-block-post-title::first-letter,
.entry-title::first-letter,
.page-title::first-letter {
    font-size: inherit !important;
    font-family: inherit !important;
    float: none !important;
    line-height: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
}