/* cycle/btc — BUTT STUDIO editorial print system (DESIGN 21) */
:root{
  --canvas:#e0e0e0; --ink:#000; --paper:#fff; --carbon:#131313; --indigo:#31338e;
  --g1:#6a6a6a; --g2:#9a9a9a; --g3:#c4c4c4;   /* neutral grays for muted text / lines */
  --pad:clamp(18px,4vw,56px);
  --serif:'Playfair Display',Caslon,Georgia,'Times New Roman',serif;
  --num:'Times New Roman',Times,Georgia,serif;   /* stable lining figures for numerals (no jumping) */
  --ui:-apple-system,'Helvetica Neue',Helvetica,Arial,Inter,sans-serif;
  --hair:1px solid var(--ink);
  --hair-soft:1px solid rgba(0,0,0,.18);
  --ease:cubic-bezier(.2,0,0,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--canvas); color:var(--ink); font-family:var(--ui);
  font-weight:400; font-size:18px; letter-spacing:-.03em; line-height:1.2;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
b,strong{font-weight:400}
button{font-family:inherit}
::selection{background:var(--indigo); color:var(--paper)}

/* ---- topbar ---- */
.topbar{
  position:sticky; top:0; z-index:20; background:var(--canvas);
  border-bottom:var(--hair);
  display:flex; align-items:center; gap:28px; padding:18px var(--pad);
}
.wordmark{font-family:var(--serif); font-size:30px; font-weight:400; letter-spacing:-.03em; flex:0 0 auto; line-height:1}
.wordmark .mark{font-style:italic}
.tabs{display:flex; gap:4px; flex:1 1 auto}
.tab{
  background:transparent; border:none; border-radius:0;
  color:var(--g1); font-size:17px; font-weight:400; padding:6px 4px; margin-right:18px; cursor:pointer;
  letter-spacing:-.02em; outline:none; border-bottom:2px solid transparent; transition:color .15s var(--ease), border-color .15s var(--ease);
}
.tab:hover{color:var(--ink)}
.tab:focus-visible{color:var(--ink); border-bottom-color:var(--indigo)}
.tab.active{color:var(--ink); border-bottom-color:var(--ink)}
.topbar-right{display:flex; align-items:center; gap:16px; flex:0 0 auto}
.heat-badge{display:inline-flex; align-items:center; gap:0; font-size:15px; letter-spacing:-.02em; color:var(--paper); background:var(--indigo); border-radius:50px; padding:5px 16px; text-transform:lowercase}
.heat-badge::before{display:none}
.pill{font-size:14px; color:var(--g1)}

/* ---- panels ---- */
.panel{display:none; padding:clamp(12px,1.6vw,22px) var(--pad) 140px; max-width:1760px; margin:0 auto; animation:fade .3s var(--ease)}
.panel.active{display:block}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* section eyebrow */
.tag{font-size:14px; text-transform:uppercase; letter-spacing:.02em; color:var(--ink); margin-bottom:26px; display:flex; align-items:center; gap:14px}
.tag::before{content:""; width:34px; height:1px; background:var(--ink); flex:0 0 auto}
.tag-sm{margin-bottom:16px; font-size:13px}
.lead{max-width:70ch; color:var(--ink); font-size:19px; margin:0 0 40px; line-height:1.35}
.lead.tight{margin-bottom:0}
.lead b{font-weight:400; border-bottom:2px solid var(--indigo)}

/* ---- overview / hero ---- */
.hero-row{display:flex; gap:clamp(32px,6vw,100px); align-items:flex-end; flex-wrap:wrap}
.heat-block{flex:1 1 460px; min-width:300px; position:relative}
.heat-number{
  font-family:var(--num); font-size:clamp(150px,22vw,290px); font-weight:400; line-height:.84;
  letter-spacing:-.04em; color:var(--ink); font-variant-numeric:lining-nums tabular-nums;
}
.heat-scale{display:flex; justify-content:space-between; font-size:13px; text-transform:uppercase; letter-spacing:.02em; color:var(--g1); margin:26px 2px 8px}
.heat-track{position:relative; height:1px; background:var(--ink)}
.heat-marker{position:absolute; top:50%; width:13px; height:13px; border-radius:50%; background:var(--indigo); transform:translate(-50%,-50%); left:0; transition:left .4s var(--ease)}
.hero-side{flex:1 1 360px; min-width:280px; padding-bottom:6px}
.zone-label{font-family:var(--serif); font-size:clamp(38px,4.6vw,56px); font-weight:400; letter-spacing:-.02em; line-height:1; margin-bottom:20px; color:var(--ink)}
.zone-note{font-size:19px; color:var(--ink); margin-bottom:28px; max-width:42ch; line-height:1.35}
.meta-list{list-style:none; display:flex; flex-wrap:wrap; gap:14px 40px}
.meta-list li{font-size:18px; display:flex; flex-direction:column; gap:3px}
.meta-list li span{color:var(--g1); font-size:13px; text-transform:uppercase; letter-spacing:.03em}
.meta-list li b{font-weight:400}

.overview-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:34px clamp(28px,3.5vw,60px); margin-top:clamp(56px,8vw,96px); border-top:var(--hair); padding-top:32px}
.ov-card{padding:0}
.ov-card h4{font-size:13px; font-weight:400; text-transform:uppercase; letter-spacing:.03em; color:var(--g1); margin-bottom:18px}
.ov-card .ov-val{font-family:var(--num); font-size:40px; font-weight:400; letter-spacing:-.02em; font-variant-numeric:lining-nums tabular-nums; line-height:1}
.ov-card .ov-sub{font-size:15px; color:var(--g1); margin-top:11px}

.onchain-block{margin-top:clamp(52px,7vw,84px)}
.onchain-list{margin-top:2px; gap:18px 30px}
.onchain-list li{flex-direction:row; align-items:baseline; gap:10px}
.onchain-list li em{font-style:normal; font-size:12px; letter-spacing:.02em; text-transform:uppercase; padding:2px 11px; border-radius:50px}
.onchain-list li em.in{color:var(--paper); background:var(--indigo)}
.onchain-list li em.ref{color:var(--g1); border:var(--hair-soft)}
.onchain-note{font-size:15px; color:var(--g1); max-width:80ch; margin-top:22px; line-height:1.4}

/* ---- section head + legend ---- */
.section-head{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:20px}
.legend{display:flex; gap:20px; flex-wrap:wrap; font-size:14px; color:var(--ink); flex:0 0 auto}
.lg{position:relative; padding-left:20px}
.lg::before{content:""; position:absolute; left:0; top:50%; width:13px; height:2px; transform:translateY(-50%)}
.lg-price::before{background:var(--ink); height:3px}
.lg-2y::before{background:var(--g1)}
.lg-200w::before{background:var(--g2)}
.lg-cost::before{background:var(--g2); height:0; border-top:2px dashed var(--g1); width:14px}
.lg-buy::before{background:var(--indigo); width:9px; height:9px; transform:translateY(-50%) rotate(45deg)}
.lg-top::before{background:rgba(19,19,19,.28); width:13px; height:9px}
.lg-sell::before{background:var(--ink); width:9px; height:9px; border-radius:50%}

/* ---- chart ---- */
.chart-toolbar{display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:14px; margin:0 0 14px}
.ranges{display:flex; gap:8px}
.range{background:transparent; border:var(--hair); border-radius:50px; color:var(--ink); font-size:14px; padding:7px 18px; cursor:pointer; letter-spacing:-.02em; transition:background .15s var(--ease), color .15s var(--ease)}
.range:hover{background:rgba(0,0,0,.06)}
.range.active{background:var(--ink); color:var(--paper)}
.hint{font-size:13px; color:var(--g1)}
.chart-wrap{position:relative; background:var(--paper); border:var(--hair); padding:8px 8px 4px}
.chart-tall #priceChart, #priceChart{width:100%; height:min(80vh,800px); display:block; cursor:crosshair}
.chart-below{margin-top:34px; border-top:var(--hair-soft); padding-top:28px; align-items:flex-start}
.chart-below .lead{margin-bottom:0; max-width:62ch}
#priceChart.grabbing{cursor:grabbing}
.tooltip{position:absolute; pointer-events:none; z-index:5; background:var(--paper); border:var(--hair); border-radius:0; padding:11px 13px; font-size:14px; min-width:158px; transform:translate(-50%,-115%); white-space:nowrap}
.tooltip .tt-date{color:var(--g1); margin-bottom:6px; font-size:12px; text-transform:uppercase; letter-spacing:.02em}
.tooltip .tt-row{display:flex; justify-content:space-between; gap:18px}
.tooltip .tt-row b{font-weight:400}
.chart-scroll{position:relative; height:8px; margin:10px 0 0; background:rgba(0,0,0,.08); cursor:pointer}
.chart-scroll-thumb{position:absolute; top:0; height:100%; min-width:28px; background:rgba(0,0,0,.35); cursor:grab; transition:background .15s var(--ease)}
.chart-scroll-thumb:hover{background:rgba(0,0,0,.55)}
.chart-scroll-thumb.drag{cursor:grabbing; background:var(--ink)}

/* ---- simulator ---- */
.sim-controls{display:flex; align-items:flex-end; gap:28px; flex-wrap:wrap; margin-bottom:48px}
.field{display:flex; flex-direction:column; gap:10px; font-size:13px; text-transform:uppercase; letter-spacing:.03em; color:var(--g1)}
.field input{font-family:var(--num); font-size:30px; font-weight:400; color:var(--ink); background:transparent; border:none; border-bottom:var(--hair); border-radius:0; padding:6px 2px; width:230px; letter-spacing:-.02em; font-variant-numeric:lining-nums tabular-nums; transition:border-color .15s var(--ease)}
.field input:focus{outline:none; border-bottom-color:var(--indigo)}
.presets{display:flex; gap:8px; flex-wrap:wrap}
.preset{font-size:15px; color:var(--ink); cursor:pointer; background:transparent; border:var(--hair); border-radius:50px; padding:9px 18px; letter-spacing:-.02em; transition:background .15s var(--ease), color .15s var(--ease)}
.preset:hover{background:rgba(0,0,0,.06)}
.preset.active{background:var(--ink); color:var(--paper)}

.sim-layout{display:grid; grid-template-columns:minmax(320px,1.1fr) 1fr; gap:clamp(36px,5vw,72px); align-items:start}
.sim-left .big-stat{display:flex; align-items:baseline; gap:14px; margin:2px 0 16px}
.big-val{font-family:var(--num); font-size:clamp(72px,9vw,118px); font-weight:400; letter-spacing:-.03em; line-height:.84; color:var(--ink); font-variant-numeric:lining-nums tabular-nums}
.big-unit{font-size:22px; color:var(--g1)}
.sub-stat{font-size:18px; color:var(--ink); margin-top:9px}
.sub-stat b{font-weight:400; color:var(--g1)}
#edgeSummary{margin-top:18px}
.sim-chart-wrap{margin-top:30px; border-top:var(--hair); padding-top:8px; background:var(--paper); border:var(--hair); padding:8px}
#simChart{width:100%; height:240px; display:block}

.sim-outcomes{display:flex; flex-direction:column; border-top:var(--hair)}
.outcome{padding:26px 0; border-bottom:var(--hair-soft); display:flex; align-items:baseline; justify-content:space-between; gap:18px}
.outcome .o-l h4{font-family:var(--serif); font-size:26px; font-weight:400; letter-spacing:-.02em}
.outcome .o-l p{font-size:15px; color:var(--g1); margin-top:6px}
.outcome .o-r{text-align:right}
.outcome .o-val{font-family:var(--num); font-size:34px; font-weight:400; letter-spacing:-.02em; font-variant-numeric:lining-nums tabular-nums; line-height:1}
.outcome .o-r small{display:block; font-size:14px; color:var(--g1); margin-top:8px}
.outcome.is-strategy .o-l h4::after{content:" ●"; color:var(--indigo); font-family:var(--ui); font-size:14px; vertical-align:middle}
.pos{color:var(--indigo)} .neg{color:var(--ink)}

/* ---- table (print ledger) ---- */
.table-wrap{overflow-x:auto; border-top:var(--hair)}
table{width:100%; border-collapse:collapse; font-size:17px; font-variant-numeric:lining-nums tabular-nums}
th,td{text-align:right; padding:17px 18px; border-bottom:var(--hair-soft); white-space:nowrap; font-weight:400}
th:first-child,td:first-child{text-align:left}
thead th{font-weight:400; font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--g1); border-bottom:var(--hair)}
tbody tr:hover{background:rgba(0,0,0,.035)}
td .hold{color:var(--indigo)}

/* ---- footer ---- */
.foot{color:var(--ink); margin-top:96px; border-top:var(--hair); padding-top:52px}
.foot ul{list-style:none; display:flex; flex-direction:column; gap:18px; max-width:88ch}
.foot li{font-size:16px; line-height:1.45; color:var(--g1)}
.foot li b{color:var(--ink); font-weight:400; border-bottom:2px solid var(--indigo)}

@media (max-width:880px){
  .sim-layout{grid-template-columns:1fr}
  .tabs{order:3; flex-basis:100%; overflow-x:auto}
  .topbar{flex-wrap:wrap; gap:14px}
  .legend{display:none}
  .overview-cards{grid-template-columns:1fr 1fr}
  .ov-card{border-right:none; border-bottom:var(--hair-soft); padding-right:0}
  body{font-size:17px}
}