/* ============================================================
   MÉDAILLIER — the cabinet.

   Palette derived from the object, not from a brand: a nineteenth-
   century medal cabinet. Ebonised mahogany carcase, oxblood velvet
   tray linings, brass fittings, and an ivory catalogue card that is
   the only light surface in the room — because in a real médaillier
   the only thing you are meant to read is the card.
   ============================================================ */

:root{
  --ink:        #0b0908;
  --case:       #13100c;
  --case-hi:    #1d1811;
  --wood:       #241a12;
  --wood-edge:  #3a2a1c;

  --brass:      #c9a227;
  --brass-hi:   #ecd08a;
  --brass-lo:   #7d6318;

  --velvet:     #45150f;
  --velvet-lo:  #250b08;

  --ivory:      #ece3d2;
  --ivory-2:    #cfc4ae;
  --ivory-3:    #9a8f7b;

  --gilt:       #c9a227;
  --argent:     #b9c0c8;
  --copper:     #b45a3c;

  --display: Didot, "Bodoni 72", "Hoefler Text", Georgia, "Times New Roman", serif;
  --text:    "Iowan Old Style", "Hoefler Text", Charter, Georgia, serif;
  --ui:      Optima, "Avenir Next", "Helvetica Neue", system-ui, sans-serif;
  --mono:    "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  --rule: 1px solid rgba(201,162,39,.18);
  --maxw: 1280px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

body{
  background:
    radial-gradient(120% 90% at 50% -10%, #1c1610 0%, var(--case) 42%, var(--ink) 100%);
  color: var(--ivory-2);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* the grain that keeps large dark fields from looking flat */
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.32;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>");
  mix-blend-mode: overlay;
}

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 34px; position:relative; z-index:1; }

/* ---------- lettering ---------- */
h1,h2,h3,h4{ font-family:var(--display); font-weight:400; color:var(--ivory); margin:0; }
.eyebrow{
  font-family:var(--ui); font-size:11px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--brass); margin:0 0 12px;
}
.legend{
  font-family:var(--display); letter-spacing:.20em; text-transform:uppercase;
}
.num{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--ivory-3); }

/* ---------- masthead ---------- */
header.top{
  position:sticky; top:0; z-index:40;
  background:linear-gradient(180deg, rgba(11,9,8,.96) 62%, rgba(11,9,8,0));
  backdrop-filter:blur(9px);
  border-bottom:var(--rule);
}
header.top .wrap{ display:flex; align-items:center; gap:30px; height:74px; }
.mark{ display:flex; align-items:baseline; gap:13px; text-decoration:none; }
.mark b{
  font-family:var(--display); font-weight:400; font-size:25px; letter-spacing:.20em;
  color:var(--ivory);
}
.mark span{
  font-family:var(--ui); font-size:9.5px; letter-spacing:.30em; text-transform:uppercase;
  color:var(--brass-lo); white-space:nowrap;
}
header.top .wrap{ overflow:visible; }
nav.top-nav{ margin-left:auto; display:flex; gap:4px; }
nav.top-nav button{
  background:none; border:0; cursor:pointer; padding:9px 15px;
  font-family:var(--ui); font-size:11px; letter-spacing:.20em; text-transform:uppercase;
  color:var(--ivory-3); border-bottom:1px solid transparent; transition:.22s;
}
nav.top-nav button:hover{ color:var(--ivory); }
nav.top-nav button[aria-current="true"]{ color:var(--brass); border-bottom-color:var(--brass); }

/* ---------- views ---------- */
.view{ display:none; padding:56px 0 110px; }
.view.on{ display:block; animation:rise .5s cubic-bezier(.2,.7,.3,1); }
@keyframes rise{ from{ opacity:0; transform:translateY(9px);} to{ opacity:1; transform:none;} }

/* ---------- the presentation stage ---------- */
.stage{
  display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
  gap:64px; align-items:center; margin-bottom:78px;
}
.plinth{ position:relative; aspect-ratio:1; width:100%; max-width:540px; margin-inline:auto; }
/* the shader paints its own ground — no CSS disc behind it, or the two
   backgrounds stack into a visible grey plate */
.plinth canvas{
  width:100%; height:100%; display:block; background:transparent;
}
.plinth .fallback{ position:absolute; inset:0; display:none; place-items:center; }
.plinth .fallback img, .plinth .fallback canvas{
  width:88%; height:88%; object-fit:contain;
  filter:drop-shadow(0 30px 46px rgba(0,0,0,.7));
}
.plinth.is-2d canvas.gl{ display:none; }
.plinth.is-2d .fallback{ display:grid; }

.plinth-tools{
  display:flex; gap:10px; justify-content:center; margin-top:22px;
}
.plinth-tools button{
  font-family:var(--ui); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  background:linear-gradient(180deg, var(--case-hi), #100c08);
  color:var(--ivory-2); border:1px solid rgba(201,162,39,.26);
  padding:10px 17px; border-radius:2px; cursor:pointer; transition:.22s;
}
.plinth-tools button:hover{ border-color:var(--brass); color:var(--brass-hi); }
.hint{
  text-align:center; font-family:var(--ui); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:#6b6152; margin-top:12px;
}

.overture h1{ font-size:clamp(38px,5.2vw,64px); line-height:1.03; letter-spacing:.008em; }
.overture h1 em{ font-style:italic; color:var(--brass-hi); }
.overture .lede{ font-size:19px; color:var(--ivory-2); margin:24px 0 0; max-width:52ch; }
.overture .sub{ font-size:15.5px; color:var(--ivory-3); margin:16px 0 0; max-width:56ch; }
.rule{ height:1px; background:linear-gradient(90deg, var(--brass), transparent); margin:30px 0; }

.facts{ display:flex; gap:34px; flex-wrap:wrap; margin-top:28px; }
.fact b{
  display:block; font-family:var(--display); font-size:31px; color:var(--brass-hi); line-height:1;
}
.fact span{
  font-family:var(--ui); font-size:9.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ivory-3);
}

/* ---------- the tray ---------- */
.tray{
  background:
    linear-gradient(180deg, rgba(0,0,0,.42), transparent 16%, transparent 84%, rgba(0,0,0,.5)),
    linear-gradient(150deg, var(--velvet) 0%, var(--velvet-lo) 100%);
  border:1px solid var(--wood-edge);
  border-radius:3px;
  padding:38px 34px 42px;
  box-shadow: inset 0 0 90px rgba(0,0,0,.72), 0 26px 60px rgba(0,0,0,.5);
  position:relative;
}
.tray::after{
  content:''; position:absolute; inset:9px; border:1px solid rgba(201,162,39,.13);
  border-radius:2px; pointer-events:none;
}
.tray-head{ display:flex; align-items:baseline; gap:18px; margin-bottom:30px; flex-wrap:wrap; }
.tray-head h2{ font-size:23px; letter-spacing:.16em; text-transform:uppercase; }
.filters{ margin-left:auto; display:flex; gap:6px; flex-wrap:wrap; }
.filters button{
  font-family:var(--ui); font-size:9.5px; letter-spacing:.20em; text-transform:uppercase;
  background:rgba(0,0,0,.30); color:var(--ivory-3);
  border:1px solid rgba(236,227,210,.14); padding:7px 13px; border-radius:2px; cursor:pointer;
  transition:.2s;
}
.filters button:hover{ color:var(--ivory); }
.filters button[aria-pressed="true"]{ color:var(--ink); background:var(--brass); border-color:var(--brass); }

.slots{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(148px,1fr)); gap:26px 22px;
}
.slot{
  background:none; border:0; padding:0; cursor:pointer; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:11px;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.slot:hover{ transform:translateY(-5px); }
.slot .well{
  width:100%; aspect-ratio:1; border-radius:50%; position:relative;
  background:radial-gradient(60% 60% at 50% 42%, rgba(0,0,0,.62), rgba(0,0,0,.30));
  box-shadow: inset 0 3px 10px rgba(0,0,0,.85), inset 0 -1px 0 rgba(236,227,210,.06);
  display:grid; place-items:center; overflow:hidden;
}
.slot .well canvas, .slot .well img{
  width:100%; height:100%; display:block;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.6));
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.slot:hover .well canvas{ transform:scale(1.045); }
.slot .cap{
  font-family:var(--ui); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ivory-2); line-height:1.45;
}
.slot .cap i{ display:block; font-style:normal; font-size:9px; color:var(--ivory-3); letter-spacing:.14em; }
.slot .struck{
  position:absolute; top:6px; right:8px; width:15px; height:15px; border-radius:50%;
  background:var(--brass); color:var(--ink); font-family:var(--ui); font-size:9px;
  display:grid; place-items:center; opacity:0; transition:.25s;
}
.slot.is-struck .struck{ opacity:1; }
.slot.is-dim .well{ opacity:.30; }

/* ---------- catalogue card ---------- */
.card{
  background:
    linear-gradient(180deg, #f2ecdd, var(--ivory) 8%, #e4dac6 100%);
  color:#231d15;
  border-radius:2px;
  padding:44px 46px 48px;
  box-shadow:0 30px 70px rgba(0,0,0,.55);
  position:relative;
  font-size:16.5px;
}
.card::before{
  content:''; position:absolute; inset:11px; border:1px solid rgba(35,29,21,.16);
  pointer-events:none;
}
.card h2{ color:#1a150f; font-size:38px; line-height:1.06; letter-spacing:.005em; }
.card .worktitle{ font-family:var(--text); font-style:italic; color:#5c503c; font-size:17px; margin-top:8px; }
.card .stamp{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:20px;
  font-family:var(--ui); font-size:9.5px; letter-spacing:.24em; text-transform:uppercase;
  color:#6a5c44;
}
.card .stamp i{ width:11px; height:11px; border-radius:50%; display:inline-block; font-style:normal; }
.card section{ margin-top:30px; }
.card section > h4{
  font-family:var(--ui); font-size:9.5px; letter-spacing:.28em; text-transform:uppercase;
  color:#8a7a5c; margin-bottom:11px;
  padding-bottom:7px; border-bottom:1px solid rgba(35,29,21,.14);
}
.card .claim{
  font-family:var(--display); font-size:24px; line-height:1.34; color:#1a150f; margin:0;
}
.card ol{ margin:0; padding-left:1.35em; }
.card ol li{ margin:9px 0; }
.card ol li::marker{ font-family:var(--mono); font-size:12px; color:#9a8560; }
.card p{ margin:0 0 12px; }
.card p:last-child{ margin-bottom:0; }
.card .pull{
  border-left:2px solid var(--brass-lo); padding:4px 0 4px 18px; margin:0;
  font-family:var(--text); font-size:17.5px; color:#33291c;
}
.card .cite{
  font-size:13.5px; line-height:1.55; color:#5c503c; font-family:var(--text);
}
.card .cite i{ font-style:italic; }
.card .warn{
  background:rgba(180,90,60,.10); border:1px solid rgba(180,90,60,.30);
  padding:13px 16px; font-size:14px; color:#6d3320; border-radius:2px;
}
.badge{
  display:inline-block; font-family:var(--ui); font-size:9px; letter-spacing:.2em;
  text-transform:uppercase; padding:4px 9px; border:1px solid currentColor; border-radius:2px;
  color:#8a7a5c;
}

.detail{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.18fr); gap:56px; align-items:start; }
.detail .plinth{ position:sticky; top:104px; }
.backlink{
  background:none; border:0; cursor:pointer; padding:0; margin-bottom:26px;
  font-family:var(--ui); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ivory-3);
}
.backlink:hover{ color:var(--brass); }

/* ---------- lessons ---------- */
.lessons{ display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:2px;
  background:rgba(201,162,39,.16); border:1px solid rgba(201,162,39,.16); }
.lesson{ background:var(--case); padding:34px 32px 30px; transition:.3s; }
.lesson:hover{ background:var(--case-hi); }
.lesson .n{ font-family:var(--display); font-size:15px; letter-spacing:.2em; color:var(--brass); }
.lesson h3{ font-size:22px; line-height:1.28; margin:12px 0 14px; }
.lesson p{ font-size:15.5px; color:var(--ivory-3); margin:0 0 18px; }
.lesson .who{ display:flex; gap:7px; flex-wrap:wrap; }
.lesson .who button{
  font-family:var(--ui); font-size:9px; letter-spacing:.16em; text-transform:uppercase;
  background:none; border:1px solid rgba(236,227,210,.18); color:var(--ivory-3);
  padding:5px 10px; border-radius:2px; cursor:pointer;
}
.lesson .who button:hover{ border-color:var(--brass); color:var(--brass); }

/* ---------- confrontations ---------- */
.duel{
  border:1px solid rgba(201,162,39,.16); background:var(--case);
  padding:34px 36px; margin-bottom:20px;
}
.duel h3{ font-size:25px; margin-bottom:6px; }
.duel .q{ font-family:var(--ui); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); margin-bottom:24px; }
.duel .sides{ display:grid; grid-template-columns:1fr auto 1fr; gap:26px; align-items:start; }
.duel .side h5{
  font-family:var(--ui); font-size:9.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ivory-3); margin:0 0 9px; font-weight:400;
}
.duel .side p{ margin:0; font-size:16px; color:var(--ivory-2); }
.duel .vs{ font-family:var(--display); font-size:19px; color:var(--brass-lo); padding-top:20px; }
.duel .lands{
  margin-top:24px; padding-top:18px; border-top:1px solid rgba(201,162,39,.14);
  font-size:14.5px; color:var(--ivory-3);
}

/* ---------- the assay ---------- */
.assay{ max-width:820px; margin:0 auto; }
.assay-head{ text-align:center; margin-bottom:40px; }
.assay-head h1{ font-size:46px; }
.assay-head p{ color:var(--ivory-3); max-width:56ch; margin:16px auto 0; }
.progress{
  height:2px; background:rgba(236,227,210,.10); margin:30px 0 0; position:relative; overflow:hidden;
}
.progress i{ position:absolute; inset:0 auto 0 0; background:var(--brass); transition:width .5s; }

.q-card{
  background:var(--case); border:1px solid rgba(201,162,39,.20);
  padding:44px 44px 40px; margin-top:32px; box-shadow:0 22px 50px rgba(0,0,0,.45);
}
.q-kind{ font-family:var(--ui); font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--brass); }
.q-text{ font-family:var(--display); font-size:27px; line-height:1.3; color:var(--ivory); margin:16px 0 30px; }
.opts{ display:grid; gap:10px; }
.opt{
  text-align:left; background:rgba(0,0,0,.28); border:1px solid rgba(236,227,210,.13);
  color:var(--ivory-2); padding:16px 20px; font-family:var(--text); font-size:16px;
  cursor:pointer; border-radius:2px; transition:.18s;
}
.opt:hover:not(:disabled){ border-color:var(--brass); background:rgba(201,162,39,.07); }
.opt:disabled{ cursor:default; }
.opt.right{ border-color:#6f8f5e; background:rgba(111,143,94,.14); color:#dfeAD4; }
.opt.wrong{ border-color:#a1523c; background:rgba(161,82,60,.14); }
.verdict{ margin-top:26px; padding-top:22px; border-top:1px solid rgba(201,162,39,.16); display:none; }
.verdict.on{ display:block; }
.verdict h5{
  font-family:var(--ui); font-size:9.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--brass); margin:0 0 10px; font-weight:400;
}
.verdict p{ margin:0 0 14px; color:var(--ivory-2); font-size:16px; }
.assay-actions{ display:flex; gap:12px; justify-content:center; margin-top:28px; }
.btn{
  font-family:var(--ui); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  background:var(--brass); color:#191308; border:1px solid var(--brass);
  padding:13px 26px; border-radius:2px; cursor:pointer; transition:.2s;
}
.btn:hover{ background:var(--brass-hi); border-color:var(--brass-hi); }
.btn.ghost{ background:none; color:var(--ivory-3); border-color:rgba(236,227,210,.20); }
.btn.ghost:hover{ color:var(--ivory); border-color:var(--ivory-3); }

.result{ text-align:center; padding:56px 0; }
.result h2{ font-size:44px; }
.result .score{ font-family:var(--display); font-size:74px; color:var(--brass-hi); line-height:1; margin:22px 0 8px; }

/* ---------- footer ---------- */
footer{
  border-top:var(--rule); margin-top:80px; padding:38px 0 60px;
  font-size:13.5px; color:#6b6152;
}
footer .wrap{ display:flex; gap:30px; flex-wrap:wrap; justify-content:space-between; }
footer a{ color:var(--ivory-3); }

/* ---------- responsive ---------- */
@media (max-width: 1080px){
  .stage, .detail{ grid-template-columns:1fr; gap:44px; }
  .detail .plinth{ position:static; max-width:420px; }
}
@media (max-width: 980px){
  header.top .wrap{ gap:16px; }
  .mark b{ font-size:21px; letter-spacing:.16em; }
  .mark span{ display:none; }
  nav.top-nav button{ padding:8px 10px; font-size:10px; letter-spacing:.13em; }
}
@media (max-width: 620px){
  nav.top-nav button{ padding:7px 7px; font-size:9px; letter-spacing:.08em; }
}

@media (max-width: 720px){
  .wrap{ padding:0 20px; }
  header.top .wrap{ height:64px; }
  .card{ padding:30px 24px 34px; }
  .card h2{ font-size:29px; }
  .card .claim{ font-size:20px; }
  .duel .sides{ grid-template-columns:1fr; gap:18px; }
  .duel .vs{ padding:0; }
  .q-card{ padding:28px 22px; }
  .q-text{ font-size:22px; }
  .tray{ padding:26px 18px 30px; }
  .slots{ grid-template-columns:repeat(auto-fill,minmax(116px,1fr)); gap:20px 14px; }
}

@media (prefers-reduced-motion: reduce){
  .view.on{ animation:none; }
  *{ transition-duration:.01ms !important; }
}