/* Open Secret — winter night ground, ember accent, spruce for the ceremony. */

:root{
  --bg:#11161d; --bg-deep:#0d1218;
  --surface:#151c24; --surface-2:#1b232c;
  --fg:#ece7df; --muted:#9aa7b5; --dim:#6f7d8b;
  --line:#242d38; --line-2:#2c3845;
  --ember:#d98b3f; --ember-dim:#221a10; --ember-line:#3a2d1a;
  --spruce:#5fae8c; --spruce-dim:#141f1a; --spruce-line:#1f3129;
  --warn:#d6a24a; --crit:#e07b7b;
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
img{max-width:100%}
[hidden]{display:none !important}

h1,h2,h3{margin:0; font-weight:600; line-height:1.15; text-wrap:balance}
p{margin:0}
.display{font-family:var(--display); font-size:clamp(2.1rem,6vw,3.4rem); letter-spacing:-.022em}
.display.sm{font-size:clamp(1.6rem,4vw,2.3rem); letter-spacing:-.015em}
.eyebrow{font-size:.69rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.eyebrow.spruce{color:var(--spruce)}
.eyebrow.ember{color:var(--ember)}
.lede{font-size:1.02rem; line-height:1.7; color:#b6c0ca; max-width:62ch}
.dateline{font-family:var(--display); font-size:1.15rem; color:var(--ember)}
.note{font-size:.86rem; line-height:1.6; color:var(--muted)}
.note.err{color:var(--crit)} .note.ok{color:var(--spruce)}
.strong{font-weight:600; color:var(--fg)}
.num{font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:1040px; margin:0 auto;
  padding-left:max(18px,env(safe-area-inset-left,0px));
  padding-right:max(18px,env(safe-area-inset-right,0px));
}
.band{padding-block:46px}
.band.bordered{border-top:1px solid var(--line)}
.hero{padding-block:64px 40px}
.hero.tight{padding-block:48px 24px}
.hero .display{margin-bottom:0}
.hero .dateline{margin-top:16px}
.hero .lede{margin-top:18px}
.hero .eyebrow{margin-bottom:12px}
.foot{padding-block:36px 56px; border-top:1px solid var(--line)}
.head-row{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between}

/* nav */
.nav{position:sticky; top:env(safe-area-inset-top,0px); z-index:9; background:var(--bg); border-bottom:1px solid var(--line)}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:10; background:var(--bg)}
.nav-inner{max-width:1040px; margin:0 auto; display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
  padding-block:13px;
  padding-left:max(18px,env(safe-area-inset-left,0px));
  padding-right:max(18px,env(safe-area-inset-right,0px));
}
.brand{font-family:var(--display); font-size:1.15rem; font-weight:600; color:var(--fg); text-decoration:none; letter-spacing:-.01em}
.nav-links{display:flex; flex-wrap:wrap; gap:3px; align-items:center}
.nav-links a{font-size:.86rem; font-weight:500; color:var(--muted); text-decoration:none; padding:8px 12px; border-radius:7px}
.nav-links a:hover{color:var(--fg); background:var(--surface-2)}
.nav-links a[aria-current="page"]{color:var(--fg); background:var(--surface-2)}
.nav-links .btn{margin-left:6px}

:where(a,button,input,select,textarea):focus-visible{outline:2px solid var(--ember); outline-offset:2px}

/* boot / gate */
.boot{min-height:70vh; display:flex; align-items:center; justify-content:center; padding:48px 20px}
.denied-card{max-width:420px; text-align:center}
.gate-body{background:var(--bg-deep)}
.gate{min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:56px 20px}
.gate-inner{width:100%; max-width:430px}
.gate-title{font-family:var(--display); font-size:clamp(2.2rem,8vw,2.8rem); letter-spacing:-.02em; margin-top:12px}
.gate-lede{margin-top:14px; color:var(--muted); font-size:1rem; line-height:1.65}
.gate-card{margin-top:26px}
.gate-foot{margin-top:24px; font-size:.8rem; color:var(--dim); text-align:center}
.sent-icon{width:44px;height:44px;margin:0 auto 16px;border-radius:999px;background:var(--spruce-dim);color:var(--spruce);display:flex;align-items:center;justify-content:center}
.sent-title{font-family:var(--display); font-size:1.45rem; text-align:center}
#gate-sent{text-align:center}
#gate-sent .note{margin-top:9px}
#gate-again{margin-top:18px}

/* cards */
.card{background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:22px}
.stack{display:flex; flex-direction:column; gap:11px}
.card-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:13px; margin-bottom:18px}
.split{display:flex; flex-wrap:wrap; gap:36px; align-items:flex-start}
.split-main{flex:999 1 480px; min-width:0}
.split-side{flex:1 1 280px; min-width:0}

.item{background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:15px 17px}
.item-top{display:flex; justify-content:space-between; gap:10px; align-items:flex-start}
.item-name{font-size:.95rem; font-weight:600}
.item-meta{font-size:.8rem; color:var(--muted); margin-top:3px}
.item-body{font-size:.9rem; line-height:1.6; color:#b6c0ca; margin-top:10px}
.pill{flex:0 0 auto; font-size:.69rem; font-weight:600; letter-spacing:.03em; padding:3px 9px; border-radius:999px; border:1px solid var(--line-2); color:var(--muted); background:var(--surface-2)}
.pill.yes,.pill.spruce{color:var(--spruce); border-color:var(--spruce); background:none}
.pill.no{color:var(--crit); border-color:var(--crit); background:none}
.pill.maybe{color:var(--warn); border-color:var(--warn); background:none}
.pill.ember{color:var(--ember); border-color:var(--ember-line); background:var(--ember-dim)}
.empty{border:1px dashed var(--line-2); border-radius:11px; padding:22px 16px; text-align:center; color:var(--muted); font-size:.88rem}

/* hush */
.hush{margin-top:26px; display:flex; gap:12px; background:var(--ember-dim); border-left:3px solid var(--ember); border-radius:0 10px 10px 0; padding:16px 20px; max-width:720px}
.hush .note{margin-top:4px; color:#a9b4bf}

/* photos */
.photo-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:13px}
.photo-grid figure{margin:0; aspect-ratio:3/4; border-radius:10px; overflow:hidden; background:var(--surface-2); border:1px solid var(--line)}
.photo-grid img{width:100%; height:100%; object-fit:cover; display:block}

/* schedule / food rows */
.sched{display:flex; flex-direction:column}
.slot{display:grid; grid-template-columns:170px minmax(0,1fr); gap:24px; padding-block:22px; border-bottom:1px solid var(--line)}
.slot:last-child{border-bottom:0}
.slot-day{font-size:.9rem; font-weight:600}
.slot-time{font-family:var(--display); font-size:1.5rem; color:var(--ember); margin-top:3px}
.slot-sub{font-size:.79rem; color:var(--muted); margin-top:3px}
.slot h3{font-size:1.1rem; margin-bottom:6px}
.slot-body{font-size:.95rem; line-height:1.65; color:#b6c0ca}
.slot-foot{font-size:.85rem; color:var(--muted); margin-top:9px}
@media(max-width:620px){.slot{grid-template-columns:1fr; gap:8px}}

/* ceremony roles */
.role-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:13px; margin-top:18px}
.role{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:19px}
.role.lead{background:var(--spruce-dim); border-color:var(--spruce-line)}
.role-who{font-family:var(--display); font-size:1.3rem}
.role-what{font-size:.9rem; line-height:1.6; color:#b6c0ca; margin-top:8px}
.prep{background:var(--ember-dim); border:1px solid var(--ember-line); border-radius:13px; padding:22px}
.prep p{margin-top:10px; font-size:.95rem; line-height:1.65; color:#dfe5eb}

/* forms */
.field{display:flex; flex-direction:column; gap:6px; margin-top:15px; min-width:0; border:0; padding:0}
.field:first-child{margin-top:0}
label,legend{font-size:.74rem; font-weight:600; letter-spacing:.04em; color:var(--muted); padding:0}
legend{margin-bottom:8px}
input,select,textarea{font:inherit; font-size:.95rem; color:var(--fg); background:var(--surface-2);
  border:1px solid var(--line-2); border-radius:8px; padding:11px 13px; width:100%; min-width:0}
textarea{min-height:82px; resize:vertical}
.row2{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:15px; margin-top:15px}
.row3{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:15px; margin-top:15px}
.row2:first-child,.row3:first-child{margin-top:0}
.choice{display:flex; flex-wrap:wrap; gap:8px}
.choice button{font:inherit; font-size:.89rem; font-weight:500; color:var(--fg); background:var(--surface-2);
  border:1px solid var(--line-2); border-radius:999px; padding:9px 17px; cursor:pointer}
.choice button[aria-pressed="true"]{background:var(--fg); color:var(--bg); border-color:var(--fg)}
.choice.spruce button[aria-pressed="true"]{background:var(--spruce); color:var(--bg); border-color:var(--spruce)}
.actions{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:19px}

.btn{font:inherit; font-size:.92rem; font-weight:600; cursor:pointer; border-radius:8px;
  border:1px solid transparent; padding:12px 20px; background:var(--surface-2); color:var(--fg)}
.btn-primary{background:var(--ember); color:#11161d}
.btn-spruce{background:var(--spruce); color:#11161d}
.btn-ghost{background:none; color:var(--fg); border-color:var(--line-2); font-weight:500}
.btn-block{width:100%; margin-top:15px}
.btn-sm{padding:8px 13px; font-size:.82rem}
.btn-inline{display:inline-block; margin-top:26px; text-decoration:none}
.btn:hover{filter:brightness(1.08)}
.btn[disabled]{opacity:.45; cursor:not-allowed; filter:none}

/* chat */
.chat-card{padding:0; overflow:hidden}
.chat-log{display:flex; flex-direction:column; gap:17px; padding:22px; max-height:52vh; overflow-y:auto}
.msg{display:flex; gap:11px; align-items:flex-start}
.avatar{flex:0 0 auto; width:33px; height:33px; border-radius:999px; background:var(--line-2);
  display:flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:600; color:#b6c0ca}
.msg.host .avatar{background:var(--ember-line); color:var(--ember)}
.msg-head{font-size:.79rem; color:var(--muted); margin-bottom:3px}
.msg-head .who{font-weight:600; color:var(--fg)}
.msg.host .msg-head .who{color:var(--ember)}
.msg-body{font-size:.94rem; line-height:1.6; color:#dfe5eb; overflow-wrap:anywhere}
.chat-bar{display:flex; gap:9px; align-items:center; padding:15px 18px; border-top:1px solid var(--line); background:var(--bg)}
.chat-bar input{flex:1}
.chat-bar .btn{flex:0 0 auto}

/* tasks */
.task{display:flex; gap:12px; align-items:flex-start; background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:13px 15px}
.task.editing{border-color:var(--ember)}
.task-grow{flex:1; min-width:0}
.task-cat{font-size:.65rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ember)}
.task-title{font-size:.94rem; font-weight:600; margin-top:2px; overflow-wrap:anywhere}
.task.done .task-title{text-decoration:line-through; color:var(--muted)}
.task-owner{font-size:.78rem; color:var(--dim); margin-top:3px}
.task-side{flex:0 0 auto; display:flex; gap:2px; align-items:center}
.tick{flex:0 0 auto; width:21px; height:21px; margin-top:2px; border-radius:5px; border:1.5px solid var(--line-2);
  background:var(--surface-2); cursor:pointer; padding:0; color:var(--bg); font-size:.72rem; display:grid; place-items:center}
.task.done .tick{background:var(--spruce); border-color:var(--spruce)}
.icon-btn{width:30px; height:30px; display:flex; align-items:center; justify-content:center; color:var(--muted);
  background:none; border:none; border-radius:7px; cursor:pointer; padding:0}
.icon-btn:hover{color:var(--fg); background:var(--surface-2)}

@media(prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}