/* ============================================================
   A FOLIO — luxury stationery on the ledger sheet
   Laid ivory, plate mark, ink. Not a lab, not a safelight.
   ============================================================ */
.folio{
  --folio-ink:#1A1610;
  --folio-mute:rgba(26,22,16,.58);
  --folio-faint:rgba(26,22,16,.38);
  --folio-rule:rgba(40,32,22,.16);
  position:relative;
  margin:0 0 clamp(36px,6vh,72px);
  padding:clamp(28px,4.5vh,56px) clamp(18px,3vw,36px) clamp(32px,5vh,64px);
  background:
    radial-gradient(80% 70% at 18% 8%, rgba(255,252,244,.72), transparent 58%),
    linear-gradient(180deg, #F7F2E8 0%, #F3EDE0 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 0 0 1px rgba(40,32,22,.10),
    0 1px 0 rgba(40,32,22,.06);
}
.folio::before{
  content:""; position:absolute; inset:10px; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(40,32,22,.07);
}
.folio-index{
  display:flex; flex-wrap:wrap; gap:10px 28px;
  margin:0 0 clamp(22px,3.4vh,40px);
  padding-bottom:clamp(16px,2.4vh,28px);
  border-bottom:1px solid var(--folio-rule);
}
.folio-tab{
  background:none; border:0; padding:0; margin:0; cursor:pointer;
  display:grid; gap:4px; justify-items:start; color:var(--folio-mute);
  transition:color .5s var(--ease, cubic-bezier(.22,.68,.26,1));
}
.folio-tab-n{ font-size:10px; letter-spacing:.22em; color:var(--folio-faint); }
.folio-tab-t{ font-size:clamp(22px,2.6vw,36px); line-height:.95; letter-spacing:-.01em; color:inherit; }
.folio-tab.is-on{ color:var(--folio-ink); }
.folio-tab:hover, .folio-tab:focus-visible{ color:var(--folio-ink); }
.folio-head{ display:grid; gap:10px; margin:0 0 clamp(18px,2.8vh,32px); }
.folio-name{
  margin:0; font-size:clamp(36px,5.2vw,72px); line-height:.92;
  letter-spacing:-.02em; color:var(--folio-ink);
  text-shadow:0 1px 0 rgba(255,255,255,.88), 0 -1px 0 rgba(40,32,22,.12);
}
.folio-facts{
  margin:0; max-width:46ch; font-size:clamp(15px,1.25vw,18px);
  line-height:1.55; color:var(--folio-mute);
}
.folio-plate{ margin:0; }
.folio-well{
  position:relative; background:#EFE8D8; border-radius:0;
  box-shadow:
    inset 0 0 0 1px rgba(40,32,22,.10),
    0 1px 0 rgba(255,255,255,.7);
  padding:clamp(10px,1.6vw,18px);
}
.folio-img{
  display:block; width:100%; height:auto; max-height:62vh; object-fit:contain;
  opacity:0; transform:translateY(8px);
  transition:opacity .7s var(--ease, cubic-bezier(.22,.68,.26,1)),
              transform .85s var(--ease, cubic-bezier(.22,.68,.26,1));
  background:#E8E0D0;
}
.folio-img.is-in{ opacity:1; transform:none; }
.folio-nav{
  display:flex; align-items:baseline; gap:22px;
  margin-top:clamp(16px,2.2vh,28px);
}
.folio-word{
  background:none; border:0; padding:0; margin:0; cursor:pointer;
  font-family:var(--display); font-size:16px; letter-spacing:.01em;
  color:var(--folio-ink);
}
.folio-word:disabled{ color:var(--folio-faint); cursor:default; }
.folio-word:hover:not(:disabled), .folio-word:focus-visible{ text-decoration:underline; text-underline-offset:3px; }
.folio-mark{ margin-left:auto; font-size:10px; letter-spacing:.2em; color:var(--folio-faint); }

@media (prefers-reduced-motion:reduce){
  .folio-img, .folio-tab{ transition:none; }
  .folio-img{ transform:none; opacity:1; }
}