/* app.css — The Love Symposium 2026, "the painted register".
   Every colour is a token in :root; no raw hex below this block. */
:root{
  --navy:#101830;
  --navy-deep:#0a0f20;
  --cream:#f7f0df;
  --teal:#3e8e8c;
  --cherry:#d6493c;
  --gold:#e0a458;
  --chrome-lo:#a8b0bc;

  --panel:rgba(16,24,48,.72);
  --panel-solid:rgba(10,15,32,.92);
  --hair:rgba(224,164,88,.42);        /* gold hairline — the window mullion */
  --hair-soft:rgba(224,164,88,.18);
  --ink:rgba(247,240,223,.92);
  --ink-dim:rgba(247,240,223,.62);
  --scrim-top:rgba(10,15,32,.86);
  --scrim-mid:rgba(10,15,32,.55);
  --scrim-bot:rgba(10,15,32,.95);
  --shadow:0 18px 50px rgba(10,15,32,.55);
  --teal-glow:rgba(62,142,140,.55);
  --gold-glow:rgba(224,164,88,.22);
  --cherry-soft:rgba(214,73,60,.18);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--navy-deep);
  color:var(--ink);
  font-family:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:300;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overflow-x:hidden;
}

/* ---------------------------------------------------------------- the hero */
#hero{
  position:fixed; inset:-8vh 0 0 0; z-index:-2;
  background:url('/static/hero_sf.jpg') center bottom / cover no-repeat;
  will-change:transform;
}
#hero-scrim{
  position:fixed; inset:0; z-index:-1;
  background:linear-gradient(180deg,var(--scrim-top) 0%,var(--scrim-mid) 34%,
             var(--scrim-mid) 52%,var(--scrim-bot) 100%);
}

/* ---------------------------------------------------------------- type */
h1,h2,h3,.wordmark{
  font-family:'Cormorant',Georgia,serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em; color:var(--cream);
  margin:0 0 .4em; line-height:1.12;
}
h1{font-size:clamp(28px,7vw,52px)}
h2{font-size:clamp(20px,4.4vw,27px)}
h3{font-size:17px; letter-spacing:.1em}
.script{font-family:'Great Vibes',cursive; text-transform:none; letter-spacing:0; color:var(--gold)}
.eyebrow{
  font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--chrome-lo); margin:0 0 14px;
}
.label{
  display:block; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--chrome-lo); margin:0 0 6px; font-weight:400;
}
.muted{color:var(--ink-dim)}
.tiny{font-size:12.5px; letter-spacing:.02em}
a{color:var(--gold)}

/* ---------------------------------------------------------------- shell */
.wrap{max-width:1180px; margin:0 auto; padding:0 18px 70px}
.panel{
  background:var(--panel);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid var(--hair); border-radius:14px;
  padding:22px 20px; margin:0 0 18px; box-shadow:var(--shadow);
}
.panel > h2:first-child,.panel > .eyebrow:first-child{margin-top:0}
.rule{height:1px; background:var(--hair-soft); border:0; margin:18px 0}

/* ---------------------------------------------------------------- inputs */
.field{margin:0 0 16px}
input[type=text],input[type=email],input[type=url],textarea,select{
  width:100%; display:block; background:transparent; color:var(--cream);
  font-family:inherit; font-size:16px; font-weight:300;
  border:0; border-bottom:1px solid var(--hair); border-radius:0;
  padding:7px 2px; outline:none; transition:border-color .16s;
}
textarea{border:1px solid var(--hair); border-radius:10px; padding:11px 12px; resize:vertical}
input::placeholder,textarea::placeholder{color:var(--chrome-lo); opacity:.62}
input:focus,textarea:focus{border-color:var(--teal); box-shadow:0 1px 0 var(--teal-glow)}
input[type=file]{color:var(--chrome-lo); font-size:13px}

.btn{
  display:inline-block; font-family:inherit; font-size:13px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; cursor:pointer;
  border-radius:999px; padding:11px 22px; border:1px solid transparent;
  background:var(--cherry); color:var(--cream); text-decoration:none;
  transition:transform .12s, opacity .12s;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-ghost{background:transparent; border-color:var(--hair); color:var(--cream)}
.btn-ghost:hover{border-color:var(--gold)}
.btn[disabled],.btn.off{opacity:.42; cursor:default; transform:none}
.btn-row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.linky{
  background:none; border:0; color:var(--gold); font:inherit; font-size:13px;
  letter-spacing:.08em; cursor:pointer; padding:4px 0; text-decoration:underline;
}

.saved{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--teal); opacity:0; transition:opacity .3s;
}
.saved.on{opacity:1}

/* ---------------------------------------------------------------- layout */
.layout{display:block}
.col-card{margin:0 0 18px}
@media(min-width:900px){
  .layout{display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:0 26px; align-items:start}
  .layout > .s-me{grid-column:1; grid-row:1}
  .layout > .s-rest{grid-column:1; grid-row:2}
  .layout > .col-card{
    grid-column:2; grid-row:1 / span 2; align-self:start;
    position:sticky; top:24px; margin:0;
  }
}

/* ---------------------------------------------------------------- the card */
.card{
  position:relative; width:100%; aspect-ratio:3/4; overflow:hidden;
  border-radius:14px; border:1px solid var(--hair); box-shadow:var(--shadow);
  background:var(--navy-deep);
}
.card-img{
  position:absolute; inset:0;
  background-position:center 32%; background-size:cover; background-repeat:no-repeat;
}
.card-img.hero{background-position:64% 44%; filter:saturate(.9)}
.card-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(16,24,48,0) 38%,rgba(16,24,48,.72) 68%,
             var(--navy-deep) 100%);
}
.card-body{position:absolute; left:0; right:0; bottom:0; padding:18px 16px 16px}
.card-name{
  font-family:'Cormorant',Georgia,serif; font-weight:600; text-transform:uppercase;
  letter-spacing:.08em; color:var(--cream); font-size:clamp(19px,2.2vw,23px); line-height:1.1;
}
.card-title{color:var(--gold); font-size:13.5px; letter-spacing:.05em; margin-top:5px; min-height:1.2em}
.card-chips{display:flex; gap:7px; flex-wrap:wrap; margin-top:10px}
.chip{
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--chrome-lo);
  border:1px solid var(--hair-soft); border-radius:999px; padding:3px 9px; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.card-cap{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--chrome-lo);
  margin:10px 0 0; text-align:center;
}

/* ---------------------------------------------------------------- portrait */
.gen-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px}
.gen-cell{
  position:relative; border:1px solid var(--hair-soft); border-radius:10px; overflow:hidden;
  cursor:pointer; background:var(--navy-deep); aspect-ratio:1/1; padding:0;
}
.gen-cell img{width:100%; height:100%; object-fit:cover; display:block}
.gen-cell.sel{border-color:var(--gold); box-shadow:0 0 0 2px var(--gold-glow)}
.gen-cell span{
  position:absolute; left:6px; bottom:5px; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cream); text-shadow:0 1px 4px var(--navy-deep);
}
.progress{
  display:none; align-items:center; gap:10px; margin-top:14px;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--teal);
}
.progress.on{display:flex}
.progress i{
  width:9px; height:9px; border-radius:50%; background:var(--teal);
  animation:pulse 1.1s infinite ease-in-out;
}
@keyframes pulse{0%,100%{opacity:.25; transform:scale(.75)}50%{opacity:1; transform:scale(1)}}
.thumb{
  width:62px; height:62px; object-fit:cover; border-radius:10px;
  border:1px solid var(--hair-soft);
}

/* ---------------------------------------------------------------- calendar */
.cal{display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-top:12px}
.cal-h{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--chrome-lo);
  text-align:center; padding:3px 0;
}
.cal-d{
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--hair-soft); border-radius:9px; background:transparent;
  color:var(--ink); font-family:inherit; font-size:14px; cursor:pointer; padding:0;
  transition:background .14s, color .14s, border-color .14s;
}
.cal-d:hover{border-color:var(--gold)}
.cal-d.best{background:var(--gold); border-color:var(--gold); color:var(--navy-deep); font-weight:500}
.cal-d.worst{background:var(--cherry); border-color:var(--cherry); color:var(--cream); font-weight:500}
.cal.dim .cal-d{opacity:.34}
.legend{display:flex; gap:16px; flex-wrap:wrap; margin-top:12px; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--chrome-lo)}
.legend i{display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:6px;
  vertical-align:-1px}
.sw-best{background:var(--gold)} .sw-worst{background:var(--cherry)}
.sw-none{border:1px solid var(--hair-soft)}
.btn.sel{background:var(--gold); color:var(--navy-deep); border-color:var(--gold)}

/* ---------------------------------------------------------------- slots */
.days{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:12px}
@media(max-width:520px){.days{grid-template-columns:1fr}}
.day h3{margin-bottom:8px}
.slot{
  display:flex; justify-content:space-between; align-items:center; gap:8px; width:100%;
  border:1px solid var(--hair-soft); border-radius:10px; background:transparent;
  color:var(--ink); font-family:inherit; font-size:14px; padding:9px 12px;
  margin-bottom:7px; cursor:pointer; text-align:left;
  transition:border-color .14s, background .14s;
}
.slot .t{letter-spacing:.06em}
.slot .w{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--chrome-lo)}
.slot:hover{border-color:var(--gold)}
.slot.mine{border-color:var(--gold); background:var(--gold-glow)}
.slot.mine .w{color:var(--gold)}
.slot.taken{cursor:default; background:var(--cherry-soft); border-color:var(--hair-soft)}
.slot.taken:hover{border-color:var(--hair-soft)}
.flash{
  margin-top:10px; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--cherry); min-height:1em;
}

/* ---------------------------------------------------------------- admin/tool */
.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{border-collapse:collapse; width:100%; font-size:13px}
th{
  text-align:left; font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--chrome-lo); font-weight:400; padding:6px 9px; border-bottom:1px solid var(--hair);
  white-space:nowrap;
}
td{padding:7px 9px; border-bottom:1px solid var(--hair-soft); vertical-align:top}
td.nowrap{white-space:nowrap}
.yes{color:var(--teal)} .no{color:var(--chrome-lo)}
.linkbox{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  border:1px solid var(--hair); border-radius:10px; padding:10px 12px;
  background:var(--panel-solid); margin:10px 0;
}
.linkbox code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px;
  color:var(--cream); word-break:break-all; flex:1 1 220px;
}
.big-link code{font-size:15px; color:var(--gold)}
.foot{
  text-align:center; color:var(--chrome-lo); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; padding:18px 0 34px;
}
.foot .ver{display:block; margin-top:8px; font-size:10px; opacity:.6; letter-spacing:.2em}

/* ---------------------------------------------------------------- landing */
.landing{
  min-height:100vh; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; padding:40px 22px;
}
.landing .wordmark{font-size:clamp(30px,8.5vw,64px); margin-bottom:6px}
.landing .year{font-size:clamp(26px,7vw,44px); margin:0 0 18px}
.landing .line{color:var(--ink-dim); letter-spacing:.06em}
.landing .place{
  font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--chrome-lo);
  margin-bottom:26px;
}

/* ---------------------------------------------------------------- misc */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:18px}
.letter{font-size:17px; line-height:1.7}
.letter .dear{font-family:'Great Vibes',cursive; font-size:32px; color:var(--gold);
  display:block; margin-bottom:6px; letter-spacing:0; text-transform:none}
.letter .sign{margin-top:16px; color:var(--chrome-lo); letter-spacing:.06em}
@media(prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ---------------------------------------------------------------- small screens */
@media(max-width:430px){
  .eyebrow{letter-spacing:.18em; font-size:10px}
  .wrap{padding-left:14px; padding-right:14px}
  .panel{padding:18px 15px}
}

/* file inputs wear the cream-outline pill like everything else */
.filepick input[type=file]{position:absolute; width:1px; height:1px; opacity:0; overflow:hidden}
.filepick .btn-ghost{margin-right:10px}
.filename{font-size:12.5px; color:var(--chrome-lo); letter-spacing:.04em}