:root {
  color-scheme: dark;
  --near-black: #030303;
  --archive-black: #090909;
  --paper: #e7e2d5;
  --paper-soft: #cbc6ba;
  --muted: #aaa69d;
  --quiet: #918e87;
  --rule: rgba(231, 226, 213, 0.22);
  --focus: #f2eee2;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Iowan Old Style", Baskerville, Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { min-width: 0; background: var(--near-black); }
body { margin: 0; min-width: 0; color: var(--paper); }
img { display: block; max-width: 100%; }
a { color: inherit; }
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Landing threshold */
body.landing {
  position: relative;
  min-height: 100svh;
  overflow-x: hidden;
  background: var(--near-black);
  font-family: var(--sans);
}

.landing-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--near-black);
  background-image: url("assets/backgrounds/Exnoesis Landing Page Background 1.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.landing-shell {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(3rem, 7svh, 5rem) clamp(1.25rem, 4vw, 4rem);
}

.identity-group {
  width: min(100%, 48rem);
  display: grid;
  justify-items: center;
  text-align: center;
  transform: translateY(clamp(-1.2rem, -2svh, -0.4rem));
}

html.js body:not(.page-ready) .landing-shell { opacity: 0; }
body.page-ready .landing-shell { animation: quiet-appear 320ms ease-out both; }
body.page-leaving .landing-shell { opacity: 0; transition: opacity 280ms ease; }

.symbol-stage {
  width: clamp(18rem, 42vw, 38rem);
  max-width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.landing-symbol {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.site-title {
  margin: clamp(1.25rem, 3svh, 2.25rem) 0 0;
  padding-left: clamp(0.38rem, 1vw, 0.78rem);
  color: #c9c7c1;
  font: 300 clamp(1.15rem, 2.1vw, 1.55rem)/1.2 var(--sans);
  letter-spacing: clamp(0.38rem, 1vw, 0.78rem);
}

.ornament {
  width: 4.7rem;
  height: 0.75rem;
  margin-top: clamp(1.1rem, 2.4svh, 1.75rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  opacity: 0.45;
}

.ornament span { width: 1.55rem; height: 1px; background: #8d8a83; }
.ornament i { width: 0.3rem; height: 0.3rem; border: 1px solid #aaa69e; transform: rotate(45deg); }

.landing-fragment {
  max-width: 40rem;
  margin-top: clamp(1.5rem, 3.2svh, 2.25rem);
  color: #d7d2c6;
  font: italic 400 clamp(0.88rem, 1.15vw, 1rem)/1.65 var(--serif);
}

.landing-fragment p { margin: 0; }
.landing-fragment p + p { margin-top: 0.9rem; }

.fragment-link {
  min-width: 44px;
  min-height: 44px;
  margin-top: clamp(1.25rem, 2.8svh, 2rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #b8b4aa;
  font: 400 0.76rem/1 var(--sans);
  letter-spacing: 0.18em;
  text-decoration: none;
  opacity: 0.82;
}

.fragment-link:hover { opacity: 1; }

.fragment-link:focus-visible,
.artifact-trigger:focus-visible,
.dialog-control:focus-visible,
.metadata-disclosure summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

/* Institutional catalog record */
body.archive {
  min-height: 100svh;
  overflow-x: hidden;
  background: var(--archive-black);
  color: var(--paper);
  font-family: var(--serif);
}

.archive-shell {
  width: min(100%, 96rem);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4.5rem) clamp(1.15rem, 4vw, 4rem) 6rem;
}

.archive-record {
  --archive-metadata-width: 18rem;
  --archive-column-gap: clamp(2.5rem, 6vw, 6rem);
  display: grid;
  grid-template-columns: var(--archive-metadata-width) minmax(0, 1fr);
  grid-template-areas:
    "mark title"
    "body body";
  column-gap: var(--archive-column-gap);
  row-gap: 2rem;
  align-items: start;
}

.archive-body {
  grid-area: body;
  display: flow-root;
  min-width: 0;
}

.archive-primary,
.record-content {
  width: calc(100% - var(--archive-metadata-width) - var(--archive-column-gap));
  min-width: 0;
  float: right;
}

.record-content { clear: right; }

.archive-mark {
  grid-area: mark;
  margin: 0;
  color: #aaa69d;
  font: 500 0.72rem/1.4 var(--sans);
  letter-spacing: 0.23em;
}

.record-title {
  grid-area: title;
  max-width: 52rem;
  margin: -0.18rem 0 0;
  padding-bottom: clamp(1.4rem, 3vw, 2rem);
  border-bottom: 1px solid var(--rule);
  color: #eee9dc;
  font: 400 clamp(2rem, 4vw, 3.8rem)/1.06 var(--serif);
  letter-spacing: -0.018em;
}

.record-metadata {
  margin: 0;
  padding-top: 0.25rem;
  border-top: 1px solid var(--rule);
}

.record-metadata-essential,
.record-metadata-supplementary,
.record-related {
  width: var(--archive-metadata-width);
  float: left;
  clear: left;
}

.record-metadata-essential { grid-area: meta-essential; }
.record-metadata-supplementary {
  grid-area: meta-supplementary;
  align-self: start;
  margin-top: 2rem;
}
.record-related {
  grid-area: related;
  align-self: start;
  margin-top: 2rem;
}
.record-metadata > div { padding: 1rem 0; border-bottom: 1px solid rgba(231, 226, 213, 0.12); }

.record-metadata dt {
  color: #aaa69d;
  font: 500 0.68rem/1.35 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.record-metadata dd {
  margin: 0.34rem 0 0;
  color: #d2cdc0;
  font: 400 0.94rem/1.5 var(--serif);
  overflow-wrap: anywhere;
}

.metadata-disclosure { margin: 0; }

.metadata-disclosure summary {
  min-height: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.6rem;
  align-items: center;
  gap: 0.75rem;
  padding: 0.18rem 0;
  cursor: pointer;
  list-style: none;
}

.metadata-disclosure summary::-webkit-details-marker { display: none; }
.metadata-disclosure summary::after {
  content: "+";
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(231, 226, 213, 0.38);
  color: #d0ccc2;
  font: 400 1rem/1 var(--sans);
}

.metadata-disclosure[open] summary::after { content: "−"; }

.metadata-annotation {
  margin: 0.65rem 0 0 1.15rem;
  padding-left: 0.9rem;
  border-left: 1px solid rgba(231, 226, 213, 0.24);
}

.metadata-annotation p {
  margin: 0;
  color: #bdb8ac;
  font: 400 0.9rem/1.62 var(--serif);
}

.artifact-region { min-width: 0; margin: 0; }
.artifact-trigger { display: block; min-height: 44px; text-decoration: none; }

.artifact-surface {
  min-height: 12rem;
  display: grid;
  place-items: center;
  padding: clamp(0.65rem, 1.5vw, 1.2rem);
  background: #11110f;
  border: 1px solid rgba(231, 226, 213, 0.12);
}

.artifact-surface img {
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

.artifact-region figcaption,
.dialog-caption {
  margin-top: 0.85rem;
  color: #aaa69d;
  font: 400 0.9rem/1.5 var(--serif);
}

.artifact-toolbar {
  min-height: 3.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.7rem 0.55rem 1rem;
  border: 1px solid rgba(231, 226, 213, 0.14);
  border-top: 0;
  background: #0d0d0c;
  font-family: var(--sans);
}

.artifact-position {
  margin: 0;
  color: #aaa69d;
  font: 500 0.7rem/1.4 var(--sans);
  letter-spacing: 0.08em;
}

.artifact-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
}

.artifact-control {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.72rem;
  border: 1px solid rgba(231, 226, 213, 0.26);
  color: #d4cfc3;
  font: 500 0.69rem/1 var(--sans);
  letter-spacing: 0.05em;
  text-decoration: none;
}

.artifact-control[href] { cursor: pointer; }
.artifact-control[href]:hover { border-color: rgba(231, 226, 213, 0.52); color: #f0ecdf; }
.artifact-sequence-link[aria-disabled="true"] { opacity: 0.34; cursor: not-allowed; }

.artifact-failure {
  margin: 0;
  padding: 1.5rem;
  border: 1px solid var(--rule);
  color: #c9c4b8;
  font: 500 0.86rem/1.5 var(--sans);
}

.record-content {
  max-width: none;
  padding-top: clamp(0.75rem, 2vw, 1.5rem);
}

.record-content > * { max-width: 72ch; }

.record-content h2 {
  margin: 2.4rem 0 1rem;
  color: #e8e3d6;
  font: 400 clamp(1.45rem, 2.2vw, 2rem)/1.25 var(--serif);
}

.record-content h2:first-child { margin-top: 0; }

.record-content p,
.record-content li {
  color: #d0cbbf;
  font: 400 clamp(1rem, 1.25vw, 1.125rem)/1.68 var(--serif);
}

.record-content p { margin: 0 0 1.2rem; }
.record-content ul,
.record-content ol { margin: 0 0 1.5rem; padding-left: 1.4rem; }
.record-content li + li { margin-top: 0.48rem; }

.staff-storage code {
  color: #e6e1d5;
  font: 500 0.82rem/1.5 var(--sans);
  letter-spacing: 0.08em;
}

.related-item-card {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
  padding: 0.65rem;
  border: 1px solid rgba(231, 226, 213, 0.16);
  background: #0d0d0c;
  color: inherit;
  text-decoration: none;
}

.related-item-card + .related-item-card { margin-top: 0.55rem; }

.related-item-card img {
  width: 4.25rem;
  height: 5.65rem;
  object-fit: contain;
  background: #11110f;
}

.related-item-title {
  margin: 0;
  color: #ded9cc;
  font: 400 0.9rem/1.35 var(--serif);
}

.related-item-status {
  margin: 0.38rem 0 0;
  color: #8f8b82;
  font: 500 0.62rem/1.4 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.related-item-card[href] { cursor: pointer; }
.related-item-card[href]:hover { border-color: rgba(231, 226, 213, 0.4); }
.related-item-card[href]:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

.access-denial-trigger {
  width: 100%;
  margin: 0;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.access-denial-trigger:hover { border-color: rgba(163, 62, 62, 0.68); }
.access-denial-trigger:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

.record-failure { max-width: 36rem; }
.record-failure .archive-mark { margin-bottom: 2.5rem; }
.record-failure h1 { margin: 0; color: #ded9cc; font: 400 clamp(1.8rem, 4vw, 3rem)/1.2 var(--serif); }

.artifact-dialog {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #080808;
  color: var(--paper);
}

.artifact-dialog::backdrop { background: rgba(0, 0, 0, 0.92); }

.dialog-panel {
  min-height: 100%;
  padding: 0 clamp(1rem, 3vw, 2.5rem) 2rem;
  display: flex;
  flex-direction: column;
}

.dialog-controls {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 0;
  background: #080808;
}

.dialog-control {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 0.9rem;
  border: 1px solid rgba(231, 226, 213, 0.34);
  border-radius: 0;
  background: #11110f;
  color: #e5e0d4;
  font: 500 0.76rem/1 var(--sans);
  letter-spacing: 0.07em;
  text-decoration: none;
  cursor: pointer;
}

.dialog-image-wrap {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
}

.dialog-image-wrap img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100dvh - 7rem);
  object-fit: contain;
}

.dialog-caption {
  flex: 0 0 auto;
  margin: 0.75rem auto 0;
  max-width: 72ch;
  text-align: center;
}

body.dialog-open { overflow: hidden; }

.access-denial-dialog {
  width: min(calc(100% - 2rem), 35rem);
  max-width: none;
  margin: auto;
  padding: 0;
  border: 1px solid rgba(177, 66, 66, 0.76);
  background: #090909;
  color: var(--paper);
}

.access-denial-dialog::backdrop { background: rgba(0, 0, 0, 0.88); }

.access-denial-panel { padding: clamp(1.35rem, 4vw, 2.4rem); }

.access-denial-band {
  margin: calc(clamp(1.35rem, 4vw, 2.4rem) * -1) calc(clamp(1.35rem, 4vw, 2.4rem) * -1) 1.6rem;
  padding: 0.85rem clamp(1.35rem, 4vw, 2.4rem);
  background: #641d1d;
  color: #f0e8dc;
  font: 500 0.72rem/1.35 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.access-denial-code {
  margin: 0;
  color: #a9a49a;
  font: 500 0.64rem/1.4 var(--sans);
  letter-spacing: 0.12em;
}

.access-denial-dialog h2 {
  margin: 0.85rem 0 1.1rem;
  color: #eee8db;
  font: 400 clamp(1.7rem, 5vw, 2.45rem)/1.08 var(--serif);
}

.access-denial-dialog p:not(.access-denial-band):not(.access-denial-code) {
  color: #cfc9bd;
  font: 400 1rem/1.58 var(--serif);
}

.access-denial-alert {
  margin: 1.25rem 0;
  padding: 0.8rem 0.9rem;
  border-left: 3px solid #a33e3e;
  background: rgba(100, 29, 29, 0.18);
  color: #e9d8ce !important;
  font-style: italic !important;
}

.access-denial-log {
  margin: 1.35rem 0;
  padding: 0;
  border-top: 1px solid rgba(231, 226, 213, 0.18);
}

.access-denial-log > div {
  display: grid;
  grid-template-columns: minmax(5.5rem, 0.7fr) minmax(0, 1fr);
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(231, 226, 213, 0.12);
}

.access-denial-log dt {
  color: #99958d;
  font: 500 0.66rem/1.4 var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.access-denial-log dd {
  margin: 0;
  color: #d4cec2;
  font: 500 0.75rem/1.4 var(--sans);
  letter-spacing: 0.05em;
}

.access-denial-acknowledge {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(177, 66, 66, 0.66);
  background: #15100f;
  color: #e9e1d5;
  font: 500 0.74rem/1 var(--sans);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
}

.access-denial-acknowledge:hover { background: #211413; }
.access-denial-acknowledge:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

body.access-denied {
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at center, rgba(92, 16, 16, 0.12), transparent 46%),
    #030303;
  color: #eee8db;
}

.access-denied-shell {
  width: min(calc(100% - 3rem), 52rem);
  padding: clamp(2rem, 7vw, 5rem);
  border-block: 1px solid rgba(177, 66, 66, 0.66);
  text-align: center;
}

.access-denied-shell .access-denial-code {
  margin: 0 0 clamp(2rem, 6vw, 4rem);
  color: #79746c;
}

.access-denied-title {
  margin: 0;
  color: #b14242;
  font: 500 clamp(3.2rem, 13vw, 9rem)/0.88 var(--sans);
  letter-spacing: 0.04em;
}

.access-denied-message {
  margin: clamp(2rem, 6vw, 4rem) 0 0;
  color: #aba49a;
  font: 400 clamp(0.85rem, 2vw, 1rem)/1.5 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@keyframes quiet-appear {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (min-width: 60rem) {
  .record-title {
    font-size: clamp(1.7rem, 2.5vw, 2.5rem);
  }

  .artifact-surface img {
    max-height: min(72vh, 48rem);
  }
}

@media (max-width: 59.99rem) {
  .archive-shell { padding-top: 2rem; }

  .archive-record {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "mark"
      "title"
      "body";
    row-gap: 1.75rem;
  }

  .archive-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "meta-essential"
      "primary"
      "meta-supplementary"
      "record-content"
      "related";
    row-gap: 1.75rem;
  }

  .archive-primary,
  .record-content {
    width: auto;
    float: none;
    clear: none;
  }

  .archive-primary {
    grid-area: primary;
  }

  .record-content {
    grid-area: record-content;
    padding-top: 0;
  }

  .record-metadata-essential,
  .record-metadata-supplementary,
  .record-related {
    width: auto;
    float: none;
    clear: none;
    margin-top: 0;
  }

  .record-title { margin-top: 0; }
  .record-metadata { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; }
  .record-related { grid-template-columns: minmax(0, 1fr); }
  .record-metadata > div { min-width: 0; }
}

@media (max-width: 38rem) {
  .landing-shell {
    place-items: start center;
    padding-top: clamp(2.75rem, 8svh, 4.5rem);
    padding-bottom: 3.5rem;
  }

  .identity-group { transform: none; }
  .symbol-stage { width: min(82vw, 24rem); max-height: 42svh; }

  .site-title {
    margin-top: clamp(1.4rem, 4svh, 2.25rem);
    padding-left: clamp(0.3rem, 2.7vw, 0.58rem);
    font-size: clamp(1rem, 5.4vw, 1.32rem);
    letter-spacing: clamp(0.3rem, 2.7vw, 0.58rem);
  }

  .landing-fragment { margin-top: 1.8rem; font-size: 0.94rem; }
  .fragment-link { margin-top: 1.45rem; }
  .record-metadata { grid-template-columns: minmax(0, 1fr); }
  .archive-shell { padding-left: 1.1rem; padding-right: 1.1rem; }
  .artifact-surface { padding: 0.5rem; }
  .artifact-toolbar { align-items: flex-start; flex-direction: column; padding: 0.8rem; }
  .artifact-actions { width: 100%; justify-content: stretch; }
  .artifact-control { flex: 1 1 auto; }
  .dialog-controls { justify-content: stretch; }
  .dialog-control { flex: 1 1 auto; }
}

@media (max-height: 44rem) and (orientation: landscape) {
  .landing-shell {
    place-items: start center;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .identity-group { transform: none; }
  .symbol-stage { width: min(46vw, 18rem); max-height: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  html.js body:not(.page-ready) .landing-shell { opacity: 1; }
}
