/* 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)}
@media(prefers-reduced-motion:no-preference){.geo-track>span{transition:transform .15s ease}}
.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}
  /* No background here: main used to paint #080830 over the body, which is the same
     colour, so it hid 94% of the dot wallpaper (only two 40px strips survived at
     1280) while doing no legibility work at all. Long-form copy sits on the opaque
     #000033 panels below, so the starfield can run behind the whole page. */
  .geo-mode main{position:relative;max-width:1200px;margin-inline:auto;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}
  /* The Day Book panel's heading is an h2 by document structure but a card title by
     size, so it takes the h3 treatment rather than the page-heading one; styles.css
     hands it the matching h3 type rules. */
  .geo-mode h3,.geo-mode h4,.geo-mode #daybook-widget h2{font-family:var(--era-serif);font-weight:700;letter-spacing:0;color:#ffff99;line-height:1.3}
  .geo-mode #daybook-widget h2{text-shadow:none}
  .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-block:.5rem;padding-bottom:calc(.5rem + env(safe-area-inset-bottom));background:#000;border-top:4px ridge #c0c0c0}
  /* The fixed bar covered whatever the keyboard focused at the foot of the viewport. */
  /* scroll-behavior:auto here is load-bearing: with the smooth scroll inherited from
     styles.css, the browser's own focus scroll animates for a few hundred ms and
     lands focused content back under the fixed bar. Instant scrolling lets
     scroll-padding-bottom do its job on the first pass. */
  html.geo-mode{scroll-padding-bottom:calc(84px + env(safe-area-inset-bottom));scroll-behavior:auto}
  .geo-mode main{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  .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}
  .geo-mode .about-copy,.geo-mode .capability-grid>div,.geo-mode .contact-grid>div{background:#000033;border:5px ridge #c0c0c0;padding:1rem}
  /* forecast.html carries none of the block classes panelled above, so once the
     wallpaper was uncovered its prose sat straight on the dots: 27 of its 29
     paragraphs, against 6 of 58 on index.html. One panel for the whole story.
     padding-left is deliberately not set here - it holds the 216px gutter that
     clears the badge column, and the 900px rule below supplies an inset once
     that gutter is gone. */
  .geo-mode .forecast-story{background:#000033;border:5px ridge #c0c0c0;padding-block:1rem;padding-right: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):not(.skip-link):not(.text-link){color:#66ffff;text-decoration:underline}
  .geo-mode ::selection{color:#080830}
  .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;
  }
  /* The blanket link rule's underline was drawn by the anchor across its whole inline
     box - through the .7rem flex gap and under the raised >> button, which is an atomic
     inline and cannot opt out of an ancestor's decoration. .text-link is excluded from
     that rule above (it already takes --accent, the same #66ffff, from styles.css) and
     its hover underline is dropped here. Every other bevel control in the costume
     (nav a, .contact-email, .social-links a) does the same; the >> button is the
     affordance. */
  .geo-mode .text-link:hover,
  .geo-mode .text-link:focus-visible {
    text-decoration:none;
  }
}

/* GeoCities supplies its own palette; restore the theme switch on exit. */
@media screen{
  /* The costume supplies its own palette and overrides both light and dark, so the
     theme switch has no visible effect while it is on. Hidden by intent.
     Uses the id rather than the class deliberately: theme.js injects
     #theme-toggle[hidden]{display:inline-flex} to stop the button popping into the
     nav at DOMContentLoaded, and at (1,1,0) that would outrank a class-based rule
     during the moment before the hidden attribute is removed. (1,1,1) wins. */
  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.
     This used to be preceded by a border-block-width:0 reset on .about-section and
     .contact-section, which at (0,2,0) outweighed the (0,1,3) selector below and
     silently cancelled the divider above About and Contact (measured 0/8/0/8/0/8px).
     The ridge that reset existed to suppress is simply not declared any more. */
  .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}
  /* The fixed bar is a .wrap too, so the rule above used to beat the clamp() gutter
     declared on .geo-control and the switch hung 40px right of everything above it.
     Match the content column instead: main is capped at 1200px and centred, so half
     the leftover viewport plus the wrap's own 1.25rem lands the switch on the same
     right edge as the page content, and it falls back to 1.25rem below 1200px. */
  .geo-mode main .geo-control.wrap{padding-inline:max(1.25rem,calc((100% - 1200px) / 2 + 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 .forecast-story{padding-left:1rem}
    .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}
  }
}

/* The guestbook is an opt-in part of the GeoCities experience. */
.geo-guestbook{display:none}
@media screen {
  .geo-mode .geo-guestbook:not([hidden]){display:block;margin:3rem 0;padding:clamp(1rem,3vw,2rem);border:6px ridge #c0c0c0;background:#000033;color:#ffffcc;max-width:100%;text-align:left}
  .geo-mode .geo-guestbook h2{margin:0 0 1rem;font-size:clamp(2.5rem,5vw,4rem)}
  .geo-mode .geo-guestbook p{font:1rem/1.6 Verdana,Arial,sans-serif;color:#ddddff}
  .geo-guestbook-form{display:grid;gap:.6rem;margin:1.5rem 0}
  .geo-guestbook-form label{font:bold .9rem/1.5 Verdana,Arial,sans-serif}
  .geo-guestbook-form input,.geo-guestbook-form textarea{width:100%;min-width:0;box-sizing:border-box;padding:.65rem;border:3px inset #c0c0c0;border-radius:0;background:#fff;color:#111;font:1rem/1.5 Verdana,Arial,sans-serif}
  .geo-guestbook-form textarea{resize:vertical}
  .geo-guestbook button{justify-self:start;min-height:44px;padding:.6rem 1rem;border:4px outset #eee;border-radius:0;background:#c0c0c0;color:#000;font:bold .9rem/1.4 Verdana,Arial,sans-serif;cursor:pointer}
  .geo-guestbook button:disabled{opacity:.65;cursor:wait}
  .geo-guestbook :is(button,input,textarea):focus-visible{outline:3px solid #00ffff;outline-offset:3px}
  .geo-guestbook .geo-guest-status{min-height:1.6em;color:#ffff00}
  .geo-guest-trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .geo-guest-entries{list-style:none;padding:0;margin:1rem 0}
  .geo-guest-entries li{border:3px double #ff66ff;padding:1rem;margin:.8rem 0;overflow-wrap:anywhere}
  .geo-guest-entries strong{color:#00ffff;font:bold 1rem/1.5 Verdana,Arial,sans-serif}
  .geo-guest-entries time{display:block;margin-top:.25rem;color:#ddddff;font:.8rem/1.5 'Courier New',monospace}
  .geo-guest-entries p{white-space:pre-wrap;margin-top:.6rem}
}

/* A tiny signing-pen animation, in the spirit of personal-homepage GIFs. */
.geo-guest-heading{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem}
.geo-signing-icon{width:80px;height:64px;flex-shrink:0;shape-rendering:crispEdges}
.geo-mode .geo-guest-heading h2{flex:1 1 220px;margin:0}
.geo-mode .geo-signing-pen{animation:geo-sign-pen 2.4s steps(4,end) 2}
.geo-mode .geo-ink-stroke{animation:geo-sign-ink 2.4s steps(8,end) 2}
@keyframes geo-sign-pen{0%,100%{transform:translate(0,0)}25%{transform:translate(6px,-3px)}50%{transform:translate(12px,0)}75%{transform:translate(18px,-3px)}}
@keyframes geo-sign-ink{0%{stroke-dasharray:1;stroke-dashoffset:1}80%,100%{stroke-dasharray:1;stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.geo-mode .geo-signing-pen,.geo-mode .geo-ink-stroke{animation:none}}

/* Consistent text-based 1990s navigation marks, including captions and notes. */
@media screen {
  html.geo-mode [data-retro-outlink],
  html.geo-mode [data-retro-backlink] {
    display:inline-flex;align-items:center;justify-content:center;
    vertical-align:middle;flex-shrink:0;box-sizing:border-box;
    width:1.9rem;height:1.65rem;margin-left:.2rem;
    border:3px outset #eee;border-radius:0;background:#c0c0c0;color:#000;
    font-size:0;text-shadow:none;box-shadow:2px 2px 0 #000;
    text-decoration:none;transform:none;transition:none;
  }
  html.geo-mode [data-retro-outlink]::before,
  html.geo-mode [data-retro-backlink]::before {
    content:">>";font:900 1rem/1 "Courier New",Courier,monospace;
    letter-spacing:-.15em;padding-right:.15em;
  }
  html.geo-mode [data-retro-backlink]::before{content:"<<"}
  html.geo-mode .external-icon[data-retro-outlink]{width:2.6rem;height:2.3rem}
  html.geo-mode a:active [data-retro-outlink],
  html.geo-mode a:active [data-retro-backlink]{border-style:inset;box-shadow:none}
  html.geo-mode .footnote-ref{font-family:"Courier New",Courier,monospace}
  html.geo-mode .footnote-ref a{
    display:inline-block;padding:.2rem .35rem;margin-left:.15rem;
    background:#c0c0c0;color:#000;border:2px outset #eee;border-radius:0;
    font:bold .75rem/1.2 "Courier New",Courier,monospace;
    text-decoration:none;text-shadow:none;box-shadow:1px 1px #000;
  }
  html.geo-mode .footnote-ref a:active{border-style:inset;box-shadow:none}
  html.geo-mode .footnotes li::marker{font-family:"Courier New",Courier,monospace;font-weight:bold;color:#ffff00}
  html.geo-mode .footnote-ref a:focus-visible,
  html.geo-mode .footnotes a:focus-visible{outline:3px solid #00ffff;outline-offset:3px}
}