/* Generated Life of J homepage bundle: global styles + homepage styles. */
/*
Theme Name: Life of J
Theme URI: https://lifeofj.com/
Author: Life of J
Description: A custom editorial WordPress theme for Life of J, built around image-led discovery, clean long-form reading, category hubs and lightweight WordPress-native templates.
Version: 1.0.17
Requires at least: 6.6
Requires PHP: 8.0
Text Domain: life-of-j
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* =========================================================
   LIFE OF J — SHARED / WORDPRESS OVERRIDES
   Page-specific design files are conditionally enqueued.
   ========================================================= */

:root {
  --loj-charcoal: #0d1012;
  --loj-charcoal-2: #14181b;
  --loj-cream: #f3efe7;
  --loj-cream-2: #ebe5dc;
  --loj-white: #ffffff;
  --loj-ink: #121416;
  --loj-muted: #6f6962;
  --loj-line: #d7d0c5;
  --loj-line-dark: #293036;
  --loj-orange: #ef7a43;
  --loj-orange-deep: #b95a30;
}

html {
  scroll-behavior: smooth;
  max-width: 100%;
}
body {
  max-width: 100%;
  overflow-x: hidden;
  overflow-wrap: normal;
  word-break: normal;
}

/* Only long user-generated URLs/strings should be allowed to break anywhere.
   Do not inherit aggressive word-breaking into layout/card components. */
.entry-content a,
.reading-body a,
.comment-content a,
.entry-content code,
.reading-body code {
  overflow-wrap: anywhere;
  word-break: break-word;
}
img { max-width: 100%; height: auto; }

.screen-reader-text {
  border: 0;
  clip: rect(1px,1px,1px,1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background: #fff;
  clip: auto !important;
  clip-path: none;
  color: #111;
  display: block;
  font-size: 14px;
  height: auto;
  left: 10px;
  line-height: normal;
  padding: 12px 16px;
  top: 10px;
  width: auto;
  z-index: 100000;
}

.skip-link { font-weight: 800; }

/* WordPress menus inside the approved header shell. */
.nav {
  align-items: center;
}
.nav-list,
.footer-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-list {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-list li { margin: 0; }
.nav-list .current-menu-item > a,
.nav-list .current_page_item > a,
.nav-list .current-menu-ancestor > a {
  border-color: rgba(255,255,255,.38);
}
.nav .subscribe {
  white-space: nowrap;
}

/* Category/filter controls: requested alternate face, bold + caps. */
.category-browse .filters a,
.subtopics a,
.view-all,
.category-actions .view-all {
  font-family: "Arial Narrow", "Aptos Narrow", "Roboto Condensed", "Helvetica Neue Condensed", Arial, sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .09em !important;
}
.category-link { display: inline-block; }
.category-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}


/* Layout safety: prevent grid/flex children from forcing or collapsing mobile layouts. */
.wrap,
.header-inner,
.section-head,
.latest-grid,
.latest-card,
.latest-copy,
.category-grid,
.category-card,
.category-copy,
.worth-grid,
.worth-list,
.book-grid,
.book-copy,
.book-stage,
.join-grid,
.newsletter-form-wrap {
  min-width: 0;
}

/* Footer is consistently white across the site. */
.site-footer {
  background: #fff !important;
  color: #4f4b46 !important;
  border-top: 1px solid #e2ddd4 !important;
  padding: 34px 0 44px !important;
}
.site-footer .footer-inner {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 30px !important;
  align-items: start !important;
}
.footer-brand strong {
  display: block;
  color: #111;
  font-size: 18px;
  margin-bottom: 7px;
}
.footer-brand span {
  color: #77716a;
  font-size: 12px;
}
.footer-links,
.footer-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: flex-end;
}
.footer-links a,
.footer-menu a {
  font-size: 12px;
}

/* Newsletter / MailPoet integration shell. */
.newsletter-form-wrap {
  min-width: 0;
}
.newsletter-form-wrap .mailpoet_form,
.newsletter-form-wrap form {
  width: 100%;
}
.newsletter-form-wrap .mailpoet_form {
  margin: 0 !important;
}
.newsletter-form-wrap .mailpoet_paragraph {
  margin: 0;
}
.newsletter-form-wrap input[type="email"],
.newsletter-form-wrap input[type="text"] {
  width: 100%;
  min-height: 52px;
  border: 1px solid #c9c1b5;
  background: #fff;
  color: #111;
  padding: 14px 16px;
  border-radius: 0;
}
.newsletter-form-wrap input[type="submit"],
.newsletter-form-wrap button {
  min-height: 52px;
  border: 1px solid var(--loj-orange);
  background: var(--loj-orange);
  color: #111;
  padding: 0 18px;
  font-weight: 900;
  border-radius: 0;
  cursor: pointer;
}
.newsletter-admin-note {
  border: 1px dashed #b9b0a4;
  background: rgba(255,255,255,.5);
  padding: 14px;
  color: #6f6962;
  font-size: 12px;
  line-height: 1.5;
}

/* Generic WordPress content behaviour: images should not be arbitrarily cropped. */
.entry-content img,
.reading-body img,
.wp-block-image img,
.wp-block-gallery img {
  max-width: 100%;
  height: auto;
}
.entry-content figure,
.reading-body figure {
  max-width: 100%;
}
.entry-content .alignwide,
.reading-body .alignwide {
  width: min(1100px, calc(100vw - 48px));
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}
.entry-content .alignfull,
.reading-body .alignfull {
  width: 100vw;
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}
.wp-block-embed iframe {
  max-width: 100%;
}
.wp-block-table {
  overflow-x: auto;
}
.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
}
.wp-block-table th,
.wp-block-table td {
  border: 1px solid var(--loj-line);
  padding: 10px 12px;
}
pre,
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
pre {
  overflow-x: auto;
  background: #111519;
  color: #f5f1ea;
  padding: 18px;
}

/* Article first paragraph drop cap, matching the chosen Journal concept. */
.single-post .reading-body > p:first-of-type:first-letter {
  float: left;
  font-family: "Aptos Display","Segoe UI",Arial,sans-serif;
  font-size: 78px;
  line-height: .72;
  padding: 10px 10px 0 0;
  font-weight: 650;
  color: var(--loj-orange-deep);
}

/* Comments. */
.comments-area {
  width: min(760px, calc(100% - 48px));
  margin: 0 auto 68px;
}
.comments-title,
.comment-reply-title {
  font-size: 30px;
  letter-spacing: -.03em;
}
.comment-list {
  list-style: none;
  padding: 0;
}
.comment-list .comment {
  border-top: 1px solid var(--loj-line);
  padding: 20px 0;
}
.comment-meta {
  font-size: 12px;
  color: var(--loj-muted);
}
.comment-content {
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.7;
}
.comment-form input,
.comment-form textarea {
  width: 100%;
  border: 1px solid #c9c1b5;
  background: #fff;
  padding: 13px 14px;
}
.comment-form input[type="submit"] {
  width: auto;
  border-color: var(--loj-orange);
  background: var(--loj-orange);
  font-weight: 900;
  cursor: pointer;
}

/* Empty states / admin setup hints. */
.loj-empty-state {
  width: min(820px, calc(100% - 48px));
  margin: 30px auto 70px;
  padding: 28px;
  border: 1px solid var(--loj-line);
  background: #fff;
  text-align: center;
}
.loj-empty-state p {
  color: var(--loj-muted);
  line-height: 1.6;
}

/* Custom writing-cover image inside the 3D book. */
.book-face.has-cover-image {
  padding: 0 !important;
  overflow: hidden;
}
.book-face.has-cover-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Search / blog form consistency. */
.search-form input[type="search"] {
  min-width: 0;
}
.search-form button {
  cursor: pointer;
}

/* Focus visibility. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--loj-orange);
  outline-offset: 3px;
}

/* Responsive menu. */
@media (max-width: 900px) {
  .header-inner { position: relative; }
  .nav.open {
    display: flex !important;
    position: absolute;
    top: 58px;
    right: 0;
    width: min(340px, calc(100vw - 28px));
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 8px;
    background: rgba(13,16,18,.98);
    border: 1px solid #30363b;
    box-shadow: 0 18px 50px rgba(0,0,0,.28);
    z-index: 200;
  }
  .nav.open .nav-list {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .nav.open .nav-list a,
  .nav.open .subscribe {
    display: block;
    width: 100%;
  }
}
@media (max-width: 620px) {
  .site-footer .footer-inner {
    grid-template-columns: 1fr !important;
  }
  .footer-links,
  .footer-menu {
    justify-content: flex-start;
  }
  .entry-content .alignwide,
  .reading-body .alignwide {
    width: calc(100vw - 28px);
  }
}


/* Clickable image cards with a separately clickable category label. */
.latest-card,
.card {
  position: relative;
}
.card-hit-area {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.latest-copy,
.card-copy {
  pointer-events: none;
}
.latest-copy a,
.card-copy a {
  pointer-events: auto;
  position: relative;
  z-index: 3;
}
.card-category {
  text-decoration: none !important;
}

/* WordPress paginate_links() uses a span for the current page. */
.pagination .page-numbers {
  min-width: 42px;
  min-height: 42px;
  display: inline-grid;
  place-items: center;
}
.pagination .page-numbers.current {
  background: var(--loj-charcoal);
  color: #fff;
}

/* Contact plugins/blocks inherit the approved clean form treatment. */
.contact-card input[type="text"],
.contact-card input[type="email"],
.contact-card input[type="url"],
.contact-card input[type="tel"],
.contact-card input[type="number"],
.contact-card select,
.contact-card textarea {
  width: 100%;
  border: 1px solid #c9c1b5;
  background: #fff;
  padding: 15px 16px;
  border-radius: 0;
}
.contact-card textarea {
  min-height: 180px;
}
.contact-card input[type="submit"],
.contact-card button[type="submit"],
.contact-card .wp-block-button__link {
  border: 1px solid var(--loj-orange);
  background: var(--loj-orange);
  color: #111;
  padding: 14px 18px;
  font-weight: 900;
  border-radius: 0;
  cursor: pointer;
}



:root{
  --charcoal:#0d1012;
  --charcoal-2:#14181b;
  --cream:#f3efe7;
  --cream-2:#ebe5dc;
  --white:#ffffff;
  --ink:#121416;
  --muted:#6e6962;
  --muted-dark:#9ca3a8;
  --line-dark:#293036;
  --line-light:#d7d0c5;
  --orange:#ef7a43;
  --orange-deep:#b95a30;
  --warm-dark:#17110e;
  --max:1280px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:"Aptos","Segoe UI",Helvetica,Arial,sans-serif;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{width:min(var(--max),calc(100% - 48px));margin:auto}

/* HEADER */
.site-header{
  height:82px;
  position:absolute;inset:0 0 auto;
  z-index:30;
  display:flex;align-items:center;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.brand{
  display:flex;align-items:center;gap:12px;
  color:#fff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.16em
}
.brand-mark{
  width:40px;height:40px;border-radius:50%;
  background:white;display:grid;place-items:center
}
.brand-mark img{width:34px;height:34px;object-fit:contain}
.nav{
  display:flex;align-items:center;gap:6px;
  padding:6px;
  background:rgba(9,11,13,.55);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(12px)
}
.nav a{
  padding:10px 13px;
  color:#f3f0e9;
  font-size:12px;
  font-weight:700;
  border:1px solid transparent
}
.nav a:hover{border-color:rgba(255,255,255,.3)}
.nav .subscribe{
  background:var(--orange);
  color:#111;
  border-color:var(--orange);
  font-weight:800
}
.menu-button{display:none;background:none;border:0;color:#fff;font-size:24px}

/* HERO */
.hero{
  min-height:720px;
  position:relative;
  overflow:hidden;
  background:#0b0d0e
}
.hero-bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover
}
.hero:before{
  content:"";position:absolute;inset:0;
  /* Keep the featured image visible; the copy panel now owns readability. */
  background:
    linear-gradient(90deg,rgba(6,8,9,.16),rgba(6,8,9,.04) 58%,rgba(6,8,9,.02)),
    linear-gradient(0deg,rgba(6,8,9,.20),transparent 48%)
}
.hero-inner{
  min-height:720px;
  position:relative;z-index:2;
  display:flex;align-items:center;
  padding-top:82px
}
.hero-copy{
  width:min(760px,56vw);
  max-width:760px;
  color:#f7f4ee;
  padding:42px 44px 40px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:22px;
  background:rgba(14,16,17,.72);
  -webkit-backdrop-filter:blur(14px) saturate(.82);
  backdrop-filter:blur(14px) saturate(.82);
  box-shadow:0 24px 58px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.08)
}
.status{
  display:flex;align-items:center;gap:10px;
  font-size:11px;letter-spacing:.17em;
  text-transform:uppercase;font-weight:800
}
.status-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 16px rgba(239,122,67,.85)
}
.hero h1{
  position:relative;
  margin:20px 0 24px;
  padding-bottom:24px;
  max-width:700px;
  font-family:"Aptos Display","Segoe UI Variable Display","Segoe UI",Helvetica,Arial,sans-serif;
  font-size:clamp(54px,5.15vw,82px);
  font-weight:650;
  line-height:.93;
  letter-spacing:-.05em
}
.hero h1:after{
  content:"";position:absolute;left:0;bottom:0;
  width:72px;height:3px;border-radius:99px;background:var(--orange)
}
.hero p{
  max-width:610px;
  margin:0;
  color:#ddd9d2;
  font-size:18px;
  line-height:1.55
}
.hero-read{
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:30px;
  min-height:48px;
  padding:0 22px;
  border:1px solid var(--orange);
  border-radius:4px;
  background:var(--orange);
  color:#111;
  font-size:14px;
  font-weight:850;
  box-shadow:0 9px 24px rgba(0,0,0,.16);
  transition:transform .18s ease,filter .18s ease
}
.hero-read:hover{transform:translateY(-1px);filter:brightness(1.05)}

/* TICKER */
.ticker{
  overflow:hidden;white-space:nowrap;
  background:var(--charcoal);
  color:#747c83;
  border-block:1px solid var(--line-dark);
  padding:15px 0;
  font-size:10px;
  letter-spacing:.18em;
  font-weight:800
}
.ticker-track{
  display:inline-block;
  width:max-content;
  animation:ticker 28s linear infinite
}
.ticker strong{color:var(--orange)}
@keyframes ticker{to{transform:translateX(-50%)}}

/* SHARED */
.section{padding:72px 0}
.micro{
  color:var(--orange-deep);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:800
}
.section-head{
  display:flex;justify-content:space-between;align-items:end;
  gap:28px;margin-bottom:30px
}
.section-head h2{
  margin:6px 0 0;
  font-family:"Aptos Display","Segoe UI Variable Display","Segoe UI",Helvetica,Arial,sans-serif;
  font-size:48px;
  line-height:.95;
  font-weight:650;
  letter-spacing:-.04em
}
.section-head p{
  max-width:430px;
  margin:0;
  color:var(--muted);
  line-height:1.5
}

/* LATEST - OVERLAY CARDS */
.latest{
  background:var(--cream);
  color:var(--ink)
}
.latest-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px
}
.latest-card{
  min-width:0;
  min-height:420px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:#1a1d20;
  border:1px solid #2a3034
}
.latest-card img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center
}
.latest-card:after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(0deg,rgba(4,6,7,.94),rgba(4,6,7,.06) 74%),
    linear-gradient(90deg,rgba(4,6,7,.18),transparent 60%)
}
.latest-copy{
  min-width:0;
  position:absolute;z-index:2;
  left:24px;right:24px;bottom:22px;
  color:#f8f5ef
}
.latest-copy .cat{
  color:var(--orange);
  font-size:10px;
  letter-spacing:.15em;
  text-transform:uppercase;
  font-weight:800
}
.latest-copy h3{
  margin:8px 0 10px;
  font-family:"Aptos Display","Segoe UI Variable Display","Segoe UI",Helvetica,Arial,sans-serif;
  font-size:28px;
  font-weight:650;
  line-height:1.03;
  letter-spacing:-.03em
}
.latest-copy p{
  margin:0 0 14px;
  color:#d4d5d5;
  line-height:1.45
}
.latest-copy time{font-size:11px;color:#aeb4b8}

/* CATEGORIES */
.categories{
  background:var(--charcoal);
  color:#f7f4ee;
  border-top:1px solid var(--line-dark)
}
.categories .section-head p{color:#8f969d}
.categories .section-head .micro{color:var(--orange)}
.category-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr .8fr;
  grid-template-rows:280px 280px;
  gap:14px
}
.category-card{
  display:block;
  min-width:0;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:var(--charcoal-2);
  border:1px solid var(--line-dark)
}
.category-card:first-child{grid-row:1/3}
.category-card img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover
}
.category-card:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(3,5,6,.95),rgba(3,5,6,.08) 68%)
}
.category-copy{
  min-width:0;
  position:absolute;z-index:2;
  left:24px;right:24px;bottom:22px
}
.category-copy small{
  color:#c8cdd0;
  font-size:10px;
  letter-spacing:.15em;
  text-transform:uppercase
}
.category-copy h3{
  margin:7px 0 6px;
  font-family:"Aptos Display","Segoe UI Variable Display","Segoe UI",Helvetica,Arial,sans-serif;
  font-size:31px;
  font-weight:650;
  line-height:.98;
  letter-spacing:-.035em
}
.category-copy span{font-size:12px;color:#959da3}
.category-card:first-child .category-copy h3{font-size:48px}
.category-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:22px
}
.view-all{
  display:inline-block;
  border:1px solid #3b4349;
  padding:12px 16px;
  color:#f4f0e8;
  font-size:12px;
  font-weight:800
}
.view-all:hover{border-color:var(--orange);color:var(--orange)}

/* WORTH A READ */
.worth{
  background:var(--cream-2);
  color:var(--ink);
  border-top:1px solid var(--line-light)
}
.worth-grid{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:54px
}
.worth-title h2{
  margin:4px 0 0;
  font-family:"Aptos Display","Segoe UI Variable Display","Segoe UI",Helvetica,Arial,sans-serif;
  font-size:42px;
  line-height:.98;
  font-weight:650;
  letter-spacing:-.04em
}
.worth-title p{
  margin-top:14px;
  color:var(--muted);
  line-height:1.5;
  font-size:13px
}
.worth-list{border-top:1px solid var(--line-light)}
.worth-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:26px;
  align-items:center;
  padding:19px 0;
  border-bottom:1px solid var(--line-light)
}
.worth-row strong{
  font-family:"Aptos Display","Segoe UI Variable Display","Segoe UI",Helvetica,Arial,sans-serif;
  font-size:21px;
  font-weight:650;
  line-height:1.12
}
.worth-row time{
  color:var(--muted);
  font-size:11px;
  white-space:nowrap
}

/* ASHES FEATURE */
.book-section{
  display:block;
  background:var(--charcoal);
  color:#f7f4ee;
  border-top:1px solid var(--line-dark)
}
.book-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  min-height:600px
}
.book-copy .micro{color:var(--orange)}
.book-copy h2{
  margin:18px 0 28px;
  font-family:"Aptos Display","Segoe UI Variable Display","Segoe UI",Helvetica,Arial,sans-serif;
  font-size:clamp(60px,7vw,100px);
  font-weight:650;
  line-height:.81;
  letter-spacing:-.055em
}
.book-copy p{
  max-width:570px;
  color:#b8bec2;
  line-height:1.7
}
.book-link{
  display:inline-block;
  margin-top:18px;
  padding-bottom:5px;
  border-bottom:1px solid var(--orange);
  font-size:12px;
  font-weight:800
}
.book-stage{
  min-height:520px;
  display:grid;
  place-items:center;
  padding:48px 40px
}
.book{
  width:min(330px,82vw);
  aspect-ratio:2 / 3;
  position:relative;
  transform:none;
}
.book::before{
  display:none
}
.book-face{
  position:absolute;
  inset:0;
  background:linear-gradient(160deg,#2a211b,#0d0e0f 74%);
  border:1px solid #635345;
  box-shadow:0 26px 65px rgba(0,0,0,.38);
  padding:38px 34px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden
}
.book-title{
  font-family:Georgia,"Times New Roman",serif;
  font-size:44px;
  line-height:.91;
  font-weight:700;
  letter-spacing:-.045em;
  overflow-wrap:normal;
  word-break:normal
}
.book-title-line{
  display:block
}
.book-title-fellwatch{
  font-size:37px;
  white-space:nowrap;
  letter-spacing:-.055em
}
.book-title em{
  display:block;
  margin:.08em 0;
  color:#b99a75;
  font-size:21px;
  line-height:1;
  font-weight:400
}
.book-face small{
  color:#bcae9a;
  text-transform:uppercase;
  letter-spacing:.14em;
  line-height:1.35
}
.book-face.has-cover-image{
  padding:0;
  background:#0d1012
}
.book-face.has-cover-image img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  background:#0d1012
}

/* NEWSLETTER - LIGHT / SIDES SWAPPED */
.join{
  background:var(--cream);
  color:var(--ink);
  padding:72px 0;
  border-top:1px solid var(--line-light)
}
.join-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:80px;
  align-items:center
}
.join form{
  display:block
}
.join input,.join button{
  padding:18px;
  border:1px solid #c9c1b5;
  font-size:14px
}
.join input{background:#fff;color:#111}
.join button{
  background:var(--orange);
  color:#111;
  border-color:var(--orange);
  font-weight:800
}
.join small{
  display:block;
  color:#7a756e;
  margin-top:10px
}
.join-copy{
  text-align:right
}
.join-copy .micro{color:var(--orange-deep)}
.join h2{
  margin:13px 0 0;
  font-family:"Aptos Display","Segoe UI Variable Display","Segoe UI",Helvetica,Arial,sans-serif;
  font-size:64px;
  font-weight:650;
  line-height:.9;
  letter-spacing:-.05em
}

/* FOOTER */
footer{
  background:var(--white);
  color:#4f4b46;
  border-top:1px solid #e2ddd4;
  padding:34px 0 44px
}
.footer-inner{
  display:grid;
  grid-template-columns:1fr auto;
  gap:30px;
  align-items:start
}
.footer-brand strong{
  display:block;
  color:#111;
  font-size:18px;
  margin-bottom:7px
}
.footer-brand span{font-size:12px;color:#77716a}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  justify-content:flex-end;
  font-size:12px
}

/* RESPONSIVE */
@media(max-width:980px){
  .nav{display:none}
  .menu-button{display:block}
  .hero-copy{
    width:min(680px,calc(100% - 36px));
    padding:36px 36px 34px
  }
  .hero h1{font-size:clamp(50px,7vw,66px)}
  .latest-grid{grid-template-columns:1fr 1fr}
  .category-grid{
    grid-template-columns:1fr 1fr;
    grid-template-rows:320px 320px 320px
  }
  .category-card:first-child{
    grid-column:1/3;
    grid-row:auto
  }
  .worth-grid{grid-template-columns:1fr}
  .book-grid,.join-grid{grid-template-columns:1fr}
  .join-copy{text-align:left}
}
@media(max-width:620px){
  .wrap{width:calc(100% - 28px)}
  .site-header{height:70px}
  .hero,.hero-inner{min-height:650px}
  .hero-inner{
    align-items:flex-end;
    padding-bottom:48px
  }
  .hero h1{font-size:58px}
  .section{padding:52px 0}
  .section-head{display:block}
  .section-head h2{font-size:40px}
  .section-head p{margin-top:12px}
  .latest-grid{grid-template-columns:1fr}
  .latest-card{min-height:400px}
  .category-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:none;
    gap:14px
  }
  .category-card,
  .category-card:first-child{
    display:block;
    grid-column:auto;
    grid-row:auto;
    width:100%;
    min-width:0;
    min-height:340px;
    margin:0
  }
  .category-card:first-child .category-copy h3{font-size:40px}
  .worth-row{grid-template-columns:1fr 90px}
  .book-copy h2{font-size:60px}
  .book-stage{padding:34px 0}
  .book{width:min(290px,82vw)}
  .book-title{font-size:40px}
  .book-title-fellwatch{font-size:34px}
  .join-grid{gap:34px}
  .join form{grid-template-columns:1fr}
  .join button{margin-top:8px}
  .join small{grid-column:1}
  .join h2{font-size:52px}
  .footer-inner{grid-template-columns:1fr}
  .footer-links{justify-content:flex-start}
}


/* MOBILE STABILITY PASS */
@media(max-width:620px){
  .categories,
  .latest,
  .worth,
  .book-section,
  .join{
    overflow:hidden;
  }

  .ticker{
    max-width:100vw;
    overflow:hidden;
    contain:paint;
  }
  .ticker-track{
    white-space:nowrap;
  }

  .latest-copy h3,
  .latest-copy p,
  .category-copy h3,
  .category-copy span,
  .book-copy h2,
  .book-copy p{
    overflow-wrap:normal;
    word-break:normal;
    hyphens:none;
  }

  .book-grid{
    display:block;
    min-height:0;
    padding-top:48px;
  }
  .book-copy h2{
    font-size:clamp(44px,13vw,58px);
    line-height:.88;
  }
  .book-stage{
    min-height:0;
    padding:38px 0 52px;
  }

  .category-actions{
    justify-content:stretch;
  }
  .category-actions .view-all{
    width:100%;
    text-align:center;
  }
}

@media(max-width:390px){
  .hero h1{
    font-size:clamp(44px,14vw,54px);
  }
  .section-head h2{
    font-size:36px;
  }
  .latest-copy{
    left:18px;
    right:18px;
    bottom:18px;
  }
  .latest-copy h3{
    font-size:25px;
  }
  .category-copy{
    left:18px;
    right:18px;
    bottom:18px;
  }
  .category-card:first-child .category-copy h3,
  .category-copy h3{
    font-size:34px;
  }
  .book-copy h2{
    font-size:clamp(40px,12vw,50px);
  }
}


/* PERFORMANCE / ACCESSIBILITY: avoid continuous animation when reduced motion is requested. */
@media (prefers-reduced-motion: reduce) {
  .ticker-track {
    animation: none !important;
    transform: none !important;
  }
}


/* PERFORMANCE: let the browser defer layout/paint work for deep sections.
   Intrinsic sizing prevents scroll jumps while content is skipped. */
@supports (content-visibility: auto) {
  .worth,
  .book-section,
  .join {
    content-visibility: auto;
    contain-intrinsic-size: 1px 720px;
  }
}


/* WRITING FEATURE LINKS — only the title, CTA and cover are interactive. */
.book-title-link{
  color:inherit;
  text-decoration:none;
}
.book-title-link:hover,
.book-title-link:focus-visible{
  color:var(--orange);
}
.book-stage{
  color:inherit;
  text-decoration:none;
}
.book-stage:hover .book-face,
.book-stage:focus-visible .book-face{
  border-color:var(--orange);
}
.book-link{
  color:inherit;
  text-decoration:none;
}

/* MAILPOET HOMEPAGE FORM — clean integration
   MailPoet owns all success/error visibility and state.
   The theme styles only the form layout and controls. */
.join .newsletter-form-wrap{
  width:100%;
  max-width:700px;
  min-width:0;
}

.join .mailpoet_form,
.join form.mailpoet_form,
.join [id^="mailpoet_form_"] form{
  display:block !important;
  width:100% !important;
  max-width:700px !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color:var(--ink);
}

.join .mailpoet_form > *,
.join [id^="mailpoet_form_"] form > *{
  max-width:100%;
  min-width:0;
  grid-column:auto !important;
}

.join .mailpoet_form h1,
.join .mailpoet_form h2,
.join .mailpoet_form h3,
.join [id^="mailpoet_form_"] h1,
.join [id^="mailpoet_form_"] h2,
.join [id^="mailpoet_form_"] h3{
  display:block;
  width:auto !important;
  max-width:620px !important;
  margin:0 0 18px !important;
  color:var(--ink);
  font-family:"Aptos Display","Segoe UI Variable Display","Segoe UI",Helvetica,Arial,sans-serif;
  font-size:clamp(30px,3vw,42px) !important;
  line-height:1.02 !important;
  letter-spacing:-.035em !important;
  font-weight:700 !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
  hyphens:none !important;
}

.join .mailpoet_form p,
.join .mailpoet_form .mailpoet_paragraph,
.join [id^="mailpoet_form_"] p,
.join [id^="mailpoet_form_"] .mailpoet_paragraph{
  display:block;
  width:100%;
  max-width:620px;
  min-width:0;
  margin:0 0 16px;
  color:#5f5a53;
  line-height:1.55;
  overflow-wrap:normal;
  word-break:normal;
}

.join .mailpoet_form label,
.join [id^="mailpoet_form_"] label{
  display:block;
  margin:0 0 7px;
  color:#5f5a53;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.join .mailpoet_form input[type="email"],
.join .mailpoet_form input[type="text"],
.join .mailpoet_form input[type="url"],
.join .mailpoet_form input[type="tel"],
.join [id^="mailpoet_form_"] input[type="email"],
.join [id^="mailpoet_form_"] input[type="text"]{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  min-height:54px;
  margin:0 !important;
  padding:15px 16px !important;
  box-sizing:border-box !important;
  border:1px solid #c9c1b5 !important;
  border-radius:0 !important;
  background:#fff !important;
  color:#111 !important;
  font:inherit;
  box-shadow:none !important;
}

.join .mailpoet_form input:focus,
.join [id^="mailpoet_form_"] input:focus{
  border-color:var(--orange) !important;
  outline:0;
  box-shadow:0 0 0 3px rgba(239,122,67,.16) !important;
}

.join .mailpoet_form input::placeholder,
.join [id^="mailpoet_form_"] input::placeholder{
  color:#77716a;
  opacity:1;
}

.join .mailpoet_form .mailpoet_submit,
.join .mailpoet_form input[type="submit"],
.join .mailpoet_form button[type="submit"],
.join [id^="mailpoet_form_"] .mailpoet_submit,
.join [id^="mailpoet_form_"] input[type="submit"],
.join [id^="mailpoet_form_"] button[type="submit"]{
  display:block !important;
  width:100% !important;
  min-height:54px;
  margin:0 !important;
  padding:14px 20px !important;
  box-sizing:border-box !important;
  border:1px solid var(--orange) !important;
  border-radius:0 !important;
  background:var(--orange) !important;
  color:#111 !important;
  font-family:"Arial Narrow","Aptos Narrow","Roboto Condensed","Segoe UI",Arial,sans-serif !important;
  font-size:13px !important;
  font-weight:900 !important;
  text-transform:uppercase;
  letter-spacing:.08em;
  cursor:pointer;
  box-shadow:none !important;
}

.join .mailpoet_form .mailpoet_submit:hover,
.join .mailpoet_form input[type="submit"]:hover,
.join .mailpoet_form button[type="submit"]:hover,
.join [id^="mailpoet_form_"] .mailpoet_submit:hover,
.join [id^="mailpoet_form_"] input[type="submit"]:hover,
.join [id^="mailpoet_form_"] button[type="submit"]:hover{
  background:#f28a58 !important;
}

.join .mailpoet_form small,
.join [id^="mailpoet_form_"] small{
  display:block;
  margin-top:10px;
  color:#7a756e;
  font-size:12px;
  line-height:1.45;
}

/* IMPORTANT:
   No MailPoet success/error/message selectors are styled here.
   MailPoet must retain full ownership of when those elements appear. */

@media(max-width:900px){
  .join-grid{
    grid-template-columns:1fr;
    gap:46px;
  }

  .join-copy{
    text-align:left;
  }

  .join-copy h2{
    font-size:clamp(46px,11vw,64px);
  }

  .join .newsletter-form-wrap,
  .join .mailpoet_form,
  .join [id^="mailpoet_form_"] form{
    max-width:none !important;
  }
}

@media(max-width:620px){
  .join{
    padding:54px 0;
  }

  .join .mailpoet_form h1,
  .join .mailpoet_form h2,
  .join .mailpoet_form h3,
  .join [id^="mailpoet_form_"] h1,
  .join [id^="mailpoet_form_"] h2,
  .join [id^="mailpoet_form_"] h3{
    max-width:none !important;
    font-size:30px !important;
  }

  .join .mailpoet_form input[type="email"],
  .join .mailpoet_form input[type="text"],
  .join .mailpoet_form .mailpoet_submit,
  .join .mailpoet_form input[type="submit"],
  .join .mailpoet_form button[type="submit"],
  .join [id^="mailpoet_form_"] input,
  .join [id^="mailpoet_form_"] button{
    min-height:50px;
  }
}

/* v1.0.16 — phone-first presentation hooks. The homepage uses this bundled
   stylesheet instead of style.css, so mirror the shared visibility rules. */
.loj-mobile-home,
.mobile-only,
.brand-mobile-label,
.mobile-bottom-nav,
.mobile-article-hero,
.mobile-category-count {
  display: none;
}
.mobile-header-actions {
  display: none;
  align-items: center;
  gap: 8px;
}
.mobile-search-button { display: none; }
.mobile-header-actions svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
@media (max-width: 900px) {
  .mobile-header-actions { display: flex; }
  .mobile-header-actions .menu-button { display: grid; place-items: center; }
}