/* Word Cards (vocab.html): an old library reading room. Leather-bound parchment cards on dark wood.
   The stage keeps one look in light and dark mode. Scoped to .vc-stage / .vc so it leaves site.css alone. */
.vc-stage {
  --wood: #24160d; --wood2: #33200f; --leather: #5e2c18; --leather2: #43200f; --gold: #c9a24b; --gold2: #e2c27a;
  --parch: #f4e7c9; --parch2: #e9d6aa; --ink: #2b1d12; --ink2: #5c4630; --ink3: #7d6548; --rink: #8b1e1e; --gink: #2f5d2a; --cream: #f4e7c9;
  --fell: "Playfair Display", "Iowan Old Style", Georgia, serif; --fellsc: "Playfair Display SC", "Playfair Display", Georgia, serif;
  --gara: "EB Garamond", Garamond, "Iowan Old Style", Georgia, serif;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .35' numOctaves='3' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .05 0 0 0 0 0 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .15 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  position: relative; margin-top: -28px; padding: 0 0 36px; color: var(--cream);
  background: var(--grain), linear-gradient(var(--wood2), var(--wood));
  border-image: linear-gradient(var(--wood2), var(--wood)) fill 0 / 0 / 0 100vmax;
}
.page-head h1 { font-family: "Playfair Display", Georgia, serif; font-weight: 400; letter-spacing: .01em; }
.page-head .eyebrow { color: #8b1e1e; font-family: "Playfair Display SC", Georgia, serif; font-size: 15px; font-weight: 400; letter-spacing: .1em; text-transform: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .page-head .eyebrow { color: #e2c27a; } }
:root[data-theme="dark"] .page-head .eyebrow { color: #e2c27a; }

/* Hero: a shelf of books with a brass plaque */
.vc-hero { position: relative; height: 170px; margin-bottom: 26px; display: grid; place-items: end center; }
.vc-shelf { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vc-plaque { position: relative; margin-bottom: 30px; padding: 10px 30px 12px; text-align: center; display: grid; justify-items: center; gap: 0;
  background: linear-gradient(#e2c27a, #b58b3a 55%, #9a7128); color: #3a240c; border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(0,0,0,.25), 0 10px 22px rgba(0,0,0,.55); }
.vc-plaque::before, .vc-plaque::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3c4, #7a5518); }
.vc-plaque::before { left: 9px; } .vc-plaque::after { right: 9px; }
.vc-orn { font-family: var(--fell); font-size: 16px; line-height: 1; color: #6b4a18; }
.vc-title { font-family: var(--fellsc); font-weight: 400; font-size: clamp(30px, 5vw, 44px); line-height: 1; letter-spacing: .04em; text-shadow: 0 1px 0 rgba(255,240,200,.6); }
.vc-subt { font-family: var(--gara); font-style: italic; font-size: 15px; line-height: 1.3; color: #4a3010; }

.vc { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .vc { grid-template-columns: minmax(0, 1fr); } }
.vc-play { scroll-margin-top: 12px; }
.vc .main { min-width: 0; }
.vc .side { display: grid; gap: 20px; min-width: 0; }

/* Side panels: tooled leather */
.vc .panel { position: relative; background: var(--grain), linear-gradient(160deg, #6a3119, var(--leather2)); color: var(--cream); border-radius: 10px; padding: clamp(18px, 3vw, 26px);
  box-shadow: inset 0 0 0 6px rgba(0,0,0,.12), 0 12px 26px rgba(0,0,0,.5); min-width: 0; outline: 1.5px solid rgba(201,162,75,.7); outline-offset: -10px; }
.vc .panel h2 { font-family: var(--fellsc); font-weight: 400; font-size: 25px; color: var(--gold2); letter-spacing: .03em; }
.vc .sub { color: #e3cfa6; font-family: var(--gara); font-style: italic; font-size: 16px; margin: 2px 0 0; }
.vc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.vc-stat { padding: 10px 6px; text-align: center; background: var(--paper), var(--parch); color: var(--ink); border-radius: 2px; box-shadow: 0 3px 6px rgba(0,0,0,.35); }
.vc-stat:nth-child(2) { transform: rotate(-1.5deg); } .vc-stat:nth-child(3) { transform: rotate(1deg); }
.vc-stat b { display: block; font-family: var(--fell); font-weight: 400; font-size: 30px; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--ink); }
.vc-stat span { font-family: var(--gara); font-size: 13px; font-weight: 500; color: var(--ink2); line-height: 1.2; display: block; }
.vc .steps { margin: 12px 0 0; padding-left: 22px; display: grid; gap: 6px; font-family: var(--gara); font-size: 17px; line-height: 1.45; color: var(--cream); }
.vc .steps li::marker { font-family: var(--fell); color: var(--gold2); }

/* Progress */
.vc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.vc-count { font-family: var(--fellsc); font-size: 18px; color: var(--gold2); letter-spacing: .04em; }
.vc-dots { display: flex; gap: 9px; }
.vc-dots span { width: 15px; height: 15px; border-radius: 50%; display: block; background: radial-gradient(circle at 35% 30%, #6b5233, #2a1a0c); box-shadow: inset 0 0 0 1.5px rgba(201,162,75,.6); }
.vc-dots span.cur { background: radial-gradient(circle at 35% 30%, #fff1c2, #c9a24b 55%, #7a5518); box-shadow: 0 0 10px rgba(226,194,122,.7); }
.vc-dots span.ok { background: radial-gradient(circle at 35% 30%, #a7d38f, #2f5d2a 60%); }
.vc-dots span.no { background: radial-gradient(circle at 35% 30%, #ff9b8f, #8b1e1e 60%); }
.vc-dots span.skip { background: radial-gradient(circle at 35% 30%, #f4e7c9, #a38a5a 60%); }

/* The card: both faces sit in one grid cell, so the card is as tall as the taller face. */
.vc-card { perspective: 1800px; }
.vc-inner { display: grid; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3,.7,.3,1); }
.vc-card.flipped .vc-inner { transform: rotateY(180deg); }
.vc-card.instant .vc-inner { transition: none; }
.vc-face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; min-width: 0; display: flex; flex-direction: column; color: var(--ink);
  background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(120,80,30,.22)), var(--paper), var(--parch);
  border: 12px solid var(--leather); border-radius: 14px; outline: 1.5px solid var(--gold); outline-offset: -20px;
  padding: clamp(28px, 4.6vw, 40px) clamp(24px, 4.4vw, 40px); box-shadow: inset 0 0 0 1px rgba(0,0,0,.2), 0 2px 0 #2a150a, 0 22px 40px rgba(0,0,0,.6); font-family: var(--gara); }
.vc-face::before { content: ""; position: absolute; inset: 10px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 2c8 0 12 4 12 12M2 2c0 8 4 12 12 12M7 7l3 3' fill='none' stroke='%23a8812f' stroke-width='1.4'/%3E%3Ccircle cx='15' cy='15' r='1.6' fill='%23a8812f'/%3E%3C/svg%3E") top left / 24px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 2c-8 0-12 4-12 12M22 2c0 8-4 12-12 12M17 7l-3 3' fill='none' stroke='%23a8812f' stroke-width='1.4'/%3E%3Ccircle cx='9' cy='15' r='1.6' fill='%23a8812f'/%3E%3C/svg%3E") top right / 24px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 22c8 0 12-4 12-12M2 22c0-8 4-12 12-12M7 17l3-3' fill='none' stroke='%23a8812f' stroke-width='1.4'/%3E%3Ccircle cx='15' cy='9' r='1.6' fill='%23a8812f'/%3E%3C/svg%3E") bottom left / 24px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 22c-8 0-12-4-12-12M22 22c0-8-4-12-12-12M17 17l-3-3' fill='none' stroke='%23a8812f' stroke-width='1.4'/%3E%3Ccircle cx='9' cy='9' r='1.6' fill='%23a8812f'/%3E%3C/svg%3E") bottom right / 24px no-repeat; }
.vc-face { position: relative; }
.vc-back { transform: rotateY(180deg); }
@media (prefers-reduced-motion: reduce) {
  .vc-inner { transition: none; transform: none !important; }
  .vc-back { transform: none; }
  .vc-card .vc-back, .vc-card.flipped .vc-front { visibility: hidden; }
  .vc-card.flipped .vc-back { visibility: visible; }
}

.vc-head { text-align: center; display: grid; gap: 6px; justify-items: center; padding: 6px 0 16px; border-bottom: 1px solid rgba(90,60,30,.35); position: relative; }
.vc-head::after { content: "❧"; position: absolute; bottom: -13px; left: 50%; transform: translateX(-50%); background: var(--parch); padding: 0 10px; font-family: var(--fell); font-size: 20px; line-height: 1; color: var(--rink); }
.vc-pos { font-family: var(--gara); font-style: italic; font-size: 16px; color: var(--rink); letter-spacing: .02em; }
.vc-word { font-family: var(--fell); font-weight: 400; font-size: clamp(34px, 6.4vw, 58px); line-height: 1.05; color: var(--ink); overflow-wrap: anywhere; max-width: 100%; }
.vc-word::first-letter { color: var(--rink); }
.vc-word.lg { font-size: clamp(27px, 4.6vw, 44px); }
.vc-word.xl { font-size: clamp(20px, 3.4vw, 31px); line-height: 1.15; }
.vc-say { font-family: var(--gara); font-style: italic; font-size: 19px; color: var(--ink2); overflow-wrap: anywhere; max-width: 100%; }
.vc-say:not(:empty)::before { content: "/ "; color: var(--ink3); } .vc-say:not(:empty)::after { content: " /"; color: var(--ink3); }

.vc-q { font-family: var(--fellsc); font-size: 18px; color: var(--ink2); margin: 24px 0 8px; text-align: center; letter-spacing: .04em; }
.vc-choices { display: grid; gap: 0; border-top: 1px solid rgba(139,30,30,.35); }
.vc-opt { display: flex; align-items: flex-start; gap: 14px; width: 100%; min-height: 56px; text-align: left; font: inherit; font-family: var(--gara); font-size: 18px; font-weight: 500; line-height: 1.38; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid rgba(37,52,79,.28); padding: 12px 8px; cursor: pointer; transition: background-color .15s; }
.vc-opt kbd { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-family: var(--fell); font-size: 16px; font-weight: 400; margin-top: -2px;
  background: radial-gradient(circle at 35% 30%, #c0463a, #7a1414 70%); color: #fbe9c8; box-shadow: 0 1px 2px rgba(0,0,0,.4), inset 0 0 0 2px rgba(0,0,0,.15); }
.vc-opt span { min-width: 0; overflow-wrap: anywhere; padding-top: 1px; }
@media (hover: hover) { .vc-opt:not(:disabled):hover { background: rgba(201,162,75,.18); } }
.vc-opt:focus-visible { outline: 2px solid var(--rink); outline-offset: -2px; }
.vc-opt:disabled { cursor: default; }
.vc-opt.right { background: rgba(47,93,42,.14); }
.vc-opt.right kbd { background: radial-gradient(circle at 35% 30%, #6fa860, #2f5d2a 70%); }
.vc-opt.right span::after { content: " \2713"; color: var(--gink); font-weight: 700; }
.vc-opt.wrong { background: rgba(139,30,30,.1); }
.vc-opt.wrong span { text-decoration: line-through; text-decoration-color: var(--rink); text-decoration-thickness: 2px; }
.vc-opt:disabled:not(.right):not(.wrong) { opacity: .5; }
.vc-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.vc .hint { font-family: var(--gara); font-style: italic; font-size: 15px; color: var(--ink2); margin: 0; }
.vc .hint kbd { font-family: var(--gara); font-style: normal; font-weight: 600; font-size: 13px; border: 1px solid rgba(90,60,30,.4); border-bottom-width: 2px; border-radius: 4px; padding: 0 6px; background: var(--parch2); color: var(--ink); }
@media (hover: none) { .vc .hint.keys { display: none; } }
.vc .btn { font-family: var(--fellsc); font-weight: 400; font-size: 18px; letter-spacing: .04em; border-radius: 6px; }
.vc .btn.primary { background: linear-gradient(#6a3119, #4a200e); color: var(--gold2); border: 1px solid #2a150a; box-shadow: inset 0 0 0 2px rgba(201,162,75,.45), 0 3px 0 #2a150a; }
.vc .btn.primary:hover { color: #fff1c2; }
.vc .btn.primary:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px rgba(201,162,75,.45); }
.vc .btn.ghost { background: transparent; color: var(--ink); border: 1px solid rgba(43,29,18,.5); }
.vc .btn.ghost:hover { border-color: var(--rink); color: var(--rink); }
.vc .btn:disabled { opacity: .5; cursor: default; }

/* Back */
.vc-verdict { align-self: flex-start; font-family: var(--fellsc); font-size: 17px; padding: 2px 12px; border: 2px solid currentColor; border-radius: 4px; color: var(--ink2); transform: rotate(-3deg); letter-spacing: .06em; opacity: .9; }
.vc-card.flipped .vc-verdict { animation: vcstamp .4s cubic-bezier(.2,1.6,.5,1) .45s backwards; }
@keyframes vcstamp { from { transform: rotate(-12deg) scale(1.8); opacity: 0; } to { transform: rotate(-3deg) scale(1); opacity: .9; } }
.vc-verdict.ok { color: var(--gink); } .vc-verdict.no { color: var(--rink); } .vc-verdict.skip { color: #7a5518; }
.vc-bword { font-family: var(--fell); font-weight: 400; font-size: clamp(28px, 4.4vw, 42px); line-height: 1.08; margin-top: 14px; overflow-wrap: anywhere; color: var(--ink); }
.vc-bsay { font-family: var(--gara); font-style: italic; font-size: 17px; color: var(--ink2); overflow-wrap: anywhere; margin-top: 4px; }
.vc-mean { margin-top: 16px; padding: 14px 16px; border-left: 3px solid var(--rink); background: rgba(201,162,75,.16); }
.vc-mean h3, .vc-ex h3, .vc-origin h3 { font-family: var(--fellsc); font-weight: 400; font-size: 16px; letter-spacing: .06em; color: var(--rink); margin: 0 0 2px; }
.vc-mean p { margin: 0; font-family: var(--gara); font-size: clamp(19px, 2.4vw, 22px); font-weight: 500; line-height: 1.4; }
.vc-ex { margin-top: 14px; padding: 0 4px; }
.vc-ex p { margin: 0; font-size: 18px; font-style: italic; line-height: 1.5; }
.vc-from { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 230px); gap: 16px; align-items: start; padding: 0 4px; }
.vc-from.noplate { grid-template-columns: minmax(0, 1fr); }
.vc-origin p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink); }
.vc-plate { margin: 0; padding: 7px 7px 6px; background: #fbf3df; box-shadow: 0 0 0 1px rgba(90,60,30,.35), 0 4px 10px rgba(60,35,10,.3); transform: rotate(1.2deg); }
.vc-plate .pframe { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #efe2c2; box-shadow: inset 0 0 0 1px rgba(90,60,30,.4); }
.vc-plate .emb { position: absolute; inset: 0; display: grid; place-items: center; color: #7a5a2c; }
.vc-plate .emb svg { width: 72%; height: 72%; }
.vc-plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .6s; filter: sepia(.25) contrast(1.02); }
.vc-plate.has img { opacity: 1; }
.vc-plate figcaption { font-family: var(--gara); font-size: 13.5px; line-height: 1.3; color: var(--ink2); margin-top: 5px; display: grid; gap: 1px; font-style: italic; }
.vc-plate figcaption .cr { font-style: normal; font-size: 11.5px; color: var(--ink3); }
.vc-plate figcaption .cr a { color: inherit; }
.vc-plate figcaption .cr:empty { display: none; }
@media (max-width: 560px) { .vc-from { grid-template-columns: minmax(0, 1fr); } .vc-plate { transform: none; max-width: 320px; } }
.vc-back .vc-foot { margin-top: auto; padding-top: 20px; }
.vc-back .btn.primary { min-width: 170px; }

/* End of set: a library checkout card */
.vc-end { text-align: center; background: var(--paper), linear-gradient(90deg, transparent 22px, rgba(139,30,30,.35) 22px 23px, transparent 23px), var(--parch) !important; color: var(--ink) !important;
  border-radius: 4px !important; outline: 1.5px solid rgba(139,30,30,.25) !important; outline-offset: -10px !important; padding-left: 40px !important; box-shadow: 0 22px 40px rgba(0,0,0,.6) !important; }
.vc-end .eyebrow { font-family: var(--fellsc); font-size: 18px; text-transform: none; letter-spacing: .08em; color: var(--rink); font-weight: 400; }
.vc-big { font-family: var(--fell); font-weight: 400; font-size: clamp(60px, 12vw, 92px); line-height: 1; color: var(--ink); margin-top: 6px; }
.vc-big small { font-size: .45em; color: var(--ink3); }
.vc-msg { font-family: var(--gara); font-style: italic; font-size: 20px; margin: 8px 0 0; color: var(--ink2); }
.vc-review { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 0; text-align: left; border-top: 2px solid rgba(139,30,30,.45); }
.vc-review li { border-bottom: 1px solid rgba(90,60,30,.3); padding: 12px 6px; }
.vc-rw { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.vc-rw b { font-family: var(--fell); font-weight: 400; font-size: 23px; overflow-wrap: anywhere; min-width: 0; color: var(--ink); }
.vc-rs { display: block; font-family: var(--gara); font-style: italic; font-size: 15px; color: var(--ink2); overflow-wrap: anywhere; }
.vc-review p { margin: 4px 0 0; font-family: var(--gara); font-size: 17px; line-height: 1.45; color: var(--ink); }
.vc-tag { flex: none; font-family: var(--fellsc); font-size: 15px; padding: 0 10px; border: 2px solid currentColor; border-radius: 3px; transform: rotate(-4deg); letter-spacing: .06em; }
.vc-tag.ok { color: var(--gink); } .vc-tag.no { color: var(--rink); } .vc-tag.skip { color: #7a5518; }
.vc-end .btn { margin-top: 22px; min-width: 190px; }

.vc.loading .vc-choices { min-height: 260px; }
.vc .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Guide: a plain parchment page */
.guide#guide { background: #f6edd8; color: #2b1d12; border-radius: 4px; border-left: 6px solid #5e2c18; }
.guide#guide h2, .guide#guide h3 { font-family: "Playfair Display", Georgia, serif; font-weight: 400; color: #2b1d12; }
.guide#guide h2 { font-size: clamp(27px, 3.2vw, 33px); }
.guide#guide h3 { font-size: 22px; }
.guide#guide .faq h3 { font-size: 20px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .guide#guide { background: #221a14; color: #eee3cc; border-left-color: #c9a24b; } :root:not([data-theme="light"]) .guide#guide h2, :root:not([data-theme="light"]) .guide#guide h3 { color: #f4e7c9; } }
:root[data-theme="dark"] .guide#guide { background: #221a14; color: #eee3cc; border-left-color: #c9a24b; }
:root[data-theme="dark"] .guide#guide h2, :root[data-theme="dark"] .guide#guide h3 { color: #f4e7c9; }

@media (max-width: 480px) {
  .vc-face { border-width: 8px; outline-offset: -15px; padding: 26px 18px; }
  .vc-face::before { inset: 6px; }
  .vc-opt { font-size: 17px; padding: 12px 4px; gap: 10px; }
  .vc-foot .btn { flex: 1 1 auto; }
  .vc-hero { height: 140px; margin-bottom: 18px; }
  .vc-plaque { margin-bottom: 26px; padding: 8px 22px 10px; }
  .vc-subt { font-size: 13px; }
}
/* Bookplate in the free space at the foot of the question side */
.vc-front::after { content: "❦  Ex Libris  ❦"; display: block; margin-top: auto; padding-top: 22px; text-align: center; font-family: var(--fellsc); font-size: 15px; letter-spacing: .14em; color: rgba(122,90,44,.55); }