/* ---------------------------------------------------------------------------
   Harish — museum portfolio
   ---------------------------------------------------------------------------
   Single-theme on purpose. The game canvas is fixed pixel art with its palette
   baked into the sprites; a light mode would fight it rather than serve it. So
   the whole site commits to one world: a warm gallery after closing time.

   The chrome around the game is pixel-art in spirit (chunky double borders,
   brass rules, no soft shadows) but the type inside it is real text, so titles
   and links stay selectable, linkable and readable by a screen reader.
--------------------------------------------------------------------------- */

:root {
  --ground:  #17100D;
  --ink:     #241A15;
  --panel:   #30231B;
  --edge:    #4A362A;
  --brass:   #DCA646;
  --brass-d: #A87C2E;
  --paper:   #F3E8D6;
  --muted:   #B09B80;
  --velvet:  #9C4038;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

body.is-handheld { overflow: auto; }

/* ---------------------------------------------------------------- stage -- */

#stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(80% 70% at 50% 40%, #241A15 0%, var(--ground) 100%);
}

#game {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  box-shadow: 0 0 0 1px var(--edge), 0 24px 60px rgba(0, 0, 0, 0.55);
}

.is-handheld #stage,
.is-handheld .skip-btn { display: none; }

/* ------------------------------------------------------------ skip btn -- */

.skip-btn {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  box-shadow: 0 0 0 2px var(--brass), 0 0 0 4px var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.skip-btn:hover { background: var(--brass); color: var(--ink); }
.skip-btn:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }

/* ------------------------------------------------------------- overlay -- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 10, 8, 0.86);
  opacity: 0;
  transition: opacity 150ms ease;
}

.overlay.is-open { opacity: 1; }
.overlay[hidden] { display: none; }

/* -------------------------------------------------------- rpg window -- */

/* Fixed height, not max-height. The window is centred, so a content-driven
   height means every entry you move to resizes it and both edges slide — one
   project with three screenshots and the next with none made the whole frame
   jump. Fixed, the frame is furniture and only what's inside it changes. */
/* Sized off the viewport, not fixed. At 920x660 the window was a third of the
   width of a large monitor and read as a small box in the middle of a big dark
   screen; the floors keep it exactly as it was on a laptop, where it already
   filled its share, and the caps stop a very wide screen stretching the
   pictures past the point of being worth looking at. */
.window {
  /* The floor is set by the widest row the panel has to hold on one line: five
     event tabs come to 664px, and the rail and padding take 320px of whatever
     the window is. At 920 the fifth tab wrapped to a second row on any laptop
     narrower than about 1680. */
  width: min(100%, max(1020px, min(65vw, 1500px)));
  height: min(100%, max(660px, min(72vh, 940px)));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  box-shadow: 0 0 0 3px var(--brass), 0 0 0 6px #150E0B;
  transform: translateY(6px) scale(0.995);
  transition: transform 160ms ease;
}

.is-open .window { transform: none; }

.window-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 22px 16px;
  border-bottom: 2px solid var(--edge);
}

.window-head-text { flex: 1; min-width: 0; }

#menu-wing {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 27px;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

#menu-blurb {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 14.5px;
}

.win-close {
  flex: none;
  width: 30px;
  height: 30px;
  background: transparent;
  border: 2px solid var(--edge);
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease;
}

.win-close:hover { border-color: var(--brass); color: var(--brass); }
.win-close:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

.window-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 268px 1fr;
}

/* ------------------------------------------------------- entry list -- */

.entry-list {
  border-right: 2px solid var(--edge);
  padding: 12px 0;
  overflow-y: auto;
  background: #1F1611;
}

.entry-list:focus { outline: none; }
.entry-list:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; }

.entry {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: baseline;
  gap: 4px;
  padding: 9px 16px 9px 8px;
  cursor: pointer;
  border-left: 3px solid transparent;
}

.entry-cursor {
  color: var(--brass);
  font-size: 11px;
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity 120ms ease, transform 120ms ease;
}

.entry-label {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.3;
  color: var(--muted);
  transition: color 120ms ease;
}

/* A launch date is a month and a year, so it is wider than the bare year it
   replaced. Kept on one line — it is the rail's second column and the title
   beside it is the thing allowed to wrap. */
.entry-launch {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: #6F5B47;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.entry:hover .entry-label { color: var(--paper); }

.entry[aria-selected="true"] {
  background: var(--panel);
  border-left-color: var(--brass);
}

.entry[aria-selected="true"] .entry-cursor { opacity: 1; transform: none; }
.entry[aria-selected="true"] .entry-label { color: var(--paper); }
.entry[aria-selected="true"] .entry-launch { color: var(--brass-d); }

.entry-empty {
  margin: 0;
  padding: 14px 18px;
  color: var(--muted);
  font-style: italic;
  font-size: 14px;
}

/* ----------------------------------------------------- entry detail -- */

.entry-detail {
  padding: 24px 26px 28px;
  overflow-y: auto;
}

.entry-detail h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.15;
  text-wrap: balance;
}

.detail-tagline {
  margin: 6px 0 0;
  color: var(--brass);
  font-size: 15px;
}

.detail-plate {
  height: 1px;
  margin: 16px 0;
  background: linear-gradient(90deg, var(--brass-d), transparent);
}

.detail-client {
  margin: 0 0 10px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Runs the width of the pane. It used to stop at 58ch, which is the readable
   measure for a column of prose but left half the panel empty once the window
   grew — and a paragraph that stops in the middle of the space it was given
   looks like something went wrong rather than like typography. */
.detail-body {
  margin: 0;
  color: #DED0BA;
  font-size: 15px;
  line-height: 1.62;
}

/* only between paragraphs, so a one-paragraph description sits where it did */
.detail-body + .detail-body { margin-top: 13px; }

/* the sign-off follows the pictures rather than another paragraph, so the rule
   above never reaches it; it needs the gap of a new section instead */
.detail-outro { margin-top: 18px; }

/* When an event ran, at the top of its panel. Brass-dim because that is what a
   date already looks like in this window — the launch column in the rail. */
.detail-date {
  margin: 0 0 8px;
  color: var(--brass-d);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* "Event in progress", beside the date. Filled rather than outlined, because
   everything else in this register is outlined and this one is meant to catch
   the eye — it is the difference between something that happened and something
   that is happening. */
.detail-status {
  margin-left: 8px;
  padding: 2px 7px;
  background: var(--brass);
  color: #1B120C;
  font-size: 10px;
  letter-spacing: 0.1em;
}

/* Names the list under it without being a heading — same register as the
   client line, which is the panel's existing way of labelling a thing. */
.detail-label {
  margin: 18px 0 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* the label already supplies the gap above */
.detail-label + .detail-highlights { margin-top: 8px; }

.detail-highlights {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.detail-highlights li {
  position: relative;
  padding-left: 18px;
  font-size: 14.5px;
  color: #DED0BA;
}

.detail-highlights li::before {
  content: "▪";
  position: absolute;
  left: 2px;
  color: var(--brass);
}

.detail-tech,
.list-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 18px 0 0;
}

.tag {
  padding: 3px 9px;
  border: 1px solid var(--edge);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.detail-links,
.list-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 0;
}

.detail-links a,
.list-links a {
  padding: 8px 16px;
  background: var(--brass);
  color: #1B120C;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 140ms ease;
}

.detail-links a:hover,
.list-links a:hover { background: var(--paper); }

.detail-links a:focus-visible,
.list-links a:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }

/* --------------------------------------------------------- win foot -- */

.window-foot {
  margin: 0;
  padding: 11px 22px;
  border-top: 2px solid var(--edge);
  color: #7C6752;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.window-foot kbd {
  display: inline-block;
  min-width: 18px;
  padding: 1px 4px;
  margin-right: 3px;
  border: 1px solid var(--edge);
  color: var(--muted);
  font-family: inherit;
  font-size: 10px;
  text-align: center;
}

.window-foot .sep { padding: 0 4px; color: var(--edge); }

/* ------------------------------------------------- world select (list) --
   Dressed as a Minecraft world picker: dirt tiling, bevelled stone buttons,
   a splash line, and one row per project. The joke earns its place — a title,
   a metadata line and one obvious button per row is genuinely the right shape
   for this content.
   ---------------------------------------------------------------------- */

#listview {
  align-items: start;
  padding: 0;
  background: #2A1D12;
}

.sheet {
  width: 100%;
  min-height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
  padding: 0 20px 80px;
  /* the generated dirt tile, darkened the way Minecraft dims its menus */
  background-image:
    linear-gradient(rgba(20, 12, 6, 0.62), rgba(20, 12, 6, 0.62)),
    var(--dirt);
  background-size: auto, 96px 96px;
  background-repeat: repeat;
  image-rendering: pixelated;
  font-family: var(--mono);
}

.is-standalone .sheet-close { display: none; }

.sheet-close {
  position: sticky;
  top: 0;
  z-index: 2;
  display: block;
  width: calc(100% + 40px);
  margin: 0 -20px 0;
  padding: 13px 20px;
  background: rgba(20, 12, 6, 0.85);
  border: 0;
  border-bottom: 2px solid #16100A;
  box-shadow: inset 0 -3px 0 rgba(255, 255, 255, 0.07);
  color: #C9BCA8;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-align: left;
  cursor: pointer;
}

.sheet-close:hover { color: #FFF; }
.sheet-close:focus-visible { outline: 2px solid #FFF; outline-offset: -4px; }

#list-body {
  max-width: 760px;
  margin: 0 auto;
  padding-top: 44px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mc-head { text-align: center; margin-bottom: 6px; }

.mc-title {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(30px, 6vw, 46px);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #FFFFFF;
  /* the classic hard drop shadow, no blur */
  text-shadow: 4px 4px 0 #3A3A3A;
}

.mc-splash {
  margin: 14px 0 0;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: #FFD85C;
  text-shadow: 2px 2px 0 #3A3A3A;
}

.mc-menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 20px auto 0;
  width: min(430px, 100%);
}

/* ---- the stone button ---- */

.mc-btn {
  display: block;
  width: 100%;
  padding: 12px 16px;
  background: #6E6E6E;
  color: #FFFFFF;
  border: 2px solid #16100A;
  box-shadow:
    inset  2px  2px 0 rgba(255, 255, 255, 0.30),
    inset -2px -2px 0 rgba(0, 0, 0, 0.42);
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.04em;
  text-align: center;
  text-decoration: none;
  text-shadow: 2px 2px 0 #3A3A3A;
  cursor: pointer;
  transition: background 90ms steps(2), color 90ms steps(2);
}

.mc-btn:hover { background: #8A8AA0; color: #FFFFA0; }
.mc-btn:active { box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.42); }
.mc-btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }

.mc-btn-label { display: block; }

.mc-btn-sub {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #C9C9C9;
}

.mc-btn:hover .mc-btn-sub { color: #EDEDC0; }

.mc-btn-small {
  display: inline-block;
  width: auto;
  padding: 7px 14px;
  font-size: 12px;
}

.mc-back { width: min(240px, 100%); margin: 10px auto 0; }

/* ---- the world rows ---- */

.mc-worlds { display: flex; flex-direction: column; gap: 2px; }

.mc-world {
  display: flex;
  gap: 14px;
  padding: 14px;
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid transparent;
  transition: border-color 90ms steps(2), background 90ms steps(2);
}

.mc-world:hover {
  border-color: #FFFFFF;
  background: rgba(0, 0, 0, 0.68);
}

.mc-world-icon {
  flex: none;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background: #4A4A4A;
  border: 2px solid #16100A;
  box-shadow:
    inset  2px  2px 0 rgba(255, 255, 255, 0.18),
    inset -2px -2px 0 rgba(0, 0, 0, 0.40);
  color: #FFD85C;
  font-size: 24px;
  font-weight: 700;
  text-shadow: 2px 2px 0 #241A15;
}

.mc-world-text { min-width: 0; }

.mc-world-name {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  text-shadow: 2px 2px 0 #241A15;
}

.mc-world-meta {
  margin: 4px 0 0;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: #9A9A9A;
}

.mc-world-tagline {
  margin: 8px 0 0;
  font-size: 13px;
  color: #FFD85C;
}

.mc-world-desc {
  margin: 8px 0 0;
  max-width: 60ch;
  font-size: 13px;
  line-height: 1.7;
  color: #D6D2C8;
}

.mc-world-date {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9A9A9A;
}

.mc-world-status {
  margin-left: 7px;
  padding: 2px 6px;
  background: #FFD85C;
  color: #241A15;
  font-size: 10px;
  letter-spacing: 0.08em;
}

.mc-world-label {
  margin: 12px 0 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9A9A9A;
}

.mc-world-label + .mc-world-points { margin-top: 6px; }

.mc-world-points {
  margin: 10px 0 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.7;
  color: #D6D2C8;
}

.mc-world-links { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }

.mc-empty, .mc-note, .mc-footer {
  margin: 0;
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.45);
  color: #C9BCA8;
  font-size: 12.5px;
  line-height: 1.7;
}

.mc-note { border-left: 4px solid #FFD85C; }
.mc-footer { background: none; text-align: center; color: #8A7F70; }

@media (max-width: 560px) {
  .mc-world { flex-direction: column; gap: 10px; }
  .mc-world-icon { width: 44px; height: 44px; font-size: 20px; }
}

/* the picture slot on a world row, same idea as the exhibit panel's */
.mc-world-gallery {
  margin: 12px 0 0;
  max-width: 420px;
  --pic-ratio: 3 / 2;                 /* an entry's `ratio` overrides this */
}

.mc-world-track {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.mc-world-track.is-live { transition: height 180ms ease; }

.mc-world-track::-webkit-scrollbar { display: none; }
.mc-world-track:focus { outline: none; }
.mc-world-track:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.mc-world-gallery.is-one .mc-world-track { overflow-x: hidden; }

.mc-world-figure {
  flex: 0 0 100%;
  scroll-snap-align: start;
  margin: 0;
  padding: 6px;
  background: rgba(0, 0, 0, 0.28);
  border: 2px solid #16100A;
}

.mc-world-figure img {
  aspect-ratio: var(--pic-ratio);
  object-fit: contain;
  background: #16100A;
}

.mc-world-strip { position: relative; }

.mc-gal-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 38px;
  padding: 0;
  background: rgba(10, 7, 4, 0.82);
  border: 2px solid var(--brass-d);
  color: #F0E6D2;
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.mc-gal-arrow.is-prev { left: 8px; }
.mc-gal-arrow.is-next { right: 8px; }
.mc-gal-arrow:hover:not(:disabled) { border-color: var(--brass); color: var(--brass); }
.mc-gal-arrow:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.mc-gal-arrow:disabled { opacity: 0.25; cursor: default; }

.mc-gal-dots {
  display: flex;
  gap: 5px;
  margin-top: 8px;
}

.mc-gal-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  background: #4A3B29;
  border: 0;
  cursor: pointer;
}

.mc-gal-dot:hover { background: var(--brass-d); }
.mc-gal-dot[aria-current="true"] { background: var(--brass); }
.mc-gal-dot:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

.mc-world-caption {
  margin: 6px 2px 0;
  color: #9A8A70;
  font-size: 11px;
  line-height: 1.45;
}

.mc-world-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.mc-world-figure.is-empty {
  border-style: dashed;
  border-color: #6B5A44;
  background: transparent;
}

.mc-world-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 84px;
  color: #9A8A70;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --------------------------------------------------------- artwork -- */

/* One thing to look at, so the one-row rail would be silly. This is about the
   rail only — a wing holding a single entry is still a wing, and gets the same
   window as the other three so the frame does not change size as you move
   between rooms. */
.overlay.is-single .entry-list { display: none; }
.overlay.is-single .window-body { grid-template-columns: 1fr; }

/* A document is not a wing. The résumé and the house rules have nothing to move
   between and no list to hold, so they take their own height — three lines of
   rules in a 660px frame is mostly empty frame. */
.overlay.is-document .window {
  width: min(100%, 920px);
  height: auto;
  max-height: min(560px, 100%);
}

/* Several pictures are a filmstrip you swipe sideways, one at a time — stacked
   they pushed the writing most of a panel down, and the writing is the point.
   Everything else about the entry still stacks vertically underneath. */
.detail-gallery {
  margin: 18px 0 0;                   /* it follows the writing now */
  --pic-ratio: 3 / 2;                 /* an entry's `ratio` overrides this */
}

.detail-track {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  overflow-y: hidden;                 /* the height follows the active slide */
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;              /* the dots below say where you are */
}

/* Only after the first fit: see fitHeight(). */
.detail-track.is-live { transition: height 180ms ease; }

.detail-track::-webkit-scrollbar { display: none; }
.detail-track:focus { outline: none; }
.detail-track:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.detail-gallery.is-one .detail-track { overflow-x: hidden; }

/* One picture is exactly one strip wide, which is what makes the dots'
   arithmetic (scrollLeft / clientWidth) hold — so no gap here; the spacing is
   the figure's own padding. */
.detail-figure {
  flex: 0 0 100%;
  scroll-snap-align: start;
  margin: 0;
  padding: 8px;
  background: var(--panel);
  border: 1px solid var(--edge);
}

/* A fixed frame, letterboxed rather than cropped. Screenshots come in every
   shape and cropping a UI to fit loses the part that explains it. */
/* The frame gives the shape; the cap stops it running away. A `ratio: auto`
   picture takes its own proportions, and a nearly square one in a window this
   wide came out as tall as it was — most of a screen of one screenshot. Capped,
   it letterboxes sideways instead and the writing stays in view. */
.detail-figure img {
  aspect-ratio: var(--pic-ratio);
  max-height: min(46vh, 520px);
  object-fit: contain;
  background: #16100A;
}

.detail-caption {
  margin: 8px 2px 0;
  min-height: 2.9em;                  /* so the strip doesn't jolt per caption */
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

/* nothing to swipe between, so nothing to keep a height for */
.detail-gallery.is-one .detail-caption { min-height: 0; }

/* Arrows sit on the pictures rather than under them. Under, they fall past the
   bottom of the panel on a laptop, and nobody scrolls to find out that a thing
   they cannot see is swipeable. */
.detail-strip { position: relative; }

.gal-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 44px;
  padding: 0;
  background: rgba(22, 16, 10, 0.82);
  border: 2px solid var(--brass-d);
  color: var(--paper);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, opacity 140ms ease;
}

.gal-arrow.is-prev { left: 10px; }
.gal-arrow.is-next { right: 10px; }
.gal-arrow:hover:not(:disabled) { border-color: var(--brass); color: var(--brass); }
.gal-arrow:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.gal-arrow:disabled { opacity: 0.25; cursor: default; }

.gal-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}

.gal-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  background: var(--edge);
  border: 0;
  cursor: pointer;
  transition: background 140ms ease;
}

.gal-dot:hover { background: var(--brass-d); }
.gal-dot[aria-current="true"] { background: var(--brass); }
.gal-dot:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  /* .is-live carries the height transition, so it has to be named here too or
     it out-specifies this rule and animates for the people who asked it not to. */
  .detail-track, .mc-world-track,
  .detail-track.is-live, .mc-world-track.is-live {
    scroll-behavior: auto;
    transition: none;
  }
}

.detail-figure img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: auto;
}

/* An entry with a picture slot but no picture in it yet. Dashed, so it reads
   as somewhere to put something rather than as an image that failed to load. */
.detail-figure.is-empty {
  border-style: dashed;
  background: transparent;
}

.detail-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ------------------------------------------------------- event picker -- */

/* A row of events, and whichever one is chosen shown under it. The tabs are
   brass-ruled rectangles rather than the usual underline, because everything
   else in this window is a bordered box and an underline would be the odd one
   out. */
.detail-events { margin: 18px 0 0; }

/* Pinned to the top of the pane, so the row stays reachable while you read the
   event under it.
   Sticky offsets are measured from the scrollport's padding edge, not its
   border edge — so a plain `top: 0` pins the row 24px down and leaves a band
   above it that the writing scrolls through in full view. The row therefore
   pulls itself up by exactly the pane's own padding and pads it back on:
   -24px top margin and 24px top padding cancel out when it is sitting in the
   flow, and when it pins, that padding is what fills the band.
   The side margins do the same job horizontally, so nothing scrolls past in
   the gutters either. */
.detail-tabs {
  position: sticky;
  top: -24px;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: -24px -26px 0;
  padding: 24px 26px 10px;
  background: var(--ink);
}

.detail-tab {
  padding: 8px 14px;
  background: transparent;
  border: 2px solid var(--edge);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}

.detail-tab:hover { border-color: var(--brass-d); color: var(--paper); }
.detail-tab:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

.detail-tab[aria-selected="true"] {
  border-color: var(--brass);
  background: var(--panel);
  color: var(--paper);
}

.detail-event { margin-top: 14px; }
.detail-event .detail-gallery { margin-top: 12px; }

/* the list view's own, in its blockier register */
.mc-world-events { margin: 12px 0 0; max-width: 420px; }

.mc-world-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.mc-world-tab {
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.28);
  border: 2px solid #16100A;
  color: #C9BCA4;
  font-family: var(--mono);
  font-size: 11px;
  cursor: pointer;
}

.mc-world-tab:hover { border-color: var(--brass-d); color: var(--paper); }
.mc-world-tab:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.mc-world-tab[aria-selected="true"] { border-color: var(--brass); color: var(--paper); }

.mc-world-event { margin-top: 10px; }
.mc-world-event .mc-world-gallery { margin-top: 10px; }

/* ---------------------------------------------------------- noscript -- */

.noscript {
  max-width: 60ch;
  margin: 18vh auto;
  padding: 0 24px;
}

.noscript h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 46px;
  margin: 0 0 12px;
}

.noscript p { color: var(--muted); }

/* ------------------------------------------------------ responsive -- */

@media (max-width: 780px) {
  .window-body { grid-template-columns: 1fr; grid-template-rows: minmax(120px, 34%) 1fr; }
  .entry-list { border-right: 0; border-bottom: 2px solid var(--edge); }
  .window { max-height: 100%; }
}

@media (max-width: 560px) {
  #list-body { padding-top: 40px; }
  .list-entry { padding-left: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
  .window { transform: none; }
}

/* ------------------------------------------------------- screening room --
   The film the chair in the About Me wing plays. Black and red like the room
   it belongs to, and letterboxed, because that is what a screen looks like.
   ---------------------------------------------------------------------- */

#screening { background: rgba(8, 4, 6, 0.94); }

.reel {
  width: min(940px, 100%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #170F11;
  padding: 18px;
  box-shadow: 0 0 0 3px #8E2A32, 0 0 0 6px #0E0709;
  transform: translateY(8px);
  transition: transform 200ms ease;
}

.is-open .reel { transform: none; }

.reel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

#screening-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 21px;
  letter-spacing: 0.02em;
  color: #F0DDD5;
}

.reel-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0A0608;
  border: 1px solid #3A2225;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.reel-stage video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* what the screen says before a film has been put in it */
.reel-empty {
  max-width: 46ch;
  padding: 24px;
  text-align: center;
  color: #9A8288;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.9;
  letter-spacing: 0.04em;
}

.reel-empty strong {
  display: block;
  margin-bottom: 10px;
  color: #C8535F;
  font-size: 13px;
  letter-spacing: 0.16em;
}

.reel-empty code {
  color: #E0C4A8;
  font-size: 12px;
}

.reel-caption {
  margin: 0;
  color: #9A8288;
  font-size: 13px;
  font-style: italic;
}