/* Apprentice One — on top of site.css: the same structure, a calmer palette (ink blue and amber)
   and its own mark. Tokens only, plus the few things the library adds. */
:root {
  --bg: #0c1018; --bg-2: #111725; --surface: #161d2c; --surface-2: #1d2639; --line: #2a3550;
  --ink: #eef1f7; --ink-2: #b4bccd; --ink-3: #7f899e;
  --accent: #ffc857; --accent-ink: #1a1405; --accent-soft: #3a2f12;
  --up: #7fd8a4; --focus: #9ad4ff;
}
/* the logos: five, one per page load (html[data-logo], set in base.html's head; the book without
   script); logo.js adds .go and the intro plays once. The resting state is the finished logo. */
html:not([data-logo]) .brand .v-book, [data-logo="book"] .brand .v-book, [data-logo="bulb"] .brand .v-bulb,
[data-logo="owl"] .brand .v-owl, [data-logo="chalk"] .brand .v-chalk,
[data-logo="atom"] .brand .v-atom { display: inline-flex; }
.brand .logo .word { font: 700 calc(var(--s) * .62)/1 var(--font); letter-spacing: -.01em; color: var(--ink); }
.brand .logo .word b { color: var(--accent); }

/* the book: the right page turns over to the left, then the spark */
.v-book .pg-turn { transform-origin: 16px 18px; transform-box: view-box; opacity: 0; }
.v-book.go .pg-turn { animation: book-turn .55s ease-in-out 2 both; }
.v-book.go .spark { animation: pop .45s cubic-bezier(.3, 1.6, .5, 1) 1.1s both; transform-origin: 16px 6px; transform-box: view-box; }
@keyframes book-turn { 0% { opacity: 1; transform: perspective(60px) rotateY(0); } 99% { opacity: 1; transform: perspective(60px) rotateY(-178deg); } 100% { opacity: 0; transform: perspective(60px) rotateY(-180deg); } }
@keyframes pop { 0% { opacity: 0; transform: scale(.2); } 100% { opacity: 1; transform: scale(1); } }

/* the bulb: the filament draws, the glass flickers on, the rays come out */
.brand .v-bulb .word { font: 600 calc(var(--s) * .66)/1 var(--logo-space); letter-spacing: .01em; }
.brand .v-bulb .word b { font-weight: 800; margin-left: .18em; }
.v-bulb > svg { filter: drop-shadow(0 0 calc(var(--s) * .2) rgb(255 200 87 / .45)); }
.v-bulb .glass { fill: rgb(255 200 87 / .22); }
.v-bulb.go > svg { animation: bulb-glow 1.4s ease-out both; }
.v-bulb.go .fil { stroke-dasharray: 1; animation: draw .6s ease-out both; }
.v-bulb.go .glass { animation: bulb-on 1.1s steps(1) .55s both; }
.v-bulb.go .rays { animation: rays .5s ease-out 1.05s both; transform-origin: 16px 14px; transform-box: view-box; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes bulb-on { 0% { fill: rgb(255 200 87 / 0); } 15% { fill: rgb(255 200 87 / .35); } 25% { fill: rgb(255 200 87 / .02); } 40% { fill: rgb(255 200 87 / .3); } 100% { fill: rgb(255 200 87 / .22); } }
@keyframes bulb-glow { 0%, 45% { filter: none; } 100% { filter: drop-shadow(0 0 calc(var(--s) * .2) rgb(255 200 87 / .45)); } }
@keyframes rays { 0% { opacity: 0; transform: scale(.6); } 100% { opacity: 1; transform: scale(1); } }

/* the owl: looks left and right, blinks twice, tilts its head */
.brand .v-owl .word { font: 400 calc(var(--s) * .6)/1 var(--logo-russo); letter-spacing: .02em; }
.v-owl .lids rect { transform: scaleY(0); transform-origin: center top; transform-box: fill-box; }
.v-owl.go .lids rect { animation: blink 1.6s ease-in-out .2s both; }
.v-owl.go .pupils { animation: look 1.6s ease-in-out both; }
.v-owl.go .head { animation: tilt 1.8s ease-in-out both; transform-origin: 16px 28px; transform-box: view-box; }
@keyframes blink { 0%, 30%, 40%, 62%, 72%, 100% { transform: scaleY(0); } 35%, 67% { transform: scaleY(1); } }
@keyframes look { 0%, 100% { transform: translateX(0); } 15%, 30% { transform: translateX(-1.4px); } 45%, 60% { transform: translateX(1.4px); } 80% { transform: translateX(0); } }
@keyframes tilt { 0%, 70%, 100% { transform: rotate(0); } 82% { transform: rotate(-9deg); } 92% { transform: rotate(4deg); } }

/* the chalkboard: A1 is chalked, the chalk taps down, the name is written left to right */
.brand .v-chalk .word { font: 400 calc(var(--s) * .66)/1 var(--logo-marker); letter-spacing: .02em; color: #f3f1e8; }
.brand .v-chalk .word b { color: var(--accent); font-weight: 400; }
.v-chalk .word .ink { display: inline-block; }
.v-chalk.go .a1 { stroke-dasharray: 1; animation: draw .9s ease-in-out both; }
.v-chalk.go .stick { animation: chalk-tap .4s ease-in-out .85s 2 both; transform-box: fill-box; transform-origin: center; }
.v-chalk.go .word .ink { animation: write 1.1s steps(18) .9s both; }
@keyframes chalk-tap { 50% { transform: translateY(-2px) rotate(-12deg); } }
@keyframes write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* the atom: three electrons race round their orbits and come to rest */
.brand .v-atom .word { font: 600 calc(var(--s) * .52)/1 var(--logo-mono); letter-spacing: -.02em; }
.v-atom .e > g > g, .v-atom .e > .o1 { offset-path: path("M29,16 A13,5 0 1,1 3,16 A13,5 0 1,1 29,16"); offset-rotate: 0deg; }
.v-atom .o1 { offset-distance: 8%; } .v-atom .o2 { offset-distance: 41%; } .v-atom .o3 { offset-distance: 74%; }
.v-atom.go .o1 { animation: orbit1 1.6s cubic-bezier(.2, .7, .3, 1) both; }
.v-atom.go .o2 { animation: orbit2 1.6s cubic-bezier(.2, .7, .3, 1) .08s both; }
.v-atom.go .o3 { animation: orbit3 1.6s cubic-bezier(.2, .7, .3, 1) .16s both; }
.v-atom.go > svg { animation: spin-in 1.6s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes orbit1 { from { offset-distance: -292%; } to { offset-distance: 8%; } }
@keyframes orbit2 { from { offset-distance: -259%; } to { offset-distance: 41%; } }
@keyframes orbit3 { from { offset-distance: -226%; } to { offset-distance: 74%; } }
@keyframes spin-in { from { transform: rotate(-90deg) scale(.7); } to { transform: none; } }

.subjects { display: flex; flex-wrap: wrap; gap: 8px; }
.subjects a { padding: 6px 12px; min-height: 36px; display: inline-flex; align-items: center; border: 1px solid var(--line);
  border-radius: 999px; text-decoration: none; color: var(--ink-2); font-size: .92rem; }
.subjects a:hover { border-color: var(--ink-3); color: var(--ink); }
.subjects a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.progress-chip { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft);
  color: var(--accent); font-size: .8rem; font-weight: 600; }
/* a phone: the mark alone, so Studio, Sign in and Join fit (the link still says the name) */
@media (max-width: 440px) { .brand .logo .word { display: none; } }