/* TE-246 pilot 1: four-pillars scrolly + clickable schematic. External CSS only (CSP style-src 'self'). */

.te246-scrolly{margin:2.2em 0 1.6em}
.te246-kicker{margin:0 0 .35em;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.te246-scrolly h2{margin-bottom:.35em}
.te246-schematic-note{color:var(--ink-2);font-size:.98rem;margin:0 0 1.2em}

.te246-grid{display:flex;flex-direction:column;gap:1.25rem}
.te246-graphic{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:14px 14px 12px;
}
.te246-svg{display:block;width:100%;height:auto}
.te246-svg a{text-decoration:none;cursor:pointer}
.te246-svg a:focus{outline:none}
.te246-svg a:focus-visible .te246-cell,
.te246-svg a:focus-visible .te246-col-hit{
  stroke:var(--gold);
  stroke-width:2.4;
}

.te246-col-hit{fill:transparent;stroke:rgba(28,33,40,.16);stroke-width:1}
.te246-cell{fill:#fffdf8;stroke:rgba(28,33,40,.22);stroke-width:1.2}
.te246-label{font-family:var(--serif);fill:var(--ink);font-size:15px}
.te246-sub{font-family:var(--sans);fill:var(--ink-2);font-size:11px}
.te246-title{font-family:var(--serif);fill:var(--ink);font-size:16px}
.te246-hint{font-family:var(--sans);fill:var(--muted);font-size:11px}
.te246-daymark{font-family:var(--sans);fill:var(--gold-t, #7a5c2c);font-size:10px}

a.te246-is-on .te246-col-hit{
  stroke:var(--cinnabar);
  stroke-width:2.2;
  fill:#f8efe4;
}
a.te246-is-on .te246-cell{
  stroke:var(--cinnabar);
  stroke-width:2.2;
  fill:#fbf3e6;
}

.te246-caption{
  margin:12px 0 0;
  padding:10px 12px 2px 0;
  color:var(--ink-2);
  font-size:.95rem;
  line-height:1.55;
  min-height:4.2em;
}
.te246-caption strong{color:var(--ink);font-weight:600}

.te246-steps{display:flex;flex-direction:column;gap:1rem}
.te246-step{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:16px 18px;
}
.te246-step h3{font-size:1.15rem;margin:0 0 .35em}
.te246-step p{margin:0 0 .6em;color:var(--ink-2)}
.te246-step p:last-child{margin-bottom:0}

/* JS enhancement only: sticky graphic + taller steps for Scrollama */
.te246-js .te246-graphic{
  position:sticky;
  top:4.6rem;
  z-index:3;
}
.te246-js .te246-step{
  min-height:auto;
  padding:1.15rem 1.15rem;
  border-color:var(--line);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.te246-js .te246-step.te246-is-on{
  border-color:rgba(163,128,76,.55);
  box-shadow:0 0 0 1px rgba(168,132,76,.18);
}
@media (min-width:900px){
  .te246-js .te246-grid{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:1.6rem 1.8rem;
    align-items:start;
  }
  .te246-js .te246-step{min-height:58vh;display:flex;flex-direction:column;justify-content:center}
  .te246-js .te246-step:last-child{min-height:42vh}
}
@media (max-width:899px){
  .te246-js .te246-graphic{top:3.4rem}
  .te246-js .te246-step{min-height:48vh;display:flex;flex-direction:column;justify-content:center}
  .te246-caption{min-height:3.4em;font-size:.92rem}
}

@media (prefers-reduced-motion:reduce){
  .te246-js .te246-step{transition:none}
}

/* Video berth: remains fully hidden until a real src is provided */
.te246-video[hidden],
.te246-video:not([data-ready="1"]){display:none !important}