/* The quayside.
 *
 * The look of every page you can reach without signing in: the landing page,
 * and the two password recovery pages. It lived inline in index.php until
 * recovery needed the same chrome — three copies of thirteen thousand
 * characters was not a sensible way to share it.
 */
:root{
  --abyss:#060c11;
  --chart:#c9b486;
  --chart-deep:#b5a077;
  --vellum:#efe1c0;
  --vellum-edge:#d8c49a;
  --ink:#2a1f16;
  --ink-soft:rgba(42,31,22,.66);
  --brass:#b8862b;
  --brass-lift:#dcae52;
  --oxblood:#7a211c;
  --oxblood-lift:#9c2f28;
  --rule:rgba(42,31,22,.22);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--abyss);
  color:var(--ink);
  font-family:"IM Fell English",Georgia,serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- the chart, lying on the table ---------- */
.table{position:relative;min-height:100vh;isolation:isolate;overflow:hidden}

.chart-sheet{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(60% 45% at 22% 34%, rgba(214,192,150,.55), transparent 70%),
    radial-gradient(45% 35% at 78% 68%, rgba(198,176,133,.4), transparent 72%),
    radial-gradient(30% 25% at 62% 18%, rgba(160,140,102,.3), transparent 70%),
    linear-gradient(150deg,var(--chart-deep),var(--chart) 45%,var(--chart-deep));
}
.chart-art{position:absolute;inset:0;z-index:1;width:100%;height:100%}
.lamp{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(72% 62% at 40% 44%,transparent 0%,rgba(6,12,17,.12) 46%,rgba(6,12,17,.62) 78%,rgba(6,12,17,.92) 100%);
}
.grain{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  background-image:var(--grain);opacity:.075;mix-blend-mode:multiply;
}
.fog{
  position:absolute;z-index:2;pointer-events:none;
  width:180%;height:60%;left:-40%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(232,220,190,.3),transparent 70%);
  filter:blur(20px);
}
.fog.a{top:8%;animation:drift 96s linear infinite}
.fog.b{top:52%;animation:drift 140s linear infinite reverse;opacity:.6}
@keyframes drift{from{transform:translateX(-14%)}to{transform:translateX(14%)}}

/* ---------- layout ---------- */
.deck{
  position:relative;z-index:5;
  min-height:100vh;
  display:grid;
  grid-template-rows:auto 1fr auto;
  padding:clamp(1.4rem,3vw,2.4rem) clamp(1.4rem,6vw,5.5rem);
  gap:2rem;
}

.masthead{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.mark{display:flex;align-items:center;gap:.7rem}
.mark picture{display:block;line-height:0}
.mark img{height:30px;width:auto;display:block}
.mark span{
  font-family:Cinzel,serif;font-weight:700;font-size:.9rem;
  letter-spacing:.34em;text-transform:uppercase;
  /* the vignette reaches near-black at the edges, so the chrome that sits
     there is cream rather than ink */
  color:#f0e2bd;
  text-shadow:0 1px 3px rgba(6,12,17,.75);
}

.hold{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(320px,var(--letter-w,430px));
  align-items:center;gap:clamp(2rem,6vw,5rem);
}

/* ---------- identity column ---------- */
/* Alpha, said twice: once beside the wordmark so it is on screen from the
   first glance, and once by the sign-up form, which is where it actually
   matters. Small enough not to fight the masthead for attention. */
/* .mark span sets the wordmark's own face, and it outranks a bare .alpha —
   the badge came out at the wordmark's size and colour. Named through the
   parent so it wins, rather than shouted down with !important. */
.mark span.alpha{
  align-self:center;padding:.14rem .42rem;
  font-family:Cinzel,serif;font-size:.52rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:#dcae52;text-shadow:none;
  background:rgba(184,134,43,.16);border:1px solid rgba(184,134,43,.55);
  cursor:help;
}
.alphanote{
  display:flex;gap:.6rem;align-items:flex-start;
  margin:0 0 1.4rem;padding:.6rem .75rem;
  background:rgba(184,134,43,.1);border-left:3px solid var(--brass,#b8862b);
  text-align:left;
}
.alphanote b{
  flex:none;font-family:Cinzel,serif;font-size:.52rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--brass-lift,#dcae52);
  padding-top:.15rem;
}
.alphanote span{font-size:.86rem;line-height:1.5;color:var(--ink-soft)}

.eyebrow{
  font-family:Cinzel,serif;font-size:.63rem;font-weight:600;
  letter-spacing:.42em;text-transform:uppercase;color:#8a6420;
  display:flex;align-items:center;gap:.9rem;
}
.eyebrow::after{content:"";flex:1;max-width:120px;height:1px;background:linear-gradient(90deg,var(--brass),transparent)}

.hero-mark{display:block;line-height:0;margin-bottom:1rem}
.hero-mark img{height:clamp(84px,11vw,132px);width:auto;display:block;
  filter:drop-shadow(0 6px 14px rgba(42,31,22,.35))}
h1{
  font-family:Cinzel,serif;font-weight:700;
  font-size:clamp(3.1rem,8.4vw,6.6rem);
  line-height:.9;letter-spacing:.06em;
  margin:1.1rem 0 0;color:#22180f;
  text-shadow:0 1px 0 rgba(255,244,215,.4);
}
.sub{
  font-family:"IM Fell English",serif;font-style:italic;
  font-size:clamp(1.02rem,1.5vw,1.28rem);line-height:1.65;
  color:var(--ink-soft);max-width:34ch;margin-top:1.4rem;
}

.articles{list-style:none;margin-top:2.6rem;max-width:37ch;display:grid;gap:0}
.articles li{
  display:grid;grid-template-columns:5.4rem 1fr;gap:1.2rem;align-items:baseline;
  padding:.95rem 0;border-top:1px solid var(--rule);
}
.articles li:last-child{border-bottom:1px solid var(--rule)}
.articles dt,.articles b{
  font-family:Cinzel,serif;font-weight:600;font-size:.7rem;
  letter-spacing:.24em;text-transform:uppercase;color:#8a6420;
}
.articles p{font-size:1rem;line-height:1.5;color:var(--ink-soft)}

/* ---------- three headlines under the pitch ----------
   Deliberately slight: it borrows the rule and the small caps from .articles
   above it so it reads as a footnote to the pitch rather than a second
   column competing with it.

   It sits low in the left column, where the lamp vignette has gone most of
   the way to black, so it takes the same treatment as .mark above — cream
   rather than ink, and a shadow under it because the ground behind shifts
   from lit chart to near-black as the viewport changes. */
.dispatch{margin-top:1.9rem;max-width:37ch}
.dispatch-lbl{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  font-family:Cinzel,serif;font-weight:600;font-size:.56rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--brass-lift);
  text-shadow:0 1px 3px rgba(6,12,17,.75);
  padding-bottom:.45rem;border-bottom:1px solid rgba(240,226,189,.22);
}
.dispatch-lbl a{color:var(--brass-lift);text-decoration:none;white-space:nowrap}
.dispatch-lbl a:hover{color:#f6ecd2}
.dispatch ul{list-style:none;margin:0}
.dispatch li{border-bottom:1px solid rgba(240,226,189,.14)}
.dispatch a{
  display:grid;grid-template-columns:3.4rem minmax(0,1fr);gap:.9rem;
  align-items:baseline;padding:.5rem 0;text-decoration:none;
}
.dispatch time{
  font-family:Cinzel,serif;font-size:.54rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(240,226,189,.62);
  text-shadow:0 1px 3px rgba(6,12,17,.7);
}
.dispatch li a span{
  font-size:.94rem;line-height:1.4;color:rgba(240,226,189,.9);
  text-shadow:0 1px 3px rgba(6,12,17,.7);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dispatch li a:hover span{color:#fff6e2}

/* ---------- the letter ---------- */
.letter{
  position:relative;
  background:
    radial-gradient(80% 60% at 30% 20%,rgba(255,250,232,.85),transparent 70%),
    linear-gradient(160deg,var(--vellum),var(--vellum-edge));
  padding:clamp(1.9rem,3vw,2.6rem);
  box-shadow:
    0 1px 0 rgba(255,250,230,.6) inset,
    0 26px 60px -18px rgba(6,12,17,.75),
    0 4px 14px rgba(6,12,17,.35);
  transform:rotate(-.55deg);
  animation:settle .9s cubic-bezier(.16,1,.3,1) both;
}
@keyframes settle{from{opacity:0;transform:rotate(-2.6deg) translateY(26px)}to{opacity:1;transform:rotate(-.55deg) translateY(0)}}
.letter::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--grain);opacity:.08;mix-blend-mode:multiply;
}
.letter::after{
  content:"";position:absolute;inset:9px;pointer-events:none;
  border:1px solid rgba(42,31,22,.16);
}
.corner{position:absolute;width:20px;height:20px;stroke:var(--brass);fill:none;stroke-width:1.2;opacity:.7}
.corner.tl{top:15px;left:15px}
.corner.tr{top:15px;right:15px;transform:scaleX(-1)}
.corner.bl{bottom:15px;left:15px;transform:scaleY(-1)}
.corner.br{bottom:15px;right:15px;transform:scale(-1)}

.letter-head{text-align:center;margin-bottom:1.7rem}
.letter-head h2{
  font-family:Cinzel,serif;font-weight:600;font-size:1.02rem;
  letter-spacing:.2em;text-transform:uppercase;color:#22180f;
}
.letter-head p{font-style:italic;font-size:.92rem;color:var(--ink-soft);margin-top:.45rem}

.tabs{display:flex;gap:0;margin-bottom:1.8rem;border-bottom:1px solid var(--rule)}
.tab{
  flex:1;background:none;border:0;cursor:pointer;
  font-family:Cinzel,serif;font-weight:600;font-size:.66rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);
  padding:.7rem .4rem;position:relative;transition:color .25s;
}
.tab[aria-selected="true"]{color:#22180f}
.tab::after{
  content:"";position:absolute;left:18%;right:18%;bottom:-1px;height:2px;
  background:var(--brass);transform:scaleX(0);transition:transform .32s cubic-bezier(.16,1,.3,1);
}
.tab[aria-selected="true"]::after{transform:scaleX(1)}

.notice{
  display:flex;gap:.7rem;align-items:flex-start;
  padding:.8rem .95rem;margin-bottom:1.5rem;
  font-size:.95rem;line-height:1.45;color:var(--ink);
  background:rgba(122,33,28,.07);border-left:3px solid var(--oxblood);
  animation:unfold .4s cubic-bezier(.16,1,.3,1) both;
}
.notice.success{background:rgba(74,104,70,.09);border-left-color:#4a6846}
.notice svg{width:15px;height:15px;flex:none;margin-top:.22rem;stroke:var(--oxblood);fill:none;stroke-width:1.6}
.notice.success svg{stroke:#4a6846}

.field{margin-bottom:1.45rem}
.field label{
  display:block;font-family:Cinzel,serif;font-weight:600;font-size:.6rem;
  letter-spacing:.24em;text-transform:uppercase;color:#8a6420;margin-bottom:.5rem;
}
.field input{
  width:100%;background:transparent;border:0;
  border-bottom:1px solid rgba(42,31,22,.34);
  font-family:"IM Fell English",serif;font-size:1.06rem;color:var(--ink);
  padding:.42rem .1rem;outline:none;transition:border-color .25s;
}
.field input::placeholder{color:rgba(42,31,22,.3);font-style:italic}
.field input:focus{border-bottom-color:var(--brass)}
.field input:focus-visible{box-shadow:0 2px 0 var(--brass)}
.musicbtn{
  display:grid;place-items:center;width:32px;height:32px;margin-left:auto;
  background:rgba(240,226,189,.1);border:1px solid rgba(240,226,189,.34);
  color:rgba(240,226,189,.78);cursor:pointer;padding:0;
  box-shadow:0 1px 4px rgba(6,12,17,.5);
  transition:color .2s,border-color .2s,background .2s;
}
.musicbtn:hover{color:#f7ecd0;border-color:var(--brass-lift);background:rgba(240,226,189,.2)}
.musicbtn:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.musicbtn svg{width:17px;height:17px}
.musicbtn.on{color:#f0cd6a;border-color:var(--brass-lift);background:rgba(184,134,43,.28)}
.musicbtn.on .mute-x{opacity:0}
.mute-x{opacity:.85}

.hint{margin-top:.42rem;font-size:.84rem;font-style:italic;color:rgba(42,31,22,.5);line-height:1.4}

/* Portrait picker. These rules live here because this page carries its own
   stylesheet and never loads game.css — without them the portraits render at
   their natural size. */
.facepick{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem}
.faceopt{display:block;cursor:pointer;min-width:0}
.faceopt input{position:absolute;opacity:0;width:0;height:0}
.faceopt-in{display:block;padding:.2rem;border:1px solid rgba(42,31,22,.24);
  background:rgba(255,250,232,.3);transition:border-color .18s,background .18s}
.faceopt-in picture{display:block;line-height:0}
.faceopt-in img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 12%}
.faceopt-in em{display:block;margin-top:.2rem;font-size:.62rem;font-style:normal;
  font-family:Cinzel,serif;letter-spacing:.04em;text-align:center;color:rgba(42,31,22,.62);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.faceopt:hover .faceopt-in{background:rgba(255,250,232,.65)}
.faceopt input:checked + .faceopt-in{border-color:var(--brass);background:rgba(184,134,43,.2);
  box-shadow:0 0 0 1px var(--brass) inset}
.faceopt input:focus-visible + .faceopt-in{outline:2px solid var(--brass);outline-offset:2px}
.portpick{display:grid;gap:.4rem}
.portopt{display:block;cursor:pointer}
.portopt input{position:absolute;opacity:0;width:0;height:0}
.portopt-in{
  display:block;padding:.5rem .7rem;
  border:1px solid rgba(42,31,22,.24);
  background:rgba(255,250,232,.32);
  transition:border-color .18s, background .18s;
}
.portopt-in b{display:block;font-family:Cinzel,serif;font-size:.82rem;font-weight:600;letter-spacing:.04em}
.portopt-in em{display:block;font-size:.82rem;font-style:italic;color:rgba(42,31,22,.55);margin-top:.1rem}
.portopt:hover .portopt-in{background:rgba(255,250,232,.6)}
.portopt input:checked + .portopt-in{
  border-color:var(--brass);background:rgba(184,134,43,.16);
  box-shadow:0 0 0 1px var(--brass) inset;
}
.portopt input:focus-visible + .portopt-in{outline:2px solid var(--brass);outline-offset:2px}

.aside{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:-.4rem 0 1.9rem}
.aside a{font-size:.9rem;color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--rule)}
.aside a:hover{color:var(--ink);border-bottom-color:var(--brass)}
.remember{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--ink-soft);cursor:pointer}
.remember input{accent-color:var(--oxblood);width:14px;height:14px}

/* ---------- the seal ---------- */
.commit{display:flex;flex-direction:column;align-items:center;gap:.85rem}
.seal{
  width:96px;height:96px;border-radius:50%;border:0;cursor:pointer;position:relative;
  background:radial-gradient(38% 34% at 36% 30%,var(--oxblood-lift),var(--oxblood) 62%,#5d1613);
  box-shadow:0 6px 16px rgba(6,12,17,.5),0 1px 0 rgba(255,180,160,.28) inset,0 -3px 8px rgba(0,0,0,.4) inset;
  transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s;
}
.seal svg{width:100%;height:100%;display:block;fill:none}
.seal:hover{transform:rotate(-4deg) scale(1.035)}
.seal:active{transform:scale(.93);box-shadow:0 2px 6px rgba(6,12,17,.6),0 -2px 6px rgba(0,0,0,.45) inset}
.seal:focus-visible{outline:2px solid var(--brass);outline-offset:5px}
.seal .ripple{
  position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--oxblood);
  opacity:0;pointer-events:none;
}
.seal.stamped .ripple{animation:ripple .75s ease-out}
@keyframes ripple{0%{opacity:.7;transform:scale(.85)}100%{opacity:0;transform:scale(1.7)}}
.commit-label{
  font-family:Cinzel,serif;font-weight:600;font-size:.68rem;
  letter-spacing:.26em;text-transform:uppercase;color:#22180f;
}
.commit-note{font-size:.84rem;font-style:italic;color:var(--ink-soft);text-align:center;max-width:26ch}

/* ---------- footer ---------- */
.rail{
  display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;
  font-family:Cinzel,serif;font-size:.6rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;
  color:rgba(240,226,189,.6);
  text-shadow:0 1px 3px rgba(6,12,17,.7);
}
.rail a{color:rgba(240,226,189,.78);text-decoration:none;border-bottom:1px solid transparent}
.rail a:hover{color:#f7ecd0;border-bottom-color:var(--brass-lift)}
.rail a{color:inherit;text-decoration:none}
.rail a:hover{color:var(--ink)}

/* ---------- panels ---------- */
.panel[hidden]{display:none}
.panel{animation:unfold .42s cubic-bezier(.16,1,.3,1) both}
@keyframes unfold{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* ---------- chart ink ---------- */
.route{
  stroke-dasharray:5 11;stroke-dashoffset:1400;
  animation:ink 5.5s ease-out .5s forwards;
}
@keyframes ink{to{stroke-dashoffset:0}}

@media(max-width:920px){
  .hold{grid-template-columns:1fr;gap:2.8rem;padding:1rem 0}
  .letter{transform:none;max-width:460px}
  @keyframes settle{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
  .articles{max-width:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
}