/* Concept: the room behind the stage. Velvet green walls, a dressing-room mirror ringed with warm bulbs,
   a door plate for the logo, a cue sheet for the steps, a rate board for prices. One dark world on purpose. */
:root{
  --velvet:#0f2219; --velvet-2:#0a1912; --wall:#16301f; --felt:#1c3a28;
  --cream:#efe6d2; --dim:#b7b09c; --bulb:#ffd98a; --brass:#c9973d; --brass-2:#e7bb62; --tally:#e2442b; --rule:rgba(239,230,210,.16);
  --stage:"Big Shoulders Display", Impact, "Arial Narrow", sans-serif;
  --stencil:"Big Shoulders Stencil Display", Impact, sans-serif;
  --text:"Familjen Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{background:var(--velvet-2)}
body{margin:0;color:var(--cream);font:400 17px/1.55 var(--text);position:relative}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.09;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding-inline:20px}
h1,h2,h3{font-family:var(--stage);font-weight:900;text-transform:uppercase;line-height:.88;margin:0;text-wrap:balance;letter-spacing:.005em}
p{margin:0}
:focus-visible{outline:3px solid var(--bulb);outline-offset:3px}

/* ticket-stub buttons */
.ticket{--n:9px;display:inline-flex;align-items:center;gap:.6rem;padding:.95rem 1.5rem;font:700 1rem var(--text);letter-spacing:.02em;text-decoration:none;cursor:pointer;border:0;
  background:var(--brass);color:#1d1406;
  -webkit-mask:radial-gradient(circle var(--n) at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--n) at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle var(--n) at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--n) at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
  transition:background .2s}
.ticket:hover{background:var(--brass-2)}
.link{font-weight:600;text-underline-offset:5px;text-decoration-thickness:2px;text-decoration-color:var(--brass)}

/* door plate logo */
header{position:relative;z-index:5}
header .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:22px;flex-wrap:wrap}
.plate{display:inline-grid;grid-auto-flow:column;align-items:center;gap:12px;text-decoration:none}
.plate .sign{border:2px solid var(--brass);padding:6px 10px 4px;font:900 1.35rem/1 var(--stencil);letter-spacing:.06em;color:var(--brass-2);text-transform:uppercase;box-shadow:inset 0 0 0 4px var(--velvet-2),inset 0 0 0 5px rgba(201,151,61,.5)}
.plate .crew{font:800 1.35rem/1 var(--stage);letter-spacing:.14em;text-transform:uppercase}
nav{display:flex;gap:26px;flex-wrap:wrap}
nav a{text-decoration:none;font-weight:500;color:var(--dim)}
nav a:hover{color:var(--cream)}

/* hero */
.hero{position:relative;overflow:hidden;background:
  repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 2px,transparent 2px 46px),
  radial-gradient(90% 70% at 70% 30%,var(--felt) 0%,var(--wall) 45%,var(--velvet-2) 100%)}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding-block:28px 90px}
.hero h1{font-size:clamp(3.6rem,9.6vw,8.6rem);color:var(--cream)}
.hero h1 .glow{color:var(--bulb);text-shadow:0 0 18px rgba(255,217,138,.55),0 0 2px rgba(255,217,138,.9)}
.hero .sub{font-size:1.2rem;color:var(--dim);max-width:33rem;margin-top:24px}
.hero .sub b{color:var(--cream);font-weight:600}
.hero .act{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:34px}

/* the mirror */
.mirror{position:relative;justify-self:center;width:min(100%,400px);padding:30px;background:linear-gradient(145deg,#3a2a12,#1c1408 60%,#3a2a12);border-radius:6px;
  box-shadow:0 40px 80px rgba(0,0,0,.6),inset 0 0 0 2px rgba(255,217,138,.15)}
.glass{position:relative;aspect-ratio:9/16;max-width:100%;overflow:hidden;border-radius:2px;background:#000;box-shadow:inset 0 0 40px rgba(0,0,0,.8)}
.glass video{width:100%;height:100%;object-fit:cover;display:block}
.glass::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.14) 0 18%,transparent 30% 100%);pointer-events:none}
.bulbs{position:absolute;inset:0;pointer-events:none}
.bulbs i{position:absolute;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fffbe9,var(--bulb) 55%,#c8902e);
  box-shadow:0 0 10px 3px rgba(255,217,138,.65),0 0 26px 8px rgba(255,190,90,.22);transform:translate(-50%,-50%)}
.tally{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:3;font:800 .8rem/1 var(--stage);letter-spacing:.2em;padding:6px 12px;background:var(--tally);color:#fff;border-radius:2px;box-shadow:0 0 18px rgba(226,68,43,.55)}
.caption{margin-top:14px;text-align:center;color:var(--dim);font-size:.85rem}

/* marquee */
.marquee{border-block:1px solid var(--rule);background:var(--velvet);overflow:hidden;white-space:nowrap}
.track{display:inline-flex;gap:46px;padding-block:18px;animation:slide 38s linear infinite}
.track span{font:900 clamp(1.8rem,4vw,3rem)/1 var(--stage);text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px var(--cream)}
.track span.fill{color:var(--bulb);-webkit-text-stroke:0}
@keyframes slide{to{transform:translateX(-50%)}}

section{padding-block:96px}
.lead{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:end;margin-bottom:46px}
.lead h2{font-size:clamp(2.8rem,6.4vw,5.6rem)}
.lead p{color:var(--dim);font-size:1.1rem;max-width:34rem}

/* rate board */
.board{background:#0b0f0c;border:10px solid #2a1f0e;box-shadow:inset 0 0 0 2px #463316,0 30px 60px rgba(0,0,0,.45);padding:12px 26px 22px}
.row{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:baseline;padding-block:18px;border-bottom:1px dashed rgba(239,230,210,.18)}
.row:last-child{border-bottom:0}
.row h3{font-size:clamp(1.6rem,3.4vw,2.4rem);letter-spacing:.02em}
.row p{color:var(--dim);margin-top:6px;max-width:44rem}
.price{font:900 clamp(1.6rem,3vw,2.3rem)/1 var(--stage);color:var(--bulb);text-shadow:0 0 12px rgba(255,217,138,.35);white-space:nowrap;font-variant-numeric:tabular-nums}
.price small{display:block;font:500 .78rem var(--text);color:var(--dim);text-shadow:none;text-align:right;margin-top:4px;letter-spacing:.02em}

/* cue sheet */
.cues{display:grid;grid-template-columns:repeat(4,1fr);border-top:3px solid var(--cream)}
.cue{padding:22px 22px 0 0;border-right:1px solid var(--rule);min-width:0}
.cue:last-child{border-right:0}
.cue .num{font:900 4.6rem/1 var(--stencil);color:var(--brass)}
.cue h3{font-size:1.8rem;margin:10px 0 8px}
.cue p{color:var(--dim)}

/* crew */
.crew{display:grid;grid-template-columns:1.25fr .75fr;gap:26px;align-items:stretch}
.station{background:var(--wall);border:1px solid var(--rule);padding:26px;display:grid;grid-template-columns:200px 1fr;gap:26px;min-width:0}
.mini{position:relative;padding:16px;background:linear-gradient(145deg,#3a2a12,#1c1408);transition:box-shadow .3s}
.mini .bulbs i{width:9px;height:9px;opacity:.35;transition:opacity .35s}
.station:hover .mini .bulbs i,.station:focus-within .mini .bulbs i{opacity:1}
.mini img{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;max-width:100%}
.who h3{font-size:2.6rem}
.who .role{color:var(--brass-2);font-weight:600;margin:6px 0 14px}
.who p{color:var(--dim)}
.work{display:flex;gap:10px;margin:18px 0;flex-wrap:wrap}
.work img{width:96px;aspect-ratio:16/10;object-fit:cover;max-width:100%;border:1px solid var(--rule)}
.rates{display:flex;gap:26px;flex-wrap:wrap;margin-bottom:20px}
.rates div{font:900 2rem/1 var(--stage);color:var(--bulb)}
.rates span{display:block;font:500 .8rem var(--text);color:var(--dim);margin-top:4px}
.empty{border:2px dashed rgba(239,230,210,.25);padding:26px;display:flex;flex-direction:column;gap:14px;justify-content:center}
.empty h3{font-size:2.4rem}
.empty p{color:var(--dim)}

/* fees */
.fees{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--rule)}
.fee{padding:30px 24px 0 0}
.fee b{font:900 clamp(4rem,9vw,7rem)/.85 var(--stage);color:var(--cream);display:block;font-variant-numeric:tabular-nums}
.fee p{color:var(--dim);margin-top:12px;max-width:20rem}

/* sign-up sheet */
.sheet{background:#efe6d2;color:#1d1a13;padding:34px 34px 30px;box-shadow:0 30px 60px rgba(0,0,0,.45);transform:rotate(-.6deg);max-width:820px;
  background-image:repeating-linear-gradient(transparent 0 37px,rgba(29,26,19,.14) 37px 38px)}
.sheet h3{font-size:2.2rem;margin-bottom:6px}
.sheet .hint{color:#5e5747;margin-bottom:22px}
.sheet form{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}
.sheet label{display:grid;gap:4px;font-weight:600;font-size:.9rem;min-width:0}
.sheet input,.sheet select,.sheet textarea{font:inherit;font-size:1rem;background:transparent;border:0;border-bottom:2px solid #1d1a13;padding:6px 2px;color:#1d1a13;width:100%;border-radius:0}
.sheet .full{grid-column:1/-1}
.sheet .ticket{background:#1d3a28;color:var(--cream)}
.sheet .ticket:hover{background:#255039}
.ok{grid-column:1/-1;font-weight:700;color:#1d3a28}

.faq{max-width:820px;display:grid}
.faq details{border-bottom:1px solid var(--rule);padding-block:18px}
.faq summary{cursor:pointer;font:800 1.5rem var(--stage);text-transform:uppercase;letter-spacing:.02em;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--brass)}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--dim);margin-top:10px}

footer{border-top:1px solid var(--rule);background:var(--velvet)}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;padding-block:30px;color:var(--dim)}
.preview{background:var(--tally);color:#fff;text-align:center;font:700 .8rem var(--text);letter-spacing:.06em;padding:6px 16px;text-transform:uppercase}

@media (max-width:900px){
  .hero .wrap,.lead,.crew{grid-template-columns:1fr}
  .cues{grid-template-columns:1fr 1fr;row-gap:26px}
  .cue:nth-child(2){border-right:0}
  .station{grid-template-columns:150px 1fr}
}
@media (max-width:560px){
  .cues,.fees,.sheet form{grid-template-columns:1fr}
  .cue{border-right:0}
  .station{grid-template-columns:1fr}
  .mini{max-width:220px}
  nav{display:none}
  .row{grid-template-columns:1fr}
  .price small{text-align:left}
}
@media (prefers-reduced-motion:no-preference){
  .bulbs i{animation:warm 5s ease-in-out infinite}
  .bulbs i:nth-child(3n){animation-delay:-1.7s}
  .bulbs i:nth-child(4n){animation-delay:-3.1s}
  @keyframes warm{0%,100%{filter:brightness(1)}48%{filter:brightness(1)}50%{filter:brightness(.72)}53%{filter:brightness(1.05)}}
}
@media (prefers-reduced-motion:reduce){.track{animation:none}}

/* ---------- app pages (accounts, studio, orders, admin) ---------- */
.page{padding-block:48px 96px}
.page h1{font-size:clamp(2.6rem,6vw,4.6rem)}
.page .sub{color:var(--dim);margin-top:12px;max-width:40rem}
.stack{display:grid;gap:22px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.muted{color:var(--dim)}
.small{font-size:.88rem}
.flash{padding:12px 16px;border-left:4px solid var(--bulb);background:var(--felt);margin-bottom:24px}
.flash.err{border-color:var(--tally)}
.demo{background:#3a2a12;color:var(--bulb);text-align:center;font:600 .85rem var(--text);padding:6px 16px}
header .acct{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
header .acct a{text-decoration:none;color:var(--dim);font-weight:500}
header .acct a:hover{color:var(--cream)}
header .acct .ticket{color:#1d1406;padding:.6rem 1.1rem}

/* panels = call sheets pinned to the wall */
.panel{background:var(--wall);border:1px solid var(--rule);padding:26px;min-width:0}
.panel h2{font-size:2rem;margin-bottom:14px}
.panel h3{font-size:1.5rem;margin-bottom:10px}

/* dark form fields */
.f{display:grid;gap:16px}
.f label{display:grid;gap:6px;font-weight:600;font-size:.92rem;min-width:0}
.f input,.f select,.f textarea{font:inherit;font-size:1rem;background:var(--velvet-2);border:1px solid var(--rule);border-bottom:2px solid var(--brass);color:var(--cream);padding:10px 12px;width:100%;border-radius:0}
.f textarea{min-height:130px;resize:vertical}
.f .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f .row3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.f .hint{font-weight:400;color:var(--dim);font-size:.85rem}
.btnrow{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.ghost{background:transparent;border:1px solid var(--rule);color:var(--cream);padding:.8rem 1.2rem;font:600 .95rem var(--text);cursor:pointer;text-decoration:none;display:inline-block}
.ghost:hover{border-color:var(--brass)}
.danger{border-color:rgba(226,68,43,.6);color:#ffb3a5}
.auth{max-width:460px;margin:0 auto}

/* crew cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px}
.card{background:var(--wall);border:1px solid var(--rule);text-decoration:none;display:grid;grid-template-rows:auto 1fr;min-width:0;transition:border-color .2s}
.card:hover{border-color:var(--brass)}
.card .cover{aspect-ratio:16/10;background:#000 center/cover no-repeat;border-bottom:1px solid var(--rule)}
.card .body{padding:18px;display:grid;gap:8px;align-content:start}
.card h3{font-size:1.6rem}
.card .by{color:var(--brass-2);font-weight:600;font-size:.9rem}
.card .from{font:900 1.6rem/1 var(--stage);color:var(--bulb)}
.card .from span{font:500 .8rem var(--text);color:var(--dim);margin-right:6px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.chip{border:1px solid var(--rule);padding:6px 12px;text-decoration:none;color:var(--dim);font-weight:500;font-size:.9rem}
.chip.on,.chip:hover{border-color:var(--brass);color:var(--cream)}

/* packages = three ticket booths */
.pkgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.pkg{background:#0b0f0c;border:6px solid #2a1f0e;box-shadow:inset 0 0 0 1px #463316;padding:22px;display:grid;gap:10px;align-content:start}
.pkg .tier{font:800 .8rem var(--stage);letter-spacing:.2em;text-transform:uppercase;color:var(--brass-2)}
.pkg .amt{font:900 2.6rem/1 var(--stage);color:var(--bulb);font-variant-numeric:tabular-nums}
.pkg ul{margin:0;padding-left:18px;color:var(--dim)}

/* order status = rubber stamp on the call sheet */
.status{display:inline-block;font:900 1rem/1 var(--stencil);letter-spacing:.08em;text-transform:uppercase;padding:6px 10px 5px;border:2px solid currentColor;color:var(--dim);transform:rotate(-2deg);white-space:nowrap}
.status.in_progress,.status.delivered{color:var(--bulb)}
.status.completed{color:#8fd19e}
.status.disputed,.status.refunded,.status.cancelled{color:#ff8a73}
td .status{font-size:.85rem;transform:none}
/* tables */
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--rule);vertical-align:top}
th{font:800 .78rem var(--stage);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
td a{text-underline-offset:4px}

/* order thread */
.thread{display:grid;gap:14px}
.msg{border-left:3px solid var(--rule);padding:4px 0 4px 14px;min-width:0;overflow-wrap:anywhere}
.msg.delivery{border-color:var(--bulb)}
.msg.revision{border-color:var(--brass)}
.msg.system{border-color:transparent;color:var(--dim);font-size:.9rem}
.msg .meta{color:var(--dim);font-size:.82rem;margin-bottom:4px}
.receipt{display:grid;gap:8px;font-variant-numeric:tabular-nums}
.receipt div{display:flex;justify-content:space-between;gap:12px}
.receipt .tot{border-top:1px solid var(--rule);padding-top:8px;font-weight:700}
.stars{color:var(--bulb);letter-spacing:.1em}
.legal{max-width:760px}
.legal h2{font-size:1.9rem;margin:34px 0 10px}
.legal p,.legal li{color:var(--dim);margin-bottom:10px}

@media (max-width:900px){.grid2,.grid3{grid-template-columns:1fr}}
@media (max-width:560px){.f .row2,.f .row3{grid-template-columns:1fr}header .acct{gap:12px}}
.split{display:grid;grid-template-columns:1.25fr .75fr;gap:26px;align-items:start}
.split.rev{grid-template-columns:.7fr 1.3fr}
.split.rev .mini{max-width:300px}
.f input,.f select,.f textarea{font-weight:400}
.card .cover.blank{display:grid;place-items:center;background:repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 2px,transparent 2px 30px),var(--felt)}
.card .cover.blank span{font:900 1.5rem/1 var(--stencil);text-transform:uppercase;color:var(--brass);letter-spacing:.06em;text-align:center;padding:0 12px}
.noimg{aspect-ratio:9/16;display:grid;place-items:center;background:var(--felt);font:900 5rem/1 var(--stencil);color:var(--brass)}
.phone-only{display:none}
@media (max-width:900px){.split,.split.rev{grid-template-columns:1fr}}
@media (max-width:560px){.phone-only{display:inline}}
.sso{display:grid;gap:12px;margin-top:26px}
.ssobtn{display:flex;align-items:center;justify-content:center;gap:12px;padding:.85rem 1rem;background:var(--cream);color:#1d1a13;font-weight:700;text-decoration:none;border:1px solid var(--cream)}
.ssobtn:hover{background:#fff}
.or{display:flex;align-items:center;gap:12px;color:var(--dim);font-size:.85rem;margin-top:6px}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--rule)}