/* ==========================================================================
   ARCVAULT AI PTY LTD  /  fonds.css
   Full bleed editorial surface for a dark archive.

   Palette is a single cold steel blue over graphite. There is no second hue
   anywhere in this file, deliberately: an archive that shows you six colours
   is telling you about itself rather than about the records.

   Frank Ruhl Libre carries every heading. Sarabun carries every line of text.
   No monospace anywhere.

   Class names are bare single words with no separator of any kind. Runtime
   state is four more single words, added to the document element or to the
   element concerned by accession.js: .ready .motion .shown .entered. Nothing
   in this file hides content unless one of those is present, which is what
   makes the script safe to fail.
   ========================================================================== */

:root{
  --vault:#0F1418;
  --vaultlift:#161C21;
  --vaultdeep:#0A0E11;
  --ink:#E4E9ED;
  --inkdim:#A7B2BB;
  --inkfaint:#75828C;
  --rule:#232C33;
  --rulestrong:#36414A;
  --steel:#4A7BA8;
  --steellift:#6E9AC2;
  --slate:#8FA9BF;
  --display:"Frank Ruhl Libre",Georgia,"Times New Roman",serif;
  --body:Sarabun,"Helvetica Neue",Arial,sans-serif;
  --wide:78rem;
  --read:46rem;
  --lift:0 18px 44px rgba(4,7,10,0.55);
  --liftsoft:0 10px 26px rgba(4,7,10,0.4);
}

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

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background-color:#0F1418;
  color:var(--ink);
  font-family:var(--body);
  font-size:1rem;
  line-height:1.72;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  line-height:1.16;
  letter-spacing:-0.008em;
  margin:0;
  color:var(--ink);
}

p,ul,ol,dl,dd,figure,blockquote{margin:0}
li{margin:0}
strong{font-weight:700;color:var(--ink)}
em{font-style:italic}
img{max-width:100%;height:auto;display:block}

a{color:var(--steellift);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:0.18em;text-decoration-color:rgba(110,154,194,0.42)}
a:hover{text-decoration-color:var(--steellift)}
a:focus-visible,button:focus-visible{outline:2px solid var(--steellift);outline-offset:3px}

table{border-collapse:collapse;border-spacing:0}

.bypass{
  position:absolute;left:-9999px;top:0;z-index:60;
  background:var(--steellift);color:#0A0E11;
  padding:0.65rem 1.1rem;font-weight:700;font-size:0.82rem;
  letter-spacing:0.06em;text-transform:uppercase;text-decoration:none;
  border-radius:0 0 12px 0;
}
.bypass:focus{left:0}

.measure{
  width:100%;
  max-width:var(--wide);
  margin:0 auto;
  padding-left:1.7rem;
  padding-right:1.7rem;
}

/* --------------------------------------------------------------- header -- */

.accession{
  position:sticky;top:0;z-index:40;
  background:rgba(10,14,17,0.9);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--rule);
}
.accessionrow{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.4rem;min-height:4.4rem;
}
.accessionmark{
  display:inline-flex;align-items:center;
  text-decoration:none;flex:none;
}
.accessionglyph{display:block;height:1.85rem;width:auto}
.accessionnav{display:block}
.accessionlist{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:center;gap:2rem;
}
.accessionlink{
  color:var(--inkdim);text-decoration:none;
  font-size:0.79rem;font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;
}
.accessionlink:hover{color:var(--ink)}
.accessionlink[aria-current="page"]{color:var(--steellift)}
.accessionlatch{
  display:none;
  width:2.7rem;height:2.7rem;
  align-items:center;justify-content:center;
  flex-direction:column;gap:0.34rem;
  background:transparent;border:1px solid var(--rulestrong);
  border-radius:10px;padding:0;cursor:pointer;
}
.accessionslat{display:block;width:1.15rem;height:1px;background:var(--ink)}

/* ------------------------------------------------------------------ hero -- */

.deposit{
  position:relative;
  min-height:min(86vh,44rem);
  display:flex;align-items:flex-end;
  border-bottom:1px solid var(--rule);
  overflow:hidden;
  background:var(--vaultdeep);
}
.depositplate{position:absolute;inset:0}
.depositimage{
  width:100%;height:100%;
  object-fit:cover;object-position:50% 42%;
}
/* The two gradient layers below are not eyeballed. They were composited over
   the decoded hero pixels and the worst case ratio measured across the band
   the text occupies: 8.86:1 for the heading, 7.66:1 for the standfirst and
   6.51:1 for the eyebrow, all clear of 4.5:1. Changing a stop means measuring
   again. */
.depositscrim{
  position:absolute;inset:0;
  background-image:
    linear-gradient(to right,rgba(10,14,17,0.88) 0%,rgba(10,14,17,0.8) 36%,rgba(10,14,17,0.46) 72%,rgba(10,14,17,0.3) 100%),
    linear-gradient(to bottom,rgba(10,14,17,0.4) 0%,rgba(10,14,17,0.22) 42%,rgba(10,14,17,0.66) 100%);
}
.deposit.shallow{min-height:min(58vh,31rem)}
.depositinner{
  position:relative;
  width:100%;
  padding-top:8rem;padding-bottom:4.6rem;
}
.deposittitle{
  font-size:clamp(2.5rem,6.4vw,4.6rem);
  line-height:1.03;
  max-width:17ch;
  margin-bottom:1.7rem;
  text-wrap:balance;
}
.provenance{
  font-size:0.74rem;font-weight:700;letter-spacing:0.24em;
  text-transform:uppercase;color:var(--slate);
  margin-bottom:1.5rem;
}
.abstract{
  font-size:1.14rem;line-height:1.66;color:var(--inkdim);
  max-width:56ch;
}
.deposit .abstract{color:#D2DAE1}
.deposit .provenance{color:#B9CBDA}
.depositacts{display:flex;flex-wrap:wrap;gap:0.9rem;margin-top:2.5rem}

.requisition{
  display:inline-flex;align-items:center;
  padding:0.85rem 1.55rem;
  font-size:0.79rem;font-weight:700;letter-spacing:0.12em;
  text-transform:uppercase;text-decoration:none;
  border-radius:12px;
  background:var(--steellift);color:#0A0E11;
  border:1px solid var(--steellift);
  box-shadow:var(--liftsoft);
}
.requisition:hover{background:#8AB1D2;border-color:#8AB1D2;text-decoration:none}
.requisition.plain{
  background:rgba(15,20,24,0.55);color:var(--ink);
  border:1px solid var(--rulestrong);box-shadow:none;
}
.requisition.plain:hover{border-color:var(--steellift);color:var(--steellift);background:rgba(15,20,24,0.75)}

/* ---------------------------------------------------------------- spreads -- */

.spread{
  border-bottom:1px solid var(--rule);
  padding-top:4.6rem;padding-bottom:4.6rem;
}
.spreadgrid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:3.4rem;
  align-items:center;
}
.spreadfigure{margin:0;min-width:0}
.spreadplate{
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--rule);
  box-shadow:var(--lift);
  background:var(--vaultdeep);
}
.spreadimage{width:100%;height:auto;display:block}
.spreadcaption{
  margin-top:0.9rem;
  font-size:0.82rem;line-height:1.55;color:var(--inkfaint);
  max-width:44ch;
}
.spreadtext{min-width:0;max-width:38rem}
.spreadtext h2{font-size:clamp(1.75rem,3.4vw,2.5rem);margin-bottom:1.2rem}
.spreadtext>*+*{margin-top:1.15rem}
.spreadtext p{color:var(--inkdim)}
.spread.recto .spreadfigure{order:2}
.spread.recto .spreadtext{order:1}
.spread.verso .spreadfigure{order:1}
.spread.verso .spreadtext{order:2;justify-self:end}

/* ---------------------------------------------------------------- fonds -- */

.fonds{border-bottom:1px solid var(--rule);padding-top:4.4rem;padding-bottom:4.4rem}
.fondshead{max-width:60ch;margin-bottom:2.6rem}
.fondstitle{font-size:clamp(1.7rem,3.4vw,2.4rem);margin-bottom:1rem}
.fondsnumber{
  color:var(--steellift);font-family:var(--body);font-weight:700;
  font-size:0.62em;letter-spacing:0.06em;margin-right:0.9rem;
  vertical-align:0.16em;
}
.fondsline{font-size:1.05rem;color:var(--inkdim);max-width:62ch}
.fondsbody{max-width:var(--read);font-size:1rem}
.fondsbody>*+*{margin-top:1.15rem}
.fondsbody h3{font-size:1.18rem;margin-top:2.5rem}
.fondsbody h3:first-child{margin-top:0}
.fondsbody p{color:var(--inkdim)}
.fondsbody ul,.fondsbody ol{padding-left:1.4rem;color:var(--inkdim)}
.fondsbody li+li{margin-top:0.6rem}
.fondsbody ul{list-style:square}
.fondsbody ul li::marker{color:var(--steel)}
.fondsbody ol li::marker{color:var(--steel);font-weight:700}

/* ---------------------------------------------------------- key / value -- */

.schedule{border-top:1px solid var(--rule)}
.series{
  display:grid;grid-template-columns:14.5rem minmax(0,1fr);
  gap:1.2rem;padding:1.05rem 0;
  border-bottom:1px solid var(--rule);
}
.serieskey{
  font-size:0.73rem;font-weight:700;letter-spacing:0.15em;
  text-transform:uppercase;color:var(--inkfaint);
  padding-top:0.28rem;
}
.seriesvalue{color:var(--ink);font-size:0.98rem}

.schedule.strip{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:1.2rem;border-top:0;
}
.schedule.strip .series{
  display:block;border-bottom:0;
  border:1px solid var(--rule);border-radius:14px;
  background:var(--vaultlift);
  padding:1.5rem 1.6rem;
  box-shadow:var(--liftsoft);
}
.schedule.strip .serieskey{padding-top:0;margin-bottom:0.6rem}
.schedule.strip .seriesvalue{
  font-family:var(--display);font-size:1.3rem;line-height:1.28;
}

/* --------------------------------------------------------------- tables -- */

.findingaidscroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--rule);
  border-radius:14px;
  max-width:100%;
  box-shadow:var(--liftsoft);
}
.findingaid{
  width:100%;
  min-width:42rem;
  font-size:0.9rem;
  text-align:left;
}
.findingaid caption{
  text-align:left;
  padding:0.95rem 1.15rem;
  font-size:0.71rem;font-weight:700;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--inkfaint);
  background:var(--vaultdeep);
  border-bottom:1px solid var(--rule);
}
.findingaid th,.findingaid td{
  padding:0.88rem 1.15rem;
  border-bottom:1px solid var(--rule);
  vertical-align:top;
}
.findingaid thead th{
  font-size:0.71rem;font-weight:700;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--slate);
  background:var(--vaultlift);
  white-space:nowrap;
}
.findingaid tbody th{font-weight:600;color:var(--ink)}
.findingaid td{color:var(--inkdim)}
.findingaid td:first-child{color:var(--ink);font-weight:600}
.findingaid tbody tr:last-child th,
.findingaid tbody tr:last-child td{border-bottom:0}

/* ------------------------------------------------------------- callouts -- */

.interleaf{
  border:1px solid var(--rulestrong);
  border-left:3px solid var(--steel);
  border-radius:12px;
  background:var(--vaultlift);
  padding:1.3rem 1.55rem;
}
.interleaf>*+*{margin-top:0.85rem}
.interleaf p{color:var(--ink);font-size:0.97rem}
.interleaflabel{
  display:block;
  font-size:0.7rem;font-weight:700;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--slate);
  margin-bottom:0.7rem;
}
.interleaf.embargo{
  border-left-color:var(--rulestrong);
  background:transparent;
}
.interleaf.embargo p{color:var(--inkdim);font-size:0.95rem}

/* -------------------------------------------------- document furniture -- */

.register{
  display:grid;
  grid-template-columns:16.5rem minmax(0,1fr);
  gap:4rem;
  padding-top:3.4rem;
  padding-bottom:5rem;
  align-items:start;
}
.catalogue{
  position:sticky;top:5.8rem;
  align-self:start;
  max-height:calc(100vh - 8.5rem);
  overflow-y:auto;
  border:1px solid var(--rule);
  border-radius:14px;
  background:var(--vaultlift);
  padding:1.35rem 1.4rem;
}
.cataloguetitle{
  font-size:0.71rem;font-weight:700;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--inkfaint);
  margin-bottom:1rem;
}
.cataloguelist{
  list-style:decimal;
  margin:0;padding-left:1.5rem;
  font-size:0.86rem;
  color:var(--inkfaint);
}
.cataloguelist li{margin-bottom:0.55rem}
.cataloguelist li::marker{color:var(--inkfaint);font-size:0.78rem}
.cataloguelink{
  color:var(--inkdim);text-decoration:none;line-height:1.42;
  display:inline-block;
}
.cataloguelink:hover{color:var(--steellift);text-decoration:underline}

.leaf{min-width:0}

.colophon{border-bottom:1px solid var(--rule);padding-bottom:2.4rem;margin-bottom:0.6rem}
.colophon h1{font-size:clamp(2.05rem,4.6vw,3.1rem);margin-bottom:1.3rem}
.colophon .abstract{font-size:1.06rem}
.colophondates{display:flex;flex-wrap:wrap;gap:0.6rem 0.8rem;margin-top:1.7rem}
.colophondates span{
  font-size:0.7rem;font-weight:700;letter-spacing:0.13em;
  text-transform:uppercase;color:var(--inkfaint);
  border:1px solid var(--rule);border-radius:999px;
  padding:0.42rem 0.9rem;
}

.file{border-bottom:1px solid var(--rule);padding-top:2.9rem;padding-bottom:2.9rem}
.filetitle{
  font-size:clamp(1.3rem,2.5vw,1.72rem);
  margin-bottom:1.5rem;
  display:flex;gap:0.15rem;align-items:baseline;
}
.filenumber{
  color:var(--steellift);font-family:var(--body);font-weight:700;
  font-size:0.6em;letter-spacing:0.06em;margin-right:0.85rem;
}
.filebody{font-size:1rem}
.filebody>*+*{margin-top:1.15rem}
.filebody h3{font-size:1.14rem;margin-top:2.4rem}
.filebody h3:first-child{margin-top:0}
.filebody p{color:var(--inkdim)}
.filebody ul,.filebody ol{padding-left:1.4rem;color:var(--inkdim)}
.filebody li+li{margin-top:0.6rem}
.filebody ul{list-style:square}
.filebody ul li::marker{color:var(--steel)}
.filebody ol li::marker{color:var(--steel);font-weight:700}
.filebody table{margin-top:0.4rem}

/* -------------------------------------------------------------- reveals -- */

.motion .spread,
.motion .fonds{
  opacity:0;
  transform:translateY(14px);
  transition:opacity 0.6s ease,transform 0.6s ease;
}
.motion .spread.entered,
.motion .fonds.entered{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .motion .spread,
  .motion .fonds{opacity:1;transform:none;transition:none}
}

/* --------------------------------------------------------------- footer -- */

.repository{
  background:var(--vaultdeep);
  border-top:1px solid var(--rule);
  padding-top:3.8rem;padding-bottom:2.8rem;
}
.repositorygrid{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr);
  gap:2.8rem;
  padding-bottom:2.6rem;
  border-bottom:1px solid var(--rule);
}
.repositorybrand{min-width:0}
.repositorymark{display:block;margin-bottom:1.1rem}
.repositoryblurb{color:var(--inkfaint);font-size:0.92rem;max-width:38ch}
.repositorytitle{
  font-size:0.71rem;font-weight:700;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--inkfaint);
  margin-bottom:1rem;
}
.repositorycol ul{list-style:none;margin:0;padding:0}
.repositorycol li{margin-bottom:0.6rem}
.repositorycol a{color:var(--inkdim);text-decoration:none;font-size:0.93rem}
.repositorycol a:hover{color:var(--steellift);text-decoration:underline}
.repositorylegal{padding-top:2rem}
.repositorylegal p{color:var(--inkfaint);font-size:0.84rem;margin-bottom:0.5rem}

/* ---------------------------------------------------------- breakpoints -- */

@media (max-width: 64rem){
  .register{grid-template-columns:minmax(0,1fr);gap:2.4rem}
  .catalogue{position:static;max-height:none;overflow:visible}
  .cataloguelist{columns:2;column-gap:2rem}
  .spreadgrid{grid-template-columns:minmax(0,1fr);gap:2.2rem}
  .spread.recto .spreadfigure,
  .spread.verso .spreadfigure{order:1}
  .spread.recto .spreadtext,
  .spread.verso .spreadtext{order:2;justify-self:stretch}
}

@media (max-width: 52rem){
  .measure{padding-left:1.2rem;padding-right:1.2rem}
  .ready .accessionnav{
    display:none;
    position:absolute;left:0;right:0;top:100%;
    background:var(--vaultdeep);
    border-bottom:1px solid var(--rule);
    padding:1rem 1.2rem 1.6rem;
  }
  .ready .accessionnav.shown{display:block}
  .ready .accessionlatch{display:inline-flex}
  .accessionrow{position:relative}
  .accessionlist{flex-direction:column;align-items:flex-start;gap:1.05rem}
  .accessionlink{font-size:0.86rem}
  .deposit{min-height:0}
  .depositinner{padding-top:5.5rem;padding-bottom:3.4rem}
  .depositscrim{
    background-image:
      linear-gradient(to right,rgba(10,14,17,0.9) 0%,rgba(10,14,17,0.86) 100%),
      linear-gradient(to bottom,rgba(10,14,17,0.74) 0%,rgba(10,14,17,0.62) 40%,rgba(10,14,17,0.82) 100%);
  }
  .spread{padding-top:3.2rem;padding-bottom:3.2rem}
  .fonds{padding-top:3.2rem;padding-bottom:3.2rem}
  .series{grid-template-columns:minmax(0,1fr);gap:0.35rem}
  .serieskey{padding-top:0}
  .repositorygrid{grid-template-columns:minmax(0,1fr);gap:2rem}
  .cataloguelist{columns:1}
  .filetitle{display:block}
}

@media (max-width: 34rem){
  .depositacts{flex-direction:column;align-items:stretch}
  .requisition{justify-content:center}
  .deposittitle{font-size:clamp(2rem,9vw,2.7rem)}
}