/* ============================================================
   Founder Mindset Project — v3.2
   Ivy-league prep-school editorial
   Brick #9a3513 + Ivy #12352a  ·  No italics
   ============================================================ */

:root {
  /* palette */
  --ivy:        #12352a;
  --ivy-deep:   #0b241d;
  --ivy-ink:    #071a15;
  --ivy-tint:   rgba(18,53,42,0.06);

  --brick:      #c24418;
  --brick-deep: #9a3513;
  --brick-tint: rgba(194,68,24,0.09);

  --paper:      #f4ede0;
  --paper-2:    #ede4d1;
  --paper-3:    #e4d8bd;

  --ink:        #14120e;
  --ink-2:      #3d382e;
  --ink-3:      #7a7362;
  --hair:       #d6cbb0;
  --hair-strong:#b8ab8a;

  /* type */
  --serif: 'Fraunces', 'Georgia', 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* rhythm */
  --shell:     min(1240px, 92vw);
  --shell-wide: min(1400px, 94vw);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;                          /* bumped base */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body { background: var(--paper); overflow-x: hidden; }

/* Paper grain */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 100;
  background-image: radial-gradient(rgba(20,18,14,0.03) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: 0.65;
  mix-blend-mode: multiply;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.shell { width: var(--shell); margin: 0 auto; }
.shell-wide { width: var(--shell-wide); margin: 0 auto; }

/* ============================================================
   BRICK PATTERN — used behind ivy sections as a subtle motif
   ============================================================ */

.brick-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  background-image:
    /* horizontal mortar */
    linear-gradient(to bottom, transparent 0, transparent 22px, rgba(244,237,224,0.6) 22px, rgba(244,237,224,0.6) 24px),
    /* vertical mortar row A */
    linear-gradient(to right, rgba(244,237,224,0) 0, rgba(244,237,224,0) 62px, rgba(244,237,224,0.6) 62px, rgba(244,237,224,0.6) 64px);
  background-size: 128px 48px, 128px 48px;
  background-position: 0 0, 0 0;
  z-index: 0;
}
.brick-bg::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(244,237,224,0) 0, rgba(244,237,224,0) 62px, rgba(244,237,224,0.6) 62px, rgba(244,237,224,0.6) 64px);
  background-size: 128px 48px;
  background-position: 64px 24px;   /* offset for staggered brick pattern */
}

/* ============================================================
   TYPOGRAPHY — bumped
   ============================================================ */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "opsz" 144, "SOFT" 0;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.017em;
  text-wrap: balance;
  font-feature-settings: "onum" 1, "liga" 1, "dlig" 1;
}

h1 {
  font-size: clamp(58px, 8vw, 128px);
  line-height: 0.95;
  letter-spacing: -0.03em;
}
h2 {
  font-size: clamp(42px, 5.2vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.024em;
}
h3 {
  font-size: clamp(26px, 2.5vw, 36px);
  line-height: 1.14;
}

/* NO italics anywhere — accent is COLOR only */
em, i, blockquote em, blockquote i, h1 em, h2 em, h3 em, .em-accent {
  font-style: normal !important;
  color: var(--brick);
}

p { margin: 0; text-wrap: pretty; font-feature-settings: "onum" 1; }

.serif { font-family: var(--serif); }
.mono  { font-family: var(--mono); }

/* Smallcap eyebrow */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.eyebrow::before {
  content: '';
  width: 7px; height: 7px;
  background: var(--brick);
  flex-shrink: 0;
}
.eyebrow.on-ivy { color: rgba(244,237,224,0.78); }

/* Section marker */
.marker {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-style: normal;
}
.marker .num {
  font-variant-numeric: oldstyle-nums;
  color: var(--brick-deep);
  margin-right: 8px;
  font-weight: 700;
}
.marker.on-ivy { color: rgba(244,237,224,0.62); }
.marker.on-ivy .num { color: var(--brick); }

/* ============================================================
   HEADER — wordmark treatment
   ============================================================ */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244,237,224,0.94);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 220ms ease, background 220ms ease;
}
.masthead::after {
  /* faint bottom rule always present */
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--hair) 20%, var(--hair) 80%, transparent);
  opacity: 0.6;
}
.masthead.scrolled { background: rgba(244,237,224,0.97); }
.masthead.scrolled::after { opacity: 1; }

.masthead .shell-wide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--ivy);
}
.brand .crest { flex-shrink: 0; }
.brand-word {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1;
  color: var(--ivy);
  letter-spacing: -0.008em;
  font-weight: 500;
}
.brand-sub {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 6px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 38px;
  font-size: 14.5px;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  font-family: var(--serif);
}
.nav-links a:not(.nav-cta) {
  position: relative;
  padding-bottom: 3px;
  transition: color 180ms ease;
}
.nav-links a:not(.nav-cta):hover { color: var(--ivy); }
.nav-links a:not(.nav-cta)::after {
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: -2px;
  height: 1px;
  background: var(--brick);
  transition: right 240ms ease;
}
.nav-links a:not(.nav-cta):hover::after { right: 0; }

.nav-cta {
  padding: 10px 20px;
  border: 1px solid var(--ivy);
  border-radius: 2px;
  color: var(--ivy);
  transition: background 200ms ease, color 200ms ease;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--sans);
}
.nav-cta:hover { background: var(--ivy); color: var(--paper); }

@media (max-width: 760px) {
  .nav-links { gap: 20px; }
  .nav-links a:not(.nav-cta) { display: none; }
  .brand-sub { display: none; }
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 26px;
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 200ms ease, background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.btn .arrow { transition: transform 220ms ease; }
.btn:hover .arrow { transform: translateX(4px); }

.btn-primary { background: var(--ivy); color: var(--paper); }
.btn-primary:hover { background: var(--ivy-ink); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--hair-strong); }
.btn-ghost:hover { border-color: var(--ivy); color: var(--ivy); }

.btn-ivory { background: var(--paper); color: var(--ivy); }
.btn-ivory:hover { background: #fff; }

.btn-outline-ivory {
  background: transparent;
  color: var(--paper);
  border-color: rgba(244,237,224,0.45);
}
.btn-outline-ivory:hover { border-color: var(--paper); background: rgba(244,237,224,0.06); }

/* ============================================================
   HERO — larger, campus feel with arch motif
   ============================================================ */

.hero {
  position: relative;
  min-height: min(82vh, 820px);
  background: var(--ivy);
  color: var(--paper);
  overflow: hidden;
  padding: 24px 0 32px;
}

.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: saturate(0.8) contrast(1.02);
}
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(11,36,29,0.86) 0%,
      rgba(11,36,29,0.55) 42%,
      rgba(11,36,29,0.9) 100%),
    linear-gradient(90deg,
      rgba(11,36,29,0.6) 0%,
      rgba(11,36,29,0.15) 60%,
      rgba(11,36,29,0.4) 100%);
}
.hero .brick-bg { z-index: 1; opacity: 0.06; }

.hero-inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  min-height: min(82vh, 820px);
  padding-top: 20px;
}

.hero-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 80px;
  align-items: end;
  padding: 44px 0 24px;
}

.hero h1 { color: var(--paper); max-width: 14ch; }
.hero h1 em { color: var(--brick); font-style: normal; }

.hero-lede {
  margin-top: 40px;
  max-width: 44ch;
  color: rgba(244,237,224,0.9);
  font-family: var(--serif);
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1.5;
}

.hero-actions {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Right side: campus card with seal + specs */
.hero-card {
  background: rgba(11,36,29,0.55);
  border: 1px solid rgba(244,237,224,0.22);
  padding: 32px 32px 28px;
  color: var(--paper);
  position: relative;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero-card::before {
  content: '';
  position: absolute;
  top: -1px; left: 20px; right: 20px;
  height: 3px;
  background: var(--brick);
}
.hero-card .seal-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(244,237,224,0.22);
}
.hero-card .seal-row .seal-copy {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.35;
  color: rgba(244,237,224,0.86);
}
.hero-card .seal-row .seal-copy .k {
  display: block;
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(244,237,224,0.5);
  margin-bottom: 4px;
}

.hero-card .fact {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(244,237,224,0.14);
  align-items: baseline;
}
.hero-card .fact:last-child { border-bottom: 0; }
.hero-card .fact .k {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(244,237,224,0.55);
}
.hero-card .fact .v {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--paper);
  line-height: 1;
  font-variant-numeric: oldstyle-nums;
}

@media (max-width: 900px) {
  .hero-body { grid-template-columns: 1fr; gap: 32px; padding: 40px 0 20px; }
  .hero-media img { object-position: 50% center; }
}

/* ============================================================
   THESIS / PULL — bigger type
   ============================================================ */

.thesis {
  background: var(--paper);
  padding: 96px 0;
  border-bottom: 1px solid var(--hair);
  position: relative;
}
.thesis .shell {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 48px;
  align-items: flex-start;
}
.thesis .marker { padding-top: 14px; }
.thesis blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 22ch;
}
.thesis blockquote em { color: var(--brick); font-style: normal; }
.thesis .cite {
  padding-top: 18px;
  margin-top: 20px;
  font-family: var(--serif);
  color: var(--ink-3);
  font-size: 16px;
  line-height: 1.5;
  border-top: 1px solid var(--hair);
  max-width: 42ch;
}
@media (max-width: 900px) {
  .thesis { padding: 64px 0; }
  .thesis .shell { grid-template-columns: 1fr; gap: 20px; }
}

/* ============================================================
   SECTION HEAD
   ============================================================ */

.section { padding: 112px 0; position: relative; }
.section.tight { padding: 80px 0; }

.section-head {
  display: grid;
  grid-template-columns: 180px 1fr 1fr;
  gap: 48px;
  align-items: flex-start;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--hair);
  margin-bottom: 64px;
}
.section-head .marker { padding-top: 12px; }
.section-head h2 { max-width: 15ch; }
.section-head .head-right {
  font-family: var(--serif);
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.55;
  color: var(--ink-2);
  padding-top: 12px;
  max-width: 40ch;
}
.section-head .head-right .aside {
  font-family: var(--sans);
  margin-top: 18px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

@media (max-width: 960px) {
  .section { padding: 88px 0; }
  .section-head { grid-template-columns: 1fr; gap: 20px; padding-bottom: 36px; margin-bottom: 44px; }
}

/* ============================================================
   THE WEEK — big display Romans, horizontal 5-block strip
   ============================================================ */

.week { background: var(--paper); }

.week-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 2px solid var(--ivy);
  border-bottom: 2px solid var(--ivy);
  background: var(--paper);
}
.week-block {
  padding: 36px 26px 40px;
  border-right: 1px solid var(--hair);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 420px;
  transition: background 300ms ease;
}
.week-block:last-child { border-right: 0; }
.week-block:hover { background: var(--brick-tint); }

.week-block .roman {
  font-family: var(--serif);
  font-size: 88px;
  line-height: 0.85;
  color: var(--brick);
  font-weight: 400;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
  font-feature-settings: "onum" 1;
}

.week-block .day-name {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hair);
  margin-bottom: 20px;
}

.week-block .verb {
  font-family: var(--serif);
  font-size: 36px;
  line-height: 1;
  color: var(--ivy);
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  font-weight: 400;
}

.week-block .day-text {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-2);
  flex: 1;
  text-wrap: pretty;
}

.week-block .folio {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--hair);
}

@media (max-width: 1100px) {
  .week-block { padding: 26px 16px 30px; min-height: 360px; }
  .week-block .roman { font-size: 64px; }
  .week-block .verb { font-size: 26px; }
  .week-block .day-text { font-size: 15px; }
}
@media (max-width: 720px) {
  .week-strip { grid-template-columns: 1fr; }
  .week-block { border-right: 0; border-bottom: 1px solid var(--hair); min-height: 0; padding: 28px 24px; }
  .week-block:last-child { border-bottom: 0; }
  .week-block .roman { font-size: 68px; }
}

/* ============================================================
   WHY IT WORKS
   ============================================================ */

.why { background: var(--paper); border-top: 1px solid var(--hair); }

.why-rules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  margin-bottom: 64px;
}
.why-rule {
  padding: 52px 44px 56px;
  border-right: 1px solid var(--hair);
  position: relative;
  transition: background 300ms ease;
}
.why-rule:last-child { border-right: 0; }
.why-rule:hover { background: var(--brick-tint); }
.why-rule .rule-num {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brick-deep);
  margin-bottom: 24px;
}
.why-rule h3 {
  font-size: clamp(32px, 3.2vw, 46px);
  line-height: 1.02;
  margin-bottom: 22px;
  color: var(--ink);
}
.why-rule p {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 42ch;
}

/* Friday block — ivy card with brick top rule */
.friday-card {
  background: var(--ivy);
  color: var(--paper);
  padding: 56px 60px 60px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 72px;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
}
.friday-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 4px;
  background: var(--brick);
}
.friday-card .brick-bg { opacity: 0.06; }
.friday-card .friday-left, .friday-card .friday-list-wrap { position: relative; z-index: 1; }
.friday-card .friday-tag {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: 22px;
}
.friday-card h3 {
  color: var(--paper);
  font-size: clamp(38px, 4vw, 58px);
  line-height: 0.98;
  margin-bottom: 24px;
  letter-spacing: -0.024em;
}
.friday-card .friday-sub {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.5;
  color: rgba(244,237,224,0.75);
  max-width: 32ch;
}

.friday-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: friday;
}
.friday-list li {
  counter-increment: friday;
  padding: 20px 0 20px 52px;
  border-top: 1px solid rgba(244,237,224,0.15);
  font-family: var(--serif);
  font-size: 19px;
  color: var(--paper);
  line-height: 1.35;
  position: relative;
}
.friday-list li:last-child { border-bottom: 1px solid rgba(244,237,224,0.15); }
.friday-list li::before {
  content: counter(friday, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 22px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--paper);
}

.rules-quote {
  margin-top: 64px;
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.28;
  color: var(--ivy);
  max-width: 30ch;
  margin-left: auto;
  margin-right: auto;
}
.rules-quote em { color: var(--brick); font-style: normal; }
.rules-quote .attrib {
  display: block;
  margin-top: 22px;
  font-size: 11px;
  font-family: var(--sans);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-3);
}

@media (max-width: 960px) {
  .why-rules { grid-template-columns: 1fr; }
  .why-rule { border-right: 0; border-bottom: 1px solid var(--hair); padding: 36px 24px; }
  .friday-card { grid-template-columns: 1fr; gap: 32px; padding: 36px 28px 40px; }
}

/* ============================================================
   BRING
   ============================================================ */

.bring { background: var(--paper); border-top: 1px solid var(--hair); }

.bring-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 2px solid var(--ivy);
  border-bottom: 2px solid var(--ivy);
}
.bring-col {
  padding: 48px 44px 52px;
  border-right: 1px solid var(--hair);
}
.bring-col:last-child { border-right: 0; }

.bring-col .col-label {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brick-deep);
  margin-bottom: 26px;
  display: block;
}
.bring-col h3 {
  font-family: var(--serif);
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 28px;
  max-width: 24ch;
}
.bring-col ul { list-style: none; padding: 0; margin: 0; }
.bring-col ul li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--hair);
  font-family: var(--serif);
  font-size: 17.5px;
  color: var(--ink-2);
  line-height: 1.45;
  align-items: baseline;
}
.bring-col ul li:last-child { border-bottom: 1px solid var(--hair); }
.bring-col ul li .k {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--brick-deep);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 800px) {
  .bring-grid { grid-template-columns: 1fr; }
  .bring-col { border-right: 0; border-bottom: 1px solid var(--hair); padding: 32px 20px 36px; }
  .bring-col:last-child { border-bottom: 0; }
}

/* ============================================================
   PULL QUOTE ON IVY — bigger, with brick
   ============================================================ */

.pull {
  padding: 96px 0;
  background: var(--paper);
  border-top: 1px solid var(--hair);
  position: relative;
  overflow: hidden;
}
.pull.on-ivy {
  background: var(--ivy);
  color: var(--paper);
  border-top: 0;
}
.pull.on-ivy .brick-bg { opacity: 0.08; }
.pull .shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 48px;
  align-items: center;
}
.pull blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 26ch;
  position: relative;
  padding-left: 40px;
}
.pull blockquote::before {
  content: '“';
  position: absolute;
  left: -8px;
  top: -38px;
  font-size: 108px;
  color: var(--brick);
  line-height: 1;
  font-family: var(--serif);
}
.pull.on-ivy blockquote { color: var(--paper); }
.pull.on-ivy blockquote em { color: var(--brick); font-style: normal; }
.pull blockquote em { color: var(--brick); font-style: normal; }

.pull .cite {
  padding-left: 40px;
  padding-top: 18px;
  margin-top: 18px;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink-3);
  max-width: 42ch;
  border-top: 1px solid var(--hair);
}
.pull.on-ivy .cite { color: rgba(244,237,224,0.68); border-top-color: rgba(244,237,224,0.2); }

@media (max-width: 900px) {
  .pull { padding: 64px 0; }
  .pull .shell { grid-template-columns: 1fr; gap: 24px; }
  .pull blockquote { padding-left: 30px; }
  .pull blockquote::before { font-size: 80px; top: -22px; }
}

/* ============================================================
   FOUNDERS — editorial, tighter but bigger type
   ============================================================ */

.founders { background: var(--paper); border-top: 1px solid var(--hair); }

.founders-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}
.founder {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  align-items: flex-start;
}

.founder-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--paper-3);
  overflow: hidden;
  width: 240px;
}
.founder-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.03);
}
.founder-portrait::after {
  content: '';
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px rgba(20,18,14,0.08);
  pointer-events: none;
}
.founder .role {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brick-deep);
  margin-bottom: 10px;
}

.founder h3 {
  font-family: var(--serif);
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.02;
  color: var(--ivy);
  letter-spacing: -0.024em;
  margin-bottom: 10px;
}

.founder .tagline {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink-3);
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hair);
  line-height: 1.35;
}

.founder .credentials {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  line-height: 1.75;
  margin-bottom: 18px;
  font-weight: 500;
}

.founder p {
  font-family: var(--serif);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-2);
  margin-bottom: 22px;
  max-width: 48ch;
}

.founder .email {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ivy);
  border-bottom: 1px solid var(--ivy);
  padding-bottom: 3px;
  transition: color 180ms ease, border-color 180ms ease;
  letter-spacing: 0.02em;
  display: inline-block;
}
.founder .email:hover { color: var(--brick); border-color: var(--brick); }

@media (max-width: 900px) {
  .founders-grid { grid-template-columns: 1fr; gap: 48px; }
  .founder { grid-template-columns: 1fr; gap: 24px; }
  .founder-portrait { width: 240px; }
}

/* ============================================================
   BANNER — big finale
   ============================================================ */

.banner {
  background: var(--ivy);
  color: var(--paper);
  padding: 112px 0;
  position: relative;
  overflow: hidden;
}
.banner::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 100%; height: 4px;
  background: var(--brick);
}
.banner .brick-bg { opacity: 0.06; }
.banner .shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: flex-start;
}
.banner .eyebrow { color: rgba(244,237,224,0.72); margin-bottom: 28px; }
.banner .eyebrow::before { background: var(--brick); }
.banner h2 {
  color: var(--paper);
  font-size: clamp(38px, 4.4vw, 60px);
  line-height: 1.03;
  max-width: 18ch;
}
.banner h2 em { color: var(--brick); font-style: normal; }
.banner .right p {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.55;
  color: rgba(244,237,224,0.9);
  margin-bottom: 20px;
  max-width: 46ch;
}

@media (max-width: 900px) {
  .banner { padding: 80px 0; }
  .banner .shell { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================================
   CONTACT
   ============================================================ */

.contact { background: var(--paper); padding: 112px 0; border-top: 1px solid var(--hair); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: flex-start;
}
.contact-left .marker { margin-bottom: 22px; }
.contact-left h2 { max-width: 14ch; margin-bottom: 28px; }
.contact-left h2 em { color: var(--brick); font-style: normal; }
.contact-left p {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 44ch;
  margin-bottom: 32px;
}
.contact-direct {
  padding: 22px 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink-2);
  margin-bottom: 20px;
}
.contact-direct .row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 16px;
  padding: 10px 0;
  align-items: baseline;
}
.contact-direct .row + .row { border-top: 1px dashed var(--hair); }
.contact-direct a {
  color: var(--ivy);
  border-bottom: 1px solid var(--hair-strong);
  transition: border-color 180ms;
}
.contact-direct a:hover { border-color: var(--ivy); }
.contact-direct .k {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 40px;
  background: var(--paper-2);
  border: 1px solid var(--hair);
  border-top: 3px solid var(--ivy);
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 500;
}
.field input, .field textarea {
  font-family: var(--serif);
  font-size: 17px;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--hair-strong);
  background: transparent;
  color: var(--ink);
  outline: none;
  transition: border-color 200ms ease;
  resize: vertical;
}
.field input:focus, .field textarea:focus { border-bottom-color: var(--ivy); }
.field textarea { min-height: 100px; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }

.contact-form button { align-self: flex-start; margin-top: 10px; }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .field-row { grid-template-columns: 1fr; }
  .contact-form { padding: 28px; }
}

/* ============================================================
   FOOTER
   ============================================================ */

.foot {
  background: var(--ivy-deep);
  color: rgba(244,237,224,0.82);
  padding: 72px 0 40px;
  font-size: 14px;
  position: relative;
  overflow: hidden;
}
.foot::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 100%; height: 3px;
  background: var(--brick);
}
.foot .brick-bg { opacity: 0.05; }
.foot .shell-wide { position: relative; z-index: 1; }
.foot .brand { color: var(--paper); }
.foot .brand-word { color: var(--paper); font-size: 22px; }
.foot .brand-sub { color: rgba(244,237,224,0.55); }

.foot-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
  align-items: flex-start;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(244,237,224,0.15);
}
.foot-tag {
  font-family: var(--serif);
  font-size: 17px;
  color: rgba(244,237,224,0.78);
  margin-top: 24px;
  max-width: 32ch;
  line-height: 1.4;
}

.foot-nav-title {
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(244,237,224,0.5);
  margin-bottom: 16px;
}
.foot-nav a {
  display: block;
  padding: 6px 0;
  color: rgba(244,237,224,0.86);
  font-family: var(--serif);
  font-size: 15.5px;
  transition: color 180ms;
}
.foot-nav a:hover { color: var(--brick); }

.foot-mid {
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  color: rgba(244,237,224,0.62);
  font-size: 12px;
  border-bottom: 1px solid rgba(244,237,224,0.1);
}

.foot-bot {
  padding-top: 22px;
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.75;
  color: rgba(244,237,224,0.55);
  max-width: 90ch;
  letter-spacing: 0.01em;
}
.foot-bot strong { color: rgba(244,237,224,0.75); font-weight: 500; }

@media (max-width: 800px) {
  .foot-top { grid-template-columns: 1fr; gap: 28px; }
  .foot-mid { flex-direction: column; gap: 8px; }
}

/* ============================================================
   FADE-IN
   ============================================================ */

.fade-in {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms cubic-bezier(0.2,0.6,0.2,1),
              transform 700ms cubic-bezier(0.2,0.6,0.2,1);
  will-change: opacity, transform;
}
.fade-in.in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; transform: none; transition: none; }
  * { scroll-behavior: auto !important; }
}

/* ============================================================
   MOBILE / PHONE LAYER  —  added 2026-09
   Everything below lives inside @media (max-width: 640px) and
   therefore NEVER affects the desktop site. Purpose: fix the
   spacing rhythm on iPhone (too tight horizontally, too loose
   vertically) without touching the desktop layout.
   ============================================================ */

@media (max-width: 640px) {

  html { -webkit-text-size-adjust: 100%; }

  /* --- iOS Safari tap/anchor fixes -------------------------------
     1. `overflow-x: hidden` on <body> makes iOS treat the body as its
        own scroll box and quietly ignore in-page "#section" links.
        The phone layout has no horizontal overflow (checked at 320,
        375, 390, 393, 430 and 640px), so the clip is not needed here.
     2. The fixed paper-grain layer uses mix-blend-mode, and iOS can
        let it swallow taps even with pointer-events: none. The grain
        is imperceptible at phone size, so it is simply switched off.
     Both stay exactly as they were on desktop. ------------------- */
  body { overflow-x: visible; }
  body::before { display: none; }

  /* ---- Gutters: consistent 20px on both sides everywhere ---- */
  .shell, .shell-wide { width: calc(100% - 40px); }

  /* Anchor links shouldn't land under the sticky masthead */
  section[id] { scroll-margin-top: 74px; }

  /* ---- Masthead: was ~130px tall and wrapped badly ---- */
  .masthead .shell-wide { padding: 12px 0; gap: 12px; }
  .brand { gap: 10px; }
  .brand .crest { width: 30px; height: 36px; }
  .brand-word { font-size: 16px; line-height: 1.14; }
  .nav-cta {
    font-size: 9.5px;
    letter-spacing: 0.1em;
    padding: 10px 12px;
    line-height: 1.25;
    text-align: center;
  }

  /* ---- Buttons: full-width, thumb-sized ---- */
  .btn {
    padding: 15px 20px;
    font-size: 11.5px;
    letter-spacing: 0.12em;
    gap: 10px;
    width: 100%;
    justify-content: center;
  }

  /* ---- Hero ---- */
  .hero { min-height: 0; padding: 8px 0 28px; }
  .hero-inner { min-height: 0; padding-top: 8px; }
  .hero-body { gap: 28px; padding: 26px 0 4px; }
  .hero h1 {
    font-size: clamp(31px, 8.6vw, 38px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    max-width: none;
  }
  .hero-lede {
    margin-top: 20px;
    font-size: 16.5px;
    line-height: 1.5;
    max-width: none;
  }
  .hero-actions { margin-top: 24px; gap: 10px; }
  .hero-card { padding: 22px 20px 18px; }
  .hero-card .seal-row { gap: 14px; padding-bottom: 18px; margin-bottom: 16px; }
  .hero-card .seal-row .crest { width: 40px; height: 48px; }
  .hero-card .seal-row .seal-copy { font-size: 14px; }
  .hero-card .fact { padding: 11px 0; gap: 14px; }
  .hero-card .fact .v { font-size: 17px; }

  /* ---- Shared section rhythm ---- */
  .section { padding: 54px 0; }
  .section.tight { padding: 44px 0; }
  .section-head {
    gap: 14px;
    padding-bottom: 24px;
    margin-bottom: 28px;
  }
  .section-head .marker { padding-top: 0; }
  .section-head h2 { max-width: none; }
  .section-head .head-right {
    font-size: 16.5px;
    line-height: 1.5;
    padding-top: 0;
    max-width: none;
  }
  .section-head .head-right .aside { margin-top: 12px; font-size: 10.5px; letter-spacing: 0.14em; }

  h2 { font-size: clamp(27px, 7.4vw, 33px); line-height: 1.08; }
  h3 { font-size: 23px; }
  .eyebrow { font-size: 10.5px; letter-spacing: 0.16em; gap: 9px; }
  .marker { font-size: 10.5px; letter-spacing: 0.16em; }

  /* ---- Thesis ---- */
  .thesis { padding: 44px 0; }
  .thesis .shell { gap: 14px; }
  .thesis .marker { padding-top: 0; }
  .thesis blockquote { font-size: 26px; line-height: 1.14; max-width: none; }
  .thesis .cite { font-size: 15px; padding-top: 14px; margin-top: 16px; max-width: none; }

  /* ---- The week ---- */
  /* Zero side padding so day copy aligns to the same 20px gutter
     as the section heading above it (blocks sit inside .shell-wide) */
  .week-block { padding: 24px 0 26px; }
  .week-block .roman { font-size: 46px; margin-bottom: 10px; }
  .week-block .day-name { font-size: 10.5px; letter-spacing: 0.14em; padding-bottom: 10px; margin-bottom: 14px; }
  .week-block .verb { font-size: 25px; margin-bottom: 10px; }
  .week-block .day-text { font-size: 16px; line-height: 1.45; }
  .week-block .folio { margin-top: 16px; padding-top: 10px; font-size: 9.5px; letter-spacing: 0.14em; }

  /* ---- Why it works ---- */
  .why-rules { margin-bottom: 36px; }
  .why-rule { padding: 28px 0 30px; }
  .why-rule .rule-num { font-size: 12px; letter-spacing: 0.14em; margin-bottom: 14px; }
  .why-rule h3 { font-size: 25px; line-height: 1.1; margin-bottom: 14px; }
  .why-rule p { font-size: 16.5px; line-height: 1.5; max-width: none; }

  .friday-card { gap: 26px; padding: 30px 20px 32px; }
  .friday-card .friday-tag { font-size: 12px; letter-spacing: 0.14em; margin-bottom: 14px; }
  .friday-card h3 { font-size: 28px; line-height: 1.06; margin-bottom: 14px; }
  .friday-card .friday-sub { font-size: 16px; max-width: none; }
  .friday-list li { padding: 15px 0 15px 34px; font-size: 16.5px; line-height: 1.35; }
  .friday-list li::before { top: 18px; font-size: 10px; letter-spacing: 0.1em; }

  .rules-quote { margin-top: 36px; font-size: 22px; line-height: 1.26; }
  .rules-quote .attrib { margin-top: 16px; font-size: 10px; letter-spacing: 0.16em; }

  /* ---- What we bring ---- */
  .bring-col { padding: 26px 0 28px; }
  .bring-col .col-label { font-size: 11px; letter-spacing: 0.16em; margin-bottom: 16px; }
  .bring-col h3 { font-size: 21px; line-height: 1.2; margin-bottom: 18px; max-width: none; }
  .bring-col ul li {
    grid-template-columns: 26px 1fr;
    gap: 10px;
    padding: 13px 0;
    font-size: 16px;
    line-height: 1.4;
  }
  .bring-col ul li .k { font-size: 10px; letter-spacing: 0.04em; }

  /* ---- Pull quote ---- */
  .pull { padding: 46px 0; }
  .pull .shell { gap: 16px; }
  .pull blockquote { font-size: 24px; line-height: 1.16; padding-left: 24px; max-width: none; }
  .pull blockquote::before { font-size: 56px; top: -12px; left: -4px; }
  .pull .cite { padding-left: 24px; font-size: 14px; padding-top: 14px; margin-top: 14px; max-width: none; }

  /* ---- Founders ---- */
  .founders-grid { gap: 40px; }
  .founder { gap: 18px; }
  .founder-portrait { width: 172px; }
  .founder .role { font-size: 10px; letter-spacing: 0.16em; margin-bottom: 8px; }
  .founder h3 { font-size: 27px; margin-bottom: 8px; }
  .founder .tagline { font-size: 16px; margin-bottom: 14px; padding-bottom: 14px; }
  .founder .credentials {
    font-size: 10px;
    letter-spacing: 0.1em;
    line-height: 1.6;
    margin-bottom: 14px;
  }
  .founder p { font-size: 16px; line-height: 1.55; margin-bottom: 16px; max-width: none; }
  .founder .email { font-size: 13px; word-break: break-word; }

  /* ---- Closing banner ---- */
  .banner { padding: 52px 0; }
  .banner .shell { gap: 24px; }
  .banner .eyebrow { margin-bottom: 16px; }
  .banner h2 { font-size: 28px; line-height: 1.08; max-width: none; }
  .banner .right p { font-size: 16.5px; line-height: 1.5; margin-bottom: 16px; max-width: none; }

  /* ---- Contact ---- */
  .contact { padding: 54px 0; }
  .contact-grid { gap: 32px; }
  .contact-left .marker { margin-bottom: 14px; }
  .contact-left h2 { max-width: none; margin-bottom: 16px; }
  .contact-left p { font-size: 16.5px; line-height: 1.55; margin-bottom: 22px; max-width: none; }

  .contact-direct { padding: 4px 0; font-size: 15px; margin-bottom: 16px; }
  .contact-direct .row {
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 14px 0;
  }
  .contact-direct .k { font-size: 10px; letter-spacing: 0.16em; }
  .contact-direct a { word-break: break-word; }

  .contact-form { padding: 22px 18px 24px; gap: 18px; }
  .field { gap: 7px; }
  .field label { font-size: 10px; letter-spacing: 0.16em; }
  .field input, .field textarea { font-size: 16px; padding: 11px 0; }
  .field textarea { min-height: 88px; }
  .field-row { gap: 18px; }
  .contact-form button { align-self: stretch; margin-top: 6px; }

  /* ---- Footer ---- */
  .foot { padding: 44px 0 30px; }
  .foot-top { gap: 26px; padding-bottom: 26px; }
  .foot .brand-word { font-size: 18px; }
  .foot-tag { font-size: 16px; margin-top: 14px; max-width: none; }
  .foot-nav-title { font-size: 10px; letter-spacing: 0.16em; margin-bottom: 10px; }
  .foot-nav a { font-size: 15px; padding: 9px 0; }
  .foot-mid { padding: 18px 0; font-size: 11.5px; gap: 6px; }
  .foot-bot { padding-top: 18px; font-size: 11.5px; line-height: 1.7; }
}