/* pages.css — early-2000s web look for the text pages.
   Windows XP Luna chrome, Tahoma, beveled panels. No JS, no webfonts,
   so these stay fast and fully crawlable. */
:root{
  --luna-a:#0d5fdb; --luna-b:#4c9bff; --luna-c:#0a44a8;
  --face:#ece9d8; --face-lo:#aca899; --face-hi:#ffffff;
  --navy:#003399; --amber:#a8620f; --ink:#1a1a1a; --muted:#5a5a5a;
  --line:#c8d4e4; --panel:#f3f7fd;
  --f-ui:Tahoma,Verdana,sans-serif;
  --f-title:'Trebuchet MS',Tahoma,sans-serif;
  --f-head:'Franklin Gothic Medium','Arial Narrow',Arial,sans-serif;
  --f-mono:'Courier New',Courier,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--f-ui); font-size:13px; line-height:1.65; color:var(--ink);
  background:#000; height:100vh; height:100dvh; overflow:hidden;
}

/* the same bezel, grain and scanlines as the homepage, so a standalone page
   and the in-window version are visually identical */
.grain{ pointer-events:none; position:fixed; inset:0; z-index:400; opacity:.07; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>"); }
.scanlines{ pointer-events:none; position:fixed; inset:0; z-index:401; opacity:.16;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.14) 0px, rgba(0,0,0,.14) 1px, transparent 1px, transparent 3px); }
.screen{ position:fixed; inset:14px; border:14px solid #050807; border-radius:20px;
  overflow:hidden; box-shadow:0 40px 100px rgba(0,0,0,.7); background:#000; }

/* ============ DESKTOP SHELL ============
   The same wallpaper, icons and taskbar as the homepage, so moving between
   pages reads as one machine loading a new page rather than a scene change. */
.desk{position:absolute;inset:0;z-index:0;overflow:hidden}
.desk-wall{position:absolute;inset:0}
.desk-wall img{width:100%;height:100%;object-fit:cover}
.desk-icons{position:absolute;top:16px;left:14px;z-index:2;display:flex;flex-direction:column;gap:22px}
.desk-icons a{width:76px;display:flex;flex-direction:column;align-items:center;gap:4px;
  text-align:center;text-decoration:none;padding:4px 2px}
.desk-icons a:hover span{background:#0a3ea3;outline:1px dotted #fff}
.desk-icons img{width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.8))}
.desk-icons a.fme img{width:58px;height:58px}
.desk-icons span{font-size:10.5px;color:#fff;text-shadow:1px 1px 2px #000,-1px -1px 2px #000;line-height:1.2;padding:1px 3px}

.taskbar{position:absolute;left:0;right:0;bottom:0;height:34px;z-index:60;display:flex;
  align-items:center;gap:8px;padding:0 6px;
  background:linear-gradient(180deg,#2a86e8 0%,#1257c9 45%,#0d3fa0 100%);border-top:1px solid #6db1ff}
.taskbar .start{height:26px;padding:0 14px 0 8px;border-radius:5px;border:1px solid #1a4d0a;
  background:linear-gradient(180deg,#5cbf35,#2c7a10);color:#fff;font-weight:bold;font-style:italic;
  font-size:13px;display:flex;align-items:center;gap:6px;text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.taskbar .start img{width:18px;height:18px;object-fit:contain}
.taskbar .task{height:26px;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding:0 10px;border-radius:3px;border:1px solid #0a3a90;color:#fff;font-size:11px;
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  background:linear-gradient(180deg,#0d3f9b,#082a70);box-shadow:inset 1px 1px 3px rgba(0,0,0,.6)}
.taskbar .task img{width:16px;height:16px;object-fit:contain}
.taskbar .tray{margin-left:auto;display:flex;align-items:center;gap:9px;padding:0 10px;height:26px;
  border-radius:3px;background:rgba(0,0,0,.15);color:#fff;font-size:11px}
.taskbar .tray img{width:16px;height:16px;object-fit:contain}

img{max-width:100%;height:auto;display:block}
a{color:#0033cc}
a:visited{color:#551a8b}

/* ---- the whole page sits inside an XP window ---- */
.win{position:absolute;top:14px;left:98px;right:14px;bottom:14px;z-index:10;
  display:flex;flex-direction:column;background:var(--face);border:2px outset var(--face);
  box-shadow:4px 4px 14px rgba(0,0,0,.6);overflow:hidden}
.win-title,.win-menu,.win-toolbar,.win-addr,.win-status{flex:none}
.win-scroll{flex:1;min-height:0;overflow-y:auto;background:#fff}
.win.max{top:0;left:0;right:0;bottom:0;border:none}
.page{position:absolute;inset:0;z-index:10}
.win.min{bottom:auto;height:auto}
.win.min .win-scroll{display:none}
.win-title{display:flex;align-items:center;gap:8px;padding:5px 6px 5px 9px;
  background:linear-gradient(180deg,var(--luna-b),var(--luna-a) 48%,var(--luna-c));
  color:#fff;font-family:var(--f-title);font-weight:bold;font-size:13.5px;
  text-shadow:1px 1px 1px rgba(0,0,0,.45)}
.win-title img{width:16px;height:16px;object-fit:contain;flex:none}
.win-title .sp{margin-left:auto;display:flex;gap:2px;align-items:center}
.win-title .sp button{border:0;background:transparent;padding:0;line-height:0;cursor:pointer}
.win-title .sp button:active{filter:brightness(.85)}
.win-title .sp img{width:21px;height:21px;display:block}

/* maximized: fill the viewport */
.win.max{max-width:none;margin:0;border-radius:0;border:none;min-height:100vh}
body.maxed{padding:0}
/* minimized: collapse to just the title bar */
.win.min .win-menu,.win.min .win-addr,.win.min nav.site,.win.min .body,.win.min footer.site{display:none}
.win.min{border-radius:8px}

.win-menu{background:var(--face);border-bottom:1px solid var(--face-lo);
  padding:3px 10px;font-size:12px;display:flex;gap:15px;color:#222}
/* ---- IE-style toolbar: back / forward / stop / refresh / home ---- */
.win-toolbar{background:var(--face);border-bottom:1px solid var(--face-lo);
  padding:4px 8px;display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.win-toolbar button,.win-toolbar a{display:inline-flex;align-items:center;gap:5px;
  font-family:var(--f-ui);font-size:12px;color:#1a1a1a;background:transparent;
  border:1px solid transparent;padding:4px 9px;border-radius:3px;cursor:pointer;text-decoration:none}
.win-toolbar button:hover,.win-toolbar a:hover{border-color:#a8c4e8;background:#e8f0fb}
.win-toolbar button:active,.win-toolbar a:active{border-color:#7fa8d9;background:#d6e4f7}
.win-toolbar .ar{font-size:13px;line-height:1}
.win-toolbar img{width:19px;height:19px;display:block}
.win-toolbar button:disabled{opacity:.4;cursor:default}
.win-toolbar button:disabled img{filter:grayscale(1)}
.win-toolbar .back .ar{color:#1a6b2f}
.win-toolbar .fwd .ar{color:#1a6b2f}
.win-toolbar .stop .ar{color:#b3261e}
.win-toolbar .refresh .ar{color:#1d5fa8}
.win-toolbar .home .ar{color:#c07a12}
.win-toolbar .sep{width:1px;height:20px;background:var(--face-lo);margin:0 4px}

.win-addr{background:var(--face);border-bottom:1px solid var(--face-lo);padding:4px 8px;
  font-size:11.5px;color:#444;display:flex;align-items:center;gap:6px}
.win-addr label{flex:none;color:#333}
.win-addr .bar{flex:1;min-width:0;background:#fff;border:1px solid var(--face-lo);
  border-top-color:#7f7f7f;border-left-color:#7f7f7f;padding:3px 8px;
  font-family:var(--f-mono);font-size:11px;color:#111}
.win-addr .go{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:11.5px;
  font-weight:bold;color:#1a1a1a;text-decoration:none;padding:3px 9px;
  border:1px solid transparent;border-radius:3px}
.win-addr .go:hover{border-color:#a8c4e8;background:#e8f0fb}
.win-addr .go span{color:#1a6b2f}

/* ---- IE-style status bar ---- */
.win-status{background:var(--face);border-top:1px solid var(--face-hi);padding:3px 6px;
  display:flex;gap:4px;font-size:11px;color:#333}
.win-status div{border:1px solid var(--face-lo);border-top-color:#8a8a8a;border-left-color:#8a8a8a;
  border-right-color:var(--face-hi);border-bottom-color:var(--face-hi);padding:2px 8px}
.win-status .s1{flex:1}
.win-status .s2{flex:none}

/* ---- nav buttons ---- */
nav.site{background:#dfe7f5;border-bottom:1px solid var(--line);padding:8px 12px;
  display:flex;gap:5px;flex-wrap:wrap}
nav.site a{font-size:12px;font-weight:bold;color:#000;background:var(--face);
  border:2px outset var(--face);padding:5px 13px;text-decoration:none}
nav.site a:visited{color:#000}
nav.site a:active{border-style:inset}
nav.site a[aria-current="page"]{background:linear-gradient(180deg,#ffe08a,#f2a93b)}

/* ---- content ---- */
.body{display:flex;gap:0;background:#fff;align-items:stretch;min-height:100%}
.side{width:186px;flex:none;background:#eef3fb;border-right:1px solid var(--line);padding:14px 12px}
.side h4{font-family:var(--f-head);font-size:12px;text-transform:uppercase;color:var(--navy);
  letter-spacing:.04em;margin:0 0 6px;padding-bottom:4px;border-bottom:1px solid var(--line)}
.side ul{list-style:none;margin:0 0 18px}
.side li{margin:0 0 5px;font-size:12px}
.side .badge{border:1px solid var(--line);background:#fff;padding:8px;margin-bottom:16px;
  font-family:var(--f-mono);font-size:10.5px;color:var(--muted);line-height:1.5}
.side .badge b{color:var(--navy)}
main{flex:1;min-width:0;padding:18px 22px 28px}

h1{font-family:var(--f-head);font-size:clamp(24px,3.6vw,32px);color:var(--navy);
  text-transform:uppercase;line-height:1.15;margin-bottom:4px}
h2{font-family:var(--f-head);font-size:clamp(17px,2.4vw,21px);color:var(--navy);
  text-transform:uppercase;margin:26px 0 8px;padding:4px 9px;
  background:linear-gradient(180deg,#dce7f7,#c3d5ee);border:1px solid var(--line)}
h3{font-family:var(--f-head);font-size:15px;color:var(--amber);text-transform:uppercase;margin:16px 0 5px}
p{margin-bottom:11px;max-width:70ch}
ul,ol{margin:0 0 13px 20px}
li{margin-bottom:5px;max-width:68ch}
.lede{font-size:14px}
.kicker{font-family:var(--f-mono);font-size:11px;color:var(--amber);
  text-transform:uppercase;letter-spacing:.09em;margin-bottom:3px}

.facts{border:1px solid var(--line);margin:14px 0;background:#fff}
.facts div{display:flex;justify-content:space-between;gap:12px;padding:6px 11px;
  font-family:var(--f-mono);font-size:12px;border-bottom:1px solid #e7edf6}
.facts div:nth-child(odd){background:var(--panel)}
.facts div:last-child{border-bottom:none}
.facts b{color:#111}

.note{border:1px solid #e0c98a;background:#fffaeb;padding:9px 12px;margin:14px 0;font-size:12.5px}
.note.grey{border-color:var(--line);background:var(--panel)}

.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin:14px 0}
.shots figure{border:2px outset var(--face);background:#000}
.shots img{width:100%;aspect-ratio:16/10;object-fit:cover}
.shots figcaption{font-family:var(--f-mono);font-size:10px;color:#444;padding:4px 6px;background:var(--face)}

.btn{display:inline-block;font-size:12.5px;font-weight:bold;color:#000;background:var(--face);
  border:2px outset var(--face);padding:8px 16px;text-decoration:none;margin:0 7px 7px 0}
.btn:visited{color:#000}
.btn:active{border-style:inset}
.btn.gold{background:linear-gradient(180deg,#ffe08a,#f2a93b)}
.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}

/* devlog entries */
.entry{border:1px solid var(--line);margin-bottom:18px;background:#fff}
.entry .head{background:linear-gradient(180deg,#dce7f7,#c3d5ee);border-bottom:1px solid var(--line);
  padding:6px 11px;display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.entry .head h2{margin:0;padding:0;background:none;border:none;font-size:17px}
.entry .head time{font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.entry .txt{padding:12px 14px}
.entry .txt p:last-child{margin-bottom:0}

.contact-list{border:1px solid var(--line);background:#fff;margin:12px 0}
.contact-list div{padding:8px 12px;border-bottom:1px solid #e7edf6;font-size:12.5px}
.contact-list div:last-child{border-bottom:none}
.contact-list b{display:block;font-family:var(--f-head);text-transform:uppercase;
  font-size:12px;color:var(--navy);letter-spacing:.03em}

footer.site{background:var(--face);border-top:1px solid var(--face-lo);padding:12px 16px;
  font-size:11.5px;color:var(--muted);text-align:center}
footer.site a{margin:0 7px}
footer.site .status{margin-top:9px;padding-top:8px;border-top:1px solid var(--line);
  font-family:var(--f-mono);font-size:10.5px}

@media (max-width:760px){
  .win{top:0;left:0;right:0;bottom:34px;border:none}
  .desk-icons{display:none}
  .screen{inset:0;border:none;border-radius:0}
  .win{border-radius:0;border:none;max-width:none}
  .body{flex-direction:column}
  .side{width:auto;border-right:none;border-bottom:1px solid var(--line)}
  .side ul{margin-bottom:12px}
  main{padding:14px 14px 22px}
  .win-addr{display:none}
}