/* Magicians Keep: the member floors. The Stair (sign in, join) and Your Chamber (account). */
.nav .here{opacity:1;text-decoration:underline;text-decoration-color:var(--glow);text-underline-offset:6px}
.chip{display:inline-block;padding:6px 12px;background:rgba(8,8,15,.55);border:1px solid rgba(236,227,207,.22);border-radius:10px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--text-primary);text-shadow:0 1px 3px rgba(5,5,10,.85)}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes stepIn{from{transform:scale(1.06)}to{transform:none}}

/* ===== The Stair ===== */
.stair{position:relative;z-index:1;min-height:100vh;min-height:100svh;display:grid;align-items:center;padding:calc(var(--nav-h) + 28px) var(--gutter) 56px;isolation:isolate;overflow:hidden}
.stair-bg,.stair-bg img{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.stair-bg img{object-fit:cover;object-position:62% 50%;max-width:none;animation:stepIn 2.6s var(--ease-out) both}
.stair::before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(to right,rgba(12,14,20,.9) 0%,rgba(12,14,20,.7) 34%,rgba(12,14,20,.15) 62%,rgba(12,14,20,.05) 100%),
  linear-gradient(to top,rgba(12,14,20,.7),rgba(12,14,20,0) 40%)}
.door-card{position:relative;width:min(480px,100%);padding:clamp(26px,3.6vw,40px);border-radius:20px;background:linear-gradient(165deg,rgba(36,41,58,.9),rgba(24,28,40,.92));border:1px solid var(--line-strong);box-shadow:0 40px 100px rgba(0,0,0,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:rise 1s var(--ease-out) .15s both}
.door-card .chip{margin-bottom:18px}
.door-card h1{font-size:clamp(2.6rem,4.6vw,3.6rem)}
.door-card .sub{margin-top:10px;color:var(--text-secondary);max-width:38ch}
.door-card form{margin-top:24px}
.door-card .field:last-of-type{margin-bottom:12px}
.perks{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px}
.perks li{position:relative;padding-left:30px;font-size:1rem}
.perks li::before{content:"";position:absolute;left:0;top:.18em;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#d4473a,#8f241d 70%);box-shadow:0 2px 4px rgba(0,0,0,.5)}
.perks li::after{content:"";position:absolute;left:7px;top:calc(.18em + 5px);width:5px;height:9px;border:solid #f3d9a8;border-width:0 2px 2px 0;transform:rotate(45deg)}
.pw{position:relative}
.pw input{padding-right:52px}
.pw .eye{position:absolute;right:6px;top:50%;width:40px;height:40px;margin-top:-20px;display:grid;place-items:center;padding:0;border:0;border-radius:8px;background:none;color:var(--text-secondary);cursor:pointer}
.pw .eye:hover{color:var(--text-primary)}
.pw .eye:focus-visible{outline:2px solid var(--accent-bright);outline-offset:0}
.pw .eye svg{width:20px;height:20px}
.pw .eye .shut{display:none}
.pw.showing .eye .open{display:none}
.pw.showing .eye .shut{display:block}
.hint{margin-top:-12px;margin-bottom:18px;font-size:.9rem;color:var(--text-secondary)}
.row-between{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px;margin:-4px 0 18px}
.check{display:flex;align-items:flex-start;gap:10px;margin:0 0 20px;font-size:1rem;cursor:pointer}
.check input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--accent)}
.linkish{padding:0;border:0;background:none;color:var(--glow);font:inherit;font-size:.98rem;text-decoration:underline;text-decoration-color:rgba(227,168,90,.5);text-underline-offset:4px;cursor:pointer}
.linkish:hover{color:#f3d9a8}
.linkish:focus-visible{outline:2px solid var(--accent-bright);outline-offset:3px;border-radius:2px}
.door-card .btn{width:100%;font-size:1.06rem;padding:.95em 1.4em}
.switch{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);text-align:center;color:var(--text-secondary)}
.switch a{color:var(--glow);font-weight:700;text-underline-offset:4px}
.msg{min-height:0;margin:0 0 14px;padding:0;border-radius:10px;font-size:.98rem}
.msg:not(:empty){padding:11px 14px}
.msg.bad{background:rgba(184,53,44,.16);border:1px solid rgba(224,87,74,.5);color:#ffd9d2}
.msg.good{background:rgba(95,211,196,.1);border:1px solid rgba(95,211,196,.45);color:#d6fbf5}
.msg.info{background:rgba(227,168,90,.1);border:1px solid rgba(227,168,90,.45);color:#f3d9a8}
.stamped{display:none;text-align:center;padding:10px 0 4px}
.stamped svg{width:84px;height:84px;margin:0 auto 10px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.5));animation:stampIn .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes stampIn{from{transform:scale(1.5) rotate(-14deg);opacity:0}to{transform:none;opacity:1}}
.stamped h2{font-size:2.2rem}
.stamped p{margin-top:10px;color:var(--text-secondary)}
.stamped .btn{margin-top:20px}
.door-card.done form,.door-card.done .switch{display:none}
.door-card.done .stamped{display:block}
.closed{margin-top:22px;padding:16px 18px;border-radius:12px;border:1px dashed rgba(227,168,90,.55);background:rgba(227,168,90,.07);color:#f3d9a8}
.closed[hidden]{display:none}
.door-card.unset form{opacity:.45;pointer-events:none}
@media (max-width:720px){
  .stair{align-items:end;padding-top:calc(var(--nav-h) + 30vh)}
  .stair-bg img{object-position:50% 50%}
  .stair::before{background:linear-gradient(to top,rgba(12,14,20,.96) 0%,rgba(12,14,20,.75) 48%,rgba(12,14,20,.1) 78%)}
}

/* ===== Your Chamber ===== */
/* on a phone, a slice of the computer painting: the desk with the insignia box and the candle (both can be pressed),
   with the header a little taller so the words sit below them. The picture keeps that height and the words start just
   under the front of the desk (60% of the way down the picture), so they never cover the box, however long the name;
   the header ends where the words do, and the picture fades into the page at its foot. It is keyed to the chamber
   picture itself, which is there from the first paint, so nothing moves when the box's script arrives */
@media (max-width:720px){
  html body .entry picture img{object-position:70% 50%}
  html body .entry:has(img[src*="chamber-box"]){align-items:start;padding-top:calc(43.2vh + 14px);padding-top:calc(43.2svh + 14px)}
  html body .entry:has(img[src*="chamber-box"]) picture{bottom:auto;height:72vh;height:72svh}
  html body .entry:has(img[src*="chamber-box"]) picture img{-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
}
.entry{position:relative;z-index:1;min-height:56vh;min-height:56svh;display:grid;align-items:end;padding:calc(var(--nav-h) + 24px) var(--gutter) clamp(32px,5vh,56px);overflow:hidden;isolation:isolate}
.entry picture,.entry picture img{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.entry picture img{object-fit:cover;object-position:60% 55%;max-width:none;animation:stepIn 2.4s var(--ease-out) both}
.entry::before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(to top,rgba(23,27,36,1) 0%,rgba(14,16,22,.55) 34%,rgba(14,16,22,0) 62%),
  linear-gradient(to right,rgba(14,16,22,.85) 0%,rgba(14,16,22,.35) 40%,rgba(14,16,22,0) 64%)}
.entry-copy{position:relative;max-width:640px;text-shadow:var(--tshadow);animation:rise 1s var(--ease-out) .2s both}
.entry .chip{margin-bottom:18px}
.entry h1{font-size:clamp(2.8rem,5.6vw,5rem)}
.entry .sub{margin-top:14px;max-width:40ch;font-size:clamp(1.06rem,1.4vw,1.24rem);line-height:1.5}

.tabsbar{position:sticky;top:var(--nav-h);z-index:20;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px;padding:12px var(--gutter);background:rgba(20,23,32,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.tabsbar .tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.tabsbar .tabs::-webkit-scrollbar{display:none}
.pill{display:inline-flex;align-items:baseline;flex:none;gap:8px;padding:.5em 1.05em;border-radius:999px;border:1px solid var(--line-strong);background:transparent;color:var(--text-primary);font:inherit;font-weight:700;font-size:.98rem;line-height:1.2;cursor:pointer;transition:border-color .35s var(--ease-out),background-color .35s var(--ease-out),color .35s var(--ease-out)}
.pill span{font-family:var(--f-mono);font-weight:400;font-size:.8rem;color:var(--text-secondary)}
.pill:hover{border-color:var(--text-primary)}
.pill[aria-selected="true"]{border-color:var(--glow);background:rgba(227,168,90,.12);color:#f3d9a8}
@media (pointer:coarse){.pill{min-height:44px;align-items:center}}

.chamber{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:clamp(32px,4.5vw,56px) var(--gutter) clamp(80px,10vw,128px)}
.panel[hidden]{display:none}
.panel{animation:rise .6s var(--ease-out) both}
/* the gift-code box under the bookshelf */
.gift-code{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;margin-top:28px;padding:22px clamp(18px,3vw,30px);border-radius:16px;background:linear-gradient(165deg,rgba(42,48,68,.7),rgba(30,35,50,.78));border:1px solid var(--line)}
.gc-say h3{font-size:1.6rem}
.gc-say p{margin-top:4px;color:var(--text-secondary);font-size:1rem}
.gc-say .nob{white-space:nowrap}
.gc-row{display:flex;flex:1 1 380px;max-width:520px;gap:10px}
.gc-row input{flex:1;min-width:0;padding:12px 14px;border-radius:10px;background:rgba(14,16,22,.55);border:1px solid var(--line-strong);color:var(--text-primary);font-family:var(--f-mono);font-size:1.05rem;letter-spacing:.06em;transition:border-color .3s var(--ease-out)}
.gc-row input::placeholder{color:#8a8578}
.gc-row input:hover{border-color:rgba(236,227,207,.7)}
.gc-row input:focus{outline:none;border-color:var(--accent-bright)}
.gc-row .btn{flex:none;white-space:nowrap}
.gift-code.sending .btn{opacity:.6;cursor:progress}
.gc-out{flex-basis:100%;margin:0;font-size:1rem}
.gc-out:empty{display:none}
.gc-out.good{color:#d6fbf5}
.gc-out.bad{color:#ffd9d2}
.gc-out.info{color:#f3d9a8}
@media (max-width:560px){.gc-row{flex-direction:column;flex-basis:100%}.gc-row .btn{width:100%}}
.panel-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 20px;margin-bottom:24px}
.panel-head h2{font-size:clamp(2.2rem,3.8vw,3rem)}
.panel-head p{color:var(--text-secondary);max-width:52ch}

/* brass plaques: quick counts */
/* only Gimbly's account sees this: the way into the back room (admin.html) */
.backroom{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:0 0 clamp(18px,2.4vw,26px);padding:14px 20px;border-radius:12px;border:1px dashed rgba(227,168,90,.55);background:rgba(227,168,90,.08);color:var(--text-primary);text-decoration:none;transition:background-color .3s var(--ease-out),border-color .3s var(--ease-out)}
.backroom[hidden]{display:none}
.backroom:hover{background:rgba(227,168,90,.14);border-color:rgba(227,168,90,.85)}
.backroom .mono{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--glow)}
.backroom b{font-family:var(--f-display);font-size:1.5rem;font-weight:700}
.backroom .br-go{color:var(--text-secondary)}
.backroom .br-go::after{content:" ›";color:var(--glow)}
#trail[hidden]{display:none}
.plaques{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,22px);margin-bottom:clamp(32px,4vw,48px)}
.plaque{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:16px 12px 14px;border-radius:8px;text-align:center;text-decoration:none;color:#2b1d0c;
  background:linear-gradient(180deg,#f3dc9c 0%,#d6b062 38%,#b48a3e 62%,#d9b86c 100%);box-shadow:0 10px 24px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,250,220,.75),inset 0 -1px 0 rgba(90,60,20,.6),inset 0 0 0 1px rgba(120,82,30,.55)}
.plaque::before,.plaque::after{content:"";position:absolute;top:10px;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff1c4,#8a6426 70%)}
.plaque::before{left:10px}
.plaque::after{right:10px}
.plaque b{font-family:var(--f-display);font-size:clamp(2rem,4vw,2.8rem);line-height:1}
.plaque span{font-family:var(--f-mono);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:#24180a;text-shadow:0 1px 0 rgba(255,245,210,.45)}
.plaque small{font-size:.85rem;color:#2b1d0c}
.plaque b.long{font-size:clamp(1.4rem,3.2vw,2.2rem)}
.plaque b.longer{font-size:clamp(1.1rem,2.5vw,1.8rem)}
button.plaque{border:0;font:inherit;cursor:pointer}
button.plaque:focus-visible,a.plaque:focus-visible{outline:2px solid var(--accent-bright);outline-offset:3px}
button.plaque,a.plaque{transition:transform .35s var(--ease-out),filter .35s var(--ease-out)}
button.plaque:hover,a.plaque:hover{transform:translateY(-2px);filter:brightness(1.06)}

/* the ledger of orders */
.ledger-book{position:relative;padding:28px clamp(18px,3vw,36px) 24px;border-radius:3px;color:var(--ink);
  background:radial-gradient(120% 60% at 20% 0%,rgba(255,255,255,.4),transparent 60%),radial-gradient(90% 60% at 90% 100%,rgba(120,90,50,.2),transparent 70%),#ecdfc2;box-shadow:0 30px 70px rgba(0,0,0,.5),inset 0 0 50px rgba(120,90,50,.16)}
.ledger-book .mono{color:#7a5a2e}
.order{border-bottom:1px dashed rgba(58,36,16,.32)}
.order:last-child{border-bottom:0}
.order summary{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) auto auto 24px;align-items:center;gap:6px 18px;padding:16px 0;cursor:pointer}
.order summary::-webkit-details-marker{display:none}
.order summary:focus-visible{outline:2px solid #b8352c;outline-offset:4px;border-radius:4px}
.o-main{display:flex;flex-direction:column;min-width:0}
.o-no{font-family:var(--f-display);font-weight:700;font-size:1.3rem;color:#2e1c0c}
.o-sub{font-family:var(--f-mono);font-size:.78rem;color:#6a5a48;margin-top:2px}
.o-total{font-weight:700;font-size:1.12rem;color:#2e1c0c}
.o-mk{position:relative;width:16px;height:16px;transition:transform .4s var(--ease-out)}
.o-mk::before,.o-mk::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:#7a5a2e;border-radius:2px}
.o-mk::after{transform:rotate(90deg);transition:transform .4s var(--ease-out)}
.order[open] .o-mk{transform:rotate(180deg)}
.order[open] .o-mk::after{transform:none}
.status{display:inline-flex;align-items:center;gap:6px;padding:.28em .75em;border-radius:999px;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.04em;white-space:nowrap;border:1px solid}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.status.reserved{color:#8a5a14;border-color:rgba(138,90,20,.45);background:rgba(227,168,90,.18)}
.status.paid{color:#1d6b62;border-color:rgba(29,107,98,.45);background:rgba(95,211,196,.18)}
.status.shipped{color:#4f3f9c;border-color:rgba(79,63,156,.45);background:rgba(149,131,242,.18)}
.status.delivered{color:#2e5c22;border-color:rgba(46,92,34,.45);background:rgba(120,190,100,.18)}
.status.cancelled{color:#6a5a48;border-color:rgba(106,90,72,.4);background:rgba(106,90,72,.1)}
.o-body{padding:0 0 18px}
.o-lines{list-style:none;margin:0;padding:0}
.o-lines li{display:flex;justify-content:space-between;gap:16px;padding:4px 0;font-size:1.02rem}
.o-sums{display:grid;grid-template-columns:1fr auto;gap:4px 16px;margin:10px 0 0;padding-top:10px;border-top:1px solid rgba(58,36,16,.25)}
.o-sums dt{color:#5a4a3a}
.o-sums dd{margin:0;text-align:right;font-weight:700}
.o-sums .total{font-family:var(--f-display);font-size:1.3rem}
.o-note{margin-top:10px;font-style:italic;color:#5a4a3a}
.o-help{margin-top:12px;font-size:.92rem;color:#5a4a3a}
@media (max-width:600px){
  .order summary{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"m t" "s k"}
  .o-main{grid-area:m}.o-total{grid-area:t;text-align:right}.order .status{grid-area:s;justify-self:start}.o-mk{grid-area:k;justify-self:end}
}
.empty{padding:26px 0 8px;text-align:center}
.empty p{font-family:var(--f-display);font-size:1.7rem;color:#2e1c0c}
.empty .fine2{margin-top:6px;font-family:var(--f-body);font-size:1.02rem;color:#5a4a3a}
.empty .btn{margin-top:18px}
.btn-brass{background:linear-gradient(180deg,#f3dc9c,#c99a48 55%,#a87a32);color:#2b1d0c;border:1px solid rgba(90,60,20,.6);box-shadow:0 8px 20px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,250,220,.7);text-shadow:0 1px 0 rgba(255,245,210,.5)}
.btn-brass:hover{filter:brightness(1.08);transform:translateY(-1px)}

.library-empty{padding:34px 24px;text-align:center;border-radius:16px;border:1px dashed var(--line-strong);background:rgba(14,16,22,.4)}
.library-empty p{font-family:var(--f-display);font-size:1.8rem}
.library-empty .fine2{margin-top:6px;font-family:var(--f-body);font-size:1.04rem;color:var(--text-secondary)}
.library-empty .btn{margin-top:18px}

/* your details */
.details-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:start}
@media (max-width:860px){.details-grid{grid-template-columns:1fr}}
.side-stack{display:grid;gap:clamp(20px,3vw,28px)}
.form h3{font-size:1.7rem;margin-bottom:6px}
.form .lede2{margin:0 0 20px;color:var(--text-secondary);font-size:1rem}
.three{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:16px}
@media (max-width:560px){.three{grid-template-columns:1fr}}
.readonly{padding:13px 14px;border-radius:10px;border:1px dashed var(--line-strong);color:var(--text-secondary)}
.danger{border-color:rgba(224,87,74,.35)}
.btn-danger{background:transparent;border-color:rgba(224,87,74,.6);color:#ffb4a8}
.btn-danger:hover{background:rgba(184,53,44,.2);border-color:#e0574a}
.form .saved{margin-top:12px;min-height:1.4em;text-align:center;font-style:italic;color:#d6fbf5}

/* loading state while the chamber door opens */
.unlocking{display:grid;place-items:center;min-height:40vh;text-align:center;color:var(--text-secondary)}
.unlocking svg{width:64px;height:64px;margin:0 auto 14px;animation:breathe 1.8s ease-in-out infinite;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
@keyframes breathe{0%,100%{transform:scale(.94);opacity:.75}50%{transform:scale(1);opacity:1}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-reveal] .rv{opacity:1;transform:none}
}
.door-card.done .perks{display:none}
.unlocking[hidden]{display:none}