/* ==========================================================================
   The Economic Blindspot
   Palette and type sampled from the brand's own assets: the EB monogram
   (navy #062755), the credit-score e-book, and the Instagram reels
   (paper #f2f2f2, hairline rules, wide-tracked caps labels, red accent).

   Light theme only, deliberately. This is a print-emulating editorial layout,
   and Instagram's official embeds render as fixed white cards that cannot be
   themed. A dark mode would break in the one section we do not control.
   ========================================================================== */

/* ---------- fonts (self-hosted, no external requests) ---------- */
@font-face {
  font-family: 'Geist';
  src: url('fonts/geist-latin.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  --paper:      #f3f2ef;
  --surface:    #ffffff;
  --rule:       #e0ded7;
  --rule-soft:  #eae8e2;

  --ink:        #10131a;
  --ink-2:      #4a5160;
  --ink-3:      #656c7a;   /* 4.76:1 on --paper, clears WCAG AA for small text */

  --navy:       #062755;
  --navy-2:     #0a3872;
  --red:        #c8322f;

  /* Headline font. The whole site runs on Geist, headlines just sit heavier and
     tighter than body text. To try a different one, change this line only.
     'Outfit', 'Archivo', 'Manrope' and 'Inter Tight' are all sized to fit this
     layout; each needs its woff2 in assets/fonts/ and an @font-face above. */
  --display: 'Geist', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --sans:  'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --r: 3px;                      /* one radius for the whole page */
  --gut: clamp(20px, 4vw, 40px);
  --sec: clamp(72px, 9vw, 124px);
  --max: 1200px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 500;
  background: var(--navy); color: #fff; padding: 12px 18px; border-radius: var(--r);
  font-size: 13px; font-weight: 600;
}
.skip:focus { left: 12px; top: 12px; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: var(--sec); }
.rule-top { border-top: 1px solid var(--rule); }

/* ---------- type ---------- */
.kicker {
  font-size: 11px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-2);
  display: flex; align-items: center; gap: 12px;
}
.kicker::before {
  content: ''; width: 26px; height: 2px; background: var(--red); flex: none;
}

h1, h2, h3 { font-family: var(--display); font-weight: 650; line-height: 1.05; letter-spacing: -0.038em; }
h1 { font-size: clamp(2.25rem, 4.4vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3.3vw, 2.6rem); }
h3 { font-size: clamp(1.1rem, 1.8vw, 1.32rem); line-height: 1.18; letter-spacing: -0.02em; }

.lede { font-size: clamp(1rem, 1.25vw, 1.1rem); color: var(--ink-2); max-width: 52ch; }
.prose p { color: var(--ink-2); max-width: 62ch; }
.prose p + p { margin-top: 1.1em; }
.meta {
  font-size: 12px; letter-spacing: 0.05em; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  padding: 13px 22px; border-radius: var(--r);
  font-size: 14px; font-weight: 600; letter-spacing: 0.01em; text-decoration: none;
  transition: background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .12s var(--ease);
}
.btn svg { flex: none; }
.btn-primary { background: var(--navy); color: #fff; border: 1px solid var(--navy); }
.btn-primary:hover { background: var(--navy-2); border-color: var(--navy-2); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule); }
.btn-ghost:hover { border-color: var(--navy); color: var(--navy); }
.btn-onnavy { background: #fff; color: var(--navy); border: 1px solid #fff; }
.btn-onnavy:hover { background: rgba(255,255,255,.88); }
.btn:active { transform: translateY(1px); }

.arrow { transition: transform .2s var(--ease); }
a:hover .arrow, .btn:hover .arrow { transform: translateX(3px); }

/* ---------- brand mark ---------- */
.mark { display: block; border-radius: 2px; background: var(--navy); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.hdr {
  position: sticky; top: 0; z-index: 100;
  height: 64px; display: flex; align-items: center;
  background: rgba(243,242,239,.88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rule);
}
.hdr .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand img { width: 30px; height: 30px; }
.brand span {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; white-space: nowrap;
}
.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  padding: 8px 13px; border-radius: var(--r); text-decoration: none;
  font-size: 13.5px; font-weight: 500; color: var(--ink-2);
  transition: color .15s var(--ease), background .15s var(--ease);
}
.nav a:hover { color: var(--ink); background: rgba(6,39,85,.06); }
.burger { display: none; padding: 8px; border-radius: var(--r); }
.burger:hover { background: rgba(6,39,85,.06); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { padding-top: clamp(56px, 7vw, 92px); padding-bottom: clamp(64px, 8vw, 108px); }
.hero-grid {
  display: grid; grid-template-columns: 1.35fr .85fr;
  gap: clamp(32px, 5vw, 76px); align-items: center;
}
.hero h1 { margin-bottom: 22px; text-wrap: balance; }
.hero .lede { margin-bottom: 30px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-mark { position: relative; max-width: 400px; margin-left: auto; width: 100%; }
.hero-mark img {
  width: 100%; border-radius: var(--r);
  box-shadow: 0 22px 60px -28px rgba(6,39,85,.5);
}
.hero-mark figcaption {
  margin-top: 14px; font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3); text-align: center;
}

/* ==========================================================================
   BOOK
   ========================================================================== */
.book-grid {
  display: grid; grid-template-columns: .78fr 1.22fr;
  gap: clamp(30px, 5vw, 68px); align-items: center;
}
.book-cover {
  border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden;
  background: var(--surface);
  box-shadow: 0 26px 64px -34px rgba(16,19,26,.55);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.book-cover:hover { transform: translateY(-4px); box-shadow: 0 34px 74px -34px rgba(16,19,26,.6); }
.book-body h2 { margin: 16px 0 8px; }
.book-sub {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 20px;
}
.book-body .prose { margin-bottom: 28px; }

.stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; margin-bottom: 30px;
  border-top: 1px solid var(--rule); padding-top: 22px;
}
.stat b {
  display: block; font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 600;
  letter-spacing: -0.03em; color: var(--navy); font-variant-numeric: tabular-nums;
  line-height: 1;
}
.stat span { display: block; font-size: 13px; color: var(--ink-2); margin-top: 8px; line-height: 1.4; }
.stat cite { display: block; font-size: 11px; font-style: normal; color: var(--ink-3); margin-top: 6px; letter-spacing: .04em; }
.book-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* ==========================================================================
   WRITING
   ========================================================================== */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 44px; }
.sec-head h2 { margin-top: 14px; }

.lead-post {
  display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end;
  text-decoration: none; padding-bottom: 34px; border-bottom: 1px solid var(--rule);
}
.lead-post h2, .lead-post h3 { font-size: clamp(1.4rem, 2.6vw, 1.95rem); margin: 10px 0 12px; transition: color .2s var(--ease); }
.lead-post:hover h2, .lead-post:hover h3 { color: var(--navy); }
.lead-post p { color: var(--ink-2); max-width: 58ch; margin-bottom: 14px; }

.post-list { list-style: none; }
.post-list li { border-bottom: 1px solid var(--rule-soft); }
.post-list a {
  display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center;
  padding: 26px 0; text-decoration: none;
  transition: padding-left .25s var(--ease);
}
.post-list a:hover { padding-left: 10px; }
.post-list h2, .post-list h3 { margin-bottom: 7px; transition: color .2s var(--ease); }
.post-list a:hover h2, .post-list a:hover h3 { color: var(--navy); }
.post-list p { font-size: 14.5px; color: var(--ink-2); max-width: 62ch; }
.post-go { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.post-list a:hover .post-go, .lead-post:hover .post-go { color: var(--navy); }

/* empty state */
.empty {
  border: 1px dashed var(--rule); border-radius: var(--r);
  padding: clamp(34px, 6vw, 60px); text-align: center; background: rgba(255,255,255,.5);
}
.empty h3 { font-family: var(--sans); font-size: 1.05rem; font-weight: 600; letter-spacing: 0; margin-bottom: 10px; }
.empty p { color: var(--ink-2); font-size: 14.5px; max-width: 44ch; margin: 0 auto 22px; }

/* ==========================================================================
   INSTAGRAM
   ========================================================================== */
.reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 26px); }
.reel figure { position: relative; border-radius: var(--r); overflow: hidden; background: #0b0e18; border: 1px solid var(--rule); }
.reel video, .reel img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
.reel video { display: none; }
.reel.playing video { display: block; }
.reel.playing img { display: none; }
.reel-play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(11,14,24,0) 55%, rgba(11,14,24,.35) 100%);
  transition: background .25s var(--ease);
}
.reel:hover .reel-play { background: linear-gradient(180deg, rgba(11,14,24,.15) 40%, rgba(11,14,24,.5) 100%); }
.reel-play i {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.94); transition: transform .25s var(--ease);
}
.reel:hover .reel-play i { transform: scale(1.07); }
.reel.playing .reel-play { display: none; }
.reel figcaption { margin-top: 13px; font-size: 13.5px; color: var(--ink-2); }
.reel figcaption b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 3px; }

.ig-embeds { margin-top: clamp(40px, 5vw, 64px); }
.ig-embeds h3 {
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 22px;
}
.ig-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; align-items: start; }
.ig-grid .instagram-media { margin: 0 !important; min-width: 0 !important; width: 100% !important; }
.ig-skeleton { aspect-ratio: 4 / 5; border-radius: var(--r); background: var(--rule-soft); }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about-grid { display: grid; grid-template-columns: .62fr 1.38fr; gap: clamp(30px, 6vw, 80px); align-items: start; }
.about-rail { position: sticky; top: 92px; }
.about-rail img { width: 132px; border-radius: var(--r); margin-bottom: 20px; }
.about-block + .about-block { margin-top: clamp(44px, 6vw, 68px); padding-top: clamp(40px, 5vw, 56px); border-top: 1px solid var(--rule); }
.about-block h2 { margin-bottom: 20px; }
.about-block .prose p { font-size: 1.0625rem; }
.founder { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.founder img { width: 46px; height: 46px; border-radius: var(--r); }
.founder b { display: block; font-size: 14.5px; }
.founder span { font-size: 12.5px; color: var(--ink-3); }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact { background: var(--surface); border-block: 1px solid var(--rule); }
.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.contact h2 { margin-bottom: 14px; }
.contact-cta { display: flex; justify-content: flex-end; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ftr { background: var(--navy); color: rgba(255,255,255,.72); padding-block: clamp(52px, 6vw, 76px); }
.ftr-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
.ftr-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ftr-brand img { width: 34px; height: 34px; border-radius: 2px; }
.ftr-brand span { font-size: 11.5px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: #fff; }
.ftr p { font-size: 14px; max-width: 40ch; }
.ftr h2 { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #fff; margin-bottom: 14px; }
.ftr ul { list-style: none; display: grid; gap: 9px; }
.ftr ul a { font-size: 14px; text-decoration: none; transition: color .15s var(--ease); }
.ftr ul a:hover { color: #fff; }
.ftr-legal { border-top: 1px solid rgba(255,255,255,.16); padding-top: 26px; display: grid; gap: 14px; }
.ftr-legal p { font-size: 12.5px; line-height: 1.65; max-width: 78ch; color: rgba(255,255,255,.6); }
.ftr-legal b { color: rgba(255,255,255,.9); font-weight: 600; }
.ftr-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 12.5px; color: rgba(255,255,255,.55); }

/* ==========================================================================
   MOTION
   Hover states, image fade in, skeleton shimmer and the disclaimer bar slide.
   There is deliberately NO scroll reveal animation. An earlier version hid
   every section until an observer said it was visible, and a fast flick scroll
   on a phone could outrun it and leave whole sections blank permanently. The
   page is worth more than the effect, so sections simply render.
   ========================================================================== */

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 980px) {
  /* Single column from here down. The mark must drop to the left edge with the
     rest of the content, otherwise margin-left:auto strands it on the right
     with a wide empty gap beside it, which is what it did on an iPad. */
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-mark { max-width: min(260px, 100%); margin-left: 0; }
  .hero { padding-bottom: clamp(48px, 6vw, 72px); }
  .book-grid { grid-template-columns: 1fr; }
  .book-cover { max-width: min(380px, 100%); }
  .about-grid { grid-template-columns: 1fr; }
  .about-rail { position: static; }
  .about-rail img { width: 96px; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-cta { justify-content: flex-start; }
  .ftr-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .nav {
    display: none; position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--rule); padding: 8px var(--gut) 16px;
  }
  .nav.open { display: flex; }
  .nav a { padding: 13px 0; border-bottom: 1px solid var(--rule-soft); border-radius: 0; font-size: 15px; }
  .nav a:hover { background: none; }
  .burger { display: grid; place-items: center; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .lead-post, .post-list a { grid-template-columns: 1fr; gap: 14px; }
  .reels { grid-template-columns: 1fr; gap: 28px; }
  .reel figure { max-width: min(340px, 100%); }
  .stats { grid-template-columns: 1fr; gap: 20px; }
  .ftr-top { grid-template-columns: 1fr; gap: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

@media print {
  .hdr, .reel-play, .contact-cta { display: none; }
  body { background: #fff; }
}

/* ==========================================================================
   MULTI-PAGE ADDITIONS
   ========================================================================== */

/* active tab marker, matching the red rule used in the reels */
.nav a { position: relative; }
.nav a.active { color: var(--ink); font-weight: 600; }
.nav a.active::after {
  content: ''; position: absolute; left: 13px; right: 13px; bottom: 3px;
  height: 2px; background: var(--red);
}

/* page header on the inner tabs */
.page-head {
  padding-top: clamp(46px, 6vw, 78px);
  padding-bottom: clamp(34px, 4.5vw, 54px);
  border-bottom: 1px solid var(--rule);
}
.page-head-grid { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; }
.page-head h1 { font-size: clamp(2rem, 3.9vw, 3rem); margin: 14px 0 16px; }
.page-head .lede { margin-bottom: 0; }

/* homepage section header link row */
.more-row { margin-top: 40px; }

/* e-books page */
.book-row { display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(30px, 5vw, 68px); align-items: center; }
.book-row.rule-top { margin-top: var(--sec); padding-top: var(--sec); }
.book-next {
  margin-top: var(--sec); padding-top: var(--sec); border-top: 1px solid var(--rule);
}
.book-next h2 { margin: 16px 0 8px; }
.book-next .prose { margin-bottom: 26px; }

/* contact page */
.contact-page { display: grid; grid-template-columns: 1.4fr .6fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.form-card {
  border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface);
  overflow: hidden;
}
.form-card iframe { display: block; width: 100%; min-height: 1620px; border: 0; }
.contact-rail { position: sticky; top: 92px; }
.contact-rail h2 {
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px;
}
.contact-rail p { font-size: 14.5px; color: var(--ink-2); margin-bottom: 20px; }
.contact-rail .alt { display: grid; gap: 10px; }
.contact-rail .alt a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--r);
  text-decoration: none; font-size: 14px; font-weight: 500;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.contact-rail .alt a:hover { border-color: var(--navy); color: var(--navy); }

@media (max-width: 980px) {
  .book-row { grid-template-columns: 1fr; }
  .contact-page { grid-template-columns: 1fr; }
  .contact-rail { position: static; }
}
@media (max-width: 760px) {
  .page-head-grid { flex-direction: column; align-items: flex-start; gap: 18px; }
  .nav a.active::after { left: 0; right: auto; width: 20px; bottom: 8px; }
  .form-card iframe { min-height: 1800px; }
}

/* line introducing the Instagram, above the reels */
.ig-intro {
  font-size: 1.0625rem; color: var(--ink-2); max-width: 62ch;
  margin: -14px 0 32px;
}
.ig-intro a {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  color: var(--navy); font-weight: 600; text-decoration: none;
  border-bottom: 2px solid rgba(6,39,85,.28);
  transition: border-color .2s var(--ease);
}
.ig-intro a:hover { border-bottom-color: var(--navy); }

/* founder byline on the About page */
.founder {
  display: flex; align-items: center; gap: 20px;
  margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--rule);
}
.founder img {
  width: 112px; height: 112px; flex: none;
  border-radius: var(--r); object-fit: cover;
  border: 1px solid var(--rule);
}
.founder-meta b { display: block; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.founder-meta span { display: block; font-size: 13.5px; color: var(--ink-3); margin-top: 2px; }
.founder-li {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  font-size: 13.5px; font-weight: 500; color: var(--navy); text-decoration: none;
  border-bottom: 1px solid rgba(6,39,85,.25);
  transition: border-color .2s var(--ease);
}
.founder-li:hover { border-bottom-color: var(--navy); }

@media (max-width: 520px) {
  .founder { gap: 16px; }
  .founder img { width: 76px; height: 76px; }
}

/* footer sign-off: publication name with the year on its own line beneath */
.ftr-mark { display: block; }
.ftr-mark b {
  display: block; font-weight: 400; margin-top: 3px;
  color: rgba(255,255,255,.45); font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   SKELETON LOADING
   Used only where something genuinely takes time: the Instagram embeds and
   the Google Form, which are both third-party network calls, and images.
   The article, e-book and reel lists render from content.js synchronously,
   so a skeleton there would flash for a frame and read as a glitch.
   ========================================================================== */
.sk {
  position: relative; overflow: hidden;
  background: var(--rule-soft); border-radius: var(--r);
}
.sk::after {
  content: ''; position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.65) 50%, rgba(255,255,255,0) 100%);
}
@media (prefers-reduced-motion: no-preference) {
  .sk::after { animation: sk-sweep 1.5s ease-in-out infinite; }
}
@keyframes sk-sweep { 100% { transform: translateX(100%); } }

/* instagram embed placeholders, shaped like the real cards */
.ig-item { position: relative; min-width: 0; }
.ig-item .sk { aspect-ratio: 4 / 5; width: 100%; border: 1px solid var(--rule); }
.ig-item .instagram-media {
  margin: 0 !important; min-width: 0 !important; width: 100% !important;
  opacity: 0; transition: opacity .45s var(--ease);
}
.ig-item.ready .sk { display: none; }
.ig-item.ready .instagram-media { opacity: 1; }

/* google form placeholder, shaped like the form card */
.form-skeleton { padding: 28px; display: grid; gap: 18px; }
.form-skeleton .sk { height: 14px; }
.form-skeleton .sk.tall { height: 116px; }
.form-skeleton .sk.title { height: 26px; width: 62%; }
.form-skeleton .sk.short { width: 42%; }
.form-card iframe { opacity: 0; transition: opacity .45s var(--ease); }
.form-card.ready iframe { opacity: 1; }
.form-card.ready .form-skeleton { display: none; }

/* images fade in over a tinted block so nothing pops in abruptly */
.imgwrap { position: relative; background: var(--rule-soft); overflow: hidden; border-radius: var(--r); }
img.fade { opacity: 0; transition: opacity .4s var(--ease); }
img.fade.loaded { opacity: 1; }

/* ==========================================================================
   DISCLAIMER ACKNOWLEDGEMENT BAR
   Sits at the bottom until the reader acknowledges it, then never returns.
   This site sets no cookies and does no tracking, so this is not a cookie
   notice. It is the "educational only" acknowledgement.
   ========================================================================== */
.ack {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
  background: var(--navy); color: rgba(255,255,255,.82);
  border-top: 2px solid var(--red);
  box-shadow: 0 -14px 40px -20px rgba(6,39,85,.55);
}
.ack-in {
  max-width: var(--max); margin-inline: auto; padding: 18px var(--gut);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.ack p { font-size: 14px; line-height: 1.55; max-width: 78ch; }
.ack b { color: #fff; font-weight: 600; }
.ack .btn { flex: none; }

@media (prefers-reduced-motion: no-preference) {
  .ack { transform: translateY(100%); animation: ack-up .45s var(--ease) .35s forwards; }
  @keyframes ack-up { to { transform: translateY(0); } }
}
.ack.closing { transform: translateY(100%); transition: transform .3s var(--ease); animation: none; }

@media (max-width: 760px) {
  .ack-in { flex-direction: column; align-items: stretch; gap: 11px; padding: 13px var(--gut) 14px; }
  .ack .btn { justify-content: center; padding: 11px 18px; font-size: 13.5px; }
  .ack p { font-size: 12.8px; line-height: 1.45; }
}

/* shown only when JavaScript is unavailable */
.noscript-note {
  background: #fff5f5; border-bottom: 2px solid var(--red);
  padding: 16px var(--gut); text-align: center;
}
.noscript-note p { font-size: 14px; color: var(--ink); max-width: 74ch; margin-inline: auto; }
.noscript-note b { font-weight: 600; }
.noscript-note a { color: var(--navy); }