/*
Theme Name:   Living Healthy Choices Child
Theme URI:    https://livinghealthychoices.org
Description:  Fold-out map / gatefold child theme for Living Healthy Choices. Crease divided bands, legend symbol key, atlas margin coordinates. GeneratePress child.
Author:       Vaughn Estrada
Template:     generatepress
Version:      1.0.0
*/

/* ============================================================
   LIVING HEALTHY CHOICES - design system
   Prototype: fold-out map / gatefold route book.
   Reference anchor: mid-century road atlas / TripTik strip map.
   Structure borrowed: strip progression, fold creases, legend +
   symbol key, node ticks, edge index coordinates.
   Deliberately NOT borrowed: any travel or cartography UI, any
   clinical or medical signal.
   Shape lock: radius 0 everywhere. Printed stock is not rounded.
   Motion: near zero. Colour and 1px shifts on hover only.
   ============================================================ */

:root {
  --color-primary: #3A4C5A;        /* slate */
  --color-primary-dark: #26333E;
  --color-primary-soft: #D6DDE2;
  --color-bg: #ECE8E0;             /* bone */
  --color-bg-deep: #DED8CC;
  --color-accent: #C4922F;         /* mustard */
  --color-accent-soft: #E4C989;
  --color-accent-deep: #98700F;
  --color-charcoal: #2B3238;
  --color-ink: #1E252B;
  --color-muted: #6B7078;
  --color-line: #C6BFB1;
  --color-white: #FFFFFF;

  --font-serif: 'Radley', 'Iowan Old Style', Georgia, serif;
  --font-sans: 'Anek Latin', 'Avenir Next', 'Segoe UI', sans-serif;

  --max-w: 1280px;
  --max-w-wide: 1460px;
  --max-w-narrow: 720px;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;

  /* The fold. A three stop gradient reads as creased stock. */
  --crease: linear-gradient(90deg,
      rgba(58,76,90,0)   0%,
      rgba(58,76,90,.20) 6%,
      rgba(58,76,90,.20) 94%,
      rgba(58,76,90,0)  100%);
}

* { box-sizing: border-box; }

body, .entry-content, .widget {
  font-family: var(--font-sans);
  color: var(--color-charcoal);
  background: var(--color-bg);
  font-size: 17px;
  line-height: 1.68;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--color-ink);
  letter-spacing: -0.005em;
  line-height: 1.2;
  margin: 0;
}
h1 { font-size: clamp(2.1rem, 4.4vw, 3.35rem); }
h2 { font-size: clamp(1.55rem, 2.7vw, 2.15rem); margin: 2.2em 0 .55em; }
h3 { font-size: 1.28rem; margin: 1.8em 0 .45em; }

a { color: var(--color-primary-dark); text-decoration: none; }
a:hover { color: var(--color-accent-deep); }
p { margin: 0 0 1.15em; }
img { max-width: 100%; height: auto; display: block; border-radius: 0; }
ul { margin: 0; padding: 0; }

blockquote {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  line-height: 1.42;
  color: var(--color-ink);
  border-left: 4px solid var(--color-accent);
  background: transparent;
  margin: 2em 0;
  padding: .2rem 0 .2rem 1.4rem;
}
hr { border: 0; height: 1px; background: var(--color-line); margin: 3em 0; }
figure { margin: 2em 0; }
figcaption { font-size: .9rem; color: var(--color-muted); margin-top: .5rem; }

/* Atlas margin coordinate. Replaces the eyebrow label entirely. */
.lhc-coord {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--color-accent-deep);
  border: 1px solid var(--color-accent);
  padding: .12rem .42rem;
  margin-bottom: 1rem;
}
.lhc-coord.light { color: var(--color-accent-soft); border-color: rgba(228,201,137,.55); }
.lhc-coord.small { margin: 0; font-size: .62rem; padding: .06rem .3rem; }

/* The fold crease. Pure CSS, no image, no script. */
.lhc-crease {
  height: 22px;
  background:
    linear-gradient(180deg, rgba(30,37,43,.13) 0%, rgba(255,255,255,.65) 46%, rgba(255,255,255,.65) 54%, rgba(30,37,43,.13) 100%),
    var(--color-bg);
  border-top: 1px solid rgba(30,37,43,.16);
  border-bottom: 1px solid rgba(30,37,43,.16);
}
/* the crease is printed stock, so it keeps its bone ground even when it
   sits against a slate band */

/* ---------- MASTHEAD ---------- */
.tb-masthead {
  background: var(--color-bg);
  border-bottom: 2px solid var(--color-ink);
  padding: 1.5rem 1.5rem 1.15rem;
}
.tb-masthead-inner {
  max-width: var(--max-w-wide); margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 1.5rem;
}
.tb-masthead-meta {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-muted); font-weight: 500;
}
.tb-masthead-meta.right { text-align: right; }
.tb-masthead-mid { text-align: center; }
.tb-masthead-title {
  font-family: var(--font-serif); font-size: clamp(1.9rem, 4vw, 3rem);
  color: var(--color-ink); display: block; line-height: 1;
}
.tb-masthead-title:hover { color: var(--color-accent-deep); }
.tb-masthead-tagline {
  font-size: .82rem; letter-spacing: .1em; color: var(--color-primary);
  margin-top: .5rem; font-style: italic; font-family: var(--font-serif);
}

/* ---------- NAV: one line, tick separated like a route key ---------- */
.tb-nav { background: var(--color-primary); }
.tb-nav-inner { max-width: var(--max-w-wide); margin: 0 auto; padding: 0 1.5rem; }
.tb-nav-menu {
  list-style: none; display: flex; flex-wrap: nowrap;
  justify-content: center; gap: 0; margin: 0; padding: 0;
}
.tb-nav-menu li { position: relative; }
.tb-nav-menu li + li::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 11px; background: rgba(236,232,224,.35);
}
.tb-nav-menu a {
  display: block; padding: .78rem .78rem; white-space: nowrap;
  font-size: .73rem; font-weight: 500; letter-spacing: .055em; text-transform: uppercase;
  color: rgba(236,232,224,.9);
}
.tb-nav-menu a:hover { color: var(--color-accent-soft); background: var(--color-primary-dark); }

/* =====================================================================
   1. ROUTE OPENING - asymmetric spread, image bleeds off the left edge
   ===================================================================== */
.lhc-open { padding: 3.2rem 0 0; background: var(--color-bg); }
.lhc-open-inner {
  max-width: var(--max-w-wide); margin: 0 auto; padding: 0 1.5rem;
  display: grid; grid-template-columns: 1.42fr 1fr; gap: 2.8rem; align-items: center;
}
.lhc-open-plate { display: block; border: 1px solid var(--color-line); background: var(--color-bg-deep); }
.lhc-open-plate img { width: 100%; aspect-ratio: 11/7; object-fit: cover; }
.lhc-open-body { padding-right: 1rem; }
.lhc-open-title { margin: 0 0 .85rem; }
.lhc-open-title a { color: var(--color-ink); }
.lhc-open-title a:hover { color: var(--color-accent-deep); }
.lhc-open-dek { font-size: 1.04rem; color: var(--color-primary); max-width: 46ch; }
.lhc-open-read {
  display: inline-block; margin-top: .4rem;
  font-size: .8rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--color-ink); border-bottom: 2px solid var(--color-accent); padding-bottom: .2rem;
}
.lhc-open-read:hover { color: var(--color-accent-deep); border-bottom-color: var(--color-accent-deep); }

/* three strip cells running under the spread, like route legs */
.lhc-open-strip {
  max-width: var(--max-w-wide); margin: 2.6rem auto 0; padding: 0 1.5rem 3rem;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--color-line);
}
.lhc-strip-cell {
  display: block; padding: 1.4rem 1.6rem 0;
  border-right: 1px solid var(--color-line);
}
.lhc-strip-cell:first-child { padding-left: 0; }
.lhc-strip-cell:last-child { border-right: 0; padding-right: 0; }
.lhc-strip-fig { display: block; border: 1px solid var(--color-line); background: var(--color-bg-deep); }
.lhc-strip-fig img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.lhc-strip-cat {
  display: block; margin: .8rem 0 .3rem;
  font-size: .68rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
  color: var(--color-accent-deep);
}
.lhc-strip-title {
  display: block; font-family: var(--font-serif); font-size: 1.12rem;
  line-height: 1.25; color: var(--color-ink);
}
.lhc-strip-cell:hover .lhc-strip-title { color: var(--color-accent-deep); }

/* =====================================================================
   2. WHO IS DRIVING - dark slate band, portrait plate left
   ===================================================================== */
.lhc-driver { background: var(--color-primary); color: var(--color-bg); padding: 4.2rem 1.5rem; }
.lhc-driver-inner {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: .72fr 1.28fr; gap: 3rem; align-items: center;
}
.lhc-driver-plate { border: 1px solid rgba(236,232,224,.28); }
.lhc-driver-plate img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.lhc-driver-text h2 { color: var(--color-bg); margin: 0 0 1.1rem; max-width: 24ch; }
.lhc-driver-text p { color: rgba(236,232,224,.82); max-width: 60ch; }
.lhc-sign {
  font-family: var(--font-serif); font-style: italic; font-size: 1.35rem;
  color: var(--color-accent-soft); margin-top: 1.4rem;
}

/* =====================================================================
   3. THE LEGEND - 8 fold panels, symbol key, irregular column spans
   ===================================================================== */
.lhc-legend { max-width: var(--max-w-wide); margin: 0 auto; padding: 3.6rem 1.5rem 3.4rem; }
.lhc-legend-head, .lhc-stretch-head, .lhc-index-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; border-bottom: 2px solid var(--color-ink); padding-bottom: .8rem; margin-bottom: 2rem;
}
.lhc-legend-head h2, .lhc-stretch-head h2, .lhc-index-head h2 { margin: 0; }
.lhc-all {
  font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-primary); white-space: nowrap; padding-bottom: .2rem;
}
.lhc-all:hover { color: var(--color-accent-deep); }
.lhc-all.light { color: var(--color-accent-soft); }

.lhc-panels {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: 0;
  border-top: 1px solid var(--color-line); border-left: 1px solid var(--color-line);
}
/* irregular spans: 4/4/4 then 3/3/3/3 then 6/6, so rows always close flush */
.lhc-panel { grid-column: span 3; }
.lhc-panel:nth-child(1), .lhc-panel:nth-child(2) { grid-column: span 6; }
.lhc-panel:nth-child(7), .lhc-panel:nth-child(8) { grid-column: span 6; }

.lhc-panel {
  position: relative; display: block; padding: 1.15rem 1.25rem 1.4rem;
  border-right: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line);
  background: var(--color-bg);
  transition: background .18s ease;
}
.lhc-panel:hover { background: var(--color-bg-deep); }
.lhc-panel-fig { display: block; margin-bottom: .9rem; background: var(--color-bg-deep); }
.lhc-panel-fig img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.lhc-panel:nth-child(1) .lhc-panel-fig img,
.lhc-panel:nth-child(2) .lhc-panel-fig img,
.lhc-panel:nth-child(7) .lhc-panel-fig img,
.lhc-panel:nth-child(8) .lhc-panel-fig img { aspect-ratio: 21/9; }
.lhc-panel h3 { margin: .1rem 0 .3rem; font-size: 1.16rem; }
.lhc-panel-count {
  display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-muted); font-weight: 500;
}
.lhc-panel .lhc-coord.small { position: absolute; top: 1.15rem; right: 1.25rem; }

/* Legend symbol key. Eight distinct CSS glyphs, one per panel, drawn from
   the vocabulary a route book uses for its classes of road. */
.lhc-glyph {
  display: block; width: 30px; height: 30px; margin-bottom: .5rem;
  position: relative; background: var(--color-bg-deep);
  border: 1px solid var(--color-line);
}
.lhc-glyph::before, .lhc-glyph::after { content: ""; position: absolute; }
.g1::before { inset: 6px; border: 3px solid var(--color-accent-deep); }                                  /* open square */
.g2::before { inset: 6px; background: var(--color-accent-deep); }                                        /* filled square */
.g3::before { left: 5px; right: 5px; top: 13px; height: 4px; background: var(--color-accent-deep); }
.g3::after  { left: 13px; top: 5px; bottom: 5px; width: 4px; background: var(--color-accent-deep); }          /* crossroads */
.g4::before { inset: 6px; border: 3px solid var(--color-accent-deep); border-radius: 50%; }              /* node ring */
.g5::before { left: 5px; right: 5px; top: 9px; height: 3px; background: var(--color-accent-deep); }
.g5::after  { left: 5px; right: 5px; top: 18px; height: 3px; background: var(--color-accent-deep); }         /* double rule */
.g6::before { left: 5px; right: 5px; top: 13px; height: 4px; background: var(--color-accent-deep); }      /* single rule */
.g7::before { inset: 6px; background: var(--color-accent-deep);
              clip-path: polygon(50% 0, 100% 100%, 0 100%); }                                            /* marker */
.g8::before { left: 5px; right: 5px; top: 13px; height: 4px; background: var(--color-accent-deep);
              transform: rotate(34deg); }
.g8::after  { left: 5px; right: 5px; top: 13px; height: 4px; background: var(--color-accent-deep);
              transform: rotate(-34deg); }                                                              /* closed route */

/* =====================================================================
   4. ONE LINE OFF THE ROUTE - mustard rule band, no images by design
   ===================================================================== */
.lhc-rule-band {
  background: var(--color-accent-soft);
  border-top: 3px solid var(--color-accent-deep);
  border-bottom: 3px solid var(--color-accent-deep);
  padding: 3.2rem 1.5rem;
}
.lhc-rule-inner { max-width: 900px; margin: 0 auto; }
.lhc-rule-inner blockquote {
  margin: 0; border-left: 0; padding: 0;
  font-size: clamp(1.4rem, 2.5vw, 2rem); line-height: 1.34; color: var(--color-ink);
}
.lhc-rule-src {
  margin-top: 1.1rem; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-accent-deep); font-weight: 600;
}
.lhc-rule-src a { color: var(--color-ink); border-bottom: 1px solid var(--color-accent-deep); }

/* =====================================================================
   5. RECENT STRETCH - tick rule beside a mosaic
   ===================================================================== */
.lhc-stretch { max-width: var(--max-w-wide); margin: 0 auto; padding: 3.6rem 1.5rem 3.2rem; }
.lhc-stretch-body { display: grid; grid-template-columns: 92px 1fr; gap: 1.6rem; }

.lhc-tickrule {
  position: relative; border-right: 2px solid var(--color-ink);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: .55rem 0 1.5rem;
}
.lhc-tick {
  display: block; position: relative; padding: 0 .95rem 0 0; text-align: right;
  font-size: .67rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-muted); font-weight: 600; line-height: 1;
}
.lhc-tick i { position: absolute; right: -2px; top: 50%; margin-top: -1px; width: 11px; height: 2px; background: var(--color-ink); }
.lhc-tick::after {
  content: ""; position: absolute; right: -2px; top: 50%; margin-top: -3px;
  width: 6px; height: 6px; background: var(--color-accent-deep);
}

.lhc-mosaic {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem; align-content: start; align-items: start;
  grid-auto-rows: min-content;
}
.lhc-frag { display: block; }
.lhc-frag-fig { display: block; border: 1px solid var(--color-line); background: var(--color-bg-deep); }
.lhc-frag-fig img { width: 100%; object-fit: cover; }
/* Four size classes on a 12 column field. The cycle is
   6 + 3 + 3, 6 + 3 + 3, 6 + 3 + 3 ... so every row sums to exactly 12
   and the field never trails off with a hole at the end, whatever the
   post count. align-items:start keeps a short cell from stretching. */
.f-lg   { grid-column: span 6; } .f-lg   .lhc-frag-fig img { aspect-ratio: 3/2; }
.f-md   { grid-column: span 3; } .f-md   .lhc-frag-fig img { aspect-ratio: 4/3; }
.f-tall { grid-column: span 3; } .f-tall .lhc-frag-fig img { aspect-ratio: 4/3; }
.f-wide { grid-column: span 6; } .f-wide .lhc-frag-fig img { aspect-ratio: 3/2; }
.f-md4  { grid-column: span 3; } .f-md4  .lhc-frag-fig img { aspect-ratio: 4/3; }
.lhc-frag-cat {
  display: block; margin: .75rem 0 .25rem;
  font-size: .66rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
  color: var(--color-accent-deep);
}
.lhc-frag h3 { margin: 0 0 .3rem; font-size: 1.14rem; line-height: 1.24; }
.f-lg h3, .f-wide h3 { font-size: 1.4rem; }
.lhc-frag:hover h3 { color: var(--color-accent-deep); }
.lhc-frag p { font-size: .93rem; color: var(--color-primary); margin: 0 0 .4rem; max-width: 48ch; }
.lhc-frag-date { font-size: .72rem; letter-spacing: .08em; color: var(--color-muted); }

/* =====================================================================
   6. FROM EVERY PANEL - dark slate index band
   ===================================================================== */
.lhc-index { background: var(--color-primary-dark); color: var(--color-bg); padding: 3.6rem 1.5rem; }
.lhc-index-inner { max-width: var(--max-w-wide); margin: 0 auto; }
.lhc-index-head { border-bottom-color: rgba(236,232,224,.4); }
.lhc-index-head h2 { color: var(--color-bg); }
.lhc-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem 2rem; }
.lhc-col h3 {
  margin: 0 0 .7rem; padding-bottom: .4rem; font-size: 1.05rem;
  border-bottom: 1px solid rgba(236,232,224,.28);
}
.lhc-col h3 a { color: var(--color-accent-soft); }
.lhc-col ul { list-style: none; }
.lhc-col li { display: flex; gap: .7rem; margin-bottom: .85rem; align-items: flex-start; }
.lhc-col-fig { flex: 0 0 46px; }
.lhc-col-fig img { width: 46px; height: 46px; object-fit: cover; }
.lhc-col li a { color: var(--color-bg); font-size: .92rem; line-height: 1.35; display: block; }
.lhc-col li a:hover { color: var(--color-accent-soft); }
.lhc-col li span { display: block; font-size: .7rem; color: rgba(236,232,224,.55); margin-top: .18rem; }

/* =====================================================================
   7. THE NOTE
   ===================================================================== */
.lhc-note { background: var(--color-bg); padding: 3.6rem 1.5rem 4rem; }
.lhc-note-inner {
  max-width: 660px; margin: 0 auto; text-align: center;
  border: 2px solid var(--color-ink); padding: 2.6rem 2rem;
  background: var(--color-bg-deep);
}
.lhc-note-inner h2 { margin: 0 0 .7rem; }
.lhc-note-inner > p { color: var(--color-primary); margin: 0 auto 1.4rem; max-width: 46ch; }
.lhc-note-form { display: flex; gap: 0; justify-content: center; }
.lhc-note-form input {
  flex: 1 1 auto; max-width: 320px; padding: .78rem .9rem;
  border: 2px solid var(--color-ink); border-right: 0; background: var(--color-white);
  font-family: var(--font-sans); font-size: .95rem; color: var(--color-ink); border-radius: 0;
}
.lhc-note-form input::placeholder { color: #71767D; }
.lhc-note-form input:focus { outline: 2px solid var(--color-accent-deep); outline-offset: 1px; }
.lhc-note-form button {
  padding: .78rem 1.5rem; border: 2px solid var(--color-ink);
  background: var(--color-ink); color: var(--color-bg);
  font-family: var(--font-sans); font-size: .8rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; cursor: pointer; border-radius: 0;
  white-space: nowrap;
}
.lhc-note-form button:hover { background: var(--color-accent-deep); border-color: var(--color-accent-deep); }
.lhc-note-fine { margin-top: 1rem; font-size: .78rem; color: var(--color-muted); }
.lhc-note-fine a { color: var(--color-primary); border-bottom: 1px solid var(--color-line); }

/* ---------- FOOTER ---------- */
.site-footer { background: var(--color-ink); color: var(--color-bg); padding: 3.4rem 1.5rem 2rem; }
.lhc-foot {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2.6rem;
}
.lhc-foot-name { font-family: var(--font-serif); font-size: 1.6rem; color: var(--color-bg); margin-bottom: .6rem; }
.lhc-foot p { font-size: .9rem; line-height: 1.6; color: rgba(236,232,224,.7); margin: 0 0 1rem; max-width: 46ch; }
.lhc-foot-c { font-size: .82rem !important; color: rgba(236,232,224,.5) !important; }
.lhc-foot h5 {
  font-family: var(--font-sans); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-accent-soft); margin: 0 0 .9rem; font-weight: 600;
}
.lhc-foot ul { list-style: none; font-size: .93rem; line-height: 2; }
.lhc-foot ul a, .site-footer ul li a { color: var(--color-bg) !important; }
.lhc-foot ul a:hover, .site-footer ul li a:hover { color: var(--color-accent-soft) !important; }

/* =====================================================================
   ARTICLE / ARCHIVE / TRUST PAGE SHARED PIECES
   ===================================================================== */
.tb-post-header { max-width: var(--max-w-narrow); margin: 0 auto; padding: 2.8rem 1.5rem 1.4rem; }
.tb-breadcrumb { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 1rem; }
.tb-breadcrumb a { color: var(--color-muted); }
.tb-breadcrumb a:hover { color: var(--color-accent-deep); }
.tb-post-cat {
  display: inline-block; font-size: .7rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--color-accent-deep);
  border: 1px solid var(--color-accent); padding: .14rem .48rem; margin-bottom: .9rem;
}
.tb-post-title { margin: 0 0 .9rem; }
.tb-post-meta { font-size: .82rem; color: var(--color-muted); display: flex; flex-wrap: wrap; gap: .5rem; padding-bottom: 1.2rem; border-bottom: 2px solid var(--color-ink); }
.tb-post-meta a { color: var(--color-primary); }
.tb-post-cover { max-width: var(--max-w); margin: 1.8rem auto; padding: 0 1.5rem; }
.tb-post-cover img { width: 100%; border: 1px solid var(--color-line); }
.entry-content { max-width: var(--max-w-narrow); margin: 0 auto; padding: 0 1.5rem; font-size: 1.06rem; }
.entry-content h2 { font-size: 1.62rem; }
.entry-content a { color: var(--color-primary-dark); border-bottom: 1px solid var(--color-accent); }
.entry-content a:hover { color: var(--color-accent-deep); }
.ftc-disclosure {
  max-width: var(--max-w-narrow); margin: 0 auto 1.8rem;
  border-left: 4px solid var(--color-accent); background: var(--color-bg-deep);
  padding: .9rem 1.1rem; font-size: .88rem; color: var(--color-primary);
}
.ftc-disclosure p { margin: 0; }

.tb-author-bio {
  max-width: var(--max-w-narrow); margin: 3rem auto 0; padding: 1.6rem;
  border: 1px solid var(--color-line); border-left: 4px solid var(--color-accent);
  background: var(--color-bg-deep); display: flex; gap: 1.2rem; align-items: flex-start;
}
.tb-author-avatar {
  flex: 0 0 54px; height: 54px; background: var(--color-primary); color: var(--color-bg);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 1.2rem;
}
.tb-author-bio h4 { margin: .1rem 0 .4rem; font-size: 1.16rem; }
.tb-author-bio p { font-size: .95rem; margin: 0 0 .6rem; }
.tb-author-bio a { font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent-deep); }

.tb-related { max-width: var(--max-w); margin: 3.4rem auto 0; padding: 0 1.5rem; }
.tb-related h3 { border-bottom: 2px solid var(--color-ink); padding-bottom: .6rem; margin-bottom: 1.4rem; }
.tb-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.tb-related-cover { border: 1px solid var(--color-line); background: var(--color-bg-deep); }
.tb-related-cover img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.tb-related-title { font-family: var(--font-serif); font-size: 1.1rem; margin: .7rem 0 0; color: var(--color-ink); }
.tb-related-card:hover .tb-related-title { color: var(--color-accent-deep); }

.tb-archive-hero { max-width: var(--max-w); margin: 0 auto; padding: 3rem 1.5rem 1.6rem; border-bottom: 2px solid var(--color-ink); }
.tb-archive-hero h1 { margin: .3rem 0 .6rem; }
.tb-archive-hero p { color: var(--color-primary); max-width: 62ch; }
.tb-archive-feature { max-width: var(--max-w); margin: 2.4rem auto; padding: 0 1.5rem; }
.tb-spread { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; align-items: center; }
.tb-spread-image { border: 1px solid var(--color-line); background: var(--color-bg-deep); }
.tb-spread-image img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.tb-spread-text h3 { margin: .4rem 0 .6rem; font-size: 1.7rem; }
.tb-spread-excerpt { color: var(--color-primary); }
.tb-spread-read { font-size: .78rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--color-ink); border-bottom: 2px solid var(--color-accent); padding-bottom: .18rem; }
.tb-archive-grid { max-width: var(--max-w); margin: 0 auto 3rem; padding: 0 1.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
.tb-archive-cover { border: 1px solid var(--color-line); background: var(--color-bg-deep); }
.tb-archive-cover img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.tb-archive-meta { margin: .7rem 0 .25rem; font-size: .66rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--color-accent-deep); }
.tb-archive-title { font-family: var(--font-serif); font-size: 1.2rem; margin: 0 0 .35rem; color: var(--color-ink); }
.tb-archive-card:hover .tb-archive-title { color: var(--color-accent-deep); }
.tb-archive-excerpt { font-size: .92rem; color: var(--color-primary); }
.navigation.pagination { font-size: .85rem; }
.navigation.pagination a, .navigation.pagination .current { padding: .4rem .7rem; border: 1px solid var(--color-line); margin: 0 .15rem; display: inline-block; }
.navigation.pagination .current { background: var(--color-ink); color: var(--color-bg); border-color: var(--color-ink); }

/* newsletter band reused on single.php */
.tb-newsletter { background: var(--color-bg-deep); padding: 3.4rem 1.5rem; border-top: 1px solid var(--color-line); }
.tb-newsletter-inner { max-width: 660px; margin: 0 auto; text-align: center; }
.tb-newsletter-inner h3 { margin: 0 0 .6rem; font-size: 1.7rem; }
.tb-newsletter-inner p { color: var(--color-primary); max-width: 48ch; margin: 0 auto 1.3rem; }
.tb-newsletter-form { display: flex; justify-content: center; }
.tb-newsletter-form input {
  flex: 1 1 auto; max-width: 320px; padding: .78rem .9rem; border: 2px solid var(--color-ink);
  border-right: 0; background: var(--color-white); font-family: var(--font-sans); font-size: .95rem; border-radius: 0; color: var(--color-ink);
}
.tb-newsletter-form input::placeholder { color: #71767D; }
.tb-newsletter-form input:focus { outline: 2px solid var(--color-accent-deep); outline-offset: 1px; }
.tb-newsletter-form button {
  padding: .78rem 1.5rem; border: 2px solid var(--color-ink); background: var(--color-ink);
  color: var(--color-bg); font-family: var(--font-sans); font-size: .8rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; cursor: pointer; border-radius: 0; white-space: nowrap;
}
.tb-newsletter-form button:hover { background: var(--color-accent-deep); border-color: var(--color-accent-deep); }
.tb-newsletter-note { margin-top: .9rem; font-size: .78rem; color: var(--color-muted); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }

/* =====================================================================
   TRUST PAGES - "the margin sheet"
   Left aligned printed head with a coordinate block and a crease under it,
   hanging glyph markers in the left margin, flat slate ruled identity
   panel, two column ruled index of the other trust pages.
   ===================================================================== */
.lhc-sheet-main { background: var(--color-bg); }
.lhc-sheet { max-width: 1000px; margin: 0 auto; padding: 0 1.5rem 3.4rem; }

.lhc-sheet-head { padding: 3rem 0 0; }
.lhc-sheet-coord {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .9rem;
  margin-bottom: 1.2rem;
}
.lhc-sheet-coord span {
  font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--color-accent-deep); border: 1px solid var(--color-accent); padding: .16rem .5rem;
}
.lhc-sheet-coord i { display: block; height: 1px; background: var(--color-line); }
.lhc-sheet-title { max-width: 20ch; margin: 0 0 .7rem; }
.lhc-sheet-updated {
  font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-muted); font-weight: 600; margin: 0 0 1.4rem;
}
.lhc-sheet-fold {
  height: 18px; margin-bottom: 2.2rem;
  background: linear-gradient(180deg, rgba(30,37,43,.14) 0%, rgba(255,255,255,.7) 48%, rgba(255,255,255,.7) 52%, rgba(30,37,43,.14) 100%);
  border-top: 1px solid rgba(30,37,43,.16); border-bottom: 1px solid rgba(30,37,43,.16);
}

.lhc-sheet-toc { margin: 0 0 2.4rem; padding: 0 0 0 1.6rem; border-left: 3px solid var(--color-accent); }
.lhc-sheet-toc-title {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .17em;
  text-transform: uppercase; color: var(--color-primary); margin-bottom: .6rem;
}
.lhc-sheet-toc ul { list-style: none; columns: 2; column-gap: 2.4rem; }
.lhc-sheet-toc li { break-inside: avoid; margin-bottom: .3rem; font-size: .93rem; }
.lhc-sheet-toc a { color: var(--color-primary-dark); border-bottom: 1px solid var(--color-line); }
.lhc-sheet-toc a:hover { color: var(--color-accent-deep); border-bottom-color: var(--color-accent-deep); }

/* body: hanging glyph marker beside every h2, in the left margin.
   The body itself is inset by the marker gutter so the markers hang
   outside the text column rather than pushing the prose around. */
/* .entry-content is also on this element (for post styling reuse), and that
   rule centres itself with auto margins. Left align it back for the sheet. */
.lhc-sheet-body.entry-content, .lhc-sheet-body {
  max-width: 68ch; font-size: 1.04rem;
  margin-left: 1.9rem; margin-right: 0; padding-left: 0; padding-right: 0;
}
.lhc-sheet-body h2 {
  position: relative; margin: 2.6em 0 .6em; padding-left: 0; font-size: 1.5rem;
}
.lhc-sheet-body h2::before {
  content: ""; position: absolute; left: -1.9rem; top: .48em;
  width: 13px; height: 13px; border: 3px solid var(--color-accent-deep);
}
.lhc-sheet-body h3 { font-size: 1.18rem; }
.lhc-sheet-body a { color: var(--color-primary-dark); border-bottom: 1px solid var(--color-accent); }
.lhc-sheet-body a:hover { color: var(--color-accent-deep); }
.lhc-sheet-body ul, .lhc-sheet-body ol { padding-left: 1.2rem; margin: 0 0 1.2em; }
.lhc-sheet-body li { margin-bottom: .4em; }

/* identity block: flat slate ruled panel, square, 4px mustard left rule */
.lhc-sheet-body > p:has(> strong:first-child) {
  border: 1px solid var(--color-primary-soft); border-left: 4px solid var(--color-accent);
  background: var(--color-white); padding: .85rem 1.1rem; margin: 0 0 .5rem;
  font-size: .97rem;
}
.lhc-sheet-body > p:has(> strong:first-child) strong { color: var(--color-primary-dark); }

/* footer: two column ruled index with coordinates, like an atlas margin */
.lhc-sheet-foot { margin-top: 3.4rem; border-top: 2px solid var(--color-ink); padding-top: 1.6rem; }
.lhc-sheet-foot-title { font-size: 1.25rem; margin: 0 0 1rem; }
.lhc-sheet-index { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 2.6rem; }
.lhc-sheet-index a {
  display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: .8rem;
  padding: .6rem 0; border-bottom: 1px solid var(--color-line);
  font-size: .96rem; color: var(--color-primary-dark);
}
.lhc-sheet-index a:hover { color: var(--color-accent-deep); }
.lhc-sheet-index a::after { content: ""; }
.lhc-sheet-index .lhc-idx-key {
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; color: var(--color-accent-deep);
  border: 1px solid var(--color-accent); padding: .04rem .3rem;
}
.lhc-sheet-index .lhc-idx-rule { border-bottom: 1px dotted var(--color-line); transform: translateY(-.22em); }
.lhc-sheet-note { margin-top: 1.6rem; font-size: .9rem; color: var(--color-muted); }
.lhc-sheet-note a { color: var(--color-primary-dark); border-bottom: 1px solid var(--color-accent); }

/* ---------- plate fallback + inherited base hooks ----------
   lhc_plate() emits .lhc-plate on every image cell and adds
   .lhc-plate-blank when the post has no featured image, so an empty
   cell still prints as paper stock instead of collapsing to zero height. */
.lhc-plate { display: block; }
.lhc-plate img { width: 100%; display: block; }
.lhc-plate-blank {
  background:
    repeating-linear-gradient(135deg,
      rgba(58,76,90,.05) 0 6px, rgba(58,76,90,0) 6px 12px),
    var(--color-bg-deep);
  border: 1px solid var(--color-line);
  min-height: 130px;
}
.lhc-open-plate.lhc-plate-blank   { aspect-ratio: 11/7; }
.lhc-strip-fig.lhc-plate-blank    { aspect-ratio: 4/3; }
.lhc-driver-plate.lhc-plate-blank { aspect-ratio: 4/5; }
.lhc-panel-fig.lhc-plate-blank    { aspect-ratio: 4/3; }
.lhc-frag-fig.lhc-plate-blank     { aspect-ratio: 3/2; }
.lhc-col-fig.lhc-plate-blank      { width: 46px; height: 46px; min-height: 0; }

/* scroll progress strip from the base header: a route line, not a UI bar */
.tb-progress { height: 3px; background: var(--color-accent); width: 0; }
.site-main { display: block; }

/* the base eyebrow still appears on archive and single. Keep it consistent
   with the coordinate treatment rather than letting it fall back to grey. */
.tb-eyebrow {
  font-family: var(--font-sans); font-size: .7rem; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase; color: var(--color-accent-deep);
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1080px) {
  .lhc-panels .lhc-panel { grid-column: span 6 !important; }
  .lhc-panels .lhc-panel .lhc-panel-fig img { aspect-ratio: 16/9 !important; }
  .lhc-cols { grid-template-columns: repeat(2, 1fr); }
  .tb-related-grid, .tb-archive-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .lhc-open-inner { grid-template-columns: 1fr; gap: 1.6rem; }
  .lhc-open-body { padding-right: 0; }
  .lhc-open-strip { grid-template-columns: 1fr; }
  .lhc-strip-cell { padding: 1.4rem 0 0; border-right: 0; border-bottom: 1px solid var(--color-line); padding-bottom: 1.4rem; }
  .lhc-strip-cell:last-child { border-bottom: 0; }
  .lhc-driver-inner { grid-template-columns: 1fr; gap: 1.8rem; }
  .lhc-driver-plate img { aspect-ratio: 16/10; }
  .tb-spread { grid-template-columns: 1fr; }
  .lhc-foot { grid-template-columns: 1fr; gap: 2rem; }
  .lhc-sheet-index { grid-template-columns: 1fr; }
  .lhc-sheet-toc ul { columns: 1; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .tb-masthead-inner { grid-template-columns: 1fr; text-align: center; gap: .7rem; }
  .tb-masthead-meta, .tb-masthead-meta.right { text-align: center; }
  .tb-nav-menu { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
  .tb-nav-menu a { padding: .7rem .8rem; font-size: .72rem; }
  .lhc-panels .lhc-panel { grid-column: span 12 !important; }
  .lhc-cols { grid-template-columns: 1fr; }
  .lhc-stretch-body { grid-template-columns: 1fr; }
  .lhc-tickrule { display: none; }
  .lhc-mosaic { gap: 1.6rem; }
  .lhc-frag { grid-column: span 12 !important; }
  .lhc-frag-fig img { aspect-ratio: 3/2 !important; }
  .tb-related-grid, .tb-archive-grid { grid-template-columns: 1fr; }
  .lhc-legend-head, .lhc-stretch-head, .lhc-index-head { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .lhc-note-form, .tb-newsletter-form { flex-direction: column; }
  .lhc-note-form input, .tb-newsletter-form input { max-width: none; border-right: 2px solid var(--color-ink); margin-bottom: .5rem; }
  .lhc-note-inner { padding: 1.8rem 1.2rem; }
  .lhc-sheet-body h2 { padding-left: 1.6rem; }
  .lhc-sheet-body h2::before { left: 0; }
}