/* ==========================================================================
   stay add. — the STEM home (index.html at the root only)
   Hero: the headline, then the whole syllabus as one periodic table (Fig. 0).
   01 Subjects: one row each. 02 How a topic works, beside a live lab.
   A dark closing band. Shared section heads come from here too.
   ========================================================================== */

/* ---------- Section heads ---------- */
.sec-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; align-items: end; margin-bottom: 48px; }
.sec-k { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-bottom: 24px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font: 500 13px var(--font-mono); color: var(--ink-2); }
.sec-k .num { display: grid; place-items: center; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 5px; background: var(--ink); color: var(--bg); font-size: 11px; }
.sec-head h2 { font-size: clamp(36px, 4.6vw, 64px); }
.sec-p { max-width: 32em; padding-bottom: 6px; font-size: 16px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }

/* ---------- Hero ---------- */
.hx { padding: 64px 0 72px; }
.hx-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 64px; align-items: end; margin-bottom: 48px; }
.hx-kicker { margin-bottom: 24px; }
.hx-title { font-size: clamp(44px, 6.4vw, 92px); line-height: .96; letter-spacing: -0.03em; }
.hx-side { padding-bottom: 6px; }
.hx-side .lead { font-size: 18px; margin-bottom: 28px; }
.hx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }

/* ---------- Fig. 0: the periodic table of the syllabus ----------
   18 columns like the real table. Tiles place themselves with --c / --r;
   the empty corner (rows 1–2, columns 3–12) is the readout, row 1 over
   Chemistry is the key, and Biology hangs below like the f-block. */
.pt { container-type: inline-size; padding: 28px 28px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.pt-grid { display: grid; grid-template-columns: repeat(18, minmax(0, 1fr)); grid-template-rows: repeat(3, auto) 16px repeat(2, auto); gap: 6px; }
.pt-block { display: contents; }
.pt-label { display: none; }
.pt-tile {
  grid-column: var(--c); grid-row: var(--r); align-self: start;
  padding: clamp(4px, .5cqi, 8px) clamp(4px, .55cqi, 9px);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast), opacity var(--t-med);
}
.pt-tile .tile-n { font-size: clamp(10px, .78cqi, 11px); }
.pt-tile .tile-s { font-size: clamp(14px, 1.8cqi, 25px); }
a.pt-tile:hover, a.pt-tile:focus-visible { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--tile-ink), 0 6px 14px -6px rgba(22, 21, 15, .35); outline: none; }
a.pt-tile:active { transform: translateY(0) scale(.97); }
.pt-tile.is-opened::after { content: ""; position: absolute; top: clamp(4px, .5cqi, 8px); right: clamp(4px, .5cqi, 8px); width: 6px; height: 6px; border-radius: 50%; background: var(--tile-ink); }
.pt-tile.is-soon { background: transparent; color: var(--ink-4); box-shadow: inset 0 0 0 1px var(--line-2); }
.pt[data-focus="chemistry"] .pt-tile:not([data-s="chemistry"]),
.pt[data-focus="physics"] .pt-tile:not([data-s="physics"]),
.pt[data-focus="biology"] .pt-tile:not([data-s="biology"]),
.pt[data-focus="computer-science"] .pt-tile:not([data-s="computer-science"]) { opacity: .18; }

/* the readout: the tile you point at, large, with its name and what it covers */
.pt-read { grid-column: 3 / 13; grid-row: 1 / 3; contain: size; display: flex; gap: clamp(12px, 1.6cqi, 24px); align-items: stretch; padding: 0 clamp(8px, 1.2cqi, 20px); }
.pt-read-tile { flex: none; height: 100%; width: auto; padding: clamp(6px, .8cqi, 12px); border-radius: 10px; animation: pt-in var(--t-med) var(--ease); }
.pt-read-tile .tile-n, .pt-read-tile .tile-l { font-size: clamp(10px, .9cqi, 12px); }
.pt-read-tile .tile-s { font-size: clamp(26px, 3.6cqi, 50px); letter-spacing: -0.03em; }
.pt-read-ink { background: var(--ink); color: var(--bg); }
.pt-read-t { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; overflow: hidden; animation: pt-in var(--t-med) var(--ease); }
.pt-read-k { font: 500 12px var(--font-mono); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-read-seen { color: var(--accent-ink); }
.pt-read-h { font: 500 clamp(18px, 2.1cqi, 30px)/1.1 var(--font-display); letter-spacing: -0.03em; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-read-b { font-size: clamp(13px, 1.15cqi, 15px); line-height: 1.45; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pt-read-f { margin-top: 2px; font: 500 12px var(--font-mono); color: var(--accent-ink); }
@keyframes pt-in { from { opacity: 0; transform: translateY(3px); } }
@container (max-width: 1040px) { .pt-read-b { -webkit-line-clamp: 1; } }

/* the key, over Chemistry */
.pt-key { grid-column: 13 / 19; grid-row: 1; contain: size; list-style: none; display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 2px 8px; }
.pt-key button { display: flex; align-items: center; gap: 8px; width: 100%; height: 26px; padding: 0 6px; border-radius: 6px; font-size: clamp(11px, 1cqi, 13px); color: var(--ink-2); text-align: left; white-space: nowrap; transition: background-color var(--t-fast), color var(--t-fast); }
.pt-key button i { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--t); }
.pt-key button .num { margin-left: auto; font-size: 11px; color: var(--ink-3); }
.pt-key button:hover, .pt-key button:focus-visible { background: var(--bg-2); color: var(--ink); }
.pt-flabel { grid-column: 1 / 4; grid-row: 5 / 7; contain: size; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding-right: 12px; font-size: clamp(11px, 1cqi, 13px); line-height: 1.35; color: var(--ink-3); }
.pt-flabel .num { font-size: 12px; color: var(--bio-ink); font-weight: 500; }

.pt-cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); font: 12px var(--font-mono); color: var(--ink-3); }
.pt-cap b { font-weight: 500; color: var(--ink); margin-right: 6px; }

/* ---------- 01 Subjects ---------- */
.sx { padding: 112px 0 120px; scroll-margin-top: var(--header-h); }
.sx-list { display: grid; border-top: 1px solid var(--line-2); }
.sx-row { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto 44px; gap: 32px; align-items: center; margin: 0 -16px; padding: 20px 16px; border-bottom: 1px solid var(--line); transition: background-color var(--t-med); }
.sx-row:hover, .sx-row:focus-visible { background: color-mix(in srgb, var(--t) 22%, transparent); outline: none; }
.sx-row:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.sx-tile { width: 88px; padding: 8px 9px; border-radius: 10px; transition: transform var(--t-med) var(--ease); }
.sx-tile .tile-n, .sx-tile .tile-l { font-size: 11px; }
.sx-tile .tile-s { font-size: 36px; letter-spacing: -0.03em; }
.sx-row:hover .sx-tile { transform: rotate(-4deg); }
.sx-name { display: grid; gap: 8px; min-width: 0; }
.sx-title { font: 500 clamp(34px, 4.4vw, 60px)/.98 var(--font-display); letter-spacing: -0.03em; color: var(--ink); }
.sx-hint { font-size: 15px; color: var(--ink-3); }
.sx-meta { display: grid; gap: 10px; justify-items: end; font-size: 12.5px; color: var(--ink-3); text-align: right; }
.sx-strip { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px; max-width: 260px; }
.sx-strip i { width: 9px; height: 9px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--line-2); }
.sx-strip i.on { background: var(--t); box-shadow: none; }
.sx-go { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--ink-2); transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.sx-go svg { width: 16px; height: 16px; transition: transform var(--t-med) var(--ease); }
.sx-row:hover .sx-go { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.sx-row:hover .sx-go svg { transform: translateX(2px); }

/* ---------- 02 How a topic works ---------- */
.lx { padding: 120px 0 128px; border-top: 1px solid var(--line); background: var(--bg-2); }
.lx-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.lx-copy .sec-head { grid-template-columns: 1fr; row-gap: 20px; margin-bottom: 40px; }
.lx-copy .sec-head h2 { font-size: clamp(36px, 4.2vw, 60px); }
.lx-steps { list-style: none; display: grid; margin-bottom: 32px; border-top: 1px solid var(--line-2); }
.lx-steps li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding: 18px 0 20px; border-bottom: 1px solid var(--line-2); }
.lx-n { padding-top: 5px; font-size: 13px; font-weight: 500; color: var(--accent-ink); }
.lx-steps h3 { margin-bottom: 4px; font: 500 22px/1.2 var(--font-display); letter-spacing: -0.025em; }
.lx-steps p { font-size: 15px; color: var(--ink-2); }

.lx-lab { --k-dot: var(--ink-2); position: sticky; top: calc(var(--header-h) + 32px); overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.lx-lab-h { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 500; }
.lx-lab-h .num { margin-right: 8px; font-size: 12px; font-weight: 400; color: var(--ink-3); }
.lx-lab canvas { width: 100%; height: 380px; }
.lx-ctl { padding: 12px 20px; border-top: 1px solid var(--line); }
.st-ctl { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; font-size: 14px; color: var(--ink-2); }
.st-ctl .range { --rc: var(--accent); }
.st-ctl output { min-width: 56px; text-align: right; font-size: 13px; color: var(--ink-3); }
.st-ctl output b { font-weight: 500; color: var(--ink); }
.lx-lab-x { padding: 16px 20px 18px; border-top: 1px solid var(--line); background: var(--bg); font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.lx-lab-x b { display: block; margin-bottom: 2px; font-weight: 600; color: var(--ink); }

/* ---------- Keep adding (dark band) ---------- */
.kx { padding: 120px 0; }
.kx-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px 64px; align-items: end; }
.kx-title { font-size: clamp(52px, 7.6vw, 112px); line-height: .92; letter-spacing: -0.03em; }
.kx-side { padding-bottom: 10px; }
.kx-side p { max-width: 28em; margin-bottom: 28px; font-size: 17px; color: var(--ink-2); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .hx-top, .sec-head, .kx-in { grid-template-columns: minmax(0, 1fr); }
  .sec-head { row-gap: 16px; }
  .lx-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .lx-lab { position: static; }
}
/* below 900px the table falls apart into its four blocks, six tiles a row */
@media (max-width: 900px) {
  .pt { padding: 16px; container-type: normal; border-radius: 16px; }
  .pt-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 20px; }
  .pt-block { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  .pt-label { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-bottom: 2px; font-size: 14px; font-weight: 500; color: var(--ink); }
  .pt-label .num { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--ink-3); }
  .pt-label-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--subj); }
  .pt-block[data-s="chemistry"] { --subj: var(--chem); }
  .pt-block[data-s="physics"] { --subj: var(--phys); }
  .pt-block[data-s="biology"] { --subj: var(--bio); }
  .pt-block[data-s="computer-science"] { --subj: var(--cs); }
  .pt-tile { grid-column: auto; grid-row: auto; padding: 5px 6px; }
  .pt-tile .tile-n { font-size: 10px; }
  .pt-tile .tile-s { font-size: 19px; }
  .pt-tile.is-opened::after { top: 5px; right: 5px; }
  .pt-read, .pt-key, .pt-flabel { display: none; }
}
@media (max-width: 720px) {
  .hx { padding: 40px 0 48px; }
  .hx-kicker { margin-bottom: 16px; }
  .hx-title { font-size: clamp(40px, 11.5vw, 56px); }
  .hx-top { margin-bottom: 32px; gap: 24px; }
  .hx-side .lead { font-size: 17px; margin-bottom: 24px; }
  .hx-actions .btn { width: 100%; }
  .sec-head { margin-bottom: 32px; }
  .sec-head h2 { font-size: 36px; }
  .sx { padding: 72px 0 80px; }
  .sx-row { grid-template-columns: 64px minmax(0, 1fr); gap: 12px 16px; margin: 0 -8px; padding: 16px 8px; }
  .sx-tile { width: 64px; padding: 6px 7px; border-radius: 8px; }
  .sx-tile .tile-s { font-size: 26px; }
  .sx-tile .tile-n, .sx-tile .tile-l { font-size: 10px; }
  .sx-title { font-size: 32px; }
  .sx-hint { font-size: 14px; }
  .sx-meta { grid-column: 2; justify-items: start; text-align: left; }
  .sx-strip { justify-content: flex-start; }
  .sx-go { display: none; }
  .lx { padding: 72px 0 80px; }
  .lx-lab canvas { height: 280px; }
  .lx-lab-h, .lx-ctl, .lx-lab-x { padding-left: 16px; padding-right: 16px; }
  .st-ctl { gap: 12px; }
  .kx { padding: 80px 0; }
  .kx-title { font-size: 52px; }
  .kx-side .btn { width: 100%; }
}