/* Experimental layouts. All personal and project content comes from the original portfolio. */
:root { --wall:#faf9f5; --ink:#34332e; --muted:#74746b; --rule:#deddd3; --red:#a53d2d; --sage:#537052; --paper:#fffef9; --font:'Instrument Sans',Arial,sans-serif; --serif:'Instrument Serif',Georgia,serif; --hand:'Caveat',cursive; --mono:'DM Mono',monospace; }
* { box-sizing:border-box; }
body { margin:0; background:var(--wall); color:var(--ink); font:14px/1.55 var(--font); transition:background .3s; }
a { color:inherit; text-underline-offset:4px; }
button { font:inherit; color:inherit; cursor:pointer; }
button,a { -webkit-tap-highlight-color:transparent; }
button { border:0; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:2px solid var(--red); outline-offset:5px; }
button:disabled { cursor:default; }
::selection { background:#efe3a9; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { font-weight:400; }
.skip { position:fixed; top:-100px; left:20px; z-index:200; padding:10px; background:#fff; }
.skip:focus { top:12px; }
.small { font:10px/1.5 var(--mono); letter-spacing:.07em; text-transform:uppercase; }
.hand { font:25px/1.15 var(--hand); }
.muted { color:var(--muted); }
.text-button { background:transparent; text-decoration:underline; text-underline-offset:4px; padding:0; }
.page { max-width:1260px; margin:auto; padding:0 48px 95px; position:relative; isolation:isolate; }
.site-top { height:82px; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.site-top .address { font:11px var(--mono); color:var(--muted); }
.site-top nav { display:flex; align-items:center; gap:23px; font-size:12px; }
.site-top nav a { text-decoration:none; }
.site-top nav a:hover { color:var(--red); }
.lamp-toggle { display:flex; align-items:center; gap:7px; background:transparent; color:var(--muted); padding:8px 0 8px 8px; font-size:11px; }
.lamp-toggle span:first-child { font-size:21px; line-height:1; color:#9d8043; }
.welcome { display:grid; grid-template-columns:235px minmax(0,1fr); gap:48px; align-items:center; min-height:560px; }
.intro { padding-top:10px; position:relative; }
.intro h1 { font:49px/.98 var(--serif); letter-spacing:-.025em; margin:28px 0 15px; }
.intro h1 em { color:var(--red); }
.intro p { color:#68675f; font-size:13px; line-height:1.7; margin-bottom:14px; }
.intro .short-bio { color:var(--ink); }
.intro .availability { margin-top:20px; font-size:11px; line-height:1.7; max-width:210px; }
.availability:before { content:''; display:inline-block; width:6px; height:6px; background:#63875d; border-radius:50%; margin-right:6px; }
.photo-note { background:var(--paper); padding:7px 7px 23px; box-shadow:0 1px 3px #4c413224,3px 9px 15px #4c413218; width:128px; transform:rotate(-7deg); position:relative; }
.photo-note img { width:100%; height:114px; object-fit:cover; object-position:center 36%; display:block; }
.photo-note:before { content:''; position:absolute; top:-8px; left:37px; width:50px; height:19px; background:#dfc89980; transform:rotate(3deg); }
.photo-note:after { content:'hello, stranger'; font:17px var(--hand); position:absolute; bottom:1px; left:15px; color:#686253; }
.board-area { position:relative; padding:26px 0 35px; }
.board-caption { position:absolute; top:-6px; left:3px; color:#898378; font:19px var(--hand); transform:rotate(-3deg); }
.pegboard { position:relative; height:472px; border-radius:9px; background:#e7e1d6; border:1px solid #d6ccbc; box-shadow:1px 6px 0 #bfb4a2,1px 7px 0 #ac9f8d,10px 24px 31px #55432c1b,3px 4px 9px #665b4320; isolation:isolate; }
.pegboard:before { content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit; z-index:-1; background:linear-gradient(115deg,#ffffff38,transparent 65%); }
.holes { position:absolute; inset:13px; display:grid; grid-template-columns:repeat(auto-fill,minmax(29px,1fr)); grid-auto-rows:29px; overflow:hidden; z-index:-1; pointer-events:none; border-radius:5px; }
.hole { width:4px; height:12px; background:#b2a999; box-shadow:inset 0 1px 2px #655d514d,0 1px #fff9; border-radius:4px; justify-self:center; align-self:center; }
.screw { position:absolute; width:7px; height:7px; background:linear-gradient(135deg,#f4f0e8,#aca394); box-shadow:0 1px 2px #71685766; border-radius:50%; }
.screw:after { content:''; position:absolute; width:4px; height:1px; background:#867b6b; top:3px; left:1px; transform:rotate(40deg); }
.screw.one { top:10px; left:10px; }.screw.two { right:10px; bottom:10px; }
.board-item { position:absolute; background:var(--paper); border:1px solid #e2dace; padding:0; box-shadow:1px 3px 4px #6253402c,1px 10px 14px #69553716; text-align:left; transition:transform .22s,box-shadow .22s; }
.board-item:hover { transform:translateY(-4px) rotate(0)!important; box-shadow:2px 8px 11px #62534032; z-index:5; }
.pushpin { position:absolute; top:-9px; left:48%; width:15px; height:15px; border-radius:50%; background:radial-gradient(circle at 35% 27%,#eda589,#c45d44 48%,#94412d); box-shadow:1px 2px 2px #61524370,2px 4px 5px #5b442a40; z-index:2; }
.pushpin.blue { background:radial-gradient(circle at 35% 27%,#b6c4d6,#64829b 48%,#3e596e); }
.pushpin.green { background:radial-gradient(circle at 35% 27%,#c2c4a2,#7b8962 48%,#4a5e3e); }
.question-note { left:7%; top:55px; width:43%; min-height:234px; padding:27px 24px 20px; transform:rotate(-3deg); background:repeating-linear-gradient(to bottom,transparent 0 26px,#d6e2ed7a 26px 27px),#fffef8; }
.question-note .small { color:#918675; font-size:9px; }
.question-note h2 { font:37px/.98 var(--serif); margin:16px 0 12px; letter-spacing:-.025em; }
.question-note p { font-size:12px; line-height:1.6; max-width:210px; }
.question-note .start { display:block; margin-top:16px; color:var(--red); font:21px var(--hand); }
.question-note:after { content:''; position:absolute; inset:6px -4px -5px 4px; background:#f4f0df; border:1px solid #d7d0bd; z-index:-1; transform:rotate(3deg); }
.project-print { width:25%; padding:7px 7px 10px; }
.project-print img { width:100%; height:103px; object-fit:cover; display:block; filter:saturate(.85); }
.project-print .hand { display:block; margin-top:8px; font-size:19px; }
.project-print .small { font-size:8px; color:#82796d; }
.print-one { top:36px; right:12%; transform:rotate(6deg); }
.print-two { top:214px; right:6%; transform:rotate(-5deg); }
.work-tab { right:34%; bottom:43px; width:150px; min-height:73px; padding:11px 15px; transform:rotate(4deg); background:#e8eddc; }
.work-tab .hand { display:block; font-size:23px; }
.work-tab .small { color:#5a6c4c; font-size:8px; }
.pencil { position:absolute; width:170px; height:7px; background:linear-gradient(#edb151 45%,#bd7c27 46% 80%,#e2a039 81%); border-radius:2px; transform:rotate(-24deg); bottom:69px; left:12%; box-shadow:1px 4px 3px #5f513137; pointer-events:none; }
.pencil:after { content:''; position:absolute; right:-21px; top:0; border-left:22px solid #c2a37c; border-top:3px solid transparent; border-bottom:4px solid transparent; }
.pencil:before { content:''; position:absolute; left:-13px; top:0; width:17px; height:7px; background:linear-gradient(90deg,#bc826d 0 7px,#c5c6c0 7px); }
.small-stamp { position:absolute; right:3.5%; top:130px; writing-mode:vertical-rl; font:9px var(--mono); letter-spacing:.17em; color:#9d9382; }
.under-board { margin:22px 0 0; display:flex; justify-content:space-between; color:#817d73; font-size:10px; }
.under-board button { background:none; padding:0; font-size:10px; color:inherit; text-decoration:underline; text-underline-offset:3px; }
.shelf { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:15px 0 0 283px; border-top:1px solid var(--rule); padding-top:22px; position:relative; }
.shelf:before { content:''; position:absolute; width:530px; height:490px; max-width:100%; bottom:-75px; right:0; background:radial-gradient(ellipse closest-side at 72% 60%,#f5a05f45, #f6b97f20 42%,transparent 100%); z-index:-1; pointer-events:none; opacity:0; transition:opacity .6s; }
.night-light .shelf:before { opacity:1; }
.shelf-item { display:flex; align-items:center; gap:11px; padding:0; background:transparent; text-align:left; text-decoration:none; }
.shelf-item span { display:block; }
.shelf-item .small { color:#8b8378; font-size:8px; }
.shelf-item .shelf-title { font-size:11px; margin-top:4px; }
.shelf-item .listen-arrow { display:inline; }
.shelf-credit { color:#80796e; font-size:9px; margin-top:3px; max-width:170px; }
.record { width:41px; height:41px; flex-shrink:0; border-radius:50%; background:repeating-radial-gradient(circle,#272722 0 1px,#3a3a33 1px 2px); box-shadow:1px 3px 4px #0003; position:relative; }
.record:before { content:''; position:absolute; inset:12px; background:#c98872; border-radius:50%; border:5px solid #cf9e7c; }
.record:after { content:''; position:absolute; width:3px; height:3px; top:19px; left:19px; background:#f2eada; border-radius:50%; }
.record-sleeve { width:63px; height:53px; flex-shrink:0; position:relative; margin-right:8px; }
.record-sleeve .record { position:absolute; width:49px; height:49px; top:2px; right:-4px; transition:transform .5s; }
.record-sleeve .record:before { inset:15px; }
.record-sleeve .record:after { top:23px; left:23px; }
.sleeve-cover { position:absolute; width:48px; height:53px; background:linear-gradient(145deg,#dab09a,#b6735b); border:1px solid #b98970; padding:6px; transform:rotate(-5deg); color:#fff6df; box-shadow:1px 3px 4px #4d2f232b; font:13px/.85 var(--serif); }
.sleeve-cover:after { content:''; position:absolute; right:6px; bottom:7px; width:14px; height:14px; border-radius:50%; background:#f0d4a9; box-shadow:-3px -1px 0 0 #cf9477 inset; }
.shelf-item:hover .record,.shelf-item:focus-visible .record { transform:translateX(5px) rotate(35deg); }
.book-spine { width:32px; height:51px; flex-shrink:0; background:linear-gradient(90deg,#253334,#65716b 14%,#354a48 20%); box-shadow:2px 2px #d3d2c0,3px 3px 5px #0002; color:#d1bd89; display:grid!important; place-items:center; font:16px var(--serif); transform:rotate(4deg); position:relative; transition:transform .25s; }
.bookmark { position:absolute; width:6px; height:18px; background:#b85135; right:6px; top:-4px; clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%); }
.reading-item:hover .book-spine,.reading-item:focus-visible .book-spine { transform:rotate(0) translateY(-3px); }
.shelf-lamp { position:relative; align-self:flex-end; flex-shrink:0; width:87px; min-height:89px; padding:0 5px 19px; background:transparent; text-align:center; }
.lamp-object { position:relative; display:block; width:75px; height:68px; }
.lamp-object:before { content:''; position:absolute; width:115px; height:135px; left:-25px; top:-35px; background:radial-gradient(ellipse,#ed852c2b,transparent 68%); pointer-events:none; opacity:0; transition:opacity .6s; }
.lamp-shade { position:absolute; width:73px; height:35px; left:1px; top:0; border-radius:40px 40px 7px 7px; background:linear-gradient(110deg,#c77645,#a65530); box-shadow:inset 0 1px #ffdfb665,1px 3px 3px #67351224; z-index:1; transition:background .4s,box-shadow .4s; }
.lamp-shade:after { content:''; position:absolute; bottom:0; left:4px; right:4px; height:4px; border-radius:50%; background:#93512f; transition:background .4s; }
.lamp-stem { position:absolute; width:10px; height:34px; top:29px; left:33px; background:linear-gradient(90deg,#c38864,#e4b796 45%,#b7754c); }
.lamp-base { position:absolute; bottom:3px; left:18px; width:39px; height:7px; border-radius:50% 50% 3px 3px; background:linear-gradient(#d49b74,#a56740); box-shadow:1px 3px 3px #67351222; }
.lamp-cord { position:absolute; right:-7px; bottom:0; width:27px; height:11px; border-bottom:1px solid #b4a38b; border-right:1px solid #b4a38b; border-radius:0 0 9px 0; transform:rotate(6deg); }
.lamp-hint { display:block; position:absolute; bottom:0; left:-12px; right:-12px; font:16px var(--hand); color:#947a64; white-space:nowrap; }
.night-light .lamp-object:before { opacity:1; }
.night-light .lamp-shade { background:linear-gradient(110deg,#ffa958,#ec752f 70%,#d6672b); box-shadow:inset 0 1px #ffe3bb,0 4px 16px #f2924242; }
.night-light .lamp-shade:after { background:#ffdb9a; box-shadow:0 3px 9px #fbad6066; }
.shelf .tiny-note { display:block; position:absolute; right:0; bottom:-43px; font-size:16px; }
.tiny-note { font:18px var(--hand); color:#8f7765; transform:rotate(-3deg); }
.night-light .pegboard { box-shadow:1px 6px 0 #bfb4a2,2px 7px 0 #ac9f8d,14px 26px 35px #55392526; }
.night-light .notebook { box-shadow:0 4px 0 #e0dacc,0 6px 0 #fcfaf3,0 7px 0 #d1c9b6,15px 25px 40px #a8623326; }
.night-light .home-layout { background:radial-gradient(ellipse at right 70%,#f5a05f18,transparent 55%); }
/* The notebook is a book with a different reading order and an inline question. */
.notebook-page { max-width:1160px; }
.notebook-head { display:flex; align-items:baseline; justify-content:space-between; margin:19px 0 25px; }
.notebook-head h1 { font:36px var(--hand); }
.notebook-head p { font-size:11px; color:var(--muted); }
.notebook { position:relative; display:grid; grid-template-columns:43% 57%; min-height:555px; background:#fdfcf5; border:1px solid #d2ccba; box-shadow:0 4px 0 #e0dacc,0 6px 0 #fcfaf3,0 7px 0 #d1c9b6,9px 20px 30px #55432c15; border-radius:4px 12px 12px 4px; }
.notebook:after { content:''; position:absolute; left:43%; top:0; bottom:0; width:25px; transform:translateX(-50%); background:linear-gradient(90deg,transparent,#635d4520,transparent); pointer-events:none; }
.left-leaf { padding:44px 40px; border-right:1px solid #dcd6c7; position:relative; }
.left-leaf h2 { font:48px/.95 var(--serif); margin:24px 0 17px; }
.left-leaf p { font-size:13px; line-height:1.8; margin-top:13px; max-width:265px; }
.left-leaf .photo-note { float:right; width:91px; margin:-5px -4px 12px 12px; }
.left-leaf .photo-note img { height:80px; }
.left-leaf .photo-note:after { font-size:13px; }
.left-leaf .hand { font-size:22px; margin-top:23px; color:#997852; }
.book-tabs { position:absolute; display:flex; gap:8px; right:20px; top:-22px; }
.book-tabs button { background:#e3d0a6; padding:7px 17px 10px; border-radius:4px 4px 0 0; font-size:11px; }
.book-tabs button[aria-pressed=true] { background:#e3b79f; }
.right-leaf { padding:35px; min-width:0; background:repeating-linear-gradient(transparent 0 29px,#ced8dc50 29px 30px); }
.page-number { position:absolute; left:30px; bottom:12px; font:9px var(--mono); color:#aaa08b; }
.right-leaf .page-number { left:auto; right:30px; }
.notebook-links { display:flex; gap:20px; justify-content:center; margin-top:28px; font-size:11px; }
.notebook .quiz-card { background:#fffdf8ed; padding:15px 9px; box-shadow:none; border:0; }
.notebook .quiz-card h2 { font-size:29px; }
.notebook .options { margin-top:20px; }
.notebook .options button { padding:11px 12px; }
.mini-wall { background:#e7e1d6; padding:27px 24px; border-radius:5px; box-shadow:0 4px #c7bbab; }
.mini-wall .project-row { background:var(--paper); padding:13px; box-shadow:1px 3px 5px #0002; margin:0 0 15px; }
.mini-wall .project-row:nth-child(even) { transform:rotate(1deg); }
.mini-wall .project-row:nth-child(odd) { transform:rotate(-1deg); }
.mini-wall .project-row img { height:46px; width:62px; }
.shelf-page h2 { font:42px var(--serif); margin:12px 0 22px; }
.shelf-page .shelf-item { margin:25px 0; }
.shelf-page p { font-size:13px; margin:20px 0; color:var(--muted); }
/* The little homepage is intentionally compact, with a margin of personal objects. */
.home-page { max-width:950px; }
.home-page .site-top { border-bottom:1px solid var(--rule); }
.home-layout { display:grid; grid-template-columns:minmax(0,1fr) 180px; gap:62px; padding-top:53px; }
.home-text h1 { font:61px/.95 var(--serif); margin:0 0 27px; letter-spacing:-.025em; }
.home-text p { margin-bottom:18px; font-size:15px; line-height:1.75; }
.home-text .hand { font-size:26px; color:var(--red); margin-top:20px; }
.home-text .quick-links { display:flex; gap:15px; margin:25px 0 40px; font-size:12px; }
.home-question { padding:25px 0; border-block:1px dashed #d1c9b7; }
.home-question h2 { font:29px var(--serif); margin:8px 0; }
.home-question p { font-size:13px; color:var(--muted); }
.home-question button { background:#e9dcb6; padding:8px 15px; border-radius:2px; font-size:12px; }
.margin { padding:14px 0 0; }
.margin .photo-note { width:150px; margin-bottom:47px; }
.margin .photo-note img { height:146px; }
.margin .shelf-item { display:block; margin:35px 0; }
.margin .shelf-item>div { margin-bottom:10px; }
.margin .tiny-note { margin:24px 0; }
.home-work { padding:40px 0 20px; }
.home-work h2 { font:29px var(--serif); margin-bottom:20px; }
.home-work .project-row { font-size:13px; }
.home-page .tiny-wall { margin-top:30px; padding:20px 23px 26px; background:#e7e1d6; border-radius:5px; box-shadow:0 5px #c1b5a3,4px 10px 20px #5b44251a; }
.tiny-wall button { background:var(--paper); text-align:left; padding:17px; width:100%; position:relative; transform:rotate(-2deg); box-shadow:1px 3px 5px #0002; }
.tiny-wall .hand { margin:0; font-size:23px; }
.tiny-wall p { font-size:11px; margin:10px 0 0; }
.home-footer { margin-top:40px; font:20px var(--hand); color:#8c785f; }
/* Shared interactions. */
dialog { padding:38px; width:min(690px,calc(100vw - 30px)); max-height:calc(100dvh - 70px); overflow:auto; color:var(--ink); background:#fffdf6; border:1px solid #d8cfbd; border-radius:6px; box-shadow:0 25px 80px #30291e40; }
dialog::backdrop { background:#23211c6b; backdrop-filter:blur(5px); }
dialog .close { position:absolute; top:10px; right:13px; width:32px; height:32px; background:transparent; font-size:25px; z-index:2; }
dialog h2 { font:40px/1.05 var(--serif); margin:12px 0; }
.modal-intro { max-width:500px; color:var(--muted); font-size:13px; margin:12px 0 22px; }
.quiz-card { padding:12px 0 2px; }
.quiz-meta { display:flex; justify-content:space-between; gap:12px; font:10px var(--mono); color:#7f786b; }
.quiz-card h2 { font:35px/1.08 var(--serif); margin:23px 0 20px; }
.quiz-context { color:var(--muted); font-size:13px; }
.options { display:grid; gap:8px; margin:24px 0 0; }
.options button { position:relative; background:#fffefa; border:1px solid #d8d5c7; padding:13px 16px; text-align:left; border-radius:3px; display:flex; gap:12px; align-items:baseline; font-size:13px; }
.options button>span { color:#a19a8c; font:11px var(--mono); }
.options button:hover { background:#f4edda; border-color:#baa784; }
.options button.chosen { border-color:#ad8260; background:#f3e4cd; }
.choice-result { margin:19px 0 0; padding:18px; border-left:2px solid #ab9071; background:#f2efdf; }
.choice-result .small { color:#84654a; }
.choice-result h3 { font:27px var(--serif); margin:10px 0; }
.choice-result p { font-size:13px; line-height:1.65; }
.choice-result .metric { font:11px/1.7 var(--mono); margin-top:14px; color:#526049; }
.result-links { display:flex; gap:17px; flex-wrap:wrap; margin-top:17px; font-size:12px; }
.quiz-bottom { display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid #e0dbce; margin-top:23px; padding-top:15px; }
.quiz-bottom button { background:transparent; padding:4px 0; font-size:12px; }
.quiz-bottom button:disabled { opacity:.35; }
.quiz-bottom .next-question { color:var(--red); }
.project-row { display:flex; align-items:center; gap:15px; border-bottom:1px solid var(--rule); padding:16px 0; width:100%; background:transparent; text-align:left; }
.project-row img { width:88px; height:62px; object-fit:cover; }
.project-row .project-info { flex:1; }
.project-row strong { font-size:14px; font-weight:500; }
.project-row small { display:block; font-size:11px; color:var(--muted); margin-top:3px; }
.project-row .row-arrow { color:#aaa08e; }
.project-hero { width:100%; max-height:210px; object-fit:cover; border:6px solid white; box-shadow:0 2px 5px #0002; margin-bottom:23px; }
.project-detail p { margin:15px 0; }
.project-detail .proof-fact { font:19px/1.5 var(--serif); background:#eaf0df; padding:15px; margin:20px 0; }
.project-detail .source-link { display:inline-block; padding:10px 16px; background:#3f4639; color:white; text-decoration:none; margin-right:15px; font-size:12px; }
.project-detail .text-button { font-size:12px; }
.music-panel { text-align:center; padding:20px; }
.music-panel .record { width:150px; height:150px; margin:0 auto 30px; }
.music-panel .record:before { inset:47px; border-width:18px; }
.music-panel .record:after { top:72px; left:72px; width:6px; height:6px; }
.music-panel p { color:var(--muted); }
.player-space { margin-top:26px; }
.open-player { display:inline-block; background:#a95635; color:#fffaf1; padding:11px 19px; border-radius:3px; text-decoration:none; }
.open-player:hover { background:#89452d; }
.music-panel .player-note { font-size:11px; margin:12px auto 0; max-width:320px; }
.music-links { display:flex; flex-wrap:wrap; gap:12px 23px; justify-content:center; margin-top:25px; font-size:12px; }
.reading-panel { display:grid; grid-template-columns:145px 1fr; align-items:center; gap:32px; padding:30px 0 20px; }
.reading-panel p { font-size:13px; }
.reading-cover { position:relative; width:145px; height:212px; background:linear-gradient(90deg,#1e302e,#52665a 7%,#30473e 10%); color:#e2cca0; box-shadow:4px 3px #e5ddc4,6px 5px #ccc3ac,8px 10px 15px #0002; transform:rotate(-5deg); text-align:center; padding:30px 18px; }
.cover-author { display:block; font:8px var(--mono); text-transform:uppercase; letter-spacing:.1em; }
.cover-title { display:block; font:27px/1 var(--serif); margin-top:32px; }
.cover-rule { display:block; height:1px; width:25px; background:#c6ac73; margin:20px auto; }
.reading-cover .bookmark { width:11px; height:34px; right:16px; top:-6px; }
.margin .shelf-lamp { margin:8px auto 25px; }
.shelf-page .shelf-lamp { float:right; margin:0 12px 15px; }
.prototype-switcher { position:fixed; bottom:17px; left:50%; transform:translateX(-50%); display:flex; gap:13px; align-items:center; z-index:50; background:#292e2b; color:#f5f3e8; padding:6px; border-radius:50px; box-shadow:0 4px 18px #0002; border:1px solid #ffffff38; }
.prototype-switcher button { border-radius:50%; background:#ffffff0d; color:inherit; width:33px; height:33px; font-size:17px; }
.prototype-switcher button:hover { background:#ffffff22; }
.prototype-switcher span { display:block; min-width:160px; text-align:center; }
.prototype-switcher small { display:block; font:7px var(--mono); letter-spacing:.12em; color:#adbbad; }
.prototype-switcher strong { display:block; font:11px var(--font); margin-top:2px; }
@media(min-width:1450px) { .page { padding-top:12px; } .welcome { min-height:630px; } .pegboard { height:510px; } .question-note { top:72px; } .print-one { top:55px; } .print-two { top:244px; } }
@media(max-width:1100px) { .page { padding-inline:28px; } .welcome { grid-template-columns:210px minmax(0,1fr); gap:30px; } .shelf { margin-left:240px; } .question-note { padding:24px 18px 17px; width:46%; left:5%; } .question-note h2 { font-size:32px; } .project-print { width:29%; } .print-one { right:9%; } .print-two { right:5%; } .work-tab { right:37%; width:130px; } .small-stamp { display:none; } .shelf .tiny-note { display:none; } }
@media(max-width:800px) { .page { padding-inline:20px; } .site-top { height:65px; } .site-top .address { font-size:9px; } .site-top nav { gap:14px; font-size:11px; } .welcome { display:block; } .intro { padding:25px 0 10px; } .intro .photo-note { float:right; width:93px; margin:5px 10px 12px 23px; } .intro .photo-note img { height:89px; } .intro .photo-note:after { font-size:13px; } .intro h1 { margin:3px 0 13px; font-size:43px; } .intro p { max-width:400px; } .intro .availability { max-width:none; margin:13px 0 28px; } .pegboard { height:452px; } .board-area { padding-bottom:22px; } .shelf { margin:0; flex-wrap:wrap; } .shelf-item .shelf-title { font-size:10px; } .notebook-head { margin-bottom:40px; } .notebook-head p { display:none; } .notebook { display:block; } .notebook:after { display:none; } .left-leaf { border:0; border-bottom:1px solid #ded7c7; padding:25px; } .left-leaf h2 { margin:10px 0; font-size:40px; } .left-leaf p { max-width:none; padding-right:85px; } .left-leaf .hand { margin-top:12px; } .right-leaf { padding:23px; } .page-number { display:none; } .book-tabs { top:-25px; right:8px; } .book-tabs button { padding:7px 12px 9px; } .home-layout { grid-template-columns:1fr; gap:10px; padding-top:35px; } .home-text h1 { font-size:49px; } .margin { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .margin .photo-note { width:125px; margin:20px 0; } .margin .photo-note img { height:119px; } .margin .tiny-note { display:none; } .margin .tiny-wall { margin:20px 0; } .margin .shelf-item { margin:10px 0 20px; } }
@media(max-width:420px) { .site-top nav { gap:11px; } .site-top .lamp-toggle { display:none; } .pegboard { height:443px; } .question-note { top:41px; left:5%; width:54%; min-height:229px; padding:25px 14px 18px; } .question-note h2 { font-size:30px; } .question-note p { font-size:11px; } .project-print { width:32%; padding:5px; } .project-print img { height:79px; } .project-print .hand { font-size:16px; } .project-print .small { font-size:6px; } .print-one { right:4%; top:30px; } .print-two { right:4%; top:197px; } .work-tab { right:auto; left:9%; bottom:38px; } .pencil { bottom:123px; left:8%; width:131px; transform:rotate(-13deg); } .under-board { font-size:9px; gap:12px; } .notebook .quiz-card h2 { font-size:28px; } dialog { padding:31px 20px 22px; } .quiz-card h2 { font-size:30px; } .quiz-meta { font-size:9px; } .shelf { gap:17px; } }
@media(max-width:420px) {
  .pegboard { height:528px; }
  .question-note .start { font-size:19px; }
  .print-two { top:234px; }
  .work-tab { bottom:34px; }
  .pencil { bottom:154px; }
}
@media(max-width:600px) {
  .shelf { display:grid; grid-template-columns:minmax(0,1fr) 82px; row-gap:24px; }
  .shelf .music-item { grid-column:1; grid-row:1; }
  .shelf .reading-item { grid-column:1; grid-row:2; }
  .shelf .shelf-lamp { grid-column:2; grid-row:1 / 3; align-self:center; }
  .shelf .reading-item .book-spine { margin-inline:13px 26px; }
  .shelf .tiny-note { display:block; }
  .shelf-item .shelf-credit { max-width:150px; }
  .reading-panel { grid-template-columns:1fr; text-align:center; gap:25px; padding:10px 0; }
  .reading-cover { margin:auto; width:110px; height:160px; padding:20px 12px; }
  .cover-author { font-size:7px; }
  .cover-title { font-size:22px; margin-top:22px; }
  .cover-rule { margin-top:15px; }
  .reading-panel h2 { font-size:34px; }
  .reading-panel .result-links { justify-content:center; }
  .music-panel { padding:12px 0; }
}
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }