/*
Theme Name:   Fresh Faced Living Child
Theme URI:    https://freshfacedliving.org
Description:  Contact Sheet / Darkroom Proof editorial child theme for Fresh Faced Living. Abril Fatface + Catamaran, ink / blush / chrome.
Author:       Simone Okafor
Template:     generatepress
Version:      1.0.0
*/

/* ============================================================
   FRESH FACED LIVING - DESIGN SYSTEM
   Archetype : Contact Sheet / Darkroom Proof
   Devices   : sprocket rail, grease-pencil selection mark,
               frame rubric, chrome corner ticks, the enlargement
   Motion    : 1 (CSS hover / focus only, no JS, no entry animation)
   ============================================================ */

:root{
  /* ---- palette (fleet-unique: cool ink on warm blush, chrome accent) ---- */
  --color-primary:      #23262B;  /* ink (dark bands, headlines) */
  --color-primary-dark: #17191D;  /* deepest band */
  --color-primary-soft: #EBD9D1;  /* image placeholder / raised panel */
  --color-bg:           #F4E7E1;  /* blush paper canvas */
  --color-bg-deep:      #EBD9D1;  /* deeper blush band */
  --color-bg-pale:      #FBF4F1;  /* contact-sheet ground */
  --color-accent:       #D8A63C;  /* chrome yellow - THE ONLY ACCENT */
  --color-accent-soft:  #F0D9A2;  /* pale chrome (on ink) */
  --color-accent-deep:  #A87B21;  /* deep chrome (text-safe on blush) */
  --color-grease:       #C8443A;  /* grease-pencil red - MARK STROKE ONLY,
                                     never text, never a fill, never a CTA */
  --color-charcoal:     #2A2D33;  /* body text */
  --color-ink:          #23262B;  /* headline ink */
  --color-ink-soft:     #3A3E45;
  --color-muted:        #7C7378;  /* warm grey meta */
  --color-line:         #DCC9C1;  /* hairline on blush */
  --color-hair:         rgba(35,38,43,.16);
  --color-white:        #FBF4F1;

  /* ---- type (both faces are fleet-first-use) ---- */
  --font-serif: 'Abril Fatface', Georgia, 'Times New Roman', serif;
  --font-sans:  'Catamaran', 'Trebuchet MS', sans-serif;

  --max-w: 1320px;

  /* ---- signature device: film sprocket perforations ---- */
  --sprocket:      repeating-linear-gradient(90deg, transparent 0 9px, rgba(35,38,43,.34)  9px 16px, transparent 16px 27px);
  --sprocket-ink:  repeating-linear-gradient(90deg, transparent 0 9px, rgba(244,231,225,.34) 9px 16px, transparent 16px 27px);
}

*, *::before, *::after { box-sizing: border-box; }

body{
  margin:0; background:var(--color-bg); color:var(--color-charcoal);
  font-family:var(--font-sans); font-weight:400; font-size:17px; line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

h1,h2,h3{ font-family:var(--font-serif); font-weight:400; letter-spacing:-.008em; }
h4,h5,h6{ font-family:var(--font-sans); font-weight:600; }

/* Radius system: EVERYTHING IS SQUARE. The only curves on this site are the
   grease-pencil ring and the sprocket notches, both deliberate. */

/* ---- the ONE small-type size (extreme scale contrast, per the reference) ---- */
.tb-eyebrow, .ff-cap{
  font-family:var(--font-sans); font-size:10.5px; font-weight:600;
  letter-spacing:.19em; text-transform:uppercase; color:var(--color-muted);
  line-height:1.5; display:block;
}
.ff-cap.on-ink, .tb-eyebrow.on-ink{ color:var(--color-accent-soft); }

/* ---- signature: sprocket rail ---- */
.ff-sprocket{
  height:11px; flex:none;
  background-color:var(--color-bg-deep);
  background-image:var(--sprocket);
  background-size:27px 5px; background-repeat:repeat-x; background-position:center;
}
.ff-sprocket.on-ink{
  background-color:var(--color-primary-dark);
  background-image:var(--sprocket-ink);
}

/* ---- signature: chrome corner ticks (darkroom easel crop marks) ---- */
.ff-tick{ position:absolute; width:22px; height:22px; border:2px solid var(--color-accent); pointer-events:none; }
.ff-tick.tl{ top:9px; left:9px;  border-right:0; border-bottom:0; }
.ff-tick.tr{ top:9px; right:9px; border-left:0;  border-bottom:0; }
.ff-tick.bl{ bottom:9px; left:9px;  border-right:0; border-top:0; }
.ff-tick.br{ bottom:9px; right:9px; border-left:0;  border-top:0; }

/* ---- signature: frame rubric (film edge printing, outside the photo) ---- */
.ff-rub{
  display:flex; gap:.55rem; align-items:baseline;
  margin-top:.45rem; padding-top:.35rem; border-top:1px solid var(--color-hair);
}
.ff-rub .n{ font-family:var(--font-serif); font-size:.92rem; color:var(--color-accent-deep); line-height:1; }

/* ============================================================
   MASTHEAD - flush left tracked wordmark, nav inline, ONE line
   (borrowed from the reference; kills the fleet's centred plate)
   ============================================================ */
.tb-masthead{ border-bottom:1px solid var(--color-hair); background:var(--color-bg); }
.tb-masthead-inner{
  max-width:var(--max-w); margin:0 auto; padding:1.35rem 2rem;
  display:flex; align-items:baseline; gap:2.4rem;
}
.tb-masthead-title{
  font-family:var(--font-sans); font-weight:700; font-size:1.02rem;
  letter-spacing:.42em; text-transform:uppercase; white-space:nowrap;
  color:var(--color-ink); text-decoration:none;
}
.tb-masthead-tagline{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--color-muted); white-space:nowrap;
}
.tb-masthead-meta{
  font-size:10.5px; font-weight:600; letter-spacing:.19em; text-transform:uppercase;
  color:var(--color-muted); white-space:nowrap;
}
.tb-masthead-meta.right{ margin-left:auto; }

.tb-nav{ border-bottom:1px solid var(--color-hair); background:var(--color-bg); }
.tb-nav-inner{ max-width:var(--max-w); margin:0 auto; padding:.8rem 2rem; }
.tb-nav-menu{
  list-style:none; margin:0; padding:0;
  display:flex; gap:1.25rem; flex-wrap:wrap; align-items:baseline;
}
.tb-nav-menu a{
  font-size:11px; font-weight:600; letter-spacing:.085em; text-transform:uppercase;
  color:var(--color-ink); text-decoration:none;
  padding-bottom:2px; border-bottom:2px solid transparent;
  transition:border-color .18s, color .18s;
}
.tb-nav-menu a:hover, .tb-nav-menu a:focus-visible{ border-bottom-color:var(--color-accent); }
.tb-nav-menu .menu-item:last-child{ margin-left:auto; }
.tb-nav-menu .menu-item:last-child a{ color:var(--color-muted); }

.tb-main{ display:block; }
.tb-progress{ display:none; }   /* MOTION 1: no scroll progress bar */

/* ============================================================
   1. HERO - the enlargement (one frame of the roll, blown up)
   ============================================================ */
.ff-hero{ max-width:var(--max-w); margin:0 auto; padding:2.6rem 2rem 0; }
.ff-hero-head{ display:flex; align-items:baseline; gap:1.2rem; margin-bottom:1rem; flex-wrap:wrap; }
.ff-hero-frame{ position:relative; border:1px solid var(--color-hair); }
.ff-hero-shot{ position:relative; }
.ff-hero-shot img{ width:100%; height:clamp(360px,52vw,600px); object-fit:cover; filter:saturate(.94); }
.ff-hero-foot{
  background:var(--color-primary); color:var(--color-bg);
  padding:2rem 2.2rem 2.1rem;
  display:grid; grid-template-columns:1.75fr 1fr; gap:2.6rem; align-items:end;
}
.ff-hero-foot h1{
  font-size:clamp(2.5rem,6.4vw,5.4rem); line-height:.98; margin:.5rem 0 0;
  color:var(--color-bg); letter-spacing:-.012em;
}
.ff-hero-foot h1 a{ color:inherit; text-decoration:none; }
.ff-hero-foot p{
  font-size:.98rem; line-height:1.62; color:rgba(244,231,225,.76);
  margin:0 0 .55rem; max-width:34ch;
}
.ff-cta{
  display:inline-block; background:var(--color-accent); color:var(--color-ink);
  font-size:11px; font-weight:700; letter-spacing:.17em; text-transform:uppercase;
  padding:.72rem 1.5rem; white-space:nowrap; text-decoration:none;
  transition:background .18s;
}
.ff-cta:hover, .ff-cta:focus-visible{ background:var(--color-accent-soft); color:var(--color-ink); }

/* ============================================================
   2. FRAME COUNTER RAIL (dark) - the reference's metadata bar,
      recast with real WP counts
   ============================================================ */
.ff-rail{ background:var(--color-primary-dark); color:var(--color-bg); margin-top:2.6rem; }
.ff-rail-inner{
  max-width:var(--max-w); margin:0 auto; padding:1.15rem 2rem;
  display:flex; flex-wrap:wrap; gap:2.6rem;
}
.ff-rail-item{ display:flex; align-items:baseline; }
.ff-rail-item b{
  font-family:var(--font-serif); font-weight:400; font-size:1.28rem;
  color:var(--color-accent); margin-right:.5rem; letter-spacing:0;
}

/* ============================================================
   3. CONTACT SHEET - the signature grid
   ============================================================ */
.ff-sec{ max-width:var(--max-w); margin:0 auto; padding:clamp(4.2rem,8vw,7.2rem) 2rem 0; }
.ff-sec-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:2rem;
  margin-bottom:1.5rem; padding-bottom:.85rem; border-bottom:1px solid var(--color-hair);
}
.ff-sec-head h2{ font-size:clamp(1.85rem,3.6vw,3rem); line-height:1.02; margin:.35rem 0 0; color:var(--color-ink); }
.ff-more{
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  border-bottom:2px solid var(--color-accent); padding-bottom:2px;
  white-space:nowrap; text-decoration:none; color:var(--color-ink);
}
.ff-more:hover{ color:var(--color-accent-deep); }

.ff-sheet-wrap{
  border-top:1px solid var(--color-hair); border-bottom:1px solid var(--color-hair);
  padding:1.1rem 0; background:var(--color-bg-pale);
}
.ff-sheet{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.35rem 1.1rem;
  padding:1.1rem; align-items:start;
}
.ff-cell{ position:relative; display:block; text-decoration:none; color:inherit; }
.ff-cell-img{ position:relative; overflow:hidden; background:var(--color-primary-soft); aspect-ratio:1/1; }
.ff-cell-img img{ width:100%; height:100%; object-fit:cover; filter:saturate(.9) contrast(1.03); transition:filter .2s; }
.ff-cell:hover .ff-cell-img img{ filter:saturate(1.08) contrast(1); }
.ff-cell.big{ grid-column:span 2; }
.ff-cell.big  .ff-cell-img{ aspect-ratio:1/1; }
.ff-cell.wide{ grid-column:span 2; }
.ff-cell.wide .ff-cell-img{ aspect-ratio:2/1; }
.ff-cell h3{
  font-family:var(--font-sans); font-weight:600; font-size:.95rem; line-height:1.34;
  margin:.3rem 0 0; color:var(--color-ink); letter-spacing:0;
}
.ff-cell.big h3{ font-family:var(--font-serif); font-weight:400; font-size:1.72rem; line-height:1.06; margin-top:.45rem; }
.ff-cell.big p{ font-size:.93rem; color:var(--color-ink-soft); margin:.5rem 0 0; max-width:44ch; }

/* signature: grease-pencil selection mark. Hand-sized, corner-placed.
   Applied to exactly 3 cells of the sheet, nowhere else on the site. */
.ff-cell.mark .ff-cell-img::after{
  content:""; position:absolute; z-index:2; right:7%; bottom:8%;
  width:34%; padding-bottom:26%;
  border:2.5px solid var(--color-grease);
  border-radius:47% 53% 44% 56% / 52% 45% 55% 48%;
  transform:rotate(-6deg); opacity:.92; pointer-events:none;
}
.ff-cell.mark .ff-cell-img::before{
  content:""; position:absolute; z-index:3; right:4%; bottom:5%;
  width:30px; height:2.5px; background:var(--color-grease);
  transform:rotate(-34deg); opacity:.92; pointer-events:none;
}
/* placeholder when a post has no thumbnail: a blank proof frame, never an empty box */
.ff-cell-img.is-blank{ background:var(--color-primary-soft); }
.ff-cell-img.is-blank::after{
  content:"NO FRAME"; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:10.5px; font-weight:600; letter-spacing:.19em; color:var(--color-muted);
}

/* ============================================================
   4. THE DARKROOM - dark split panel + proof strip
   ============================================================ */
.ff-dark{ background:var(--color-primary); color:var(--color-bg); margin-top:clamp(4.2rem,8vw,7.2rem); }
.ff-dark-inner{
  max-width:var(--max-w); margin:0 auto; padding:clamp(3.4rem,6vw,5.4rem) 2rem;
  display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2.4rem,5vw,4.4rem); align-items:center;
}
.ff-dark-inner h2{ font-size:clamp(2rem,3.9vw,3.2rem); line-height:1.03; margin:.55rem 0 1rem; color:var(--color-bg); }
.ff-dark-inner p{ color:rgba(244,231,225,.78); font-size:1rem; margin:0 0 1rem; max-width:48ch; }
.tb-signature, .ff-sig{ font-family:var(--font-serif); font-size:1.12rem; color:var(--color-accent); margin-top:1.5rem; }
.ff-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:.85rem; }
.ff-strip .ff-cell-img{ aspect-ratio:5/6; }
.ff-strip .ff-rub{ border-top-color:rgba(244,231,225,.22); }
.ff-strip h3{ color:var(--color-bg); font-size:.88rem; }
.ff-strip .ff-cap{ color:rgba(244,231,225,.6); }

/* ============================================================
   5. SECTIONS AS ENLARGEMENTS (asymmetric 2fr 1fr 1fr)
   ============================================================ */
.tb-catgrid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:1.25rem; align-items:start; }
.tb-catcard{
  position:relative; border:1px solid var(--color-hair); background:var(--color-bg-pale);
  text-decoration:none; color:inherit; transition:border-color .18s;
}
.tb-catcard img{ width:100%; aspect-ratio:16/10; height:auto; object-fit:cover; filter:saturate(.92); }
.tb-catcard.lead img{ aspect-ratio:5/4; height:auto; }
.tb-catcard-text{ padding:.85rem 1rem 1rem; display:flex; justify-content:space-between; align-items:baseline; gap:.8rem; }
.tb-catcard-name{ font-family:var(--font-serif); font-weight:400; font-size:1.22rem; line-height:1.1; margin:0; color:var(--color-ink); }
.tb-catcard.lead .tb-catcard-name{ font-size:2.05rem; }
.tb-catcard-count{
  font-size:10.5px; font-weight:600; letter-spacing:.19em; text-transform:uppercase;
  color:var(--color-muted); white-space:nowrap;
}
.tb-catcard:hover{ border-color:var(--color-accent); }

/* ============================================================
   6. LATEST PER SECTION - hairline thumbnail rows, 4 columns
   ============================================================ */
.tb-bysection{ display:grid; grid-template-columns:repeat(4,1fr); gap:2.2rem 2rem; }
.tb-bysection-block h3{
  font-family:var(--font-sans); font-weight:700; font-size:11px; letter-spacing:.17em;
  text-transform:uppercase; margin:0 0 .9rem; padding-bottom:.5rem;
  border-bottom:2px solid var(--color-ink);
}
.tb-bysection-block h3 a{ color:var(--color-ink); text-decoration:none; }
.tb-bysection-list{ list-style:none; margin:0; padding:0; }
.tb-bysection-list li{ display:flex; gap:.75rem; padding:.7rem 0; border-bottom:1px solid var(--color-hair); }
.tb-bysection-thumb{ flex:none; width:56px; }
.tb-bysection-thumb img{ width:56px; height:56px; object-fit:cover; filter:saturate(.9); }
.tb-bysection-title{ font-family:var(--font-sans); font-weight:500; font-size:.87rem; line-height:1.34; margin:0 0 .2rem; }
.tb-bysection-title a{ color:var(--color-ink); text-decoration:none; }
.tb-bysection-title a:hover{ color:var(--color-accent-deep); }
.tb-bysection-date{ font-size:10.5px; font-weight:600; letter-spacing:.19em; text-transform:uppercase; color:var(--color-muted); }
.tb-bysection-more{
  display:inline-block; margin-top:.8rem; font-size:10.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
  color:var(--color-ink); border-bottom:2px solid var(--color-accent); padding-bottom:2px;
}

/* ============================================================
   7. NEWSLETTER - ink band, flush left
   ============================================================ */
.tb-newsletter{ background:var(--color-primary-dark); color:var(--color-bg); margin-top:clamp(4.2rem,8vw,7.2rem); }
.tb-newsletter-inner{
  max-width:var(--max-w); margin:0 auto; padding:clamp(3.2rem,6vw,4.8rem) 2rem;
  display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:end;
}
.tb-newsletter-inner h3{ font-size:clamp(1.9rem,3.6vw,2.9rem); line-height:1.04; margin:.5rem 0 .8rem; color:var(--color-bg); }
.tb-newsletter-inner p{ color:rgba(244,231,225,.74); font-size:.96rem; margin:0; max-width:46ch; }
.tb-newsletter-form{ display:flex; gap:0; border:1px solid rgba(244,231,225,.3); }
.tb-newsletter-form input{
  flex:1; background:transparent; border:0; color:var(--color-bg);
  font-family:var(--font-sans); font-size:.95rem; padding:.9rem 1rem; min-width:0;
}
.tb-newsletter-form input::placeholder{ color:rgba(244,231,225,.55); }
.tb-newsletter-form input:focus{ outline:2px solid var(--color-accent); outline-offset:-2px; }
.tb-newsletter-form button{
  background:var(--color-accent); color:var(--color-ink); border:0; cursor:pointer;
  font-family:var(--font-sans); font-weight:700; font-size:11px;
  letter-spacing:.17em; text-transform:uppercase; padding:.9rem 1.6rem;
}
.tb-newsletter-form button:hover{ background:var(--color-accent-soft); }
.tb-newsletter-note{ font-size:11px; color:rgba(244,231,225,.55); margin-top:.7rem; }
.tb-newsletter-note a{ color:inherit; border-bottom:1px solid var(--color-accent); text-decoration:none; }

/* ============================================================
   SINGLE POST
   ============================================================ */
.tb-post-header{ max-width:800px; margin:0 auto; padding:3.2rem 2rem 0; }
.tb-breadcrumb{ font-size:10.5px; font-weight:600; letter-spacing:.19em; text-transform:uppercase; color:var(--color-muted); margin-bottom:1.2rem; }
.tb-breadcrumb a{ color:var(--color-muted); text-decoration:none; }
.tb-breadcrumb a:hover{ color:var(--color-accent-deep); }
.tb-post-cat{ font-size:10.5px; font-weight:600; letter-spacing:.19em; text-transform:uppercase; color:var(--color-accent-deep); }
.tb-post-title{ font-size:clamp(2.1rem,4.6vw,3.5rem); line-height:1.03; margin:.6rem 0 .9rem; color:var(--color-ink); }
.tb-post-meta{ font-size:10.5px; font-weight:600; letter-spacing:.19em; text-transform:uppercase; color:var(--color-muted); padding-top:.7rem; border-top:1px solid var(--color-hair); }
.tb-post-cover{ max-width:var(--max-w); margin:2.2rem auto 0; padding:0 2rem; }
.tb-post-cover img{ width:100%; max-height:600px; object-fit:cover; filter:saturate(.94); }

.entry-content{ max-width:720px; margin:0 auto; padding:2.4rem 2rem 0; font-size:1.06rem; line-height:1.82; }
.entry-content p{ margin:0 0 1.4rem; }
.entry-content h2{ font-size:1.85rem; line-height:1.14; margin:2.6rem 0 1rem; color:var(--color-ink); }
.entry-content h3{ font-family:var(--font-sans); font-weight:700; font-size:1.16rem; margin:2rem 0 .7rem; color:var(--color-ink); letter-spacing:0; }
.entry-content a{ color:var(--color-ink); text-decoration:none; border-bottom:1px solid var(--color-accent); }
.entry-content a:hover{ color:var(--color-accent-deep); }
.entry-content ul, .entry-content ol{ margin:0 0 1.4rem; padding-left:1.2rem; }
.entry-content li{ margin-bottom:.5rem; }
.entry-content blockquote{
  margin:2rem 0; padding:.2rem 0 .2rem 1.4rem;
  border-left:3px solid var(--color-accent);
  font-family:var(--font-serif); font-size:1.32rem; line-height:1.34; color:var(--color-ink);
}
.entry-content img{ margin:1.8rem 0; }

.ftc-disclosure{
  max-width:720px; margin:0 auto 1.8rem; padding:.9rem 1.1rem;
  background:var(--color-bg-deep); border-left:3px solid var(--color-accent);
}
.ftc-disclosure p{ margin:0; font-size:.88rem; line-height:1.6; color:var(--color-ink-soft); }
.ftc-disclosure a{ color:var(--color-ink); border-bottom:1px solid var(--color-accent); text-decoration:none; }

.tb-author-bio{
  max-width:720px; margin:3rem auto 0; padding:1.6rem 0 0;
  border-top:1px solid var(--color-hair); display:flex; gap:1.2rem; align-items:flex-start;
}
.tb-author-avatar{
  flex:none; width:58px; height:58px; background:var(--color-primary); color:var(--color-accent);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-serif); font-size:1.35rem;
}
.tb-author-bio h4{ font-family:var(--font-serif); font-weight:400; font-size:1.32rem; margin:.35rem 0 .45rem; color:var(--color-ink); }
.tb-author-bio p{ font-size:.94rem; margin:0 0 .7rem; color:var(--color-ink-soft); }
.tb-author-bio a{ font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--color-ink); text-decoration:none; border-bottom:2px solid var(--color-accent); padding-bottom:2px; }

.tb-related{ max-width:var(--max-w); margin:0 auto; padding:clamp(3.4rem,7vw,5.6rem) 2rem 0; }
.tb-related h3{ font-size:1.9rem; margin:0 0 1.3rem; padding-bottom:.8rem; border-bottom:1px solid var(--color-hair); color:var(--color-ink); }
.tb-related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.tb-related-card{ text-decoration:none; color:inherit; }
.tb-related-cover{ overflow:hidden; background:var(--color-primary-soft); aspect-ratio:4/3; }
.tb-related-cover img{ width:100%; height:100%; object-fit:cover; filter:saturate(.9); transition:filter .2s; }
.tb-related-card:hover .tb-related-cover img{ filter:saturate(1.06); }
.tb-related-title{ font-family:var(--font-sans); font-weight:600; font-size:.95rem; line-height:1.34; margin:.6rem 0 0; color:var(--color-ink); }

/* ============================================================
   ARCHIVE
   ============================================================ */
.tb-archive-hero{ max-width:var(--max-w); margin:0 auto; padding:3.2rem 2rem 1.6rem; border-bottom:1px solid var(--color-hair); }
.tb-archive-hero h1{ font-size:clamp(2.2rem,4.8vw,3.6rem); line-height:1.02; margin:.4rem 0 .6rem; color:var(--color-ink); }
.tb-archive-hero p{ font-size:1rem; color:var(--color-ink-soft); margin:0; max-width:58ch; }
.tb-archive-feature{ max-width:var(--max-w); margin:0 auto; padding:2.4rem 2rem 0; }
.tb-spread{ display:grid; grid-template-columns:1.5fr 1fr; gap:2.2rem; align-items:center; }
.tb-spread-image{ overflow:hidden; background:var(--color-primary-soft); }
.tb-spread-image img{ width:100%; aspect-ratio:3/2; object-fit:cover; filter:saturate(.92); }
.tb-spread-text h2{ font-size:clamp(1.7rem,3.2vw,2.6rem); line-height:1.05; margin:.5rem 0 .8rem; }
.tb-spread-text h2 a{ color:var(--color-ink); text-decoration:none; }
.tb-spread-excerpt{ font-size:.98rem; color:var(--color-ink-soft); margin:0 0 1rem; }
.tb-spread-read{ font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--color-ink); text-decoration:none; border-bottom:2px solid var(--color-accent); padding-bottom:2px; }
.tb-archive-grid{ max-width:var(--max-w); margin:0 auto; padding:clamp(3rem,6vw,4.6rem) 2rem 0; display:grid; grid-template-columns:repeat(3,1fr); gap:2rem 1.6rem; }
.tb-archive-card{ text-decoration:none; color:inherit; display:block; }
.tb-archive-cover{ overflow:hidden; background:var(--color-primary-soft); aspect-ratio:4/3; }
.tb-archive-cover img{ width:100%; height:100%; object-fit:cover; filter:saturate(.9); transition:filter .2s; }
.tb-archive-card:hover .tb-archive-cover img{ filter:saturate(1.06); }
.tb-archive-meta{ font-size:10.5px; font-weight:600; letter-spacing:.19em; text-transform:uppercase; color:var(--color-muted); margin-top:.6rem; }
.tb-archive-title{ font-family:var(--font-sans); font-weight:600; font-size:1rem; line-height:1.32; margin:.35rem 0 .4rem; color:var(--color-ink); }
.tb-archive-excerpt{ font-size:.92rem; color:var(--color-ink-soft); margin:0; }

.tb-pullquote{ background:var(--color-bg-deep); }
.tb-pullquote-inner{ max-width:900px; margin:0 auto; padding:clamp(3rem,6vw,4.6rem) 2rem; }
.tb-pullquote blockquote{ font-family:var(--font-serif); font-size:clamp(1.5rem,3vw,2.3rem); line-height:1.22; margin:.7rem 0 1rem; color:var(--color-ink); }
.tb-pullquote-source{ font-size:10.5px; font-weight:600; letter-spacing:.19em; text-transform:uppercase; color:var(--color-muted); }
.tb-pullquote-source a{ color:var(--color-accent-deep); text-decoration:none; }

.nav-links, .pagination{ max-width:var(--max-w); margin:3rem auto 0; padding:0 2rem; display:flex; gap:1rem; }
.nav-links a, .pagination a, .pagination .current{
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:.6rem 1rem; border:1px solid var(--color-hair); color:var(--color-ink); text-decoration:none;
}
.pagination .current{ background:var(--color-primary); color:var(--color-bg); border-color:var(--color-primary); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--color-primary); color:var(--color-bg); margin-top:0; }
.site-footer h5{ color:var(--color-accent) !important; }
.site-footer ul li a{ color:var(--color-bg) !important; text-decoration:none !important; }
.site-footer ul li a:hover{ color:var(--color-accent-soft) !important; }

/* ============================================================
   FOCUS VISIBILITY (a11y)
   ============================================================ */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--color-accent); outline-offset:2px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .tb-catgrid{ grid-template-columns:1fr 1fr; }
  .tb-bysection{ grid-template-columns:1fr 1fr; }
  .tb-archive-grid{ grid-template-columns:1fr 1fr; }
  .tb-related-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  .ff-sheet{ grid-template-columns:1fr 1fr; }
  .ff-cell.big{ grid-column:span 2; }
  .ff-cell.big .ff-cell-img{ aspect-ratio:2/1; }
  .ff-hero-foot, .ff-dark-inner, .tb-newsletter-inner, .tb-spread{ grid-template-columns:1fr; gap:1.6rem; }
  .tb-masthead-inner{ flex-wrap:wrap; gap:.7rem; }
  .tb-masthead-meta.right{ margin-left:0; width:100%; }
}
@media (max-width:640px){
  body{ font-size:16px; }
  .ff-sec, .ff-hero, .tb-related, .tb-archive-grid, .tb-archive-feature, .tb-post-cover{ padding-left:1.15rem; padding-right:1.15rem; }
  .tb-masthead-inner, .tb-nav-inner, .ff-rail-inner, .ff-dark-inner, .tb-newsletter-inner, .tb-archive-hero{ padding-left:1.15rem; padding-right:1.15rem; }
  .entry-content, .tb-post-header{ padding-left:1.15rem; padding-right:1.15rem; }
  .ff-sheet{ grid-template-columns:1fr; gap:.9rem; }
  .ff-cell.big, .ff-cell.wide{ grid-column:auto; }
  .ff-cell-img, .ff-cell.big .ff-cell-img, .ff-cell.wide .ff-cell-img{ aspect-ratio:4/3; }
  .tb-catgrid, .tb-bysection, .ff-strip, .tb-archive-grid, .tb-related-grid{ grid-template-columns:1fr; }
  .tb-catcard.lead img, .tb-catcard img{ height:auto; aspect-ratio:16/10; }
  .ff-rail-inner{ gap:1rem; flex-direction:column; }
  .tb-nav-menu{ gap:1rem; }
  .tb-nav-menu .menu-item:last-child{ margin-left:0; }
  .ff-sec-head{ flex-direction:column; align-items:flex-start; gap:.8rem; }
  .tb-author-bio{ flex-direction:column; }
}

/* ============================================================
   TRUST PAGES - "The Proof Print" (page.php)
   Head, contents, h2 marker, identity block and foot are each
   structurally distinct from every other treatment in the fleet.
   ============================================================ */
.ffl-proof-main{ padding-bottom:clamp(3rem,6vw,5rem); }

/* head: full-bleed ink, sprocket top AND bottom, flush LEFT */
.ffl-proof-head{ background:var(--color-primary); color:var(--color-bg); }
.ffl-proof-head-inner{ max-width:var(--max-w); margin:0 auto; padding:clamp(2.8rem,5.5vw,4.4rem) 2rem; text-align:left; }
.ffl-proof-title{
  font-family:var(--font-serif); font-weight:400;
  font-size:clamp(2.2rem,5.2vw,4.2rem); line-height:1.0;
  margin:.55rem 0 0; color:var(--color-bg); max-width:20ch;
}
.ffl-proof-rule{ height:1px; background:var(--color-accent); border:0; margin:1.4rem 0 .8rem; max-width:220px; }
.ffl-proof-updated{
  font-size:10.5px; font-weight:600; letter-spacing:.19em; text-transform:uppercase;
  color:var(--color-accent-soft); margin:0;
}

/* contents: a horizontal proof strip of numbered mini frames */
.ffl-proof-strip{ max-width:var(--max-w); margin:0 auto; padding:2.2rem 2rem 0; }
.ffl-proof-strip-label{ margin-bottom:.8rem; }
.ffl-proof-strip-cells{ display:flex; flex-wrap:wrap; gap:.7rem; }
.ffl-proof-chip{
  display:flex; flex-direction:column; gap:.3rem;
  min-width:132px; flex:0 1 auto; padding:.65rem .8rem .7rem;
  border:1px solid var(--color-hair); background:var(--color-bg-pale);
  text-decoration:none; transition:border-color .18s, background .18s;
}
.ffl-proof-chip:hover, .ffl-proof-chip:focus-visible{ border-color:var(--color-accent); background:var(--color-white); }
.ffl-proof-chip-n{ font-family:var(--font-serif); font-size:1.02rem; line-height:1; color:var(--color-accent-deep); }
.ffl-proof-chip-label{
  font-size:10.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--color-ink); line-height:1.4;
}

/* body */
.ffl-proof-body{ max-width:760px; margin:0; padding:2.4rem 2rem 0; }
.ffl-proof-body > *{ max-width:720px; }

/* h2: a chrome corner tick hung in the left margin, hairline stops short.
   No numbering, no small caps, no filled marker. */
.ffl-proof-body h2{
  position:relative; font-family:var(--font-serif); font-weight:400;
  font-size:clamp(1.5rem,2.9vw,2.1rem); line-height:1.12;
  margin:2.8rem 0 1rem; padding-left:1.5rem; color:var(--color-ink);
  scroll-margin-top:1.5rem;
}
.ffl-proof-body h2::before{
  content:""; position:absolute; left:0; top:.28em;
  width:14px; height:14px; border:2px solid var(--color-accent);
  border-right:0; border-bottom:0;
}
.ffl-proof-body h2::after{
  content:""; display:block; width:64px; height:1px;
  background:var(--color-hair); margin-top:.75rem;
}
.ffl-proof-body h3{
  font-family:var(--font-sans); font-weight:700; font-size:1.08rem;
  margin:1.9rem 0 .6rem; color:var(--color-ink); letter-spacing:0;
}
.ffl-proof-body p{ margin:0 0 1.3rem; }
.ffl-proof-body ul, .ffl-proof-body ol{ margin:0 0 1.4rem; padding-left:1.2rem; }
.ffl-proof-body li{ margin-bottom:.5rem; }
.ffl-proof-body a{ color:var(--color-ink); text-decoration:none; border-bottom:1px solid var(--color-accent); }
.ffl-proof-body a:hover{ color:var(--color-accent-deep); }

/* identity block: blush proof card with a sprocket rail down its LEFT edge */
.ffl-proof-body > p:has(> strong:first-child){
  position:relative; background:var(--color-bg-pale);
  border:1px solid var(--color-hair); border-left:0;
  padding:1.1rem 1.3rem 1.1rem 1.9rem; margin:1.6rem 0;
}
.ffl-proof-body > p:has(> strong:first-child)::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:11px;
  background-color:var(--color-bg-deep);
  background-image:repeating-linear-gradient(0deg, transparent 0 9px, rgba(35,38,43,.34) 9px 16px, transparent 16px 27px);
  background-size:5px 27px; background-repeat:repeat-y; background-position:center;
}
.ffl-proof-body > p:has(> strong:first-child) > strong:first-child{
  display:block; font-family:var(--font-sans); font-weight:700;
  font-size:10.5px; letter-spacing:.19em; text-transform:uppercase;
  color:var(--color-accent-deep); margin-bottom:.25rem;
}

/* foot: the other trust pages as contact-sheet cells */
.ffl-proof-foot{ max-width:var(--max-w); margin:0 auto; padding:clamp(3rem,6vw,4.6rem) 2rem 0; }
.ffl-proof-foot-title{
  font-family:var(--font-serif); font-weight:400; font-size:1.6rem;
  margin:0 0 1.2rem; padding-bottom:.7rem;
  border-bottom:1px solid var(--color-hair); color:var(--color-ink);
}
.ffl-proof-foot-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:.9rem; }
.ffl-proof-foot-cell{
  position:relative; display:block; padding:1.5rem 1rem 1.1rem;
  border:1px solid var(--color-hair); background:var(--color-bg-pale);
  text-decoration:none; transition:border-color .18s, background .18s;
}
.ffl-proof-foot-cell:hover, .ffl-proof-foot-cell:focus-visible{ border-color:var(--color-accent); background:var(--color-white); }
.ffl-proof-foot-cell .ff-tick{ width:14px; height:14px; }
.ffl-proof-foot-cell .ff-tick.tl{ top:7px; left:7px; }
.ffl-proof-foot-cell .ff-tick.br{ bottom:7px; right:7px; }
.ffl-proof-foot-n{ display:block; font-family:var(--font-serif); font-size:1.05rem; color:var(--color-accent-deep); line-height:1; margin-bottom:.4rem; }
.ffl-proof-foot-label{
  display:block; font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--color-ink); line-height:1.4;
}

@media (max-width:640px){
  .ffl-proof-head-inner, .ffl-proof-strip, .ffl-proof-body, .ffl-proof-foot{
    padding-left:1.15rem; padding-right:1.15rem;
  }
  .ffl-proof-chip{ min-width:0; flex:1 1 calc(50% - .35rem); }
  .ffl-proof-foot-grid{ grid-template-columns:1fr 1fr; }
}