:root{
  --ink:#12100e;
  --ink-soft:#191512;
  --paper:#eee3d1;
  --copper:#b48149;
  --muted:rgba(238,227,209,.56);
  --line:rgba(238,227,209,.17);
  --content:min(1440px,calc(100vw - 88px));
  --sans:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif:Georgia,"Times New Roman","Songti SC","STSong",serif;
}

*{ box-sizing:border-box; }

html{
  min-width:960px;
  scroll-behavior:smooth;
  background:var(--ink);
}

body{
  margin:0;
  min-width:960px;
  color:var(--paper);
  background:
    radial-gradient(900px 540px at 78% 0,rgba(180,129,73,.12),transparent 72%),
    var(--ink);
  font-family:var(--sans);
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
button,input{ font:inherit; }

.archiveSkip{
  position:fixed;
  top:12px;
  left:12px;
  z-index:100;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(18,16,14,.94);
  transform:translateY(-160%);
  transition:transform .18s ease;
}

.archiveSkip:focus{ transform:none; }

.archiveNav{
  position:absolute;
  top:30px;
  left:50%;
  z-index:20;
  width:var(--content);
  height:44px;
  display:grid;
  grid-template-columns:auto minmax(200px,1fr) auto;
  align-items:center;
  gap:24px;
  transform:translateX(-50%);
}

.archiveNav__back{
  height:42px;
  padding:0 16px 0 13px;
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid rgba(238,227,209,.24);
  border-radius:999px;
  background:rgba(18,16,14,.34);
  box-shadow:0 14px 34px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(16px) saturate(125%);
  -webkit-backdrop-filter:blur(16px) saturate(125%);
  font-size:12px;
  font-weight:750;
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}

.archiveNav__back:hover,
.archiveNav__back:focus-visible{
  border-color:rgba(238,227,209,.50);
  background:rgba(18,16,14,.58);
  outline:none;
  transform:translateX(-2px);
}

.archiveNav__back span:first-child{
  font-size:18px;
  line-height:1;
}

.archiveNav__brand{
  min-width:0;
  display:flex;
  align-items:baseline;
  gap:11px;
}

.archiveNav__brand span{
  font-family:var(--serif);
  font-size:15px;
  letter-spacing:.4px;
}

.archiveNav__brand small{
  color:var(--muted);
  font-size:9px;
  letter-spacing:1.2px;
  text-transform:uppercase;
}

.archiveNav__total{
  display:flex;
  align-items:baseline;
  gap:7px;
  padding-bottom:7px;
  border-bottom:1px solid rgba(238,227,209,.28);
}

.archiveNav__total span{
  font-family:var(--serif);
  font-size:17px;
}

.archiveNav__total small{
  color:var(--muted);
  font-size:9px;
  letter-spacing:1.2px;
}

.archiveHero{
  position:relative;
  min-height:590px;
  height:76vh;
  overflow:hidden;
  isolation:isolate;
}

.archiveHero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-3;
  background:
    linear-gradient(90deg,rgba(9,8,7,.26),transparent 43%,rgba(9,8,7,.34)),
    radial-gradient(720px 440px at 76% 45%,rgba(139,89,48,.18),transparent 70%),
    linear-gradient(135deg,#19130f,#0d0c0b 76%);
}

.archiveHero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,transparent 70%,var(--ink) 100%);
  pointer-events:none;
}

.archiveHero__grid{
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    repeating-linear-gradient(90deg,transparent 0,transparent calc(20% - 1px),rgba(238,227,209,.04) 20%),
    repeating-linear-gradient(0deg,transparent 0,transparent 84px,rgba(238,227,209,.025) 85px);
}

.archiveHero__number{
  position:absolute;
  top:17%;
  right:max(76px,calc((100vw - 1360px) / 2));
  z-index:1;
  display:grid;
  justify-items:end;
}

.archiveHero__number > span{
  color:rgba(238,227,209,.08);
  font-family:var(--serif);
  font-size:clamp(250px,30vw,470px);
  letter-spacing:-22px;
  line-height:.76;
}

.archiveHero__number small{
  margin-top:24px;
  padding-right:16px;
  color:rgba(180,129,73,.62);
  font-size:9px;
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
}

.archiveHero__copy{
  position:absolute;
  left:max(52px,calc((100vw - 1440px) / 2));
  bottom:106px;
  z-index:2;
  width:min(730px,58vw);
}

.archiveEyebrow{
  color:rgba(218,183,126,.75);
  font-size:9px;
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
}

.archiveHero h1{
  margin:17px 0 0;
  font-family:var(--serif);
  font-size:clamp(78px,9vw,138px);
  font-weight:400;
  letter-spacing:-8px;
  line-height:.86;
}

.archiveHero__copy p{
  width:560px;
  margin:31px 0 0;
  color:rgba(238,227,209,.68);
  font-family:var(--serif);
  font-size:15px;
  line-height:1.9;
}

.archiveHero__rooms{
  position:absolute;
  right:max(52px,calc((100vw - 1440px) / 2));
  bottom:52px;
  z-index:3;
  display:flex;
  gap:16px;
  color:rgba(238,227,209,.38);
  font-size:8px;
  font-weight:700;
  letter-spacing:.8px;
}

.archiveCatalogue{
  width:var(--content);
  margin:0 auto;
  padding:100px 0 132px;
}

.archiveCatalogue__head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:64px;
  margin-bottom:40px;
}

.archiveCatalogue__head h2{
  margin:12px 0 0;
  font-family:var(--serif);
  font-size:64px;
  font-weight:400;
  letter-spacing:-3px;
  line-height:1;
}

.archiveSearch{
  width:min(580px,50vw);
  height:52px;
  padding:0 14px 0 18px;
  display:grid;
  grid-template-columns:22px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  border:1px solid rgba(238,227,209,.18);
  background:rgba(238,227,209,.025);
  transition:border-color .18s ease,background .18s ease;
}

.archiveSearch:focus-within{
  border-color:rgba(218,183,126,.52);
  background:rgba(238,227,209,.045);
}

.archiveSearch > span{
  position:relative;
  width:15px;
  height:15px;
  border:1px solid rgba(238,227,209,.52);
  border-radius:50%;
}

.archiveSearch > span::after{
  content:"";
  position:absolute;
  right:-5px;
  bottom:-3px;
  width:7px;
  height:1px;
  background:rgba(238,227,209,.52);
  transform:rotate(45deg);
}

.archiveSearch input{
  min-width:0;
  height:100%;
  border:0;
  color:var(--paper);
  background:transparent;
  outline:none;
  font-family:var(--serif);
  font-size:13px;
}

.archiveSearch input::placeholder{ color:rgba(238,227,209,.35); }

.archiveSearch kbd{
  min-width:23px;
  height:23px;
  display:grid;
  place-items:center;
  border:1px solid rgba(238,227,209,.15);
  border-radius:5px;
  color:rgba(238,227,209,.38);
  background:rgba(238,227,209,.035);
  font-family:var(--sans);
  font-size:9px;
}

.archiveToolbar{
  padding:17px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  border-top:1px solid var(--line);
}

.archiveFilters{
  display:flex;
  align-items:center;
  gap:6px;
}

.archiveFilters button{
  height:34px;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(238,227,209,.13);
  border-radius:999px;
  color:rgba(238,227,209,.50);
  background:transparent;
  cursor:pointer;
  font-size:8px;
  font-weight:700;
  letter-spacing:.5px;
  transition:color .18s ease,border-color .18s ease,background .18s ease;
}

.archiveFilters button small{
  color:rgba(218,183,126,.55);
  font-size:8px;
}

.archiveFilters button:hover,
.archiveFilters button:focus-visible{
  color:var(--paper);
  border-color:rgba(238,227,209,.38);
  outline:none;
}

.archiveFilters button[aria-pressed="true"]{
  color:#181411;
  border-color:var(--paper);
  background:var(--paper);
}

.archiveFilters button[aria-pressed="true"] small{ color:rgba(24,20,17,.58); }

.archiveToolbar > p{
  margin:0;
  color:rgba(238,227,209,.38);
  font-size:8px;
  letter-spacing:1px;
}

.archiveToolbar > p strong{
  color:rgba(218,183,126,.74);
  font-family:var(--serif);
  font-size:14px;
  font-weight:400;
}

.archiveTableHead{
  min-height:38px;
  padding:0 18px;
  display:grid;
  grid-template-columns:60px 130px minmax(340px,1.4fr) minmax(230px,.8fr) 28px;
  align-items:center;
  gap:18px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  color:rgba(238,227,209,.28);
  font-size:7px;
  font-weight:800;
  letter-spacing:1.4px;
  text-transform:uppercase;
}

.archiveResults{
  border-bottom:1px solid var(--line);
}

.archiveResults[hidden]{ display:none; }

.archiveResult{
  min-height:112px;
  padding:16px 18px;
  display:grid;
  grid-template-columns:60px 130px minmax(340px,1.4fr) minmax(230px,.8fr) 28px;
  align-items:center;
  gap:18px;
  border-bottom:1px solid rgba(238,227,209,.10);
  transition:background .18s ease,transform .18s ease;
}

.archiveResult:last-child{ border-bottom:0; }

.archiveResult:hover,
.archiveResult:focus-visible{
  background:
    linear-gradient(90deg,rgba(180,129,73,.10),transparent 58%),
    rgba(238,227,209,.025);
  outline:none;
  transform:translateX(3px);
}

.archiveResult__index{
  color:rgba(238,227,209,.27);
  font-family:var(--serif);
  font-size:13px;
}

.archiveResult__room{
  display:grid;
  gap:7px;
}

.archiveResult__room small{
  color:rgba(218,183,126,.56);
  font-size:8px;
  letter-spacing:1px;
}

.archiveResult__room strong{
  font-family:var(--serif);
  font-size:14px;
  font-weight:400;
}

.archiveResult__work{
  min-width:0;
  display:grid;
  gap:5px;
}

.archiveResult__work > strong{
  overflow:hidden;
  font-family:var(--serif);
  font-size:22px;
  font-weight:400;
  letter-spacing:-.6px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.archiveResult__work > small{
  overflow:hidden;
  color:rgba(238,227,209,.45);
  font-family:var(--serif);
  font-size:10px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.archiveResult__work > em{
  overflow:hidden;
  color:rgba(238,227,209,.36);
  font-family:var(--serif);
  font-size:10px;
  font-style:normal;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.archiveResult__meta{
  min-width:0;
  display:grid;
  gap:7px;
}

.archiveResult__meta strong,
.archiveResult__meta small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.archiveResult__meta strong{
  color:rgba(238,227,209,.66);
  font-family:var(--serif);
  font-size:12px;
  font-weight:400;
}

.archiveResult__meta small{
  color:rgba(238,227,209,.32);
  font-size:8px;
  letter-spacing:.5px;
}

.archiveResult__arrow{
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  border:1px solid rgba(238,227,209,.13);
  border-radius:50%;
  color:rgba(238,227,209,.48);
  font-size:12px;
  transition:border-color .18s ease,color .18s ease,transform .18s ease;
}

.archiveResult:hover .archiveResult__arrow,
.archiveResult:focus-visible .archiveResult__arrow{
  border-color:rgba(238,227,209,.42);
  color:var(--paper);
  transform:translate(2px,-2px);
}

.archiveEmpty{
  min-height:360px;
  padding:60px;
  place-items:center;
  align-content:center;
  border-bottom:1px solid var(--line);
  text-align:center;
}

.archiveEmpty:not([hidden]){ display:grid; }

.archiveEmpty > span{
  color:rgba(238,227,209,.08);
  font-family:var(--serif);
  font-size:104px;
  line-height:.8;
}

.archiveEmpty h3{
  margin:26px 0 0;
  font-family:var(--serif);
  font-size:28px;
  font-weight:400;
}

.archiveEmpty p{
  margin:12px 0 0;
  color:var(--muted);
  font-family:var(--serif);
  font-size:12px;
}

.archiveEmpty button{
  height:34px;
  margin-top:22px;
  padding:0 14px;
  border:1px solid rgba(238,227,209,.18);
  border-radius:999px;
  color:rgba(238,227,209,.68);
  background:transparent;
  cursor:pointer;
  font-size:9px;
}

.archiveEmpty button:hover,
.archiveEmpty button:focus-visible{
  border-color:rgba(238,227,209,.46);
  color:var(--paper);
  outline:none;
}

.archiveFooter{
  width:var(--content);
  margin:0 auto;
  padding:30px 0 46px;
  display:flex;
  align-items:end;
  justify-content:space-between;
  border-top:1px solid rgba(238,227,209,.10);
}

.archiveFooter > div{
  display:grid;
  gap:6px;
}

.archiveFooter strong{
  font-family:var(--serif);
  font-size:16px;
  font-weight:400;
}

.archiveFooter span,
.archiveFooter a{
  color:var(--muted);
  font-size:9px;
  letter-spacing:1px;
}

.archiveFooter a{
  padding-bottom:5px;
  border-bottom:1px solid rgba(238,227,209,.24);
}

@media (max-height:760px){
  .archiveHero__copy{ bottom:80px; }
  .archiveHero__rooms{ bottom:32px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .archiveNav__back,
  .archiveSearch,
  .archiveFilters button,
  .archiveResult,
  .archiveResult__arrow{
    transition:none;
  }
}