/* 2D mode — deliberately old-web: Times New Roman, classic blue links,
   left-hand nav. The 3D maze (/3d/) keeps its own modern look; the mode
   switch is the one shared element and matches the maze's geometry so it
   sits in the same spot on both screens. */
:root{ --blue:#0000EE; --visited:#551A8B; --line:#ccc; --dim:#555; }
*{box-sizing:border-box;}
/* Fixed frame like the maze: header and footer bars always on screen,
   only the content pane scrolls. */
html,body{height:100%;}
body{margin:0; background:#fff; color:#000;
  font-family:"Times New Roman",Times,serif; font-size:17px; line-height:1.55;
  height:100vh; height:100dvh; display:flex; flex-direction:column; overflow:hidden;}
a{color:var(--blue);}
a:visited{color:var(--visited);}
img{max-width:100%; height:auto; display:block;}

/* ---------- top bar ---------- */
header{flex:0 0 auto;}
header .bar{display:flex; align-items:center; gap:12px;
  height:58px; padding:0 20px; border-bottom:1px solid var(--line);}
header .name{flex:1; font-size:19px; font-weight:bold;}
header .name a, header .name a:visited{color:#000; text-decoration:none;}

/* 2D / 3D switch — two plain boxes: active is solid black,
   inactive is greyed out. Identical markup and look in the maze so the
   header reads as one fixed bar with the mode changing beneath it. */
.mode-switch{display:inline-flex; user-select:none;}
.mode-switch .opt{background:#fff; border:1px solid #000; padding:3px 13px; margin:0;
  font-family:inherit; font-size:15px; line-height:1.3; color:#999; cursor:pointer;}
.mode-switch .opt + .opt{border-left:none;}
.mode-switch .opt:hover{color:#000;}
.mode-switch .opt[aria-pressed="true"]{background:#000; color:#fff; cursor:default;}
.mode-switch .opt[aria-pressed="true"]:hover{color:#fff;}

/* ---------- sidebar + content ---------- */
.layout{display:flex; gap:48px; flex:1 1 auto; width:100%; min-height:0;
  padding-left:20px; overflow:hidden;}
/* nav sizes itself to its longest link — never scrolls horizontally */
nav.side{flex:0 0 auto; padding-top:26px; white-space:nowrap; overflow-y:auto;}
nav.side ul{margin:0; padding:0; list-style:none;}
nav.side li{margin-bottom:9px;}
nav.side a[aria-current="page"]{font-weight:bold;}
/* content takes all remaining width; its scrollbar sits at the page's right edge */
main{flex:1 1 auto; min-width:0; overflow-y:auto;
  padding:26px 24px 60px 0;}

/* nav hover preview — pops up at a random spot and size */
.nav-preview{position:fixed; z-index:50; pointer-events:none; height:auto;}
main p{max-width:62ch;}
h1{font-size:25px; margin:0 0 4px;}
h2{font-size:19px; margin:30px 0 10px;}
.meta{color:var(--dim); font-style:italic; margin:0 0 26px;}

/* images */
.hero{margin:0; max-width:820px;}
figure{margin:0;}
figcaption{color:var(--dim); font-size:14px; font-style:italic; padding-top:5px;}
.gallery{display:grid; gap:28px; margin-top:30px; max-width:820px;}
.portrait{max-width:340px; margin:0 0 26px;}

/* bio CV */
.cv{list-style:none; margin:0; padding:0;}
.cv li{margin-bottom:13px; max-width:62ch;}
.cv .yr{color:var(--dim); font-size:14px;}
.cv i{font-style:italic;}

/* ---------- footer bar — pixel-matched to the maze's statusbar ---------- */
footer{flex:0 0 auto; display:flex; align-items:center;
  height:calc(52px + env(safe-area-inset-bottom));
  padding:0 20px env(safe-area-inset-bottom); border-top:1px solid var(--line);
  font-size:14px; color:var(--dim); background:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

@media (max-width:900px){
  .layout{flex-direction:column; gap:22px; overflow-y:auto; padding:0 16px;}
  nav.side{flex:none; white-space:normal; padding-top:22px; overflow:visible;}
  main{overflow:visible; padding:0 0 60px;}
}