/* ---------- Fonts (self-hosted, no external requests) ---------- */
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/ibm-plex-mono-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/ibm-plex-sans-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --blue: #1F3BFF;
  --gray: #E6E6E6;
  --ink: #EDEDED;
  --line: #E6E6E6;
  --taskbar-h: 40px;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --side-margin: 6%;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* The texture is a fixed layer rather than background-attachment: fixed, which iOS Safari ignores
   (the image then tiles down the page and leaves a hard seam). On small/touch screens it is one
   image covering the viewport, so nothing tiles. */
body::before {
  content: ''; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; pointer-events: none;
  background: url("assets/bg-texture.png") top center / 1600px auto repeat;
}
@media (max-width: 899.98px), (hover: none) {
  body::before { background-size: cover; background-repeat: no-repeat; }
}

body {
  background: var(--gray);
  font-family: var(--mono);
  color: var(--blue);
  padding-bottom: var(--taskbar-h);
}

a { color: var(--blue); }
a:not(.plain) { text-decoration-line: underline; text-decoration-skip-ink: none; text-underline-position: from-font; }

.wrap { padding-left: max(16px, var(--side-margin)); padding-right: max(16px, var(--side-margin)); }

/* ---------- Hero: logo + themes, centered in the viewport ---------- */
.hero {
  min-height: calc(100vh - var(--taskbar-h));
  min-height: calc(100svh - var(--taskbar-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px max(16px, var(--side-margin));
}
.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 40px;
  width: 100%;
}
/* Intro text and theme row share one width */
.hero-copy { width: 100%; max-width: 62ch; }
.logo { display: block; width: min(480px, 80vw); height: auto; }

.intro { text-align: left; }
.intro .slash { display: block; font-size: 16px; margin: 0 0 12px; }
.intro p { font-family: var(--sans); font-size: 16px; line-height: 1.5; margin: 0 0 1em; }
.intro p:last-child { margin-bottom: 0; }
.intro-after { margin-top: 32px; }

/* Home page corner tag: pinned at the right edge, just below the pinned theme menu.
   On phones it starts collapsed to an arrow tab and slides open when tapped. */
.fellowship-tag {
  position: fixed; right: 0; top: var(--tag-top, calc(var(--bar-h, 56px) + 12px)); z-index: 60;
  display: flex; align-items: stretch;
  transition: opacity 0.4s ease, visibility 0s;
}
.tag-toggle { display: none; }
.tag-link {
  padding: 8px 14px 8px 12px; background: var(--blue); color: var(--gray);
  font-family: var(--mono); font-size: 12px; line-height: 1.2; letter-spacing: 0.02em; text-decoration: none; white-space: nowrap;
}
.tag-link:hover, .tag-link:focus-visible { background: var(--gray); color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
/* Fades away once the reader reaches Anarchy (class set in site.js); hidden = out of tab order too */
.fellowship-tag.is-faded { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.4s ease, visibility 0s 0.4s; }

@media (max-width: 699.98px) {
  .fellowship-tag { --tab-w: 34px; transform: translateX(calc(100% - var(--tab-w))); transition: transform 0.35s ease, opacity 0.4s ease, visibility 0s; }
  .fellowship-tag.is-open { transform: translateX(0); }
  .fellowship-tag.is-faded { transition: transform 0.35s ease, opacity 0.4s ease, visibility 0s 0.4s; }
  .tag-toggle {
    display: flex; align-items: center; justify-content: center; flex: none; width: var(--tab-w);
    padding: 0; margin: 0; border: 0; background: var(--blue); color: var(--gray); cursor: pointer;
    border-right: 1px solid rgba(255, 255, 255, 0.35);
  }
  .fellowship-tag:not(.is-open) .tag-toggle { border-right: 0; }
  .tag-toggle svg { display: block; transition: transform 0.35s ease; }
  .fellowship-tag.is-open .tag-toggle svg { transform: rotate(180deg); }
  .tag-toggle:focus-visible { outline: 2px solid var(--gray); outline-offset: -4px; }
  /* Collapsed: the text is off-screen, so keep it out of the tab order */
  .fellowship-tag:not(.is-open) .tag-link { visibility: hidden; }
  /* Two small nudges after load so the tab is noticed (stops once it has been used) */
  .fellowship-tag:not(.is-open):not(.has-been-used):not(.is-faded) { animation: tag-nudge 0.9s ease-in-out 1.6s 2; }
}
@keyframes tag-nudge {
  0%, 100% { transform: translateX(calc(100% - var(--tab-w))); }
  50% { transform: translateX(calc(100% - var(--tab-w) - 14px)); }
}
@media (prefers-reduced-motion: reduce) {
  .fellowship-tag, .tag-toggle svg { transition: none !important; animation: none !important; }
}

/* Theme menu: sits in the hero, then pins to the top of the viewport (see site.js).
   The slot keeps the bar's place in the flow so nothing jumps when it pins. */
.theme-bar-slot { margin-top: 40px; }
.theme-bar { width: 100%; padding: 12px 0; }
.theme-bar.is-stuck {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding-left: max(16px, var(--side-margin)); padding-right: max(16px, var(--side-margin));
  background: var(--gray);
  box-shadow: 0 1px 0 var(--blue);
}

.theme-nav {
  position: relative; width: 100%; max-width: 62ch; margin: 0 auto; padding: 0;
  list-style: none; display: flex; flex-direction: column; gap: 20px;
}
.theme-nav li { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 20px; }

@media (min-width: 700px) {
  .theme-nav { flex-direction: row; flex-wrap: nowrap; justify-content: space-between; gap: 12px; }
  .theme-nav li { font-size: 16px; gap: 8px; white-space: nowrap; }
  .theme-nav .num { width: 28px; height: 28px; font-size: 14px; }
}
/* Phones: once pinned, the menu becomes one compact row that scrolls sideways */
@media (max-width: 699.98px) {
  .theme-bar.is-stuck .theme-nav {
    flex-direction: row; justify-content: flex-start; gap: 20px;
    overflow-x: auto; scrollbar-width: none;
  }
  .theme-bar.is-stuck .theme-nav::-webkit-scrollbar { display: none; }
  .theme-bar.is-stuck .theme-nav li { flex: none; font-size: 14px; gap: 8px; white-space: nowrap; }
  .theme-bar.is-stuck .theme-nav .num { width: 24px; height: 24px; font-size: 12px; }

  /* Fade on the right edge while more themes are hidden off-screen (class set in site.js) */
  .theme-bar.is-stuck::after {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 56px;
    pointer-events: none; opacity: 0; transition: opacity 0.2s;
    background: linear-gradient(to right, rgba(230, 230, 230, 0), var(--gray) 85%);
  }
  .theme-bar.is-stuck.can-scroll::after { opacity: 1; }
}
.theme-nav .num {
  flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--blue);
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.theme-nav a { text-decoration: none; }
.theme-nav a:hover { text-decoration: underline; }
.theme-nav li.is-active a { text-decoration: underline; }
.theme-nav li.is-active .num { background: var(--blue); color: var(--gray); }

/* ---------- Theme sections ---------- */
.theme-section {
  padding: 40px 0 64px;
  border-top: 1px solid var(--blue);
  scroll-margin-top: var(--bar-h, 56px);
}
/* Lets the last theme scroll all the way up under the pinned menu */
.theme-section:last-of-type { min-height: calc(100vh - var(--bar-h, 56px)); }
.theme-section h2 {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 48px;
  line-height: 1;
  margin: 0 0 24px;
  overflow-wrap: break-word;
}
.lede {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  max-width: 62ch;
  margin: 0 0 32px;
}
.lede p { margin: 0 0 1em; }
.lede p:last-child { margin-bottom: 0; }
.works-label { font-size: 16px; letter-spacing: 0.05em; margin: 0 0 16px; }
.works { list-style: none; margin: 0; padding: 0; }
.works li { font-size: 16px; line-height: 1.4; margin-bottom: 20px; }
.works .title { display: block; }
.works .artist { display: block; }

/* Phones: title, paragraphs, carousel, then the works list (DOM order stays paragraphs -> works -> carousel) */
@media (max-width: 699.98px) {
  .theme-section { display: flex; flex-direction: column; }
  .theme-section .lede { order: 1; }
  .theme-section .carousel { order: 2; }
  .theme-section .works-col { order: 3; margin-top: 32px; }
}

@media (min-width: 700px) {
  .theme-section h2 { font-size: 56px; }

  /* Two-column row: works (titles + links) on the left, paragraph on the right.
     DOM order stays title -> paragraph -> works so phones read top to bottom. */
  .theme-section {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 6%;
    align-items: start; align-content: start;
  }
  .theme-section h2 { grid-column: 1 / -1; }
  .theme-section .works-col { grid-column: 1; grid-row: 2; }
  .theme-section .lede { grid-column: 2; grid-row: 2; max-width: none; margin: 0; }
}

/* ---------- In-page artwork viewer (native <dialog>) ---------- */
html.viewer-open, html.viewer-open body { overflow: hidden; }

dialog.viewer {
  border: 0; padding: 0; background: transparent; color: var(--blue);
  width: min(1400px, 94vw); height: min(900px, 88vh);
  max-width: none; max-height: none;
}
dialog.viewer[open] { display: flex; }
dialog.viewer::backdrop { background: rgba(230, 230, 230, 0.78); }

.viewer-win {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  border: 1px solid var(--blue); background: var(--gray);
}
.viewer-titlebar {
  flex: none; height: 36px; padding: 0 10px; gap: 16px;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--blue); color: var(--gray);
}
.viewer-title { font-size: 14px; letter-spacing: 0.02em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer-actions { flex: none; display: flex; align-items: center; gap: 18px; }
.viewer-open { color: var(--gray); font-size: 12px; text-decoration: none; letter-spacing: 0.02em; white-space: nowrap; }
.viewer-open:hover, .viewer-open:focus-visible { text-decoration: underline; }
.viewer-close {
  background: none; border: 0; padding: 4px 2px; margin: 0; cursor: pointer;
  color: var(--gray); font: inherit; font-size: 16px; line-height: 1;
}
.viewer-close:hover { opacity: 0.75; }
.viewer-close:focus-visible, .viewer-open:focus-visible { outline: 1px solid var(--gray); outline-offset: 3px; }

.viewer-body { position: relative; flex: 1; min-height: 0; background: var(--gray); }
.viewer-status {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 14px; letter-spacing: 0.05em;
}
.viewer-body iframe { position: relative; display: block; width: 100%; height: 100%; border: 0; background: transparent; }

@media (max-width: 699.98px) {
  dialog.viewer { width: 100vw; height: 100dvh; max-width: 100vw; }
  .viewer-open { font-size: 11px; }
}

/* ---------- Work carousels (one per theme section) ---------- */
body { overflow-x: clip; }

.carousel {
  --slide-w: min(720px, 46vw);
  --slide-gap: 32px;
  --gutter: max(16px, var(--side-margin));   /* same left margin as the section title */
  --window-gray: #D9D9D9;
  position: relative;
  width: 100vw;
  margin: 56px 0 0 calc(50% - 50vw);
}
@media (max-width: 899.98px) { .carousel { --slide-w: min(720px, 72vw); } }
@media (max-width: 699.98px) { .carousel { --slide-w: 76vw; --slide-gap: 16px; margin-top: 40px; } }

@media (min-width: 700px) {
  .theme-section .carousel { grid-column: 1 / -1; grid-row: 3; }
}

.carousel-track {
  position: relative;
  display: flex; gap: var(--slide-gap); align-items: flex-start;
  /* First window starts at the left margin. The trailing padding lets the last
     window scroll all the way to that same left position. */
  padding: 0 max(16px, calc(100% - var(--slide-w) - var(--gutter))) 0 var(--gutter);
  scroll-padding-left: var(--gutter);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track:focus-visible { outline: 1px solid var(--blue); outline-offset: -4px; }

/* Window (same chrome idea as the artwork viewer) */
.slide {
  flex: 0 0 var(--slide-w);
  min-width: 0;
  aspect-ratio: 3 / 2;
  display: flex; flex-direction: column;
  border: 1px solid var(--blue);
  background: var(--window-gray);
  scroll-snap-align: start; scroll-snap-stop: always;
}
@media (max-width: 699.98px) { .slide { aspect-ratio: 3 / 4; } }
.slide:not(.is-active) { cursor: pointer; }
.slide:not(.is-active) iframe { pointer-events: none; }

.slide-titlebar {
  flex: none; height: 36px; padding: 0 10px 0 12px; gap: 12px;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--gray); border-bottom: 1px solid var(--blue);
}
.slide-title { min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.win-ctls { flex: none; display: flex; align-items: center; gap: 10px; }
.win-ctl { position: relative; display: block; width: 22px; height: 22px; padding: 0; border: 0; background: none; color: var(--blue); }
.win-min::before { content: ""; position: absolute; left: 3px; right: 3px; bottom: 5px; height: 1.5px; background: currentColor; }
.win-max::before { content: ""; position: absolute; inset: 4px; border: 1.5px solid currentColor; }
.win-close::before, .win-close::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 1.5px; background: currentColor;
}
.win-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.win-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
button.win-max { cursor: pointer; }
button.win-max:hover { opacity: 0.7; }
button.win-max:focus-visible { outline: 1px solid var(--blue); outline-offset: 2px; }

.slide-body { position: relative; flex: 1; min-height: 0; }
.slide-status {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 12px; letter-spacing: 0.05em;
}
.slide-cover { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer; }
.slide-thumb-btn { display: block; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; }
.slide-thumb { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.slide-body iframe { position: relative; display: block; width: 100%; height: 100%; border: 0; background: transparent; }
.slide-fallback {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 24px; text-align: center; font-size: 14px; line-height: 1.5;
}

.carousel-nav { display: flex; align-items: center; justify-content: flex-start; gap: 16px; margin-top: 24px; padding-left: var(--gutter); }
.carousel-count { min-width: 5ch; text-align: center; font-size: 14px; }
.carousel-btn {
  width: 32px; height: 32px; padding: 0; border-radius: 50%;
  border: 1px solid var(--blue); background: none; color: var(--blue);
  font: inherit; font-size: 16px; line-height: 1; cursor: pointer;
}
.carousel-btn:hover:not(:disabled) { background: var(--blue); color: var(--gray); }
.carousel-btn:focus-visible { outline: 1px solid var(--blue); outline-offset: 3px; }
.carousel-btn:disabled { opacity: 0.35; cursor: default; }

/* ---------- Global navigation: bottom taskbar + start menu (see nav.js) ---------- */
#taskbar {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: var(--taskbar-h);
  display: flex; align-items: stretch;
  background: var(--blue);
  border-top: 1.5px solid var(--line);
  z-index: 10000;
}
#start-btn {
  appearance: none; flex: none;
  background: transparent; border: none; border-right: 1.5px solid var(--line);
  color: var(--ink);
  font-family: var(--mono); font-weight: 600; font-size: 13px; letter-spacing: 0.06em;
  padding: 0 18px; cursor: pointer;
}
#start-btn:hover { background: rgba(255, 255, 255, 0.16); }
#start-btn[aria-expanded="true"] { background: var(--ink); color: var(--blue); }
#start-btn:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }

/* Clock: desktop only, far right, the visitor's local time */
#clock {
  display: none;
  margin-left: auto; align-items: center;
  padding: 0 16px; border-left: 1.5px solid var(--line);
  font-family: var(--mono); font-size: 13px; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: 0.04em; white-space: nowrap; cursor: default;
}
.clock-date { margin-right: 10px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: #fff; }
.clock-time { font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { #clock { display: flex; } }

#start-menu {
  position: fixed; left: 0; bottom: var(--taskbar-h);
  min-width: 268px;
  background: var(--blue);
  border: 1.5px solid var(--line); border-bottom: none;
  z-index: 10001;
}
#start-menu[hidden] { display: none; }
.start-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 44px; padding: 11px 18px;
  border-bottom: 1.5px solid var(--line);
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink); white-space: nowrap;
}
.start-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 18px;
  color: var(--ink); font-family: var(--mono); font-size: 14px; text-decoration: none;
}
.start-ico { display: inline-flex; flex: none; width: 16px; height: 16px; }
.start-ico svg { display: block; width: 16px; height: 16px; }
.start-item:hover { background: rgba(255, 255, 255, 0.16); }
.start-item:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.start-item.is-current { background: var(--ink); color: var(--blue); font-weight: 600; }