:root{
  --brand-size:clamp(20px,2vw,27px);
  --paper:#f6f3eb;--ink:#20231f;--teal:#155b52;--rust:#a7442f;--muted:#585d53;
  --line:#c3c3b5;--pale:#e6eadf;--serif:"Instrument Serif","Field Serif",Georgia,serif;
  --sans:"DM Sans Variable","DM Sans",Arial,sans-serif;--mono:ui-monospace,"DejaVu Sans Mono",monospace;
  --margin:clamp(16px,4.5vw,80px);--section:clamp(38px,5vw,76px);--rule:1px solid var(--line)
}
@font-face{font-family:"Field Serif";src:url("./fonts/field-serif.ttf") format("truetype");font-display:swap}
*{box-sizing:border-box}
html{scroll-padding-top:16px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.55 var(--sans)}
a{color:var(--teal);text-underline-offset:4px}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--rust);outline-offset:4px}
.wrap{width:min(1200px,calc(100% - 2 * var(--margin)));margin-inline:auto}
.skip{position:absolute;top:5px;left:5px;transform:translateY(-160%);background:var(--paper);padding:12px;z-index:5}
.skip:focus{transform:none}
.header,.header nav,.brand,.hero-links,.primary,.secondary,.locator,.kicker,.plate-heading,.plate-heading span,.plate-meta,.plate-meta span,.hint,.demo-head,.editor-button,.windowbar,.colophon,.colophon span,.socials,.socials a{display:flex;align-items:center}
.header{min-height:76px;border-bottom:1px solid var(--ink);justify-content:space-between;gap:12px}
.header nav{gap:clamp(12px,2.8vw,44px)}
.brand,.header nav a,.hero-links a,.colophon a,.socials a{text-decoration:none}
.header nav a,.brand,.secondary,.colophon a,.socials a{min-height:44px;display:inline-flex;align-items:center}
.brand{gap:10px;font:400 var(--brand-size)/1 var(--serif);color:var(--ink);letter-spacing:-.035em}
.mark{width:29px;height:29px;flex:none;color:var(--teal)}
.header nav a{font-size:14px;gap:5px;font-weight:550;color:var(--ink)}
a:hover,.header nav a:hover{text-decoration:underline}
.icon{width:18px;height:18px;flex:none}
.header nav .icon{width:13px;height:13px}
.hero{padding:clamp(36px,4vw,62px) 0;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,5vw,82px);align-items:center}
.locator,.kicker,.micro,.plate-heading,.plate-meta,.level-strip small,.window-label,.demo-head span,.net-label,.windowbar span{font-family:var(--mono);font-size:11px;line-height:1.4;letter-spacing:.065em}
.locator,.kicker,.micro,.level-strip small,.window-label,.net-label{text-transform:uppercase}
.locator,.kicker{color:var(--teal);gap:8px}
.locator .icon{width:15px;height:15px}
h1,h2,p,figure,dl,dd{margin:0}
h1,h2,.challenge strong,.level-strip b{font-family:var(--serif);font-weight:400}
h1{font-size:clamp(76px,7.9vw,119px);line-height:.85;letter-spacing:-.06em;margin:23px 0 25px}
h1 em{display:block;color:var(--teal);font-weight:400}
h2{font-size:clamp(45px,4.8vw,72px);line-height:1.03;letter-spacing:-.052em}
.intro p,.story-copy>p,.contact p{line-height:1.6;text-wrap:pretty}
.intro p{max-width:41ch;font-size:clamp(16px,1.24vw,19px);color:#3c413b}
.hero-links{gap:24px;margin-top:27px;flex-wrap:wrap}
.primary,.editor-button{min-height:46px;gap:16px;padding:0 19px;background:var(--teal);color:white;border:1px solid var(--teal);border-radius:3px;text-decoration:none;font-size:14px;font-weight:600;justify-content:center}
.primary:hover,.editor-button:hover{background:#124a43}
.secondary{gap:6px;font-size:14px;font-weight:600}
.secondary .icon{width:15px}
.palace{min-width:0;border:1px solid #b8bcad;background:#fbf9f2;box-shadow:4px 5px 0 #e0e0d3}
.plate-heading,.plate-meta,.demo-head{justify-content:space-between;gap:8px}
.plate-heading{padding:8px 13px;background:var(--teal);color:#fff}
.plate-heading span:first-child{font-size:12px;letter-spacing:0;gap:9px}
.plate-heading span:last-child{font-size:10px;text-transform:uppercase}
.plate-heading .icon{width:16px}
.image-stage{position:relative;background:#ddca99}
.main-scene{display:block;width:100%;height:auto}
.regions{position:absolute;inset:0}
.region{position:absolute;border:0;background:transparent;padding:0;border-radius:50%;min-width:44px;min-height:44px;transform:translate(-50%,-50%)}
.region span{display:none}
.region:focus-visible{outline:3px solid white;box-shadow:0 0 0 6px var(--teal)}
.region:focus-visible span{display:block;position:absolute;bottom:105%;left:25%;background:var(--paper);color:var(--ink);font:12px/1.3 var(--mono);padding:5px;width:max-content;max-width:120px;text-align:left}
.gate{left:45%;top:42%;width:11%;height:22%}
.robes{left:83%;top:56%;width:9%;height:19%}
.drum{left:12.778%;top:85.833%;width:10%;height:15%}
.drum.found::after,.with-hint .drum:not(.found)::after{content:"";position:absolute;inset:0;border:3px solid var(--rust);border-radius:50%;box-shadow:0 0 0 2px #fff8df;animation:mark-in .18s ease-out}
.with-hint .drum:not(.found)::after{inset:-35%;border-style:dashed;border-width:2px}
@keyframes mark-in{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:scale(1)}}
.plate-meta{padding:7px 13px;color:var(--muted);font-size:10px;border-bottom:var(--rule);letter-spacing:.01em}
.plate-meta span{gap:5px}
.plate-meta .icon{width:13px;height:13px}
.challenge{display:flex;align-items:center;gap:12px;padding:12px 16px 0}
.challenge .token{object-fit:contain;width:42px;height:44px}
.micro,.window-label,.level-strip small{display:block;color:var(--muted);font-size:10px}
.challenge strong{display:block;font-size:29px;line-height:1.06;letter-spacing:-.035em}
.hint,.game-feedback button,[data-copy]{background:none;border:0;color:var(--teal);min-height:44px;font-size:12px}
.hint{margin-left:auto;gap:6px;font-weight:600}
.game-feedback{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 16px;font-size:12px;min-height:32px;color:var(--teal)}
.game-feedback button{margin-left:auto;text-decoration:underline;text-underline-offset:3px}
.palace noscript p{font-size:13px;margin:10px 16px}
.chapter{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,82px);padding:var(--section) 0;border-top:1px solid var(--ink);align-items:start}
.kicker{margin-bottom:11px;flex-wrap:wrap;font-size:10px}
.kicker i{width:16px;height:1px;background:var(--teal)}
.story-copy>p,.contact p{margin-top:16px;color:#454941;max-width:45ch}
.notes{margin-top:18px;border-top:var(--rule)}
.notes summary{cursor:pointer;min-height:46px;display:flex;align-items:center;justify-content:space-between;color:var(--teal);font-weight:600;font-size:14px;list-style:none}
.notes summary::-webkit-details-marker{display:none}
.notes summary span:before{content:"+";font:21px var(--mono)}
.notes[open] summary span:before{content:"−"}
.notes dt,.skills dt{font-weight:650}
.notes dl{font-size:14px}
.notes dd{color:var(--muted);margin:3px 0 16px}
.level-strip{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.level-strip img{width:100%;height:auto;display:block}
.level-strip figcaption{padding-top:10px}
.level-strip b{display:block;font-size:clamp(20px,2vw,29px);letter-spacing:-.035em;line-height:1.13;margin:3px 0}
.level-strip figcaption span,.screenshot figcaption{font-size:13px;color:var(--muted)}
.network,.workspace{min-width:0}
.demo-head{padding:8px 0;border-top:2px solid var(--teal);border-bottom:var(--rule);color:var(--teal)}
.demo-head b{font-weight:600;font-size:14px}
.switch{display:inline-flex;margin:20px 0 10px;padding:3px;border:var(--rule);border-radius:4px;max-width:100%}
.switch button{padding:6px 14px;background:transparent;border:0;border-radius:2px;min-height:44px;font-size:13px;color:var(--teal)}
.switch button[aria-pressed=true]{background:var(--teal);color:white;font-weight:650}
.topology{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:18%;padding:14px 6px;color:var(--teal);isolation:isolate}
.boundary{position:relative;display:grid;justify-items:center;align-content:center;padding:13px 4px;border:1px dashed #6d8678;border-radius:8px;min-height:144px}
.net-label{font-size:10px;letter-spacing:.03em}
.device{width:90px;height:65px;max-width:100%;margin:8px 0 3px}
.boundary b{font-size:14px}
.wire{position:absolute;left:41%;right:41%;top:52%;border-top:2px solid var(--teal);display:flex;justify-content:center}
.wire:before,.wire:after{content:"";width:7px;height:7px;background:var(--teal);border-radius:50%;position:absolute;top:-4.5px;left:0}
.wire:after{left:auto;right:0}
.wire i{border:1px solid var(--teal);background:var(--paper);width:10px;height:10px;transform:translateY(-6px) rotate(45deg)}
[data-network=same] .boundary{border-color:transparent}
[data-network=same] .topology:before{content:"";position:absolute;inset:14px 6px;border:1px dashed #6d8678;border-radius:8px;background:#e8ede1;z-index:-1}
[data-network=same] .phone .net-label{visibility:hidden}
.diagram-caption{font-size:14px;min-height:3.1em;color:var(--muted);padding-top:8px}
.window{background:#202b28;color:#eef2e8;margin-top:16px;border:1px solid #243d35;border-radius:4px;overflow:hidden}
.windowbar{padding:9px 14px;gap:8px;border-bottom:1px solid #52655c;color:#def1e9}
.windowbar span{margin-left:auto;font-size:10px}
.panes{display:grid;grid-template-columns:.95fr 1.15fr}
.tree,.destination{padding:17px;min-width:0}
.tree{border-right:1px solid #52655c;background:#19231f;font:13px/1.5 var(--mono)}
.window-label{color:#b8ccbd;font-size:10px;margin-bottom:6px}
.tree>b{display:block;margin-bottom:13px}
.tree-root,.tree-branch{color:#c9d7ce;font-size:13px;padding:3px}
.tree-branch{padding-left:15px}
.tree button{display:flex;align-items:center;gap:6px;padding:0 4px 0 27px;width:100%;min-height:44px;text-align:left;background:transparent;border:0;border-left:2px solid transparent;color:inherit}
.tree button.shallow{padding-left:15px}
.tree button[aria-pressed=true]{background:#314d40;border-color:#aae9c5;font-weight:bold}
.tree .icon{width:15px;color:#bcdfcc}
.destination code{display:block;overflow-wrap:anywhere;color:#eff5eb;font:14px/1.55 var(--mono)}
.editor-button{margin:15px 0 9px;background:#d7e9d9;border:0;color:#194436;min-height:44px;font-size:12px;gap:7px;padding:8px 11px}
.editor-button:hover{background:#b8d6bd}
[data-editor] strong{display:block;color:#bdcdbf;font:10px var(--mono);text-transform:uppercase;margin:12px 0 4px}
[data-editor] code{font-size:12px}
.screenshot img{display:block;width:100%;height:auto}
.skills>div{display:grid;grid-template-columns:minmax(110px,.75fr) 1.4fr;gap:18px;padding:13px 0;border-bottom:var(--rule);font-size:14px}
.skills>div:first-child{padding-top:0}.skills dd{color:#464c43}
footer{background:#e5e9dd;border-top:1px solid var(--ink)}
.contact{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,82px);padding-block:var(--section)}
.email-row{display:flex;align-items:center;flex-wrap:wrap;gap:2px 12px}
.email-row .micro{width:100%}
.email-row>a,.socials a{font:550 clamp(16px,1.25vw,18px)/1.45 var(--sans);min-height:44px}
.email-row>a{display:inline-flex;align-items:center;max-width:100%;overflow-wrap:anywhere}
[data-copy]{display:inline-flex;gap:5px;align-items:center}
[data-copy-status]{width:100%;font-size:13px}
.socials{gap:2px 24px;flex-wrap:wrap;margin-top:6px}.socials a{gap:6px}.socials .icon{width:15px}
.colophon{justify-content:space-between;gap:12px;border-top:var(--rule);font-size:12px;min-height:68px}.colophon span{gap:8px}.colophon .mark{width:18px;height:18px}
@media(max-width:799px){
 .hero{grid-template-columns:1fr;gap:28px}
 .intro p{max-width:60ch}
 h1{font-size:clamp(65px,10vw,82px);line-height:.94;margin:14px 0 18px}
 h1 em{display:inline}
 .hero-links{margin-top:16px}
 .chapter,.contact{grid-template-columns:1fr;gap:26px}
 .story-copy>p,.contact p{max-width:65ch}
 .hero .palace{max-width:100%}
 .header{min-height:65px}
}
@media(max-width:520px){
 :root{--brand-size:18px}
 .brand{gap:5px}.brand .mark{width:21px;height:21px}
 .header nav{gap:13px}.header nav a{font-size:12px}.header nav .icon{display:none}
 .hero{padding-top:29px}.locator{font-size:10px}
 h1{max-width:8ch;font-size:clamp(64px,15vw,78px)}
 .intro p{font-size:16px}
 .hero-links{gap:20px}
 .plate-heading{padding:7px 9px}.plate-heading span:first-child{font-size:11px;gap:4px}
 .plate-heading span:last-child,.plate-meta{font-size:9px}
 .challenge{padding:9px 10px 0;gap:8px}.challenge strong{font-size:25px}
 .game-feedback{padding:0 10px}
 .level-strip{gap:10px}.level-strip figcaption span{font-size:12px}
 .panes{grid-template-columns:1fr}
 .tree{border-right:0;border-bottom:1px solid #52655c}
 .tree,.destination{padding:13px}
 .skills>div{display:block}.skills dd{margin-top:3px}
 .net-label{font-size:9px}.boundary b{font-size:12px}.device{width:70px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.profile-spread{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;
  padding:clamp(28px,4vw,64px) 10px clamp(42px,5vw,76px) 0;isolation:isolate;
}
.profile-intro{
  color:#faf7eb;background:#163e36;padding:clamp(30px,4vw,58px);
  padding-right:clamp(42px,5vw,80px);margin-right:-30px;border-radius:3px;
  box-shadow:0 12px 27px -21px #192f25;
}
.profile-intro .locator{color:#c9dfbe}
.profile-intro h1{font-size:clamp(66px,6.7vw,96px);margin:25px 0;line-height:.91}
.profile-intro h1 em{color:#d5dfa9;display:block}
.profession{font:400 clamp(23px,2.1vw,32px)/1.12 var(--serif);letter-spacing:-.018em;max-width:24ch}
.profile-bio{font-size:15px;color:#dee6da;line-height:1.65;margin-top:16px;max-width:43ch}
.profile-intro .primary{background:#e5ebcd;color:#143d34;border-color:#e5ebcd}
.profile-intro .secondary{color:#f6f3eb}
.tool-sheet{background:#fffcf3;padding:clamp(19px,2.6vw,38px);position:relative;border:1px solid #b7b7a4;box-shadow:5px 5px 0 #d7d9c9,6px 6px 0 #abae97,11px 11px 0 #e4e3d5,0 15px 36px -22px #293b29}
.tool-sheet h2{font-size:clamp(37px,3.8vw,55px);margin-bottom:16px}
.tool-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:18px}
.tool-grid>div{border-top:var(--rule);position:relative;padding:15px 0 15px 43px}
.tool-grid dt{font-size:15px;font-weight:650;line-height:1.3}
.tool-grid dt a{color:inherit;text-decoration-color:#a2b4a3}
.tool-grid img{position:absolute;left:0;top:15px;object-fit:contain;background:#eeefe4;border-radius:6px;padding:4px}
.tool-grid dd{font-size:13px;color:var(--muted);line-height:1.4;margin-top:3px}
.game-story{align-items:start}
.game-story .level-strip{grid-column:1/-1;max-width:760px}
.network,.workspace{padding:clamp(14px,2vw,24px);border:var(--rule);background:#fcfaf3;box-shadow:4px 5px 0 #dddfd0}
@media(max-width:880px){
 .profile-spread{grid-template-columns:1fr;padding-right:8px}
 .profile-intro{margin-right:0;padding:30px 26px 47px}
 .profile-intro h1 em{display:inline}
 .profile-intro h1{max-width:none}
 .profile-bio{max-width:62ch}
 .tool-sheet{margin:-20px 0 0 16px}
}
@media(max-width:550px){
 .header{flex-wrap:wrap;gap:0;padding:6px 0}.header nav{gap:12px}
 .profile-intro{padding:24px 20px 40px}
 .profile-intro h1{font-size:clamp(52px,13vw,68px)}
 .tool-sheet{margin-left:6px;padding:18px 14px}
 .tool-grid{column-gap:12px}
 .tool-grid>div{padding:11px 0}.tool-grid img{position:static;display:block;margin-bottom:7px}
 .tool-grid dt{font-size:14px}
}

/* The introduction sits directly on the paper beside the raised toolkit. */
.profile-intro{color:var(--ink);background:transparent;box-shadow:none;margin:0;padding:20px clamp(18px,4vw,64px) 20px 0}
.profile-intro h1 em,.profile-intro .locator,.profile-intro .secondary{color:var(--teal)}
.profile-bio{color:var(--muted)}
.profile-intro .primary{background:var(--teal);border-color:var(--teal);color:white}
.selected-work{padding:var(--section) 0;border-top:1px solid var(--ink)}
.selected-work > h3{margin:0;font:400 var(--brand-size)/1.2 var(--serif);letter-spacing:-.025em}
.project-index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,40px);margin-top:28px}
.project-card{display:block;text-decoration:none;color:var(--ink)}
.project-card img{display:block;width:100%;height:auto;aspect-ratio:1.8;object-fit:cover;object-position:top;border:var(--rule);box-shadow:3px 4px 0 #dddfd0}
.project-card small{display:block;margin-top:17px;color:var(--teal);font:11px var(--mono);text-transform:uppercase;letter-spacing:.06em}
.project-card h3{display:flex;align-items:center;justify-content:space-between;gap:10px;font:400 clamp(27px,2.8vw,38px)/1.1 var(--serif);margin:6px 0}
.project-card p{font-size:15px;color:var(--muted)}
.project-card:hover{text-decoration:none}.project-card:hover h3{text-decoration:underline}
.project-page .chapter{border-top:0}
.project-page .project-title{font-size:clamp(48px,5.8vw,86px);max-width:none;line-height:1;margin:15px 0 20px}
.project-cta{display:inline-flex;margin-top:20px;text-decoration:none}
.story-copy .listing-name{font-size:13px;margin-top:7px}
.project-nav{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0 38px;border-top:var(--rule);font-size:14px}
@media(max-width:880px){.tool-sheet{margin:18px 0 0}.profile-intro{padding-right:0}}
@media(max-width:650px){.project-index{grid-template-columns:1fr}.project-card{padding-bottom:14px}.project-card img{max-height:225px}}