/* css/teachers.css — the teacher door (/teachers, chat 2.32).
   New file; every rule is scoped to .tp-* so nothing else on the site
   is affected. Nav, footer, .btn-primary and the brand tokens come from
   style.css unchanged.

   Idea: a worksheet sitting on a dark desk. The hero is the site's ink
   and gold; the sheet is the centerpiece, with one answer written and
   circled in pencil. Below it the page opens onto cream "paper"
   sections with ruled lines, in ink-blue — Print mode's accent. */

.tp-body {
  --tp-paper: #F5EDD8;          /* = --cream */
  --tp-sheet: #FBF8F0;          /* brighter printer paper */
  --tp-graphite: #34302A;       /* body text on paper */
  --tp-graphite-soft: #6B655B;
  --tp-rule: rgba(52,48,42,0.16);
  --tp-blue: #2E4A6B;           /* deep ink blue for paper */
  --tp-blue-light: var(--ink-blue-light);
  --tp-pencil: #5E5A55;
}

/* ── Hero: the desk ── */
.tp-hero {
  position: relative;
  background:
    radial-gradient(ellipse 70% 60% at 72% 45%, rgba(201,168,76,0.10), transparent 70%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-mid) 100%);
  overflow: hidden;
}

.tp-hero-inner {
  position: relative;
  z-index: 5;
  max-width: 1120px;
  margin: 0 auto;
  padding: 6.5rem 1.5rem 4rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 900px) {
  .tp-hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4rem;
    padding: 8rem 3rem 6rem;
  }
}

.tp-kicker {
  font-size: 0.9rem;
  color: var(--tp-blue-light);
  margin-bottom: 1rem;
  letter-spacing: 0.02em;
}

.tp-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  font-weight: 400;
  line-height: 1.12;
  color: var(--cream);
  margin-bottom: 1.25rem;
  max-width: 17ch;
}

.tp-lede {
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 34rem;
  margin-bottom: 2rem;
}

.tp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-bottom: 1rem;
}

.tp-link {
  color: var(--gold-light);
  font-size: 0.95rem;
  text-decoration: underline;
  text-decoration-color: rgba(232,201,122,0.4);
  text-underline-offset: 0.25em;
}
.tp-link:hover { text-decoration-color: var(--gold-light); }

.tp-note {
  font-size: 0.85rem;
  color: var(--ink-muted);
}

/* ── The worksheet ──
   The real printout as an image (images/teachers-sample-printout.png,
   rendered by the print builder itself), shown whole at true letter-page
   proportions so nothing on this page is bigger than what prints. Pencil
   marks are an SVG overlay in inches (viewBox 0 0 8.5 11). */
.tp-sheet {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 8.5 / 11;
  background: #FFFFFF;
  border-radius: 2px;
  box-shadow:
    0 24px 48px rgba(0,0,0,0.55),
    0 4px 10px rgba(0,0,0,0.35);
  transform: rotate(-1.6deg);
}
.tp-sheet img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 2px;
}
.tp-marks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.tp-ring {
  fill: none;
  stroke: var(--tp-pencil);
  /* In the sheet's own units (inches, viewBox 0 0 8.5 11), so the line
     scales with the image. No non-scaling-stroke: that made browsers
     disagree about dash lengths and the ring drew incompletely (chat 2.32). */
  stroke-width: 0.022;
  stroke-linecap: round;
  opacity: 0.9;
}
.tp-pencil {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 0.17px;
  fill: var(--tp-pencil);
}

@media (prefers-reduced-motion: no-preference) {
  .tp-sheet { animation: tp-settle 0.9s cubic-bezier(.2,.7,.2,1) both 0.15s; }
  @keyframes tp-settle {
    from { opacity: 0; transform: rotate(-4deg) translateY(18px); }
    to   { opacity: 1; transform: rotate(-1.6deg) translateY(0); }
  }
  /* The ring is a <path> with pathLength="100" (supported for paths in
     every current browser), so a 100-unit dash is exactly one full ring. */
  .tp-ring { stroke-dasharray: 100; stroke-dashoffset: 100; animation: tp-draw 0.9s ease-out forwards 1.1s; }
  @keyframes tp-draw { to { stroke-dashoffset: 0; } }
  .tp-pencil { opacity: 0; animation: tp-write 0.5s ease-out forwards 0.7s; }
  @keyframes tp-write { to { opacity: 1; } }
}

/* ── Paper sections ── */
.tp-paper {
  /* Plain paper (chat 2.32): the ruled lines were dropped — text never sat
     on them, so they looked messy rather than like a worksheet. */
  background: var(--tp-paper);
  color: var(--tp-graphite);
}

.tp-section {
  max-width: 920px;
  margin: 0 auto;
  padding: 4.5rem 1.5rem;
}
.tp-section + .tp-section { border-top: 1px solid var(--tp-rule); }

@media (min-width: 760px) {
  .tp-section { padding: 5.5rem 3rem; }
}

.tp-h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 3.6vw, 2.3rem);
  line-height: 1.2;
  color: var(--tp-graphite);
  max-width: 24ch;
  margin-bottom: 2rem;
}

/* Why */
.tp-why-cols {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 760px) {
  .tp-why-cols { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}
.tp-why-cols p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--tp-graphite);
  padding-left: 1rem;
  border-left: 2px solid var(--tp-blue);
}

/* Uses: ruled like a worksheet */
.tp-ruled { border-top: 1px solid var(--tp-graphite-soft); }
.tp-ruled-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--tp-rule);
}
@media (min-width: 760px) {
  .tp-ruled-row { grid-template-columns: 15rem 1fr; gap: 2rem; align-items: baseline; }
}
.tp-ruled dt {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  color: var(--tp-blue);
}
.tp-ruled dd {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--tp-graphite);
  max-width: 36rem;
}

/* Steps: a real sequence, so numbered */
.tp-step-list {
  list-style: none;
  counter-reset: tp-step;
  display: grid;
  gap: 2rem;
  margin-bottom: 2.5rem;
}
@media (min-width: 760px) {
  .tp-step-list { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}
.tp-step-list li { counter-increment: tp-step; }
.tp-step-list li::before {
  content: counter(tp-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 1.5px solid var(--tp-blue);
  border-radius: 50%;
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  color: var(--tp-blue);
  margin-bottom: 0.9rem;
}
.tp-step-list h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--tp-graphite);
  margin-bottom: 0.4rem;
}
.tp-step-list p {
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--tp-graphite);
}

.tp-button-ink {
  display: inline-block;
  background: var(--tp-blue);
  color: var(--tp-sheet);
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.85rem 1.8rem;
  border-radius: 2px;
  text-decoration: none;
  transition: background 0.2s;
}
.tp-button-ink:hover { background: #24405F; }

/* Ready-made */
.tp-ready-intro {
  font-size: 1rem;
  color: var(--tp-graphite-soft);
  margin: -1.25rem 0 1.75rem;
}
.tp-ready-list {
  list-style: none;
  display: grid;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .tp-ready-list { grid-template-columns: repeat(2, 1fr); }
}
.tp-ready-list a {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1rem 1.1rem;
  background: var(--tp-sheet);
  border: 1px solid var(--tp-rule);
  border-radius: 2px;
  text-decoration: none;
  transition: border-color 0.2s;
}
.tp-ready-list a:hover { border-color: var(--tp-blue); }
.tp-ready-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  color: var(--tp-graphite);
}
.tp-ready-meta {
  font-size: 0.85rem;
  color: var(--tp-graphite-soft);
}

/* FAQ */
.tp-faq-item { border-bottom: 1px solid var(--tp-rule); }
.tp-faq-item:first-of-type { border-top: 1px solid var(--tp-graphite-soft); }
.tp-faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 2rem 1.15rem 0;
  position: relative;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--tp-graphite);
}
.tp-faq-item summary::-webkit-details-marker { display: none; }
.tp-faq-item summary::after {
  content: '+';
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
  color: var(--tp-blue);
  transition: transform 0.2s;
}
.tp-faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.tp-faq-item p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--tp-graphite);
  max-width: 40rem;
  padding: 0 0 1.25rem;
}

/* Focus, on both dark and paper */
.tp-body a:focus-visible,
.tp-faq-item summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.tp-paper a:focus-visible,
.tp-paper summary:focus-visible { outline-color: var(--tp-blue); }

/* ── Closing band ── */
.tp-close {
  background: var(--ink-mid);
  text-align: center;
  padding: 4.5rem 1.5rem;
}
.tp-close-title {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  color: var(--cream);
  margin-bottom: 1.75rem;
}

/* ── Never hide the rest of the page (chat 2.32) ──
   Owner only discovered the page scrolled after weeks on /teachers: on a
   typical laptop the hero filled the whole screen. Two things fix it:
   1. On desktop the worksheet is sized to the screen height, so the cream
      paper section always peeks in at the bottom of the first screen.
   2. The homepage's own "Explore" scroll cue sits at the bottom of the hero. */
@media (min-width: 900px) {
  .tp-hero-inner { padding-bottom: 5rem; }
  .tp-sheet { max-width: min(480px, calc((100vh - 16rem) * 0.773)); }
}
.tp-scroll-hint { text-decoration: none; bottom: 1.1rem; }
.tp-scroll-hint:hover { opacity: 0.7; }
@media (max-width: 899px) {
  /* Stacked layout: the worksheet itself shows there's more below. */
  .tp-scroll-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tp-scroll-hint .scroll-line { animation: none; }
}

/* ── Audience label, made prominent (chat 2.32, owner's pick) ──
   "For teachers" / "For homeschool families" as a large Playfair italic
   label in the site's ink blue, with a short blue rule trailing off. */
.tp-kicker {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--ink-blue-light);
  margin-bottom: 1.1rem;
}
.tp-kicker::after {
  content: '';
  flex: 0 0 5.5rem;
  height: 1px;
  background: linear-gradient(90deg, var(--ink-blue-light), transparent);
}

/* The trailing rule only works when the label fits on one line; on phones
   "For homeschool families" wraps, so the rule is left off (chat 2.32). */
@media (max-width: 599px) {
  .tp-kicker::after { display: none; }
}

/* ── Sister-site banner (celebrations door, chat 2.32) ──
   Us.FunAndReverence's own share card as the artwork, with a cream strip
   in its fonts (Cormorant Garamond + Jost) and palette (gold #b89a6a,
   navy #1a2035, cream #faf7f2). Desktop: wide card + demo QR code.
   Phones: the tall Pinterest card, and a "Play the demo" link instead of
   the QR (they're already on a phone). */
.us-banner {
  max-width: 56rem;
  margin: 0 auto;
  background: #faf7f2;
  border: 1px solid rgba(184,154,106,0.45);
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(26,32,53,0.08);
  overflow: hidden;
}
.us-banner-art { display: block; }
.us-banner-art img { display: block; width: 100%; height: auto; }
.us-banner-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.6rem 2rem;
  border-top: 1px solid rgba(184,154,106,0.35);
}
.us-banner-title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1.15;
  color: #1a2035;
  margin-bottom: 0.4rem;
}
.us-banner-copy p {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 0.98rem;
  line-height: 1.6;
  color: #2c2521;
  max-width: 32rem;
  margin-bottom: 1rem;
}
.us-banner-btn {
  display: inline-block;
  font-family: 'Jost', sans-serif;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #faf7f2;
  background: #1a2035;
  padding: 0.8rem 1.5rem;
  border-radius: 2px;
  text-decoration: none;
}
.us-banner-btn:hover { background: #2b3352; }
.us-banner-demo-link {
  display: none;
  margin-left: 1.1rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.9rem;
  color: #8b4f3a;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.us-banner-qr {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
}
.us-banner-qr img {
  width: 110px;
  height: 110px;
  padding: 6px;
  background: #fff;
  border: 1px solid rgba(184,154,106,0.45);
  border-radius: 4px;
  image-rendering: pixelated;
}
.us-banner-qr span {
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem;
  color: #b89a6a;
  text-align: center;
  max-width: 9rem;
  line-height: 1.35;
}
.us-banner a:focus-visible { outline: 2px solid #b89a6a; outline-offset: 3px; }
@media (max-width: 599px) {
  .us-banner-strip { padding: 1.4rem 1.25rem; }
  .us-banner-qr { display: none; }
  .us-banner-demo-link { display: inline-block; }
}
/* Longer labels ("For Sunday school & church", chat 2.32): on wide screens
   keep the label on one line and let the rule shorten instead; in the
   narrower two-column range the rule is dropped so a wrapped label never
   carries a stray line. */
@media (min-width: 1100px) {
  .tp-kicker { white-space: nowrap; }
  .tp-kicker::after { flex: 0 1 5.5rem; min-width: 2rem; }
}
@media (min-width: 600px) and (max-width: 1099px) {
  .tp-kicker::after { display: none; }
}
/* A little less space above the hero text on desktop, so even a four-line
   headline leaves the next section peeking in on a 768px-tall laptop. */
@media (min-width: 900px) {
  .tp-hero-inner { padding-top: 6.5rem; }
}
/* Ready-made section is now a pointer to the Printable Library (chat 2.32). */
.tp-ready-cta { margin-top: 1.4rem; }