/*
Theme Name:   Healthy Habits Everyday Child
Theme URI:    https://healthyhabitseveryday.org
Description:  Loom / warp-and-weft child theme for Healthy Habits Everyday. Warp hairlines, numbered thread bands, a claim against a measured log, uneven sett mosaic. GeneratePress child.
Author:       Marcus Delacroix
Template:     generatepress
Version:      1.0.0
*/

/* ============================================================
   HEALTHY HABITS EVERYDAY - design system
   Prototype: loom / warp and weft.
   Reference anchor: lab notebook / control trial log.
   Structure borrowed: paired claim against measurement, a ruled
   scale carrying real gaps, tabular meta rows, numbered entries,
   quantified captions under figures.
   Deliberately NOT borrowed: journal chrome of any kind. No DOI,
   no citation block, no author list, no access badge, no blue
   underlined links on white, and no clinical signal anywhere.
   Shape lock: radius 0 everywhere. Cloth has no rounded corners.
   Colour lock: one accent only, pine. Nothing else accents.
   Motion: near zero. Colour and 1px shifts on hover only.
   ============================================================ */

:root {
  --color-ink: #3E3833;          /* charcoal brown */
  --color-ink-deep: #2B2723;
  --color-ink-soft: #6A6058;
  --color-bg: #EDE5D6;           /* linen */
  --color-bg-deep: #E2D8C4;
  --color-bg-warp: #D8CCB4;
  --color-accent: #3F6B54;       /* pine */
  --color-accent-deep: #2E5040;
  --color-accent-soft: #8FB49E;
  --color-muted: #7A7268;
  --color-line: #C9BCA3;
  --color-line-soft: #DAD0BC;

  --font-serif: 'Enriqueta', 'Bitter', Georgia, serif;
  --font-sans: 'Saira', 'Avenir Next', 'Segoe UI', sans-serif;

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

  /* Warp threads. Vertical hairlines, uneven spacing = uneven sett. */
  --warp: repeating-linear-gradient(90deg,
      rgba(62,56,51,.09) 0 1px,
      transparent 1px 37px,
      rgba(62,56,51,.05) 37px 38px,
      transparent 38px 96px);
}

* { box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: var(--color-bg);
  font-size: 17px; line-height: 1.66;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-serif);
  font-weight: 400; color: var(--color-ink-deep);
  line-height: 1.18; letter-spacing: -0.006em; margin: 0;
}
h1 { font-size: clamp(2.1rem, 4.3vw, 3.3rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
h3 { font-size: 1.24rem; }
a { color: var(--color-ink-deep); text-decoration: none; }
a:hover { color: var(--color-accent-deep); }
p { margin: 0 0 1.1em; }
img { max-width: 100%; height: auto; display: block; border-radius: 0; }
ul { margin: 0; padding: 0; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }

/* ---------- masthead + nav ---------- */
.tb-progress { height: 3px; background: var(--color-accent); width: 0; }

.tb-masthead {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
  background-image: var(--warp);
}
.tb-masthead-inner {
  max-width: var(--max-w-wide); margin: 0 auto; padding: 1.4rem 1.5rem 1.15rem;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 1rem;
}
.tb-masthead-meta {
  font-size: .68rem; font-weight: 500; letter-spacing: .17em;
  text-transform: uppercase; color: var(--color-muted);
}
.tb-masthead-meta.right { text-align: right; }
.tb-masthead-mid { text-align: center; }
.tb-masthead-title {
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(1.5rem, 3.1vw, 2.15rem); letter-spacing: -.018em;
  color: var(--color-ink-deep); display: inline-block;
}
.tb-masthead-title:hover { color: var(--color-accent-deep); }
.tb-masthead-tagline {
  font-size: .74rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--color-accent-deep); margin-top: .3rem; font-weight: 500;
}

/* Nav: the weft pass. Eight long labels, so it wraps by design at 1280
   into two even rows rather than breaking one item onto a lonely line. */
.tb-nav { background: var(--color-ink-deep); }
.tb-nav-inner { max-width: var(--max-w-wide); margin: 0 auto; padding: 0 .9rem; }
.tb-nav-menu {
  list-style: none; display: flex; flex-wrap: wrap;
  justify-content: center; gap: 0;
}
.tb-nav-menu li { position: relative; }
.tb-nav-menu li + li::before {
  content: ''; position: absolute; left: 0; top: 30%; height: 40%;
  width: 1px; background: rgba(237,229,214,.24);
}
.tb-nav-menu a {
  display: block; padding: .74rem .72rem;
  font-size: .672rem; font-weight: 500; letter-spacing: .055em;
  text-transform: uppercase; color: #E6DCC9; white-space: nowrap;
}
.tb-nav-menu a:hover { color: #fff; background: var(--color-accent-deep); }

.tb-main { display: block; }

/* Shared thread-mark. Replaces the eyebrow pill; used at most twice. */
.hh-mark {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-sans); font-size: .68rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--color-accent-deep); margin-bottom: .95rem;
}
.hh-mark::before {
  content: ''; width: 22px; height: 3px; background: var(--color-accent); flex: none;
}
.hh-mark.light { color: var(--color-accent-soft); }
.hh-mark.light::before { background: var(--color-accent-soft); }

/* Meta row: category │ week │ date. Vertical rules, no middots. */
.hh-meta-row {
  display: flex; flex-wrap: wrap; align-items: center;
  font-family: var(--font-sans); font-size: .69rem; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase; color: var(--color-muted);
  margin-top: .55rem;
}
.hh-meta-row span + span {
  margin-left: .55rem; padding-left: .55rem;
  border-left: 1px solid var(--color-line);
}
.hh-meta-row .cat { color: var(--color-accent-deep); font-weight: 600; }
.hh-meta-row.light { color: rgba(230,220,201,.72); }
.hh-meta-row.light span + span { border-left-color: rgba(230,220,201,.3); }
.hh-meta-row.light .cat { color: var(--color-accent-soft); }

/* Quantified caption. Always UNDER the image, never overlaid. */
.hh-cap {
  font-family: var(--font-sans); font-size: .705rem; letter-spacing: .05em;
  color: var(--color-muted); margin-top: .48rem;
}
.hh-cap.light { color: rgba(230,220,201,.66); }

.hh-all {
  font-size: .7rem; font-weight: 600; letter-spacing: .15em;
  text-transform: uppercase; color: var(--color-ink-deep);
  border-bottom: 2px solid var(--color-accent); padding-bottom: .18rem;
  white-space: nowrap;
}
.hh-all.light { color: #E6DCC9; }

.hh-band-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1.4rem; border-bottom: 1px solid var(--color-line);
  padding-bottom: .78rem; margin-bottom: 1.9rem;
}
.hh-band-head.light { border-bottom-color: rgba(230,220,201,.24); }
.hh-band-head.light h2 { color: #F2EADB; }

/* Selvedge: the finished edge between bands. */
.hh-selvedge {
  height: 12px;
  background:
    repeating-linear-gradient(90deg,
      var(--color-line) 0 5px, transparent 5px 11px),
    var(--color-bg);
  opacity: .85;
}

/* ============ 1. HERO CLOTH (light) ============ */
.hh-hero-cloth { background: var(--color-bg); background-image: var(--warp); }
.hh-hero-inner {
  max-width: var(--max-w-wide); margin: 0 auto; padding: 2.5rem 1.5rem 2.6rem;
  display: grid; grid-template-columns: 1.62fr 1fr; gap: 0;
  align-items: stretch;
}
.hh-hero-fig { position: relative; border: 1px solid var(--color-line); background: var(--color-bg-deep); }
.hh-hero-fig img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.hh-hero-side {
  background: var(--color-bg-deep);
  border: 1px solid var(--color-line); border-left: 0;
  padding: 1.9rem 1.7rem 1.6rem;
  display: flex; flex-direction: column; justify-content: center;
}
.hh-hero-side h1 { margin: 0 0 .7rem; font-size: clamp(1.8rem, 2.9vw, 2.6rem); }
.hh-hero-dek { color: var(--color-ink-soft); font-size: 1.02rem; margin-bottom: 1rem; }
.hh-hero-read {
  margin-top: 1.4rem; align-self: flex-start;
  font-size: .72rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
  color: var(--color-ink-deep); border-bottom: 2px solid var(--color-accent);
  padding-bottom: .2rem;
}
.hh-hero-read:hover { border-bottom-color: var(--color-ink-deep); }
/* The thread count strip that finishes the hero block. */
.hh-hero-sett {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--color-line); border-top: 0;
}
.hh-sett-cell {
  padding: .95rem 1.15rem; background: var(--color-bg);
  border-left: 1px solid var(--color-line-soft);
  display: flex; gap: .9rem; align-items: flex-start;
}
.hh-sett-cell:first-child { border-left: 0; }
.hh-sett-cell:hover { background: var(--color-bg-deep); }
.hh-sett-fig { flex: none; width: 76px; border: 1px solid var(--color-line); }
.hh-sett-fig img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.hh-sett-title {
  font-family: var(--font-serif); font-size: .99rem; line-height: 1.26;
  color: var(--color-ink-deep); display: block;
}

/* ============ 2. TICKS (dark) ============ */
.hh-ticks { background: var(--color-ink-deep); padding: 2.7rem 1.5rem 2.9rem; }
.hh-ticks-inner { max-width: var(--max-w); margin: 0 auto; }
.hh-ticks-top { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: end; }
.hh-ticks-top h2 { color: #F2EADB; font-size: clamp(1.4rem,2.3vw,1.95rem); max-width: 30ch; }

/* Twelve weeks, uneven gaps. Weeks 3, 7 and 11 are breaks. */
.hh-scale { margin: 2.05rem 0 2.2rem; position: relative; }
.hh-scale-rule { height: 1px; background: rgba(230,220,201,.3); }
.hh-scale-marks { display: flex; align-items: flex-start; }
.hh-scale-mark { position: relative; padding-top: .55rem; text-align: left; }
.hh-scale-mark i {
  position: absolute; top: -1px; left: 0; width: 1px; height: 13px;
  background: var(--color-accent-soft); display: block;
}
.hh-scale-mark.brk i { height: 22px; width: 3px; background: #B4553F; }
.hh-scale-mark span {
  font-size: .63rem; font-weight: 500; letter-spacing: .1em;
  color: rgba(230,220,201,.6); display: block; padding-top: .35rem;
}
.hh-scale-mark.brk span { color: #D08A76; }
.hh-scale-legend {
  font-size: .7rem; letter-spacing: .06em; color: rgba(230,220,201,.55);
  margin-top: 1.35rem;
}

.hh-ticks-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.35rem; }
.hh-tick-item { display: block; }
.hh-tick-fig { display: block; border: 1px solid rgba(230,220,201,.22); background: #35302B; }
.hh-tick-fig img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.hh-tick-item h3 {
  color: #F2EADB; font-size: 1rem; line-height: 1.28; margin: .68rem 0 0;
}
.hh-tick-item:hover h3 { color: var(--color-accent-soft); }

/* ============ 3. TRIAL — signature block (light) ============ */
.hh-trial { background: var(--color-bg); padding: 3rem 1.5rem 3.1rem; }
.hh-trial-inner { max-width: var(--max-w); margin: 0 auto; }
.hh-trial-grid {
  display: grid; grid-template-columns: 1fr 1.12fr; gap: 0;
  border: 1px solid var(--color-line);
}
.hh-claim {
  background: var(--color-bg-deep); padding: 1.9rem 1.8rem;
  display: flex; flex-direction: column;
}
.hh-claim-label, .hh-measured-label {
  font-family: var(--font-sans); font-size: .655rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--color-muted);
  margin-bottom: .9rem;
}
.hh-claim blockquote {
  font-family: var(--font-serif); font-size: clamp(1.2rem,1.9vw,1.55rem);
  line-height: 1.34; color: var(--color-ink-deep); margin: 0 0 1rem;
  padding: 0; border: 0;
}
.hh-claim-src {
  font-size: .78rem; color: var(--color-muted); letter-spacing: .02em;
  line-height: 1.5; margin: 0 0 1.25rem;
  padding-left: .85rem; border-left: 2px solid var(--color-line);
}
/* A swatch of the cloth under the claim, so the column is not half empty. */
.hh-claim-fig { display: block; margin-top: auto; border: 1px solid var(--color-line); background: var(--color-bg-warp); }
.hh-claim-fig img { width: 100%; aspect-ratio: 21/9; object-fit: cover; }

.hh-measured {
  background: var(--color-bg); padding: 1.9rem 1.8rem;
  border-left: 3px solid var(--color-accent);
}
.hh-measured-rows { border-top: 1px solid var(--color-line); }
/* Hairlines only BETWEEN rows. No rule on every row top and bottom. */
.hh-measured-rows > div {
  display: grid; grid-template-columns: auto 1fr; gap: 1.1rem;
  padding: .72rem 0; align-items: baseline;
}
.hh-measured-rows > div + div { border-top: 1px solid var(--color-line-soft); }
.hh-measured-rows b {
  font-family: var(--font-serif); font-size: 1.3rem; font-weight: 700;
  color: var(--color-accent-deep); min-width: 4.4rem; display: inline-block;
}
.hh-measured-rows p { margin: 0; font-size: .93rem; color: var(--color-ink-soft); line-height: 1.5; }
.hh-verdict {
  margin-top: 1.15rem; padding-top: 1rem; border-top: 1px solid var(--color-line);
  font-size: .96rem; color: var(--color-ink);
}
.hh-verdict strong { font-weight: 600; color: var(--color-accent-deep); }
.hh-measured-fig { display: block; margin-top: 1.2rem; border: 1px solid var(--color-line); background: var(--color-bg-deep); }
.hh-measured-fig img { width: 100%; aspect-ratio: 21/8; object-fit: cover; }
.hh-trial-figs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.1rem; margin-top: 1.3rem; }
.hh-trial-fig { display: block; border: 1px solid var(--color-line); background: var(--color-bg-deep); }
.hh-trial-fig img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }

/* ============ 4. WEAVE — eight numbered bands (mid) ============ */
.hh-weave { background: var(--color-bg-deep); padding: 3rem 1.5rem 3.1rem; background-image: var(--warp); }
.hh-weave-inner { max-width: var(--max-w); margin: 0 auto; }
.hh-weave-list { border-top: 1px solid var(--color-line); }
.hh-weave-band {
  display: grid; grid-template-columns: 3.6rem 112px 1fr 6.5rem;
  gap: 1.4rem; align-items: center;
  padding: 1.05rem 1.1rem; border-bottom: 1px solid var(--color-line);
  background: transparent;
}
.hh-weave-band:hover { background: rgba(63,107,84,.07); }
/* Uneven sett: alternating bands are inset, so the column is not a grid. */
.hh-weave-band.w-in { padding-left: 3.3rem; }
.hh-weave-band.w-wide { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.hh-weave-no {
  font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700;
  color: var(--color-accent); letter-spacing: -.02em;
}
.hh-weave-fig { display: block; border: 1px solid var(--color-line); background: var(--color-bg-warp); }
.hh-weave-fig img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.hh-weave-band.w-wide .hh-weave-fig img { aspect-ratio: 4/3; }
.hh-weave-body h3 { font-size: 1.22rem; margin: 0; }
.hh-weave-band:hover h3 { color: var(--color-accent-deep); }
.hh-weave-body p { margin: .28rem 0 0; font-size: .89rem; color: var(--color-ink-soft); line-height: 1.5; }
.hh-weave-count {
  font-family: var(--font-sans); font-size: .68rem; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase; color: var(--color-muted);
  white-space: nowrap; text-align: right;
}
/* Thread-density bar: how much has been written on this warp. */
.hh-weave-dens { display: block; height: 3px; background: var(--color-line); margin-top: .45rem; width: 84px; margin-left: auto; }
.hh-weave-dens span { display: block; height: 3px; background: var(--color-accent); }

/* ============ 5. LOOM — uneven mosaic (light) ============ */
.hh-loom-sec { background: var(--color-bg); padding: 3rem 1.5rem 3.2rem; }
.hh-loom-inner { max-width: var(--max-w); margin: 0 auto; }
.hh-loom {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: 1.15rem; align-items: start;   /* start: short cards must not stretch */
}
.hh-cell { display: block; grid-column: span 3; }
.hh-cell-fig { display: block; border: 1px solid var(--color-line); background: var(--color-bg-deep); }
.hh-cell-fig img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.hh-cell h3 { font-size: 1.02rem; line-height: 1.27; margin: .6rem 0 0; }
.hh-cell:hover h3 { color: var(--color-accent-deep); }
.hh-cell p { margin: .35rem 0 0; font-size: .9rem; color: var(--color-ink-soft); }
/* Five widths. Two runs of 12 columns each, so rows always close flush. */
.hh-cell.c-lg   { grid-column: span 6; }
.hh-cell.c-lg   .hh-cell-fig img { aspect-ratio: 16/9; }
.hh-cell.c-lg   h3 { font-size: 1.42rem; }
.hh-cell.c-tall { grid-column: span 3; }
.hh-cell.c-tall .hh-cell-fig img { aspect-ratio: 3/4; }
.hh-cell.c-wide { grid-column: span 5; }
.hh-cell.c-wide .hh-cell-fig img { aspect-ratio: 3/2; }
.hh-cell.c-nar  { grid-column: span 4; }
.hh-cell.c-sm   { grid-column: span 3; }

/* ============ 6. BY SECTION (dark) ============ */
.hh-bysection { background: var(--color-ink-deep); padding: 3rem 1.5rem 3.2rem; }
.hh-bysection-inner { max-width: var(--max-w); margin: 0 auto; }
.hh-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem 2rem; }
.hh-col h3 { font-size: 1.06rem; padding-bottom: .55rem; border-bottom: 1px solid rgba(230,220,201,.24); }
.hh-col h3 a { color: #F2EADB; }
.hh-col h3 a:hover { color: var(--color-accent-soft); }
.hh-col ul { list-style: none; margin: .8rem 0 0; }
.hh-col li { display: grid; grid-template-columns: 54px 1fr; gap: .75rem; margin-bottom: .85rem; align-items: start; }
.hh-col-fig { display: block; border: 1px solid rgba(230,220,201,.2); background: #35302B; }
.hh-col-fig img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.hh-col li a { color: #E6DCC9; font-size: .89rem; line-height: 1.33; display: block; }
.hh-col li a:hover { color: var(--color-accent-soft); }
.hh-col li span { display: block; font-size: .655rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(230,220,201,.5); margin-top: .24rem; }

/* ============ 7. NEWSLETTER (pine) ============ */
.hh-thread { background: var(--color-accent); padding: 3.1rem 1.5rem 3.3rem; }
.hh-thread-inner { max-width: 700px; margin: 0 auto; text-align: center; }
.hh-thread-inner h2 { color: #F3EEE2; margin: 0 0 .65rem; font-size: clamp(1.5rem,2.4vw,2rem); }
.hh-thread-inner > p { color: rgba(243,238,226,.86); max-width: 54ch; margin: 0 auto 1.4rem; font-size: .97rem; }
.hh-thread-form { display: flex; justify-content: center; }
.hh-thread-form input {
  font-family: var(--font-sans); font-size: .95rem; padding: .72rem .9rem;
  width: 100%; max-width: 320px; border: 2px solid #23392E; border-right: 0;
  background: #F3EEE2; color: var(--color-ink-deep); border-radius: 0;
}
.hh-thread-form input::placeholder { color: #857C70; }
.hh-thread-form input:focus { outline: 2px solid #23392E; outline-offset: 1px; }
.hh-thread-form button {
  font-family: var(--font-sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; cursor: pointer;
  padding: .72rem 1.35rem; border: 2px solid #23392E; background: var(--color-ink-deep);
  color: #F3EEE2; border-radius: 0;
}
.hh-thread-form button:hover { background: #23392E; }
.hh-thread-fine { margin-top: .9rem; font-size: .74rem; color: rgba(243,238,226,.72); }
.hh-thread-fine a { color: #F3EEE2; text-decoration: underline; }

/* ---------- footer ---------- */
.site-footer { background: var(--color-ink-deep); border-top: 1px solid rgba(230,220,201,.16); }
.hh-foot {
  max-width: var(--max-w); margin: 0 auto; padding: 2.9rem 1.5rem 2.6rem;
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.4rem;
}
.hh-foot-name { font-family: var(--font-serif); font-size: 1.32rem; font-weight: 700; color: #F2EADB; margin-bottom: .6rem; }
.hh-foot p { color: rgba(230,220,201,.72); font-size: .9rem; max-width: 46ch; }
.hh-foot-c { font-size: .76rem; color: rgba(230,220,201,.5); }
.hh-foot h5 {
  font-family: var(--font-sans); font-size: .67rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--color-accent-soft);
  margin: 0 0 .8rem;
}
.hh-foot ul { list-style: none; }
.hh-foot li { margin-bottom: .42rem; }
.hh-foot a { color: rgba(230,220,201,.82); font-size: .88rem; }
.hh-foot a:hover { color: #fff; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .hh-cols { grid-template-columns: repeat(2, 1fr); }
  .hh-ticks-list { grid-template-columns: repeat(3, 1fr); }
  .hh-cell, .hh-cell.c-lg, .hh-cell.c-wide, .hh-cell.c-nar,
  .hh-cell.c-tall, .hh-cell.c-sm { grid-column: span 6; }
  .hh-cell.c-tall .hh-cell-fig img { aspect-ratio: 4/3; }
}
@media (max-width: 900px) {
  .hh-hero-inner { grid-template-columns: 1fr; }
  .hh-hero-side { border-left: 1px solid var(--color-line); border-top: 0; }
  .hh-trial-grid { grid-template-columns: 1fr; }
  .hh-measured { border-left: 0; border-top: 3px solid var(--color-accent); }
  .hh-weave-band { grid-template-columns: 2.6rem 78px 1fr; }
  .hh-weave-count { grid-column: 3; justify-self: start; }
  .hh-weave-band.w-in { padding-left: 1.1rem; }
  .hh-foot { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .hh-masthead-inner, .tb-masthead-inner { grid-template-columns: 1fr; text-align: center; gap: .55rem; }
  .tb-masthead-meta, .tb-masthead-meta.right { text-align: center; }
  .tb-nav-menu { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; }
  .hh-hero-sett { grid-template-columns: 1fr; }
  .hh-sett-cell { border-left: 0; border-top: 1px solid var(--color-line-soft); }
  .hh-sett-cell:first-child { border-top: 0; }
  .hh-ticks-list { grid-template-columns: repeat(2, 1fr); }
  .hh-ticks-top { grid-template-columns: 1fr; }
  .hh-trial-figs { grid-template-columns: 1fr; }
  .hh-weave-band { grid-template-columns: 2.2rem 1fr; row-gap: .6rem; }
  .hh-weave-fig { grid-column: 2; }
  .hh-weave-body { grid-column: 2; }
  .hh-weave-count { grid-column: 2; }
  .hh-cell, .hh-cell.c-lg, .hh-cell.c-wide, .hh-cell.c-nar,
  .hh-cell.c-tall, .hh-cell.c-sm { grid-column: span 12; }
  .hh-cols { grid-template-columns: 1fr; }
  .hh-foot { grid-template-columns: 1fr; }
  .hh-thread-form { flex-direction: column; align-items: stretch; }
  .hh-thread-form input { max-width: none; border-right: 2px solid #23392E; margin-bottom: .55rem; }
  .hh-scale-mark span { font-size: .55rem; }
  .hh-band-head { flex-direction: column; align-items: flex-start; gap: .7rem; }
  .hh-ticks-top .hh-all { justify-self: start; }
}


/* ============================================================
   WORDPRESS SURFACES
   Everything below is chrome the homepage does not use: single
   posts, archives, the trust page record, and GeneratePress
   leftovers that must be re-dressed in the loom palette.
   ============================================================ */

/* Image fallback when a post carries no featured image. Never a blank cell. */
.hh-cloth { display: block; }
.hh-cloth-blank {
  background:
    repeating-linear-gradient(90deg, rgba(62,56,51,.07) 0 1px, transparent 1px 9px),
    var(--color-bg-warp);
  min-height: 100px;
}
.hh-cell-fig.hh-cloth-blank,
.hh-weave-fig.hh-cloth-blank,
.hh-tick-fig.hh-cloth-blank { aspect-ratio: 4/3; }
.hh-col-fig.hh-cloth-blank,
.hh-sett-fig.hh-cloth-blank { aspect-ratio: 1/1; min-height: 0; }
.hh-hero-fig.hh-cloth-blank { aspect-ratio: 16/10; }

.entry-content { font-family: var(--font-sans); color: var(--color-ink); }
.entry-content a { color: var(--color-accent-deep); border-bottom: 1px solid var(--color-accent-soft); }
.entry-content a:hover { border-bottom-color: var(--color-accent-deep); }
.entry-content h2 { font-size: clamp(1.4rem, 2.3vw, 1.85rem); margin: 2.1em 0 .5em; }
.entry-content h3 { font-size: 1.22rem; margin: 1.7em 0 .4em; }
.entry-content ul, .entry-content ol { margin: 0 0 1.2em; padding-left: 1.3rem; }
.entry-content li { margin-bottom: .4rem; }
.entry-content blockquote {
  font-family: var(--font-serif); font-size: 1.3rem; line-height: 1.38;
  color: var(--color-ink-deep); border-left: 3px solid var(--color-accent);
  margin: 2em 0; padding: .1rem 0 .1rem 1.3rem; background: transparent;
}
.entry-content table { width: 100%; border-collapse: collapse; margin: 1.8em 0; font-size: .93rem; }
.entry-content th, .entry-content td { text-align: left; padding: .6rem .7rem; }
.entry-content thead th { border-bottom: 2px solid var(--color-ink-deep); font-family: var(--font-sans); font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; }
.entry-content tbody tr + tr td { border-top: 1px solid var(--color-line-soft); }
hr { border: 0; height: 1px; background: var(--color-line); margin: 3em 0; }
figure { margin: 2em 0; }
figcaption { font-family: var(--font-sans); font-size: .78rem; color: var(--color-muted); margin-top: .5rem; }

/* ---------- single post ---------- */
.tb-post-header { max-width: var(--max-w-narrow); margin: 0 auto; padding: 2.8rem 1.5rem 1.3rem; }
.tb-breadcrumb { font-size: .72rem; 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-family: var(--font-sans); font-size: .67rem;
  font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--color-accent-deep); border-bottom: 2px solid var(--color-accent);
  padding-bottom: .16rem; margin-bottom: .95rem;
}
.tb-post-title { margin: 0 0 .8rem; }
.tb-post-meta { padding-bottom: 1.1rem; border-bottom: 2px solid var(--color-ink-deep); margin-top: 0; }
.tb-post-meta strong { font-weight: 600; color: var(--color-ink-deep); }
.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); }
.site-main .entry-content { max-width: var(--max-w-narrow); margin: 0 auto; padding: 0 1.5rem; }

.ftc-disclosure {
  background: var(--color-bg-deep); border-left: 3px solid var(--color-accent);
  padding: .85rem 1.1rem; margin: 0 0 1.8rem; font-size: .87rem; color: var(--color-ink-soft);
}
.ftc-disclosure p { margin: 0; }
.ftc-disclosure a { color: var(--color-accent-deep); }

.tb-author-bio {
  max-width: var(--max-w-narrow); margin: 3rem auto 0; padding: 1.5rem;
  background: var(--color-bg-deep); border-left: 3px solid var(--color-accent);
  display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: start;
}
.tb-author-avatar {
  width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
  background: var(--color-ink-deep); color: var(--color-bg);
  font-family: var(--font-serif); font-size: 1.15rem; font-weight: 700; letter-spacing: .04em;
}
.tb-author-bio h4 { font-family: var(--font-serif); margin: .1rem 0 .4rem; font-size: 1.16rem; }
.tb-author-bio p { font-size: .94rem; margin: 0 0 .6rem; color: var(--color-ink-soft); }
.tb-author-bio > div > .hh-mark { margin-bottom: .5rem; }
.tb-author-bio a {
  font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-ink-deep); border-bottom: 2px solid var(--color-accent); padding-bottom: .16rem;
}

.tb-related { max-width: var(--max-w); margin: 3.4rem auto 0; padding: 0 1.5rem 1rem; }
.tb-related h3 { font-size: 1.5rem; border-bottom: 1px solid var(--color-line); padding-bottom: .6rem; margin-bottom: 1.4rem; }
.tb-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; align-items: start; }
.tb-related-cover { display: block; 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.08rem; line-height: 1.28; margin: .7rem 0 0; color: var(--color-ink-deep); }
.tb-related-card:hover .tb-related-title { color: var(--color-accent-deep); }

/* ---------- archive ---------- */
.tb-archive-hero {
  max-width: var(--max-w); margin: 0 auto; padding: 2.9rem 1.5rem 1.5rem;
  border-bottom: 1px solid var(--color-line);
}
.tb-archive-hero h1 { margin: 0 0 .55rem; }
.tb-archive-hero p { color: var(--color-ink-soft); max-width: 62ch; }
.hh-archive-count {
  font-family: var(--font-sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: var(--color-accent-deep);
}
.tb-archive-feature { max-width: var(--max-w); margin: 2.3rem auto; padding: 0 1.5rem; }
.tb-spread { display: grid; grid-template-columns: 1.45fr 1fr; gap: 2rem; align-items: start; }
.tb-spread-image { display: block; 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: 0 0 .6rem; font-size: 1.72rem; }
.tb-spread-excerpt { color: var(--color-ink-soft); }
.tb-spread-text .hh-meta-row { margin-bottom: 1rem; }
.tb-spread-read {
  display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .15em;
  text-transform: uppercase; color: var(--color-ink-deep);
  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.9rem; align-items: start;
}
.tb-archive-cover { display: block; 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-title { font-family: var(--font-serif); font-size: 1.16rem; line-height: 1.27; margin: .7rem 0 .3rem; color: var(--color-ink-deep); }
.tb-archive-card:hover .tb-archive-title { color: var(--color-accent-deep); }
.tb-archive-excerpt { font-size: .9rem; color: var(--color-ink-soft); margin: 0; }
.hh-archive-empty { max-width: 700px; margin: 4rem auto; padding: 0 1.5rem; text-align: center; color: var(--color-muted); }

.hh-pagination { max-width: var(--max-w); margin: 2rem auto 4rem; padding: 0 1.5rem; text-align: center; }
.navigation.pagination { font-family: var(--font-sans); font-size: .8rem; letter-spacing: .08em; }
.navigation.pagination a, .navigation.pagination .current {
  padding: .42rem .72rem; border: 1px solid var(--color-line); margin: 0 .15rem;
  display: inline-block; color: var(--color-ink-deep);
}
.navigation.pagination .current { background: var(--color-ink-deep); color: var(--color-bg); border-color: var(--color-ink-deep); }
.navigation.pagination a:hover { border-color: var(--color-accent); color: var(--color-accent-deep); }

/* ============================================================
   THE WARP RECORD - trust pages (page.php)
   A pine warp band down the head, a hung marker in front of each
   h2, a flat linen identity panel, a knotted two column index.
   ============================================================ */
.hh-record-main { max-width: var(--max-w-narrow); margin: 0 auto; padding: 0 1.5rem 3rem; }
.hh-record { padding-top: 2.9rem; }

.hh-record-head { position: relative; padding-left: 1.7rem; margin-bottom: 2rem; }
/* The warp: one solid pine thread plus three hairline threads beside it. */
.hh-record-warp {
  position: absolute; left: 0; top: .3rem; bottom: .3rem; width: 13px;
  background:
    linear-gradient(90deg,
      var(--color-accent) 0 4px,
      transparent 4px 7px,
      var(--color-line) 7px 8px,
      transparent 8px 10px,
      var(--color-line) 10px 11px,
      transparent 11px 12px,
      var(--color-line) 12px 13px);
}
.hh-record-title { margin: 0 0 .7rem; font-size: clamp(1.9rem, 3.5vw, 2.75rem); }
.hh-record-updated {
  display: flex; flex-wrap: wrap; margin: 0;
  font-family: var(--font-sans); font-size: .69rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--color-muted);
}
.hh-record-updated span + span {
  margin-left: .6rem; padding-left: .6rem; border-left: 1px solid var(--color-line);
}

.hh-record-toc {
  background: var(--color-bg-deep); padding: 1.15rem 1.3rem; margin-bottom: 2.2rem;
}
.hh-record-toc-title {
  display: block; font-family: var(--font-sans); font-size: .655rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--color-muted); margin-bottom: .7rem;
}
.hh-record-toc ul { list-style: none; margin: 0; }
.hh-record-toc li { margin-bottom: .35rem; font-size: .93rem; }
.hh-record-toc a { color: var(--color-ink-deep); }
.hh-record-toc a:hover { color: var(--color-accent-deep); }

/* Section marker: a short solid pass hung in front of every h2. */
/* .entry-content carries a narrower max-width and its own padding for posts.
   Inside the record the wrapper already sets both, so cancel it here or the
   body sits indented relative to the head, the toc and the index. */
.hh-record-body.entry-content { max-width: none; margin: 0; padding: 0; }

.hh-record-body h2 {
  position: relative; padding-left: 2.6rem;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem); margin: 2.3em 0 .55em;
}
.hh-record-body h2::before {
  content: ''; position: absolute; left: 0; top: .58em;
  width: 8px; height: 8px; background: var(--color-accent);
}
.hh-record-body h2::after {
  content: ''; position: absolute; left: 12px; top: calc(.58em + 3.5px);
  width: 24px; height: 1px; background: var(--color-accent);
}
.hh-record-body h3 { font-size: 1.15rem; margin: 1.7em 0 .4em; }
.hh-record-body p, .hh-record-body li { color: var(--color-ink); }
.hh-record-body a { color: var(--color-accent-deep); border-bottom: 1px solid var(--color-accent-soft); }

/* Identity panel: a paragraph whose first child is <strong> carries the
   company block on legal pages. Flat linen, pine rule, square corners. */
.hh-record-body p:has(> strong:first-child) {
  background: var(--color-bg-deep); border-left: 3px solid var(--color-accent);
  padding: 1rem 1.2rem; margin: 1.5em 0;
}
.hh-record-body p:has(> strong:first-child) strong { color: var(--color-ink-deep); }

.hh-record-foot { margin-top: 3.2rem; border-top: 1px solid var(--color-line); padding-top: 1.7rem; }
.hh-record-foot-title {
  font-size: 1.02rem; font-family: var(--font-sans); font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase; color: var(--color-muted);
  margin: 0 0 1.1rem;
}
.hh-record-index { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; }
.hh-record-index a {
  display: flex; align-items: center; gap: .7rem;
  padding: .68rem 0; border-bottom: 1px solid var(--color-line-soft);
  font-size: .95rem; color: var(--color-ink-deep);
}
.hh-record-index a:hover { color: var(--color-accent-deep); }
/* The knot: a small square where the weft is tied off. */
.hh-knot { width: 4px; height: 4px; background: var(--color-accent); flex: none; }
.hh-record-note { margin-top: 1.5rem; font-size: .9rem; color: var(--color-ink-soft); }
.hh-record-note a { color: var(--color-accent-deep); border-bottom: 1px solid var(--color-accent-soft); }

/* ---------- GeneratePress leftovers ---------- */
.site-content, .inside-article { padding: 0; }
.entry-meta, .gp-entry-meta { display: none; }

@media (max-width: 1100px) {
  .tb-related-grid, .tb-archive-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .tb-spread { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .tb-related-grid, .tb-archive-grid { grid-template-columns: 1fr; }
  .tb-author-bio { grid-template-columns: 1fr; }
  .hh-record-index { grid-template-columns: 1fr; }
  .hh-record-head { padding-left: 1.4rem; }
  .hh-record-body h2 { padding-left: 2.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}