/* Limina Oblita: the look of the Saltmere cover. A bright black-and-white plate, dark type on the pale sky,
   light type on the dark ground, and red as the only colour (the thread). Libre Baskerville + Oswald, both OFL. */
@font-face{font-family:"Libre Baskerville";font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/libre-baskerville.woff2) format("woff2")}
@font-face{font-family:"Oswald";font-style:normal;font-weight:200 700;font-display:swap;src:url(../fonts/oswald-latin.woff2) format("woff2")}

:root{color-scheme:dark;--ground:#0e1013;--ground-2:#15181c;--edge:#2a2e33;--white:#eef0f2;--sub:#c8cdd2;--muted:#9aa1a8;--ink:#1a1c1e;--thread:#c0392b}
*{box-sizing:border-box}
html{background:var(--ground)}
body{margin:0;background:var(--ground);color:var(--sub);font-family:"Libre Baskerville",Baskerville,Georgia,serif;overflow-x:hidden}
a{color:inherit}
a:focus-visible{outline:2px solid var(--white);outline-offset:5px}

.label{font-family:"Oswald","Arial Narrow",sans-serif;font-weight:400;letter-spacing:.2em;text-transform:uppercase}
.thread{display:block;width:70px;height:3px;margin:1.1rem auto;background:var(--thread)}

/* The threshold: the plate left bright, like the cover */
.threshold{position:relative;display:grid;grid-template-rows:auto 1fr auto;min-height:100svh;isolation:isolate;overflow:hidden;text-align:center}
.threshold picture,.threshold picture::after{position:absolute;inset:0}
.threshold picture{z-index:-2;background:#c9cccf}
.threshold picture::after{display:block;content:"";background:linear-gradient(0deg,rgba(14,16,19,.94) 0%,rgba(14,16,19,.6) 18%,rgba(14,16,19,0) 36%)}
.threshold img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.threshold__head{padding:clamp(1.8rem,6vh,3.6rem) 16px 0 clamp(16px,16vw,300px);animation:rise 900ms ease-out both}
h1{margin:0;color:var(--ink);font-size:clamp(1.5rem,4.6vw,3.6rem);font-weight:700;letter-spacing:.08em;line-height:1.05;text-transform:uppercase}
.threshold__foot{grid-row:3;padding:0 16px clamp(1.8rem,5vh,3rem);animation:rise 900ms 200ms ease-out both}
.place{margin:0;color:var(--white);font-size:clamp(.85rem,1.4vw,1.05rem);font-weight:400;letter-spacing:.24em;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.tagline{margin:0;text-wrap:balance;color:var(--white);font-size:clamp(1.15rem,2.3vw,1.6rem);line-height:1.4;text-shadow:0 2px 14px rgba(0,0,0,.6)}

/* What's here */
.notes{padding:clamp(4rem,9vw,7rem) 24px;background:linear-gradient(180deg,var(--ground),var(--ground-2))}
.notes__inner{width:min(760px,100%);margin-inline:auto}
.notes__label{margin:0 0 2rem;color:var(--muted);font-size:.8rem}
.entries{margin:0;padding:0;list-style:none;border-top:1px solid var(--edge)}
.entry{display:grid;grid-template-columns:minmax(9rem,12rem) 1fr;gap:.5rem 2rem;padding:1.6rem 0;border-bottom:1px solid var(--edge)}
.entry__kind{margin:0;padding-top:.3rem;color:var(--muted);font-size:.78rem}
.entry__title{margin:0;color:var(--white);font-size:clamp(1.15rem,2.2vw,1.4rem);font-weight:400;line-height:1.3}
.entry__title cite{font-style:normal}
.entry__title a{text-decoration-color:var(--thread);text-decoration-thickness:2px;text-underline-offset:.3em}
.entry__title a:hover{text-decoration-thickness:3px}
.entry__note{grid-column:2;margin:0;color:var(--sub);font-size:.95rem;line-height:1.65}

.signup iframe{display:block;width:100%;max-width:480px;height:320px;margin:.4rem 0 0;border:0;border-radius:4px;background:var(--white)}
.signup p{margin:.8rem 0 0;color:var(--muted);font-size:.85rem}
.signup a{text-decoration-color:var(--thread);text-underline-offset:.3em}

.colophon{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem 2rem;margin-top:4.5rem;padding-top:1.2rem;border-top:1px solid var(--edge);color:var(--muted);font-size:.78rem;line-height:1.8}
.colophon ul{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;margin:0;padding:0;list-style:none}
.colophon a{text-decoration-color:var(--thread);text-underline-offset:.35em}
.colophon a:hover{color:var(--white)}

/* 404 */
.lost{display:grid;min-height:100svh;place-items:center;padding:24px;text-align:center}
.lost__inner{width:min(560px,100%)}
.lost .label{margin:0;color:var(--muted);font-size:.8rem}
.lost h1{margin-top:1rem;color:var(--white);font-size:clamp(1.6rem,5vw,2.6rem);letter-spacing:.04em;text-transform:none}
.lost p{margin:0;color:var(--sub);font-size:1rem;line-height:1.7}
.lost a{text-decoration-color:var(--thread);text-underline-offset:.3em}

@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:700px){
  .threshold picture::after{background:linear-gradient(0deg,rgba(14,16,19,.95) 0%,rgba(14,16,19,.65) 20%,rgba(14,16,19,0) 38%)}
  .threshold img{object-position:center top}
  h1{letter-spacing:.05em}
  .notes{padding-inline:16px}
  .entry{grid-template-columns:1fr}
  .entry__kind{padding-top:0}
  .entry__note{grid-column:1}
  .colophon{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){.threshold__head,.threshold__foot{animation:none}}