/* ==========================================================
   Top of the Class — a graduation party, Class of 2027
   Navy, gold, chalkboard green and notebook paper; DM Serif Display, Josefin Sans, Lora, Caveat.
   ========================================================== */
.tc {
  --g-bg: #14213d; --g-bg2: #f6f1e4; --g-ink: #fdf8ec; --g-muted: rgba(253, 248, 236, 0.8);
  --g-accent: #e3b341; --g-accent2: #ffd977; --g-card: #fffdf6; --g-card-ink: #1b2440;
  --g-display: 'DM Serif Display', serif; --g-script: 'Caveat', cursive;
  --g-body: 'Lora', serif; --g-label: 'Josefin Sans', sans-serif;
  --navy: #14213d; --gold: #e3b341; --red: #c0352b; --chalk: #2f4a3a; --paper: #fdfbf4;
  --vx-label: #14213d;
}
.tc .vx-loader { background: radial-gradient(circle at 50% 35%, #24365e, #14213d 70%); }
.tc .gr-stage-shade { background: linear-gradient(180deg, rgba(10, 14, 30, 0.75), rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, 0) 62%, rgba(10, 14, 30, 0.8)); }
.tc .gr-big em { font-family: var(--g-script); font-size: 1.15em; color: var(--g-accent2); }
.tc-arc { position: absolute; left: 4%; right: 4%; top: -34%; width: 92%; overflow: visible; }
.tc-arc path { fill: none; stroke: var(--g-accent2); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 6 7; filter: drop-shadow(0 0 6px rgba(255, 217, 119, 0.9)); animation: tc-dash 1.4s linear infinite; }
.tc-arc .tc-arc-head { stroke-dasharray: none; animation: none; }
@keyframes tc-dash { to { stroke-dashoffset: -26; } }
.tc-year { margin: -4px 0 0; font: 400 clamp(5rem, 34vw, 8rem)/0.9 var(--g-display); background: linear-gradient(180deg, #fff6d6, #e3b341 55%, #a67a1c); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45)); }

.tc-k { margin: 0 0 10px; font: 700 0.86rem var(--g-label); letter-spacing: 0.14em; text-transform: uppercase; color: #8a6514; }
.tc-k--light { color: var(--g-accent2); }
.tc-h2 { margin: 0 0 26px; font: 400 clamp(2.1rem, 9.6vw, 2.7rem)/1.08 var(--g-display); color: var(--navy); text-wrap: balance; }
.tc-h2 em { font-family: var(--g-script); font-style: normal; font-size: 1.12em; color: var(--gold); }
.tc-h2--light { color: var(--g-ink); }
.tc-p { max-width: 340px; margin: 0 auto 20px; font: 400 1.02rem/1.65 var(--g-body); color: #3a3f55; }
.tc-p--light { color: var(--g-muted); }

/* ---------- report card ---------- */
.tc-report-sec { padding: 76px 14px 90px; text-align: center; background: var(--navy) radial-gradient(circle at 50% 0%, #2a3d6b, transparent 60%); }
.tc-report { position: relative; max-width: 380px; margin: 0 auto 50px; padding: 0 0 24px; border-radius: 6px; background: var(--paper); color: var(--g-card-ink); text-align: left; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.7); background-image: linear-gradient(rgba(20, 33, 61, 0.05) 1px, transparent 1px); background-size: 100% 26px; }
.tc-report-head { position: relative; padding: 22px 20px 16px; border-radius: 6px 6px 0 0; background: var(--navy); color: #fff; }
.tc-report-seal { position: absolute; right: 12px; top: 12px; width: 62px; transform: rotate(10deg); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.4)); }
.tc-report-school { margin: 0 0 4px; font: 700 0.86rem var(--g-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--g-accent2); }
.tc-report-title { margin: 0 0 14px; font: 400 2rem/1.05 var(--g-display); }
.tc-report-meta { display: flex; gap: 18px; margin: 0; }
.tc-report-meta dt { font: 700 0.84rem var(--g-label); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); }
.tc-report-meta dd { margin: 2px 0 0; font: 600 1rem var(--g-body); }
.tc-report-tip { margin: 16px 20px 6px; font: 600 0.95rem var(--g-script); font-size: 1.25rem; color: var(--red); }
.tc-grades { margin: 0; padding: 0 12px; list-style: none; }
.tc-grade-row { display: grid; grid-template-columns: 1fr 64px; align-items: center; gap: 10px; width: 100%; padding: 10px 8px; border: 0; border-bottom: 1px dashed rgba(20, 33, 61, 0.25); background: none; color: inherit; text-align: left; cursor: pointer; }
.tc-grade-row:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.tc-subject { font: 700 1.08rem/1.3 var(--g-body); }
.tc-subject small { display: block; margin-top: 2px; font: italic 400 0.95rem/1.35 var(--g-body); color: #5a5f73; }
.tc-grade { display: grid; place-items: center; width: 56px; height: 56px; justify-self: end; border: 2px dashed rgba(20, 33, 61, 0.35); border-radius: 50%; font: 400 1.5rem var(--g-display); color: rgba(20, 33, 61, 0.4); }
.tc-grade-row.is-graded .tc-grade { border: 3px solid var(--red); color: var(--red); font-size: 1.7rem; transform: rotate(-10deg); box-shadow: inset 0 0 0 2px rgba(192, 53, 43, 0.25); }
.tc-comment { margin: 18px 16px 0; padding: 16px 16px 12px; border-left: 3px solid var(--red); background: rgba(192, 53, 43, 0.05); }
.tc-comment-k { margin: 0 0 6px; font: 700 0.86rem var(--g-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy); }
.tc-comment-text { margin: 0 0 12px; font: 500 1.4rem/1.3 var(--g-script); color: #8c2219; }
.tc-comment-when { margin: 0 0 8px; font: 400 1rem/1.5 var(--g-body); color: #2a3150; }
.tc-comment-when strong { display: block; font-size: 1.08rem; }
.tc-comment-sign { margin: 0; font: 700 1.5rem var(--g-script); color: #8c2219; }
.tc-honors { position: absolute; right: 14px; bottom: 30px; display: grid; place-items: center; width: 108px; height: 108px; border: 4px double var(--gold); border-radius: 50%; font: 700 1rem/1.1 var(--g-label); letter-spacing: 0.1em; text-transform: uppercase; text-align: center; color: #9c7016; background: rgba(255, 236, 170, 0.35); transform: rotate(-14deg) scale(0); opacity: 0; pointer-events: none; }
/* the chalkboard countdown */
.tc-board { position: relative; max-width: 380px; margin: 0 auto; padding: 28px 16px 26px; border: 12px solid #8a5a32; border-radius: 8px; background: var(--chalk) radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.08), transparent 60%); box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.45), 0 26px 40px -20px rgba(0, 0, 0, 0.7); color: #f4f1e6; }
.tc-chalk-k { margin: 0 0 16px; font: 700 2rem/1.1 var(--g-script); color: #f4f1e6; text-shadow: 0 0 2px rgba(255, 255, 255, 0.5); }
.tc-board .vx-countdown { margin-bottom: 22px; }
.tc-board .vx-unit { border: 2px dashed rgba(244, 241, 230, 0.55); background: none; }
.tc-board .vx-unit b { font-family: var(--g-script); font-size: 2.6rem; color: #fff; }
.tc-board .vx-unit > span { color: #f4f1e6; }
.tc-board .vx-btn { --vx-accent: var(--gold); --vx-accent-ink: var(--navy); }
.tc-board .vx-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.6); }
.tc-chalk-stick { position: absolute; right: 6px; bottom: -14px; width: 70px; transform: rotate(-8deg); }

/* ---------- growth chart (pinned) ---------- */
.tc-grow-sec { background: #efe5cf; }
.tc-grow { position: relative; height: 100svh; overflow: hidden; background: repeating-linear-gradient(90deg, #f3ead8 0 26px, #efe4cc 26px 52px); }
.tc-grow-head { position: relative; z-index: 3; padding: 70px 20px 0; text-align: center; }
.tc-grow-head .tc-h2 { margin-bottom: 0; font-size: clamp(1.9rem, 8.6vw, 2.4rem); }
.tc-wall { position: absolute; left: 0; right: 0; bottom: 13svh; height: 60svh; }
.tc-frame { position: absolute; left: 14%; top: 0; bottom: 0; width: 46px; border-radius: 3px; background: linear-gradient(90deg, #ffffff, #ece6da 70%, #d8d0c0); box-shadow: 6px 0 14px -6px rgba(60, 40, 20, 0.35); }
.tc-ruler { position: absolute; inset: 0 auto 0 0; width: 12px; background: repeating-linear-gradient(0deg, rgba(60, 50, 40, 0.5) 0 1px, transparent 1px 10px); }
.tc-climb { position: absolute; left: 20px; bottom: 0; width: 6px; height: 0; border-radius: 3px; background: linear-gradient(0deg, var(--gold), #ffd977); box-shadow: 0 0 10px rgba(227, 179, 65, 0.7); }
.tc-pencil { position: absolute; left: 18px; bottom: 0; width: 110px; transform: translate(0, 50%) rotate(-30deg); transform-origin: 0 50%; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3)); }
.tc-mark { position: absolute; left: 14%; bottom: var(--h); display: flex; align-items: center; gap: 8px; transform: translateY(50%); }
.tc-mark i { width: 58px; height: 3px; border-radius: 2px; background: #2a2a38; transform: scaleX(0); transform-origin: 0 50%; }
.tc-mark span { font: 700 1.25rem/1 var(--g-script); color: #2a2a38; white-space: nowrap; opacity: 0; }
.tc-mark span b { display: block; font-family: var(--g-label); font-size: 0.86rem; letter-spacing: 0.08em; text-transform: uppercase; }
.tc-pile { position: absolute; left: 44%; right: 4%; top: 6%; height: 64%; }
.tc-polaroid { position: absolute; left: 0; right: 0; top: 0; margin: 0; padding: 8px 8px 0; background: #fff; box-shadow: 0 14px 24px -12px rgba(40, 30, 10, 0.6); transform: rotate(var(--r)); opacity: 0; }
.tc-polaroid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.tc-polaroid figcaption { padding: 8px 2px 10px; font: 600 1.2rem/1.2 var(--g-script); color: #2a2a38; text-align: center; }
.tc-polaroid figcaption b { font-family: var(--g-label); font-size: 0.9rem; color: var(--red); }

/* ---------- class timetable ---------- */
.tc-bell-sec { padding: 86px 16px 90px; text-align: center; background: var(--paper); background-image: linear-gradient(90deg, transparent 38px, rgba(192, 53, 43, 0.35) 38px 40px, transparent 40px), repeating-linear-gradient(180deg, transparent 0 33px, rgba(70, 110, 180, 0.22) 33px 34px); }
.tc-bell { display: inline-flex; align-items: center; gap: 12px; margin: 0 auto 26px; padding: 10px 20px 10px 10px; border: 2px solid var(--navy); border-radius: 999px; background: #fff; color: var(--navy); font: 700 0.95rem var(--g-label); letter-spacing: 0.04em; box-shadow: 3px 4px 0 var(--navy); cursor: pointer; }
.tc-bell img { width: 52px; transform-origin: 50% 15%; }
.tc-bell:active { transform: translate(2px, 2px); box-shadow: 1px 2px 0 var(--navy); }
.tc-periods { max-width: 380px; margin: 0 auto; padding: 0; list-style: none; text-align: left; }
.tc-period { position: relative; display: grid; grid-template-columns: 88px 1fr; gap: 2px 12px; padding: 14px 10px 14px 46px; border-bottom: 1px solid rgba(20, 33, 61, 0.12); transition: background 0.5s; }
.tc-period-n { grid-column: 1; font: 700 0.86rem var(--g-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--red); }
.tc-period time { grid-column: 1; grid-row: 2; font: 700 1.05rem var(--g-label); color: var(--navy); }
.tc-period strong { grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: start; font: 400 1.35rem/1.2 var(--g-display); color: var(--navy); background: linear-gradient(transparent 55%, rgba(255, 217, 119, 0.9) 55% 92%, transparent 92%) no-repeat 0 0 / 0% 100%; transition: background-size 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.tc-period p { grid-column: 2; margin: 2px 0 0; font: 400 1rem/1.5 var(--g-body); color: #3a3f55; }
.tc-period.is-now strong { background-size: 100% 100%; }
.tc-period.is-now::before { content: '➜'; position: absolute; left: 10px; top: 16px; font-size: 1.2rem; color: var(--red); }

/* ---------- permission slip ---------- */
.tc-slip-sec { padding: 86px 14px 90px; text-align: center; background: #dfe7f2; }
.tc-slip { position: relative; max-width: 380px; margin: 0 auto 30px; padding: 30px 20px 26px; background: #fffef8; color: var(--g-card-ink); text-align: left; box-shadow: 0 24px 40px -22px rgba(20, 33, 61, 0.5); -webkit-mask: radial-gradient(circle 6px at 50% 0, transparent 98%, #000) 0 0 / 20px 100% repeat-x; mask: radial-gradient(circle 6px at 50% 0, transparent 98%, #000) 0 0 / 20px 100% repeat-x; }
.tc-slip-k { margin: 0 0 8px; font: 700 0.86rem var(--g-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); }
.tc-slip-title { margin: 0 0 18px; font: 400 1.6rem/1.2 var(--g-display); color: var(--navy); }
.tc-slip-title span { display: block; font-family: var(--g-script); font-size: 1.3em; color: #1d3a8a; }
.tc-slip-rows { margin: 0 0 22px; }
.tc-slip-rows > div { display: grid; grid-template-columns: 84px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(20, 33, 61, 0.18); }
.tc-slip-rows dt { font: 700 0.86rem var(--g-label); letter-spacing: 0.08em; text-transform: uppercase; color: #5a6178; padding-top: 3px; }
.tc-slip-rows dd { margin: 0; font: 400 1.02rem/1.5 var(--g-body); }
.tc-swatches { display: flex; gap: 8px; margin-top: 8px; }
.tc-swatches i { width: 26px; height: 26px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(20, 33, 61, 0.3); }
.tc-sign { position: relative; display: grid; justify-items: start; gap: 4px; padding-top: 6px; }
.tc-sig { min-height: 52px; font: 700 2.2rem/1.2 var(--g-script); color: #1d3a8a; clip-path: inset(0 100% 0 0); }
.tc-sign-line { width: 100%; padding-top: 4px; border-top: 1px solid var(--navy); font: 700 0.86rem var(--g-label); letter-spacing: 0.08em; text-transform: uppercase; color: #5a6178; }
.tc-sign-btn { margin-top: 12px; padding: 12px 18px; border: 2px dashed var(--navy); border-radius: 10px; background: #fff; color: var(--navy); font: 700 0.95rem var(--g-label); cursor: pointer; }
.tc-slip-stamp { position: absolute; right: 16px; top: 22px; padding: 8px 12px; border: 3px solid var(--red); border-radius: 6px; font: 700 1rem var(--g-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); transform: rotate(12deg) scale(0); opacity: 0; }

/* ---------- hall pass ---------- */
.tc-pass-sec { padding: 86px 14px 90px; background: var(--navy) radial-gradient(circle at 50% 100%, #2a3d6b, transparent 60%); }
.tc-pass { position: relative; max-width: 390px; margin: 0 auto; padding: 0 0 22px; border-radius: 22px; background: var(--g-card); color: var(--g-card-ink); box-shadow: 0 30px 60px -24px #000; overflow: hidden; }
.tc-pass-tag { position: relative; padding: 30px 20px 22px; text-align: center; background: linear-gradient(135deg, #c98b4a, #8a5a2a 60%, #a8723a); color: #fff7e6; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.15); }
.tc-pass-tag::before { content: ''; position: absolute; left: 50%; top: 10px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: var(--navy); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6); }
.tc-pass-title { margin: 12px 0 4px; font: 400 2.6rem/1 var(--g-display); letter-spacing: 0.04em; text-transform: uppercase; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); }
.tc-pass-sub { margin: 0; font: 600 1rem/1.4 var(--g-label); }
.tc-pass .vx-rsvp, .tc-pass .vx-thanks { padding: 22px 18px 0; text-align: left; }
.tc-pass-stamp { position: absolute; right: 18px; top: 108px; padding: 10px 14px; border: 4px solid var(--red); border-radius: 8px; background: rgba(255, 255, 255, 0.8); font: 700 1.1rem var(--g-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); transform: rotate(-12deg) scale(0); opacity: 0; pointer-events: none; }

/* ---------- next stop ---------- */
.tc-next-sec { padding: 86px 16px 90px; text-align: center; background: #0f1a33; background-image: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 40% 70%, #fff, transparent), radial-gradient(1px 1px at 85% 60%, #fff, transparent), radial-gradient(1px 1px at 10% 80%, #fff, transparent); }
.tc-flight { position: relative; max-width: 380px; height: 260px; margin: 0 auto 30px; }
.tc-trail { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tc-trail path { fill: none; stroke: rgba(255, 255, 255, 0.75); stroke-width: 2.5; stroke-dasharray: 8 9; stroke-linecap: round; }
.tc-plane { position: absolute; left: 0; top: 0; width: 84px; margin: -30px 0 0 -42px; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.5)); }
.tc-boarding { position: absolute; right: 0; top: 46px; width: 170px; padding: 12px 14px; border-radius: 12px; background: #fff; color: var(--navy); text-align: left; box-shadow: 0 16px 26px -14px #000; }
.tc-boarding::after { content: ''; position: absolute; left: 0; right: 0; top: 34px; border-top: 2px dashed rgba(20, 33, 61, 0.25); }
.tc-boarding-k { margin: 0 0 12px; font: 700 0.86rem var(--g-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); }
.tc-boarding-to { margin: 0 0 4px; font: 400 1.2rem/1.2 var(--g-display); }
.tc-boarding-when { margin: 0; font: 700 0.95rem var(--g-label); color: #5a6178; }
.tc-fund { max-width: 340px; margin: 0 auto; padding: 14px 16px; border: 1px solid rgba(255, 217, 119, 0.45); border-radius: 14px; color: var(--g-ink); text-align: left; }
.tc-fund summary { font: 700 0.95rem var(--g-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--g-accent2); cursor: pointer; }
.tc-fund pre { margin: 12px 0; font: 400 1rem/1.5 var(--g-body); white-space: pre-wrap; }

/* ---------- yearbook ---------- */
.tc-book-sec { padding: 86px 14px 90px; text-align: center; background: #e9e2f2; }
.tc-yearbook { max-width: 390px; margin: 0 auto 30px; padding: 18px 14px 20px; border-radius: 4px; background: #fff linear-gradient(90deg, rgba(0, 0, 0, 0.08), transparent 6%); box-shadow: 0 26px 40px -24px rgba(40, 20, 60, 0.6); text-align: left; }
.tc-yb-photo { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: end; margin: 0 0 18px; padding-bottom: 14px; border-bottom: 2px solid var(--navy); }
.tc-yb-photo img { width: 110px; aspect-ratio: 4 / 5; object-fit: cover; filter: saturate(0.9); }
.tc-yb-photo figcaption { font: 400 1.4rem/1.15 var(--g-display); color: var(--navy); }
.tc-yb-photo em { display: block; margin-top: 6px; font: italic 400 1rem/1.4 var(--g-body); color: #5a5f73; }
.tc-yb-sigs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; }
.tc-note { margin: 0; font: 600 1.3rem/1.25 var(--g-script); color: var(--ink); transform: rotate(var(--r)); }
.tc-note strong { display: block; margin-top: 4px; font-size: 1.05rem; font-weight: 700; opacity: 0.9; }
.tc-note:first-child:nth-last-child(odd), .tc-note:nth-child(5n) { grid-column: 1 / -1; }

/* ---------- cap toss ---------- */
.tc-toss-sec { background: #0f1a33; }
.tc-sky { position: relative; height: 100svh; min-height: 560px; overflow: hidden; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.tc-sky-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tc-sky::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 16, 34, 0.55), rgba(10, 16, 34, 0.15) 45%, rgba(10, 16, 34, 0.75)); pointer-events: none; }
.tc-toss-copy { position: absolute; z-index: 2; left: 0; right: 0; top: 14%; padding: 0 20px; text-align: center; pointer-events: none; }
.tc-toss-big { margin: 0 0 14px; font: 400 clamp(2.4rem, 11vw, 3.2rem)/1.05 var(--g-display); color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 4px 24px rgba(0, 0, 0, 0.6); }
.tc-toss-big em { display: block; font-family: var(--g-script); font-style: normal; font-size: 1.2em; color: var(--g-accent2); }
.tc-toss-hint { display: inline-block; margin: 0 0 10px; padding: 10px 18px; border-radius: 999px; background: rgba(10, 16, 34, 0.6); border: 1px solid rgba(255, 217, 119, 0.6); font: 700 1rem var(--g-label); color: #fff; }
.tc-toss-count { margin: 0; font: 600 1rem var(--g-label); color: #fff; text-shadow: 0 1px 8px #000; }
.tc-toss-count b { font: 400 1.6rem var(--g-display); color: var(--g-accent2); }
.tc-cap-src { display: none; }
.tc-flying { position: absolute; z-index: 1; width: 92px; pointer-events: none; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.45)); }
.tc-share { padding: 40px 16px 120px; text-align: center; color: var(--g-ink); }
.tc-pass { --vx-accent: var(--navy); --vx-accent-ink: #fff; }