:root{color-scheme:light;--dark:#253f34;--muted:#56665b;--frame:#d7ceba;--paper:#faf7ee}*{box-sizing:border-box}body{margin:0;color:var(--dark);background:#efeadd;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}button,a,input{touch-action:manipulation}button,a{color:inherit}button{font:inherit;cursor:pointer}header{position:relative;z-index:3;background:var(--paper);border-bottom:1px solid var(--frame);padding:14px clamp(15px,4vw,68px);display:flex;align-items:center;justify-content:space-between;gap:15px}.identity{display:flex;align-items:center;gap:13px}.school-logo{display:block;object-fit:contain;width:44px;height:44px;border-radius:50%}.identity b{font:600 clamp(16px,1.55vw,23px) Georgia,serif}.identity small{display:block;font-size:11px;color:var(--muted);margin-top:3px}nav{display:flex;align-items:center;gap:8px}nav button,nav a,#close{border:1px solid var(--frame);background:#fffdf6;border-radius:24px;font:500 13px system-ui;text-decoration:none;padding:8px 14px}nav button[aria-pressed=true]{background:var(--dark);color:white}nav button:hover,nav a:hover,.arrow:hover:not(:disabled){border-color:var(--dark)}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #985469;outline-offset:4px}main{min-height:calc(100svh - 72px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(12px,3vh,30px) 16px 14px;gap:15px;background:radial-gradient(ellipse at 50% 37%,#f8f5ec 10%,#e4e7dd 65%,#cfd9cf 100%)}.stage{width:min(96%,calc((100svh - 181px)*1.4142),1160px);position:relative;perspective:2400px;isolation:isolate}.book{width:100%;aspect-ratio:297/210;background:#fff9e9;position:relative;box-shadow:3px 3px 0 #f1e9d7,4px 4px 0 #a69679,6px 6px 0 #e0d4bd,8px 9px 0 #c2b39a,0 19px 38px #3b39282d;touch-action:pan-y pinch-zoom;isolation:isolate;perspective:1800px}.book .face,.book .leaf{position:absolute;inset:0;line-height:0}.face img,.leaf img{width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}.leaf{transform-origin:left center;z-index:2;backface-visibility:hidden;pointer-events:none}.leaf::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,#453c26aa,transparent 30%);opacity:0}.leaf.turn-next{animation:forward .54s cubic-bezier(.4,.05,.6,1) both}.leaf.turn-prev{animation:backward .54s cubic-bezier(.4,.05,.6,1) both}.leaf.turn-next::after{animation:curtain .54s both}.leaf.turn-prev::after{animation:curtain .54s reverse both}@keyframes forward{from{transform:rotateY(0)}to{transform:rotateY(-90deg)}}@keyframes backward{from{transform:rotateY(-90deg)}to{transform:rotateY(0)}}@keyframes curtain{to{opacity:.65}}.controlbar{display:flex;align-items:center;gap:18px;justify-content:center;padding:6px 0}.arrow{height:38px;width:44px;border:1px solid #c3bca7;border-radius:22px;background:var(--paper);font-size:21px;line-height:1}.arrow:disabled{opacity:.37;cursor:default}.position{display:flex;flex-direction:column;align-items:center;gap:2px}.position label{font-size:12px;font-weight:650}.position input{accent-color:#36624b;width:clamp(115px,22vw,235px);cursor:pointer}.sr-only{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;margin:0}#readable{background:#fffbf0;box-shadow:0 8px 30px #3b392816;padding:clamp(23px,5vw,65px);font-size:clamp(16px,1.8vw,20px);line-height:1.6;border:1px solid #e0d8c7;min-height:330px}#readable h1,#toc h2{font-family:Georgia,serif;line-height:1.25}#readable p{margin:.45em 0}body.textmode .stage{width:min(94%,880px)}.textmode main{justify-content:flex-start}.textmode .controlbar{position:sticky;bottom:10px;z-index:3;background:var(--paper);border-radius:26px;padding:5px 12px;border:1px solid var(--frame)}dialog{color:var(--dark);width:min(510px,94vw);max-height:82svh;padding:18px 22px;background:var(--paper);border:1px solid var(--frame);border-radius:12px;box-shadow:0 20px 95px #19271e45}dialog::backdrop{background:#172b248c}.dialogtop{display:flex;justify-content:space-between;align-items:center;position:sticky;top:-18px;background:var(--paper);padding:4px 0 12px}.dialogtop h2{margin:0;font-size:27px}#close{width:40px;font-size:20px;padding:3px}#chapters button{display:grid;grid-template-columns:34px 1fr;align-items:baseline;text-align:left;width:100%;padding:11px 3px;border:0;border-top:1px solid #ded8c7;background:transparent;color:var(--dark);line-height:1.35}#chapters b{color:#914458;font-family:Georgia,serif}#chapters button[aria-current=page]{font-weight:700;background:#e5ebde}#error{color:#713242}[hidden]{display:none!important}@media(max-width:680px){header{flex-wrap:wrap;gap:11px;padding:10px 14px}.identity{gap:9px}.school-logo{width:35px;height:35px}nav{gap:7px}nav button,nav a{font-size:12px;padding:6px 11px}main{min-height:calc(100svh - 100px);padding:18px 6px;gap:21px}.stage{width:96%}.controlbar{gap:14px}}@media(max-height:500px) and (min-aspect-ratio:6/5){header{padding:4px 14px}.identity small,.school-logo{display:none}main{min-height:calc(100svh - 42px);padding:5px;gap:3px}.stage{width:min(91%,calc((100svh - 93px)*1.4142))}.controlbar{padding:0;gap:12px}.arrow{height:30px}.position{flex-direction:row;gap:9px}nav button,nav a{padding:4px 9px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;scroll-behavior:auto!important}}

.page-link{position:absolute;display:block;z-index:1;background:transparent;border:0;border-radius:3px}.page-link:hover{background:#46684c12}

#listen{background:#325744;color:#fff9e7;border-color:#325744;font-weight:650;min-width:88px}
#listen[aria-pressed=true]{background:#8c4753;border-color:#8c4753}
#voiceStatus{font-size:13px;margin:0;color:#793f49}
@media(max-width:430px){header nav{gap:5px;flex-wrap:wrap}header nav button,header nav a{padding:6px 9px}}
/* Each printed portrait leaf occupies one side of an A4 landscape spread. */
.stage{width:min(96%,calc((100svh - 181px)*1.4142),1160px)}
.book{margin:auto;perspective:2100px;aspect-ratio:297/210}
.book.closed{width:50%;aspect-ratio:148.5/210}
#sheets{display:flex;position:absolute;inset:0}
.sheet{flex:1;min-width:0;height:100%;position:relative}
.sheet img,.turning-sheet img{width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
.book:not(.closed)::after{content:"";position:absolute;top:0;bottom:0;width:8px;left:calc(50% - 4px);pointer-events:none;background:linear-gradient(to right,transparent,#3e392416,transparent)}
.turning-sheet{position:absolute;top:0;bottom:0;width:50%;z-index:2;pointer-events:none;transform-style:preserve-3d}
.turning-sheet img{position:absolute;inset:0;backface-visibility:hidden}.turning-sheet .reverse-side{transform:rotateY(180deg)}
.forward-leaf{left:50%;transform-origin:left;animation:leaf-forward .60s cubic-bezier(.48,.02,.35,1) both}
.reverse-leaf{left:0;transform-origin:right;animation:leaf-reverse .60s cubic-bezier(.48,.02,.35,1) both}
@keyframes leaf-forward{from{transform:rotateY(0)}to{transform:rotateY(-180deg)}}
@keyframes leaf-reverse{from{transform:rotateY(0)}to{transform:rotateY(180deg)}}
#downloads a{display:block;padding:14px 2px;border-top:1px solid var(--frame);font-size:16px;text-decoration:none}#downloads a:hover{text-decoration:underline}
#closeDownloads{background:transparent;border:0;font-size:28px}
@media(max-width:680px) and (orientation:portrait){.stage{width:97%}.book.closed{width:min(85%,calc((100svh - 235px)*.7071))}.controlbar{gap:12px}}
@media(max-height:500px) and (min-aspect-ratio:6/5){.stage{width:min(95%,calc((100svh - 94px)*1.4142))}}

/* Original photographs and student artwork can be viewed outside the printed layout. */
.artwork-link { cursor: zoom-in; }
dialog#album { width: min(940px, 96vw); max-height: 95svh; padding: 15px 20px; }
.album-title, .album-select, .album-nav { display: flex; align-items: center; gap: 12px; }
.album-title { justify-content: space-between; }
.album-title h2 { margin: 0; font: 600 24px Georgia, serif; }
.album-title form { margin: 0; }
.album-title button, .album-nav button {
  min-width: 42px; min-height: 36px; background: #fffdf6; color: var(--dark);
  border: 1px solid var(--frame); border-radius: 20px; font-size: 19px;
}
.album-select { font-size: 13px; margin: 6px 0 12px; color: var(--muted); }
.album-select select { font: inherit; color: var(--dark); background: #fffdf6; border: 1px solid var(--frame); padding: 4px 8px; border-radius: 5px; }
#album figure { margin: 0; }
#albumImage { width: 100%; height: min(62svh, 620px); object-fit: contain; display: block; background: #eeeadd; }
#albumCaption { margin: 10px 2px; color: var(--dark); font: 16px/1.35 Georgia, serif; text-align: center; }
.album-nav { justify-content: center; font-size: 13px; }
.album-nav button:disabled { opacity: .4; cursor: default; }
@media(max-width:680px) { dialog#album { padding: 12px; } #albumImage { height: min(53svh, 75vw); } }
@media(max-height:500px) and (orientation:landscape) {
  dialog#album { padding: 5px 14px; }
  .album-title h2 { font-size: 18px; }
  .album-select { margin: 0 0 4px; }
  #albumImage { height: 49svh; }
  #albumCaption { margin: 3px 0; }
}

@font-face{font-family:TapSanHand;src:url('assets/fonts/Charm.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:TapSanHand;src:url('assets/fonts/CharmBold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:TapSanTitle;src:url('assets/fonts/GreatVibes.ttf') format('truetype');font-weight:700;font-display:swap}
body,button,input,nav button,nav a,#close,#readable,.gallery-caption{font-family:TapSanHand,cursive}
#readable h1,#toc h2,.dialogtop h2,.identity b,#chapters b{font-family:TapSanTitle,cursive}
#readable{font-size:clamp(19px,2vw,23px);line-height:1.75}
nav button,nav a{font-size:15px}