/* NewApology composition, independently implemented for the approved Relics index.
   Homepage only: the retained listening/reading templates keep their own layout.
   Source: REDESIGN-BRIEF.md. Small marginal index / broad unboxed right-hand work. */

@font-face {
  font-family: 'Public Sans';
  src: url('assets/fonts/public-sans.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --font-display: 'Public Sans', ui-sans-serif, system-ui, sans-serif;
  --font-ui: 'Public Sans', ui-sans-serif, system-ui, sans-serif;
  --bg: #FFFFFF;
  --bg-raise: #FFFFFF;
  --bg-sink: #F5F5F5;
  --ink: #313131;
  --ink-2: #686868;
  --hairline: #DEDEDE;
  --accent: #313131;
  --accent-ink: #313131;
  --on-accent: #FFFFFF;
  --focus: #313131;
  --rail-width: 22.25vw;
  --index-edge: clamp(1rem, 2.5vw, 2.5rem);
  --index-space: clamp(4.5rem, 8vw, 8rem);
}

:root[data-theme='dark'] {
  --bg: #121212;
  --bg-raise: #121212;
  --bg-sink: #202020;
  --ink: #E9E9E9;
  --ink-2: #ACACAC;
  --hairline: #404040;
  --accent: #E9E9E9;
  --accent-ink: #E9E9E9;
  --on-accent: #121212;
  --focus: #E9E9E9;
}

html { scroll-behavior: auto; }
/* Hide scrollbar chrome without disabling native document or rail scrolling. */
html, body, .index-rail { scrollbar-width: none; }
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.index-rail::-webkit-scrollbar { display: none; width: 0; height: 0; }
body { line-height: 1.5; }
button { font: inherit; }
[hidden] { display: none !important; }
svg { display: block; flex: none; }
p, h1, h2, h3, figure { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }

.skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 10;
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: var(--bg);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.index-rail {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--rail-width);
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.25rem 1.25rem var(--index-edge);
  overflow-y: auto;
  background: var(--bg);
  font-size: 0.8125rem;
}

.rail-mark {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.75rem;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}
.rail-mark img { width: 42px; height: auto; }
:root[data-theme='dark'] .rail-mark img { filter: invert(1); }
.rail-mark span { font-weight: 500; }

.rail-index { padding-top: clamp(5rem, 14vh, 9rem); }
.rail-nav { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.rail-marker {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--ink);
  pointer-events: none;
}
.rail-nav[data-index-ready] .rail-marker { transition: transform 280ms cubic-bezier(0.215, 0.61, 0.355, 1); }
.rail-nav a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0 0.5rem 1rem;
  color: var(--ink);
  text-decoration: none;
}
/* Static hover/focus feedback survives a missing script; enhanced navigation
   moves one shared square without changing link geometry or native actions. */
.rail-nav a::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(50% - 3px);
  width: 6px;
  height: 6px;
  background: var(--ink);
  opacity: 0;
}
.rail-nav:not([data-index-ready]) a:hover::before,
.rail-nav:not([data-index-ready]) a:focus-visible::before { opacity: 1; }
.rail-description { padding-top: 1.25rem; color: var(--ink-2); }
.rail-bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  margin-top: auto;
  padding-top: 3rem;
}
.rail-note { font-size: 0.75rem; color: var(--ink-2); }

.index-rail .theme-toggle {
  gap: 0.625rem;
  padding: 0.5rem 0;
  border: 0;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  letter-spacing: 0;
  transition: none;
}
.index-rail .theme-toggle:hover { color: var(--ink); background: transparent; text-decoration: underline; }
.index-rail .theme-toggle svg { transition: none; }
.index-rail .theme-toggle:hover svg { transform: none; }
:root:not([data-theme]) .index-rail .theme-toggle { display: none; }

.work-index {
  min-width: 0;
  margin-left: var(--rail-width);
  padding: clamp(9rem, 23vh, 15rem) var(--index-edge) 0 0;
}
.work-index:focus { outline: none; }
.index-intro { padding-bottom: 2.25rem; }
.index-intro h1 {
  font-size: clamp(1.5rem, 2.45vw, 2.25rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.index-intro p {
  max-width: 36em;
  padding-top: 0.75rem;
  font-size: clamp(1.375rem, 2.15vw, 2rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink-2);
  text-wrap: pretty;
}

#records, #projects, #research { scroll-margin-top: 2rem; }
.record-open { display: block; text-decoration: none; }
.listening-media {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3rem;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 60svh;
  padding: clamp(1.5rem, 4vw, 4rem);
  background: #171717;
  color: #F2F2F0;
}
.listening-media h2 {
  font-size: clamp(2.75rem, 6vw, 5.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.035em;
}
.listening-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.listening-details { padding-bottom: 0.875rem; font-size: 0.8125rem; color: #B5B5B5; font-variant-numeric: tabular-nums; }
.listening-action { font-size: 0.9375rem; }
@media (hover: hover) {
  .record-open:hover .listening-media { background: #202020; }
}
.record-open:focus-visible { outline-offset: 4px; }

.media-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-top: 0.875rem;
  font-size: 0.8125rem;
  color: var(--ink-2);
}
.media-caption a { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 44px; color: var(--ink); text-decoration: none; }
.media-caption a:hover { text-decoration: underline; }
.inline-arrow { display: inline-block; width: 16px; height: 16px; vertical-align: middle; }

.index-section { padding-top: var(--index-space); }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.index-section h2 { font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.2; }
.project-count { color: var(--ink-2); font-size: 0.8125rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.project-gallery { padding-top: 1.25rem; }
.gallery-controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; }
.project-selectors { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.project-selector {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 44px;
  padding: 0.5rem 0;
  border: 0;
  border-radius: 0;
  color: var(--ink-2);
  background: transparent;
  font-size: 0.8125rem;
  cursor: pointer;
}
.project-selector::before { content: ''; width: 9px; height: 9px; border: 1px solid var(--ink-2); }
.project-selector[aria-pressed='true'] { color: var(--ink); }
.project-selector[aria-pressed='true']::before { background: var(--ink); border-color: var(--ink); }
.project-selector:hover { color: var(--ink); text-decoration: underline; }
.gallery-arrows { display: flex; gap: 0.5rem; }
.gallery-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 0;
  cursor: pointer;
}
.gallery-arrow svg { width: 24px; height: 24px; }
.gallery-arrow:hover:not([aria-disabled='true']) { color: var(--bg); background: var(--ink); border-color: var(--ink); }
.gallery-arrow[aria-disabled='true'] { color: var(--ink-2); opacity: 0.4; cursor: default; }

.project-panels { display: flex; flex-direction: column; gap: 3rem; }
.project-study { min-width: 0; }
.project-visual { display: flex; flex-direction: column; gap: 1rem; background: var(--bg); }
.project-visual img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain; }
.project-capture { display: flex; align-items: center; width: 100%; aspect-ratio: 16 / 10; cursor: zoom-in; }
.project-capture:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
/* One approved capture per project/theme. CSS owns imagery, with a light
   fallback when the existing theme script is absent. Source assets stay on disk. */
.project-capture-dark { display: none; }
:root[data-theme='dark'] .project-capture-light { display: none; }
:root[data-theme='dark'] .project-capture-dark { display: flex; }
.project-caption { display: flex; justify-content: space-between; gap: 1.5rem 3rem; padding-top: 1.25rem; }
.project-name h3 { font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.2; font-weight: 400; letter-spacing: -0.02em; }
.project-name p { padding-top: 0.625rem; font-size: 0.8125rem; color: var(--ink-2); }
.project-information { max-width: 29rem; font-size: 0.8125rem; color: var(--ink-2); text-align: right; }
.project-information p + p { padding-top: 0.3rem; }
.project-information .development-status { padding-top: 0.75rem; color: var(--ink); }

.document-list { display: flex; flex-direction: column; align-items: flex-start; gap: 1.75rem; padding-top: 1.5rem; }
.document-link { display: flex; flex-direction: column; align-items: flex-start; gap: 0.375rem; max-width: 100%; min-height: 44px; padding-block: 0.25rem; text-decoration: none; }
.document-heading { display: block; line-height: 1.5; }
.document-title { font-size: 1rem; }
.document-description { display: block; font-size: 0.8125rem; color: var(--ink-2); }
.document-format { padding-left: 0.5rem; font-size: 0.75rem; color: var(--ink-2); white-space: nowrap; }
.document-link:hover .document-title { color: var(--ink-2); }
.document-link:focus-visible { outline-offset: 4px; }

.index-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; padding-block: 4rem 1.5rem; color: var(--ink-2); font-size: 0.75rem; }
.index-footer a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.index-footer a:hover { color: var(--ink); text-decoration: underline; }
.index-footer p { display: flex; align-items: center; gap: 0.3em; }

@media (max-width: 60rem) {
  .index-rail { font-size: 0.75rem; padding-right: 0.75rem; }
  .project-caption { gap: 1.5rem; }
  .project-information { max-width: 20rem; }
}

@media (max-width: 47.5rem) {
  :root { --index-edge: 1rem; }
  .index-rail { position: static; width: auto; overflow: visible; display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: 0.875rem var(--index-edge) 0; font-size: 0.8125rem; }
  .rail-mark { grid-column: 1; grid-row: 1; }
  .rail-bottom { grid-column: 2; grid-row: 1; padding: 0; margin: 0; justify-content: center; }
  .rail-note, .rail-description { display: none; }
  .rail-index { grid-column: 1 / -1; padding: 0; }
  .rail-nav { flex-direction: row; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
  .work-index { margin: 0; padding: 3.25rem var(--index-edge) 0; }
  .index-intro { padding-bottom: 1.75rem; }
  .index-intro h1 { max-width: 24ch; font-size: 1.5rem; }
  .index-intro p { font-size: 1.375rem; padding-top: 0.75rem; }
  .listening-media { min-height: 17rem; max-height: none; aspect-ratio: 4 / 3; gap: 2rem; }
  .listening-details { max-width: 24ch; line-height: 1.6; font-size: 0.75rem; }
  .media-caption { flex-wrap: wrap; gap: 0.25rem; }
  .media-caption p { max-width: 36em; }
  .index-section { padding-top: 4rem; }
  .project-selectors { gap: 0.75rem; }
  .gallery-controls { gap: 0.75rem; }
  .gallery-arrows { gap: 0.25rem; }
  .project-caption { flex-direction: column; gap: 1rem; }
  .project-information { max-width: none; text-align: left; }
  .index-footer { padding-top: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .rail-nav[data-index-ready] .rail-marker { transition: none; }
}

@media print {
  .index-rail, .skip-link, .gallery-controls { display: none !important; }
  .work-index { margin: 0; padding: 0; }
  .project-study[hidden] { display: block !important; }
  .project-study { break-inside: avoid; }
}