/* The painted plate and the typeset title form one jacket. */
.atlas-theme .book-grid{align-items:stretch;gap:20px}
.atlas-theme .book-jacket{border-radius:4px 10px 8px 4px;box-shadow:0 4px 0 #615267;background:#514057;padding-left:7px;border:1.5px solid #49384f}
.atlas-theme .jacket-face{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:0;border-left:1px solid #9e879c;background:#fffaf0;color:#352641}
.atlas-theme .jacket-face:after{width:3px;left:0;background:linear-gradient(90deg,#30203336,transparent)}
.atlas-theme .jacket-face .edition-print{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;margin:0;border-bottom:1px solid #786572}
.atlas-theme .jacket-title{padding:13px 15px 12px;flex:1}.atlas-theme .jacket-title h2{color:#382940;font-size:clamp(1.2rem,2.2vw,1.65rem);line-height:1.08}.atlas-theme .jacket-title p{margin:4px 0 0;color:#574f57}
.atlas-theme .book-jacket>small{color:#64526c;border-top-color:#cebdc9;background:repeating-linear-gradient(to bottom,#fbf6ec 0 3px,#e6dfd4 3px 4px)}
.atlas-theme .volume-heading{overflow:hidden;align-items:center;padding:0;gap:20px;background:#eee5f2;border:1.5px solid #77657f;border-left:8px solid #55415f;color:#392840}
.atlas-theme .volume-heading img{width:clamp(125px,24%,208px);height:auto;aspect-ratio:3/2;object-fit:contain;display:block}.atlas-theme .volume-heading>div{padding:12px 15px 12px 0}
.atlas-theme .volume-heading h1{color:#3b2947}

.notebook,.notebook-index{--type-ink:#382843;--wine:#50355f;--amethyst:#72528c;--wash:#f3edf6;max-width:1050px;color:var(--type-ink)}
.folio-cover{position:relative;display:grid;grid-template-columns:1.45fr 1fr;border:2px solid #3d2a46;border-radius:6px 19px 19px 6px;padding-left:13px;overflow:hidden;background:#392541;box-shadow:0 5px 0 #614f65}
.binding-copy{background:#533461;background-image:repeating-linear-gradient(85deg,#ffffff05 0 1px,transparent 1px 5px);color:#fffae9;padding:clamp(21px,3.2vw,38px);border-left:2px solid #b79bbd;border-right:1px solid #937c97}
.binding-copy h1{font:900 clamp(2.4rem,5.8vw,4.7rem)/.97 TonSerif,Georgia,serif;letter-spacing:-.065em;margin:0 0 12px;color:#fff7df}
.binding-copy p{margin:0 0 16px;max-width:46ch;line-height:1.45;color:#f7edf5}
.folio-start,.folio-next{display:inline-flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 13px;min-height:44px;border:1.6px solid #36273f;border-radius:8px;text-decoration:none;line-height:1.24;font-weight:740}
.folio-start{background:#ffe4a9;color:#3e3044;box-shadow:0 4px #302334}.folio-start b,.folio-next b{font-size:1.1em}
.folio-preview{align-self:stretch;display:grid;align-content:center;justify-items:center;text-align:center;padding:18px 23px;background-color:#e1d2e9;background-image:radial-gradient(#856b973d .85px,transparent 1px);background-size:8px 8px}
.folio-preview h2{font:900 clamp(1.3rem,2.8vw,2rem)/1.08 TonSerif,Georgia,serif;letter-spacing:-.045em}
.folio-preview p{max-width:30ch;margin:5px 0 11px;font-size:.9rem;color:#57445f}.folio-preview>div{display:flex;gap:10px}
.folio-vowel{padding:0;overflow:hidden;display:grid;place-items:center;width:clamp(76px,10vw,104px);border:2px solid #503857;border-radius:11px;background:#fff5e7;color:#4a3357;box-shadow:0 4px #795d83;transition:transform .14s,box-shadow .14s}
.folio-vowel .gl-drawing{width:100%;height:auto}.folio-vowel>span{display:flex;width:100%;align-items:center;justify-content:center;gap:5px;padding:4px;background:#faf5ff;border-top:1px solid #b7a2bd}.folio-vowel .atlas-play-icon{width:22px;height:22px;font-size:.7rem}
.folio-contents{margin:24px 0}.folio-chapter{display:grid;grid-template-columns:minmax(150px,23%) 1fr;gap:18px;padding:16px 0;border-top:1px solid #b8a8be}
.folio-chapter h2{font:900 clamp(1.1rem,2vw,1.45rem)/1.16 TonSerif,Georgia,serif;letter-spacing:-.025em;margin:7px 0;color:#584364}
.folio-chapter .course-index{display:grid;margin:0;gap:8px;grid-template-columns:1fr}
.course-index .contents-row{display:grid;align-items:center;grid-template-columns:auto minmax(0,1fr) max-content auto;gap:13px;min-height:53px;padding:9px 14px;background:#fffaf2;border:1px solid #a28daa;border-left:4px solid #735683;border-radius:5px 9px 9px 5px;box-shadow:0 2px #b7a4bd;color:#412f4a}
.contents-number{font:700 .8rem/1 "Segoe UI",sans-serif;color:#70577a;font-variant-numeric:tabular-nums}
.contents-name{font:900 clamp(1rem,1.8vw,1.23rem)/1.14 TonSerif,Georgia,serif;letter-spacing:-.03em}.contents-sample{white-space:nowrap;font:italic .95rem Georgia,serif;color:#6f5778}
.notebook-crumb,.page-turn,.notebook-links{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.notebook-crumb{margin-bottom:10px}.notebook-crumb .back{margin:0;padding:0 4px;min-height:35px}.notebook-crumb span{font-size:.83rem;font-weight:700;color:#67546f}
.notebook-page{background:#fffdf5;border:1.5px solid #796282;border-left:9px solid #50345e;border-radius:4px 15px 12px 4px;padding:0 clamp(20px,3.6vw,43px);box-shadow:2px 3px #ddd0df,3px 5px #a58fab}
.page-tabs{display:flex;align-items:flex-end;gap:6px;justify-content:flex-end;border-bottom:1px solid #d3c2d7;padding:10px 0 0}
.page-tabs a{display:inline-flex;align-items:center;justify-content:center;min-height:39px;padding:7px 14px;text-decoration:none;font-size:.86rem;font-weight:700;color:#695271;border:1px solid transparent;border-bottom:0;border-radius:8px 8px 0 0}
.page-tabs a[aria-current]{border-color:#8e7499;background:#e7d9ee;color:#3c294a;box-shadow:inset 0 3px #7a598b}
.notebook .lesson-heading{padding:19px 0 16px}
.notebook .lesson-heading h1{font:900 clamp(2rem,4.2vw,3.5rem)/1.05 TonSerif,Georgia,serif;max-width:23ch;letter-spacing:-.055em;color:#392744;margin:0 0 9px}
.notebook .lesson-heading>p{font:clamp(1.05rem,1.8vw,1.28rem)/1.43 Georgia,serif;color:#5a405e;max-width:66ch;margin:0}
.notebook-spread{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);align-items:start;gap:clamp(18px,3vw,35px);border-top:1px solid #ded2df;padding-top:19px}
.notebook-prose{font-size:1.01rem;line-height:1.57}.notebook-prose p{margin:0}.notebook-prose p+p{margin-top:12px}
.worked-example{padding:16px 18px 18px;border:1.5px solid #80648b;border-top:4px solid #79518b;border-radius:5px 12px 10px 10px;background:#f2eaf5}
.worked-example>small{display:block;font-size:.75rem;font-weight:750;color:#6c4d7a;margin:0 0 3px}
.worked-example h2,.transfer-example h2{font:900 clamp(1.2rem,2.1vw,1.65rem)/1.14 TonSerif,Georgia,serif;letter-spacing:-.035em;color:#442e51;margin:0 0 7px}
.worked-example>p,.transfer-example p{margin:0;font-size:.95rem;line-height:1.45}
.worked-keys,.notebook-clips{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch;margin-top:13px}
.example-key{flex:1;position:relative;min-width:62px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:10px;background:#fffaf1;color:#462f52;border:1.8px solid #513658;border-radius:9px;box-shadow:0 4px #765d81;transition:transform .14s,box-shadow .14s,background .14s}
.example-face{display:flex;align-items:center;justify-content:center;gap:8px}.example-face strong{font:900 clamp(1.4rem,2.4vw,1.9rem)/1.1 TonSerif,Georgia,serif;letter-spacing:-.04em}
.example-face em{font-style:normal;color:#663f83;box-shadow:inset 0 -.2em #dcc5ed}.example-key small{font-weight:640;line-height:1.18;font-size:.76rem;color:#64536e}
.example-key .atlas-play-icon{background:#724e87;color:#fff7ed;border:1px solid #482c58;box-shadow:inset 0 1px #b491c3,0 2px #472b53}
.example-key[aria-pressed=true]{background:#dfcce9;box-shadow:inset 0 2px #b49bc0,0 1px #735a7b;transform:translateY(2px)}
.example-key[aria-pressed=true] .atlas-play-icon,.folio-vowel[aria-pressed=true] .atlas-play-icon{color:#fff;background:#442953}
.example-figure{display:grid;place-items:center;width:100%;height:96px;background:#f7efe1;border-radius:5px;overflow:hidden}
.example-figure>.gl-drawing,.example-figure>.mouth-plate,.example-figure>.example-d{display:block;max-width:100%;width:auto;height:92px;object-fit:contain}
.example-figure>.mouth-plate{width:100%;max-width:135px;height:92px}
.keys-place .example-figure,.keys-manner .example-figure{height:76px}.keys-place .mouth-plate,.keys-manner .mouth-plate{height:74px}
.worked-example .gesture-lab{margin:13px 0 0}.worked-example .gl-key{min-width:0}
.listen-back{border-left:3px solid #9e80ab;padding:6px 0 6px 12px;margin:18px 0;color:#56425e;font-size:.94rem;line-height:1.45}.listen-back b{display:block;margin-bottom:2px;color:#513460}
.transfer-example{display:grid;grid-template-columns:1.05fr .95fr;gap:16px;align-items:center;border-block:1px solid #d7c8da;padding:15px 0}
.transfer-example h2{font-size:1.22rem}.transfer-example .notebook-clips{margin:0;min-width:0}.transfer-example .notebook-audio{width:100%;padding:9px 12px}.transfer-example .notebook-audio strong{font-size:1rem;line-height:1.36}
.notebook-depth{padding:9px 0;color:#513d5a}.notebook-depth summary{cursor:pointer;min-height:42px;align-content:center;font-weight:650}.notebook-depth summary strong{display:inline-block;padding-left:8px;font:900 1.06rem TonSerif,Georgia,serif;color:#493052}.notebook-depth>p{max-width:73ch;line-height:1.58;margin:7px 0 11px}
.notebook-links{justify-content:flex-start;gap:11px;font-size:.9rem}.notebook-reference{display:block;margin:10px 0 3px}.notebook a:not(.folio-next):not(.folio-start){text-underline-offset:3px}
.page-turn{border-top:1px solid #c7b4cc;margin:6px 0 0;padding:12px 0 16px}.folio-next{background:#634278;color:#fff9ed;border-color:#442951;box-shadow:0 3px #472b54}.page-related,.beyond-page{display:inline-flex;align-items:center;min-height:44px;color:#654776;font-weight:660}.beyond-page{margin-top:10px;font-size:.86rem}
.practice-body .blind-samples{margin-top:0}.notebook .practice-body{padding-bottom:5px}.practice-body .lesson-check{background:#f4ecf5}
@media(hover:hover) and (pointer:fine){
 .example-key:not([aria-pressed=true]):hover:not(:active),.folio-vowel:not([aria-pressed=true]):hover,.folio-start:hover,.folio-next:hover,.contents-row:hover{transform:translateY(-2px);box-shadow:0 6px #72577e}
 .page-tabs a:not([aria-current]):hover{background:#f2e9f3}
}
.example-key:active,.folio-start:active,.folio-next:active,.folio-vowel:active,.course-index .contents-row:active{transform:translateY(2px);box-shadow:0 1px #61456d}
.notebook-page a:focus-visible,.example-key:focus-visible,.folio-vowel:focus-visible,.folio-start:focus-visible,.folio-chapter a:focus-visible{outline:3px solid #8a4110;outline-offset:3px}
@media(max-width:820px){.notebook-spread{grid-template-columns:1fr 1.1fr;gap:16px}.notebook-page{padding-inline:20px}.worked-example{padding:12px}.example-face{gap:4px}.folio-chapter{grid-template-columns:155px 1fr}}
@media(max-width:680px){
 .atlas-theme .book-grid{gap:12px}.atlas-theme .book-jacket{padding-left:4px}.atlas-theme .jacket-title{padding:9px 8px}.atlas-theme .jacket-title h2{font-size:clamp(1.05rem,4.4vw,1.42rem)}.atlas-theme .jacket-title p{font-size:.78rem}
 .atlas-theme .volume-heading{gap:11px}.atlas-theme .volume-heading img{width:31%;min-width:80px}.atlas-theme .volume-heading>div{padding-right:9px}
 .folio-cover{grid-template-columns:1fr;padding-left:6px}.binding-copy{padding:19px 17px 21px;border-right:0}.binding-copy h1{font-size:clamp(2.2rem,10vw,3.3rem)}.binding-copy h1 br{display:none}.binding-copy p{font-size:.92rem}.folio-preview{padding:11px 14px;display:grid;grid-template-columns:1fr auto;gap:2px 9px;text-align:left;justify-items:start;align-items:center}
 .folio-preview h2{font-size:1.18rem;align-self:end}.folio-preview p{font-size:.79rem;margin:0;align-self:start}.folio-preview>div{grid-column:2;grid-row:1/3;gap:5px}.folio-vowel{width:51px}.folio-vowel>span{gap:2px;padding:2px}.folio-vowel .atlas-play-icon{width:17px;height:17px;font-size:.58rem}
 .folio-chapter{grid-template-columns:1fr;gap:7px;padding:11px 0}.folio-chapter h2{margin:0}.folio-contents{margin:18px 0}.course-index .contents-row{gap:3px 9px;padding:9px;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"number title arrow" "number sample arrow"}
 .contents-row .contents-number{grid-area:number}.contents-row .contents-name{grid-area:title;align-self:end}
 .contents-row .contents-sample{grid-area:sample;align-self:start}.contents-row>b{grid-area:arrow}
 .notebook-page{padding-inline:13px;border-left-width:5px}.notebook .lesson-heading{padding:16px 0 11px}.notebook .lesson-heading h1{font-size:clamp(1.8rem,7.3vw,2.55rem)}.page-tabs{padding-top:4px;justify-content:flex-start}.page-tabs a{min-height:42px}
 .notebook-spread{grid-template-columns:1fr;gap:15px;padding-top:12px}.notebook-prose{font-size:.95rem;line-height:1.51}.worked-example>p{font-size:.88rem}.worked-keys{gap:7px}.example-key{min-width:62px;padding:8px 5px}.example-face strong{font-size:1.45rem}
 .transfer-example{grid-template-columns:1fr;gap:8px}.notebook-crumb{gap:6px}.notebook-crumb span{font-size:.77rem}.example-figure{height:72px}.example-figure>.gl-drawing,.example-figure>.mouth-plate,.example-figure>.example-d{height:70px}
}
@media(prefers-reduced-motion:reduce){
 .example-key,.folio-vowel,.contents-row{transition:none}
 .notebook-index .contents-row,.notebook .example-key,.folio-vowel,.folio-start,.folio-next{transform:none!important}
}
/* Playable pieces of type for comparisons at the start of the course. */
.worked-keys:is(.keys-letters,.keys-rhythm){justify-content:center;gap:clamp(14px,3vw,25px);padding:9px 0 7px}
.keys-letters .example-key,.keys-rhythm .example-key{
  --tilt:-2.5deg;flex:1 1 90px;max-width:170px;min-height:74px;transform:rotate(var(--tilt));padding:10px 6px;
  border:2px solid #503755;border-radius:11px;box-shadow:0 5px #62416e;
  background:linear-gradient(#fffaf2,#f9ede9)
}
.keys-letters .example-key:nth-child(2),.keys-rhythm .example-key:nth-child(2){--tilt:2.5deg;background:linear-gradient(#e7d5f5,#d4b9e8)}
.worked-keys .example-face .atlas-play-icon{display:grid;place-items:center;box-sizing:border-box;padding:0;min-width:27px;min-height:27px;width:27px;height:27px;line-height:1;border-radius:50%;font-size:.8rem}
.keys-letters .example-face,.keys-rhythm .example-face{gap:12px}.keys-letters .example-face strong,.keys-rhythm .example-face strong{font-size:clamp(1.65rem,3vw,2.4rem)}
.keys-letters .example-key[aria-pressed=true],.keys-rhythm .example-key[aria-pressed=true]{transform:translateY(3px) rotate(0);box-shadow:inset 0 2px #af95bf,0 1px #59405f;background:#d1b8df}
@media(hover:hover) and (pointer:fine){.keys-letters .example-key:not([aria-pressed=true]):hover:not(:active),.keys-rhythm .example-key:not([aria-pressed=true]):hover:not(:active){transform:translateY(-2px) rotate(0) scale(1.035);box-shadow:0 7px #684775}}
.keys-letters .example-key:active,.keys-rhythm .example-key:active{transform:translateY(3px) rotate(0);box-shadow:0 1px #62416e}
@media(max-width:680px){.keys-letters .example-key,.keys-rhythm .example-key{min-height:60px}.keys-letters .example-face,.keys-rhythm .example-face{gap:7px}}
@media(prefers-reduced-motion:reduce){.notebook .worked-keys .example-key{transform:none!important;transition:none}}