/* ============================================================
   BRENNAN MANOR  |  MIDNIGHT RELEASE  |  1926
   Art Deco theme: onyx, old gold, parchment
   ============================================================ */

:root{
  --ink:#0a0907;
  --onyx:#14120e;
  --onyx-2:#1d1a14;
  --gold:#c9a24a;
  --gold-2:#e6cc86;
  --gold-3:#8e6f2b;
  --cream:#f1e6cc;
  --parchment:#eadcb9;
  --paper:#f4ecd8;
  --smoke:#a69c86;
  --wine:#5e1f26;
  --wine-2:#8a2f39;
  --shadow:0 30px 60px rgba(0,0,0,.55);
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --display:'Cinzel Decorative', 'Cinzel', serif;
  --caps:'Cinzel', serif;
  --sans:'Josefin Sans', 'Futura', 'Century Gothic', sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--serif);
  font-size:19px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(ellipse at 50% -20%, rgba(201,162,74,.18), transparent 55%),
    repeating-conic-gradient(from 90deg at 50% -30%, rgba(201,162,74,.035) 0 2deg, transparent 2deg 9deg);
  background-attachment:fixed;
}
a{color:var(--gold-2);text-decoration:none}
a:hover{color:#fff}
img{max-width:100%;display:block}

/* ---------- Typography ---------- */
h1,h2,h3,h4{font-family:var(--caps);font-weight:600;letter-spacing:.08em;color:var(--gold-2);margin:0 0 .5em;line-height:1.15}
h1{font-family:var(--display);font-weight:700;font-size:clamp(2rem,6vw,4.2rem);letter-spacing:.06em;text-transform:uppercase}
h2{font-size:clamp(1.35rem,3.4vw,2rem);text-transform:uppercase}
h3{font-size:1.15rem;text-transform:uppercase;letter-spacing:.14em;color:var(--gold)}
p{margin:0 0 1em}
.lede{font-size:1.25em;font-style:italic;color:var(--parchment)}
.eyebrow{font-family:var(--sans);font-weight:400;font-size:.72rem;letter-spacing:.42em;text-transform:uppercase;color:var(--gold);margin-bottom:.9rem}
.small{font-size:.85em;color:var(--smoke)}
.center{text-align:center}
strong{color:var(--cream)}
em{color:var(--parchment)}

/* ---------- Layout ---------- */
.wrap{width:min(1080px,92vw);margin:0 auto}
.narrow{width:min(760px,92vw);margin:0 auto}
section{padding:4rem 0}
.hero{padding:5rem 0 3.5rem;text-align:center;position:relative}

/* Gold rule with diamond */
.rule{display:flex;align-items:center;gap:1rem;margin:2.2rem auto;max-width:520px}
.rule::before,.rule::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.rule span{width:9px;height:9px;background:var(--gold);transform:rotate(45deg);display:block}

/* Deco frame */
.frame{position:relative;border:1px solid var(--gold-3);padding:2.6rem 2.2rem;background:linear-gradient(180deg,rgba(29,26,20,.92),rgba(20,18,14,.96));box-shadow:var(--shadow)}
.frame::before{content:"";position:absolute;inset:7px;border:1px solid var(--gold);pointer-events:none;opacity:.7}
.frame::after{content:"";position:absolute;inset:11px;border:1px solid var(--gold-3);pointer-events:none;opacity:.4}
.frame .corner{position:absolute;width:26px;height:26px;border-color:var(--gold-2);border-style:solid;border-width:0}
.frame .c1{top:-1px;left:-1px;border-top-width:3px;border-left-width:3px}
.frame .c2{top:-1px;right:-1px;border-top-width:3px;border-right-width:3px}
.frame .c3{bottom:-1px;left:-1px;border-bottom-width:3px;border-left-width:3px}
.frame .c4{bottom:-1px;right:-1px;border-bottom-width:3px;border-right-width:3px}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(10,9,7,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--gold-3)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:62px}
.brand{font-family:var(--display);font-weight:700;letter-spacing:.14em;font-size:.95rem;color:var(--gold-2);text-transform:uppercase;white-space:nowrap}
.brand small{display:block;font-family:var(--sans);font-weight:300;font-size:.55rem;letter-spacing:.4em;color:var(--smoke)}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1.6rem}
.nav li a{font-family:var(--sans);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--parchment);padding:.4rem 0;border-bottom:1px solid transparent}
.nav li a:hover,.nav li a.active{color:var(--gold-2);border-bottom-color:var(--gold)}
.nav .burger{display:none;background:none;border:1px solid var(--gold-3);color:var(--gold-2);font-family:var(--sans);letter-spacing:.3em;font-size:.65rem;padding:.55rem .8rem;cursor:pointer}
@media (max-width:820px){
  .nav ul{display:none;position:absolute;left:0;right:0;top:62px;background:rgba(10,9,7,.98);flex-direction:column;gap:0;border-bottom:1px solid var(--gold-3)}
  .nav ul.open{display:flex}
  .nav li a{display:block;padding:1rem 4vw;border-bottom:1px solid rgba(201,162,74,.15)}
  .nav .burger{display:block}
}

/* ---------- Buttons ---------- */
.btn{display:inline-block;font-family:var(--sans);font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;padding:1rem 1.8rem;border:1px solid var(--gold);color:var(--gold-2);background:transparent;cursor:pointer;transition:.2s;position:relative}
.btn:hover{background:var(--gold);color:var(--ink)}
.btn.solid{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:var(--ink);border-color:var(--gold-2)}
.btn.solid:hover{filter:brightness(1.1)}
.btn-row{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-top:2rem}

/* ---------- Cards ---------- */
.grid{display:grid;gap:1.4rem}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{border:1px solid var(--gold-3);padding:1.8rem;background:rgba(29,26,20,.75);position:relative;transition:.25s}
.card:hover{border-color:var(--gold);transform:translateY(-2px)}
.card .num{font-family:var(--caps);font-size:.75rem;letter-spacing:.3em;color:var(--gold);margin-bottom:.4rem}
.card h3{margin-bottom:.4rem}
.card .names{font-family:var(--serif);font-size:1.25rem;color:var(--cream);margin:0 0 .3rem}
.card .role{color:var(--smoke);font-style:italic;margin:0}
.card .lock{position:absolute;top:1.1rem;right:1.1rem;color:var(--gold-3);font-size:.9rem}
.card.locked-ok .lock{color:var(--gold-2)}
a.card{display:block;color:inherit}

/* ---------- Roster tables ---------- */
.roster{width:100%;border-collapse:collapse;margin:1rem 0 2rem}
.roster th{font-family:var(--sans);font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);text-align:left;padding:.7rem .6rem;border-bottom:1px solid var(--gold-3)}
.roster td{padding:.75rem .6rem;border-bottom:1px solid rgba(201,162,74,.15);vertical-align:top}
.roster td.pair{font-family:var(--caps);font-size:.75rem;letter-spacing:.2em;color:var(--gold-2);white-space:nowrap}
.roster td.guest{color:var(--smoke);white-space:nowrap}
.roster td.char{color:var(--cream);font-weight:600}
.roster td.role{color:var(--parchment);font-style:italic}
@media (max-width:700px){
  .roster thead{display:none}
  .roster tr{display:block;padding:.9rem 0;border-bottom:1px solid var(--gold-3)}
  .roster td{display:block;border:0;padding:.15rem 0;white-space:normal}
  .roster td.pair{margin-bottom:.2rem}
}

/* ---------- Steps / timeline ---------- */
.steps{counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{position:relative;padding:1.2rem 0 1.2rem 4.2rem;border-bottom:1px solid rgba(201,162,74,.18)}
.steps li::before{counter-increment:s;content:counter(s,upper-roman);position:absolute;left:0;top:1.15rem;width:3rem;font-family:var(--caps);font-size:1.3rem;color:var(--gold);text-align:center;border-right:1px solid var(--gold-3)}
.steps li h4{margin-bottom:.3rem;letter-spacing:.14em;color:var(--gold-2)}
.steps li p{margin:0;color:var(--parchment)}

/* ---------- Notices ---------- */
.notice{border-left:3px solid var(--gold);background:rgba(201,162,74,.07);padding:1.1rem 1.4rem;margin:1.6rem 0}
.notice .eyebrow{margin-bottom:.4rem}
.notice.wine{border-left-color:var(--wine-2);background:rgba(94,31,38,.18)}
.quote{font-size:1.35rem;font-style:italic;text-align:center;color:var(--parchment);padding:1.4rem 1rem;position:relative}
.quote::before,.quote::after{color:var(--gold);font-family:var(--display);font-size:2.5rem;line-height:0;position:relative;top:.9rem;margin:0 .4rem}
.quote::before{content:"\201C"}.quote::after{content:"\201D"}

/* ---------- Dossier paper ---------- */
.dossier{background:var(--paper);color:#1d1810;padding:2.6rem clamp(1.2rem,4vw,3.2rem);box-shadow:var(--shadow);position:relative;
  background-image:radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.4), transparent 60%),radial-gradient(ellipse at 80% 90%, rgba(120,90,40,.12), transparent 60%)}
.dossier::before{content:"";position:absolute;inset:10px;border:1px solid rgba(120,90,40,.45);pointer-events:none}
.dossier h2,.dossier h3,.dossier h4{color:#4a3511}
.dossier h2{font-size:1.5rem;letter-spacing:.14em}
.dossier .eyebrow{color:#8a6a2a}
.dossier p{color:#2a2318}
.dossier strong{color:#1d1810}
.dossier em{color:#3f3425}
.dossier .small{color:#6b5a3f}
.dossier .stamp{font-family:var(--caps);font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;color:var(--wine-2);border:2px solid var(--wine-2);display:inline-block;padding:.35rem .7rem;transform:rotate(-2deg);margin-bottom:1rem}
.dossier .rule::before,.dossier .rule::after{background:linear-gradient(90deg,transparent,#8a6a2a,transparent)}
.dossier .rule span{background:#8a6a2a}
.dossier .pairhead{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin:1.6rem 0}
.dossier .pairhead > div{border:1px solid rgba(120,90,40,.45);padding:1.2rem;text-align:center}
.dossier .pairhead h3{margin-bottom:.2rem;font-size:1.05rem}
.dossier .pairhead p{font-style:italic;margin:0;color:#4a3d2b}
@media (max-width:620px){.dossier .pairhead{grid-template-columns:1fr}}
.dossier .box{border:1px solid rgba(120,90,40,.5);padding:1.1rem 1.3rem;margin:1.4rem 0;background:rgba(255,255,255,.25)}
.dossier .box .eyebrow{margin-bottom:.3rem}
.dossier ol{padding-left:1.3rem}
.dossier ol li{margin-bottom:.45rem}
.dossier table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.95em}
.dossier th{font-family:var(--sans);font-size:.62rem;letter-spacing:.25em;text-transform:uppercase;color:#8a6a2a;text-align:left;padding:.5rem .5rem;border-bottom:1px solid #8a6a2a}
.dossier td{padding:.55rem .5rem;border-bottom:1px solid rgba(120,90,40,.3);vertical-align:top}
.dossier .sig{font-family:var(--caps);font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;text-align:center;color:#8a6a2a;margin-top:2rem;padding-top:1rem;border-top:1px solid rgba(120,90,40,.4)}
.dossier .section{margin-top:2.4rem;padding-top:1.6rem;border-top:1px dashed rgba(120,90,40,.45)}
.dossier .artifact{margin:1.5rem auto;max-width:640px;box-shadow:0 20px 40px rgba(0,0,0,.35);transform:rotate(-.6deg)}

/* Private insert accordion */
.insert{border:1px solid #8a6a2a;margin:1.3rem 0;background:rgba(255,255,255,.35)}
.insert summary{cursor:pointer;list-style:none;padding:1rem 1.3rem;font-family:var(--caps);letter-spacing:.14em;font-size:.9rem;color:#4a3511;display:flex;justify-content:space-between;align-items:center}
.insert summary::-webkit-details-marker{display:none}
.insert summary .tag{font-family:var(--sans);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--wine-2)}
.insert[open] summary{border-bottom:1px solid rgba(120,90,40,.4)}
.insert .inner{padding:1.2rem 1.3rem}

/* ---------- Gate (password) ---------- */
.gate{margin:1.6rem 0}
.gate .panel{border:1px solid var(--gold-3);background:linear-gradient(180deg,rgba(29,26,20,.95),rgba(14,12,9,.98));padding:2.2rem clamp(1rem,4vw,2.6rem);text-align:center;position:relative}
.gate .panel::before{content:"";position:absolute;inset:6px;border:1px solid rgba(201,162,74,.5);pointer-events:none}
.gate .seal{width:74px;height:74px;border-radius:50%;margin:0 auto 1rem;border:2px solid var(--wine-2);background:radial-gradient(circle at 40% 35%,#9a3a45,#4a161c);display:flex;align-items:center;justify-content:center;font-family:var(--display);color:var(--gold-2);font-size:1.5rem;box-shadow:0 6px 14px rgba(0,0,0,.5)}
.gate h3{color:var(--gold-2);font-size:1rem}
.gate p{color:var(--smoke);font-size:.95em;max-width:520px;margin:0 auto 1.2rem}
.gate form{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.gate input{font-family:var(--caps);letter-spacing:.3em;text-transform:uppercase;font-size:1rem;padding:.8rem 1rem;background:var(--ink);border:1px solid var(--gold-3);color:var(--gold-2);min-width:220px;text-align:center;outline:none}
.gate input:focus{border-color:var(--gold-2)}
.gate .err{color:#e08a8a;font-family:var(--sans);font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;margin-top:.9rem;min-height:1em}
.gate.dossier-gate .panel{background:rgba(244,236,216,.08)}
.dossier .gate .panel{background:#2a2318;color:var(--cream)}
.revealed{animation:fade .6s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- Footer ---------- */
footer{padding:3rem 0;text-align:center;border-top:1px solid var(--gold-3);margin-top:3rem}
footer p{font-family:var(--sans);font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;color:var(--smoke);margin:.3rem 0}

/* ---------- Invitation band ---------- */
.band{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.2rem;text-align:center;margin:2rem 0}
.band > div{border:1px solid var(--gold-3);padding:1.2rem .8rem}
.band .eyebrow{margin-bottom:.4rem}
.band b{font-family:var(--caps);font-size:1.05rem;letter-spacing:.1em;color:var(--cream)}

/* Portrait */
.portrait{max-width:380px;margin:0 auto;border:1px solid var(--gold-3);padding:10px;background:var(--onyx-2);box-shadow:var(--shadow)}
.portrait img{filter:sepia(.15) contrast(1.02)}
.portrait figcaption{font-family:var(--sans);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--smoke);text-align:center;padding-top:.7rem}

.story{display:grid;grid-template-columns:380px 1fr;gap:3rem;align-items:center}
@media (max-width:860px){.story{grid-template-columns:1fr}}

@media print{
  body{background:#fff;color:#000}
  .nav,footer,.gate,.btn{display:none!important}
  .dossier{box-shadow:none}
}

.dossier .mark{color:#8a2f39;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;font-weight:700}