/* =====================================================================
   ARCHIVE — Question Paper Archive
   Design language: a library card-catalog. Warm parchment, brass
   hardware, an oxblood wax-seal accent for the one true action:
   download. Drawers open one at a time as you narrow your search.
   ===================================================================== */

:root{
  --parchment:       #F3ECD9;
  --parchment-deep:  #E9DFC3;
  --parchment-card:  #FBF7EC;
  --ink:             #241F17;
  --ink-soft:        #5B5240;
  --ink-faint:       #8A8066;
  --brass:           #A9812F;
  --brass-light:     #D8B564;
  --brass-dark:      #7C5E22;
  --seal:            #7C2A2A;
  --seal-dark:       #591D1D;
  --seal-light:      #9C3B3B;
  --line:            #D2C4A0;
  --line-soft:       #E2D6B8;
  --shadow-drawer:   0 14px 30px -12px rgba(36,31,23,.28), 0 2px 6px rgba(36,31,23,.10);
  --radius: 14px;
  --ease: cubic-bezier(.22,.9,.32,1);
}

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

body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 15% -10%, #FBF6E7 0%, transparent 60%),
    radial-gradient(900px 500px at 110% 10%, #F0E5C6 0%, transparent 55%),
    var(--parchment);
  color:var(--ink);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

/* subtle paper-grain texture */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.5;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.015) 0 1px, transparent 1px 3px);
}

h1,h2,h3,.display{
  font-family:'Fraunces', Georgia, serif;
  font-optical-sizing:auto;
  letter-spacing:-.01em;
  color:var(--ink);
  margin:0;
}

a{ color:inherit; }
button{ font-family:inherit; }

.wrap{ max-width:1120px; margin:0 auto; padding:0 24px; position:relative; z-index:1; }

/* ---------------------------------------------------------------- header */
.site-header{
  padding:28px 0 10px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{
  width:46px; height:46px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--brass-light), var(--brass) 60%, var(--brass-dark) 100%);
  display:flex; align-items:center; justify-content:center;
  box-shadow: inset 0 2px 4px rgba(255,255,255,.4), inset 0 -3px 6px rgba(0,0,0,.25), 0 3px 8px rgba(124,90,20,.35);
  color:#2b2109; font-family:'Fraunces',serif; font-weight:600; font-size:19px;
}
.brand-text .eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brass-dark); display:block; margin-bottom:2px;
}
.brand-text h1{ font-size:22px; font-weight:600; }

.admin-link{
  font-family:'IBM Plex Mono', monospace; font-size:12.5px; letter-spacing:.04em;
  text-decoration:none; color:var(--ink-soft); border:1px solid var(--line);
  padding:9px 16px; border-radius:100px; background:var(--parchment-card);
  transition:all .25s var(--ease);
  display:inline-flex; align-items:center; gap:8px;
}
.admin-link:hover{ border-color:var(--brass); color:var(--brass-dark); transform:translateY(-1px); box-shadow:var(--shadow-drawer); }

/* ---------------------------------------------------------------- hero */
.hero{ padding:56px 0 30px; text-align:center; }
.hero .eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--seal); display:inline-block; margin-bottom:16px;
  padding:6px 14px; border:1px dashed var(--seal); border-radius:100px;
}
.hero h2{
  font-size:clamp(32px,5vw,52px); font-weight:600; line-height:1.08; margin-bottom:16px;
}
.hero h2 em{ font-style:italic; color:var(--seal); }
.hero p{
  max-width:560px; margin:0 auto; color:var(--ink-soft); font-size:16.5px; line-height:1.6;
}

/* ---------------------------------------------------------------- catalog cabinet */
.cabinet{
  margin:44px auto 0; max-width:920px;
  background:linear-gradient(180deg, #EFE6CB, #E4D8B4);
  border-radius:20px;
  padding:22px;
  box-shadow: var(--shadow-drawer), inset 0 1px 0 rgba(255,255,255,.5);
  border:1px solid var(--line);
}
.cabinet-label{
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brass-dark); margin-bottom:18px;
}
.cabinet-label::before, .cabinet-label::after{ content:""; height:1px; width:40px; background:var(--line); }

.drawers{ display:flex; flex-direction:column; gap:10px; }

.drawer{
  background:var(--parchment-card);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  padding:16px 18px;
  opacity:0; transform:translateY(14px) scale(.98);
  pointer-events:none;
  transition:opacity .5s var(--ease), transform .5s var(--ease), border-color .3s;
  position:relative;
  overflow:hidden;
}
.drawer.is-visible{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.drawer.is-locked{ opacity:.45; pointer-events:none; filter:grayscale(.3); }
.drawer.is-done{ border-color:var(--brass); }

.drawer::before{
  /* brass drawer-pull handle */
  content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:linear-gradient(180deg,var(--brass-light),var(--brass) 60%,var(--brass-dark));
  transform:scaleY(0); transform-origin:top; transition:transform .45s var(--ease) .1s;
}
.drawer.is-done::before, .drawer.is-visible::before{ transform:scaleY(1); }

.drawer-row{ display:flex; align-items:center; gap:14px; }
.drawer-index{
  font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink-faint);
  width:26px; flex:none; text-align:center;
}
.drawer-index .num{ display:block; font-size:15px; color:var(--brass-dark); font-weight:600; }
.drawer-body{ flex:1; min-width:0; }
.drawer-label{
  font-size:11.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-faint);
  margin-bottom:6px; display:flex; align-items:center; gap:8px;
}
.drawer-check{
  width:16px; height:16px; border-radius:50%; border:1.5px solid var(--line);
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  transition:all .3s var(--ease);
}
.drawer.is-done .drawer-check{ background:var(--seal); border-color:var(--seal); }
.drawer.is-done .drawer-check::after{ content:"✓"; color:#fff; font-size:10px; line-height:1; }

.select-shell{ position:relative; }
.select-shell select{
  appearance:none; -webkit-appearance:none;
  width:100%; background:transparent; border:none;
  font-family:'Fraunces', serif; font-size:19px; color:var(--ink);
  padding:4px 30px 4px 0; cursor:pointer;
}
.select-shell select:disabled{ cursor:not-allowed; color:var(--ink-faint); }
.select-shell::after{
  content:"⌄"; position:absolute; right:2px; top:50%; transform:translateY(-58%);
  font-size:18px; color:var(--brass-dark); pointer-events:none; transition:transform .3s var(--ease);
}
.drawer.is-open .select-shell::after{ transform:translateY(-58%) rotate(180deg); }
.select-underline{
  height:2px; background:var(--line); margin-top:8px; position:relative; overflow:hidden; border-radius:2px;
}
.select-underline::after{
  content:""; position:absolute; inset:0; background:var(--seal);
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease);
}
.drawer.is-done .select-underline::after{ transform:scaleX(1); }

/* results — index cards */
.results{
  margin-top:26px;
  display:grid; gap:12px;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .6s var(--ease), opacity .5s var(--ease) .05s;
}
.results.is-visible{ max-height:900px; opacity:1; }

.result-card{
  background:var(--parchment-card);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  padding:16px 18px;
  display:flex; align-items:center; gap:16px;
  animation: cardIn .5s var(--ease) both;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.result-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-drawer); border-color:var(--brass); }
@keyframes cardIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:translateY(0);} }

.result-stamp{
  width:46px; height:46px; flex:none; border-radius:50%;
  border:2px dashed var(--seal-light); color:var(--seal);
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:700; letter-spacing:.03em;
  transform:rotate(-8deg);
}
.result-info{ flex:1; min-width:0; }
.result-title{ font-family:'Fraunces',serif; font-size:17px; font-weight:600; margin-bottom:3px; }
.result-meta{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--ink-faint); }

.btn-download{
  flex:none; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
  background:var(--seal); color:#F6E9CE;
  font-size:13.5px; font-weight:600; letter-spacing:.02em;
  padding:11px 18px; border-radius:100px;
  border:none; cursor:pointer;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s;
  box-shadow:0 4px 12px rgba(124,42,42,.28);
  position:relative; overflow:hidden;
}
.btn-download:hover{ background:var(--seal-dark); transform:translateY(-2px); box-shadow:0 8px 18px rgba(124,42,42,.35); }
.btn-download:active{ transform:translateY(0) scale(.96); }
.btn-download .ico{ transition:transform .3s var(--ease); }
.btn-download:hover .ico{ transform:translateY(2px); }

/* empty / placeholder state */
.empty-state{
  margin-top:22px; text-align:center; padding:34px 20px;
  border:1px dashed var(--line); border-radius:var(--radius);
  color:var(--ink-faint); font-size:14px;
  display:none;
}
.empty-state.is-visible{ display:block; animation:cardIn .4s var(--ease) both; }

/* loading shimmer for select while fetching */
.select-shell.is-loading select{ color:transparent; }
.select-shell.is-loading::before{
  content:""; position:absolute; left:0; top:6px; height:14px; width:70%;
  border-radius:4px;
  background:linear-gradient(90deg, var(--line-soft) 25%, #fff 50%, var(--line-soft) 75%);
  background-size:200% 100%; animation:shimmer 1.2s ease-in-out infinite;
}
@keyframes shimmer{ 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }

/* footer */
.site-footer{
  margin-top:70px; padding:26px 0 40px; text-align:center;
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--ink-faint);
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ---------------------------------------------------------------- mobile */
@media (max-width:640px){
  .wrap{ padding:0 16px; }
  .site-header{ padding:20px 0 4px; }
  .brand-text h1{ font-size:18px; }
  .admin-link span{ display:none; }
  .hero{ padding:36px 0 20px; }
  .cabinet{ padding:14px; border-radius:16px; }
  .drawer{ padding:13px 14px; }
  .select-shell select{ font-size:16.5px; }
  .result-card{ flex-wrap:wrap; }
  .btn-download{ width:100%; justify-content:center; }
  .result-stamp{ display:none; }
}