/* THE ARC RESERVE — global shell.
   Section-specific CSS ships scoped inside each <section>. */

:root{
  --ground:#0B0F0D; --ground-2:#111714; --ground-3:#18201C;
  /* --green-dim was #5E7568 — 3.89:1 on the ground, which fails WCAG AA for the
     body copy, eyebrows and controls that use it. #6A8374 is 4.71:1. */
  --ink:#D8C68A; --ink-dim:#9C8F63; --green:#8FAE9B; --green-dim:#6A8374;
  --paper:#F1EADA; --rule:#24302A; --rule-soft:#1A231E;
  --crit:#C4705F;
  --wrap:1100px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0; background:var(--ground); color:var(--paper);
  font-family:Newsreader,Georgia,"Times New Roman",serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:24px}
.mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
a{color:var(--ink); text-decoration:none; border-bottom:1px solid rgba(216,198,138,.32)}
a:hover{border-bottom-color:var(--ink)}
:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
img,svg{max-width:100%}

/* the sticky masthead must not swallow the top of whatever an anchor lands on */
#main,#mint,#ladder,#gallery,#ethos,#schedule,.hero-root{scroll-margin-top:120px}
@media (min-width:721px){ #main,#mint,#ladder,#gallery,#ethos,#schedule,.hero-root{scroll-margin-top:84px} }
main:focus{outline:none}

.skip-link{
  /* fixed, not absolute: an absolute skip link is parked at document top and is
     invisible the moment the page is scrolled */
  position:fixed; left:8px; top:-64px; z-index:100;
  font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.13em;
  text-transform:uppercase; padding:13px 16px; min-height:44px; border:1px solid var(--ink);
  background:var(--ground); color:var(--ink); border-radius:2px; transition:top .12s ease;
}
.skip-link:focus{top:8px}

.eyebrow{
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--green-dim);
}
.rule{height:1px; background:var(--rule); border:0; margin:0}

/* ─── masthead ─── */
.mast{
  position:sticky; top:0; z-index:40; background:rgba(11,15,13,.92);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--rule);
}
.mast-in{
  max-width:var(--wrap); margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.mast-name{
  font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink); border:0;
  display:inline-flex; align-items:center; min-height:44px;
}
.mast-nav{display:flex; gap:4px 12px; margin-left:auto; flex-wrap:wrap; align-items:center}
.mast-nav a{
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--green-dim); border:0;
  /* 18px of text is not a tap target; the padding makes the hit area 44px tall */
  display:inline-flex; align-items:center; min-height:44px; min-width:32px;
  justify-content:center; padding-inline:6px;
}
.mast-nav a:hover{color:var(--ink)}
.btn{
  font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.13em;
  text-transform:uppercase; padding:9px 16px; cursor:pointer; min-height:44px;
  background:transparent; color:var(--ink); border:1px solid var(--ink-dim); border-radius:2px;
}
.btn:hover{background:var(--ink); color:var(--ground)}
.btn.is-connected{border-color:var(--green-dim); color:var(--green)}
/* .4 was too faint to read the pre-deploy / sale-closed message it carries */
.btn:disabled{opacity:.55; cursor:not-allowed}
.btn:disabled:hover{background:transparent; color:var(--ink)}

/* ─── mint counter ─── */
#mint{padding-block:72px}
.mint-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start}
@media (max-width:820px){ .mint-grid{grid-template-columns:1fr; gap:36px} }

.mint-h{font-size:34px; font-weight:400; margin:14px 0 0; letter-spacing:-.01em}
.mint-sub{color:var(--green); margin:12px 0 0; max-width:48ch}

.ledger{border-top:1px solid var(--rule); margin-top:28px}
.ledger-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:11px 0; border-bottom:1px solid var(--rule-soft);
  font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.09em;
}
.ledger-row dt{text-transform:uppercase; color:var(--green-dim); margin:0}
.ledger-row dd{margin:0; color:var(--ink); font-variant-numeric:tabular-nums}

.progress{height:5px; background:var(--ground-3); margin-top:24px; position:relative; overflow:hidden}
.progress i{position:absolute; inset:0 auto 0 0; background:var(--ink); width:0; transition:width .6s ease}

.panel{border:1px solid var(--rule); background:var(--ground-2); padding:26px}
.panel h3{
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--green-dim); margin:0 0 20px; font-weight:400;
}
.qty-row{display:flex; gap:8px; align-items:stretch}
#qty{
  flex:1; min-width:0; background:var(--ground); border:1px solid var(--rule);
  color:var(--paper); font-family:"JetBrains Mono",monospace; font-size:22px;
  padding:12px 14px; text-align:center; border-radius:2px;
}
#qty::-webkit-outer-spin-button,#qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#qty{-moz-appearance:textfield}
.qty-preset{
  background:transparent; border:1px solid var(--rule); color:var(--green-dim);
  font-family:"JetBrains Mono",monospace; font-size:11px; padding:0 13px; cursor:pointer; border-radius:2px;
  min-width:44px; min-height:44px;
}
.qty-preset:hover{border-color:var(--ink-dim); color:var(--ink)}

.cost{
  display:flex; justify-content:space-between; align-items:baseline;
  margin:20px 0; padding-top:16px; border-top:1px solid var(--rule);
  font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.1em; color:var(--green-dim);
}
.cost b{font-size:20px; color:var(--ink); font-weight:400; font-variant-numeric:tabular-nums}

#mint-cta{width:100%; padding:15px; font-size:12.5px; background:var(--ink); color:var(--ground); border-color:var(--ink)}
#mint-cta:hover{background:var(--paper); border-color:var(--paper)}

#mint-status{
  font-family:"JetBrains Mono",monospace; font-size:11.5px; line-height:1.55;
  margin-top:14px; min-height:2.6em; color:var(--green-dim);
}
#mint-status[data-kind="err"]{color:var(--crit)}
#mint-status[data-kind="ok"]{color:var(--green)}
#mint-status[data-kind="wait"]{color:var(--ink)}
#mint-receipt{font-family:"JetBrains Mono",monospace; font-size:11px; margin-top:6px}
.wallet-line{
  display:flex; justify-content:space-between; font-family:"JetBrains Mono",monospace;
  font-size:11px; color:var(--green-dim); margin-top:18px; padding-top:14px; border-top:1px solid var(--rule-soft);
}

/* ─── gallery ─── */
#gallery{padding-block:72px; border-top:1px solid var(--rule)}
.gal-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; margin-top:28px}
.gal-item{border:1px solid var(--rule); background:var(--ground-2); padding:12px}
.gal-item figcaption{
  font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.1em;
  color:var(--green-dim); margin-top:10px; display:flex; justify-content:space-between;
}

/* ─── footer ─── */
footer{border-top:1px solid var(--rule); margin-top:72px; padding-block:40px 64px}
.foot-grid{display:flex; flex-wrap:wrap; gap:28px 56px; justify-content:space-between}
footer p{margin:0; font-size:13.5px; color:var(--green-dim); max-width:56ch}
.foot-links{display:flex; gap:4px 14px; flex-wrap:wrap; align-items:center}
.foot-links a{
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; border:0; color:var(--green-dim);
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; min-width:44px; padding-inline:6px;
}
.foot-links a:hover{color:var(--ink)}
/* was color:var(--rule) — 1.4:1, i.e. the contract addresses were invisible */
.addr{font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--ink-dim); word-break:break-all; margin-top:18px}
.addr span{color:var(--paper)}

.noscript-note{
  font-family:"JetBrains Mono",monospace; font-size:11.5px; line-height:1.55;
  color:var(--crit); margin:0 0 18px;
}

/* pre-deploy: the em-dashes are deliberate, so say so rather than look broken */
.is-predeploy .stat-live-value{color:var(--green-dim)}
.is-predeploy .progress{opacity:.45}

/* ─── 404 ─── */
.err-wrap{padding-block:96px 120px; max-width:720px; margin-inline:auto}
.err-h{font-size:clamp(40px,8vw,76px); font-weight:400; line-height:1.02; letter-spacing:-.015em; color:var(--paper); margin:14px 0 0}
.err-sub{font-size:clamp(16px,2.1vw,20px); line-height:1.5; color:var(--green); max-width:46ch; margin:16px 0 0}
.err-ledger{margin-top:0}
.err-actions{margin-top:34px}
.err-btn{display:inline-flex; align-items:center; text-decoration:none; border-bottom:0}
.err-btn:hover{border-bottom:0}

/* ─── order of issue ─── */
.stages{
  list-style:none; margin:30px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.stages li{
  display:grid; grid-template-columns:auto 1fr; gap:4px 12px; align-content:start;
  padding:16px 18px; border-left:1px solid var(--rule-soft); opacity:.55;
}
.stages li:first-child{border-left:0; padding-left:0}
.stages .stage-no{
  grid-row:span 2; font-family:Newsreader,Georgia,serif; font-size:26px; line-height:1;
  color:var(--ink-dim); min-width:28px;
}
.stages .stage-name{
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--green);
}
.stages .stage-desc{font-size:14px; color:var(--green-dim); line-height:1.45}
.stages li.is-done{opacity:.8}
.stages li.is-done .stage-name::after{content:" · done"; color:var(--green-dim)}
.stages li.is-now{opacity:1}
.stages li.is-now .stage-no{color:var(--ink)}
.stages li.is-now .stage-name{color:var(--ink)}
.stages li.is-now .stage-name::after{content:" · now"; color:var(--ink-dim)}
.stage-note{
  font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.06em;
  color:var(--green); margin:12px 0 0; min-height:1.5em;
}
@media (max-width:720px){
  .stages{grid-template-columns:1fr}
  .stages li{border-left:0; border-top:1px solid var(--rule-soft); padding-left:0}
  .stages li:first-child{border-top:0}
}

/* ─── exchange ─── */
#exchange{padding-block:72px}
.mint-sub code{
  font-family:"JetBrains Mono",monospace; font-size:.86em; color:var(--ink);
  background:var(--ground-3); padding:1px 5px; border-radius:2px;
}
.ex-addr{font-family:"JetBrains Mono",monospace; font-size:11px; word-break:break-all; text-align:right}
.ex-addr a{margin-left:6px}

.ex-costs{width:100%; border-collapse:collapse; margin-top:28px; font-variant-numeric:tabular-nums}
.ex-costs caption{
  text-align:left; font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--green-dim); padding-bottom:10px;
}
.ex-costs th{
  text-align:left; font-family:"JetBrains Mono",monospace; font-size:10px; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase; color:var(--green-dim);
  padding:0 12px 8px 0; border-bottom:1px solid var(--rule);
}
.ex-costs td{padding:11px 12px 11px 0; border-bottom:1px solid var(--rule-soft); font-size:15px}
.ex-costs td:last-child, .ex-costs th:last-child{text-align:right; padding-right:0}
.ex-costs td:last-child{font-family:"JetBrains Mono",monospace; font-size:12.5px; color:var(--ink)}
.ex-fine{font-size:14px; color:var(--green-dim); margin:18px 0 0; max-width:52ch}

.ex-state{margin:0 0 18px; display:grid; gap:8px}
.ex-state div{
  display:flex; justify-content:space-between; gap:12px;
  font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.06em;
}
.ex-state dt{color:var(--green-dim); text-transform:uppercase; letter-spacing:.12em}
.ex-state dd{margin:0; color:var(--ink); text-align:right}

.ex-holdings{
  display:grid; grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); margin-bottom:6px;
}
.ex-holdings div{display:flex; flex-direction:column; align-items:center; gap:2px; padding:12px 2px}
.ex-holdings div + div{border-left:1px solid var(--rule-soft)}
.ex-holdings b{font-family:Newsreader,Georgia,serif; font-weight:400; font-size:24px; color:var(--paper); font-variant-numeric:tabular-nums}
.ex-holdings span{font-family:"JetBrains Mono",monospace; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--green-dim)}

.ex-actions{list-style:none; margin:0; padding:0}
.ex-actions li{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:9px 0; border-bottom:1px solid var(--rule-soft); font-size:15px;
}
.ex-btn{min-width:132px; padding:8px 12px; font-size:10.5px}
.ex-btn:not(:disabled){border-color:var(--ink); color:var(--ink)}

#ex-msg{
  font-family:"JetBrains Mono",monospace; font-size:11.5px; line-height:1.55;
  margin-top:14px; min-height:2.6em; color:var(--green-dim);
}
#ex-msg[data-kind="err"]{color:var(--crit)}
#ex-msg[data-kind="ok"]{color:var(--green)}
#ex-msg[data-kind="wait"]{color:var(--ink)}
#ex-receipt{font-family:"JetBrains Mono",monospace; font-size:11px; margin:0 0 14px}
.ex-view{width:100%}

.ex-notes{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; margin-top:28px}
.ex-notes:empty{display:none}
.ex-note{margin:0; border:1px solid var(--rule); background:var(--ground-2); padding:10px}
.ex-note img, .ex-note-img{display:block; width:100%; height:auto; aspect-ratio:1000/425}
.ex-note-img{background:var(--ground-3)}
.ex-note figcaption{font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.1em; color:var(--green-dim); margin-top:8px}
.ex-empty{color:var(--green-dim); font-size:15px}

@media (max-width:520px){
  .ex-actions li{flex-direction:column; align-items:stretch}
  .ex-btn{width:100%}
  .ex-holdings b{font-size:20px}
}


/* ─── mint, made the main event ─── */
.btn-mint{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:"JetBrains Mono",monospace; font-weight:500; text-transform:uppercase;
  letter-spacing:.16em; text-decoration:none; cursor:pointer;
  background:var(--ink); color:var(--ground); border:1px solid var(--ink); border-radius:2px;
  box-shadow:0 0 0 1px rgba(11,15,13,.4) inset, 0 10px 30px -12px rgba(216,198,138,.55);
  transition:background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.btn-mint:hover{background:var(--paper); border-color:var(--paper); color:var(--ground);
  box-shadow:0 0 0 1px rgba(11,15,13,.4) inset, 0 14px 38px -12px rgba(241,234,218,.6)}
.btn-mint:active{transform:translateY(1px)}
.btn-mint:focus-visible{outline:2px solid var(--paper); outline-offset:3px}
.btn-mint-xl{min-height:64px; padding:0 34px; font-size:15px}
.btn-mint-sm{min-height:40px; padding:0 18px; font-size:11.5px; box-shadow:none}
.btn-mint.is-closed{background:transparent; color:var(--ink); box-shadow:none}
.btn-mint:disabled{opacity:.45; cursor:not-allowed; box-shadow:none}
.btn-mint:disabled:hover{background:var(--ink); color:var(--ground); border-color:var(--ink)}
@media (prefers-reduced-motion:no-preference){
  #hero-mint:not(.is-closed){animation:mintGlow 2.8s ease-in-out infinite}
}
@keyframes mintGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(11,15,13,.4) inset, 0 10px 30px -12px rgba(216,198,138,.45)}
  50%{box-shadow:0 0 0 1px rgba(11,15,13,.4) inset, 0 12px 44px -8px rgba(216,198,138,.8)}
}

.hero-cta{display:flex; align-items:center; gap:22px 28px; flex-wrap:wrap; margin:6px 0 8px}
.hero-count{display:flex; align-items:baseline; gap:8px; font-family:"JetBrains Mono",monospace}
.hero-count b{font-family:Newsreader,Georgia,serif; font-weight:400; font-size:38px; color:var(--paper); font-variant-numeric:tabular-nums}
.hero-count span{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--green-dim)}

/* the panel becomes the loudest thing in its section */
#mint .panel{border-color:var(--ink); padding:30px}
.mint-price{display:flex; align-items:center; gap:14px; margin:-4px 0 22px}
.mint-price b{font-family:Newsreader,Georgia,serif; font-weight:400; font-size:64px; line-height:.9; color:var(--ink)}
.mint-price span{font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--green)}
.qty-step{
  min-width:52px; min-height:52px; font-size:24px; line-height:1; cursor:pointer;
  background:var(--ground); color:var(--ink); border:1px solid var(--ink-dim); border-radius:2px;
}
.qty-step:hover{border-color:var(--ink); background:var(--ground-3)}
#mint-cta.btn-mint{width:100%; letter-spacing:.2em; font-size:15px; padding:0 20px; min-height:64px}
.mint-note{font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.08em; color:var(--green-dim); margin:10px 0 0; text-align:center}

/* phones: a mint bar that follows you */
.mint-dock{display:none}
@media (max-width:720px){
  .mast .btn-mint-sm{min-height:44px; padding:0 14px}
  .btn-mint-xl{width:100%}
  .hero-cta{flex-direction:column; align-items:stretch}
  .mint-dock{
    display:flex; justify-content:space-between; align-items:center; gap:12px;
    position:fixed; left:12px; right:12px; bottom:12px; z-index:60;
    padding:10px 10px 10px 16px; border:1px solid var(--ink); border-radius:3px;
    background:rgba(11,15,13,.94); backdrop-filter:blur(8px); text-decoration:none;
    font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.1em; color:var(--green);
    box-shadow:0 10px 40px -10px rgba(0,0,0,.8);
  }
  .mint-dock b{color:var(--paper); font-weight:500}
  .mint-dock-go{background:var(--ink); color:var(--ground); padding:11px 14px; border-radius:2px; text-transform:uppercase; letter-spacing:.14em}
  .mint-dock.is-closed{display:none}
  body{padding-bottom:84px}
}