/* OCH read-more gate. Loaded on single posts only (is_singular('post')).
   Brand tokens come from the theme (Tailwind v4 :root vars), with fallbacks. */
.och-gate {
  --g-navy:  var(--color-secondary-900, #0b1a2b);
  --g-navy2: var(--color-secondary-800, #0f2030);
  --g-line:  var(--color-secondary-700, #16273a);
  --g-yel:   var(--color-primary, #ffba00);
  --g-yel-d: var(--color-primary-700, #b98600);
  --g-cream: var(--color-background, #fff7eb);
  --g-sans:  var(--font-sans, "Montserrat", ui-sans-serif, system-ui, sans-serif);
  --g-script:var(--font-script, "Kaushan Script", cursive);
}

/* ---------- Gated state (html.och-gate-on is set in <head> before paint) ----------
   v0.3.8: the gate card is printed right BEFORE the gated part (which starts at the "The Details" heading, or after
   ~200 words). While locked the gated part is fully collapsed (still in the HTML for SEO), so nothing of The Details
   shows above the card. The soft fade now sits over the last visible lines, just above the card (.och-gate::before).
   (v0.3.6/0.3.7 peeked the first 8.5rem of the gated part, i.e. the The Details heading, above the card.) */
.och-gate { --och-fade-bg: var(--color-background, #fff7eb); }
.och-gate-on .och-gated {
  max-height: 0;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.och-gate-on .och-gate:not(.is-unlocked)::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: 6rem;
  margin-bottom: 2.25rem;      /* fade covers the last visible lines, ending where the card's top margin starts */
  background: linear-gradient(to bottom,
    rgb(255 247 235 / 0) 0%,
    color-mix(in srgb, var(--och-fade-bg) 70%, transparent) 50%,
    var(--och-fade-bg) 100%);
  pointer-events: none;
  z-index: 0;
}
.och-gate-on .och-gate { display: block; }      /* overrides the [hidden] attribute */
.och-gate[hidden] { display: none; }
.och-gate-on .och-gate[hidden] { display: block; }

/* Unlock: animate the rest of the story open */
.och-gate-opening .och-gated {
  max-height: var(--och-full, 400rem);
  transition: max-height .6s ease;
}

/* ---------- Gate card ---------- */
.och-gate {
  position: relative;
  margin: 2.25rem 0 1rem;       /* v0.3.8: card sits between the visible story and the collapsed gated part */
  padding: 2.75rem 2.5rem 2rem;
  border-radius: 1.5rem;
  background:
    radial-gradient(circle at 1.5px 1.5px, rgb(255 255 255 / .06) 1.5px, transparent 1.6px) 0 0 / 22px 22px,
    var(--g-navy);
  color: var(--g-cream);
  font-family: var(--g-sans);
  box-shadow: 0 6px 0 0 var(--g-yel), 0 24px 48px -20px rgb(11 26 43 / .55);
  text-align: left;
  isolation: isolate;
}
.och-gate__mascot {
  position: absolute;
  right: 1.5rem; top: -3.25rem;
  width: 7.5rem; height: auto;
  transform: rotate(6deg);
  filter: drop-shadow(0 10px 12px rgb(0 0 0 / .35));
  z-index: 1;
  pointer-events: none;
}
.och-gate__eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  margin: 0 0 .75rem;
  font-weight: 800; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--g-yel);
}
.och-gate__eyebrow::before { content: ""; width: 1.5rem; height: 3px; border-radius: 2px; background: var(--g-yel); }
.och-gate__title {
  margin: 0 7rem .75rem 0;
  font-family: var(--g-sans);
  font-weight: 900; text-transform: uppercase;
  font-size: clamp(2rem, 4.2vw, 2.75rem); line-height: .95; letter-spacing: -.01em;
  color: #fff;
}
.och-gate__script {
  display: inline-block;
  font-family: var(--g-script); font-weight: 400; text-transform: none;
  color: var(--g-yel);
  font-size: 1.2em; line-height: 1;
  transform: rotate(-4deg) translateY(.06em);
  margin-left: .1em;
}
.och-gate__lede {
  margin: 0 0 1.4rem; max-width: 34rem;
  font-size: 1.0625rem; line-height: 1.55; font-weight: 500;
  color: var(--color-secondary-100, #e6eaee);
}

/* Form (our form, or the beehiiv embed in the same slot) */
.och-gate__form { display: flex; gap: .75rem; margin: 0; }
.och-gate__form input[type="email"] {
  flex: 1 1 auto; min-width: 0;
  padding: 1rem 1.35rem;
  border: 2px solid transparent; border-radius: 999px;
  background: #fff; color: var(--g-navy);
  font: 600 1rem/1.2 var(--g-sans);
  appearance: none;
}
.och-gate__form input[type="email"]::placeholder { color: var(--color-secondary-400, #64798e); font-weight: 500; }
.och-gate__form input[type="email"]:focus { outline: none; border-color: var(--g-yel); box-shadow: 0 0 0 4px rgb(255 186 0 / .35); }
.och-gate__form input[aria-invalid="true"] { border-color: #ff8a8a; }
.och-gate__btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 1rem 1.6rem;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--g-yel); color: var(--g-navy);
  font: 800 .875rem/1 var(--g-sans); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 5px 0 0 var(--g-yel-d);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.och-gate__btn:hover { background: var(--color-primary-400, #ffc526); transform: translateY(-1px); }
.och-gate__btn:active { transform: translateY(3px); box-shadow: 0 2px 0 0 var(--g-yel-d); }
.och-gate__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.och-gate__btn[disabled] { opacity: .7; cursor: progress; }
.och-gate__btn--ghost { margin-top: .9rem; background: transparent; color: var(--g-yel); box-shadow: inset 0 0 0 2px var(--g-yel); }
.och-gate__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.och-gate__embed iframe { display: block; width: 100% !important; max-width: 100%; border: 0; border-radius: 1rem; background: transparent; }

/* message element is shared ([data-och-msg]) */
.och-gate__msg { min-height: 1.25rem; margin: .7rem 0 0; font-weight: 600; font-size: .95rem; color: var(--g-yel); }
.och-gate__msg.is-error { color: #ffb4b4; }

.och-gate__perks {
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem;
  margin: .4rem 0 0; padding: 0; list-style: none;
}
.och-gate__perks li {
  display: inline-flex; align-items: center; gap: .45rem; margin: 0; padding: 0;
  font-weight: 800; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: #fff;
}
.och-gate__perks li::before {
  content: ""; width: .55rem; height: .55rem; border-radius: 999px; background: var(--g-yel);
}
.och-gate__fine { margin: .65rem 0 0; font-size: .8rem; font-weight: 500; color: var(--color-secondary-300, #9aabbb); text-align: inherit; }

/* ---------- v0.3.7 "Already subscribed?" sign-in mode ---------- */
.och-gate [hidden] { display: none !important; }
.och-gate__eyebrow--signin, .och-gate__title--signin, .och-gate__lede--signin { display: none; }
.och-gate.is-signin .och-gate__eyebrow:not(.och-gate__eyebrow--signin),
.och-gate.is-signin .och-gate__title:not(.och-gate__title--signin),
.och-gate.is-signin .och-gate__lede:not(.och-gate__lede--signin),
.och-gate.is-signin .och-gate__perks { display: none; }
.och-gate.is-signin .och-gate__eyebrow--signin { display: inline-flex; }
.och-gate.is-signin .och-gate__title--signin,
.och-gate.is-signin .och-gate__lede--signin { display: block; }
.och-gate__switch-row { margin: 1rem 0 0; }
.och-gate__switch {
  padding: .25rem 0; border: 0; background: none; cursor: pointer;
  font: 600 .95rem/1.4 var(--g-sans); color: var(--g-cream);
}
.och-gate__switch span {
  font-weight: 800; color: var(--g-yel);
  text-decoration: underline; text-decoration-color: #ffa94d; text-decoration-thickness: 2px; text-underline-offset: .3em;
}
.och-gate__switch:hover span { color: #ffa94d; }
.och-gate__switch:focus-visible { outline: 3px solid var(--g-yel); outline-offset: 4px; border-radius: .4rem; }
.och-gate__msg.is-neutral { color: #ffa94d; }
.och-gate.is-done .och-gate__switch-row,
.och-gate.is-done [data-och-subscribe-instead] { display: none !important; }

/* ---------- v0.3.5 success: the gate becomes the "You're in!" card at the unlock point ---------- */
.och-gate.is-done .och-gate__eyebrow,
.och-gate.is-done .och-gate__title,
.och-gate.is-done .och-gate__lede,
.och-gate.is-done .och-gate__form,
.och-gate.is-done .och-gate__msg,
.och-gate.is-done .och-gate__perks,
.och-gate.is-done .och-gate__fine { display: none; }
.och-gate.is-done {
  margin: 1.75rem 0 2rem;
  padding: 1.6rem 9rem 1.6rem 1.6rem;
  background:
    radial-gradient(circle, #ffa94d 0 3px, transparent 3.5px) right 9.5rem top 1.1rem / 10px 10px no-repeat,
    radial-gradient(circle, var(--g-yel) 0 4px, transparent 4.5px) right 10.6rem bottom 1.2rem / 12px 12px no-repeat,
    radial-gradient(circle at 1.5px 1.5px, rgb(255 255 255 / .06) 1.5px, transparent 1.6px) 0 0 / 22px 22px,
    var(--g-navy);
  animation: och-gate-done-pop .45s cubic-bezier(.2, .9, .3, 1.35) both;
}
.och-gate.is-done .och-gate__mascot { top: 50%; width: 6.5rem; transform: translateY(-50%) rotate(6deg); }
.och-gate .och-done:focus-visible { outline: 3px solid var(--g-yel); outline-offset: 8px; border-radius: .75rem; }
.och-gate .och-done__title { color: var(--g-yel); font-size: 1.75rem; text-transform: none; }
.och-gate .och-done__body { color: var(--g-cream); font-size: 1.0625rem; max-width: 30rem; }
@keyframes och-gate-done-pop { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .och-gate { padding: 3.75rem 1.25rem 1.5rem; border-radius: 1.25rem; text-align: center; }
  .och-gate__mascot { width: 5.75rem; right: 50%; top: -3rem; transform: translateX(50%) rotate(4deg); }
  .och-gate__eyebrow { justify-content: center; }
  .och-gate__title { margin-right: 0; font-size: 2rem; }
  .och-gate__lede { font-size: 1rem; margin-left: auto; margin-right: auto; }
  .och-gate__form { flex-direction: column; }
  .och-gate__form input[type="email"], .och-gate__btn { width: 100%; font-size: 1rem; } /* 16px input = no iOS zoom */
  .och-gate__btn { padding: 1.05rem 1.25rem; }
  .och-gate__perks { justify-content: center; }
  .och-gate__btn--ghost { width: 100%; }
  .och-gate { margin-top: 3.5rem; }   /* room for the centred mascot */
  .och-gate-on .och-gate:not(.is-unlocked)::before { height: 4.5rem; margin-bottom: 3.5rem; }
  .och-gate.is-done {
    margin-top: 3.75rem; padding: 3.5rem 1.25rem 1.5rem;
    background:
      radial-gradient(circle, #ffa94d 0 3px, transparent 3.5px) left 1.4rem top 1.3rem / 10px 10px no-repeat,
      radial-gradient(circle, var(--g-yel) 0 4px, transparent 4.5px) right 1.5rem top 1.6rem / 12px 12px no-repeat,
      radial-gradient(circle at 1.5px 1.5px, rgb(255 255 255 / .06) 1.5px, transparent 1.6px) 0 0 / 22px 22px,
      var(--g-navy);
  }
  .och-gate.is-done .och-gate__mascot { top: -3rem; width: 5.25rem; transform: translateX(50%) rotate(4deg); }
  .och-gate .och-done { flex-direction: column; align-items: center; text-align: center; gap: .7rem; }
  .och-gate .och-done__title { font-size: 1.5rem; }
  .och-gate .och-done__body { margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .och-gate-opening .och-gated, .och-gate__btn { transition: none; }
  .och-gate.is-done { animation: none; }
}
@media print {             /* printing shows the full article */
  .och-gate { display: none !important; }
  .och-gate-on .och-gated { max-height: none; overflow: visible; }
  .och-gate-on .och-gate::before { content: none; }
}