body.documents-open { overflow: hidden; }

.documents-section {
  position: relative;
  overflow: hidden;
  padding: clamp(118px, 15vh, 190px) 0 clamp(112px, 14vh, 174px);
  background: #0c1713;
  color: #f6f0e1;
}
.documents-section::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(116deg, rgba(4, 14, 11, .96), rgba(14, 35, 27, .87) 49%, rgba(7, 19, 15, .96)), url("../assets/gold-menu-footer.png") center / cover no-repeat;
  content: "";
  opacity: .44;
}
.documents-section::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(237, 208, 143, .032) 1px, transparent 1px), linear-gradient(rgba(237, 208, 143, .028) 1px, transparent 1px), radial-gradient(circle at 17% 15%, rgba(218, 181, 105, .15), transparent 20%), radial-gradient(circle at 88% 83%, rgba(118, 163, 132, .12), transparent 28%);
  background-size: 54px 54px, 54px 54px, 100% 100%, 100% 100%;
  content: "";
  pointer-events: none;
}
.documents-inner { position: relative; z-index: 1; width: min(1310px, calc(100% - 12vw)); margin: 0 auto; }
.documents-header { display: grid; grid-template-columns: minmax(0, .96fr) minmax(285px, .48fr); gap: clamp(26px, 8vw, 142px); align-items: end; max-width: 1150px; }
.documents-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 19px; color: rgba(244, 215, 154, .9); font-size: 10px; font-weight: 600; letter-spacing: .21em; }
.documents-eyebrow > span:first-child { display: grid; width: 28px; height: 20px; place-items: center; border: 1px solid rgba(239, 203, 127, .74); color: #f0d38b; font-size: 9px; }
.documents-title { margin: 0; color: #fff7e8; font-family: "Songti TC", "STSong", "Noto Serif TC", Georgia, serif; font-size: clamp(43px, 5.15vw, 82px); font-weight: 500; letter-spacing: .07em; line-height: 1.12; }
.documents-title-line { display: block; overflow: hidden; padding-bottom: .08em; }
.documents-title-line > span { display: block; opacity: 0; transform: translateY(108%); transition: transform 840ms cubic-bezier(.16,1,.3,1), opacity 520ms ease; }
.documents-section.is-visible .documents-title-line > span { opacity: 1; transform: none; }
.documents-section.is-visible .documents-title-line + .documents-title-line > span { transition-delay: 120ms; }
.documents-intro { max-width: 390px; margin: 0 0 6px; color: rgba(225, 235, 222, .76); font-size: 13px; font-weight: 300; letter-spacing: .045em; line-height: 1.92; }

.documents-archive { margin-top: clamp(64px, 9.4vh, 118px); }
.documents-topline { display: flex; align-items: center; gap: 13px; margin: 0 0 18px; color: rgba(239, 212, 154, .72); font-size: 9px; font-weight: 600; letter-spacing: .2em; }
.documents-topline::before { width: 46px; height: 1px; background: #dfbd78; content: ""; }
.documents-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.document-drawer {
  position: relative;
  display: flex;
  min-height: 352px;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: clamp(27px, 3.1vw, 43px);
  border: 1px solid rgba(230, 199, 130, .44);
  background: linear-gradient(135deg, rgba(30, 57, 45, .74), rgba(8, 20, 16, .94));
  box-shadow: 0 21px 48px rgba(0, 0, 0, .13), inset 0 1px rgba(255, 255, 255, .04);
  color: inherit;
  text-decoration: none;
  opacity: 0;
  transform: translate3d(var(--drawer-x, 0), 36px, -32px);
  transition: transform 780ms cubic-bezier(.16,1,.3,1), opacity 580ms ease, border-color 240ms ease, background 240ms ease, box-shadow 240ms ease;
}
.document-drawer:nth-child(1) { --drawer-x: -18px; }
.document-drawer:nth-child(2) { --drawer-x: 18px; }
.document-drawer:nth-child(3) { --drawer-x: -11px; }
.document-drawer:nth-child(4) { --drawer-x: 11px; }
.documents-section.is-visible .document-drawer { opacity: 1; transform: translate3d(0, 0, 0); }
.documents-section.is-visible .document-drawer:nth-child(2) { transition-delay: 140ms; }
.documents-section.is-visible .document-drawer:nth-child(3) { transition-delay: 280ms; }
.documents-section.is-visible .document-drawer:nth-child(4) { transition-delay: 420ms; }
.document-drawer::before { position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: linear-gradient(#e9c984, rgba(209, 165, 87, .12) 58%, transparent); content: ""; opacity: .87; }
.document-drawer::after { position: absolute; right: -18%; bottom: -43%; width: 61%; aspect-ratio: 1; border: 1px solid rgba(232, 205, 145, .1); border-radius: 50%; box-shadow: 0 0 0 21px rgba(232, 205, 145, .026), 0 0 0 43px rgba(232, 205, 145, .017); content: ""; transition: transform .68s cubic-bezier(.16,1,.3,1), border-color .3s ease; }
.document-drawer:hover, .document-drawer:focus-visible { outline: none; border-color: rgba(250, 221, 157, .92); background: linear-gradient(135deg, rgba(44, 81, 63, .84), rgba(11, 29, 22, .97)); box-shadow: 0 27px 58px rgba(0, 0, 0, .23), 0 0 22px rgba(228, 192, 119, .08), inset 0 1px rgba(255, 255, 255, .08); transform: translate3d(0, -4px, 0); }
.document-drawer:hover::after, .document-drawer:focus-visible::after { border-color: rgba(237, 206, 137, .28); transform: scale(1.08) rotate(-14deg); }
.document-drawer > * { position: relative; z-index: 1; }
.document-drawer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.document-glyph { position: relative; display: grid; width: 49px; height: 60px; padding: 14px 11px 10px; border: 1px solid rgba(241, 210, 143, .78); color: #eed092; }
.document-glyph::before { position: absolute; top: -1px; right: -1px; width: 14px; height: 14px; border-bottom: 1px solid currentColor; border-left: 1px solid currentColor; background: #173126; content: ""; }
.document-glyph i { display: block; height: 1px; margin-bottom: 7px; background: currentColor; opacity: .82; }
.document-glyph i:nth-child(2) { width: 80%; }
.document-glyph i:nth-child(3) { width: 57%; }
.document-drawer:nth-child(2) .document-glyph { border-color: rgba(219, 233, 210, .78); color: #d9e8d4; }
.document-drawer:nth-child(3) .document-glyph { border-color: rgba(235, 198, 127, .82); color: #eccb85; }
.document-drawer:nth-child(4) .document-glyph { border-color: rgba(190, 217, 201, .8); color: #c8dfce; }
.document-number { margin: 5px 0 0; color: rgba(240, 211, 151, .66); font-family: Georgia, serif; font-size: 20px; letter-spacing: .04em; }
.document-identifier { margin: 44px 0 10px; color: rgba(237, 213, 162, .68); font-size: 9px; font-weight: 600; letter-spacing: .19em; }
.document-drawer h3 { max-width: 90%; margin: 0; color: #fff4dc; font-family: "Songti TC", "STSong", "Noto Serif TC", Georgia, serif; font-size: clamp(28px, 2.5vw, 40px); font-weight: 500; letter-spacing: .08em; line-height: 1.24; }
.document-description { max-width: 340px; margin: 14px 0 0; color: rgba(225, 235, 222, .71); font-size: 12px; letter-spacing: .04em; line-height: 1.78; }
.document-drawer-bottom { margin-top: 35px; padding-top: 16px; border-top: 1px solid rgba(239, 211, 152, .24); }
.document-disclaimer { margin: 0; color: rgba(224, 220, 201, .54); font-size: 9px; letter-spacing: .065em; line-height: 1.7; }
.document-download { display: flex; align-items: center; justify-content: space-between; gap: 13px; margin-top: 15px; padding: 11px 12px 11px 15px; border: 1px solid rgba(238, 204, 129, .76); color: #f5d996; font-size: 11px; font-weight: 600; letter-spacing: .105em; transition: background .22s ease, color .22s ease; }
.document-download svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: square; stroke-width: 1.25; transition: transform .22s ease; }
.document-drawer:hover .document-download, .document-drawer:focus-visible .document-download { background: #efd18d; color: #14271f; }
.document-drawer:hover .document-download svg, .document-drawer:focus-visible .document-download svg { transform: translateY(2px); }
.document-request-note { margin: 10px 0 0; color: rgba(232, 224, 203, .49); font-size: 9px; letter-spacing: .095em; }
.documents-footnote { display: flex; align-items: flex-start; gap: 10px; max-width: 595px; margin: 28px 0 0; color: rgba(229, 221, 200, .55); font-size: 10px; letter-spacing: .085em; line-height: 1.8; }
.documents-footnote .reference-mark { flex: 0 0 auto; margin-top: 4px; border-color: #d6b36b; }
.site-disclaimer { max-width: 976px; margin: clamp(72px, 10vw, 130px) auto 0; padding: 25px 0 0; border-top: 1px solid rgba(239, 211, 152, .28); color: rgba(235, 230, 214, .61); font-size: 11px; font-weight: 300; letter-spacing: .075em; line-height: 2; }
.site-disclaimer-title { margin: 0 0 12px; color: rgba(241, 210, 148, .95); font-size: 10px; font-weight: 600; letter-spacing: .21em; line-height: 1.4; }
.site-disclaimer-copy { display: grid; grid-template-columns: 14px minmax(0, 820px); gap: 12px; }
.site-disclaimer-copy .reference-mark { width: 8px; height: 8px; margin-top: .72em; border-color: rgba(230, 196, 123, .9); transform: rotate(45deg); }
.site-disclaimer p { margin: 0; }

@media (max-width: 820px) {
  .documents-section { padding: 105px 0 max(164px, calc(120px + env(safe-area-inset-bottom))); }
  .documents-inner { width: min(100% - 40px, 640px); }
  .documents-header { display: block; }
  .documents-eyebrow { font-size: 9px; letter-spacing: .18em; }
  .documents-title { font-size: clamp(38px, 12vw, 55px); }
  .documents-intro { margin-top: 19px; }
  .documents-archive { margin-top: 48px; }
  .documents-grid { grid-template-columns: 1fr; gap: 10px; }
  .document-drawer { min-height: 294px; padding: 28px 25px; }
  .document-identifier { margin-top: 32px; }
  .document-drawer h3 { font-size: 31px; }
  .site-disclaimer { margin-top: 63px; padding-top: 22px; font-size: 11px; letter-spacing: .045em; line-height: 1.95; }
  .site-disclaimer-title { margin-bottom: 11px; font-size: 10px; letter-spacing: .18em; }
  .site-disclaimer-copy { grid-template-columns: 10px minmax(0, 1fr); gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .documents-title-line > span, .document-drawer { opacity: 1; transform: none; transition: none; }
}