/* MOSAIC - brand sheet. Pigments and rules are locked; see section II. */
:root{
  --ground:#F5F0DF; --panel:#FAF7EA; --inset:#EEE7D4;
  --stone:#C9BFA8; --stone-strong:#918873;
  --ink:#30372F; --ink-2:#696555;
  --terracotta:#B66650; --sage:#78917C; --slate:#657F89; --ochre:#C7A052;
  --bid:#375B49; --ask:#873F31; --accent:#795B29;
  --display:"Cinzel",serif; --editorial:"Newsreader",Georgia,serif;
  --ui:"Source Sans 3",system-ui,sans-serif; --num:"IBM Plex Mono",monospace;
  --bar:54px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:var(--bar)}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--ui); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
body::before{ /* 2-4% luminance variation, never more */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(90% 60% at 10% 100%, rgba(201,191,168,.22), transparent 70%);
}
a{color:var(--accent); text-underline-offset:3px}

/* ------------------------------------------------ top bar */
.topbar{
  position:fixed; top:0; left:0; right:0; height:var(--bar); z-index:30;
  background:var(--panel); border-bottom:1px solid var(--stone);
  display:flex; align-items:stretch; padding-left:20px;
}
.brandline{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink);
  padding-right:24px; margin-right:4px; flex:0 0 auto}
.brandline img{width:26px; height:26px; display:block}
.brandline b{font-family:var(--display); font-weight:500; font-size:15px; letter-spacing:.15em}
.menu{position:relative; display:flex; align-items:stretch; flex:1; min-width:0}
.menubtn{
  display:flex; align-items:center; gap:11px; height:100%; padding:0 18px;
  background:transparent; border:0; border-right:1px solid var(--stone); cursor:pointer;
  font-family:var(--ui); font-size:14px; color:var(--ink); min-width:230px;
}
.menubtn:hover{background:var(--inset)}
.menubtn .mn{font-family:var(--display); font-size:11px; letter-spacing:.08em; color:var(--accent);
  min-width:26px; text-align:left}
.menubtn .ml{flex:1; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.menubtn .chev{color:var(--stone-strong); transition:transform .14s ease}
.menubtn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.menubtn[aria-expanded="true"]{background:var(--inset)}
.menuhint{display:flex; align-items:center; padding:0 18px; font-size:12.5px;
  color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.menupanel{
  position:absolute; top:100%; left:0; width:360px; z-index:40;
  background:var(--panel); border:1px solid var(--stone-strong); border-top:0; border-radius:0 0 2px 2px;
  box-shadow:0 6px 18px rgb(48 55 47 / 10%), 0 1px 2px rgb(48 55 47 / 8%);
}
.menupanel a{
  display:grid; grid-template-columns:34px 1fr; gap:12px; align-items:baseline;
  padding:11px 16px; text-decoration:none; color:var(--ink);
  border-bottom:1px solid rgba(201,191,168,.55);
}
.menupanel a:last-child{border-bottom:0}
.menupanel a:hover{background:var(--inset)}
.menupanel a.on{background:var(--inset); box-shadow:inset 3px 0 0 var(--ochre)}
.menupanel a .n{font-family:var(--display); font-size:11px; letter-spacing:.06em; color:var(--stone-strong)}
.menupanel a.on .n{color:var(--accent)}
.menupanel a .t{font-size:14px; line-height:1.3}
.menupanel a em{display:block; font-style:normal; font-size:11.5px; color:var(--ink-2); margin-top:3px}

.menupanel a.live .n{color:var(--accent)}
.menupanel a.live{border-bottom:1px solid var(--stone-strong)}

/* ------------------------------------------------ trading screen */
.hdstrip{display:flex; align-items:stretch; gap:1px; background:var(--stone); border:1px solid var(--stone);
  margin-top:16px; flex-wrap:wrap}
.hdstrip div{background:var(--panel); padding:9px 14px; min-width:104px}
.hdstrip div.grow{flex:1; display:flex; align-items:center; justify-content:flex-end}
.hdstrip span{display:block; font-size:10px; letter-spacing:.09em; color:var(--ink-2)}
.hdstrip b{font-family:var(--num); font-size:15px; font-weight:400; font-variant-numeric:tabular-nums}
.hdstrip a{font-size:12px; color:var(--ink-2)}
.tradegrid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:16px; align-items:start;
  transition:opacity .2s ease}
.tradegrid .col{display:flex; flex-direction:column}
.sel{height:36px; border:1px solid var(--stone-strong); background:var(--inset); border-radius:2px;
  font-family:var(--ui); font-size:13px; color:var(--ink); padding:0 8px}
.est{font-family:var(--num); font-size:12.5px; color:var(--ink-2); min-width:120px}
.btn.tiny{height:26px; padding:0 11px; font-size:12px}
.tradenote{font-family:var(--num); font-size:12px; color:var(--ink-2); margin:12px 0 0; min-height:18px}
.tradenote.bad{color:var(--ask)}
.field input::placeholder{color:var(--stone-strong)}

/* ------------------------------------------------ pager */
.pager{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--stone);
  border:1px solid var(--stone); margin-top:18px}
.pager .pg{background:var(--panel); padding:14px 16px; text-decoration:none; color:var(--ink); min-height:62px}
.pager a.pg:hover{background:var(--inset)}
.pager .next{text-align:right}
.pager .dir{display:block; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2)}
.pager .ttl{font-family:var(--display); font-size:15px; letter-spacing:.06em; margin-top:5px; display:block}
.pager .ttl i{font-style:normal; font-size:11px; color:var(--stone-strong); margin-right:9px}
.pager .next .ttl i{margin:0 0 0 9px; float:right}
.pager .empty{background:var(--ground)}

.chain{display:flex; align-items:center; gap:6px; flex:0 0 auto; padding:0 20px;
  border-left:1px solid var(--stone); font-family:var(--num); font-size:11px;
  color:var(--ink); letter-spacing:.02em; white-space:nowrap}
.chain span{color:var(--stone-strong)}
.chain b{font-weight:400; font-variant-numeric:tabular-nums}
.walletslot{display:flex; align-items:center; flex:0 0 auto; padding:0 14px 0 14px;
  border-left:1px solid var(--stone)}
.btn.connect{height:32px; padding:0 15px; font-size:13px; background:var(--ink); color:#F5F0DF;
  border-color:var(--ink); white-space:nowrap; text-decoration:none; display:flex; align-items:center}
.btn.connect:hover{background:#3d453b}
.btn.connect.warn{background:var(--ask); border-color:var(--ask); color:#F6F1E6}
.btn.connect:disabled{opacity:.6; cursor:default}
.acct{display:flex; align-items:center; gap:9px; height:32px; padding:0 12px; text-decoration:none;
  border:1px solid var(--stone-strong); border-radius:2px; background:var(--inset); color:var(--ink);
  font-family:var(--num); font-size:11.5px; white-space:nowrap}
.acct:hover{background:var(--panel)}
.acct .dot{width:7px; height:7px; border-radius:50%; background:var(--bid); display:block}
.acct .bal{color:var(--ink-2)}

/* ------------------------------------------------ numbered sequence */
.runs{list-style:none; margin:14px 0 0; padding:0; border-top:1px solid var(--stone)}
.run{display:grid; grid-template-columns:62px 1fr; gap:18px; padding:16px 0;
  border-bottom:1px solid var(--stone); align-items:start}
.run .rn{font-family:var(--display); font-size:19px; color:var(--stone-strong); letter-spacing:.04em; line-height:1.2}
.run > div > b{font-family:var(--ui); font-size:13px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; display:block; margin-bottom:5px}
.run p{margin:0; font-size:14px; color:#434a41; max-width:76ch}
.twocol{display:grid; grid-template-columns:1fr 1fr; gap:34px; margin-top:12px; align-items:start}
.twocol p{font-size:14px; color:#434a41}
.twocol h4{font-family:var(--ui); font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-2); margin:0 0 10px; font-weight:600}
.formula{font-family:var(--num); font-size:12.5px; line-height:1.75; background:var(--inset);
  border:1px solid var(--stone); border-left:2px solid var(--ochre); padding:12px 14px; margin:12px 0;
  white-space:pre; overflow-x:auto; color:var(--ink)}
.facts.tight div{grid-template-columns:116px 1fr; padding:7px 12px; font-size:12.5px}
.note{font-size:12.5px; color:var(--ink-2); margin-top:11px}

/* ------------------------------------------------ page */
main{padding-top:var(--bar); position:relative; z-index:1}
section.page{padding:0 0 64px}
.page > .wrap:first-child{padding-top:34px}
.wrap{max-width:1216px; margin:0 auto; padding:0 48px}
.plateno{display:flex; align-items:center; gap:14px; margin:0 0 10px}
.plateno .num{font-family:var(--display); font-size:12px; letter-spacing:.14em; color:var(--accent)}
.plateno .bar{height:1px; flex:1; background:var(--stone)}
h2{font-family:var(--display); font-weight:500; font-size:27px; letter-spacing:.08em;
   text-transform:uppercase; margin:0 0 6px}
h3{font-family:var(--ui); font-weight:600; font-size:12.5px; letter-spacing:.09em;
   text-transform:uppercase; color:var(--ink-2); margin:30px 0 11px}
.lede{font-family:var(--editorial); font-size:17.5px; line-height:1.62; color:#434a41; max-width:62ch; margin:0 0 4px}
p{max-width:66ch}

/* ------------------------------------------------ hero */
.hero{position:relative; height:min(78vh,660px); min-height:470px; display:grid;
  place-items:center; border-bottom:1px solid var(--stone); overflow:hidden; padding:0}
.hero img.plate{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero .vignette{position:absolute; inset:0;
  background:radial-gradient(58% 54% at 50% 46%, rgba(250,247,234,.86), rgba(245,240,223,.12) 72%)}
.hero .inscription{position:relative; text-align:center; padding:0 24px}
.hero .inscription img{width:62px; height:62px; margin:0 auto 22px; display:block}
.hero h1{font-family:var(--display); font-weight:500; font-size:clamp(34px,6vw,62px);
  letter-spacing:.22em; margin:0 0 4px; text-indent:.22em}
.hero .sub{font-family:var(--display); font-size:clamp(9px,1.3vw,11.5px); letter-spacing:.42em;
  color:var(--stone-strong); text-indent:.42em; margin:0 0 26px}
.hero .tag{font-family:var(--editorial); font-size:clamp(16px,2vw,20px); color:#434a41; max-width:46ch; margin:0 auto}
.hero .tag em{font-style:italic; color:var(--accent)}

/* ------------------------------------------------ palette */
.pigments{display:grid; grid-template-columns:repeat(7,1fr); gap:1px;
  background:var(--stone); border:1px solid var(--stone); margin-top:14px}
.pig{background:var(--panel); padding:0}
.pig .chip{height:62px; border-bottom:1px solid var(--stone)}
.pig .meta{padding:9px 11px 11px}
.pig .nm{font-size:12.5px; font-weight:600}
.pig .hx{font-family:var(--num); font-size:11.5px; color:var(--ink-2); letter-spacing:.02em}
.pig .ro{font-size:11.5px; color:var(--ink-2); margin-top:5px; line-height:1.42}
.alloc{display:flex; height:30px; border:1px solid var(--stone); margin-top:20px; font-family:var(--num); font-size:10.5px}
.alloc div{display:grid; place-items:center; color:var(--ink-2)}

/* ------------------------------------------------ type */
.typerow{border-top:1px solid var(--stone); padding:17px 0; display:grid;
  grid-template-columns:168px 1fr; gap:26px; align-items:baseline}
.typerow .k{font-size:11.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-2)}
.typerow .k b{display:block; font-family:var(--num); font-size:11px; text-transform:none;
  letter-spacing:0; color:var(--stone-strong); font-weight:400; margin-top:3px}
.sp-display{font-family:var(--display); font-weight:500; font-size:34px; letter-spacing:.08em; text-transform:uppercase}
.sp-editorial{font-family:var(--editorial); font-size:18px; line-height:1.6}
.sp-ui{font-size:15px}
.sp-num{font-family:var(--num); font-size:17px; font-variant-numeric:tabular-nums lining-nums}

/* ------------------------------------------------ panels / components */
.panel{background:var(--panel); border:1px solid var(--stone); border-radius:2px}
.panel>header{height:32px; display:flex; align-items:center; justify-content:space-between;
  padding:0 11px; border-bottom:1px solid var(--stone); background:var(--inset)}
.panel>header .ttl{font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2); font-weight:600}
.panel>header .hint{font-family:var(--num); font-size:10.5px; color:var(--stone-strong)}
.specimens{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:16px; align-items:start}
table.book{width:100%; border-collapse:collapse; font-family:var(--num);
  font-size:12px; font-variant-numeric:tabular-nums lining-nums}
table.book th{font-family:var(--ui); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-2); font-weight:600; text-align:right; padding:0 11px; height:28px;
  border-bottom:1px solid var(--stone); background:var(--panel)}
table.book th:first-child{text-align:left}
table.book td{height:22px; padding:0 11px; text-align:right; border-bottom:1px solid rgba(201,191,168,.42)}
table.book td:first-child{text-align:left}
table.book tr.ask td.px{color:var(--ask)} table.book tr.bid td.px{color:var(--bid)}
table.book tr.spread td{background:var(--inset); color:var(--ink-2); font-family:var(--ui);
  font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; text-align:center}
.ctrls{display:flex; gap:9px; flex-wrap:wrap; align-items:center; padding:13px}
.btn{height:36px; padding:0 17px; border:1px solid var(--stone-strong); background:var(--panel);
  color:var(--ink); border-radius:2px; font-family:var(--ui); font-size:13.5px; cursor:pointer}
.btn:hover{background:var(--inset)}
.btn.buy{background:var(--bid); border-color:var(--bid); color:#F3F0E3; height:40px; font-weight:600}
.btn.sell{background:var(--ask); border-color:var(--ask); color:#F6F1E6; height:40px; font-weight:600}
.btn.ghost{border-color:var(--stone)}
.field{display:flex; align-items:center; height:36px; border:1px solid var(--stone-strong);
  background:var(--inset); border-radius:2px; padding:0 10px; gap:8px}
.field input{border:0; background:transparent; font-family:var(--num); font-size:13px; width:92px;
  color:var(--ink); outline:none; text-align:right}
.field .u{font-size:11px; color:var(--ink-2)}
.chipmark{display:inline-flex; align-items:center; gap:7px; height:24px; padding:0 9px;
  border:1px solid var(--stone); background:var(--inset); border-radius:2px;
  font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2)}
.chipmark i{width:8px; height:8px; display:block}

/* ------------------------------------------------ the depth mosaic */
.depth{display:grid; grid-template-columns:76px 1fr; align-items:center; font-family:var(--num);
  font-size:11.5px; font-variant-numeric:tabular-nums}
.depth .px{text-align:right; padding-right:10px; color:var(--ink-2)}
.depth .row{height:21px; display:flex; gap:1px; align-items:stretch; border-bottom:1px solid rgba(201,191,168,.3)}
.depth .t{display:block; min-width:2px}
.depth .mine{outline:1.5px solid var(--ochre); outline-offset:-1.5px}
.depth .spreadband{height:17px; background:var(--inset); border-top:1px solid var(--stone);
  border-bottom:1px solid var(--stone)}
.depth .legend{grid-column:1/-1; display:flex; gap:16px; padding:10px 0 2px; font-family:var(--ui);
  font-size:11px; color:var(--ink-2)}

/* ------------------------------------------------ plates */
.plates{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; align-items:start}
.plate-fig{border:1px solid var(--stone); background:var(--panel)}
.plate-fig img{width:100%; display:block; border-bottom:1px solid var(--stone)}
.plate-fig figcaption{padding:10px 12px; font-size:12px; color:var(--ink-2)}
.plate-fig figcaption b{color:var(--ink); font-weight:600; display:block; font-size:12.5px; margin-bottom:2px}
.plate-fig.tall{grid-row:span 2}
.plate-fig img{aspect-ratio:3/2; object-fit:cover}
.plate-fig.wide img{aspect-ratio:1029/549}
.plate-fig.tall img{aspect-ratio:1024/1536; object-fit:cover}

.markrow{display:grid; grid-template-columns:150px 150px 1fr; gap:22px; align-items:start; margin-top:12px}
.markrow figure{margin:0}
.markrow img{width:150px; height:150px; display:block; border:1px solid var(--stone); background:var(--panel)}
.markrow figcaption{font-size:11px; color:var(--ink-2); margin-top:7px; line-height:1.4}
.markrow p{font-size:13.5px; color:#434a41; margin:0}

/* ------------------------------------------------ rules list */
.rules{display:grid; grid-template-columns:1fr 1fr; gap:0 30px; margin-top:12px}
.rules div{border-top:1px solid var(--stone); padding:11px 0; font-size:13.5px}
.rules .no{color:var(--ask)} .rules .yes{color:var(--bid)}
.rules b{font-weight:600}

/* ------------------------------------------------ misc */
.band{height:4px; display:flex; margin:0}
.band i{flex:1}
.mono{font-family:var(--num); font-size:12px}
.facts{border:1px solid var(--stone); background:var(--panel); margin-top:16px}
.facts div{display:grid; grid-template-columns:200px 1fr; gap:16px; padding:9px 13px;
  border-bottom:1px solid rgba(201,191,168,.5); font-size:13px}
.facts div:last-child{border-bottom:0}
.facts span{color:var(--ink-2); font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; align-self:center}
.facts b{font-family:var(--num); font-weight:400; font-size:12.5px}
footer{border-top:1px solid var(--stone); padding:22px 48px 54px; max-width:1216px; margin:0 auto;
  font-size:12px; color:var(--ink-2); position:relative; z-index:1;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:baseline}
.flinks{display:flex; gap:22px; flex-wrap:wrap}
.flinks a{color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--stone)}
.flinks a:hover{color:var(--accent); border-bottom-color:var(--accent)}

@media (max-width:1080px){
  .chain{display:none}
  .menuhint{display:none}
  .specimens,.plates,.rules,.twocol,.tradegrid{grid-template-columns:1fr}
  .pigments{grid-template-columns:repeat(4,1fr)}
  .markrow{grid-template-columns:1fr 1fr; }
  .markrow p{grid-column:1/-1}
  .plate-fig.tall{grid-row:auto}
}
@media (max-width:640px){
  .topbar{padding-left:14px}
  .walletslot{padding:0 10px}
  .btn.connect{padding:0 11px; font-size:12.5px}
  .acct .bal{display:none}
  .run{grid-template-columns:44px 1fr; gap:12px}
  .brandline{padding-right:12px}
  .brandline b{display:none}
  .menubtn{min-width:0; flex:1; padding:0 12px; gap:9px}
  .menupanel{position:fixed; top:var(--bar); left:0; right:0; width:auto;
    border-left:0; border-right:0; max-height:calc(100dvh - var(--bar)); overflow-y:auto}
  .pager{grid-template-columns:1fr}
  .pager .next{text-align:left}
  .pager .next .ttl i{float:none; margin:0 9px 0 0}
  .wrap{padding:0 16px}
  footer{padding:24px 16px 44px}
  .typerow{grid-template-columns:1fr; gap:6px}
  .pigments{grid-template-columns:repeat(2,1fr)}
  .markrow img{width:100%; height:auto; aspect-ratio:1}
  .facts div{grid-template-columns:1fr; gap:3px}
  .hero h1{letter-spacing:.14em; text-indent:.14em}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }