@import url('/assets/plan/demo.css');

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
[hidden]{display:none!important}
.site-header{max-width:1500px;margin-inline:auto}.hero{border-bottom:0}
.art-hint{position:absolute;right:8%;bottom:25px;color:var(--soft);font:10px/1.6 Departure,monospace;pointer-events:none;opacity:.7}
.hero-copy{padding-top:74px}.notebook-section{padding-top:75px}
.section-heading .text-link{white-space:nowrap}.section-heading p{max-width:52ch}
.notebook-section .board{height:auto;display:flex;flex-wrap:wrap;gap:35px;overflow:visible;padding:18px 10px}
.board .sticky{position:relative;width:250px}.board.is-interactive{display:block;height:500px;padding:0}
.board.is-interactive .sticky{position:absolute;width:240px}
.note-open{display:block;text-decoration:none}.note-open time{display:block;font:9px/1.4 Departure,monospace;margin-top:20px;opacity:.7}
.note-open strong{font-size:24px}.note-open span{font-size:12px}.keyboard-hint{font-size:10px;color:var(--soft)}
.projects-section>.section-heading{margin-bottom:30px}.project-card{margin:0}.project-card:first-of-type{margin-top:30px}.project-card-copy h3{font-size:clamp(24px,3vw,36px)}
.project-card:hover .project-visual{color:var(--ink)}.project-visual{transition:color .25s}.future-project{font-size:12px;color:var(--soft);margin-top:30px;max-width:60ch}
.details-section{padding-top:45px;padding-bottom:65px}.about-copy h2{margin-bottom:27px}.about-copy p{font-size:14px;max-width:55ch}.photo-study{margin-top:20px}.photo-study img{width:100%;height:auto;display:block}
.scrapbook-section,.elsewhere-section{padding:40px 6% 80px}.photo-drawer{display:flex;justify-content:center;align-items:start;gap:7%;padding:22px 10px 30px}
.photo-drawer figure{width:25%;max-width:260px;background:#d9d3c0;color:#282b22;padding:8px 8px 18px;box-shadow:4px 8px 18px #0006;transform:rotate(-4deg);transition:transform .3s}
.photo-drawer figure:nth-child(2){transform:rotate(3deg);margin-top:35px}.photo-drawer figure:nth-child(3){transform:rotate(-2deg);margin-top:8px}.photo-drawer figure:hover{transform:rotate(0)}
.photo-drawer img{display:block;width:100%;height:auto;image-rendering:pixelated;filter:saturate(.8)}.photo-drawer figcaption{font:11px/1.5 Departure,monospace;padding:14px 4px 0}
.elsewhere-grid{display:grid;grid-template-columns:minmax(280px,440px) minmax(0,1fr);gap:9%;align-items:start}.link-shelf h3{font:22px/1.4 Departure,monospace;margin:10px 0 20px}
.link-shelf>a{display:block;font-size:14px;text-decoration:none;border-bottom:1px solid var(--line);padding:15px 0}.link-shelf>a:hover{text-decoration:underline}.link-shelf>a span{display:block;font-size:11px;color:var(--soft);margin-top:4px}.site-button-row{display:flex;gap:20px;align-items:center;margin-top:30px}.site-button-row span{font:10px/1.6 Departure,monospace;color:var(--soft)}.site-button-row img{image-rendering:pixelated;display:block}
.dap{background:linear-gradient(145deg,#30352c,#141a14);border:1px solid #59634d;border-radius:10px 10px 35px 10px;padding:22px 24px 25px;box-shadow:inset 1px 1px #ffffff1c,inset -2px -3px #0007,6px 10px 25px #0005;color:#d3dac9;transform:rotate(-1deg)}
.dap-top{display:flex;justify-content:space-between;gap:15px;font:10px/1.5 Departure,monospace;color:#a5ad99;margin-bottom:18px}.dap-screen{background:#c3cfa8;color:#273322;border:4px solid #0c100b;border-radius:3px;padding:16px 16px 12px;box-shadow:inset 2px 2px #26352030;font-family:Departure,monospace}
.dap-screen-top,.dap-time{display:flex;justify-content:space-between;font-size:10px;gap:10px}.dap-screen h3{font:22px/1.2 Departure,monospace;margin:16px 0 8px;min-height:2.4em;overflow-wrap:anywhere}.dap-screen>p{font-size:11px;min-height:18px}.dap-meter{height:26px;display:flex;gap:4px;align-items:end;margin:20px 0 12px}.dap-meter i{width:10px;height:8px;background:repeating-linear-gradient(to top,#34442b 0 3px,transparent 3px 5px)}
.dap-meter i{height:3px;transition:height .08s linear}

.dap input[type=range]{accent-color:#34442b;width:100%;cursor:pointer;height:14px;margin:0}.dap-controls{display:flex;gap:12px;align-items:center;margin-top:22px}.dap-controls button{width:40px;height:38px;border:1px solid #738067;background:#20291d;box-shadow:inset 1px 1px #ffffff14,1px 2px 0 #0007;border-radius:3px;color:#c3cfa8;display:grid;place-items:center;padding:9px}.dap-controls button:hover{background:#37432f}.dap-controls .dap-play{width:50px;height:46px}.dap-controls svg{width:100%;height:100%;fill:currentColor;shape-rendering:crispEdges}.dap-volume{margin-left:auto;max-width:88px;font:10px/1.5 Departure,monospace}.dap-volume input{accent-color:#b7c6a3!important;margin-top:7px!important}
#music-artist{display:inline-block;font:11px/1.6 Departure,monospace;min-height:18px}
.dap-screen h3{height:2.4em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.dap-meter{height:28px}
.dap-controls{gap:8px}.dap-controls button{flex:none}.dap-controls .dap-shuffle{width:34px;padding:6px}.dap-volume{flex:1;min-width:40px;max-width:70px}.dap-controls .dap-shuffle[aria-pressed=true]{background:#c3cfa8;color:#273322;border-color:#c3cfa8;box-shadow:inset 1px 2px #0004}
.dap-status{font-size:11px;line-height:1.5;min-height:3em;margin-top:20px;color:#bac4ad}.music-source{font-size:11px}.music-credit{font-size:9px;color:#9ca88f;margin-top:7px}.soundcloud-engine{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;pointer-events:none;border:0}
.site-footer{max-width:1500px;margin-inline:auto}.footer-name{text-decoration:none}.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:25px;border-top:1px solid var(--line);padding-top:20px;margin-top:15px;font:10px/1.6 Departure,monospace;position:relative;pointer-events:auto}.visit-counter output{display:inline-block;margin-left:12px;color:var(--ink);font-variant-numeric:tabular-nums}.webring{display:flex;gap:18px;flex-wrap:wrap}.footer-content{position:relative;pointer-events:none}.footer-content a{pointer-events:auto}.footer-content>div:first-child{max-width:29%}.footer-content>div:last-child{max-width:27%}
.site-footer>.footer-art{width:100vw;left:calc(50% - 50vw);right:auto}
.reading-page{max-width:840px;margin-top:35px}.reading-page .back-link{display:inline-block;margin-bottom:50px;font-size:12px}.reading-page h1{margin-bottom:25px}.reading-page .prose{margin-top:45px}.prose p,.prose li{font-size:15px;color:var(--soft);line-height:1.85;margin-bottom:24px;max-width:68ch}.prose h2{font-size:27px;clear:both;margin:50px 0 22px}.prose>section{margin:0}.prose>section h2{margin:45px 0 22px}.prose a{color:var(--ink)}.prose .report-meta{margin-bottom:45px}.about-portrait{float:right;width:210px;padding:8px;background:#ded4ba;transform:rotate(3deg);margin:0 0 30px 45px}.about-portrait img{width:100%;height:auto;display:block}.entry-list{list-style:none;padding:0;margin:0}.entry-list li{margin-bottom:0;max-width:none}.entry-list a{display:block;border-top:1px solid var(--line);padding:30px 0;text-decoration:none}.entry-list time{font:11px/1.5 Departure,monospace;color:var(--soft)}.entry-list h2{font-size:27px;margin:15px 0!important}.entry-list a:hover h2{text-decoration:underline;text-underline-offset:6px}.entry-list p{font-size:13px;margin:0}.copy-code{font:11px/1.7 Departure,monospace;white-space:pre-wrap;overflow-wrap:anywhere;border:1px solid var(--line);padding:18px}
@media(min-width:1500px){.scrapbook-section,.elsewhere-section{max-width:1500px;margin-inline:auto}}
@media(max-width:900px){.board.is-interactive .sticky{width:210px}.elsewhere-grid{gap:6%}.dap{padding:18px}.dap-controls{gap:8px}.art-hint{right:6%}}
@media(max-width:700px){.hero-copy{padding-top:35px}.hero{min-height:0}.art-hint{font-size:9px;bottom:20px}.board.is-interactive{height:650px}.board.is-interactive .sticky{width:190px}.elsewhere-grid{grid-template-columns:1fr;gap:55px}.dap{max-width:420px;width:100%;justify-self:center}.photo-drawer{gap:4%;padding-left:0;padding-right:0}.photo-drawer figure{width:31%;padding:5px 5px 10px}.photo-drawer figcaption{font-size:9px;padding:9px 2px 0}.scrapbook-section,.elsewhere-section{padding:30px 5% 65px}.footer-content>div:first-child,.footer-content>div:last-child{max-width:none}.footer-bottom{align-items:start;flex-direction:column;gap:16px}.about-portrait{float:none;margin:0 auto 35px}.reading-page{margin-top:20px}.reading-page .back-link{margin-bottom:35px}}
@media(max-width:420px){.board.is-interactive .sticky{width:170px}.note-open{padding:15px 16px 22px}.note-open strong{font-size:21px}.hero-copy .bio{max-width:30ch}.section-heading .text-link{font-size:11px}.dap-controls button{width:36px}.photo-drawer{gap:3%}.photo-drawer figcaption{font-size:8px}.reading-page{width:calc(100% - 36px)}.reading-page h1{font-size:48px}.report-meta{flex-wrap:wrap;gap:20px}}
@media(max-width:420px){.dap-controls{gap:7px}.dap-controls button,.dap-controls .dap-shuffle{width:32px}.dap-controls .dap-play{width:44px}.dap-volume{max-width:60px}}
@media(prefers-reduced-motion:reduce){.photo-drawer figure,.project-visual{transition:none}.dap-meter i{transition:none}}
.music-section{padding:40px 6% 30px}.music-layout{display:flex;justify-content:center}.music-layout .dap{width:min(100%,440px)}.about-photos{margin-top:55px}.about-photos>h3{font:20px/1.4 Departure,monospace}.about-photos .photo-drawer{padding-bottom:0}
[data-theme=forest] .flower-icon,[data-theme=forest] img[src$="site-button.svg"]{mix-blend-mode:screen}
[data-theme=forest] .flower-trigger{background:var(--bg)}
.shuffle-arrows{stroke-linejoin:miter;stroke-linecap:square}.dap-shuffle .shuffle-strike{display:block}.dap-shuffle[aria-pressed=true] .shuffle-strike{display:none}.dap-shuffle[aria-pressed=false] .shuffle-arrows{opacity:.55}
.note-tools{display:flex;align-items:center;gap:18px}.icon-button{display:grid;place-items:center;width:34px;height:34px;padding:7px;color:var(--accent);border:1px solid var(--line);background:none}.icon-button svg{width:100%;height:100%;fill:currentColor;shape-rendering:crispEdges}.icon-button:hover{border-color:var(--accent)}
.board .sticky,.board.is-interactive .sticky{z-index:1;background:linear-gradient(90deg,transparent 25px,#bc795842 25px 26px,transparent 26px),repeating-linear-gradient(transparent 0 27px,#9d905f44 27px 28px),#f7edba;color:#2c2d22;min-height:220px}.note-handle{min-height:36px;border-bottom:0;padding-top:14px}.note-handle:before{top:4px}.note-open{padding-left:34px}.note-open strong{font-size:22px;line-height:28px}.note-open span{line-height:28px}.note-open time{display:none}
#note-drawing{position:absolute;inset:0;width:100%;height:100%;z-index:0;touch-action:none;cursor:crosshair}

@media(min-width:1500px){.music-section{max-width:1500px;margin-inline:auto}}@media(max-width:700px){.music-section{padding:30px 5% 65px}.note-tools{gap:12px}.notebook-section>.section-heading{flex-direction:row;align-items:center}.notebook-section .section-heading h2{font-size:32px}.note-open{padding-left:30px}.note-open strong{font-size:20px}}
@font-face{font-family:Kalam;src:url('/assets/fonts/Kalam-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
/* Kalam handwriting on the paper's 28px ruling, snapped to 2px pixels by #note-pixels (templates/home.html). Notes stay unrotated so the pixels stay square. */
.board .sticky{background:linear-gradient(90deg,transparent 25px,#bc795842 25px 26px,transparent 26px),repeating-linear-gradient(transparent 0 27px,#9d905f44 27px 28px),#f7edba;min-height:224px;transform:none;box-shadow:4px 4px 0 #0007}
.board .note-handle{height:28px;min-height:28px;padding:5px 15px 0 34px;font:12px/23px Kalam,cursive;flex:none}
.board .note-open{padding:0 18px 28px 34px;font:18px/28px Kalam,cursive;filter:url(#note-pixels)}
.board .note-open strong{font:400 23px/28px Kalam,cursive;margin:0 0 28px}
.board .note-open span{font:400 18px/28px Kalam,cursive}
.board .note-handle{filter:url(#note-pixels)}
.music-layout{position:relative;isolation:isolate;padding:40px 0}
.music-layout .dap{position:relative;z-index:1}
#music-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:auto;touch-action:pan-y;z-index:0}
@media(max-width:700px){.music-layout{padding:45px 0}.music-layout .dap{width:min(86%,440px)}}
.dap-track{display:flex;align-items:center;gap:16px;margin-top:16px;min-height:90px}.dap-track>div{min-width:0;flex:1}.dap-track h3{margin:0 0 8px;font-size:20px}.dap-track a{font:11px/1.5 Departure,monospace}#music-cover{flex:none;width:80px;height:80px;image-rendering:pixelated;border:1px solid #34442b55}
@media(max-width:420px){#music-cover{width:64px;height:64px}.dap-track{gap:10px}}
/* Fourth-generation A1059: 2.4 × 4.1 body; 160 × 128 LCD. */
.music-layout .ipod{width:min(100%,330px);padding:0;border:0;border-radius:0;background:none;box-shadow:none;transform:none;color:var(--soft)}
.ipod-shell{position:relative;width:100%;aspect-ratio:24/41;container-type:inline-size;border:1px solid #77816e;border-radius:6% / 3.5%;background:linear-gradient(125deg,#3e4538 0%,#293226 38%,#202a21 75%,#333c2f);box-shadow:inset 2px 2px 3px #e3e8cf25,inset -2px -3px 3px #0008,5px 9px 22px #0007}
.ipod-shell:after{content:'';position:absolute;inset:1%;border:1px solid #bdc8ab15;border-radius:inherit;pointer-events:none}.ipod-hold{position:absolute;top:-2px;right:17%;width:12%;height:3px;background:#8e987e;border-radius:2px}
.ipod .dap-screen{position:absolute;top:6%;left:15.8%;width:68.4%;aspect-ratio:5/4;padding:0;border:2px solid #11190f;border-radius:4px;box-shadow:0 0 0 1px #7c876b,inset 1px 2px 3px #34442b35;overflow:hidden;font:3.5cqw/1.25 Departure,monospace;color:#273322;background:#c3cfa8}
.ipod .dap-screen-top{position:absolute;inset:0 0 auto;height:16%;display:grid;grid-template-columns:12% 1fr 16%;align-items:center;padding:0 3%;border-bottom:1px solid #34442b88;font-size:4.5cqw;line-height:1;gap:0;text-align:center}.ipod-battery{display:block;width:100%;height:2.4cqw;border:1px solid currentColor;position:relative;background:linear-gradient(90deg,currentColor 0 75%,transparent 75%)}.ipod-battery:after{content:'';position:absolute;right:-3px;top:1px;width:2px;height:calc(100% - 2px);background:currentColor}
#music-now-playing{position:absolute;inset:19% 4% 4%;display:flex;flex-direction:column}#music-index{font-size:2.7cqw;line-height:1.3}.ipod .dap-track{gap:2.2cqw;margin:1.8cqw 0 1cqw;min-height:19cqw;align-items:center}.ipod .dap-track h3{font-size:3.7cqw;line-height:1.25;height:2.5em;margin:0 0 1.5cqw}.ipod .dap-track a{font-size:2.8cqw;line-height:1.3}.ipod #music-cover{width:18cqw;height:18cqw;border:0;filter:grayscale(1);mix-blend-mode:multiply}
.ipod .dap-meter{height:6cqw;min-height:6cqw;margin:auto 0 1cqw;gap:1cqw}.ipod .dap-meter i{width:2.5cqw;max-height:100%}.ipod input[type=range]{height:3cqw;min-height:3cqw}.ipod .dap-time{font-size:2.7cqw;line-height:1.4}.ipod[data-scrubbing=true] #music-seek{outline:1px dashed #34442b;outline-offset:1px}
.ipod-wheel{position:absolute;left:15%;top:48.5%;width:70%;aspect-ratio:1;border-radius:50%;background:linear-gradient(130deg,#8a947e,#748069);box-shadow:inset 0 1px 2px #e2e7cd40,0 1px 1px #0004;color:#e9ecdc;touch-action:none}
.ipod-wheel button{position:absolute;display:grid;place-items:center;background:none;border:0;padding:0;color:inherit;touch-action:manipulation;cursor:pointer}.ipod-wheel button:hover{color:#fff}.ipod-wheel button:active{filter:brightness(.85)}.ipod-wheel button:focus-visible{outline:2px solid #f0eedb;outline-offset:-2px;border-radius:5px}.ipod-wheel svg{width:6cqw;height:6cqw;fill:currentColor;shape-rendering:crispEdges}
.ipod-wheel .ipod-menu{top:0;left:32%;width:36%;height:24%;font:bold 3.5cqw/1 Arial,sans-serif;letter-spacing:.3px}.ipod-prev{left:0;top:36%;width:25%;height:28%}.ipod-next{right:0;top:36%;width:25%;height:28%}.ipod-play{bottom:0;left:36%;width:28%;height:25%}.ipod-wheel .ipod-select{left:34%;top:34%;width:32%;height:32%;border-radius:50%;background:linear-gradient(130deg,#3e4935,#293425);box-shadow:inset 1px 1px 2px #d7e1c122,0 0 1px #0005}.ipod-wheel .ipod-select:focus-visible{border-radius:50%}
.ipod-list,.ipod-settings{position:absolute;inset:16% 0 0;background:#c3cfa8;padding:2% 0;overflow:auto;overscroll-behavior:contain;scrollbar-width:none}.ipod-list button,.ipod-list>a{display:flex;justify-content:space-between;width:100%;border:0;background:none;color:#273322;padding:1% 4%;font:700 4.8cqw/1.25 Departure,monospace;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ipod-list button:hover,.ipod-list>a:hover,.ipod-list .ipod-selected{background:#34442b;color:#e8ecd7}.ipod-list button:focus-visible{outline:1px solid #273322;outline-offset:-1px}.ipod-settings{padding:5%;font:3.8cqw/1.4 Departure,monospace}.ipod-settings h4{display:none}.ipod-shuffle-setting{display:flex;justify-content:space-between;align-items:center;margin-bottom:8%}.ipod-settings .dap-shuffle{width:8cqw;height:8cqw;border:1px solid #34442b77;background:none;color:#273322;padding:1cqw}.ipod-settings svg{width:100%;height:100%;fill:currentColor}.ipod-settings .dap-volume{display:block;max-width:none;margin:0;font:3.8cqw/1.4 Departure,monospace;color:#273322}.ipod-settings .dap-volume input{display:block;margin-top:10px!important;accent-color:#34442b!important}
.ipod .dap-status{font-size:10px;line-height:1.5;margin:18px 0 7px;min-height:0;color:var(--soft)}.ipod .music-source{font-size:10px}.ipod .music-credit{font-size:9px;color:var(--soft);margin-top:5px}

.ipod-list>a{text-decoration:none}.ipod[data-backlight=false] .dap-screen{filter:brightness(.68)}
.ipod-link{position:absolute;inset:16% 0 0;padding:5%;background:#c3cfa8;color:#273322;font:3.3cqw/1.4 Departure,monospace;overflow:auto}.ipod-link label{display:block;margin-bottom:5%}.ipod-link input{display:block;width:100%;border:1px solid #34442b;background:#e0e6cc;color:#273322;font:3.1cqw/1.4 Departure,monospace;padding:3%;border-radius:0}.ipod-link>div{display:flex;justify-content:space-between;gap:4%;margin-top:6%}.ipod-link button{font:3.2cqw/1.3 Departure,monospace;background:#34442b;color:#e8ecd7;border:0;padding:3% 4%}.ipod-link button:focus-visible,.ipod-link input:focus-visible{outline-color:#273322;outline-offset:2px}.ipod-link p{font:2.8cqw/1.4 Departure,monospace;margin-top:5%}

/* Decorative cutting mat for current project reports. */
.projects-section{--mat:#101411;--mat-fine:#a6b49a16;--mat-major:#a6b49a2e;--mat-edge:#81947466;border:1px solid #52614d;border-radius:12px;background:linear-gradient(var(--mat-major) 1px,transparent 1px) 10px 10px/120px 120px,linear-gradient(90deg,var(--mat-major) 1px,transparent 1px) 10px 10px/120px 120px,linear-gradient(var(--mat-fine) 1px,transparent 1px) 10px 10px/24px 24px,linear-gradient(90deg,var(--mat-fine) 1px,transparent 1px) 10px 10px/24px 24px,var(--mat);box-shadow:inset 0 0 0 5px #0003,0 8px 25px #0004}
[data-theme=forest] .projects-section{--mat:#163e30;--mat-fine:#c4d5ad1c;--mat-major:#c4d5ad38;--mat-edge:#bbcca780;border-color:#809874}
.projects-section:before{content:'';display:block;position:absolute;inset:10px;border:1px solid var(--mat-edge);border-radius:3px;pointer-events:none;background:repeating-linear-gradient(90deg,var(--mat-edge) 0 1px,transparent 1px 24px) left top/100% 7px repeat-x,repeating-linear-gradient(90deg,var(--mat-edge) 0 1px,transparent 1px 120px) left top/100% 12px repeat-x,repeating-linear-gradient(90deg,var(--mat-edge) 0 1px,transparent 1px 24px) left bottom/100% 7px repeat-x,repeating-linear-gradient(var(--mat-edge) 0 1px,transparent 1px 24px) left top/7px 100% repeat-y,repeating-linear-gradient(var(--mat-edge) 0 1px,transparent 1px 120px) left top/12px 100% repeat-y,repeating-linear-gradient(var(--mat-edge) 0 1px,transparent 1px 24px) right top/7px 100% repeat-y}
.projects-section:after{content:'';display:block;position:absolute;inset:auto 20px 20px auto;width:240px;height:200px;border:0;background:url('/assets/cutting-mat-guides.svg') center/contain no-repeat;opacity:.34;pointer-events:none}
@media(max-width:700px){.projects-section:after{width:180px;height:150px}}

.projects-section{isolation:isolate}.projects-section:before,.projects-section:after{z-index:-1}.projects-section .folder-tab{background:var(--mat);border:0}.projects-section .project-card{border:0}.projects-section .project-visual{background:none}
/* Dot pitch matches the 4px ink grid. */
.notebook-section .board{border:1px solid var(--line);border-radius:0;background:radial-gradient(#c8d2b42e 1px,transparent 1.3px) 0 0/16px 16px,#0d0f0c;box-shadow:none}
[data-theme=forest] .notebook-section .board{background:radial-gradient(#d4dfba33 1px,transparent 1.3px) 0 0/16px 16px,#1d3a2a}
.notebook-section .board:before,.notebook-section .board:after{display:none}

.board .note-handle:before{width:8px;height:8px;border-radius:0;background:#9a7452;box-shadow:inset 2px 2px #d5b48a,inset -2px -2px #614b36,2px 2px #0005}
/* Phones get a plain list of notes instead of the drag-and-draw board. */
.note-list{display:none}.note-list h3{font:400 22px/1.3 Departure,monospace;margin:12px 0}
@media(max-width:700px){.notebook-section .board,#clear-drawing{display:none!important}.note-list{display:block}}
.project-shot{margin:0 0 45px;border:1px solid var(--line)}.project-shot img{display:block;width:100%;height:auto}
/* 88x31 button in the footer: clicking turns it over to an inverted WELCOME face. */
.site-badge{width:88px;height:31px;padding:0;border:0;background:none;flex:none;touch-action:manipulation}
.site-badge-turn{display:block;position:relative;width:100%;height:100%}
.site-badge-face{position:absolute;inset:0}.site-badge-face img{display:block;image-rendering:pixelated}
.site-badge-back{display:none;place-items:center;background:var(--accent);color:var(--bg);font:11px/1 Departure,monospace;letter-spacing:.12em}
.site-badge[aria-pressed=true] .site-badge-face:first-child{display:none}
.site-badge[aria-pressed=true] .site-badge-back{display:grid}
.site-badge.is-turning .site-badge-turn{animation:badge-turn .32s ease-in-out}
/* Swap readable faces at the edge; no face stays rotated or depends on backface compositing. */
@keyframes badge-turn{0%,100%{transform:perspective(320px) rotateY(0deg)}49.999%{transform:perspective(320px) rotateY(90deg)}50%{transform:perspective(320px) rotateY(-90deg)}}
@media(prefers-reduced-motion:reduce){.site-badge-turn{animation:none!important}}
.footer-stamp{display:flex;align-items:center;gap:20px}
.project-visual img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top left;border:1px solid var(--mat-edge,var(--line));filter:saturate(.85)}.project-card:hover .project-visual img{filter:none}
/* High-school archive: list at the bottom of /projects/, entries on /projects/archive.html. */
.archive-list{margin-top:90px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.archive-list>summary{display:flex;align-items:baseline;gap:18px;padding:26px 0;cursor:pointer;list-style:none}.archive-list>summary::-webkit-details-marker{display:none}
.archive-list>summary:before{content:'+';font:22px/1 Departure,monospace;color:var(--accent);width:16px}.archive-list[open]>summary:before{content:'−'}
.archive-list>summary h2{margin:0!important;font-size:clamp(22px,3vw,32px)}.archive-count{font:11px/1 Departure,monospace;color:var(--soft)}.archive-list>summary:hover h2{text-decoration:underline;text-underline-offset:6px}
.archive-list>p{font-size:13px;color:var(--soft);margin:0 0 24px 34px}
/* Clickable rows (archive entries and project cards): tint, underlined title, nudged arrow. */
.entry-list a{padding:26px 60px 26px 16px}.entry-list a,.project-card{position:relative;transition:background .15s}.entry-list a:hover,.entry-list a:focus-visible,.project-card:hover,.project-card:focus-visible{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.project-card{padding:25px 64px 25px 16px}.project-card:hover h3,.project-card:focus-visible h3{text-decoration:underline;text-underline-offset:8px}
.archive-list h3{font:400 22px/1.3 Departure,monospace;margin:12px 0}.entry-list a:hover :is(h2,h3),.entry-list a:focus-visible :is(h2,h3){text-decoration:underline;text-underline-offset:6px}
.row-arrow{position:absolute;right:18px;top:50%;transform:translateY(-50%);font:22px/1 Departure,monospace;color:var(--accent);transition:transform .15s}a:hover>.row-arrow,a:focus-visible>.row-arrow{transform:translate(5px,-50%)}
@media(prefers-reduced-motion:reduce){.entry-list a,.project-card,.row-arrow{transition:none}}
.archive-entry{margin-bottom:80px}.archive-entry h2{margin-bottom:8px!important}.prose .archive-period{font:11px/1.5 Departure,monospace;margin-bottom:28px}
/* Text links fade to green on hover/focus. Block links (cards, rows, notes) and iPod screen links keep their own states. */
body{--link-hover:var(--accent)}[data-theme=forest]{--link-hover:#c4dea0}
a{transition:color .25s ease,text-decoration-color .25s ease}
a:not(.project-card,.note-open,.name-mark,.skip,.entry-list a,.dap a,.ipod-link a):hover,a:not(.project-card,.note-open,.name-mark,.skip,.entry-list a,.dap a,.ipod-link a):focus-visible{color:var(--link-hover)}
@media(prefers-reduced-motion:reduce){a{transition:none}}
/* Consistency pass: archive screenshots stay secondary to the text; phone layouts for card arrows and the archive header. */
.archive-entry .project-shot{max-width:640px}.entry-list time{display:block}
@media(max-width:700px){.project-card>.row-arrow{top:auto;bottom:26px;transform:none}.project-card:hover>.row-arrow,.project-card:focus-visible>.row-arrow{transform:translateX(5px)}.archive-list>summary{flex-wrap:wrap;row-gap:6px}.archive-count{flex-basis:100%;padding-left:34px}}

/* Photo prints keep the originals behind a portrait crop; translation leaves their paper tilt intact. */
.about-photos .photo-drawer{position:relative;padding-bottom:70px;justify-content:space-evenly;gap:0}
.photo-drawer figure:nth-child(n){margin-top:0}
.photo-drawer>noscript{display:contents}
.photo-drawer figure{position:relative;cursor:grab;touch-action:none;user-select:none}
.photo-drawer .photo-open{display:block;width:100%;padding:0;border:0;background:none;cursor:grab}
.photo-drawer img{aspect-ratio:3/4;object-fit:cover;object-position:center}
.photo-drawer figure[data-dragging=true]{cursor:grabbing;transform:rotate(0);transition:none;box-shadow:8px 14px 24px #0008}
.photo-drawer figure[data-dragging=true] .photo-open{cursor:grabbing}
.photo-drawer figure:focus-visible{outline:2px solid var(--accent);outline-offset:5px}

.photo-focus{width:fit-content;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);padding:38px 12px 12px;background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:0 20px 70px #0009}
.photo-focus::backdrop{background:#000c;backdrop-filter:blur(3px)}
.photo-focus>img{display:block;width:min(calc(100vw - 60px),calc(72dvh * var(--photo-ratio,.75)),1060px);height:auto;max-height:72dvh;object-fit:contain;margin:auto;image-rendering:pixelated}
.photo-focus>p{font:11px/1.6 Departure,monospace;padding:12px 2px 0}
.photo-focus-close{position:absolute;right:8px;top:5px;width:28px;height:28px;padding:0;border:0;background:none;color:var(--ink);font:14px/1 Departure,monospace}
.photo-focus-close:focus-visible{outline-color:var(--accent);outline-offset:0}

.project-card-text{grid-template-columns:1fr}.prose img{max-width:100%;height:auto}.prose pre{overflow-x:auto;padding:18px;border:1px solid var(--line);font-size:12px}.prose blockquote{border-left:2px solid var(--copper);padding-left:20px;margin-left:0}

.ipod-state{position:absolute;right:0;top:0;font:2.7cqw/1.3 Departure,monospace}

@media(pointer:coarse){
  .site-header nav a{display:flex;align-items:center;min-height:44px}
  .site-header .theme-icon{width:44px;height:44px;flex-shrink:0;padding:10px}
  .site-header .name-mark{min-width:44px;min-height:44px}
  .photo-focus-close{width:44px;height:44px;top:0;right:0}
  .photo-focus{padding-top:48px}
  .ipod-list button,.ipod-list>a{min-height:24px}
  .ipod-settings .dap-shuffle{min-width:32px;min-height:32px}
  .ipod input[type=range]{min-height:24px}
  .ipod-link input{font-size:16px}
}

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

.hero-webring{display:flex;align-items:center;width:max-content;gap:0;margin:28px 0 0 -12px;pointer-events:auto}
.hero-webring a{display:grid;place-items:center;width:44px;height:44px;color:var(--soft);text-decoration:none!important;transition:color .2s}
.hero-webring .ring-home{color:var(--ink)}
.hero-webring a:hover{color:var(--accent)}
.hero-webring svg{fill:currentColor;shape-rendering:crispEdges}
.ring-step svg{width:14px;height:14px}
.ring-home svg{width:30px;height:30px}
#ring-next svg{transform:scaleX(-1)}
@media(prefers-reduced-motion:reduce){.hero-webring a{transition:none}}