/* Trothwell — the desk. Cut-paper against a near-black ground, one teal ink.
   Written for this drop; nothing here is inherited from another page. */

:root{
  --ground:#0A0C0C;
  --ground2:#101413;
  --paper:#F2EDE3;
  --paper2:#E4DDCE;
  --ink:#141312;
  --teal:#22E0CC;
  --teal-d:#0E9E90;
  --warn:#FF7A6B;
  --hair:rgba(242,237,227,.14);
  --strip-h:58px;
  --disp:'Unbounded',ui-sans-serif,system-ui,sans-serif;
  --body:'IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ground);
  color:var(--paper);
  font-family:var(--body);
  font-size:16px;line-height:1.5;
  padding-top:var(--strip-h);
  overflow-x:hidden;
  min-height:100vh;
}
a{color:inherit}
h1,h2,h3{font-family:var(--disp);font-weight:800;letter-spacing:-.02em;margin:0}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer}
/* .col-side sets display:grid, which beats the [hidden] attribute outright — this is what kept the side
   column on screen on every route that had already switched it off. */
[hidden]{display:none !important}

/* ---------- fixed chrome ---------- */
#strip{
  position:fixed;top:0;left:0;right:0;z-index:40;
  height:var(--strip-h);
  display:flex;align-items:center;gap:10px;
  padding:0 12px;
  background:rgba(10,12,12,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hair);
}
.mark{display:flex;align-items:center;gap:8px;text-decoration:none;flex:0 0 auto}
.mark img{width:30px;height:30px;border-radius:5px}
.mark span{font-family:var(--disp);font-weight:800;font-size:14px;letter-spacing:-.03em}
.routes{display:flex;gap:2px;flex:1 1 auto;min-width:0;overflow:hidden}
.routes a{
  text-decoration:none;font-size:12.5px;padding:5px 8px;border-radius:999px;
  color:rgba(242,237,227,.55);white-space:nowrap;
}
.routes a.on{color:var(--ground);background:var(--teal);font-weight:600}
.buypill{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-decoration:none;line-height:1.05;
  padding:6px 12px;border-radius:8px;
  background:var(--teal);color:#062320;
  border:1px solid var(--teal);
  box-shadow:3px 3px 0 var(--teal-d);
}
.buypill .tick{font-family:var(--disp);font-weight:800;font-size:12px;letter-spacing:-.02em}
.buypill #buyState{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;opacity:.75}
.buypill.cold{background:transparent;color:var(--teal);border-style:dashed;box-shadow:none}

/* Under ~560px the strip has to carry four routes AND the buy control. The wordmark is the one thing the
   logo already says, so it goes first — the routes must never be the part that gets clipped. */
@media (max-width:559px){
  #strip{gap:6px;padding:0 9px}
  .mark span{display:none}
  .mark img{width:28px;height:28px}
  .routes{gap:0}
  .routes a{font-size:11.5px;padding:5px 6px}
  .buypill{padding:6px 10px}
  .buypill .tick{font-size:11px}
  .buypill #buyState{font-size:9px}
}

/* ---------- stage ---------- */
#stage{
  max-width:1180px;margin:0 auto;padding:16px 12px 30px;
  display:grid;grid-template-columns:1fr;gap:16px;
}
.col-full{grid-column:1/-1}

/* ---------- the slip ---------- */
.slipcard{
  position:relative;
  background:var(--paper);color:var(--ink);
  padding:20px 18px 22px;
  /* torn deckle: a clipped ragged edge top and bottom */
  clip-path:polygon(0 6px,4% 1px,9% 7px,15% 2px,22% 8px,29% 1px,36% 6px,44% 0,52% 7px,60% 1px,68% 6px,76% 0,84% 7px,91% 2px,97% 7px,100% 2px,100% calc(100% - 6px),95% 100%,88% calc(100% - 6px),80% calc(100% - 1px),72% calc(100% - 7px),64% calc(100% - 1px),55% calc(100% - 6px),47% 100%,39% calc(100% - 5px),31% calc(100% - 1px),23% calc(100% - 7px),15% calc(100% - 2px),8% calc(100% - 6px),3% calc(100% - 1px),0 calc(100% - 5px));
  box-shadow:0 18px 40px rgba(0,0,0,.5);
}
.slipnote{font-size:14px;color:#5d5850;padding:26px 0;text-align:center}
.sliphead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.slipid{font-family:var(--disp);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#7a746a}
.slipphase{
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  padding:3px 9px;border-radius:999px;background:var(--ink);color:var(--paper);
}
.slipphase.hot{background:var(--teal-d);color:#04211e}
.slipphase.broke{background:var(--warn);color:#2b0d08}

.pledgeline{margin:14px 0 2px;font-family:var(--disp);font-weight:800;letter-spacing:-.045em;line-height:.9;
  font-size:clamp(44px,17vw,78px)}
.pledgeword{display:block;font-family:var(--body);font-weight:600;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:#7a746a;margin-bottom:2px}
.pledgesub{font-size:13.5px;color:#4f4a43;margin:8px 0 0}
/* the display face draws an em dash as a solid slab at 100px — the empty state says it in words instead */
.nil{font-family:var(--body);font-weight:500;font-size:clamp(20px,5vw,30px);letter-spacing:-.01em;color:#8b857a}
.bondnum .nil{font-size:20px}

/* the wax seal = the bond */
.waxrow{display:flex;align-items:center;gap:14px;margin:18px 0 4px;padding-top:14px;border-top:2px solid rgba(20,19,18,.16)}
.wax{position:relative;width:62px;height:62px;flex:0 0 auto}
.wax i{
  position:absolute;top:0;width:calc(50% - 2px);height:100%;background:var(--teal);
  transition:transform .5s cubic-bezier(.2,.8,.3,1);
}
.wax i.l{left:0;border-radius:50% 0 0 50%;clip-path:polygon(0 0,74% 0,100% 18%,80% 38%,100% 56%,78% 76%,96% 100%,0 100%)}
.wax i.r{right:0;border-radius:0 50% 50% 0;clip-path:polygon(26% 0,100% 0,100% 100%,4% 100%,22% 76%,0 56%,20% 38%,0 18%)}
.wax.cracked i.l{transform:translateX(-10px) rotate(-8deg)}
.wax.cracked i.r{transform:translateX(10px) rotate(8deg)}
.bondfig{min-width:0}
.bondnum{font-family:var(--disp);font-weight:800;font-size:26px;letter-spacing:-.03em;line-height:1}
.bondlab{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#7a746a}
.bondwho{font-size:12px;color:#4f4a43;margin-top:3px;word-break:break-all}

/* the room bar: what is on the slip against what stands behind it */
.roombar{margin-top:16px}
.roomhead{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:#7a746a;margin-bottom:6px}
.roomtrack{position:relative;height:30px;background:var(--paper2);overflow:hidden}
.roomtrack i{position:absolute;inset:0 auto 0 0;background:var(--ink);transition:width .5s ease}
.roomtrack u{position:absolute;top:0;bottom:0;width:3px;background:var(--teal-d);text-decoration:none}
.roomtrack b{position:absolute;inset:0 0 0 auto;background:repeating-linear-gradient(45deg,var(--warn),var(--warn) 5px,transparent 5px,transparent 10px)}
.roomfoot{display:flex;justify-content:space-between;font-size:12px;color:#4f4a43;margin-top:6px;gap:8px;flex-wrap:wrap}
.roomfoot .cover{font-weight:600;color:var(--ink)}
.roomfoot .over{color:#b23c2c;font-weight:600}
.slipstat{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(20,19,18,.16);margin-top:16px}
.slipstat div{background:var(--paper);padding:9px 8px}
.slipstat dt{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#7a746a;margin:0}
.slipstat dd{margin:2px 0 0;font-family:var(--disp);font-weight:600;font-size:16px;letter-spacing:-.02em}
.verdict{margin-top:16px;padding:12px 14px;background:var(--ink);color:var(--paper)}
.verdict b{font-family:var(--disp);letter-spacing:-.02em}
.verdict.broke{background:var(--warn);color:#2b0d08}

/* ---------- the action bay ---------- */
.actbay{margin-top:14px}
.actcard{background:var(--ground2);border:1px solid var(--hair);padding:14px}
.actcard h3{font-size:14px;margin-bottom:4px}
.acthint{font-size:12.5px;color:rgba(242,237,227,.55);margin:0 0 12px}
.dialwrap{margin:6px 0 14px}
.dialtop{display:flex;justify-content:space-between;align-items:baseline}
.dialnum{font-family:var(--disp);font-weight:800;font-size:38px;letter-spacing:-.04em;color:var(--teal);line-height:1}
.dialside{font-size:12px;color:rgba(242,237,227,.55);text-align:right}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:34px;background:transparent;margin:4px 0 0;
}
input[type=range]::-webkit-slider-runnable-track{height:10px;background:rgba(242,237,227,.16);border-radius:0}
input[type=range]::-moz-range-track{height:10px;background:rgba(242,237,227,.16)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:22px;height:30px;margin-top:-10px;
  background:var(--teal);border:none;border-radius:2px;box-shadow:2px 2px 0 var(--teal-d);
}
input[type=range]::-moz-range-thumb{width:22px;height:30px;background:var(--teal);border:none;border-radius:2px}
.amtrow{display:flex;gap:8px;align-items:stretch}
.amtrow input[type=text]{
  flex:1 1 auto;min-width:0;background:var(--ground);border:1px solid var(--hair);color:var(--paper);
  font-family:var(--disp);font-size:17px;padding:10px 12px;border-radius:0;
}
.amtrow input[type=text]:focus{outline:2px solid var(--teal);outline-offset:-2px}
.amtunit{display:flex;align-items:center;font-size:12px;color:rgba(242,237,227,.5);padding:0 2px}
.chiprow{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.chiprow button{background:transparent;border:1px solid var(--hair);color:rgba(242,237,227,.75);
  font-size:12px;padding:5px 10px;border-radius:999px}
.chiprow button:hover{border-color:var(--teal);color:var(--teal)}
.doit{
  display:block;width:100%;margin-top:12px;padding:15px 12px;border:none;
  background:var(--teal);color:#062320;font-family:var(--disp);font-weight:800;font-size:15px;
  letter-spacing:-.02em;box-shadow:4px 4px 0 var(--teal-d);
}
.doit:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--teal-d)}
.doit[disabled]{opacity:.4;box-shadow:none;cursor:not-allowed}
.doit.ghost{background:transparent;color:var(--teal);border:1px dashed var(--teal);box-shadow:none}
.capline{font-size:12px;color:rgba(242,237,227,.5);margin:10px 0 0;text-align:center}
.capline b{color:var(--warn)}

/* ---------- the side column ---------- */
.col-side{display:grid;gap:14px;align-content:start}
.col-side h2{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(242,237,227,.5);font-weight:600;font-family:var(--body)}
.vaultjar,.rulecard,.tape{background:var(--ground2);border:1px solid var(--hair);padding:14px}
.jarnum{font-family:var(--disp);font-weight:800;font-size:clamp(34px,9vw,46px);letter-spacing:-.04em;
  color:var(--teal);margin:6px 0 0;line-height:1}
.jarsub{font-size:12.5px;color:rgba(242,237,227,.55);margin:4px 0 10px}
.jarbar{height:8px;background:rgba(242,237,227,.1);position:relative;overflow:hidden}
.jarbar i{position:absolute;left:0;bottom:0;top:0;width:0;background:var(--teal);transition:width .6s ease;height:100% !important}
.ruleline{font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:-.02em;margin:8px 0 8px;line-height:1.25}
.ruleprose{font-size:13px;color:rgba(242,237,227,.6);margin:0 0 10px}
.rulemore{font-size:12.5px;color:var(--teal);text-decoration:none}
#tapeList{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:7px}
#tapeList li{display:flex;gap:8px;font-size:12.5px;color:rgba(242,237,227,.72);align-items:baseline}
#tapeList li.quiet{color:rgba(242,237,227,.4);font-style:italic}
#tapeList .k{flex:0 0 auto;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ground);background:var(--teal);padding:1px 5px}
#tapeList .k.put{background:var(--paper2);color:var(--ink)}
#tapeList .w{font-family:var(--disp);font-size:11.5px;opacity:.7}
#tapeList time{margin-left:auto;font-size:11px;opacity:.45;flex:0 0 auto}

/* ---------- book / rules / wallet pages ---------- */
.pagehead{margin-bottom:14px}
.pagehead h1{font-size:clamp(26px,7vw,40px);letter-spacing:-.04em}
.pagehead p{color:rgba(242,237,227,.6);font-size:14px;margin:6px 0 0}
.bookrow{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--hair)}
.bookrow .no{font-family:var(--disp);font-size:12px;color:rgba(242,237,227,.4)}
.bookrow .verd{font-family:var(--disp);font-weight:800;font-size:15px;letter-spacing:-.02em}
.bookrow .verd.kept{color:var(--teal)}
.bookrow .verd.broke{color:var(--warn)}
.bookrow .det{font-size:12.5px;color:rgba(242,237,227,.55)}
.bookrow .amt{text-align:right;font-family:var(--disp);font-size:14px}
.rulesec{background:var(--ground2);border:1px solid var(--hair);padding:16px;margin-bottom:12px}
.rulesec h2{font-family:var(--disp);font-size:17px;letter-spacing:-.02em;color:var(--paper);text-transform:none}
.rulesec p{font-size:14px;color:rgba(242,237,227,.72);margin:8px 0 0}
.worked{background:var(--paper);color:var(--ink);padding:14px;margin-top:12px}
.worked h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#7a746a;font-family:var(--body);font-weight:600}
.worked ol{margin:8px 0 0;padding-left:18px;font-size:13.5px}
.worked li{margin:4px 0}
.emptynote{color:rgba(242,237,227,.45);font-size:14px;padding:18px 0;font-style:italic}

/* ---------- footer ---------- */
.deskfoot{
  max-width:1180px;margin:0 auto;padding:18px 12px 34px;
  border-top:1px solid var(--hair);
  display:grid;gap:14px;font-size:12.5px;color:rgba(242,237,227,.5);
}
.lfname{font-family:var(--disp);font-weight:600;color:var(--paper);margin:0;font-size:13px}
.lfline{margin:3px 0 0}
.lfaddrs p{display:flex;gap:8px;margin:0 0 5px;align-items:baseline}
.lfaddrs span{flex:0 0 46px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.65}
.lfaddrs a{color:var(--teal);text-decoration:none;word-break:break-all;font-size:11.5px}
.lflinks{display:flex;gap:14px}
.lflinks a{color:rgba(242,237,227,.7);text-decoration:none}

/* ---------- sheet + toast ---------- */
#sheet{position:fixed;inset:0;z-index:60;background:rgba(4,6,6,.72);display:flex;align-items:flex-end;justify-content:center}
#sheet[hidden]{display:none !important}
.sheetbox{width:100%;max-width:460px;background:var(--ground2);border:1px solid var(--hair);padding:16px;max-height:80vh;overflow:auto}
.sheethead{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.sheethead h3{font-size:15px}
#sheetShut{background:none;border:none;color:var(--paper);font-size:17px}
.wl{display:grid;gap:8px}
.wl button{display:flex;align-items:center;gap:10px;background:var(--ground);border:1px solid var(--hair);
  color:var(--paper);padding:11px;text-align:left}
.wl img{width:22px;height:22px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:80;
  background:var(--paper);color:var(--ink);padding:10px 15px;font-size:13px;max-width:90vw;
  box-shadow:0 8px 24px rgba(0,0,0,.5)}

/* ---------- 720px+: a wider measure, a bigger object ---------- */
@media (min-width:720px){
  :root{--strip-h:64px}
  body{font-size:17px}
  #stage{padding:22px 20px 40px;gap:20px}
  .slipcard{padding:28px 26px 30px}
  .pledgeline{font-size:clamp(66px,11vw,96px)}
  .wax{width:76px;height:76px}
  .bondnum{font-size:32px}
  .slipstat dd{font-size:19px}
  .col-side{grid-template-columns:1fr 1fr}
  .col-side .tape{grid-column:1/-1}
  .deskfoot{grid-template-columns:1.4fr 1.4fr auto;align-items:start;padding-bottom:26px}
}

/* ---------- 1000px+: the page recomposes into two columns ---------- */
@media (min-width:1000px){
  :root{--strip-h:66px}
  #strip{padding:0 24px;gap:18px}
  .mark img{width:34px;height:34px}
  .mark span{font-size:16px}
  .routes{gap:4px;flex:0 0 auto}
  .routes a{font-size:13.5px;padding:6px 12px}
  .buypill{margin-left:auto;padding:8px 18px}
  .buypill .tick{font-size:14px}
  #stage{
    grid-template-columns:minmax(0,1.55fr) minmax(300px,.95fr);
    gap:26px;padding:28px 24px 48px;align-items:start;
  }
  .col-side{grid-template-columns:1fr;position:sticky;top:calc(var(--strip-h) + 24px)}
  .col-side .tape{grid-column:auto}
  .slipcard{padding:34px 34px 36px}
  .pledgeline{font-size:104px}
  .pledgeword{font-size:12px}
  .wax{width:88px;height:88px}
  .bondnum{font-size:38px}
  .slipstat dd{font-size:21px}
  .jarnum{font-size:52px}
  .actcard{padding:18px}
  .deskfoot{padding:22px 24px 40px}
}
@media (min-width:1280px){
  #stage{padding-left:0;padding-right:0}
  .deskfoot{padding-left:0;padding-right:0}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}