/* rusaitis.github.io — quiet serif site, one accent colour.
   Ends with the opt-in Y2K skin; everything else is the default look. */

/* One token list for both themes: light-dark() reads the used color-scheme, so
   the OS preference applies with JavaScript off and ☾ only has to narrow it. */
:root {
  color-scheme: light dark;
  --bg: light-dark(#fcfcfc, #101114);
  --fg: light-dark(#22242a, #e8e8ea);
  --muted: light-dark(#8a8f98, #85888f);
  --rule: light-dark(#ececec, #23252b);
  --surface: light-dark(#f5f5f3, #17181d);
  --accent: light-dark(#3f7d74, #7fb8ad); /* the one colour on the page */
  --link: var(--accent);
  --link-visited: color-mix(in srgb, var(--accent) 70%, var(--muted));
}
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

img { max-width: 100%; height: auto; }

/* keep anchored headings clear of the sticky menu */
section[id], header[id], article[id] { scroll-margin-top: 3.5rem; }

:focus-visible { outline: 2px dashed var(--link); outline-offset: 2px; }
::selection { background: var(--link); color: var(--bg); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body, .menu { transition: none; }
}

body {
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
  max-width: 34rem;
  background: var(--bg);
  color: var(--fg);
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: 0.005em;
  transition: background 0.2s ease, color 0.2s ease;
}

a { color: var(--link); }
a:visited { color: var(--link-visited); }
/* links read as text first — accent colour, tinted hairline underline */
a, a:visited {
  text-decoration-thickness: 0.5px;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  text-underline-offset: 0.18em;
}

/* no double-tap zoom on tappable things */
button, a.thumb, .grid a { touch-action: manipulation; }

h1, h2, h3 { line-height: 1.25; }
h1 { font-size: 1.55rem; font-weight: 500; letter-spacing: -0.012em; margin: 0.4rem 0 0.2rem; }
h2 {
  font-size: 0.95rem;
  text-transform: lowercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 500;
  margin: 1.7rem 0; /* same above and below — see the hr rule */
}
h3 { font-size: 1.2rem; font-weight: 500; margin: 1.4rem 0 0.3rem; }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2.6rem 0;
}
/* a rule that introduces a labelled section gives back half its lower margin,
   so the label sits centred between the line and the content it announces */
hr:has(+ section > h2:first-child) { margin-bottom: 1.7rem; }

/* sticky menu */
.menu {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  padding: 0.6rem 0;
  margin-bottom: 1rem;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(6px);
  font-size: 0.85rem;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
/* out of the way on the way down; main.js brings it back on a scroll up */
.menu.tucked {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
.menu a {
  padding: 0.3rem 0;
  text-decoration: none;
  transition: text-shadow 0.25s ease, color 0.25s ease;
}
.menu .home { display: inline-flex; padding: 0; margin-right: 0.3rem; }

/* pull-down submenus — main.js builds them on fine-pointer devices only */
.mi { position: relative; display: inline-flex; }
.submenu {
  position: absolute;
  top: 100%;
  left: -0.8rem;
  z-index: 20;
  min-width: 12rem;
  margin: 0.15rem 0 0;
  padding: 0.3rem;
  list-style: none;
  background: var(--bg);
  border: 0;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.12), 0 1px 2px rgb(0 0 0 / 0.08);
  font-size: 0.95rem;
  line-height: 1.5;
}
.submenu a, .submenu a:visited {
  display: block;
  padding: 0.3rem 0.9rem;
  border-radius: 6px;
  color: var(--fg);
  text-decoration: none;
  white-space: nowrap;
}
.submenu .disabled { padding: 0.3rem 0.9rem; color: var(--muted); white-space: nowrap; }
.menu .home img { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--rule); }
.menu a.active { color: var(--accent); }

#theme-toggle {
  margin-left: auto;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--accent);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

/* hero */
.hero { text-align: center; }
.avatar { border-radius: 50%; object-fit: cover; }
.tagline { color: var(--muted); margin: 0 0 1rem; font-style: italic; }
.bio { text-align: left; }
.links { font-size: 0.95rem; }

/* lists */
.dashlist { list-style: none; padding-left: 0; }
.dashlist li { margin: 0.3rem 0; }

/* project / paper rows: thumb + text; text wraps below the thumb on narrow screens */
.project, .paper {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.6rem;
}
.project-body, .paper-body { flex: 1 1 240px; min-width: 0; }
.project h3 { margin-top: 0; }
.project h3 a, .paper-body a.title { text-decoration: none; }
.project p { margin: 0.3rem 0; }
.meta { color: var(--muted); font-size: 0.9rem; }
.stack {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 0.82rem;
}

.papers { list-style: none; padding-left: 0; }
.paper { margin-bottom: 1.2rem; }

/* shared square thumbnail (text tile or <img>), always a link */
.thumb {
  flex: 0 0 140px;
  width: 140px;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  font-size: 0.85rem;
  font-style: italic;
  text-decoration: none;
  overflow: hidden;
}
a.thumb, a.thumb:visited { color: var(--accent); text-decoration: none; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* paper page header bits */
.byline { color: var(--muted); font-size: 0.95rem; }
.lead { font-size: 1.05rem; }

/* figure explorer */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.6rem;
  margin: 0.8rem 0 1.2rem;
}
.gallery:empty { display: none; }
.gallery .fig {
  display: block;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
  aspect-ratio: 1;
}
.gallery .fig img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* lightbox — a modal <dialog> injected by main.js where a gallery exists */
.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 1.5rem;
  border: 0;
  background: none;
  touch-action: pinch-zoom; /* horizontal swipes reach JS; page behind stays put */
}
.lightbox:not([open]) { display: none; } /* the UA rule loses to display:flex above */
.lightbox::backdrop { background: rgba(0, 0, 0, 0.85); }
.lb-fig { margin: 0; max-width: 90vw; max-height: 85vh; text-align: center; }
.lb-fig img { max-width: 100%; max-height: 78vh; background: #fff; border-radius: 2px; }
.lb-fig figcaption { color: #eee; font-size: 0.9rem; margin-top: 0.6rem; }
.lightbox button {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  font-size: 1.6rem;
  line-height: 1;
  width: 2.75rem;
  height: 2.75rem;
  cursor: pointer;
}
.lb-close { position: absolute; top: 1rem; right: 1rem; }

.placeholder { color: var(--muted); font-style: italic; }

/* 404 barrier — strokes only, so it takes the page's text colour like the globe */
.construction {
  display: block;
  margin: 0 auto 0.6rem;   /* text-align alone won't centre a block-level svg */
  color: var(--muted);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}
.construction .stripes { stroke-width: 2.8; }

/* life tiles */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-top: 1rem;
}
.grid a {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 12px;
  color: var(--accent);
  font-size: 0.9rem;
  text-decoration: none;
}

footer {
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
}
footer p { margin: 0.3rem 0; }
.footnote { font-size: 0.8rem; font-style: italic; }

/* "NEW!" badge — static here; Y2K mode makes it blink again */
.new-badge {
  display: inline-block;
  vertical-align: super;
  margin-left: 0.3em;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.55em;
  font-weight: bold;
  font-style: normal;
  letter-spacing: 0.05em;
  color: var(--muted);
}

/* the LED visitor counter stays in the markup, hidden until Y2K mode */
.counter { display: none; }

/* the 1999-mode switch: quiet on the page, System 7 inside the Hotlist window */
.y2kline { margin-top: 0.9rem; }
#y2k-toggle {
  padding: 0.15rem 0.55rem;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 6px;
  color: var(--muted);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
#y2k-toggle[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.mac-body #y2k-toggle {
  border-radius: 0;
  border: 1px solid #000;
  background: #fff;
  color: #000;
  font-size: 0.8rem;
}

/* classic System 6/7 black-and-white floating window (always B&W, ignores theme) */
/* the hotlist line sits quietly under the Life tiles — muted until you reach for it */
.hotlist { font-size: 0.95rem; }
.hotlist a, .hotlist a:visited { color: color-mix(in srgb, var(--accent) 65%, var(--muted)); text-decoration: none; }

/* globe button — opens the classic Mac links window (desktop only; main.js unhides it) */
.globe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  margin-right: 0.1rem;
  vertical-align: -0.3rem;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  color: color-mix(in srgb, var(--accent) 65%, var(--muted));
  opacity: 0.75;
  cursor: pointer;
}
.globe svg { fill: none; stroke: currentColor; stroke-width: 1; }
.globe:active { background: var(--surface); }

.mac-window {
  position: fixed;
  inset: 80px auto auto 50%;
  transform: translateX(-50%);
  width: min(380px, 90vw);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  overflow: visible; /* the grow box hangs outside the frame */
  background: #fff;
  color: #000;
  border: 1px solid #000;
  border-radius: 2px;
  box-shadow: 3px 3px 0 #000;
  font-family: Geneva, Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.mac-window:not(:popover-open) { display: none; } /* the UA rule loses to display:flex above */

.mac-titlebar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.5rem;
  border-bottom: 1px solid #000;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none; /* no text selection while dragging the title bar */
  background-image: repeating-linear-gradient(#000 0 1px, #fff 1px 3px);
}
.mac-titlebar:active { cursor: grabbing; }
.mac-title {
  position: relative;
  z-index: 1;
  background: #fff;
  padding: 0 0.6em;
  font-size: 0.8rem;
  font-weight: bold;
}
.mac-close {
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 12px;
  height: 12px;
  padding: 0;
  background: #fff;
  border: 1px solid #000;
  cursor: pointer;
}
.mac-close::before { content: ""; position: absolute; inset: -10px; } /* 32px hit area */
.mac-close:active { background: #000; }

.mac-body {
  flex: 1 1 auto;
  min-height: 0; /* lets the body scroll instead of stretching a resized window */
  padding: 0.4rem 0.9rem 0.9rem;
  overflow-y: auto;
  font-size: 0.85rem;
  line-height: 1.5;
}
.mac-body h2 {
  margin: 0.7rem 0 0.2rem;
  color: #000;
  font-size: 0.85rem;
  font-weight: bold;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: none;
}
.mac-body ul { margin: 0; padding-left: 1.2rem; list-style: disc; }
.mac-body li { margin: 0; }
.mac-body a, .mac-body a:visited { color: #000; }
.mac-body .placeholder { color: #555; }

/* System 7 grow box: two overlapping squares in the bottom-right corner */
.mac-grow {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 15px;
  height: 15px;
  background: #fff;
  border: 1px solid #000;
  cursor: nwse-resize;
  touch-action: none;
}
.mac-grow::before, .mac-grow::after { content: ""; position: absolute; background: #fff; border: 1px solid #000; }
.mac-grow::before { left: 2px; top: 2px; width: 5px; height: 5px; }
.mac-grow::after { left: 4px; top: 4px; width: 7px; height: 7px; }

/* hover only where hovering exists — no stuck states after a tap on touch screens */
@media (hover: hover) {
  a:hover { text-decoration: none; }
  .menu a:hover, .project h3 a:hover, .paper-body a.title:hover { text-decoration: underline; }
  /* classic inverted highlight on the pull-down rows */
  .menu .submenu a:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); text-decoration: none; }
  #theme-toggle:hover { background: var(--surface); }
  #y2k-toggle:hover { background: var(--surface); }
  .mac-body #y2k-toggle:hover { background: #000; color: #fff; }
  .globe:hover { background: var(--surface); border-color: var(--rule); color: var(--link); opacity: 1; }
  .hotlist a:hover { color: var(--link); text-decoration: underline; }
  .menu .home:hover img { border-color: var(--fg); }
  a.thumb:hover, .grid a:hover, .gallery .fig:hover { border-color: var(--accent); }
  .lightbox button:hover { background: rgba(255, 255, 255, 0.25); }
  .mac-close:hover { background: #000; }
}

@media (max-width: 480px) {
  .menu { gap: 0.25rem; }
  h1 { font-size: 1.4rem; }
  .avatar { width: 128px; height: 128px; }
  .lightbox { flex-wrap: wrap; align-content: center; padding: 3.5rem 1rem 1rem; } /* clear the × */
  .lb-fig { flex-basis: 100%; order: -1; } /* figure first, ‹ › centred below it */
  .lb-fig img { max-height: 62vh; }
}

@media print {
  .menu, #theme-toggle, .globe { display: none; }
  body { color: #000; background: #fff; max-width: none; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}

/* ── Y2K mode ───────────────────────────────────────────────────────────────
   The opt-in period skin, switched by "y" or the buttons in the Hotlist window
   and on links.html. The <head> bootstrap sets data-skin before first paint.
   Kept last in the file because its tokens tie with the dark-theme block and win
   on order — which is why it looks the same whatever ☾ last chose. In here there
   is one look, so the ☾ button hides itself. */
html[data-skin="y2k"] {
  color-scheme: dark;
  --bg: #000033;
  --fg: #e8f4ff;
  --muted: #9ef29e;
  --rule: #ff00ff;
  --link: #00ffff;
  --link-visited: #ff66ff;
  --surface: #1a1a5a;
  --accent: #00ffff;

  & body {
    background-color: #000033;
    background-image:
      radial-gradient(1.2px 1.2px at 24px 38px, #fff, transparent),
      radial-gradient(1px 1px at 120px 90px, #cfe9ff, transparent),
      radial-gradient(1.4px 1.4px at 205px 160px, #fff, transparent),
      radial-gradient(1px 1px at 70px 215px, #ffe9a8, transparent),
      radial-gradient(1px 1px at 262px 262px, #fff, transparent);
    background-size: 300px 300px;
    background-attachment: fixed;
    font-family: "Comic Sans MS", "Chalkboard SE", "Segoe Print", cursive;
    letter-spacing: normal;
    cursor: crosshair;
  }

  /* links go loud again */
  & a, & a:visited {
    text-decoration-thickness: 1px;
    text-decoration-color: currentColor;
    text-shadow: 0 0 6px currentColor;
  }

  & h1, & h2, & h3 {
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-weight: normal;
    letter-spacing: 0.02em;
    color: #ffff00;
    text-shadow: 2px 2px 0 #ff00ff;
  }
  & h1 { font-size: 2rem; }
  & h2 { font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.06em; }

  & hr {
    height: 6px;
    margin: 1.6rem 0;
    border: 0;
    background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f);
  }

  & .menu {
    background: rgba(0, 0, 51, 0.85);
    border-bottom: 2px ridge #ff00ff;
    font-size: 0.95rem;
  }
  & .menu a.active { color: #ffff00; }
  & .menu .home img { border: 2px ridge #00ffff; }
  & #theme-toggle { visibility: hidden; } /* keeps the menu the same height */

  /* the obligatory scrolling tagline */
  & .hero { overflow: hidden; }
  & .avatar { border: 3px ridge #ff00ff; }
  & .tagline {
    white-space: nowrap;
    color: #ffff66;
    font-style: normal;
    animation: skin-marquee 14s linear infinite;
  }

  & .grid a {
    aspect-ratio: 1;
    border: 3px ridge #ff00ff;
    border-radius: 0;
    background: #1a1a5a;
    color: #ffff66;
    font-weight: bold;
    transform: rotate(-1.5deg);
  }
  & .grid a:nth-child(2) { transform: rotate(1.5deg); }
  & .grid a:nth-child(3) { transform: rotate(-0.7deg); }

  & .thumb, & .gallery .fig { border: 3px ridge #00ffff; border-radius: 0; background: #000; }
  & a.thumb, & a.thumb:visited { color: #00ffff; }

  & .submenu {
    padding: 0;
    border: 3px ridge #ff00ff;
    border-radius: 0;
    background: #1a1a5a;
    box-shadow: 4px 4px 0 #000;
  }
  & .submenu a, & .submenu a:visited { border-radius: 0; color: #ffff66; }
  & .submenu .disabled { color: #9ef29e; font-style: italic; }

  & .hotlist a, & .hotlist a:visited { color: #00ffff; }
  & #y2k-toggle { border: 2px ridge #00ffff; border-radius: 0; color: #ffff66; background: #1a1a5a; }
  & .globe { color: #00ffff; opacity: 1; }
  & .construction { color: #ffff00; }

  /* the flourishes the quiet look put away */
  & .new-badge { color: #ffff00; animation: blink 0.5s step-start infinite; }
  & .counter { display: block; font-style: normal; }
  & #hits {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    background: #000;
    color: #0f0;
    padding: 0 0.3em;
    border: 2px inset #00ff00;
    letter-spacing: 0.12em;
  }

  & footer::after {
    content: "🚧 under construction · best viewed at 800×600 in Netscape 4 🚧";
    display: block;
    margin-top: 0.9rem;
    color: #ffff66;
    font-size: 0.85rem;
  }

  /* the Hotlist window joins in, but keeps its System 7 lettering */
  & .mac-titlebar { background-image: repeating-linear-gradient(#ff00ff 0 1px, #fff 1px 3px); }
  & .mac-body h2 { font-family: inherit; font-size: 0.85rem; color: #000; text-shadow: none; text-transform: none; }

  @media (hover: hover) {
    & .menu .submenu a:hover { background: #ff00ff; color: #000033; }
    & a.thumb:hover, & .grid a:hover, & .gallery .fig:hover { border-color: #ffff00; }
  }

  @media (prefers-reduced-motion: reduce) {
    & .tagline, & .new-badge { animation: none; }
  }
}

@keyframes skin-marquee {
  from { transform: translateX(70%); }
  to { transform: translateX(-70%); }
}
@keyframes blink { 50% { opacity: 0; } }