:root{--primary:#2563eb;--ink:#17243d;--muted:#65748b;--bg:#f3f6fb;--line:#e3e9f3}*{box-sizing:border-box}body{margin:0;background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);line-height:1.6}a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}aside{width:260px;background:#101d35;color:#fff;position:fixed;inset:0 auto 0 0;padding:28px 20px;display:flex;flex-direction:column;overflow:auto}.brand{display:flex;gap:12px;align-items:center;font-weight:800;font-size:20px;line-height:1.3;color:inherit}.brand span{font-size:16px}.brand small{font-size:10px;font-weight:400;color:#93a9cc;display:block;margin-top:7px}.nav{margin-top:40px;display:grid;gap:8px}.nav a{padding:12px 16px;border-radius:10px;color:#cfdaec}.nav a:hover{background:#21324e;text-decoration:none}.identity{margin-top:auto;padding-top:40px}.identity small{display:block;color:#9db0ce}main{margin-left:260px;padding:36px 42px;min-height:90vh;max-width:1500px}.guest{margin:30px auto;max-width:1000px;padding:25px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}header small,.hero small{letter-spacing:.14em;font-size:11px}h1{font-size:30px;margin:6px 0}h2{font-size:25px}h3{margin:12px 0}.hero{padding:32px 38px;background:linear-gradient(120deg,#102d57,#2563eb);color:white;border-radius:20px;margin-bottom:25px}.hero h2{font-size:34px;line-height:1.25;max-width:650px}.hero p{color:#dce8ff}.hero .button{background:white;color:#163b74}.stats,.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:22px 0}.stats article,.cards article,.panel{background:white;border:1px solid var(--line);border-radius:16px;padding:24px}.stats strong{display:block;font-size:30px}.stats small{color:var(--muted)}.panel{margin:22px 0}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}label{display:block;font-size:13px;font-weight:650;margin:16px 0}input,textarea,select{font:inherit;width:100%;display:block;border:1px solid #ccd7e6;border-radius:9px;padding:12px;margin-top:6px;background:#fff;color:var(--ink)}input[type=color]{height:46px;padding:4px}input:focus,textarea:focus,select:focus{outline:2px solid #9ec4ff;outline-offset:1px}button,.button{font:inherit;border:0;border-radius:9px;padding:11px 18px;background:var(--primary);color:white;cursor:pointer;display:inline-block;margin-top:12px}.secondary{background:#eaf0fa;color:#25466e}.badge{background:#eaf0ff;color:#2857a1;border-radius:50px;padding:5px 12px;font-size:12px;display:inline-block}.notice,.error{padding:15px 20px;border-radius:10px;margin:15px 0;background:#e2f7eb;color:#195a35}.error{background:#fff0ed;color:#943d2a}summary{font-weight:700;cursor:pointer}details{margin-top:15px}.logo{max-width:140px;max-height:110px;object-fit:contain;background:#fff;border-radius:10px;padding:7px}.pre{white-space:pre-line}footer{text-align:center;font-size:12px;color:var(--muted);padding:20px}p{overflow-wrap:anywhere}small{overflow-wrap:anywhere}@media(max-width:1050px){aside{width:220px}main{margin-left:220px;padding:28px}.cards{grid-template-columns:1fr 1fr}}@media(max-width:720px){aside{position:static;width:auto;padding:20px}.nav{display:flex;flex-wrap:wrap;margin-top:18px;gap:0}.nav a{padding:8px 10px}.identity{padding-top:16px}.identity form{display:inline;margin-left:10px}main{margin:0;padding:20px}.guest{margin:0}.stats,.cards,.formgrid{grid-template-columns:1fr}.hero{padding:26px}.hero h2{font-size:28px}h1{font-size:24px}header{gap:12px}.panel{padding:20px}}
/* Phase 2 magazine and editorial workspace */
.toolbar,.public-nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:20px 0}.toolbar form{margin:0}.filterbar{display:flex;align-items:flex-end;flex-wrap:wrap;gap:12px;background:white;border:1px solid var(--line);padding:16px;border-radius:14px}.filterbar label{flex:1;min-width:150px;margin:0}.filterbar button{margin:0}.reading{max-width:780px;margin:32px auto;padding:40px;background:white;border-radius:18px;border:1px solid var(--line)}.reading h2{font-size:38px;line-height:1.5;letter-spacing:-.02em}.reading .byline{font-size:14px;color:var(--muted)}.article-meta{text-transform:uppercase;letter-spacing:.09em;font-size:11px;color:var(--primary);font-weight:700}.article-content{font-size:19px;line-height:1.95;overflow-wrap:anywhere}.article-content p{margin:0 0 1.4em}.article-cover{width:100%;max-height:520px;object-fit:contain;display:block;border-radius:12px}figure{margin:24px 0}figcaption{font-size:13px;color:var(--muted);margin-top:10px}.card-cover{width:100%;height:175px;object-fit:cover;border-radius:10px;margin-bottom:18px}.cover-thumb{max-width:220px;max-height:160px;border-radius:10px}.content-editor{font-size:17px;line-height:1.9}.pagination{display:flex;gap:10px;margin:26px 0}.pagination a{padding:6px 13px;background:white;border-radius:8px;border:1px solid var(--line)}.pagination a[aria-current=page]{background:var(--primary);color:white}.checkbox{display:flex;gap:10px;align-items:center}.checkbox input{width:auto;margin:0}.public-nav{justify-content:space-between}.magazine-hero{background:linear-gradient(120deg,#102d35,var(--primary))}.magazine-cards{grid-template-columns:repeat(2,minmax(0,1fr))}@media(max-width:720px){.reading{padding:22px;margin:24px 0}.reading h2{font-size:28px}.article-content{font-size:18px}.magazine-cards{grid-template-columns:1fr}.filterbar button{width:100%}}
/* Phase 3 albums and photo viewer */
.photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.photo-grid figure{margin:0;background:white;border:1px solid var(--line);border-radius:14px;overflow:hidden}.photo-grid img{width:100%;height:210px;object-fit:cover;display:block}.photo-grid figcaption{padding:0 16px 14px;min-height:25px}.photo-edit-row{display:grid;grid-template-columns:180px 1fr;gap:24px;border-top:1px solid var(--line);padding:25px 0}.photo-edit-row>img{width:180px;max-height:180px;object-fit:contain;border-radius:10px}.photo-edit-row label{margin:10px 0}.photo-edit-row [data-order]{max-width:120px}.danger{background:#b93838;color:white}#photo-viewer{border:0;border-radius:16px;width:min(1200px,96vw);max-width:96vw;height:90vh;max-height:96vh;background:#101722;color:#fff;padding:18px}#photo-viewer::backdrop{background:rgba(0,0,0,.82)}#photo-viewer:fullscreen{width:100vw;max-width:100vw;height:100vh;max-height:100vh;border-radius:0}.viewer-top{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap}.viewer-top button{background:#2b3950;margin:0 0 8px;padding:8px 12px}.viewer-stage{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:12px;height:calc(100% - 125px);align-items:center}.viewer-stage>img{width:100%;height:100%;min-height:0;object-fit:contain}.viewer-stage button{padding:14px 8px;background:#2b3950;margin:0}#viewer-caption{text-align:center;max-height:65px;overflow:auto;margin:10px;white-space:pre-wrap}@media(max-width:720px){.photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.photo-grid img{height:145px}.photo-edit-row{grid-template-columns:1fr}.photo-edit-row>img{width:100%;max-height:220px}.viewer-stage{grid-template-columns:30px minmax(0,1fr) 30px;gap:6px;height:calc(100% - 155px)}#photo-viewer{padding:10px}.viewer-top button{font-size:12px;padding:8px}.photo-grid figcaption{padding:0 10px 10px}}
/* Phase 4 class books */
.student-thumb{width:110px;height:130px;object-fit:cover;border-radius:12px}.class-reader{--book-text-scale:1;--paper:#fffaf0;--book-accent:#805838;background:#e5dbcb;padding:24px;border-radius:18px;margin:24px 0}.theme-garden{--paper:#f5fff7;--book-accent:#245f46;background:#dcebe1}.theme-midnight{--paper:#f3f5ff;--book-accent:#283e79;background:#d8deef}.book-controls{display:flex;gap:9px;align-items:center;justify-content:center;flex-wrap:wrap;margin-bottom:22px}.book-controls button{margin:0;padding:9px 13px}.book-controls button:disabled{opacity:.45;cursor:default}.book-stage{perspective:1400px}.book-spread{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;transform-origin:center;box-shadow:0 18px 45px #13263b26;border-radius:12px;overflow:hidden}.book-sheet{height:650px;background:var(--paper);padding:32px 32px 38px;position:relative;box-shadow:inset 14px 0 22px -18px #2228}.book-sheet[hidden]{display:none}.sheet-inner{height:100%;overflow:auto;font-size:calc(16px * var(--book-text-scale));line-height:1.85;overflow-wrap:anywhere}.sheet-inner h2{font-size:calc(28px * var(--book-text-scale));line-height:1.45;color:var(--book-accent)}.sheet-inner h3{font-size:calc(15px * var(--book-text-scale));color:var(--book-accent);margin:0}.sheet-inner small{letter-spacing:.1em;font-size:11px;color:var(--book-accent)}.book-page-number{position:absolute;bottom:12px;right:24px;font-size:11px;color:#687383}.book-cover{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;border:2px solid var(--book-accent);padding:25px}.book-cover h2{font-size:calc(36px * var(--book-text-scale));margin:30px 0}.book-cover span{margin-top:55px;font-size:13px}.profile-book-photo{width:125px;height:155px;object-fit:cover;border-radius:13px;flex-shrink:0}.student-page-top{display:flex;align-items:center;gap:20px;margin-bottom:24px}.student-page-top h2{margin:6px 0}.profile-initial{width:85px;height:100px;border-radius:15px;background:var(--book-accent);color:white;display:flex;align-items:center;justify-content:center;font-size:42px;flex-shrink:0}.student-answer{padding:13px 0;border-top:1px solid #aab2b73d}.student-answer p{margin:5px 0}.group-book-photo{width:100%;max-height:270px;object-fit:contain}.student-directory{padding-left:24px}.student-directory li{margin:10px 0}.book-thumbnails{display:flex;gap:9px;overflow:auto;padding:18px 0}.book-thumbnails button{min-width:96px;max-width:130px;flex-shrink:0;background:#ffffffbb;color:var(--book-accent);margin:0;font-size:13px;border:1px solid #ffffff}.book-thumbnails span{display:block;font-size:10px;overflow-wrap:anywhere}.book-thumbnails button[aria-current=page]{background:var(--book-accent);color:white}.book-help{font-size:12px;text-align:center}.linear-reader .book-spread{grid-template-columns:1fr;box-shadow:none;gap:25px}.linear-reader .book-sheet{height:auto;min-height:350px;max-width:800px;width:100%;margin:auto}.linear-reader .sheet-inner{overflow:visible;height:auto}.class-reader:fullscreen{width:100vw;height:100vh;overflow:auto;border-radius:0;margin:0}.class-reader:fullscreen .book-sheet{height:calc(100vh - 230px);min-height:400px}.class-reader:fullscreen.linear-reader .book-sheet{height:auto}@media(max-width:760px){.class-reader{padding:12px;margin:20px -6px}.book-spread{grid-template-columns:1fr}.book-sheet{height:620px;padding:26px 22px 38px}.student-page-top{gap:14px}.profile-book-photo{width:95px;height:125px}.sheet-inner h2{font-size:calc(25px * var(--book-text-scale))}.book-controls{gap:6px}.book-controls button{font-size:12px;padding:8px 10px}.book-cover h2{font-size:calc(31px * var(--book-text-scale))}}
.book-spread{position:relative}.book-turn-sheet{position:absolute;top:0;z-index:5;backface-visibility:hidden;box-shadow:4px 0 25px #0d172b55}
/* Private student autograph workspace */
#signature-canvas{display:block;width:100%;max-width:600px;height:auto;border:2px dashed #aebbd1;border-radius:14px;background:#fff;touch-action:none;margin:1rem 0}
.autograph-note{background:#fffaf0;border:1px solid #eadcc0;border-radius:18px;padding:1.4rem;margin:1rem 0;overflow-wrap:anywhere}.autograph-note section{margin-top:1rem}.autograph-signature{display:block;width:100%;max-width:480px;height:auto;margin-top:1rem}.autograph-note .pre{white-space:pre-wrap}.class-page .autograph-note{max-height:100%;overflow:auto}.student-card-actions{display:flex;gap:.5rem;flex-wrap:wrap}

.alumni-profile h4{margin-bottom:.3rem}.alumni-profile p{overflow-wrap:anywhere}.alumni-profile .student-thumb{float:right;margin:0 0 1rem 1rem}.alumni-profile .pre{white-space:pre-wrap}.alumni-profile{min-width:0}