:root{
  /* The page has one face: her sky at night, with the sunrise beneath it. */
  --g1:#02194F; --g2:#032C5E; --g3:#064F8C; --g4:#6B5E52;
  --ink:#F6EEDF; --ink-dim:#C9BEAB;
  --accent:#FFB935; --accent-soft:#E8B978;
  --panel:rgba(2,20,58,.62); --panel-up:rgba(2,20,58,.82);
  --edge:rgba(255,185,53,.28); --edge-strong:rgba(255,185,53,.62);
  --frame-bg:rgba(0,10,30,.72);
  --btn-ink:#02194F; --btn-bg:#FFB935;
  --shadow:0 22px 60px rgba(0,0,0,.42);
  --serif:'Cormorant Garamond',Iowan Old Style,Palatino,Georgia,serif;
  --sans:'Lato',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
html{
  background:var(--g1);
  background-image:linear-gradient(180deg,
    var(--g1) 0%, var(--g2) 38%, var(--g3) 72%, var(--g4) 100%);
  background-attachment:fixed; background-repeat:no-repeat;
  min-height:100%;
}
body{
  margin:0; background:transparent; color:var(--ink);
  font-family:var(--sans); font-weight:300; -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:inherit}
.wrap{max-width:1180px; margin:0 auto; padding:0 20px}

/* ---- the page arrives the way the photograph does: night lifting into day ----
   A wash of night sits over everything and fades; her portrait rises as it
   brightens; the rest settles after her. Nothing here waits on a scroll, so the
   page reaches its resting state on its own within about two seconds. */
@keyframes dawn{
  0%{opacity:1}
  20%{opacity:.95}            /* the night holds a moment before it lifts */
  100%{opacity:0}
}
/* ⭐ SHE DOES NOT ARRIVE, SHE RESOLVES. The photograph is her face composited
   out of cloud over water at first light, so the page should do what the
   picture does: she comes out of the sky and into focus, rather than sliding
   in from somewhere. Blur and darkness lift together; the faint scale-down is
   the last of the haze letting go, not a zoom. */
@keyframes emerge{
  0%{opacity:0; transform:scale(1.05);
     filter:blur(15px) brightness(.24) saturate(.55)}
  40%{opacity:1}
  100%{opacity:1; transform:none; filter:blur(0) brightness(1) saturate(1)}
}
/* Her word arrives after her, the way a voice follows a face. */
@keyframes speaks{ from{opacity:0} to{opacity:1} }
@keyframes settle{
  from{opacity:0; transform:translateY(20px)}
  to{opacity:1; transform:none}
}
.dawn{position:fixed; inset:0; z-index:40; pointer-events:none;
  background:linear-gradient(180deg,#000616 0%,#01102F 48%,#02194F 100%);
  animation:dawn 3.8s cubic-bezier(.33,.02,.2,1) forwards}
.emerges{will-change:filter,opacity,transform;
  animation:emerge 3.6s cubic-bezier(.22,.5,.16,1) .15s both}
.speaks{animation:speaks 1.4s ease-out 2.3s both}
.settles{animation:settle 1.1s ease-out both}
.settles.d1{animation-delay:3s} .settles.d2{animation-delay:3.3s}
.settles.d3{animation-delay:3.6s} .settles.d4{animation-delay:3.9s}
.settles.d5{animation-delay:4.2s}
@media (prefers-reduced-motion:reduce){
  .dawn{display:none}
  .emerges,.speaks,.settles{animation:none !important;
    opacity:1; transform:none; filter:none}
}

/* ---- the photograph, held at its own square shape ---- */
.plate{position:relative; width:100%; aspect-ratio:1/1; max-height:92vh;
  margin:0 auto; background:#02194F url('cover.jpg') center/cover no-repeat;
  box-shadow:0 30px 90px rgba(0,0,0,.35)}
.plate.wide{max-width:min(88vh,980px)}

/* The clear sky, measured in the 1600px cover: x 880-1580, y 470-1230.
   Everything that sits inside the photograph is placed in this box. */
.sky{position:absolute; left:55%; right:1.25%; top:29.4%; bottom:23.1%;
  display:flex; flex-direction:column; justify-content:center; gap:14px}

.eyebrow{font-family:var(--sans); font-weight:400; font-size:11px;
  letter-spacing:.34em; text-transform:uppercase; color:#FFB935;
  margin:0 0 10px; text-shadow:0 1px 12px rgba(0,16,48,.9)}
/* The eyebrow is gold INSIDE the photograph, where gold is correct, and the
   page's own accent when it sits below the photograph on the page ground —
   otherwise it is gold on cream in light mode, which cannot be read. */
.doors-below .eyebrow{color:var(--accent); text-shadow:none}
.hers{font-family:var(--serif); font-weight:500;
  font-size:clamp(32px,6vw,52px); letter-spacing:.04em; color:var(--accent);
  text-align:center; margin:0 auto 18px; line-height:1.2}

/* ---- doors: always sit over the photograph, so they keep the sky's colors ---- */
.door{display:block; text-decoration:none; padding:15px 20px; min-height:44px;
  background:rgba(2,20,58,.62); border:1px solid rgba(255,185,53,.55);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  transition:background .35s ease, transform .35s ease, border-color .35s ease}
.door:hover,.door:focus-visible{background:rgba(2,20,58,.82);
  border-color:#FFB935; transform:translateY(-2px)}
.door b{display:block; font-family:var(--serif); font-weight:500;
  font-size:23px; letter-spacing:.05em; color:#F6EEDF}
.door span{display:block; margin-top:3px; font-size:12px; letter-spacing:.07em;
  text-transform:uppercase; color:#E8B978}

/* ---- sub pages ---- */
.band{padding:40px 0 26px; text-align:center}
.band h1{font-family:var(--serif); font-weight:500; font-size:clamp(30px,5vw,54px);
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
  margin:0 0 8px; text-wrap:balance}
.band p{margin:0; color:var(--ink-dim); font-size:14px; letter-spacing:.06em}

/* ---- back, and it is a button rather than a whisper ---- */
.back{display:inline-flex; align-items:center; gap:10px;
  min-height:48px; padding:12px 24px; margin:0 0 26px;
  font-family:var(--sans); font-size:13px; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
  color:var(--ink); background:var(--panel-up); border:1px solid var(--edge);
  border-radius:999px; box-shadow:var(--shadow)}
.back:hover,.back:focus-visible{border-color:var(--edge-strong)}
.back.bottom{margin:8px auto 0; display:inline-flex}
.backrow{text-align:center; padding:6px 20px 60px}
.nav{display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  align-items:center; margin-bottom:26px}
.nav .back{margin:0}

.piece{margin:0 auto 34px; max-width:900px; padding:24px;
  background:var(--panel); border:1px solid var(--edge);
  box-shadow:var(--shadow)}
.piece h2{font-family:var(--serif); font-weight:500; font-size:26px;
  letter-spacing:.06em; color:var(--ink); margin:0 0 4px}
.piece .meta{font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent-soft); margin:0 0 14px}

.framed{border:1px solid var(--edge); background:var(--frame-bg);
  padding:10px}
.framed video, .framed audio{display:block; width:100%; border:0}
.framed video{background:#02194F; aspect-ratio:16/9}
.framed audio{height:44px}

.row{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:14px}
.get{display:inline-flex; align-items:center; min-height:48px;
  text-decoration:none; font-size:13px;
  letter-spacing:.16em; text-transform:uppercase; padding:12px 22px;
  color:var(--btn-ink); background:var(--btn-bg); border:1px solid var(--btn-bg);
  font-weight:700; border-radius:999px}
.get:hover{filter:brightness(1.08)}
.size{font-size:12.5px; letter-spacing:.1em; color:var(--ink-dim)}

/* Written for someone who does not think of themselves as good with computers. */
.howto{max-width:640px; margin:34px auto 0; padding:26px 26px 22px;
  background:var(--panel); border:1px solid var(--edge); box-shadow:var(--shadow)}
.howto h2{font-family:var(--serif); font-weight:500; font-size:24px;
  letter-spacing:.04em; color:var(--ink); margin:0 0 14px; text-align:center}
.howto p{margin:0 0 12px; font-size:15px; line-height:1.75; color:var(--ink)}
.howto p:last-child{margin-bottom:0}
.howto b{font-weight:700; color:var(--accent)}
.howto .addr{font-family:var(--sans); font-weight:700; letter-spacing:.04em;
  color:var(--accent)}
.until{max-width:640px; margin:16px auto 0; padding:18px 24px; text-align:center;
  background:var(--panel); border:1px dashed var(--edge-strong);
  font-size:14.5px; line-height:1.7; color:var(--ink)}
.until b{color:var(--accent)}
.note{max-width:760px; margin:0 auto; padding:22px 24px 26px; text-align:center;
  font-size:13px; letter-spacing:.06em; color:var(--ink-dim); line-height:1.9}
.note a{color:var(--accent)}

/* ---- stories ---- */
.invite{max-width:760px; margin:0 auto 30px; padding:26px; text-align:center;
  background:var(--panel); border:1px solid var(--edge); box-shadow:var(--shadow)}
.invite h2{font-family:var(--serif); font-weight:500; font-size:26px; margin:0 0 10px;
  color:var(--ink)}
.invite p{margin:0 auto 16px; max-width:52ch; font-size:15px; line-height:1.75;
  color:var(--ink)}
.invite form{max-width:520px; margin:0 auto; text-align:left}
.invite label{display:block; margin:0 0 14px; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-soft)}
.invite label span{text-transform:none; letter-spacing:.04em; color:var(--ink-dim);
  font-size:11px}
.invite input, .invite textarea{display:block; width:100%; margin-top:7px;
  padding:13px 14px; font-family:var(--sans); font-size:16px; font-weight:300;
  line-height:1.6; color:var(--ink); background:rgba(0,10,30,.55);
  border:1px solid var(--edge); border-radius:4px; text-transform:none;
  letter-spacing:normal}
.invite input:focus, .invite textarea:focus{outline:none; border-color:var(--accent)}
.invite textarea{resize:vertical; min-height:150px}
.invite .two{display:flex; gap:12px}
.invite .two label{flex:1 1 180px}
/* A field no person sees. Anything that fills it in is not a person. */
.invite .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.invite button[type=submit]{margin-top:4px}
.invite .status{margin:14px 0 0; min-height:1.4em; font-size:14px;
  letter-spacing:.02em; color:var(--accent-soft); text-transform:none}
@media (max-width:520px){ .invite .two{flex-direction:column; gap:0} }
.tools{position:sticky; top:0; z-index:30; display:flex; flex-wrap:wrap; gap:8px;
  align-items:center; justify-content:center; padding:12px;
  margin:0 auto 24px; max-width:900px;
  background:var(--panel-up); border:1px solid var(--edge);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.tools button{min-height:44px; padding:10px 16px; cursor:pointer;
  font-family:var(--sans); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink); background:transparent;
  border:1px solid var(--edge); border-radius:999px}
.tools button:hover{border-color:var(--edge-strong)}
.tools button.main{color:var(--btn-ink); background:var(--btn-bg);
  border-color:var(--btn-bg); font-weight:700}
.tools .count{width:100%; text-align:center; font-size:12px; letter-spacing:.08em;
  color:var(--ink-dim)}
.story{position:relative; max-width:900px; margin:0 auto 22px; padding:26px;
  background:var(--panel); border:1px solid var(--edge); box-shadow:var(--shadow)}
.story.sel{border-color:var(--edge-strong); box-shadow:0 0 0 2px var(--edge)}
.story h2{font-family:var(--serif); font-weight:500; font-size:26px;
  color:var(--ink); margin:0 0 2px}
.story .who{margin:0 0 14px; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent-soft)}
.story .body p{margin:0 0 14px; font-size:16px; line-height:1.85; color:var(--ink)}
.story .body p:last-child{margin-bottom:0}
.pick{position:absolute; top:18px; right:18px; display:inline-flex; gap:8px;
  align-items:center; min-height:44px; padding:0 6px; cursor:pointer;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-dim)}
.pick input{width:20px; height:20px; accent-color:var(--accent)}
.nostories{max-width:640px; margin:0 auto; padding:34px 26px; text-align:center;
  background:var(--panel); border:1px dashed var(--edge-strong);
  font-size:15.5px; line-height:1.8; color:var(--ink)}

@media print{
  html{background:#fff !important; background-image:none !important}
  body{color:#000}
  .theme,.dawn,.tools,.pick,.back,.backrow,.invite,.note{display:none !important}
  .band h1{color:#000}
  .story{break-inside:avoid; page-break-inside:avoid; border:0; box-shadow:none;
    background:#fff; padding:0 0 26px; margin:0 0 26px;
    border-bottom:1px solid #ccc}
  .story h2,.story .body p{color:#000}
  .story .who{color:#444}
  /* When some are chosen, print only those. With none chosen, print them all. */
  body.haspick .story:not(.sel){display:none !important}
}

.pending{border:1px dashed var(--edge); background:var(--frame-bg); padding:22px;
  text-align:center; color:var(--ink-dim); font-size:13px; letter-spacing:.06em}

@media (max-width:820px){
  .plate{aspect-ratio:1/1; max-height:none}
  .plate .sky{display:none !important}
  .doors-below{display:flex; flex-direction:column; gap:12px;
    padding:22px 20px 6px; max-width:520px; margin:0 auto}
  .door b{font-size:20px}
}
@media (min-width:821px){ .doors-below{display:none} }
@media (prefers-reduced-motion:reduce){ .door{transition:none} }