.backroom{background:#110d13;min-height:100vh;display:flex;flex-direction:column}
.backroom main{flex:1}.room-shell{padding:clamp(3rem,8vw,7rem) 0}.room-wrap{width:min(100% - 40px,1040px);margin:0 auto}
.gate-card,.form-card{max-width:720px;margin:0 auto;border:1px solid var(--line);padding:clamp(2rem,7vw,5rem);background:linear-gradient(145deg,rgba(50,25,48,.72),rgba(23,18,26,.92));box-shadow:0 32px 100px rgba(0,0,0,.32)}
.gate-card{text-align:center}.gate-card h1,.form-card h1,.room-heading h1,.admin-heading h1{font-size:clamp(3.2rem,9vw,7rem);line-height:.95;margin-bottom:1.5rem}
.room-lede{font-family:var(--display);font-size:clamp(1.35rem,3vw,2rem);line-height:1.35;max-width:32ch;margin:0 auto 2rem;color:var(--champagne)}
.room-actions{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin:2rem 0}.room-form,.editor-form{display:grid;gap:1.2rem;margin-top:2rem}.form-field{display:grid;gap:.45rem}.form-field>span,.check-field{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--champagne)}
.form-field input,.form-field textarea,.form-field select{width:100%;border:1px solid rgba(216,185,143,.36);background:#17121a;color:var(--cream);padding:.85rem 1rem;font:inherit;border-radius:0}.form-field textarea{resize:vertical;line-height:1.6}.form-field select{appearance:auto}.form-field input:focus,.form-field textarea:focus,.form-field select:focus{outline:2px solid var(--champagne);outline-offset:2px}
.check-field{display:flex;gap:.8rem;align-items:flex-start;text-transform:none;letter-spacing:.02em;font-size:1rem;color:var(--cream)}.check-field input{width:1.15rem;height:1.15rem;margin-top:.28rem;accent-color:var(--champagne)}
.notice{width:min(100% - 40px,720px);margin:0 auto 1.5rem;padding:1rem 1.2rem;border:1px solid}.notice.success{color:#c8ead6;border-color:#477c60;background:#163326}.notice.error{color:#ffd9df;border-color:#7c3d4b;background:#351720}
.backroom header.site nav{align-items:center}.nav-form{display:flex;align-items:center;margin:0}.nav-form button,.text-button{border:0;padding:0;background:none;color:var(--cream);font:inherit;cursor:pointer}.nav-form button{display:block;font-size:11px;line-height:1.7;letter-spacing:.3em;text-transform:uppercase;font-weight:500}.nav-form button:hover,.text-button:hover{color:var(--champagne)}
.room-heading{margin-bottom:3.5rem}.room-heading.compact{margin-bottom:2rem}.story-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}.story-card,.empty-state,.admin-panel{border:1px solid var(--line);padding:clamp(1.4rem,4vw,2.4rem);background:var(--panel)}.story-card h2{font-size:clamp(2rem,4vw,3.2rem);margin:.5rem 0 1rem}.story-card h2 a{color:var(--cream)}.story-date{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}.text-link{display:inline-block;margin-top:.5rem;text-decoration:underline;text-underline-offset:.25em}.story-reader{max-width:720px;margin:0 auto}.story-reader header{padding:4rem 0 3rem;border-bottom:1px solid var(--line)}.story-reader h1{font-size:clamp(2.4rem,6vw,4.75rem);line-height:1.02}.story-body{font-family:Georgia,serif;font-size:clamp(1.08rem,2vw,1.2rem);line-height:1.85;padding:3rem 0}.story-body p{margin-bottom:1.55em}.story-reader footer{padding-top:2rem;border-top:1px solid var(--line)}
.tag-filters{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;margin:-1.5rem 0 2rem}.tag-filters a,.story-tags a,.story-tags span{display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--line);padding:.42rem .8rem;color:var(--champagne);font-size:.76rem;line-height:1.2;letter-spacing:.08em;text-transform:uppercase}.tag-filters a:hover,.tag-filters a.active{background:var(--champagne);border-color:var(--champagne);color:var(--ink)}.tag-filters a span{color:inherit;opacity:.7}.story-tags{display:flex;gap:.45rem;flex-wrap:wrap;margin:0 0 1.2rem}.story-reader .story-tags{margin:1.4rem 0 0}.story-tags a:hover{border-color:var(--champagne);color:var(--cream)}.field-help{margin:-.75rem 0 0;color:var(--muted);font-size:.82rem}
.story-image{margin:3rem 0 0;padding:clamp(.65rem,2vw,1rem);border:1px solid var(--line);background:var(--velvet)}.story-image img{width:100%;max-height:680px;object-fit:cover;box-shadow:0 28px 70px rgba(0,0,0,.42)}.story-body h2,.story-body h3,.story-body h4{margin:1.5em 0 .7em;color:var(--cream);line-height:1.15}.story-body h2{font-size:2.2rem}.story-body h3{font-size:1.75rem}.story-body h4{font-size:1.4rem}.story-body blockquote{margin:2rem 0;padding:.2rem 0 .2rem 1.5rem;border-left:2px solid var(--champagne);color:var(--champagne);font-style:italic}.story-body ul,.story-body ol{margin:1.3rem 0;padding-left:1.6rem}.story-body li{margin:.45rem 0}.story-body hr{border:0;border-top:1px solid var(--line);margin:3rem auto;width:45%}.story-body code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:rgba(239,230,224,.08);padding:.12em .3em}.story-body pre{overflow:auto;background:#0d0a0f;border:1px solid var(--line);padding:1rem}.story-body pre code{background:none;padding:0}.story-body a{text-decoration:underline;text-underline-offset:.2em}
.account-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}.account-grid .form-card{width:100%;padding:clamp(1.4rem,4vw,2.5rem)}.account-grid h2{font-size:2.2rem}.admin-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:2.5rem}.stats{display:flex;gap:1rem;margin-bottom:1.2rem}.stats>div{min-width:150px;border:1px solid var(--line);padding:1.4rem;background:var(--panel)}.stats strong{display:block;font-family:var(--display);font-size:3rem;line-height:1}.stats span{display:block;color:var(--muted);margin-top:.4rem}.panel-heading{margin-bottom:1rem}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:1rem;border-bottom:1px solid var(--line)}th{font-size:.72rem;text-transform:uppercase;letter-spacing:.15em;color:var(--muted)}.inline-form{margin:0}.text-button{text-decoration:underline;color:var(--champagne)}.story-editor-heading h1{font-size:clamp(2rem,5vw,3.75rem);line-height:1.05}.editor-form{max-width:820px}.editor-image{margin:0;max-width:520px;padding:.6rem;background:var(--velvet);border:1px solid var(--line)}.editor-image img{width:100%;max-height:360px;object-fit:cover}.admin-links{display:flex;gap:2rem;flex-wrap:wrap}.admin-form{margin:0 0 1.2rem;max-width:620px}.admin-form h2{font-size:2.3rem}.invite-history{margin-top:1.2rem}.room-footer{border-top:1px solid var(--line);padding:1.5rem 0;color:var(--muted);font-size:.8rem}.room-footer .room-wrap{display:flex;justify-content:space-between;gap:1rem}
@media(max-width:720px){.story-grid,.account-grid{grid-template-columns:1fr}.admin-heading{display:block}.admin-heading .btn{margin-top:1.2rem}.stats>div{min-width:0;flex:1}th,td{padding:.8rem .6rem}.room-actions .btn{width:100%}.room-footer .room-wrap{display:grid}.tag-filters{margin-top:-.75rem}.tag-filters a{flex:1 0 auto;justify-content:center}}

/* ── After Hours ─────────────────────────────────────────────────────────
   The Back Room's own skin. Everything below is scoped to .backroom, so the
   front room keeps its champagne and velvet and nothing here leaks out.
   The room is rose on plum-black; the gate carries the photograph. */
.backroom{--ink:#120C11;--panel:#1C1018;--velvet:#3A1430;--cream:#F3E9DE;
  --champagne:#F0699A;--muted:#A0808E;--line:rgba(240,105,154,.22);
  --rose:#C92C68;--rose-lit:#FA8CB3;background:#120C11}
.backroom header.site{background:rgba(18,12,17,.74);border-bottom-color:rgba(240,105,154,.14)}
.backroom .btn{border-radius:0;height:52px;padding:0 34px;font-size:12px;letter-spacing:.2em;
  border-color:var(--rose);background:var(--rose);color:#FFF2F6}
.backroom .btn:hover{background:var(--rose-lit);border-color:var(--rose-lit);color:#1A0A12}
.backroom .btn.ghost{background:transparent;border-color:rgba(243,233,222,.3);color:var(--cream)}
.backroom .btn.ghost:hover{background:rgba(243,233,222,.1);border-color:var(--cream);color:var(--cream)}
.backroom .form-field input,.backroom .form-field textarea,.backroom .form-field select{background:#1C1018;border-color:rgba(240,105,154,.34)}

/* The gate is a door, not a card: full bleed, left aligned, photograph behind. */
.backroom.gate-view main{position:relative;overflow:hidden;display:flex;align-items:center;
  min-height:min(78vh,760px)}
.backroom.gate-view main>*{position:relative;z-index:2;width:100%}
.backroom.gate-view main::before{content:"";position:absolute;inset:0;z-index:0;
  background-repeat:no-repeat;background-position:right center;background-size:cover;opacity:.8}
/* One of five, chosen per request by index.php, which puts hero-1..hero-5 on the body.
   Kept as classes rather than an inline style because the Back Room's CSP sets
   style-src 'self' with no unsafe-inline, so a style="" attribute would be blocked. */
.backroom.gate-view.hero-1 main::before{background-image:url("/images/backroom-hero-01.jpg")}
.backroom.gate-view.hero-2 main::before{background-image:url("/images/backroom-hero-02.jpg")}
.backroom.gate-view.hero-3 main::before{background-image:url("/images/backroom-hero-03.jpg")}
.backroom.gate-view.hero-4 main::before{background-image:url("/images/backroom-hero-04.jpg")}
.backroom.gate-view.hero-5 main::before{background-image:url("/images/backroom-hero-05.jpg")}
/* Six is the odd one: portrait, so it is fitted to the container height and
   anchored right instead of covering. Its baked fade ends at 48% not 58%. */
.backroom.gate-view.hero-6 main::before{background-image:url("/images/backroom-hero-06.jpg");
  background-size:auto 100%}
.backroom.gate-view main::after{content:"";position:absolute;inset:0;z-index:1;background:
  radial-gradient(52% 64% at 82% 24%,rgba(214,52,112,.34),transparent 66%),
  radial-gradient(56% 66% at 96% 104%,rgba(150,30,110,.26),transparent 66%),
  linear-gradient(100deg,rgba(18,12,17,.96) 0%,rgba(18,12,17,.8) 30%,rgba(18,12,17,.34) 56%,rgba(18,12,17,.12) 100%)}
.backroom.gate-view .room-wrap{width:min(100% - 40px,1280px)}
.backroom.gate-view .gate-card{max-width:none;margin:0;border:0;padding:0;background:none;
  box-shadow:none;text-align:left}
.backroom.gate-view .gate-card h1{font-family:"Playfair Display",Georgia,serif;font-weight:600;
  font-size:clamp(3.4rem,9vw,7rem);line-height:.9;letter-spacing:-.02em;margin:0 0 1.6rem}
.backroom.gate-view .room-lede{font-family:var(--body);font-weight:300;
  font-size:clamp(1.1rem,2.2vw,1.42rem);line-height:1.5;max-width:30ch;margin:0 0 2.6rem;
  color:rgba(243,233,222,.8)}
.backroom.gate-view .room-actions{justify-content:flex-start;margin:0 0 1.9rem}
.backroom.gate-view .fine{font-size:.95rem;color:var(--muted)}

/* Narrow screens: the figure is nearly as wide as the viewport, so the type
   would land on her. Drop the photograph back and darken the whole frame. */
@media(max-width:820px){
  .backroom.gate-view main{min-height:0}
  .backroom.gate-view main::before{opacity:.34;background-position:72% center;background-size:cover}
  .backroom.gate-view main::after{background:
    radial-gradient(70% 46% at 78% 10%,rgba(214,52,112,.28),transparent 66%),
    linear-gradient(180deg,rgba(18,12,17,.84) 0%,rgba(18,12,17,.9) 55%,rgba(18,12,17,.96) 100%)}
}

/* admin stats tables */
.admin-table{width:100%;border-collapse:collapse;margin:1.2rem 0 2rem;font-size:14px}
.admin-table th,.admin-table td{text-align:left;padding:.6rem .7rem;border-bottom:1px solid rgba(216,185,143,.18)}
.admin-table th{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--champagne,#D8B98F);font-weight:500}
.admin-table tbody tr.cold{opacity:.45}
.admin-table td:nth-child(n+3){font-variant-numeric:tabular-nums}

/* gate: the free-book signup under the access buttons */
.gate-list{margin:2.4rem 0 0;padding-top:2rem;border-top:1px solid var(--line);max-width:34rem}
.gate-list .eyebrow{margin-bottom:.7rem}
.gate-list-lede{color:rgba(243,233,222,.8);margin:0 0 1.2rem;max-width:32ch}
.gate-signup{display:flex;gap:.7rem;flex-wrap:wrap;margin:0 0 1rem}
.gate-signup input[type=email]{flex:1 1 15rem;min-width:0;border:1px solid rgba(240,105,154,.34);
  background:#1C1018;color:var(--cream);padding:.85rem 1rem;font:inherit;border-radius:0}
.gate-signup input[type=email]:focus{outline:2px solid var(--champagne);outline-offset:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:560px){.gate-signup .btn{width:100%}}