:root {
  --ink: #1a1c17;
  --forest: #18251b;
  --forest-2: #293b2b;
  --forest-3: #3f5940;
  --paper: #e4d5ae;
  --paper-light: #f0e5c8;
  --paper-dark: #bea879;
  --folder: #c9ae6d;
  --folder-dark: #9f8449;
  --burgundy: #6a2821;
  --gold: #b48c46;
  --muted: #73684f;
  --line: rgba(37, 35, 25, 0.38);
  --shadow: 0 20px 60px rgba(4, 8, 5, 0.42);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(rgba(17, 29, 19, 0.94), rgba(17, 29, 19, 0.96)),
    repeating-linear-gradient(87deg, transparent 0 15px, rgba(255,255,255,.018) 15px 17px),
    #152218;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  color: var(--paper-light);
  background: var(--ink);
  white-space: nowrap;
}

.skip-link:focus { top: 1rem; left: 1rem; width: auto; height: auto; padding: .8rem 1rem; clip: auto; clip-path: none; }
.shell { width: min(1320px, calc(100% - 44px)); margin-inline: auto; }

.topbar {
  border-top: 5px solid var(--gold);
  border-bottom: 1px solid rgba(228, 213, 174, .2);
  color: var(--paper-light);
  background: rgba(12, 19, 14, .86);
}

.topbar-inner { display: flex; align-items: center; justify-content: space-between; min-height: 84px; }
.brand { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; }
.brand-seal {
  display: grid;
  place-items: center;
  width: 48px;
  aspect-ratio: 1;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--forest);
  background: var(--paper);
  box-shadow: inset 0 0 0 4px var(--forest-2);
  font-size: .8rem;
  font-weight: 900;
}

.brand strong, .brand small { display: block; }
.brand strong { font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; }
.brand small, .service-links a, .kicker, .classification, .contract-label, .copy-button,
.card-code, .card-copy small, .file-meta, .record-details dt, .record-details dd,
.record-photo span, .folder-tab, .archive-code, .archive-title > p, footer {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.brand small { color: #a99871; font-size: .56rem; }

.service-links { display: flex; gap: .5rem; }
.service-links a {
  padding: .65rem .82rem;
  border: 1px solid rgba(228, 213, 174, .38);
  font-size: .62rem;
  text-decoration: none;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.service-links a:hover, .service-links a:focus-visible { color: var(--forest); border-color: var(--paper-light); background: var(--paper-light); }

.archive-heading {
  position: relative;
  display: grid;
  grid-template-columns: 170px 1fr 150px;
  gap: 2rem;
  align-items: center;
  min-height: 285px;
  color: var(--paper-light);
  border-bottom: 1px solid rgba(228, 213, 174, .25);
}

.archive-code { display: grid; color: #ae9c76; font-size: .58rem; line-height: 1.6; }
.archive-code strong { color: var(--paper-light); font-family: "Courier New", monospace; font-size: 1.2rem; }
.archive-title { text-align: center; }
.archive-title > p { margin: 0 0 .6rem; color: #b5a27b; font-size: .58rem; }
.archive-title h1 { margin: 0; font-size: clamp(3.7rem, 8vw, 8.2rem); line-height: .87; letter-spacing: -.07em; text-transform: uppercase; }
.archive-title h1 em { display: block; margin-top: .8rem; color: var(--gold); font-family: Arial, Helvetica, sans-serif; font-size: .14em; font-style: normal; letter-spacing: .32em; }
.classification { display: flex; justify-content: center; flex-wrap: wrap; gap: .55rem; margin-top: 1.2rem; font-size: .52rem; }
.classification span { padding: .38rem .58rem; border: 1px solid rgba(228, 213, 174, .24); }

.fingerprint { position: relative; width: 118px; height: 145px; opacity: .34; transform: rotate(8deg); }
.fingerprint span { position: absolute; inset: 12px; border: 2px solid var(--paper-dark); border-radius: 48% 48% 45% 45%; }
.fingerprint span:nth-child(2) { inset: 23px; }
.fingerprint span:nth-child(3) { inset: 35px; }
.fingerprint span:nth-child(4) { inset: 47px; }
.fingerprint span:nth-child(5) { inset: 59px; }

.origin-file {
  position: relative;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) minmax(260px, 340px);
  gap: 2rem;
  align-items: center;
  margin: 4rem 0 5.5rem;
  padding: clamp(2rem, 5vw, 4rem);
  background: repeating-linear-gradient(0deg, transparent 0 31px, rgba(53, 64, 48, .09) 31px 32px), var(--paper-light);
  box-shadow: var(--shadow), 10px 10px 0 var(--folder-dark);
  transform: rotate(-.3deg);
}

.paperclip { position: absolute; top: -24px; left: 34px; width: 34px; height: 94px; border: 5px solid #817c6c; border-bottom: 0; border-radius: 18px 18px 0 0; transform: rotate(5deg); opacity: .8; }
.origin-number { color: rgba(106, 40, 33, .28); font-family: Arial, Helvetica, sans-serif; font-size: 4rem; font-weight: 900; }
.kicker { margin: 0 0 .55rem; color: var(--burgundy); font-size: .6rem; }
.origin-copy h2, .records-header h2, .family-code h2, .archive-exit h2 { margin: 0; font-size: clamp(2.4rem, 5vw, 5.2rem); line-height: .95; letter-spacing: -.05em; }
.type-columns { columns: 2 230px; column-gap: 2rem; margin-top: 1.3rem; }
.type-columns p { margin-top: 0; }

.contract-card { padding: 1.2rem; border: 2px solid var(--ink); background: rgba(228, 213, 174, .7); transform: rotate(1deg); }
.contract-label { display: block; color: var(--muted); font-size: .54rem; }
.ca-value { display: block; margin: .2rem 0 1rem; overflow: hidden; font-family: "Courier New", monospace; font-size: 1.15rem; text-overflow: ellipsis; white-space: nowrap; }
.copy-button { display: flex; align-items: center; justify-content: center; gap: .55rem; width: 100%; padding: .8rem; border: 0; color: var(--paper-light); background: var(--burgundy); font-size: .62rem; cursor: pointer; }
.copy-button:hover, .copy-button:focus-visible { background: var(--forest-2); }
.copy-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.copy-status { display: block; min-height: 1em; margin-top: .5rem; color: var(--forest-3); font-family: Arial, Helvetica, sans-serif; font-size: .6rem; font-weight: 700; text-align: center; }

.records { margin-bottom: 7rem; }
.records-header { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 3.5rem; color: var(--paper-light); }
.records-header h2 { font-size: clamp(3rem, 6vw, 6rem); }
.records-header > p { max-width: 26ch; margin: 0 0 .5rem; color: #aa9c7e; font-style: italic; }

.catalog { display: grid; grid-template-columns: minmax(250px, 340px) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.card-stack { display: flex; flex-direction: column; padding: 1.4rem 1.1rem 2rem; border: 10px solid #513222; background: linear-gradient(90deg, #7b5134, #3d281d 8%, #5a3927 92%, #2c1d16); box-shadow: var(--shadow); }

.index-card {
  position: relative;
  display: grid;
  grid-template-columns: 42px 58px 1fr 20px;
  gap: .7rem;
  align-items: center;
  width: 100%;
  min-height: 92px;
  margin: 0 0 -10px;
  padding: .85rem .75rem 1.15rem;
  border: 1px solid #9d895f;
  color: var(--ink);
  background: repeating-linear-gradient(0deg, transparent 0 21px, rgba(52, 65, 47, .1) 21px 22px), var(--paper);
  box-shadow: 0 -3px 9px rgba(18, 11, 7, .22);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.index-card:nth-child(even) { transform: translateX(5px) rotate(.3deg); }
.index-card:nth-child(odd) { transform: translateX(-3px) rotate(-.25deg); }
.index-card:hover { transform: translateX(10px); z-index: 2; }
.index-card.is-active { z-index: 3; background: var(--paper-light); box-shadow: -7px 7px 0 var(--gold); transform: translateX(16px); }
.card-code { color: var(--burgundy); font-size: .62rem; }
.index-card img { width: 58px; height: 62px; border: 1px solid #4d483a; object-fit: cover; filter: sepia(.12) saturate(.85); }
.card-copy strong, .card-copy small { display: block; }
.card-copy strong { font-size: 1rem; line-height: 1.05; }
.card-copy small { margin-top: .3rem; color: var(--muted); font-size: .5rem; }
.card-arrow { font-family: Arial, Helvetica, sans-serif; font-weight: 900; }

.file-stage { position: sticky; top: 1.5rem; min-width: 0; }
.record-file {
  position: relative;
  display: grid;
  grid-template-columns: minmax(290px, .85fr) minmax(0, 1.15fr);
  min-height: 760px;
  margin-top: 35px;
  padding: 1.25rem;
  background: var(--folder);
  box-shadow: var(--shadow), 11px 11px 0 #7f6635;
}
.record-file[hidden] { display: none; }
.folder-tab { position: absolute; top: -35px; left: 0; min-width: 190px; height: 38px; padding: .7rem 1rem; color: #3e3320; background: var(--folder); font-size: .55rem; border-radius: 9px 20px 0 0; }
.record-photo { position: relative; overflow: hidden; background: #141711; }
.record-photo::before, .record-photo::after { content: ""; position: absolute; z-index: 2; width: 34px; height: 10px; background: rgba(233, 222, 188, .72); transform: rotate(-42deg); }
.record-photo::before { top: 10px; left: -6px; }
.record-photo::after { right: -6px; bottom: 14px; }
.record-photo img { width: 100%; height: 100%; min-height: 730px; object-fit: cover; object-position: center; filter: saturate(.86) contrast(1.03) sepia(.05); }
.record-photo.landscape-photo img { object-position: center; }
.record-photo span { position: absolute; right: .75rem; bottom: .65rem; left: .75rem; z-index: 3; padding: .6rem .7rem; color: var(--paper-light); background: rgba(12, 16, 12, .76); font-size: .49rem; }

.record-details {
  position: relative;
  padding: clamp(2rem, 5vw, 4.5rem);
  background: repeating-linear-gradient(0deg, transparent 0 29px, rgba(55, 70, 49, .1) 29px 30px), var(--paper-light);
  overflow: hidden;
}
.file-meta { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 2.8rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .53rem; }
.record-details h3 { max-width: 12ch; margin: 0; font-size: clamp(2.8rem, 5vw, 5.5rem); line-height: .88; letter-spacing: -.055em; }
.alias { margin: .8rem 0 1.8rem; color: var(--burgundy); font-size: 1.05rem; font-style: italic; font-weight: 700; }
.record-details dl { margin: 0 0 1.8rem; border-top: 1px solid var(--line); }
.record-details dl div { display: grid; grid-template-columns: 120px 1fr; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--line); }
.record-details dt, .record-details dd { margin: 0; font-size: .54rem; }
.record-details dt { color: var(--muted); }
.record-story { max-width: 52ch; }
.record-details blockquote { margin: 1.8rem 0 0; padding: 1rem 0 0; border-top: 2px solid var(--burgundy); color: var(--burgundy); font-size: 1.3rem; font-style: italic; font-weight: 700; }
.stamp { position: absolute; right: 1.2rem; bottom: 1.2rem; display: grid; place-items: center; width: 108px; aspect-ratio: 1; border: 5px double rgba(106, 40, 33, .46); border-radius: 50%; color: rgba(106, 40, 33, .5); font-family: Arial, Helvetica, sans-serif; font-size: .62rem; font-weight: 900; letter-spacing: .08em; line-height: 1.2; text-align: center; text-transform: uppercase; transform: rotate(-13deg); }

.family-code { display: grid; grid-template-columns: .62fr 1.38fr; gap: 3rem; margin: 0 0 6rem; padding: clamp(2rem, 5vw, 4rem); color: var(--ink); background: var(--paper-light); box-shadow: var(--shadow); }
.family-code h2 { font-size: clamp(2.8rem, 5vw, 5rem); }
.family-code ol { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.family-code li { display: grid; grid-template-columns: 42px 1fr; column-gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.family-code li:last-child { border-bottom: 0; }
.family-code li span { grid-row: 1 / 3; color: var(--burgundy); font-family: Arial, Helvetica, sans-serif; font-size: .62rem; font-weight: 900; }
.family-code li strong { font-size: 1.35rem; }
.family-code li small { color: var(--muted); }

.archive-exit { display: grid; grid-template-columns: 1.2fr .8fr; gap: 3rem; align-items: end; margin-bottom: 6rem; padding: clamp(2rem, 5vw, 4rem); color: var(--paper-light); border: 1px solid rgba(228,213,174,.28); background: linear-gradient(135deg, #2d432f, #172219); box-shadow: var(--shadow); }
.archive-exit h2 { max-width: 12ch; font-size: clamp(3rem, 6vw, 6rem); }
.archive-exit > div > p:last-child { color: #b5ab8e; }
.archive-exit nav { display: grid; gap: .7rem; }
.archive-exit nav a { display: flex; justify-content: space-between; padding: .9rem 1rem; border: 1px solid rgba(228,213,174,.38); font-family: Arial, Helvetica, sans-serif; font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.archive-exit nav a:hover, .archive-exit nav a:focus-visible { color: var(--forest); background: var(--paper-light); }

footer { color: #a99c7c; border-top: 1px solid rgba(228,213,174,.18); background: #0d140f; font-size: .58rem; }
.footer-inner { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; min-height: 130px; }
.footer-inner p { text-align: center; }
.footer-inner a { justify-self: end; }
.toast { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1000; padding: .8rem 1rem; color: var(--forest); background: var(--paper-light); box-shadow: 4px 4px 0 var(--burgundy); font-family: Arial, Helvetica, sans-serif; font-size: .65rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 160ms ease, transform 160ms ease; }
.toast.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1050px) {
  .archive-heading { grid-template-columns: 120px 1fr; }
  .fingerprint { display: none; }
  .origin-file { grid-template-columns: 70px 1fr; }
  .contract-card { grid-column: 2; width: min(100%, 420px); }
  .catalog { grid-template-columns: 1fr; }
  .card-stack { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
  .index-card, .index-card:nth-child(even), .index-card:nth-child(odd), .index-card.is-active { grid-template-columns: 34px 52px 1fr; margin: 0; transform: none; }
  .index-card.is-active { box-shadow: inset 0 -5px 0 var(--burgundy); }
  .card-arrow { display: none; }
  .file-stage { position: relative; top: auto; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .shell { width: min(100% - 24px, 1320px); }
  .brand small { display: none; }
  .service-links a { padding: .55rem .62rem; }
  .archive-heading { grid-template-columns: 1fr; gap: 1.4rem; min-height: 320px; padding: 2.5rem 0; }
  .archive-code { display: flex; justify-content: center; gap: .6rem; }
  .archive-code small { display: none; }
  .archive-title h1 { font-size: clamp(3.4rem, 18vw, 5.8rem); }
  .classification { gap: .35rem; }
  .origin-file { grid-template-columns: 1fr; gap: 1.3rem; margin-top: 3rem; padding: 2rem 1.25rem; }
  .origin-number { display: none; }
  .contract-card { grid-column: 1; }
  .type-columns { columns: 1; }
  .records-header { align-items: start; flex-direction: column; margin-bottom: 2rem; }
  .card-stack { display: flex; flex-direction: row; gap: .55rem; padding: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; }
  .index-card, .index-card:nth-child(even), .index-card:nth-child(odd), .index-card.is-active { grid-template-columns: 44px 1fr; flex: 0 0 190px; min-height: 112px; padding: .65rem; scroll-snap-align: start; }
  .index-card img { width: 44px; height: 56px; }
  .card-code { grid-column: 1; grid-row: 2; }
  .card-copy { grid-row: 1 / 3; }
  .record-file { grid-template-columns: 1fr; min-height: 0; margin-top: 30px; padding: .65rem; }
  .record-photo img { min-height: 0; max-height: 620px; aspect-ratio: 4 / 5; object-fit: cover; }
  .record-photo.landscape-photo img { aspect-ratio: 1; }
  .record-details { padding: 2rem 1.1rem 6rem; }
  .record-details h3 { font-size: clamp(2.65rem, 14vw, 4rem); }
  .file-meta { margin-bottom: 2rem; }
  .record-details dl div { grid-template-columns: 92px 1fr; }
  .family-code { grid-template-columns: 1fr; padding: 2rem 1.2rem; }
  .archive-exit { grid-template-columns: 1fr; padding: 2rem 1.2rem; }
  .footer-inner { grid-template-columns: 1fr; gap: .5rem; padding: 1.8rem 0; text-align: center; }
  .footer-inner a { justify-self: center; }
}

@media (max-width: 430px) {
  .brand strong { font-size: .85rem; }
  .service-links a span { display: none; }
  .archive-title h1 { font-size: 3.5rem; }
  .classification span:nth-child(2) { display: none; }
  .record-details blockquote { font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}