/* ============================================================
   Operation Arlene — front page
   Swiss grid · editorial serif · chunky brutalist components
   Adapted from the v4 Claude Design handoff. Asset URLs are
   relative to /assets/css/, pointing to /assets/img/.
   ============================================================ */

:root{
  /* warm neutrals */
  --cream:       #F7F2E8;
  --paper:       #EDE5D3;
  --warm-gray:   #C9BFAC;
  --warm-ink:    #221A12;
  --deep-ink:    #120A04;

  /* primary accent */
  --ink-navy:        #1B2A4E;
  --ink-navy-strong: #0E1A36;

  /* secondary + alert */
  --ochre:#B8761F;
  --rust:#C2410C;
  --white:#FFFFFF;

  /* grid */
  --wide:80rem;        /* 1280px max content */
  --gutter:clamp(1.25rem, 4vw, 3rem);
  --col-gap:24px;

  /* type stacks */
  --ff-display:"Fraunces","Iowan Old Style",Georgia,serif;
  --ff-body:"Source Serif 4","Source Serif Pro",Georgia,serif;
  --ff-ui:"Geist","Inter",system-ui,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--cream);
  color:var(--warm-ink);
  font-family:var(--ff-body);
  font-size:19px;
  line-height:1.65;
  font-variation-settings:"opsz" 18;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* subtle paper texture, 1–2% */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:0;
  background-image:url("../img/paper-noise.svg");
  background-size:240px 240px;
  opacity:.045;
  mix-blend-mode:multiply;
}
main, footer.site-footer{ position:relative; z-index:1; }
/* Masthead gets a higher z-index than main/footer so the mobile drawer
   (descendant) renders above page content. Confirmed by founder via
   browser dev tools 2026-05-20. */
header.masthead{ position:relative; z-index:1000; }

::selection{ background:var(--ink-navy); color:var(--cream); }

a{ color:var(--warm-ink); text-decoration-thickness:1px; text-underline-offset:4px; }
a:hover{ color:var(--ink-navy); }
a:focus-visible{
  outline:2px solid var(--rust);
  outline-offset:2px;
  border-radius:1px;
}
img,svg{ display:block; max-width:100%; }

/* skip link */
.skip{
  position:absolute; left:1rem; top:-3rem;
  background:var(--ink-navy); color:var(--cream);
  padding:.65rem 1rem;
  font-family:var(--ff-ui); font-size:14px; font-weight:600;
  letter-spacing:.04em; text-decoration:none;
  border-radius:4px;
  z-index:100;
  transition:top .15s ease;
}
.skip:focus{ top:1rem; outline:2px solid var(--rust); outline-offset:2px; }

/* ------------------------------------------------------------
   typographic primitives
   ------------------------------------------------------------ */
.smcaps{
  font-family:var(--ff-ui);
  font-weight:600;
  font-size:.8125rem;     /* 13px */
  text-transform:uppercase;
  letter-spacing:.12em;
}
.smcaps--ochre{ color:var(--ochre); }
.smcaps--ink{   color:var(--warm-ink); }
.smcaps--cream{ color:var(--cream); }
.smcaps--navy{  color:var(--ink-navy); }

.eyebrow{
  display:inline-flex; flex-direction:column; gap:.7rem;
  align-items:flex-start;
}
.eyebrow::before{
  content:""; width:3.25rem; height:1px;
  background:var(--warm-gray);
}

/* Roman numerals — graphic anchors, not labels */
.numeral{
  font-family:var(--ff-display);
  font-style:italic;
  font-weight:600;
  font-size:clamp(4rem, 7vw, 6rem);
  line-height:.85;
  color:var(--ink-navy);
  font-variation-settings:"opsz" 144,"SOFT" 50;
  letter-spacing:-.01em;
}
.numeral--cream{ color:var(--cream); }

h1,h2,h3,h4{ margin:0; color:var(--deep-ink); font-family:var(--ff-display); }

h1.hero__title{
  font-weight:600;
  font-size:clamp(4rem, 9vw, 7.5rem);
  line-height:.98;
  letter-spacing:-.022em;
  font-variation-settings:"opsz" 144,"SOFT" 50;
  text-wrap:balance;
  color:var(--deep-ink);
}
h1.hero__title em{
  font-style:italic; font-weight:500;
  font-variation-settings:"opsz" 144,"SOFT" 80;
}
h1.hero__title .line{ display:block; }

.section-title{
  font-family:var(--ff-display);
  font-weight:500;
  font-size:clamp(2.25rem, 4vw, 3rem);
  line-height:1.05;
  letter-spacing:-.012em;
  font-variation-settings:"opsz" 96,"SOFT" 50;
  text-wrap:balance;
}
.section-title em{
  font-style:italic; font-weight:500;
  font-variation-settings:"opsz" 96,"SOFT" 80;
}

h3{
  font-family:var(--ff-display);
  font-weight:500;
  font-size:1.5rem;
  line-height:1.18;
  letter-spacing:-.005em;
  font-variation-settings:"opsz" 36;
}

p{ margin:0 0 1.15em; text-wrap:pretty; }
p:last-child{ margin-bottom:0; }

/* ------------------------------------------------------------
   container + section rules
   ------------------------------------------------------------ */
.container{
  width:100%; max-width:var(--wide);
  margin:0 auto;
  padding:0 var(--gutter);
}

.section-rule{
  height:1px; background:var(--warm-gray);
  max-width:var(--wide);
  margin:0 auto;
}
.section-rule--strong{ height:2px; background:var(--ink-navy); }

/* universal section-head pattern (numeral + title + filling rule) */
.section-head{
  display:flex; align-items:flex-end; gap:clamp(1.25rem,2.5vw,2rem);
  padding-bottom:1.4rem;
  margin-bottom:clamp(2rem, 3.5vw, 3rem);
}
.section-head::after{
  content:"";
  flex:1; height:1px; background:var(--warm-gray);
  margin-bottom:1.1rem;
  align-self:flex-end;
}
.section-head__num{ flex:0 0 auto; align-self:flex-end; margin-bottom:-.1rem; }
.section-head__title{ flex:0 1 auto; align-self:flex-end; }
.section-head--inline{ margin-bottom:0; padding-bottom:0; }
.section-head--inline::after{ display:none; }

.section-head--navy{ }
.section-head--navy::after{ background:rgba(247,242,232,.28); }
.section-head--navy .section-head__title{ color:var(--cream); }

/* ------------------------------------------------------------
   masthead
   ------------------------------------------------------------ */
.masthead{
  padding:1.4rem 0 1.2rem;
  background:var(--cream);
  z-index: 99;
}
.masthead__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem;
}
.masthead__rule{
  height:1px; background:var(--warm-gray);
  max-width:var(--wide);
  margin:0 auto;
}
.masthead__brand{
  display:inline-flex; align-items:center;
  text-decoration:none;
  flex-shrink:0;
}
.masthead__brand-lockup{
  display: block;
  height: 114px;
  width: auto;
  padding: 1rem 1rem 1rem 0px;
  box-sizing: content-box;
}
.masthead__brand-icon{
  display:none;
  height:34px;
  width:auto;
}
.masthead__toggle{
  display:none;
  flex-direction:column; gap:5px;
  width:44px; height:44px;
  align-items:center; justify-content:center;
  background:transparent; border:0; padding:0;
  cursor:pointer;
  z-index: 99999 !important;
}
.masthead__toggle-bar{
  display:block;
  width:24px; height:2px;
  background:var(--ink-navy);
  border-radius:1px;
  transition:transform 180ms ease-out, opacity 180ms ease-out;
}
.masthead__toggle[aria-expanded="true"] .masthead__toggle-bar:nth-child(1){
  transform: translateY(7px) rotate(45deg);
}
.masthead__toggle[aria-expanded="true"] .masthead__toggle-bar:nth-child(2){
  opacity:0;
}
.masthead__toggle[aria-expanded="true"] .masthead__toggle-bar:nth-child(3){
  transform: translateY(-7px) rotate(-45deg);
}
.masthead__nav{
  display:flex; align-items:center; gap:clamp(1.5rem, 3vw, 2.25rem);
}
.masthead__list{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center;
  gap:clamp(1.25rem, 3vw, 2rem);
}
.masthead__item{
  display:flex; align-items:center; gap:.15rem;
  position:relative;
}
.masthead__link,
.masthead__nav a:not(.btn){
  font-family:var(--ff-ui); font-size:.95rem; font-weight:500;
  color:var(--warm-ink); text-decoration:none;
  padding:.5rem 0; position:relative;
  display:inline-block;
  min-height:44px;
  line-height:1.2;
  display:inline-flex;
  align-items:center;
}
.masthead__link::after{
  content:""; position:absolute; left:0; right:0; bottom:.4rem;
  height:1.5px; background:var(--ink-navy);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .22s ease;
}
.masthead__link:hover,
.masthead__link[aria-current="page"]{ color:var(--ink-navy); }
.masthead__link:hover::after,
.masthead__link[aria-current="page"]::after{ transform:scaleX(1); }
.masthead__disclosure{
  background:transparent; border:0; padding:.5rem .25rem;
  cursor:pointer;
  color:var(--warm-ink);
  font-size:1rem;
  line-height:1;
  min-height:44px;
  display:inline-flex; align-items:center;
}
.masthead__disclosure-icon{
  display:inline-block;
  transition: transform 180ms ease-out;
}
.masthead__disclosure[aria-expanded="true"] .masthead__disclosure-icon{
  transform: rotate(180deg);
}
.masthead__submenu{
  list-style:none; margin:0; padding:.6rem 0;
  position:absolute;
  top: 100%;
  left:-.6rem;
  min-width: 16rem;
  background:var(--cream);
  border:1px solid var(--warm-gray);
  border-radius:4px;
  box-shadow: 4px 4px 0 0 var(--ink-navy);
  z-index:40;
  display:none;
}
.masthead__item.is-open .masthead__submenu{ display:block; }
.masthead__submenu li{ margin:0; }
.masthead__submenu a{
  display:block;
  font-family:var(--ff-ui);
  font-size:.95rem;
  font-weight:500;
  color:var(--warm-ink);
  text-decoration:none;
  padding:.75rem 1.2rem;
  min-height:44px;
  line-height:1.4;
}
.masthead__submenu a:hover{
  background:var(--paper);
  color:var(--ink-navy);
}
.masthead__submenu a::after{ display:none; }
.masthead__cta{
  padding:10px 18px;
  min-height:0;
  font-size:.95rem;
  border-radius:4px;
  --shadow-offset:3px;
}
/* drawer-only elements (mobile drawer top brand + CTA). Hidden on desktop.
   Specificity bumped via .masthead__nav prefix so we beat .btn (defined
   later in the file with display:inline-flex). */
.masthead__nav .masthead__drawer-brand,
.masthead__nav .masthead__drawer-cta{ display:none; }
body.has-nav-open{ overflow:hidden; }
@media (max-width: 860px){
  .masthead{ padding:1.1rem 0 1.3rem; }
  .masthead__brand-lockup{ height:68px; padding:.25rem 0 .55rem; }
  .masthead__toggle{ display:flex; position:relative; z-index:60; }
  /* Mobile drawer. !important on structural properties because
     LearnDash / Gravity Forms / other plugin stylesheets load alongside
     ours and were clobbering background / position. The drawer needs
     to read as a solid panel above page content unconditionally. */
  .masthead .masthead__nav{
    position:fixed !important;
    inset:0 !important;
    background:var(--cream) !important;
    z-index:9000 !important;
    display:none;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    padding:1.4rem 1.8rem 2rem !important;
    gap:1.4rem !important;
    overflow-y:auto !important;
    width:auto !important;
    height:auto !important;
    margin:0 !important;
  }
  .masthead .masthead__nav.is-open{ display:flex !important; }

  /* drawer top: brand + bright CTA before nav items.
     Specificity bumped via .masthead__nav prefix so we beat .btn. */
  .masthead__nav .masthead__drawer-brand{
    display:inline-block;
    padding:.4rem 0 .6rem;
  }
  .masthead__nav .masthead__drawer-brand img{
    display:block; height:46px; width:auto;
  }
  .masthead__nav .masthead__drawer-cta{
    display:inline-flex;
    align-self:stretch;
    justify-content:center;
    text-align:center;
    font-size:1.05rem;
    padding:14px 22px;
    min-height:52px;
  }

  /* desktop CTA hidden in drawer (drawer has its own bright CTA up top).
     Specificity bumped to beat .btn. */
  .masthead__nav .masthead__cta{ display:none; }

  /* nav list: stack, expand children inline (no nested accordion) */
  .masthead__list{
    flex-direction:column;
    align-items:stretch;
    gap:.4rem;
    width:100%;
    padding-top:.6rem;
    border-top:1px solid var(--warm-gray);
  }
  .masthead__item{
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  .masthead__link{
    font-size:1.25rem;
    padding:.7rem 0;
    min-height:48px;
  }
  .masthead__link::after{ display:none; }
  /* hide the disclosure button; mobile shows children inline */
  .masthead__disclosure{ display:none; }
  /* submenu always visible inline on mobile */
  .masthead__submenu{
    position:static;
    display:block;
    background:transparent;
    border:0;
    box-shadow:none;
    padding:0 0 .8rem 1.1rem;
    border-left:2px solid var(--warm-gray);
    margin-left:.2rem;
    min-width:0;
  }
  .masthead__submenu a{
    font-size:1.05rem;
    padding:.55rem 0;
    min-height:44px;
  }
  .masthead__submenu a:hover{ background:transparent; }
}

/* ------------------------------------------------------------
   BUTTONS — chunky brutalist with hard offset shadows
   ------------------------------------------------------------ */
.btn{
  --shadow-color: var(--ink-navy-strong);
  --shadow-offset: 4px;
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--ff-ui);
  font-weight:600;
  font-size:1.0625rem;        /* 17px */
  letter-spacing:.005em;
  line-height:1;
  padding:18px 32px;
  min-height:56px;
  border-radius:4px;
  text-decoration:none;
  cursor:pointer;
  position:relative;
  transition:transform 120ms ease-out, box-shadow 120ms ease-out, background-color 120ms ease-out;
  will-change:transform;
}
.btn .arr{
  display:inline-block;
  transition:transform 180ms ease-out;
  font-weight:500;
}
.btn:hover .arr{ transform:translateX(3px); }
.btn:focus-visible{
  outline:2px solid var(--rust);
  outline-offset:2px;
}

/* primary — ink navy fill */
.btn--primary{
  background:var(--ink-navy);
  color:var(--cream);
  border:2px solid var(--ink-navy-strong);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--ink-navy-strong);
}
.btn--primary:hover{
  background:var(--ink-navy-strong);
  color:var(--cream);
  transform:translate(2px,2px);
  box-shadow: 2px 2px 0 0 var(--ink-navy-strong);
}
.btn--primary:active{
  transform:translate(4px,4px);
  box-shadow: 0 0 0 0 var(--ink-navy-strong);
}

/* ghost (tertiary) — cream fill, navy border + shadow */
.btn--ghost{
  background:var(--cream);
  color:var(--ink-navy);
  border:2px solid var(--ink-navy);
  box-shadow: 4px 4px 0 0 var(--ink-navy);
}
.btn--ghost:hover{
  background:var(--cream);
  color:var(--ink-navy-strong);
  transform:translate(2px,2px);
  box-shadow: 2px 2px 0 0 var(--ink-navy);
}
.btn--ghost:active{
  transform:translate(4px,4px);
  box-shadow: 0 0 0 0 var(--ink-navy);
}

/* inverted for navy blocks — cream fill, cream border + cream shadow */
.btn--inverted{
  background:var(--cream);
  color:var(--ink-navy);
  border:2px solid var(--cream);
  box-shadow: 4px 4px 0 0 var(--cream);
}
.btn--inverted:hover{
  background:var(--cream);
  color:var(--ink-navy-strong);
  transform:translate(2px,2px);
  box-shadow: 2px 2px 0 0 var(--cream);
}
.btn--inverted:active{
  transform:translate(4px,4px);
  box-shadow: 0 0 0 0 var(--cream);
}

/* secondary — underlined text link, no chrome */
.tlink{
  font-family:var(--ff-ui); font-weight:500;
  font-size:1rem;
  color:var(--warm-ink);
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:5px;
  text-decoration-color:var(--ink-navy);
  display:inline-flex; align-items:center; gap:.4em;
  padding:.35rem 0;
}
.tlink:hover{
  color:var(--ink-navy-strong);
  text-decoration-thickness:2.5px;
  text-decoration-color:var(--ink-navy-strong);
}
.tlink--cream{
  color:var(--cream);
  text-decoration-color:rgba(247,242,232,.5);
}
.tlink--cream:hover{
  color:var(--cream);
  text-decoration-color:var(--cream);
}

/* ------------------------------------------------------------
   TAGS — chunky channel labels
   ------------------------------------------------------------ */
.tag{
  display:inline-block;
  font-family:var(--ff-ui); font-weight:600;
  font-size:.75rem;          /* 12px */
  line-height:1;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--cream);
  padding:5px 10px;
  border-radius:2px;
  background:var(--warm-ink);
}
.tag--ochre{ background:var(--ochre); }
.tag--rust{  background:var(--rust); }

/* ------------------------------------------------------------
   photo placeholder
   ------------------------------------------------------------ */
.photo{
  position:relative; width:100%;
  background:
    linear-gradient(135deg, #E6D9C0 0%, #D4BE9A 55%, #B89972 100%);
  overflow:hidden;
  border-radius:2px;
}
.photo--portrait{ aspect-ratio:4/5; }
.photo--circle{ width:80px; height:80px; aspect-ratio:1/1; border-radius:50%; flex-shrink:0; }
.photo::before{
  content:""; position:absolute; inset:0;
  border:1px solid rgba(34,26,18,.12);
  border-radius:inherit;
  pointer-events:none; z-index:2;
}
.photo::after{
  content:""; position:absolute; inset:0;
  background-image:url("../img/paper-noise.svg");
  background-size:220px;
  opacity:.22; mix-blend-mode:multiply;
  pointer-events:none;
}
.photo__label{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:1.5rem;
}
.photo__label span{
  font-family:var(--ff-display); font-style:italic;
  font-size:.95rem; line-height:1.45;
  color:rgba(34,26,18,.78);
  max-width:18rem;
  font-variation-settings:"opsz" 24;
}
.photo__label span::before{
  content:"[ photograph ]";
  display:block; font-family:var(--ff-ui); font-style:normal;
  font-weight:600; font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(34,26,18,.55);
  margin-bottom:.85rem;
}
.photo__label--sm{ padding:.5rem; }
.photo__label--sm span{ font-size:.7rem; line-height:1.3; }
.photo__label--sm span::before{ content:""; margin:0; display:none; }

/* caption block under hero photo */
.caption-block{ margin-top:1rem; }
.caption-block .hr{ height:1px; background:var(--warm-gray); margin-bottom:1rem; }
.caption{
  font-family:var(--ff-display); font-style:italic;
  font-size:.95rem; line-height:1.5; color:var(--warm-ink);
  margin:0;
  font-variation-settings:"opsz" 18,"SOFT" 60;
}
.signature{ display:inline-block; margin-top:.9rem; width:140px; opacity:.92; }
.signature--sm{ width:110px; }


/* ------------------------------------------------------------
   I. HERO
   ------------------------------------------------------------ */
.hero{ padding: clamp(2.5rem,5vw,4.5rem) 0 clamp(5rem,9vw,8rem); }
.hero__grid{
  display:grid;
  /* 7/5 split at desktop — asymmetric, not 50/50 */
  grid-template-columns: 7fr 5fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items:start;
}
.hero__eyebrow{ margin-bottom:2.5rem; }
.hero__title{ margin:0 0 1.8rem; }
.hero .lede{
  font-family:var(--ff-body);
  font-style:italic; font-weight:400;
  font-size:1.375rem; line-height:1.5;
  color:var(--warm-ink);
  max-width:34rem;
  margin:0 0 2.6rem;
  font-variation-settings:"opsz" 30;
}
.hero__ctas{
  display:flex; flex-direction:column;
  align-items:flex-start; gap:1.4rem;
}

/* ------------------------------------------------------------
   II. MISSION  (paper section, chapter-break air)
   ------------------------------------------------------------ */
.mission{
  background:var(--paper);
  padding: clamp(6rem, 12vw, 11rem) 0 clamp(5rem, 10vw, 9rem);
}
.mission__grid{
  display:grid;
  grid-template-columns: 1fr;
  /* per brief: prose in cols 2–7 of 12; left-indented, never full width */
  padding-left: clamp(0rem, 7vw, 5rem);
}
.mission__body{ max-width: 42rem; }
.mission__body p{
  font-family:var(--ff-body);
  font-size:1.1875rem;   /* 19px */
  line-height:1.65;
  color:var(--warm-ink);
}
.mission__body p:first-of-type::first-letter{
  font-family:var(--ff-display);
  font-weight:800;
  color:var(--ink-navy);
  float:left;
  font-size:5rem;
  line-height:.82;
  padding:.45rem .5rem 0 0;
  font-variation-settings:"opsz" 144,"SOFT" 30;
}
.mission__body .closer{
  margin-top:1.8rem;
  padding-left:1.4rem;
  border-left:2px solid var(--ink-navy);
  font-family:var(--ff-display); font-style:italic;
  font-size:1.25rem; line-height:1.4;
  color:var(--ink-navy);
  font-variation-settings:"opsz" 36,"SOFT" 60;
}

.mission__sig{
  margin-top:3.5rem;
  padding-top:1.8rem;
  border-top:1px solid var(--warm-gray);
  display:flex; align-items:center;
  gap:1.4rem; flex-wrap:wrap;
}
.mission__sig .meta{
  display:flex; flex-direction:column; gap:.25rem;
  flex:1; min-width:11rem;
}
.mission__sig .meta .name{
  font-family:var(--ff-ui); font-weight:600;
  font-size:.8125rem; letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--warm-ink);
}
.mission__sig .meta .role{
  font-family:var(--ff-display); font-style:italic;
  font-size:1.05rem; color:var(--warm-ink); line-height:1.4;
  font-variation-settings:"opsz" 18,"SOFT" 60;
}
.mission__sig .signature{ margin-left:auto; margin-top:0; }

/* ------------------------------------------------------------
   III. WAYS
   ------------------------------------------------------------ */
.ways{ padding: clamp(5rem, 8vw, 7rem) 0 clamp(5rem, 9vw, 8rem); }
.ways__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0;
}
.way{
  padding: .25rem clamp(1.25rem, 2.5vw, 2rem) .25rem 0;
  display:flex; flex-direction:column;
}
.way + .way{
  padding-left: clamp(1.5rem, 2.5vw, 2.25rem);
  border-left:1px solid var(--warm-gray);
}
.way__num{
  font-family:var(--ff-display);
  font-style:italic;
  font-weight:500;
  font-size:2rem;
  line-height:1;
  color:var(--ochre);
  margin-bottom:1.4rem;
  font-variation-settings:"opsz" 36,"SOFT" 60;
}
.way h3{
  margin-bottom:1rem;
  max-width:16rem;
  color:var(--deep-ink);
}
.way__blurb{
  font-family:var(--ff-display); font-style:italic;
  font-size:1.0625rem; line-height:1.5;
  color:var(--warm-ink);
  margin:0 0 1.6rem; max-width:22rem;
  font-variation-settings:"opsz" 18,"SOFT" 60;
}
.way__cta{
  margin-top:auto; align-self:flex-start;
  font-family:var(--ff-ui); font-weight:500;
  font-size:.95rem;
  color:var(--ink-navy);
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:5px;
  text-decoration-color:var(--ink-navy);
  display:inline-flex; align-items:center; gap:.4em;
  padding:.2rem 0;
}
.way__cta:hover{
  color:var(--ink-navy-strong);
  text-decoration-thickness:2.5px;
}

/* ------------------------------------------------------------
   IV. WEEK  (paper)
   ------------------------------------------------------------ */
.week{
  background:var(--paper);
  padding: clamp(5rem, 9vw, 8rem) 0 clamp(5rem, 9vw, 7rem);
}
.week__masthead{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:2rem;
  padding-bottom:1.4rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  border-bottom:1px solid var(--warm-gray);
  flex-wrap:wrap;
}
.week__masthead .section-head{ flex:1; min-width:0; }
.week__dateline{
  padding-bottom:.55rem;
  white-space:nowrap;
}
.week__rail{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
}
.entry{
  display:flex; flex-direction:column;
  min-width:0;
  min-height:14rem;
  padding:0 1.25rem 0 0;
}
.entry + .entry{
  padding-left:1.25rem;
  border-left:1px solid var(--warm-gray);
}
.entry .tag{ margin-bottom:1.1rem; align-self:flex-start; }
.entry h3{
  font-size:1.2rem; line-height:1.2;
  margin:0 0 .7rem;
  font-variation-settings:"opsz" 36,"SOFT" 50;
  text-wrap:balance;
}
.entry__desc{
  font-family:var(--ff-display); font-style:italic;
  font-size:1rem; line-height:1.45;
  color:var(--warm-ink);
  margin:0 0 1.4rem;
  font-variation-settings:"opsz" 18,"SOFT" 60;
}
.entry__date{
  margin-top:auto;
  font-size:.72rem;
  opacity:.85;
}

.week__foot{
  margin-top:2.4rem;
  display:flex; justify-content:flex-end;
}

/* ------------------------------------------------------------
   V. PULL QUOTE  (Ink Navy full-bleed block)
   ------------------------------------------------------------ */
.pullquote{
  background:var(--ink-navy);
  color:var(--cream);
  padding: clamp(6rem, 11vw, 11rem) 0 clamp(6rem, 11vw, 11rem);
  position:relative;
}
.pullquote__inner{
  max-width:62rem;
  position:relative;
}
.pullquote__numeral{
  position:absolute;
  left:var(--gutter); top:-.5rem;
  color:var(--cream);
  opacity:.85;
  font-size:clamp(3.5rem, 6vw, 5rem);
}
.pullquote__mark{
  display:block;
  font-family:var(--ff-display); font-style:italic; font-weight:500;
  font-size:clamp(5rem, 9vw, 7.5rem);
  line-height:.6;
  color:var(--ochre);
  margin: .25rem 0 1.5rem -.3rem;
  font-variation-settings:"opsz" 144,"SOFT" 100;
}
.pullquote__text{
  font-family:var(--ff-display); font-style:italic; font-weight:400;
  font-size:clamp(2rem, 4vw, 3.5rem);
  line-height:1.18;
  color:var(--cream);
  margin: 0 0 2rem;
  max-width:54rem;
  text-wrap:balance;
  font-variation-settings:"opsz" 96,"SOFT" 70;
}
.pullquote__attr{ display:inline-block; }

/* ------------------------------------------------------------
   VI. HELPER  (second Ink Navy block)
   ------------------------------------------------------------ */
.helper{
  background:var(--ink-navy);
  color:var(--cream);
  padding: clamp(5rem, 10vw, 9rem) 0 clamp(5rem, 10vw, 9rem);
  position:relative;
}
.helper .section-title{ color:var(--cream); }
.helper__inner{
  max-width:46rem;
  margin-left: clamp(0rem, 6vw, 5rem);
}
.helper__body{
  font-family:var(--ff-body);
  font-size:1.1875rem;
  line-height:1.6;
  color:var(--cream);
  max-width:38rem;
  margin: 0 0 2.4rem;
}
.helper__ctas{
  display:flex; gap:1.6rem;
  align-items:center; flex-wrap:wrap;
}

/* ------------------------------------------------------------
   VII. COURSE
   ------------------------------------------------------------ */
.course{
  background:var(--cream);
  padding: clamp(6rem, 11vw, 10rem) 0 clamp(5rem, 10vw, 9rem);
}
.course__grid{
  display:grid;
  /* Equal split — jacket and prose both get breathing room. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items:start;
}
.course__copy{ padding-top:.5rem; }
.course__lede{
  font-family:var(--ff-body);
  font-size:1.1875rem; line-height:1.6;
  color:var(--warm-ink);
  max-width:30rem;
  margin: 0 0 2rem;
}
.course__promises{
  margin: 0 0 2.4rem;
  padding-left:1.4rem;
  border-left:2px solid var(--ink-navy);
  display:flex; flex-direction:column; gap:.45rem;
}
.course__promises span{
  font-family:var(--ff-display);
  font-style:italic;
  font-size:1.25rem; line-height:1.4;
  color:var(--ink-navy);
  font-variation-settings:"opsz" 36,"SOFT" 60;
}
.course__promises em{ font-style:italic; font-weight:500; }

/* book jacket card — the only true card on the page */
.jacket{
  background:var(--paper);
  border:2px solid var(--warm-ink);
  padding: clamp(2rem, 3.5vw, 3rem);
  box-shadow: 6px 6px 0 0 var(--ink-navy);
  border-radius:2px;
  position:relative;
}
.jacket__eyebrow{ display:block; margin-bottom:1.6rem; }
.jacket__title{
  font-family:var(--ff-display);
  font-weight:600;
  color:var(--deep-ink);
  font-size:clamp(2rem, 3.4vw, 2.5rem);
  line-height:1.02;
  letter-spacing:-.012em;
  margin: 0 0 2rem;
  font-variation-settings:"opsz" 96,"SOFT" 50;
  text-wrap:balance;
}
.toc{
  list-style:none; padding:0;
  margin: 0 0 2rem;
  border-top:1px solid var(--warm-gray);
}
.toc li{
  display:flex; align-items:baseline;
  padding:.65rem 0;
  border-bottom:1px solid var(--warm-gray);
  font-family:var(--ff-body);
  font-size:1rem;
  color:var(--warm-ink);
}
.toc__num{
  font-family:var(--ff-display); font-style:italic;
  color:var(--ochre);
  width:1.8rem; flex-shrink:0;
  font-variation-settings:"opsz" 18,"SOFT" 70;
}
.toc__ttl{ flex:0 1 auto; min-width:0; padding-right:.5rem; }
.toc__dots{
  flex:1; height:1em; overflow:hidden;
  margin:0 .4rem; position:relative;
  min-width:0; /* flex-item min-content fix: nowrap dots refused to shrink, pushing toc rows wider than the jacket on mobile */
}
.toc__dots::before{
  content:". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .";
  display:block;
  white-space:nowrap;
  color:var(--warm-gray);
  letter-spacing:2px;
  transform:translateY(-.25em);
}
.toc__time{
  font-family:var(--ff-ui);
  font-variant-numeric: tabular-nums;
  font-size:.8125rem;
  letter-spacing:.02em;
  color:var(--warm-ink); opacity:.7;
  flex-shrink:0;
}
.toc__final{ font-family:var(--ff-display); font-style:italic; }
.toc__final .toc__num{ color:var(--ink-navy); }
.toc__final .toc__ttl{ font-style:italic; }

.jacket__foot{
  display:flex; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  align-items:baseline;
  padding-top:.4rem;
}

/* ------------------------------------------------------------
   VIII. BRIEFING
   ------------------------------------------------------------ */
.briefing{
  padding: clamp(5rem, 10vw, 9rem) 0 clamp(5rem, 9vw, 8rem);
}
.briefing__inner{
  max-width: 42rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align:left;
}
.briefing .eyebrow{ margin-bottom:1.4rem; }
.briefing__title{
  font-family:var(--ff-display);
  font-weight:600;
  font-size:clamp(2.25rem, 4.5vw, 3.25rem);
  line-height:1.05;
  letter-spacing:-.012em;
  color:var(--deep-ink);
  margin: 0 0 1.3rem;
  text-wrap:balance;
  font-variation-settings:"opsz" 96,"SOFT" 50;
  max-width:34rem;
}
.briefing__lede{
  font-family:var(--ff-display);
  font-size:1.15rem;
  line-height:1.45;
  color:var(--warm-ink);
  margin: 0 0 2.4rem;
  font-variation-settings:"opsz" 24,"SOFT" 60;
}
.briefing__lede em{ font-style:italic; font-weight:400; }

.briefing__form{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:1rem;
  align-items:end;
}
.field{ display:flex; flex-direction:column; gap:.6rem; }
.field label{
  font-family:var(--ff-ui);
  font-weight:600;
  font-size:.875rem;
  letter-spacing:.04em;
  color:var(--warm-ink);
}
.field input{
  font-family:var(--ff-ui);
  font-size:1.0625rem;
  padding:16px 18px;
  min-height:56px;
  background:var(--white);
  color:var(--warm-ink);
  border:2px solid var(--warm-ink);
  border-radius:4px;
  width:100%;
}
.field input::placeholder{ color:rgba(34,26,18,.45); }
.field input:focus{
  outline:2px solid var(--rust);
  outline-offset:2px;
  border-color:var(--ink-navy-strong);
}
.briefing__form .btn{ align-self:end; }
.briefing__legal{
  font-family:var(--ff-display);
  font-style:italic;
  font-size:.95rem;
  color:var(--warm-ink); opacity:.78;
  margin: 1.2rem 0 0;
  font-variation-settings:"opsz" 18,"SOFT" 60;
}
.briefing__legal em{ font-style:italic; }
.briefing__sig{ margin-top:1.6rem; }
.briefing__sig img{ display:inline-block; }

/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */
.site-footer{
  border-top:2px solid var(--ink-navy);
  padding: 3rem 0 3.2rem;
  background:var(--cream);
}
.footer__grid{
  display:grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items:start;
}
@media (max-width: 1100px){
  .footer__grid{ grid-template-columns: 1fr 1fr; }
  .footer__col--brand{ grid-column: 1 / -1; }
}
.footer__brand{ display:inline-block; }
.footer__brand-img{ display:block; height:30px; width:auto; }
.footer__tag{
  font-family:var(--ff-display); font-style:italic;
  font-size:1.05rem; color:var(--warm-ink);
  margin: 1rem 0 1.1rem;
  max-width:22rem;
  font-variation-settings:"opsz" 24,"SOFT" 60;
}
.footer__heading{
  font-family:var(--ff-ui); font-weight:600;
  font-size:.75rem; letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--warm-ink); opacity:.6;
  margin-bottom:1.1rem;
}
.footer__col ul{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:.65rem;
}
.footer__col a{
  font-family:var(--ff-ui); font-size:.95rem; font-weight:500;
  color:var(--warm-ink);
  text-decoration:underline;
  text-decoration-color:var(--warm-gray);
  text-underline-offset:4px;
}
.footer__col a:hover{
  color:var(--ink-navy);
  text-decoration-color:var(--ink-navy);
}
.footer__col li.copy{
  font-family:var(--ff-ui); font-size:.9rem;
  color:var(--warm-ink); opacity:.7;
  margin-top:.6rem;
}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 980px){
  body{ font-size:18px; }

  h1.hero__title{ font-size:clamp(3rem, 11vw, 4.5rem); }
  .numeral{ font-size:clamp(3rem, 9vw, 4.5rem); }

  .hero__grid{ grid-template-columns:1fr; gap:2.5rem; }
  .hero__aside{ order:2; max-width:16rem; }
  .hero__col{ order:1; }

  /* Drop the hanging-italic offset on "taught by" — at narrow widths the
     -.4em pull reads as an alignment bug, not an editorial flourish. */
  .hero__title .line--hang{ margin-left:0; }

  /* Signatures sit larger on mobile so they read at arm's-length on a phone.
     Roughly 1.6x the desktop sizes. */
  .signature{ width:220px; }
  .signature--sm{ width:180px; }

  /* Defensive: keep grid items from overflowing their column when content
     min-width exceeds the column's intrinsic min size. Paired with the
     .toc__dots min-width:0 fix; either alone would also work, both is belt-and-braces. */
  .course__grid > *{ min-width:0; }

  .mission__grid{ padding-left:0; }

  .ways__grid{ grid-template-columns:1fr; gap:0; }
  .way{ padding:1.75rem 0; border-bottom:1px solid var(--warm-gray); }
  .way + .way{ padding-left:0; border-left:0; }
  .way:last-child{ border-bottom:0; }

  .week__rail{ grid-template-columns:1fr 1fr; }
  .entry{ min-height:auto; padding:0 1.25rem 1.5rem 0; }
  .entry + .entry{ padding-left:1.25rem; }
  .entry:nth-child(3), .entry:nth-child(4){
    padding-top:1.5rem;
    border-top:1px solid var(--warm-gray);
  }
  .entry:nth-child(3){ padding-left:0; border-left:0; }

  .pullquote__numeral{ position:static; display:block; margin-bottom:1rem; }

  .helper__inner{ margin-left:0; }

  .course__grid{ grid-template-columns:1fr; gap:3rem; }

  .footer__grid{ grid-template-columns:1fr; gap:2.2rem; }
}

@media (max-width: 560px){
  .numeral{ font-size:clamp(2.5rem, 12vw, 3.5rem); }
  h1.hero__title{ font-size:clamp(2.5rem, 13vw, 3.5rem); }

  .week__masthead{ flex-direction:column; align-items:flex-start; gap:1rem; }
  .week__rail{ grid-template-columns:1fr; }
  .entry{ padding:0 0 1.5rem; min-height:auto; }
  .entry + .entry{
    padding-left:0; border-left:0;
    padding-top:1.5rem; border-top:1px solid var(--warm-gray);
  }
  .entry:nth-child(3), .entry:nth-child(4){
    padding-top:1.5rem;
    border-top:1px solid var(--warm-gray);
  }

  .pullquote__text{ font-size:clamp(1.6rem, 7vw, 2.2rem); }

  .briefing__form{ grid-template-columns:1fr; }
  .briefing__form .btn{ width:100%; justify-content:center; }

  .btn{ font-size:1rem; padding:16px 24px; min-height:52px; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    transition:none !important;
    animation:none !important;
  }
  .btn:hover, .btn:active{ transform:none; }
}

/* ============================================================
   V4 LAYER
   Authored editorial moves applied on top of the v3 system.
   Order: print primitives → signature mark → section heads →
   bleeding II → marginalia → hero/photo overlap → pull quote V →
   reader photo → folios → fleuron → footer separators → mobile.
   ============================================================ */

/* ── enclosing sheet rules: 1px Ink Navy top & bottom of viewport ── */
.sheet-rule{
  height:1px; width:100%;
  background:var(--ink-navy);
  position:relative; z-index:2;
}
.sheet-rule--bottom{ margin-top:0; }

/* ── print primitives ── */
html{ hanging-punctuation: first allow-end last; }
body{
  font-kerning:normal;
  font-feature-settings:"kern" 1, "liga" 1, "calt" 1, "onum" 1;
}
/* small-caps with real OT smcp */
.smcaps{ font-feature-settings:"smcp" 1, "c2sc" 1, "kern" 1, "calt" 1; }
/* book-jacket TOC uses lining tabular figures */
.toc{ font-feature-settings:"lnum" 1, "tnum" 1, "kern" 1; }
.toc__time{ font-feature-settings:"lnum" 1, "tnum" 1; }
/* old-style figures for the periodical Vol / No / date line */
.week__dateline{ font-feature-settings:"onum" 1, "kern" 1, "smcp" 1; letter-spacing:.08em; }

/* ── signature mark (✺) helpers ── */
.way__mark,
.closer__mark,
.meta__mark,
.margin-note__mark,
.reader-photo__mark,
.footer__rule-mark{
  color:var(--ochre);
  font-family:var(--ff-display);
  font-style:normal;
  font-weight:400;
  line-height:1;
}

/* ── hero headline hanging italics ── */
.hero__title{ position:relative; }
.hero__title .line{ display:block; }
/*.hero__title .line--hang{ margin-left:-.4em; }   /* hanging italics */*/
.hero__title .line--end{ /* hanging-punctuation: last handles the period */ }
/* a graceful safety-net for browsers that don't support hanging-punctuation:
   the period gets very slightly nudged right via padding so the optical edge
   reads cleanly even without browser support */
@supports not (hanging-punctuation: first){
  .hero__title .line--end{ text-indent:0; }
}

/* ── hero: photo overlap into mission ── */
.hero{ position:relative; z-index:2; }
.hero__grid{ align-items:start; }
.hero__aside{ position:relative; z-index:3; }
.photo--overlap{
  margin-bottom: clamp(-3rem, -4vw, -2rem); /* falls into mission */
  position:relative;
  box-shadow: 0 2px 0 0 var(--paper);       /* visual seam: image meets paper */
}
.photo--overlap::before{
  /* slight tonal lift so the photo edge reads above the section join */
  box-shadow: 0 18px 36px -18px rgba(18,10,4,.35);
  border-radius:inherit;
}
/* The caption block (rule + italic caption + signature) now lives at the
   top of the Mission section, continuing the photo's column. */
.mission{ position:relative; }
.mission__container{
  position:relative;
  display:grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items:start;
}
.mission__container > .mission__caption{
  grid-column: 2 / 3;
  grid-row: 1;
  margin-top: 0;             /* sits immediately under photo overlap */
  align-self:start;
}
.mission__head{
  grid-column: 1 / 2;
  grid-row: 1;
  padding-top: clamp(.5rem, 2vw, 2rem);
}
.mission__grid{
  grid-column: 1 / -1;
  grid-row: 2;
  display:grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  padding-left: clamp(0rem, 7vw, 5rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.mission__title{
  font-size: clamp(2.5rem, 4.5vw, 3.5rem);
  line-height: 1.04;
  max-width: 18ch;
  padding-left: clamp(0rem, 7vw, 5rem);
}
.mission__body{ grid-column: 1 / 2; max-width: 42rem; }
.mission__margin{ grid-column: 2 / 3; }

/* ── the bleeding II numeral ── */
.mission__bleed{
  position:absolute;
  left: calc(-1 * var(--gutter) - 2vw);
  top: clamp(1rem, 3vw, 3rem);
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(8rem, 14vw, 14rem);
  line-height: .78;
  color: var(--ink-navy);
  opacity: .9;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  letter-spacing: -.04em;
  pointer-events:none;
  user-select:none;
  z-index:1;
}

/* ── marginalia / margin-note ── */
.margin-note{
  max-width: 17rem;
  font-family: var(--ff-ui);
  font-size: .8125rem;
  line-height: 1.45;
  color: color-mix(in oklab, var(--warm-ink) 75%, transparent);
}
.margin-note p{ margin: 0; }
.margin-note strong{ font-weight:600; color:var(--warm-ink); }
.margin-note__mark{
  font-size: 1em;
  margin-right: .25em;
  vertical-align: baseline;
}
.mission__margin{
  padding-top: 4.5rem;           /* top-aligned with second paragraph */
  padding-left: clamp(1rem, 2vw, 2rem);
  border-left: 1px solid var(--warm-gray);
  align-self:start;
}
.course__margin{
  margin-top: 2.4rem;
  padding-left: 1rem;
  border-left: 1px solid var(--warm-gray);
  max-width: 22rem;
}

/* ── mission closer & signature ✺ tweaks ── */
.mission__body .closer{
  position:relative;
}
.closer__mark{
  display:inline-block;
  margin-left: -1.4rem;
  margin-right: .5rem;
  font-size: 1em;
  vertical-align: .05em;
}
.mission__sig .meta .name{
  display:inline-flex; align-items:baseline; flex-wrap:wrap; gap:.55rem;
}
.meta__mark{
  font-size: .9em;
  letter-spacing:0;
  text-transform:none;
  color:var(--ochre);
}
.meta__role{
  font-family:var(--ff-display); font-style:italic;
  font-size:1.05rem; line-height:1.4;
  letter-spacing:0; text-transform:none;
  color:var(--warm-ink);
  font-variation-settings:"opsz" 18,"SOFT" 60;
  font-weight:400;
}
.mission__sig .meta{ gap:.1rem; }

/* ── III. WAYS: stacked section-head ── */
.section-head--stacked{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  text-align:left;
  gap: 1.2rem;
  padding-bottom: 1.6rem;
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
  width:100%;
}
.section-head--stacked::after{ display:none; }
.section-head--stacked .numeral{
  font-style:italic;
  font-size: clamp(2.25rem, 3.5vw, 3rem);
  line-height:1;
  margin: 0;
}
.section-head--stacked .section-head__rule{
  width: 100%;
  max-width: 6rem;
  height: 2px;
  background: var(--ink-navy);
  display:block;
  flex: none;
  margin: 0;
}
.section-head--stacked .section-head__title{
  flex: 0 1 auto;
  align-self: flex-start;
  text-align:left;
  margin: 0;
  width: 100%;
  max-width: 32rem;
}
.numeral--sm{ font-size: clamp(2rem, 3vw, 2.75rem); }
.numeral--xs{ font-size: 1.6rem; }

/* ✺ at end of way__cta */
.way__cta{ flex-wrap:wrap; gap:.4em; }
.way__mark{
  margin-left:.15em;
  font-size:.95em;
  vertical-align:baseline;
}

/* ── IV. WEEK: dateline meta + reader photo ── */
.week{ position:relative; }
.week__masthead{ align-items:flex-end; }
.week__meta{
  display:flex; flex-direction:column;
  align-items:flex-end; gap:.4rem;
  padding-bottom:.6rem;
}
.week__dateline{
  font-size:.78rem;
  letter-spacing:.12em;
  white-space:nowrap;
}

/* reader-submitted photograph: tilted "found object", sits above the rail */
.reader-photo{
  width: 200px;
  margin: 0 0 2.5rem;
  transform: rotate(-2deg);
  transform-origin: center;
  position:relative;
  z-index:2;
}
.reader-photo__slot{
  position:relative;
  width: 200px;
  height: 160px;
  background:
    repeating-linear-gradient(0deg, rgba(34,26,18,.04) 0 1px, transparent 1px 14px),
    linear-gradient(135deg, #EEE1C7 0%, #D7C29A 60%, #BFA374 100%);
  border: 1px solid var(--warm-ink);
  box-shadow:
    0 1px 0 0 rgba(247,242,232,.6) inset,
    0 8px 22px -10px rgba(18,10,4,.4);
}
.reader-photo__slot::after{
  content:"";
  position:absolute; inset:0;
  background-image:url("../img/paper-noise.svg");
  background-size:200px;
  opacity:.18; mix-blend-mode:multiply;
  pointer-events:none;
}
.reader-photo__label{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.55rem;
  text-align:center; padding:1rem;
  color: rgba(34,26,18,.78);
  font-family:var(--ff-display); font-style:italic;
  font-size:.78rem; line-height:1.35;
  font-variation-settings:"opsz" 24;
}
.reader-photo__label .smcaps{
  font-style:normal; font-size:.62rem; letter-spacing:.18em;
  color:rgba(34,26,18,.55);
}
.reader-photo__mark{
  position:absolute;
  right:6px; bottom:4px;
  font-size:.85rem;
  color:var(--ochre);
}
.reader-photo__caption{
  display:block;
  text-align:center;
  margin-top: .55rem;
  font-size:.7rem;
  letter-spacing:.14em;
}

.week__rail{ position:relative; z-index:1; }

/* ── V. PULL QUOTE: massive Cream V on left ── */
.pullquote{
  overflow:hidden;
  position:relative;
}
.pullquote__V{
  position:absolute;
  left: clamp(-3rem, -3vw, -1rem);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(14rem, 30vw, 26rem);
  line-height: .78;
  color: var(--cream);
  font-variation-settings: "opsz" 144, "SOFT" 100;
  letter-spacing: -.04em;
  pointer-events:none;
  user-select:none;
  z-index: 1;
}
.pullquote__inner{
  position:relative;
  z-index:2;
  display: grid;
  grid-template-columns: 45% 55%;
  align-items:center;
  max-width: var(--wide);
}
.pullquote__body{
  grid-column: 2 / 3;
  padding-left: clamp(1rem, 3vw, 3rem);
}
.pullquote__mark{
  display:block;
  font-family:var(--ff-display); font-style:italic; font-weight:500;
  font-size: clamp(4rem, 7vw, 6rem);
  line-height:.6;
  color:var(--ochre);
  margin: 0 0 1.2rem -.15em;
  font-variation-settings:"opsz" 144,"SOFT" 80;
}
.pullquote__text{
  font-family:var(--ff-display); font-style:italic; font-weight:400;
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  line-height:1.22;
  color:var(--cream);
  margin: 0 0 1.6rem;
  max-width:38rem;
  text-wrap:balance;
  font-variation-settings:"opsz" 72,"SOFT" 60;
}

/* ── VI. HELPER: open-letter salutation ── */
.helper__inner{
  position:relative;
  max-width: 50rem;
  margin-left: clamp(0rem, 6vw, 5rem);
}
.helper__salute{
  display:block;
  font-size: .85rem;
  letter-spacing: .22em;
  margin-bottom: 1.4rem;
  color: var(--cream);
  opacity: .9;
}
.helper__title{
  color:var(--cream);
  font-size: clamp(2.25rem, 4vw, 3rem);
  line-height: 1.06;
  margin: 0 0 1.6rem;
  max-width: 22ch;
}

/* ── VII. COURSE: full-width head with rule, numeral inside jacket, corner notch ── */
.course__head{
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
}
.course__title{
  text-align: left;
  font-size: clamp(2.25rem, 4vw, 3rem);
  line-height: 1.04;
  margin: 0;
  padding-bottom:.6rem;
  border-bottom: 1px solid var(--warm-gray);
}
.jacket{
  position:relative;
}
.jacket__corner{
  position:absolute;
  top:0; right:0;
  width:28px; height:28px;
  /* folded page-corner gesture, painted into the corner of the card */
  background:
    linear-gradient(225deg,
      var(--cream) 0%,
      var(--cream) 49%,
      var(--warm-ink) 50%,
      var(--warm-gray) 52%,
      var(--warm-gray) 100%);
  pointer-events:none;
}
.jacket__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1rem; margin-bottom: 1.4rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--warm-gray);
}
.jacket__eyebrow{ display:block; margin: 0; }
.jacket__num{
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ink-navy);
  font-variation-settings: "opsz" 36, "SOFT" 60;
}

/* ── VIII. BRIEFING: centered, eyebrow-only ── */
.briefing__inner{ text-align:left; position:relative; }
.briefing__head{
  display:flex; flex-direction:column; align-items:center;
  margin-bottom: 1.4rem;
}
.briefing__eyebrow{
  font-size:.78rem;
  letter-spacing:.18em;
}
.briefing__title{
  text-align:center;
  max-width: 28ch;
  margin: 0 auto 1.3rem;
}
.briefing__lede{ text-align:center; }
.briefing__sig{ text-align:center; }

/* ── DROP FOLIOS ── */
.folio{
  position:absolute;
  bottom: clamp(1rem, 2vw, 1.6rem);
  right: clamp(1.25rem, 4vw, 3rem);
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: .02em;
  color: var(--warm-ink);
  opacity: .55;
  pointer-events:none;
  user-select:none;
  font-variation-settings: "opsz" 18, "SOFT" 60;
}
.folio--cream{ color: var(--cream); opacity: .7; }

/* containers carrying folios need positioning */
.hero .container,
.mission .mission__container,
.ways .container,
.week .container,
.pullquote,
.helper,
.course .container,
.briefing .briefing__inner{
  position:relative;
}

/* ── FLEURON DIVIDER (between briefing and footer) ── */
.fleuron{
  display:flex; align-items:center; justify-content:center;
  gap: 2.4em;
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(2.4rem, 5vw, 3.4rem);
  color: var(--ochre);
  font-family: var(--ff-display);
  font-style: normal;
  font-weight: 400;
  font-size: .95rem;
  background: var(--cream);
}

/* ── FOOTER: navy top rule with centered ✺ ── */
.site-footer{ border-top: 0; position:relative; padding-top: 0; }
.footer__rule{
  position:relative;
  height: 1px;
  background: var(--ink-navy);
  margin: 0 auto;
  max-width: var(--wide);
  padding: 0 var(--gutter);
}
.footer__rule-mark{
  position:absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: var(--cream);
  padding: 0 .8rem;
  color: var(--ochre);
  font-family: var(--ff-display);
  font-size: 1.05rem;
  line-height: 1;
}
.footer__grid{
  margin-top: 2.6rem;
  position:relative;
}
/* Three-column ✺ separators on desktop */
@media (min-width: 981px){
  .footer__grid > .footer__col + .footer__col{
    position:relative;
  }
  .footer__grid > .footer__col + .footer__col::before{
    content: "✺";
    position:absolute;
    left: clamp(-2.5rem, -3vw, -1.5rem);
    top: 0;
    color: var(--ochre);
    font-family: var(--ff-display);
    font-style: normal;
    font-weight: 400;
    font-size: .9rem;
    line-height: 1.4;
    opacity: .85;
  }
}

/* ── RESPONSIVE: v4 moves on small screens ── */
@media (max-width: 980px){
  .mission__container{
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .mission__container > .mission__caption{ grid-column: 1; grid-row:auto; }
  .mission__head{ grid-column: 1; grid-row:auto; padding-top: 1.5rem; }
  .mission__grid{
    grid-template-columns: 1fr;
    grid-column: 1;
    grid-row: auto;
    padding-left: 0;
    margin-top: 1.5rem;
    gap: 2rem;
  }
  .mission__title{ padding-left: 0; max-width: none; }
  .mission__body{ grid-column:1; }
  .mission__margin{
    grid-column:1;
    padding: 1rem 1rem 1rem 1rem;
    border: 1px solid var(--warm-gray);
    border-left: none; border-right: none;
    margin-top: 0;
  }

  .mission__bleed{
    font-size: 5rem;
    left: calc(-1 * var(--gutter) + .2rem);
    top: .5rem;
  }

  .photo--overlap{ margin-bottom: -2rem; }

  /* pull quote: V above the quote on small screens */
  .pullquote__V{
    position:static;
    display:block;
    transform:none;
    font-size: clamp(8rem, 22vw, 12rem);
    line-height: .8;
    margin: 0 0 .5rem -.04em;
  }
  .pullquote__inner{
    grid-template-columns: 1fr;
  }
  .pullquote__body{
    grid-column: 1;
    padding-left: 0;
  }

  .footer__grid{ grid-template-columns: 1fr; gap: 2.2rem; }
}

@media (max-width: 560px){
  .reader-photo{ width: 170px; }
  .reader-photo__slot{ width: 170px; height: 136px; }
  .folio{ font-size: .85rem; }
  .helper__title{ font-size: clamp(1.75rem, 7vw, 2.4rem); }
}

/* ============================================================
   SITE-WIDE SCAFFOLDING
   Patterns that aren't front-page specific: page headers,
   article shells, Gutenberg content typography, block style
   variants, list/archive cards. Pulls from the same design
   tokens established in the front-page sections above.
   ============================================================ */

/* ── Page header (eyebrow + section-title + rule) ──
   Used by page.php and single.php for the title zone. */
.page-head{
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(1.5rem, 3vw, 2rem);
  background: var(--cream);
}
.page-head__inner{
  display:flex; flex-direction:column; align-items:flex-start;
  gap: 1rem;
  max-width: 50rem;
}
.page-head__eyebrow{
  display:inline-flex; align-items:center; gap:.7rem;
}
.page-head__eyebrow::before{
  content:""; width: 3.25rem; height:1px;
  background: var(--warm-gray);
}
.page-head__title{
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.04;
  letter-spacing: -.012em;
  font-variation-settings: "opsz" 96, "SOFT" 50;
  color: var(--deep-ink);
  text-wrap: balance;
  margin: 0;
}
.page-head__meta{
  font-family: var(--ff-ui);
  font-size: .85rem;
  letter-spacing: .04em;
  color: var(--warm-ink);
  opacity: .7;
}

/* ── Article shell (page.php, single.php) ── */
.page-body{
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(4rem, 8vw, 7rem);
  background: var(--cream);
}
.page-body__inner{
  max-width: 42rem;
  margin: 0 auto;
}

/* ── Gutenberg content typography ──
   Targets .entry-content (output of the_content) so any blocks
   the editor produces inherit the editorial design system. */
.entry-content{
  font-family: var(--ff-body);
  color: var(--warm-ink);
  font-size: 1.1875rem;
  line-height: 1.65;
}
.entry-content > * + *{ margin-top: 1.4rem; }
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6{
  font-family: var(--ff-display);
  color: var(--deep-ink);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.012em;
  font-variation-settings: "opsz" 96, "SOFT" 50;
  text-wrap: balance;
  margin-top: 2.6rem;
}
.entry-content h2{ font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 500; }
.entry-content h3{ font-size: clamp(1.35rem, 2.5vw, 1.6rem); font-weight: 500; }
.entry-content h4{ font-size: 1.2rem; font-weight: 600; }
.entry-content h2 em,
.entry-content h3 em,
.entry-content h4 em{ font-style: italic; font-variation-settings: "opsz" 96, "SOFT" 80; }
.entry-content p{ margin: 0; }
.entry-content p + p{ margin-top: 1.15em; }
.entry-content a{
  color: var(--warm-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--ink-navy);
}
.entry-content a:hover{
  color: var(--ink-navy);
  text-decoration-thickness: 2px;
}
.entry-content strong{ font-weight: 600; }
.entry-content em{ font-style: italic; }
.entry-content ul,
.entry-content ol{ padding-left: 1.4rem; margin: 0; }
.entry-content li + li{ margin-top: .35rem; }
.entry-content blockquote,
.entry-content .wp-block-quote{
  margin: 2rem 0;
  padding-left: 1.4rem;
  border-left: 2px solid var(--ink-navy);
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--ink-navy);
  font-variation-settings: "opsz" 36, "SOFT" 60;
}
.entry-content blockquote cite,
.entry-content .wp-block-quote cite{
  display:block;
  margin-top: .75rem;
  font-family: var(--ff-ui);
  font-style: normal;
  font-size: .8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ochre);
}
.entry-content .wp-block-pullquote{
  margin: 2.5rem 0;
  padding: 2rem 0;
  border-top: 2px solid var(--ink-navy);
  border-bottom: 2px solid var(--ink-navy);
  text-align: left;
}
.entry-content .wp-block-pullquote p{
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.22;
  color: var(--ink-navy);
  font-variation-settings: "opsz" 72, "SOFT" 70;
  margin: 0;
}
.entry-content .wp-block-pullquote cite{
  display:block;
  margin-top: 1rem;
  font-family: var(--ff-ui);
  font-style: normal;
  font-size: .8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ochre);
}
.entry-content figure,
.entry-content .wp-block-image{
  margin: 2rem 0;
}
.entry-content figcaption,
.entry-content .wp-block-image figcaption{
  margin-top: .65rem;
  font-family: var(--ff-display);
  font-style: italic;
  font-size: .95rem;
  line-height: 1.45;
  color: var(--warm-ink);
  font-variation-settings: "opsz" 18, "SOFT" 60;
}
.entry-content hr,
.entry-content .wp-block-separator{
  border: 0;
  height: 1px;
  background: var(--warm-gray);
  margin: 3rem auto;
  max-width: 12rem;
}
.entry-content .wp-block-separator.is-style-wide{
  max-width: none;
}
.entry-content .wp-block-buttons{
  display: flex; flex-wrap: wrap; gap: 1rem;
  margin: 1.8rem 0;
}
.entry-content .wp-block-button__link{
  background: var(--ink-navy);
  color: var(--cream);
  border: 2px solid var(--ink-navy-strong);
  box-shadow: 4px 4px 0 0 var(--ink-navy-strong);
  font-family: var(--ff-ui);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: .005em;
  line-height: 1;
  padding: 18px 32px;
  border-radius: 4px;
  text-decoration: none;
  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}
.entry-content .wp-block-button__link:hover{
  background: var(--ink-navy-strong);
  color: var(--cream);
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 0 var(--ink-navy-strong);
}
.entry-content .wp-block-button.is-style-outline .wp-block-button__link,
.entry-content .wp-block-button.is-style-ghost .wp-block-button__link{
  background: var(--cream);
  color: var(--ink-navy);
  border: 2px solid var(--ink-navy);
  box-shadow: 4px 4px 0 0 var(--ink-navy);
}
.entry-content .wp-block-columns{ gap: clamp(1.5rem, 3vw, 2.5rem); }

/* ── Wide / full alignment inside .entry-content ──
   Match the container/wide widths declared in theme.json. */
.entry-content > .alignwide{
  max-width: 60rem;
  margin-left: auto; margin-right: auto;
}
.entry-content > .alignfull{
  max-width: var(--wide);
  margin-left: auto; margin-right: auto;
}

/* ── Block style variants ──
   Surfaced in the inserter's Styles panel by register_block_style. */

/* Paragraph: lede — large italic intro paragraph */
.entry-content p.is-style-lede,
p.is-style-lede{
  font-family: var(--ff-body);
  font-style: italic;
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  line-height: 1.5;
  color: var(--warm-ink);
  max-width: 34rem;
  font-variation-settings: "opsz" 30;
}

/* Paragraph: drop-cap — first-letter editorial drop cap */
.entry-content p.is-style-drop-cap::first-letter,
p.is-style-drop-cap::first-letter{
  font-family: var(--ff-display);
  font-weight: 800;
  color: var(--ink-navy);
  float: left;
  font-size: 5rem;
  line-height: .82;
  padding: .45rem .5rem 0 0;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}

/* Paragraph: closer — italic kicker with left rule */
.entry-content p.is-style-closer,
p.is-style-closer{
  margin-top: 1.8rem;
  padding-left: 1.4rem;
  border-left: 2px solid var(--ink-navy);
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--ink-navy);
  font-variation-settings: "opsz" 36, "SOFT" 60;
}

/* Paragraph: caption — small italic with hairline rule on top */
.entry-content p.is-style-caption,
p.is-style-caption{
  padding-top: 1rem;
  border-top: 1px solid var(--warm-gray);
  font-family: var(--ff-display);
  font-style: italic;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--warm-ink);
  font-variation-settings: "opsz" 18, "SOFT" 60;
}

/* Paragraph: smcaps eyebrow — small caps, ochre */
.entry-content p.is-style-eyebrow,
p.is-style-eyebrow{
  font-family: var(--ff-ui);
  font-weight: 600;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ochre);
}

/* Heading: section-title — the design's primary section heading */
h2.is-style-section-title,
h3.is-style-section-title{
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(2.25rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -.012em;
  font-variation-settings: "opsz" 96, "SOFT" 50;
  text-wrap: balance;
  color: var(--deep-ink);
}
h2.is-style-section-title em,
h3.is-style-section-title em{
  font-style: italic;
  font-variation-settings: "opsz" 96, "SOFT" 80;
}

/* Group: paper section — full-bleed paper-tone block */
.wp-block-group.is-style-paper{
  background: var(--paper);
  padding: clamp(3rem, 6vw, 5rem) var(--gutter);
}
.wp-block-group.is-style-navy{
  background: var(--ink-navy);
  color: var(--cream);
  padding: clamp(3rem, 6vw, 5rem) var(--gutter);
}
.wp-block-group.is-style-navy :where(h1, h2, h3, h4, h5, h6){
  color: var(--cream);
}
.wp-block-group.is-style-navy a{
  color: var(--cream);
  text-decoration-color: rgba(247,242,232,.6);
}

/* Quote: marginalia — pulled note in the margin */
.entry-content .wp-block-quote.is-style-marginalia,
.wp-block-quote.is-style-marginalia{
  margin: 0;
  padding: 1rem 0 1rem 1rem;
  border-left: 1px solid var(--warm-gray);
  border-top: 0; border-bottom: 0;
  max-width: 17rem;
  font-family: var(--ff-ui);
  font-style: normal;
  font-size: .8125rem;
  line-height: 1.45;
  color: color-mix(in oklab, var(--warm-ink) 75%, transparent);
}
.wp-block-quote.is-style-marginalia cite{
  color: var(--ochre);
}

/* Separator: section-rule — full-width hairline */
.wp-block-separator.is-style-section-rule{
  margin: 0 auto;
  max-width: var(--wide);
  height: 1px;
  background: var(--warm-gray);
}

/* Separator: fleuron — three ochre ✺ centered */
.wp-block-separator.is-style-fleuron{
  border: 0;
  background: transparent;
  height: auto;
  padding: clamp(2rem, 4vw, 3rem) 0;
  text-align: center;
  color: var(--ochre);
  font-family: var(--ff-display);
  letter-spacing: 2.4em;
  max-width: none;
}
.wp-block-separator.is-style-fleuron::before{
  content: "\273A\200B\273A\200B\273A";
  letter-spacing: 2.4em;
}

/* ── Archive / index entry cards ──
   Reuses the "week entry" visual language for list views. */
.archive-head{
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
}
.archive-head__title{
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(2.25rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -.012em;
  color: var(--deep-ink);
  margin: 0;
  text-wrap: balance;
}
.archive-head__desc{
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--warm-ink);
  margin-top: .8rem;
  max-width: 36rem;
  font-variation-settings: "opsz" 24, "SOFT" 60;
}

.entry-list{
  padding: clamp(1rem, 2vw, 2rem) 0 clamp(4rem, 8vw, 7rem);
}
.entry-card{
  display: block;
  padding: 1.75rem 0;
  border-top: 1px solid var(--warm-gray);
}
.entry-card:last-child{ border-bottom: 1px solid var(--warm-gray); }
.entry-card__meta{
  font-family: var(--ff-ui);
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ochre);
  margin-bottom: .8rem;
}
.entry-card__title{
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.5vw, 1.875rem);
  line-height: 1.15;
  letter-spacing: -.005em;
  margin: 0 0 .75rem;
  color: var(--deep-ink);
  font-variation-settings: "opsz" 36, "SOFT" 50;
  text-wrap: balance;
}
.entry-card__title a{
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--ink-navy), var(--ink-navy));
  background-repeat: no-repeat;
  background-size: 0 1.5px;
  background-position: 0 100%;
  transition: background-size 220ms ease;
}
.entry-card__title a:hover{
  background-size: 100% 1.5px;
  color: var(--ink-navy);
}
.entry-card__excerpt{
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--warm-ink);
  margin: 0;
  max-width: 42rem;
  font-variation-settings: "opsz" 18, "SOFT" 60;
}

/* Pagination — used by archive/index */
.pagination{
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--warm-gray);
  font-family: var(--ff-ui);
  font-size: .95rem;
}
.pagination a{
  color: var(--ink-navy);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}
.pagination a:hover{ color: var(--ink-navy-strong); }
.pagination .current{
  color: var(--warm-ink);
  opacity: .7;
}

/* ============================================================
   GRAVITY FORMS — MONTHLY BRIEFING (form id 3)
   Scope is tight to #gform_wrapper_3 so other GF forms (if added
   later) keep their defaults until they're explicitly restyled.
   Goal: editorial parity with .field + .btn--primary tokens.
   ============================================================ */

#gform_wrapper_3{
  --gf-color-primary:           var(--ink-navy);
  --gf-color-primary-contrast:  var(--cream);
  --gf-color-primary-darker:    var(--ink-navy-strong);
  --gf-color-primary-lighter:   var(--ink-navy);
  --gf-radius: 4px;
  --gf-ctrl-border-color: var(--warm-ink);
  margin: 0;
  font-family: var(--ff-ui);
}

/* Suppress the auto-injected GF theme stylesheet so its tokens
   don't fight ours. Scoped to form 3 only. */
#gform_wrapper_3 > style:first-of-type{ display:none; }

/* Form body: stack label + input, match the .briefing__form grid
   when the form lives inside .briefing__form (homepage). On /check/
   the form sits inside .entry-content and stays single-column. */
#gform_wrapper_3 .gform_fields{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.briefing__form #gform_wrapper_3 .gform_fields{
  grid-template-columns: 1fr;
}

#gform_wrapper_3 .gfield{
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin: 0;
  padding: 0;
}

#gform_wrapper_3 .gfield_label{
  font-family: var(--ff-ui);
  font-weight: 600;
  font-size: .875rem;
  letter-spacing: .04em;
  color: var(--warm-ink);
  margin: 0;
  padding: 0;
}

#gform_wrapper_3 .gfield_required{
  color: var(--rust);
  margin-left: .25em;
}

#gform_wrapper_3 input[type="email"],
#gform_wrapper_3 input[type="text"]{
  font-family: var(--ff-ui);
  font-size: 1.0625rem;
  padding: 16px 18px;
  min-height: 56px;
  background: var(--white);
  color: var(--warm-ink);
  border: 2px solid var(--warm-ink);
  border-radius: 4px;
  width: 100%;
  box-shadow: none;
}

#gform_wrapper_3 input[type="email"]::placeholder,
#gform_wrapper_3 input[type="text"]::placeholder{
  color: rgba(34,26,18,.45);
}

#gform_wrapper_3 input[type="email"]:focus,
#gform_wrapper_3 input[type="text"]:focus{
  outline: 2px solid var(--rust);
  outline-offset: 2px;
  border-color: var(--ink-navy-strong);
}

/* Hidden Source field — make sure its label doesn't show as empty space. */
#gform_wrapper_3 .gform_hidden,
#gform_wrapper_3 .gfield_visibility_hidden{
  display: none !important;
}

/* Footer (submit button) — promote to btn--primary visual. */
#gform_wrapper_3 .gform_footer{
  margin: 1.4rem 0 0;
  padding: 0;
}

#gform_wrapper_3 .gform_button{
  --shadow-offset: 4px;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--ff-ui);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: .005em;
  line-height: 1;
  padding: 18px 32px;
  min-height: 56px;
  background: var(--ink-navy);
  color: var(--cream);
  border: 2px solid var(--ink-navy-strong);
  border-radius: 4px;
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--ink-navy-strong);
  text-decoration: none;
  cursor: pointer;
  transition: transform 120ms ease-out, box-shadow 120ms ease-out, background-color 120ms ease-out;
  will-change: transform;
}

#gform_wrapper_3 .gform_button:hover{
  background: var(--ink-navy-strong);
  color: var(--cream);
  transform: translate(2px,2px);
  box-shadow: 2px 2px 0 0 var(--ink-navy-strong);
}

#gform_wrapper_3 .gform_button:active{
  transform: translate(4px,4px);
  box-shadow: 0 0 0 0 var(--ink-navy-strong);
}

#gform_wrapper_3 .gform_button:focus-visible{
  outline: 2px solid var(--rust);
  outline-offset: 2px;
}

/* Validation: error message above the field, no red box. */
#gform_wrapper_3 .gfield_error input[type="email"],
#gform_wrapper_3 .gfield_error input[type="text"]{
  border-color: var(--rust);
}

#gform_wrapper_3 .gfield_validation_message,
#gform_wrapper_3 .validation_message{
  font-family: var(--ff-ui);
  font-size: .9rem;
  color: var(--rust);
  margin: 0;
  padding: 0;
}

#gform_wrapper_3 .gform_validation_errors{
  font-family: var(--ff-ui);
  background: transparent;
  border: 2px solid var(--rust);
  border-radius: 4px;
  padding: 1rem 1.2rem;
  margin: 0 0 1rem;
  color: var(--warm-ink);
}

/* AJAX confirmation message after submit. */
#gform_confirmation_wrapper_3,
.gform_confirmation_wrapper{
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--warm-ink);
}

/* ============================================================
   LIBRARY — shared primitives for content surfaces
   Used by scams, principles, archives, future content types.
   Reach for these before authoring bespoke per-content classes.
   See feedback_shared_design_patterns memory.
   ============================================================ */

/* --- meta-bar: horizontal strip of tags / dates / badges. --- */
.meta-bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:.8rem;
  margin: 0 0 .8rem;
}
.meta-bar .tag{ margin: 0; }
.meta-bar__label{
  font-family:var(--ff-ui);
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--warm-ink);
  opacity:.7;
}

/* --- section-block: generic content section with a leading title. --- */
.section-block{ margin: 3rem 0; }
.section-block__title{
  font-family:var(--ff-display);
  font-size:1.6rem;
  font-weight:600;
  color:var(--ink-navy);
  margin:0 0 1.2rem;
  line-height:1.2;
  letter-spacing:-.01em;
}
.section-block__lede{
  font-family:var(--ff-body);
  font-size:1.05rem;
  line-height:1.55;
  color:var(--warm-ink);
  margin: 0 0 1.4rem;
  max-width: 38rem;
}

/* --- entry-list: vertical list of titled items (optional numeral,
       optional meta, optional excerpt). --- */
.entry-list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1.6rem;
}
.entry-list__item{
  display:grid;
  grid-template-columns: 1fr;
  gap:.4rem;
  border-top:1px solid var(--warm-gray);
  padding-top:1.4rem;
}
.entry-list__item:first-child{ border-top:0; padding-top:0; }
.entry-list__num{ display:none; }
.entry-list__title{
  display:inline-block;
  font-family:var(--ff-display);
  font-size:1.2rem;
  font-weight:600;
  color:var(--ink-navy);
  text-decoration:none;
  line-height:1.3;
  letter-spacing:-.005em;
}
.entry-list__title:hover{
  color:var(--ink-navy-strong);
  text-decoration:underline;
  text-underline-offset:4px;
}
.entry-list__excerpt{
  margin:.4rem 0 0;
  color:var(--warm-ink);
  font-family:var(--ff-body);
  font-size:1.05rem;
  line-height:1.55;
}
.entry-list__meta{ margin: 0 0 .4rem; display:flex; flex-wrap:wrap; gap:.5rem; }

/* numbered variant: prominent numerals to the left. */
.entry-list--numbered .entry-list__item{
  grid-template-columns: 3.6rem 1fr;
  align-items:start;
  gap:1rem;
}
.entry-list--numbered .entry-list__num{
  display:block;
  font-family:var(--ff-display);
  font-size:2.4rem;
  line-height:1;
  font-weight:600;
  color:var(--ochre);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum", "tnum";
  margin-top:.05rem;
}

/* lg variant: bigger title + numerals for archive showcase pages. */
.entry-list--lg .entry-list__title{ font-size:1.6rem; }
.entry-list--lg .entry-list__excerpt{ font-size:1.1rem; }
.entry-list--lg.entry-list--numbered .entry-list__item{
  grid-template-columns: 4.8rem 1fr;
  gap:1.4rem;
}
.entry-list--lg.entry-list--numbered .entry-list__num{
  font-size:3.4rem;
}

/* compact variant: title-only link list (e.g. "see also"). */
.entry-list--compact{ gap: .4rem; }
.entry-list--compact .entry-list__item{
  border-top: 0;
  padding-top: 0;
  grid-template-columns: 1fr;
}
.entry-list--compact .entry-list__title{
  font-family: var(--ff-ui);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink-navy);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}

/* --- entry-grid: tile layout for listings. Replaces bespoke
       .scam-archive__grid, callable from anywhere. --- */
.entry-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:1.6rem 1.8rem;
}

/* --- callout: bordered card. Used for do/don't, tip boxes,
       sidebar emphasis blocks. --- */
.callout{
  padding:1.5rem 1.7rem;
  background:var(--cream);
  border:2px solid var(--ink-navy);
  border-radius:4px;
}
.callout__title{
  font-family:var(--ff-display);
  font-size:1.2rem;
  font-weight:600;
  color:var(--ink-navy);
  margin:0 0 1rem;
  line-height:1.3;
}
.callout__list{
  list-style:none; padding:0; margin:0;
  display:grid; gap:.8rem;
}
.callout__list li{
  position:relative;
  padding-left:1.9rem;
  font-family:var(--ff-body);
  font-size:1.05rem;
  line-height:1.55;
  color:var(--warm-ink);
}
.callout__list li::before{
  position:absolute;
  left:0; top:0;
  font-family:var(--ff-ui);
  font-weight:700;
  font-size:1.05rem;
  line-height:1.55;
}
.callout--do .callout__list li::before{
  content:"✓"; color:var(--ink-navy);
}
.callout--dont{ border-color:var(--rust); }
.callout--dont .callout__title{ color:var(--rust); }
.callout--dont .callout__list li::before{
  content:"✕"; color:var(--rust);
}

/* Two-up grid for paired callouts (e.g. do/don't). */
.callout-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
}
@media (max-width: 760px){
  .callout-grid{ grid-template-columns: 1fr; }
}

/* --- with-aside: main + sticky sidebar layout. Sidebar collapses
       below main content on small screens. --- */
.with-aside{
  display:grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 960px){
  .with-aside{
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 3rem;
    align-items: start;
  }
}
.with-aside__main{ min-width:0; }
.with-aside__aside{ display: grid; gap: 1.5rem; }
@media (min-width: 960px){
  .with-aside__aside{
    position: sticky;
    top: 2rem;
  }
}

/* ============================================================
   SCAMS — bespoke patterns unique to scam content
   ============================================================ */

.scam-variants__list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:.8rem;
}
.scam-variants__item{
  padding:.9rem 1.2rem;
  border-left:3px solid var(--ochre);
  background:var(--paper);
  font-family:var(--ff-body);
}
.scam-variants__label{
  display:block;
  font-weight:600;
  color:var(--warm-ink);
}
.scam-variants__note{
  display:block;
  margin-top:.3rem;
  color:var(--warm-ink);
  opacity:.85;
  font-size:.95rem;
}

.scam-examples__grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:1.2rem;
}
.scam-examples__item{ margin:0; }
.scam-examples__item img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--warm-gray);
  border-radius:2px;
}
.scam-examples__caption{
  display:block;
  margin-top:.5rem;
  font-size:.78rem;
  letter-spacing:.08em;
}

/* sighting card — the "I saw this recently" widget. Lives in the
   sticky aside on desktop, stacks below content on mobile. */
.sighting-card{
  padding:1.5rem;
  background:var(--paper);
  border:1px solid var(--warm-gray);
  border-radius:4px;
}
.sighting-card__title{
  font-family:var(--ff-display);
  font-size:1.15rem;
  font-weight:600;
  color:var(--ink-navy);
  margin:0 0 .6rem;
  line-height:1.3;
}
.sighting-card__lede{
  font-family:var(--ff-body);
  font-size:.95rem;
  color:var(--warm-ink);
  margin:0 0 1rem;
  line-height:1.5;
}
.sighting-card__form{ margin:0 0 .8rem; }
.sighting-card__form .btn{ width:100%; justify-content:center; --shadow-offset:3px; }
.sighting-card__status{
  font-family:var(--ff-display);
  font-size:1rem;
  font-style:italic;
  color:var(--warm-ink);
  margin:0 0 .8rem;
  line-height:1.45;
}
.sighting-card__status--ok{ color:var(--ink-navy); }
.sighting-card__status--dup{ color:var(--warm-ink); opacity:.75; }
.sighting-card__count{
  font-family:var(--ff-ui);
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--warm-ink);
  opacity:.85;
  margin:0;
}

/* ============================================================
   ARCHIVES — filter rail (scam library)
   ============================================================ */

.archive-filters{
  margin: 0 0 2.4rem;
  padding: 1.4rem 1.5rem;
  background: var(--paper);
  border: 1px solid var(--warm-gray);
  border-radius: 4px;
}
.archive-filters__row{
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: 1rem;
  align-items: end;
}
.archive-filters__chips-row{ margin-top: 1.2rem; display:flex; flex-direction:column; gap:.5rem; }
.archive-filters__field{
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.archive-filters__label{
  font-family: var(--ff-ui);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--warm-ink);
  opacity: .75;
}
.archive-filters__field input[type="search"],
.archive-filters__field select{
  font-family: var(--ff-ui);
  font-size: 1rem;
  padding: 10px 14px;
  background: var(--white);
  color: var(--warm-ink);
  border: 1.5px solid var(--warm-ink);
  border-radius: 4px;
  min-height: 42px;
}
.archive-filters__chips{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.archive-filters__chip{
  font-family: var(--ff-ui);
  font-size: .85rem;
  font-weight: 500;
  padding: 6px 14px;
  background: var(--cream);
  color: var(--warm-ink);
  border: 1.5px solid var(--warm-gray);
  border-radius: 100px;
  cursor: pointer;
  transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out;
}
.archive-filters__chip:hover{ border-color: var(--warm-ink); }
.archive-filters__chip.is-active{
  background: var(--ink-navy);
  color: var(--cream);
  border-color: var(--ink-navy-strong);
}
.archive-filters__submit{ min-height: 42px; padding: 10px 18px; --shadow-offset:3px; }

@media (max-width: 760px){
  .archive-filters__row{ grid-template-columns: 1fr; }
}

.archive-empty{
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--warm-ink);
  opacity: .75;
  padding: 2rem 0;
}

/* ============================================================
   2026-05-20 FRONT-PAGE PASS — overrides
   Audience is older. Full-bleed roman numerals, em-dashed folios,
   and decorative fleurons are tonally wrong here. These rules
   neutralize anything still referenced by legacy markup.
   ============================================================ */

/* Drop section folios (the — I — chips at end of sections). */
.folio,
.folio--cream{ display:none !important; }

/* Drop decorative three-sextile breaks. */
.fleuron{ display:none !important; }

/* Drop full-bleed editorial numerals. */
.mission__bleed,
.pullquote__V{ display:none !important; }

/* Hero photo: real image inside a clean figure shell. Keeps the
   photo--overlap lift into mission so the editorial join still reads. */
.hero__photo{
  margin:0;
  aspect-ratio: 4/5;
  overflow:hidden;
  border-radius:2px;
  background:var(--paper);
  position:relative;
  box-shadow: 0 18px 36px -22px rgba(18,10,4,.35);
  margin-bottom: clamp(-3rem, -4vw, -2rem);
}
.hero__photo img,
.hero__photo-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Remove the ✺ vertical column separators in the footer.
   User direction 2026-05-20: keep ✺ only in the footer horizontal
   rule (the hairline above the columns), not as vertical glyphs. */
@media (min-width: 981px){
  .footer__grid > .footer__col + .footer__col::before{
    content: none;
  }
}