/* LOCKUP — the facility office. The world comes off his own avatar and banner: a crude
   felt-tip doodle, flat grey ground, orange doors, grey padlocks, wobbly black marker.
   The window frames come from the early-Mac desktop he dropped first. Every picture is a
   generated plate; the only vectors are the official brand marks. */

:root{
  --desk:#BEBDBD;          /* the grey his plates are drawn on */
  --desk-deep:#A4A3A3;
  --paper:#FFFFFF;
  --paper-2:#EDEDED;
  --ink:#111111;
  --orange:#FB750D;        /* the doors */
  --steel:#999998;         /* the padlocks */
  --rule:3px;
  --shadow:6px 6px 0 var(--ink);
  --radius:14px;
  --display:"Permanent Marker", ui-sans-serif, system-ui, sans-serif;
  --mono:"Chivo Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--desk);
  color:var(--ink);
  font-family:var(--mono);
  font-size:17px;
  line-height:1.5;
  font-synthesis:none;
  padding-bottom:env(safe-area-inset-bottom);
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;letter-spacing:.01em}

.skip{
  position:absolute;left:-9999px;top:0;z-index:50;
  background:var(--ink);color:var(--paper);padding:14px 18px;font-family:var(--display);
}
.skip:focus{left:16px;top:16px}

:where(a,button,[tabindex]):focus-visible{
  outline:4px solid var(--ink);outline-offset:3px;
}

.tk{font-weight:700;white-space:nowrap}

/* ───────────────────────────── the desk ───────────────────────────── */
.desk{
  max-width:1320px;
  margin:0 auto;
  padding:clamp(20px,4vw,56px) clamp(16px,3vw,32px) 120px;
  display:flex;
  flex-direction:column;
  gap:clamp(24px,3.4vw,44px);
}

/* the facility, drawn, with its name written next to it */
.plate{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(20px,3vw,40px);
  align-items:center;
}
.plate__scene{
  width:100%;
  border:var(--rule) solid var(--ink);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  background:var(--desk);
}
.wordmark{
  font-family:var(--display);
  font-size:clamp(46px,6.4vw,92px);
  line-height:.94;
  margin:0 0 14px;
  display:flex;
  flex-direction:column;
}
.wordmark__tk{
  font-size:.42em;
  color:var(--ink);
  background:var(--orange);
  align-self:flex-start;
  padding:.1em .3em .18em;
  border:var(--rule) solid var(--ink);
  border-radius:8px;
  margin-top:.18em;
  transform:rotate(-2deg);
}
.plate__line{
  margin:0;
  font-size:clamp(17px,1.35vw,20px);
  line-height:1.45;
  max-width:46ch;
}

/* ─────────────────────────── the windows ──────────────────────────── */
.win{
  background:var(--paper);
  border:var(--rule) solid var(--ink);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  position:relative;
}
.win[hidden]{display:none}

.win__bar{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:56px;
  padding:0 14px;
  border-bottom:var(--rule) solid var(--ink);
  background:var(--paper-2);
  touch-action:none;
}
.win__title{font-size:clamp(19px,2vw,25px);line-height:1;text-transform:uppercase}
.win__tag{
  margin-left:auto;font-family:var(--mono);font-size:16px;font-weight:700;
  letter-spacing:.06em;
}
.win__box{
  margin-left:auto;
  width:48px;height:40px;
  display:grid;place-items:center;
  font-family:var(--display);font-size:22px;line-height:1;
  background:var(--paper);
  color:var(--ink);
  border:var(--rule) solid var(--ink);
  border-radius:8px;
  cursor:pointer;
}
.win__box:active{transform:translate(2px,2px)}

.win__body{padding:clamp(16px,2.2vw,26px)}
.win__body--paper{background:var(--paper)}
.win__note{margin:0 0 18px;font-size:17px;max-width:74ch}
.win__note--state{font-weight:700}

/* dragged windows sit where they are dropped */
.win.is-dragged{box-shadow:10px 10px 0 var(--ink)}
.win__bar[data-drag]{cursor:grab}
.win__bar[data-drag]:active{cursor:grabbing}

/* ──────────────────────────── the doors ───────────────────────────── */
.doors{
  list-style:none;margin:0 0 clamp(18px,2vw,26px);padding:0;
  display:grid;
  /* four across, so the number plate drawn on the door is big enough to read */
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1.1vw,16px);
}
.doors > li{display:flex}

.door{
  flex:1;
  display:flex;flex-direction:column;
  padding:0;
  background:var(--paper);
  border:var(--rule) solid var(--ink);
  border-radius:10px;
  overflow:hidden;
  cursor:pointer;
  font:inherit;color:inherit;
  text-align:left;
}
.door__frame{
  position:relative;
  aspect-ratio:1260/1716;
  overflow:hidden;
  background:var(--desk);
  border-bottom:var(--rule) solid var(--ink);
}
.door__inside,.door__leaf{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.door__panel{
  position:absolute;inset:0;
  transition:transform .55s cubic-bezier(.2,.8,.25,1);
  will-change:transform;
  z-index:1;
}
.door[aria-expanded="true"] .door__panel{transform:translateY(-100%)}

/* the number, sitting on the blank plate the door was drawn with */
.door__no{
  position:absolute;
  left:7.1%;top:3.85%;width:23.4%;height:7%;
  display:grid;place-items:center;
  font-family:var(--mono);font-size:16px;font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
  z-index:2;
}

.door__tag{
  display:flex;align-items:center;justify-content:center;
  padding:9px 10px;
  font-family:var(--mono);font-size:16px;font-weight:700;letter-spacing:.06em;
  background:var(--paper-2);
  min-height:44px;
}
.door[aria-expanded="true"] .door__tag{background:var(--orange);color:var(--ink)}
.door:hover .door__tag{background:var(--ink);color:var(--paper)}

/* the reserved result slot: it is there before anything is pressed */
.record{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border:var(--rule) solid var(--ink);
  border-radius:10px;
  overflow:hidden;
  background:var(--paper-2);
}
.record__cell{
  padding:12px 14px;
  min-height:76px;
  display:flex;flex-direction:column;justify-content:center;gap:4px;
  border-right:var(--rule) solid var(--ink);
}
.record__cell:last-child{border-right:0}
.record__k{font-size:16px;letter-spacing:.08em;font-weight:700}
.record__v{font-family:var(--display);font-size:clamp(18px,1.7vw,24px);line-height:1.1}

/* ──────────────────────────── the lease ───────────────────────────── */
.stamp{
  display:inline-block;
  margin:0 0 20px;
  padding:10px 16px;
  font-family:var(--display);font-size:clamp(15px,1.4vw,19px);
  letter-spacing:.04em;
  border:var(--rule) solid var(--ink);
  border-radius:6px;
  transform:rotate(-2deg);
  transform-origin:left center;
}
.form__head{font-size:clamp(22px,2.4vw,32px);margin:0 0 16px;text-transform:uppercase}
.form{margin:0 0 26px;padding-left:1.6em;max-width:80ch}
.form li{margin:0 0 14px;font-size:17px}
.form li::marker{font-family:var(--display);font-weight:800}

.ca{
  margin-top:10px;
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  padding:14px;
  border:var(--rule) solid var(--ink);
  border-radius:10px;
  background:var(--paper-2);
}
.ca__addr{
  font-family:var(--mono);font-size:16px;font-weight:700;
  word-break:break-all;overflow-wrap:anywhere;flex:1 1 260px;
  user-select:all;
}
.ca--empty .ca__addr{font-weight:400;user-select:auto}
.ca__copy{
  min-height:48px;min-width:96px;padding:0 18px;
  font-family:var(--display);font-size:17px;letter-spacing:.06em;
  background:var(--ink);color:var(--paper);
  border:var(--rule) solid var(--ink);border-radius:8px;
  cursor:pointer;
}
.ca__copy[disabled]{background:var(--paper);color:var(--ink);opacity:.45;cursor:not-allowed}
.ca__copy:not([disabled]):active{transform:translate(2px,2px)}

.sign-off{
  border-top:var(--rule) dashed var(--ink);
  padding-top:20px;
}
.sign-off__k{font-size:16px;font-weight:700;letter-spacing:.14em}
.sign-off__acts{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0 10px;align-items:stretch}
.act{
  display:flex;align-items:center;gap:12px;
  min-height:56px;padding:0 20px;
  border:var(--rule) solid var(--ink);border-radius:10px;
  background:var(--paper);color:var(--ink);
  text-decoration:none;
  font-family:var(--display);font-size:18px;
  box-shadow:4px 4px 0 var(--ink);
}
.act:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.act--buy{background:var(--orange)}
.act--mark{min-width:64px;justify-content:center;padding:0 14px}
.act[aria-disabled="true"]{opacity:.42;box-shadow:none;cursor:not-allowed}
.act[aria-disabled="true"]:active{transform:none}
.act img{flex:none}
.sign-off__state{margin:0;font-size:16px}

/* ───────────────────────────── the lien ───────────────────────────── */
.book{position:relative;margin-bottom:22px}
.book__img{
  width:100%;border:var(--rule) solid var(--ink);border-radius:10px;background:var(--paper);
}
.book__empty{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  margin:0;width:min(88%,44ch);text-align:center;
  background:var(--paper);border:var(--rule) solid var(--ink);border-radius:8px;
  padding:16px 18px;font-size:17px;
}
.chainrow{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;margin:0 0 12px;
  border:var(--rule) solid var(--ink);border-radius:10px;overflow:hidden;
}
.chainrow > div{padding:14px 16px;border-right:var(--rule) solid var(--ink);min-height:84px}
.chainrow > div:last-child{border-right:0}
.chainrow dt{font-size:16px;font-weight:700;letter-spacing:.08em}
.chainrow dd{margin:4px 0 0;font-family:var(--display);font-size:clamp(20px,2vw,28px)}
.chainrow__note{margin:0;font-size:16px}

/* ──────────────────────────── the auction ─────────────────────────── */
.reel{position:relative;margin-bottom:20px}
.reel__v{
  width:100%;height:auto;display:block;
  border:var(--rule) solid var(--ink);border-radius:10px;background:var(--paper);
}
.reel__pause{
  position:absolute;right:12px;bottom:12px;
  min-height:48px;padding:0 18px;
  font-family:var(--display);font-size:16px;letter-spacing:.06em;
  background:var(--paper);color:var(--ink);
  border:var(--rule) solid var(--ink);border-radius:8px;cursor:pointer;
}

/* ───────────────────────── the office (nav) ───────────────────────── */
.rack{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
.rack__handle{display:none}
.rack__items{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,2vw,26px);
}
.rack__items > li{display:flex}
.obj{
  flex:1;
  display:flex;flex-direction:column;align-items:stretch;gap:0;
  padding:0;cursor:pointer;
  background:var(--paper);
  border:var(--rule) solid var(--ink);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  font:inherit;color:inherit;
}
.obj img{width:100%;aspect-ratio:4/3;object-fit:cover;border-bottom:var(--rule) solid var(--ink)}
.obj span{
  padding:14px;min-height:56px;display:flex;align-items:center;
  font-family:var(--display);font-size:20px;letter-spacing:.02em;text-transform:uppercase;
}
.obj:hover span,.obj[aria-current="true"] span{background:var(--ink);color:var(--paper)}
.obj:active{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink)}

/* ───────────────────────────── 1024 and down ──────────────────────── */
@media (max-width:1024px){
  .plate{grid-template-columns:1fr}
  .doors{grid-template-columns:repeat(3,minmax(0,1fr))}
  .record{grid-template-columns:repeat(2,minmax(0,1fr))}
  .record__cell:nth-child(2){border-right:0}
  .record__cell:nth-child(-n+2){border-bottom:var(--rule) solid var(--ink)}
}

/* ───────────────────────────── phone ──────────────────────────────── */
@media (max-width:719px){
  body{font-size:16px}
  .desk{padding-bottom:104px;gap:22px}
  .doors{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .door__tag{font-size:16px;padding:8px}
  .win__bar{min-height:52px}
  .act{width:100%;justify-content:center;text-align:center}
  .act--mark{width:auto;flex:1}

  /* the office becomes a drawer */
  .rack{
    position:fixed;left:0;right:0;bottom:0;z-index:30;
    grid-template-columns:1fr;gap:0;
    background:var(--paper);
    border-top:var(--rule) solid var(--ink);
    transform:translateY(calc(100% - 64px));
    transition:transform .3s ease;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .rack.is-open{transform:translateY(0)}
  @media (prefers-reduced-motion:reduce){.rack{transition:none}}
  .rack__handle{
    display:block;width:100%;min-height:64px;
    font-family:var(--display);font-size:19px;letter-spacing:.1em;
    background:var(--orange);color:var(--ink);
    border:0;border-bottom:var(--rule) solid var(--ink);
    cursor:pointer;
  }
  .rack__items{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;padding:12px;
  }
  .obj{box-shadow:none;border-radius:10px}
  .obj img{aspect-ratio:1/1}
  .obj span{padding:8px;min-height:48px;font-size:16px;justify-content:center;text-align:center}
}

@media (max-width:359px){
  .doors{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (prefers-reduced-motion:reduce){
  .door__leaf{transition:none}
}