/* Proto Mono will be used when installed. To ship it on the web, add your
   licensed WOFF2 file and add its url() to src below. No font is downloaded. */
@font-face {
  font-family: 'Proto Mono';
  src: local('Proto Mono'), local('ProtoMono-Regular'), local('Proto Mono Regular');
  font-display: swap;
}
:root { --paper:#f5f5f0; --ink:#242820; --muted:#72766b; --line:#d5d8cc; --accent:#678344; --mono:'Proto Mono','SFMono-Regular',Consolas,'Liberation Mono',monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:40px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--mono); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
a:focus-visible,button:focus-visible { outline:2px solid var(--accent); outline-offset:6px; }
::selection { background:#d6e5c2; color:#222; }
.skip-link { position:fixed; top:10px; left:10px; z-index:10; background:var(--ink); color:white; padding:14px; transform:translateY(-160%); }
.skip-link:focus { transform:none; }
.site-header { margin:0 4vw; padding:26px 0; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); font-size:11px; letter-spacing:.025em; }
.wordmark { display:flex; align-items:center; gap:12px; }
.mark { font:27px/1 sans-serif; color:var(--accent); }
.count { color:var(--muted); margin:0 18px 0 7px; }
.hero { position:relative; min-height:calc(100svh - 82px); padding:65px 4vw 88px; display:grid; grid-template-columns:1fr 1.04fr; align-items:center; gap:3vw; }
.eyebrow { display:flex; align-items:center; gap:9px; margin:0; font-size:10px; line-height:1.6; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.status-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent); }
h1 { font-size:clamp(32px,4.2vw,72px); line-height:1.09; font-weight:400; letter-spacing:-.075em; margin:30px 0 28px; }
h1 > span:not(.title-dot) { font-size:1em; line-height:1.09; }
.title-dot { color:var(--accent); font-size:1.4em; }
.index-link { display:inline-flex; gap:30px; align-items:center; border-bottom:1px solid var(--ink); padding:0 0 9px; font-size:11px; }
.index-link span { transition:transform .2s; }
.index-link:hover span { transform:translateY(3px); }
.hero-art { min-width:0; }
.art-caption { display:flex; align-items:center; justify-content:space-between; gap:10px; text-transform:uppercase; font-size:9px; letter-spacing:.06em; margin-bottom:15px; color:var(--muted); }
#motion-toggle { padding:6px 0 6px 8px; background:none; border:0; color:var(--ink); cursor:pointer; font-size:9px; text-transform:uppercase; letter-spacing:.04em; }
#motion-toggle span { margin-left:10px; }
.hero-stage { position:relative; aspect-ratio:1.17; overflow:hidden; background:white; }
iframe { display:block; width:100%; height:100%; border:0; pointer-events:none; }
.corner { position:absolute; width:12px; height:12px; border-color:#88947b; border-style:solid; pointer-events:none; }
.top-left { left:0;top:0;border-width:1px 0 0 1px; }.top-right { right:0;top:0;border-width:1px 1px 0 0; }
.bottom-left { left:0;bottom:0;border-width:0 0 1px 1px; }.bottom-right { right:0;bottom:0;border-width:0 1px 1px 0; }
.art-footnote { display:flex; align-items:center; justify-content:space-between; font-size:9px; line-height:1.8; padding:15px 0 0; }
.muted { color:var(--muted); }
.hero-bottom { position:absolute; bottom:28px; left:4vw; right:4vw; display:flex; justify-content:flex-end; color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.05em; }
.assignments { border-top:1px solid var(--line); padding:86px 4vw 65px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:42px; }
h2 { font-size:clamp(25px,3.4vw,46px); font-weight:400; letter-spacing:-.055em; margin:13px 0 0; }
.section-note { font-size:10px; color:var(--muted); line-height:1.8; margin:0 0 3px; }
.study-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; }
.study { display:block; min-width:0; }
.study-preview { position:relative; aspect-ratio:1.28; overflow:hidden; background:white; border:1px solid var(--line); transition:border-color .2s; }
.preview-one { background:#113d42; }.preview-two { background:#ecece4; }
.preview-number { position:absolute; top:14px; left:14px; font-size:10px; padding:7px 9px; background:#f5f5f0e8; color:var(--ink); border:1px solid #24282020; }
.open-indicator { position:absolute; bottom:12px; right:12px; display:grid; place-items:center; width:33px; height:33px; background:var(--paper); color:var(--ink); border:1px solid var(--line); transition:background .2s,color .2s; }
.study:hover .study-preview,.study:focus-visible .study-preview { border-color:var(--accent); }
.study:hover .open-indicator,.study:focus-visible .open-indicator { background:var(--ink); color:var(--paper); }
.study-meta { display:flex; justify-content:space-between; gap:8px; color:var(--muted); font-size:9px; padding-top:21px; text-transform:uppercase; }
h3 { font-size:18px; font-weight:400; letter-spacing:-.04em; margin:13px 0 10px; }
.study p { color:var(--muted); font-size:11px; line-height:1.8; min-height:40px; max-width:34ch; margin:0; }
.study-link { display:flex; align-items:center; justify-content:space-between; font-size:10px; border-bottom:1px solid var(--line); padding:22px 0 15px; }
.next-study { display:flex; align-items:center; gap:30px; border:1px dashed var(--line); padding:23px 25px; margin-top:45px; }
.next-study p { font-size:11px; color:var(--muted); margin:0; }
.small-orbit { margin-left:auto; font-size:25px; color:#8c967f; }
footer { margin:0 4vw; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; padding:27px 0; font-size:9px; color:var(--muted); }
.noscript-note { margin:20px 4vw; font-size:12px; }
@media(min-width:1600px) { .hero { gap:6vw; } .hero-stage { max-height:65vh; } }
@media(max-width:850px) { .hero { padding-top:45px; grid-template-columns:1fr 1fr; } h1 { font-size:4.2vw; }.study-grid { gap:16px; } .study-meta { font-size:8px; } h3 { font-size:16px; }.study p{font-size:10px;} }
@media(max-width:640px) {
  .site-header { margin:0 6vw; padding:20px 0; font-size:9px; }.count { margin-right:8px; }.mark{font-size:23px;}
  .hero { min-height:auto; grid-template-columns:1fr; padding:42px 6vw 80px; gap:36px; }
  h1 { font-size:clamp(30px,8vw,50px); margin:22px 0; }h1 > span:not(.title-dot),.title-dot{font-size:1em;}
  .hero-stage{aspect-ratio:1.35;}.hero-bottom{left:6vw;right:6vw;font-size:8px;bottom:25px;}.hero-bottom a{margin-left:auto;}
  .assignments{padding:52px 6vw 40px;}.section-heading{display:block;margin-bottom:30px;}.section-note{margin-top:16px;}.study-grid{grid-template-columns:1fr;gap:38px;}
  .study-preview{aspect-ratio:1.4;}.study-meta{font-size:9px;}h3{font-size:21px;}.study p{font-size:11px;min-height:0;max-width:100%;}.study-link{padding-top:17px;}
  .next-study{padding:20px 16px;gap:16px;}.next-study p{font-size:10px;}.small-orbit{display:none;}
  footer{margin:0 6vw;font-size:8px;flex-wrap:wrap;}
}
@media(prefers-reduced-motion:reduce) { html{scroll-behavior:auto;} *,*::before,*::after{transition:none!important;} }

code { font:inherit; }
.study .equation { max-width:none; min-height:60px; line-height:1.85; overflow-wrap:anywhere; }

.study-preview > img { display:block; width:100%; height:100%; object-fit:cover; }
.project { padding:65px 4vw; max-width:1500px; margin:0 auto; }
.project h1 { max-width:22ch; }
.project-description { color:var(--muted); font-size:13px; line-height:1.8; margin:0 0 42px; }
.project-gallery { display:grid; gap:36px; }
.project-gallery figure { margin:0; }
.project-gallery img { display:block; width:100%; height:auto; border:1px solid var(--line); }
.project-gallery figcaption { margin-top:12px; font-size:10px; color:var(--muted); }
@media(max-width:640px) { .project { padding:42px 6vw; } }

.site-header nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:12px 24px; }
.design-preview { aspect-ratio:3 / 4; }
.design-preview > img { object-fit:contain; }
.design-gallery { max-width:900px; margin:0 auto; }
/* Keep the live viewport and its link in separate, fully sized rows. */
.website-preview { display:block; border:1px solid var(--line); background:white; }
.website-preview-window { position:relative; display:block; height:clamp(560px,75vh,900px); overflow:hidden; }
.website-preview-window > iframe { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.maer-site-preview > iframe { position:absolute; top:0; left:0; width:300%; height:300%; transform:scale(.333333); transform-origin:top left; pointer-events:none; }
.website-preview-label { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:18px 22px; background:var(--paper); border-top:1px solid var(--line); font-size:12px; line-height:1.5; }
.website-preview:hover .website-preview-label,.website-preview:focus-visible .website-preview-label { background:var(--ink); color:var(--paper); }
.maer-gallery { gap:48px; }
.maer-gallery > figure { min-width:0; }
.maer-gallery figcaption { line-height:1.6; }
@media(max-width:640px) { .website-preview-window { height:560px; } .website-preview-label { padding:16px; } }
.maer-gallery .maer-logo { padding:6%; background:white; }
.maer-gallery video { display:block; width:100%; aspect-ratio:16 / 9; background:#171717; border:1px solid var(--line); }
.maer-icon { max-width:520px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:640px) { .site-header { gap:16px; } }

.project-video { display:block; width:100%; height:auto; background:#171717; border:1px solid var(--line); }

.volume-preview { background:radial-gradient(#d5d8cc 1px,transparent 1px) 0 0 / 12px 12px,var(--paper); }
.volume-preview > img { position:absolute; left:6%; top:28%; width:57%; height:auto; aspect-ratio:16 / 9; object-fit:contain; background:#171717; }
.volume-preview-ball { position:absolute; right:8%; top:36%; width:19%; aspect-ratio:1; display:grid; place-items:center; border-radius:50%; background:#d6fa6b; font-size:clamp(12px,1.6vw,22px); }
.volume-preview-floor { position:absolute; bottom:0; left:0; right:0; height:8%; background:var(--ink); }