/* Palette and type carried over from intro.mrericsir.com */
  :root{
    color-scheme: dark;
    --bg: #08090b;
    --bg-raised: #0f1114;
    --fg: #f4f1ea;
    --fg-dim: #93969c;
    --fg-faint: #3d4046;
    --glow: #ffe8c2;
    --glow-soft: rgba(255,232,194,0.35);
    --line-core: #fffaf0;
    --font-mono: 'Space Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
  }
  *{ box-sizing: border-box; }
  body{
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-mono);
    font-size: 15px;
    line-height: 1.6;
  }
  a{ color: inherit; }

  .wrap{
    max-width: 920px;
    margin: 0 auto;
    padding-inline: 24px;
  }

  /* "Wipe" code cribed from the intro.mrericsir.com site. */
  #intro-wipe{
    position: fixed;
    inset: 0;
    z-index: 200;
    pointer-events: none;
  }
  .wipe-curtain{
    position: absolute;
    inset: 0 0 0 auto;
    width: 100%;
    background: var(--bg);
    animation: wipe-curtain-reveal 1.1s cubic-bezier(.44,.02,.44,1) forwards;
  }
  @keyframes wipe-curtain-reveal{
    to{ width: 0%; }
  }
  .wipe-sweep{
    position: absolute;
    top: 0; bottom: 0;
    left: -10vw;
    width: 10vw;
    background: linear-gradient(to right,
      transparent 0%,
      rgba(255,232,194,0.02) 40%,
      rgba(255,232,194,0.12) 78%,
      var(--glow-soft) 92%,
      var(--line-core) 99%,
      var(--line-core) 100%);
    filter: blur(0.4px);
    animation: wipe-sweep-across 1.1s cubic-bezier(.44,.02,.44,1) forwards;
  }
  .wipe-sweep::after{
    content: "";
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: 3px;
    background: var(--line-core);
    box-shadow:
      0 0 10px 2px var(--line-core),
      0 0 34px 8px var(--glow),
      0 0 80px 20px rgba(255,232,194,0.35);
  }
  @keyframes wipe-sweep-across{
    to{ transform: translateX(110vw); }
  }
  @media (prefers-reduced-motion: reduce){
    /* Just fade if reduced motion is enabled */
    .wipe-curtain{ animation: none; transition: opacity 0.6s ease; }
    .wipe-curtain.fade-out{ opacity: 0; }
    .wipe-sweep{ display: none; }
  }

  /* Header
     Shows the "full" header when near the top, collapses when scrolled. */
  .site-header{ position: relative; z-index: 20; }
  /* clicking the portrait or name in the slim bar scrolls back to the top */
  .site-header.mini .portrait, .site-header.mini .name{ cursor: pointer; }
  .header-bar{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding-top: env(safe-area-inset-top, 0px);
    background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.05), transparent 65%);
    background-color: transparent;
    border-bottom: 1px solid transparent;
    transition: background-color 0.35s ease, border-color 0.35s ease;
  }
  .identity{
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 5vw, 3rem);
    flex-wrap: wrap;
    padding-block: clamp(3rem, 9vw, 5.5rem) 2.5rem;
    transition: padding 0.35s ease, gap 0.35s ease;
  }
  .portrait{
    width: 150px;
    height: 150px;
    max-width: 100%;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    border: 1.5px solid var(--line-core);
    box-shadow:
      0 0 6px var(--glow),
      0 0 22px var(--glow-soft),
      0 0 0 8px rgba(255,232,194,0.05);
    transition: width 0.35s ease, height 0.35s ease, box-shadow 0.35s ease;
  }
  .name{
    margin: 0;
    font-weight: 700;
    font-size: clamp(1.9rem, 6vw, 3rem);
    line-height: 1.08;
    letter-spacing: 0.01em;
    text-wrap: balance;
    transition: font-size 0.35s ease;
  }
  .name span{ display: block; }
  .details-fold{
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.35s ease, opacity 0.25s ease;
  }
  .details-fold > .details{ overflow: hidden; min-height: 0; }

  .site-header.mini .header-bar{
    background-color: var(--bg);
    border-bottom-color: var(--fg-faint);
  }
  .site-header.mini .identity{
    flex-wrap: nowrap;
    gap: 0.9rem;
    padding-block: 0.6rem;
  }
  .site-header.mini .portrait{
    width: 44px;
    height: 44px;
    box-shadow: 0 0 4px var(--glow), 0 0 10px var(--glow-soft);
  }
  .site-header.mini .name{ font-size: 1.15rem; }
  .site-header.mini .name span{ display: inline; }
  .site-header.mini .details-fold{ grid-template-rows: 0fr; opacity: 0; }

  /* A direct link to a section (#art etc.) should already look scrolled
     past the top on its very first paint. The header sits at the very
     start of the page, so the browser can paint it (full-size, by
     default) while still parsing the rest of the document -- long
     before the script at the end of the body ever gets a chance to run.
     No amount of JS-side timing can prevent a paint that happens before
     the JS executes at all; ":target" matches as part of normal style
     computation, with no such delay, so it can. "body.js-pending" scopes
     this to only that initial paint: the script removes it as literally
     its first action, handing off to the usual scroll-driven mini/docked
     classes below, which must stay free to show the full header again
     if the visitor scrolls back to the top with a section still open. */
  body.js-pending:has(:target) .site-header{
    /* the spacer's own min-height, matching the slim bar's real size --
       its fixed-position child doesn't otherwise contribute any height
       of its own, which would let page content peek out from under the
       bar before the script sets this element's height explicitly */
    min-height: 64.2px;
  }
  body.js-pending:has(:target) .site-header .header-bar{
    background-color: var(--bg);
    border-bottom-color: var(--fg-faint);
  }
  body.js-pending:has(:target) .site-header .identity{
    flex-wrap: nowrap;
    gap: 0.9rem;
    padding-block: 0.6rem;
  }
  body.js-pending:has(:target) .site-header .portrait{
    width: 44px;
    height: 44px;
    box-shadow: 0 0 4px var(--glow), 0 0 10px var(--glow-soft);
  }
  body.js-pending:has(:target) .site-header .name{ font-size: 1.15rem; }
  body.js-pending:has(:target) .site-header .name span{ display: inline; }
  body.js-pending:has(:target) .site-header .details-fold{ grid-template-rows: 0fr; opacity: 0; }
  body.js-pending:has(:target) .site-header .mini-menu{
    display: block;
    visibility: visible;
    pointer-events: auto;
    animation: none;
  }

  /* Compact MS-DOS 5 menu. */
  .mini-menu{
    --dos-blue: #0000a8;
    --dos-gray: #a8a8a8;
    --dos-white: #ffffff;
    --dos-black: #000000;
    display: none;
    margin-left: auto;
    width: 330px;
    max-width: 100%;
    padding: 5px 10px 7px 6px;
    background: var(--dos-blue);
    box-shadow: 4px 4px var(--dos-black);
    font-family: "DOS VGA", "VT323", "Lucida Console", monospace;
    font-size: 16px;
    line-height: 1.2;
    -webkit-font-smoothing: none;
  }
  /* Preserve layout space. */
  .site-header.mini .mini-menu{ display: block; visibility: hidden; pointer-events: none; }
  .site-header.mini.docked .mini-menu{ visibility: visible; pointer-events: auto; animation: mini-in 0.25s ease both; }
  @keyframes mini-in{ from{ opacity: 0; transform: translateY(-4px); } }
  .mini-options{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  .mini-menu .option{
    padding: 5px 2px;
    box-shadow: 4px 4px var(--dos-black);
  }
  .mini-menu .option:active,
  .mini-menu .option[aria-current="page"]{ transform: translate(4px, 4px); box-shadow: none; }
  @media (max-width: 600px){
    .site-header.mini .identity{ flex-wrap: wrap; row-gap: 0.5rem; }
    .mini-menu{ width: 100%; margin-left: 0; }
    body.js-pending:has(:target) .site-header{ min-height: 113.2px; }
    body.js-pending:has(:target) .site-header .identity{ flex-wrap: wrap; row-gap: 0.5rem; }
  }
  @media (prefers-reduced-motion: reduce){
    .site-header.mini.docked .mini-menu{ animation: none; }
  }
  @media (prefers-reduced-motion: reduce){
    .header-bar, .identity, .portrait, .name, .details-fold{ transition: none; }
  }
  .details{
    margin: 0;
    padding-top: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    color: var(--fg-dim);
    font-size: 0.95rem;
  }
  .email{
    align-self: flex-start;
    /* gold "copper pad" color from the circuit board business card */
    color: #d6ae55;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
  }
  .email:hover, .email:focus-visible{ color: #f0cf7a; border-color: #d6ae55; }

  /* Main menu: MS-DOS 5 via TuiCSS  */
  @font-face{
    font-family: "DOS VGA";
    src: url("fonts/dos-vga-437.ttf") format("truetype");
    font-display: swap;
  }
  .dos{
    --dos-blue: #0000a8;
    --dos-gray: #a8a8a8;
    --dos-white: #ffffff;
    --dos-black: #000000;
    --dos-bcyan: #55ffff;
    font-family: "DOS VGA", "VT323", "Lucida Console", monospace;
    /* DOS text mode has exactly one text size; everything in the menu uses it */
    font-size: 20px;
    line-height: 1.2;
    -webkit-font-smoothing: none;
    padding-block: 0.5rem 1rem;
  }
  
  .dos-window{
    background: var(--dos-blue);
    color: var(--dos-gray);
    padding: 1px;
    box-shadow: 10px 10px var(--dos-black);
  }
  .dos-window fieldset{
    margin: 0;
    border: 6px double var(--dos-white);
    padding: 18px 16px 14px;
    min-width: 0;
  }
  .dos-window legend{
    padding: 0 8px;
    color: var(--dos-white);
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }


  .menu{
    list-style: none;
    margin: 0;
    padding: 6px 0 10px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
  .option{
    display: flex;
    justify-content: center;
    padding: 12px 4px;
    background: var(--dos-gray);
    color: var(--dos-black);
    text-decoration: none;
    text-align: center;
    box-shadow: 10px 10px var(--dos-black);
    user-select: none;
    -webkit-user-select: none;
  }
  .option .hot{ color: var(--dos-white); }
  /* DOS menus highlight the current choice by inverting it */
  .option:hover, .option:focus-visible{
    background: #00a8a8;
    color: var(--dos-black);
    outline: none;
  }
  .option:active{ box-shadow: none; transform: translate(10px, 10px); }

  /* DOS command line> */
  .console-fold{
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease;
  }
  .console-fold.open{ grid-template-rows: 1fr; }
  .console-fold > div{ overflow: hidden; min-height: 0; }
  .console{
    margin-top: 14px;
    padding: 6px 10px;
    background: var(--dos-black);
    color: var(--dos-gray);
    white-space: pre;
    overflow: hidden;
    min-height: calc(1.2em + 12px);
  }
  .cursor{
    display: inline-block;
    width: 0.6em;
    height: 0.14em;
    background: var(--dos-gray);
    vertical-align: baseline;
    animation: cursor-blink 1.06s steps(1) infinite;
  }
  .console.busy .cursor{ animation: none; }
  @keyframes cursor-blink{ 50%{ opacity: 0; } }
  /* the current section's option is shown pressed in and highlighted */
  .option[aria-current="page"]{
    background: var(--dos-black);
    color: var(--dos-white);
    box-shadow: none;
    transform: translate(10px, 10px);
  }
  @media (prefers-reduced-motion: reduce){
    .cursor{ animation: none; }
    .console-fold{ transition: none; }
  }


  @media (max-width: 520px){
    .dos{ font-size: 18px; }
    .menu{ gap: 14px; }
    .option{ box-shadow: 6px 6px var(--dos-black); padding-inline: 2px; }
    .option:active, .option[aria-current="page"]{ transform: translate(6px, 6px); }
        .dos-window fieldset{ padding-inline: 12px; }
  }

  a:focus-visible{ outline: 2px solid var(--glow); outline-offset: 3px; border-radius: 2px; }

  /* Sections */
  main{ padding-block: 1rem 4rem; }
  main.has-panel{ min-height: 100vh; }
  section{
    padding-block: 2rem 1rem;
    scroll-margin-top: 1rem;
  }
  .section-head{
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 0.5rem;
  }
  .section-head h2{
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
  }
  .section-head::after{
    content: "";
    flex: 1;
    height: 1px;
    background: var(--fg-faint);
    align-self: center;
  }
  .section-intro{
    margin: 0 0 1.75rem;
    color: var(--fg-dim);
    max-width: 60ch;
  }


  /* Software!  */
  .section-intro p{ margin: 0 0 0.8rem; }
  .section-intro a, .project p a{
    color: var(--fg);
    text-decoration: underline;
    text-decoration-color: var(--fg-faint);
    text-underline-offset: 3px;
  }
  .section-intro a:hover, .project p a:hover{ text-decoration-color: var(--glow); }
  .group-head{
    margin: 2.5rem 0 0.25rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--fg);
  }
  .group-intro{ margin: 0 0 1.25rem; color: var(--fg-dim); font-size: 0.9rem; }
  .projects{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
  }
  .project{
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1rem;
    background: var(--bg-raised);
    border: 1px solid var(--fg-faint);
    border-radius: 4px;
    min-width: 0;
  }
  .shot{
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    max-width: 100%;
    object-fit: cover;
    /* which part of the image stays in view when it's cropped to fit the
       card; override per image with style="--focus: center" etc. */
    object-position: var(--focus, center top);
    border-radius: 2px;
    background: #000;
  }
  .shot-missing{
    display: grid;
    place-items: center;
    padding: 1rem;
    border: 1px dashed var(--fg-faint);
    color: var(--fg-dim);
    font-size: 0.8rem;
    text-align: center;
  }
  .project h4{ margin: 0.35rem 0 0; font-size: 1.02rem; font-weight: 700; overflow-wrap: anywhere; }
  .project .links{ margin: 0; font-size: 0.82rem; }
  .project .links a{
    color: #d6ae55;
    text-decoration: none;
    border-bottom: 1px solid transparent;
  }
  .project .links a:hover, .project .links a:focus-visible{ color: #f0cf7a; border-color: #d6ae55; }
  .project .links .sep{ color: var(--fg-faint); margin: 0 0.2rem; }
  .project p{ margin: 0; color: var(--fg-dim); font-size: 0.86rem; }
  .meta{
    margin: auto 0 0;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--fg-faint);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 0.75rem;
    font-size: 0.76rem;
  }
  .meta dt{ color: #6d7076; text-transform: uppercase; letter-spacing: 0.06em; }
  .meta dd{ margin: 0; color: var(--fg-dim); }

  /* Footer */
  footer{
    border-top: 1px solid var(--fg-faint);
    padding-block: 2rem 3rem;
    color: var(--fg-dim);
    font-size: 0.88rem;
  }
  footer .links{
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
  }
  footer a{
    color: var(--fg-dim);
    text-decoration: none;
    border-bottom: 1px solid transparent;
  }
  footer a:hover, footer a:focus-visible{ color: var(--fg); border-color: var(--glow); }

  @media (max-width: 480px){
    .wrap{ padding-inline: 16px; }
    .site-header:not(.mini) .portrait{ width: 120px; height: 120px; }
  }