/* An opt-in 1990s costume. The underlying light/dark preference is untouched. */
@font-face{font-family:"Geo Roundhand";src:local("Snell Roundhand"),local("SnellRoundhand"),local("Snell Roundhand Script"),local("Apple Chancery"),local("Edwardian Script ITC"),local("Lucida Calligraphy");font-display:swap}
.geo-control{min-height:44px;flex-shrink:0;max-width:100%}
.geo-toggle{display:inline-flex;align-items:center;gap:.6rem;max-width:100%;min-height:44px;border:1px solid var(--line);padding:.45rem .75rem;border-radius:6px;background:var(--paper);color:var(--muted);font:500 .85rem/1.4 var(--display);cursor:pointer;text-align:left}
.geo-toggle:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.geo-track{display:inline-flex;align-items:center;width:32px;height:20px;padding:3px;background:var(--line);border-radius:20px;flex-shrink:0}
.geo-track>span{width:14px;height:14px;border-radius:50%;background:var(--ink)}
.geo-toggle[aria-checked="true"] .geo-track{background:#008000}
.geo-toggle[aria-checked="true"] .geo-track>span{background:#fff;transform:translateX(12px)}
.hero-footer{flex-wrap:wrap;align-items:center;gap:1rem}
.geo-welcome,.geo-sidebar{display:none}
@media screen {
  html.geo-mode,html.geo-mode[data-theme]{--paper:#080830;--ink:#ffffcc;--muted:#ddddff;--accent:#66ffff;--acid:#ffff00;--line:#ff66ff;--font:Verdana,Arial,sans-serif;--display:Verdana,Arial,sans-serif;--script:"Geo Roundhand","Pinyon Script",cursive,Georgia,serif;--era-serif:Georgia,"Times New Roman",serif;color-scheme:dark}
  html.geo-mode body{background-color:#080830;background-image:radial-gradient(circle,#fff 1px,transparent 1.5px),radial-gradient(circle,#ff66ff 1px,transparent 1.5px);background-size:37px 41px,71px 67px;background-position:0 0,19px 23px;font-family:var(--font)}
  .geo-mode .wrap{max-width:1200px}
  .geo-mode main{position:relative;max-width:1200px;margin-inline:auto;background:#080830;padding-left:216px;padding-bottom:6rem}
  .geo-mode .site-header{background:#000033;border-bottom:6px ridge #ff00ff}
  .geo-mode .wordmark{color:#ffff00}
  .geo-mode .monogram{color:#00ffff;text-shadow:2px 2px #ff00ff}
  .geo-mode h1,.geo-mode h2{font-family:var(--script);font-weight:400;letter-spacing:0;overflow-wrap:normal}
  .geo-mode h1{font-size:clamp(3.4rem,7.6vw,6.6rem);line-height:1.22;color:#ffff00;text-shadow:2px 2px #ff00ff}
  .geo-mode h1 .serif,.geo-mode h2 .serif{font-family:var(--script);font-style:normal;font-weight:400;color:#00ffff;letter-spacing:0}
  .geo-mode h2{font-size:clamp(2.6rem,5.2vw,4rem);line-height:1.22;color:#ffff00;text-shadow:2px 2px #660066}
  .geo-mode h3,.geo-mode h4{font-family:var(--era-serif);font-weight:700;letter-spacing:0;color:#ffff99;line-height:1.3}
  .geo-mode .hero-aside{background:#000033;padding:1rem;border:4px ridge #00ffff}
  .geo-mode .hero-aside .intro,.geo-mode .hero-aside p{color:#fff}
  .geo-mode .hero-footer{background:#000033;padding-inline:1rem;border:4px ridge #c0c0c0}
  .geo-mode .geo-control{position:fixed;inset:auto 0 0;z-index:110;width:100%;max-width:none;margin:0;padding:.5rem clamp(.75rem,4vw,2.5rem);padding-bottom:calc(.5rem + env(safe-area-inset-bottom));background:#000;border-top:4px ridge #c0c0c0}
  .geo-mode .geo-toggle{max-width:100%;background:#c0c0c0;color:#000;border:4px outset #eee;border-radius:0;font:700 14px/1.4 Verdana,sans-serif;box-shadow:3px 3px #000}
  .geo-mode .geo-toggle:active{border-style:inset}
  .geo-mode .geo-toggle:focus-visible{outline-color:#ff00ff}
  .geo-mode .geo-welcome{display:grid;gap:.5rem;text-align:center;background:#000;padding:1rem;margin-bottom:2rem;border:6px ridge #c0c0c0;color:#00ffff;font-family:"Courier New",monospace}
  .geo-mode .geo-welcome strong{color:#ffff00;font-size:clamp(1.2rem,3vw,2rem)}
  .geo-mode .geo-welcome small{justify-self:center;padding:.35rem .75rem;background:#ffff00;color:#000;border:3px dashed #000;font-weight:bold;font-size:.85rem}
  .geo-mode .project,.geo-mode .additional-grid>div{background:#000033;border:5px ridge #c0c0c0;padding:1rem}
  .geo-mode .project-cover{border:5px outset #ff00ff;border-radius:0}
  .geo-mode .cover-title,.geo-mode .cover-directory .cover-title{font-family:var(--era-serif)!important;font-weight:700;letter-spacing:0}
  .geo-mode .cover-title .serif{font-family:var(--script)!important;font-style:normal;font-weight:400;letter-spacing:0}
  .geo-mode .project-cover:not(.cover-value){color:white}
  .geo-mode .cover-value{color:#000!important}
  .geo-mode .project-meta,.geo-mode .project>p,.geo-mode .case-study p,.geo-mode .additional-grid p{color:#ddddff}
  .geo-mode .project details{border:3px double #00ffff;padding-inline:.5rem}
  /* Below the work grid the page ran on a tint of its own, which read as dark
     mode with a magenta rule. It now uses the same panel-on-wallpaper system
     as the project cards, so the costume holds all the way to the footer. */
  .geo-mode .about-section,.geo-mode .contact-section{background:none!important;border-block:6px ridge #ff66ff}
  .geo-mode .about-copy,.geo-mode .capability-grid>div,.geo-mode .contact-grid>div{background:#000033;border:5px ridge #c0c0c0;padding:1rem}
  .geo-mode .about-copy p,.geo-mode .contact-grid p{color:#eee}
  .geo-mode .about-copy .large-copy{font-family:var(--era-serif);font-weight:700;color:#ffff00}
  .geo-mode .capabilities{background:none}
  .geo-mode .capability-grid>div{border-top-color:#c0c0c0}
  .geo-mode .education{background:#000;border:4px ridge #c0c0c0;padding:1rem;margin-top:1.5rem}
  .geo-mode .education dt{font-family:var(--era-serif);color:#ffff00}
  .geo-mode .education dd{color:#ddddff}
  /* A framed pet photo is the most 1996 thing a homepage could carry. */
  .geo-mode .petunia{margin-top:1.5rem}
  .geo-mode .petunia img{border:5px ridge #c0c0c0;border-radius:0}
  .geo-mode .petunia figcaption{font-family:"Courier New",Courier,monospace;font-weight:700;color:#ffff00}
  .geo-mode .demo video,.geo-mode .shot img{border:5px ridge #c0c0c0;border-radius:0}
  .geo-mode .demo figcaption,.geo-mode .shot figcaption{font-family:"Courier New",Courier,monospace;font-weight:700;color:#ffff00}
  /* A 1996 page handed you its address as a button you could press. */
  .geo-mode .contact-email,.geo-mode .social-links a{background:#c0c0c0;color:#000!important;border:4px outset #eee;padding:.5rem .8rem;text-decoration:none!important;font-family:"Courier New",Courier,monospace;font-weight:700;box-shadow:3px 3px #000}
  .geo-mode .contact-email:active,.geo-mode .social-links a:active{border-style:inset;box-shadow:none}
  .geo-mode .site-footer{background:#000;border:4px ridge #c0c0c0;padding:.75rem 1rem;font-family:"Courier New",Courier,monospace;color:#00ff00}
  .geo-mode .site-footer a{color:#00ff00!important}
  .geo-mode .additional-work{border:0;border-top:8px solid transparent;border-image:linear-gradient(90deg,red,#ff0,lime,cyan,blue,magenta) 1}
  .geo-mode a:not(.project-cover):not(.wordmark):not(.button){color:#66ffff;text-decoration:underline}
  .geo-mode nav a{font-family:"Courier New",monospace;font-weight:bold}
  .geo-mode .button,.geo-mode .theme-toggle{background:#c0c0c0!important;color:#000!important;border:4px outset #fff;border-radius:0;font-family:Verdana,sans-serif}
  .geo-mode .geo-welcome[hidden],.geo-mode .geo-sidebar[hidden]{display:none}
  @media(max-width:700px){.geo-mode .project,.geo-mode .additional-grid>div{padding:.75rem}.geo-mode .project-cover{padding:1rem}.geo-mode .hero-grid{gap:1.5rem}}
}
@media print{.geo-control,.geo-welcome,.geo-sidebar{display:none!important}}

.geo-toggle .geo-label{text-align:left;max-width:none}

/* Replay the short ripple when the welcome heading enters the visible viewport. */
/* The spinning globe. Landmasses are doubled end to end, so sliding the band
   one viewBox width loops without a seam. */
.geo-globe{display:none}
.geo-mode .geo-globe{display:inline-block;width:1.05em;height:1.05em;vertical-align:-.14em;margin-right:.45em}
.geo-mode .geo-globe svg{display:block;width:100%;height:100%}
@media screen and (prefers-reduced-motion:no-preference){
  .geo-mode .geo-globe-land{animation:geo-globe-spin 4s linear infinite}
  @keyframes geo-globe-spin{from{transform:translateX(0)}to{transform:translateX(-32px)}}
}
.geo-wave-word{display:inline-block;white-space:nowrap}
.geo-wave-letter{display:inline-block}
@media screen and (prefers-reduced-motion:no-preference){
  .geo-mode .geo-wave-playing .geo-wave-letter{animation:geo-welcome-ripple 2.2s ease-in-out var(--wave-delay) 1}
  @keyframes geo-welcome-ripple{
    0%,35%,100%{transform:translateY(0)}
    15%{transform:translateY(-7px)}
    25%{transform:translateY(2px)}
  }
}

/* Keep decorative type in headings, not long-form reading. */
@media screen {
  .geo-mode main p:not(.eyebrow):not(.tools){
    font-family:Verdana,Arial,sans-serif;
    font-style:normal;
    font-size:1.05rem;
    line-height:1.65;
    letter-spacing:normal;
  }
  .geo-mode main .hero-aside p.intro{
    font-size:1.2rem;
    line-height:1.6;
  }
  .geo-mode .case-study li,.geo-mode .education dd,.geo-mode .footnotes li{
    font-family:Verdana,Arial,sans-serif;
    font-size:1rem;
    line-height:1.65;
  }
}

/* Typewriter captions and old-school beveled outlink controls. */
@media screen {
  .geo-mode .cover-kicker,
  .geo-mode .cover-bottom,
  .geo-mode .project-meta,
  .geo-mode .tools,
  .geo-mode .implementation-links {
    font-family:"Courier New",Courier,monospace;
    font-style:normal;
    font-weight:700;
    letter-spacing:normal;
  }
  .geo-mode .cover-kicker{letter-spacing:.06em}
  .geo-mode .eyebrow{font-family:"Courier New",Courier,monospace;font-weight:700;letter-spacing:.1em}
  .geo-mode .external-icon,
  .geo-mode .text-link>span[aria-hidden="true"] {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    width:2.6rem;
    height:2.3rem;
    border:3px outset #eee;
    border-radius:0;
    background:#c0c0c0;
    color:#000;
    font-size:0;
    text-shadow:none;
    box-shadow:2px 2px 0 #000;
  }
  .geo-mode .external-icon::before,
  .geo-mode .text-link>span[aria-hidden="true"]::before {
    content:">>";
    font:900 1.15rem/1 "Courier New",Courier,monospace;
    letter-spacing:-.15em;
    padding-right:.15em;
  }
  .geo-mode .project-cover:active .external-icon,
  .geo-mode .text-link:active>span[aria-hidden="true"] {
    border-style:inset;
    box-shadow:none;
  }
}

/* GeoCities supplies its own palette; restore the theme switch on exit. */
@media screen{html.geo-mode .theme-toggle{display:none}}

/* The optional retro switch is the final item below the page content. */
.geo-page-end{padding-block:1.25rem;display:flex;justify-content:flex-end}

/* Dark ink for the bright cyan Talking to Strangers cover. */
@media screen{
  html.geo-mode .side-projects-page .project-cover.cover-talk,
  html.geo-mode .side-projects-page .cover-talk .cover-kicker,
  html.geo-mode .side-projects-page .cover-talk .cover-title,
  html.geo-mode .side-projects-page .cover-talk .cover-bottom{color:#080830;text-shadow:none}
}

/* The 1996 page shape: a badge column pinned down the left, a button-bar nav,
   centred section headings, one column of work, and table rows where the
   modern page uses grid. Every rule is scoped to .geo-mode, so the light and
   dark site never sees any of it. */
@media screen {
  .geo-mode .geo-sidebar{display:block;position:absolute;left:0;top:0;width:216px;height:100%;padding:1.5rem 0 0 1rem}
  .geo-mode .geo-sidebar-inner{position:sticky;top:calc(var(--header-height,72px) + 1rem);display:grid;gap:.75rem}
  .geo-mode .geo-badge{display:block;background:#000066;border:3px outset #aaa;padding:.5rem;color:#ffff00;font:bold .68rem/1.5 "Courier New",Courier,monospace;text-align:center}
  .geo-mode .geo-badge b{display:block;margin-top:.3rem;background:#000;color:#00ff00;letter-spacing:.12em}
  .geo-mode .geo-award{background:#660066}
  .geo-mode .geo-netscape{background:#000;color:#00ffff}
  .geo-mode .geo-ring{background:#003300;color:#00ff00}

  /* Nav becomes the row of pressable buttons the era ran on. */
  .geo-mode nav{flex-wrap:wrap;gap:.5rem}
  .geo-mode nav a{background:#c0c0c0;color:#000!important;border:3px outset #eee;padding:.3rem .65rem;text-decoration:none!important;box-shadow:2px 2px #000}
  .geo-mode nav a:active{border-style:inset;box-shadow:none}
  .geo-mode nav a[aria-current]{border-style:inset;background:#ffff99;box-shadow:none}

  /* One rainbow rule between every section, the divider the page already had. */
  .geo-mode .about-section,.geo-mode .contact-section{border-block-width:0}
  .geo-mode main>section+section{margin-top:1.5rem;border-top:8px solid transparent;border-image:linear-gradient(90deg,red,#ff0,lime,cyan,blue,magenta) 1}

  /* Headings centre; body copy stays left-aligned and readable. */
  .geo-mode main .wrap{width:100%;max-width:none;padding-inline:1.25rem}
  .geo-mode .hero-grid{grid-template-columns:1fr;justify-items:center;gap:2rem}
  .geo-mode .hero-eyebrow,.geo-mode .hero-footer{justify-content:center;text-align:center}
  .geo-mode h1{text-align:center}
  .geo-mode .hero-aside{max-width:36rem;width:100%}
  .geo-mode .section-heading{display:block;text-align:center}
  .geo-mode .section-heading>p{max-width:none;margin-top:.9rem}
  .geo-mode .capabilities>.eyebrow,.geo-mode .contact-section>.wrap>.eyebrow{text-align:center}
  .geo-mode .about-grid{grid-template-columns:1fr;gap:1.5rem}
  .geo-mode .about-heading{text-align:center}
  .geo-mode .additional-work{grid-template-columns:1fr;gap:1rem;text-align:center}
  .geo-mode .additional-grid{text-align:left}
  .geo-mode .contact-grid{grid-template-columns:1fr;gap:1.5rem}
  .geo-mode .contact-grid h2{text-align:center}
  .geo-mode .contact-grid>div{text-align:center}
  .geo-mode .social-links{justify-content:center}
  /* These children cap their own width, so without auto margins the centred
     text sat inside a box pinned to the left. */
  .geo-mode .additional-work h3,.geo-mode .additional-work p,
  .geo-mode .contact-grid p,.geo-mode .section-heading>p{margin-inline:auto}

  /* A single column of work, the way a 600px-wide page had to list things. */
  .geo-mode .project-grid{grid-template-columns:1fr;row-gap:3rem}

  /* Real table rows, spaced with border-spacing since cells ignore gap. */
  .geo-mode .capability-grid{display:table;width:100%;table-layout:fixed;border-collapse:separate;border-spacing:.75rem}
  .geo-mode .capability-grid>div{display:table-cell;vertical-align:top}

  /* Below the sidebar's width the column moves under the content. */
  @media(max-width:900px){
    .geo-mode main{padding-left:0}
    .geo-mode .geo-sidebar{position:static;width:auto;height:auto;padding:2rem 1.25rem 0}
    .geo-mode .geo-sidebar-inner{position:static;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr))}
    .geo-mode .capability-grid{display:block}
    .geo-mode .capability-grid>div{display:block}
    .geo-mode .capability-grid>div+div{margin-top:.75rem}
  }
}