@font-face{font-family:"Poppins";src:url("assets/fonts/poppins-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("assets/fonts/inter-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("assets/fonts/instrument-serif-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Caveat";src:url("assets/fonts/caveat-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --cream:#f2e5d7; --teal:#042a2b; --petrol:#2b6f6a;
  --pink:#e94b8a; --pink-ink:#bf1f5f; --butter:#FFF6B3;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;background:var(--teal);color-scheme:dark;accent-color:var(--pink);
  scrollbar-color:var(--petrol) var(--teal);
}
body{
  margin:0;min-height:100dvh;background:var(--teal);color:var(--butter);
  font:400 16px/1.5 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-synthesis:none;
  -webkit-tap-highlight-color:rgba(255,246,179,.14);
}
::selection{background:var(--pink);color:var(--teal)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--butter);outline-offset:-3px}
.fine a:focus-visible{outline-offset:3px;border-radius:6px}

.page{max-width:480px;margin:0 auto}

/* poster header: name stacked on teal, photo bleeding in from the right */
.hero{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);grid-template-rows:minmax(0,1fr);
  height:200px;overflow:hidden;background:var(--teal);
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(4,42,43,0) 72%,var(--teal) 100%),
    linear-gradient(90deg,var(--teal) 45%,rgba(4,42,43,0) 72%);
}
.hero__txt{position:relative;z-index:1;align-self:end;min-width:0;padding:0 0 16px 20px}
.hero h1{
  margin:0;font:600 clamp(24px,7.2vw,36px)/1.02 Poppins,system-ui,sans-serif;text-transform:uppercase;letter-spacing:-.01em;
  color:var(--butter);-webkit-text-stroke:1.2px var(--teal);paint-order:stroke fill;overflow-wrap:anywhere;
}
.hero p{margin:8px 0 0;color:var(--cream);font-size:clamp(12px,3.6vw,14px);font-weight:500;overflow-wrap:anywhere}
.hero img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:50% 12%;
  animation:settle 1.6s var(--ease) backwards;
}

/* lead */
.lead{margin:0;padding:8px 20px 14px;font:600 18px/1.34 Poppins,system-ui,sans-serif;letter-spacing:-.01em;text-wrap:balance;hyphens:auto}
.lead em{font:italic 400 1.45em/1 "Instrument Serif",serif;color:var(--pink);padding:0 .06em}

/* index rows, no cards */
.idx{display:block}
.row{
  position:relative;display:flex;align-items:center;gap:16px;min-height:68px;padding:14px 20px;
  border-top:1px solid rgba(242,229,215,.24);transition:background-color .25s var(--ease);
}
.row:last-child{border-bottom:1px solid rgba(242,229,215,.24)}
.row:active{background:rgba(255,246,179,.1)}
.row__t{flex:1;min-width:0}
.row__h{display:block;font:600 19px/1.2 Poppins,system-ui,sans-serif;letter-spacing:-.01em;hyphens:auto;overflow-wrap:break-word}
.row__s{display:block;margin-top:4px;color:var(--cream);font-size:14px;line-height:1.4;hyphens:auto}
.go{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:2px solid rgba(242,229,215,.5);transition:transform .25s var(--ease)}

.row--main{padding-top:30px;padding-bottom:14px;min-height:0}
.row--main .row__h{font-size:23px;line-height:1.12}
.row--main .row__s{font-size:15px}
.row--main .go{width:52px;height:52px;border:0;background:var(--pink);color:var(--teal)}
.row--com{padding-top:30px;padding-bottom:12px}

.note{
  position:absolute;left:20px;top:5px;font:700 clamp(19px,5.8vw,23px)/1 Caveat,"Segoe Print",cursive;color:var(--pink);
  transform:rotate(-2deg);transform-origin:left center;
}

/* quiet advertising mark, still readable */
.ad{margin-left:6px;font:500 12px/1 Inter,system-ui,sans-serif;letter-spacing:.02em;color:var(--cream);opacity:.85;vertical-align:2px}

@media (hover:hover){
  .row:hover{background:rgba(255,246,179,.07)}
  .row:hover .go{transform:translateX(4px)}
}

.fine{padding:26px 20px 40px;font-size:13px;line-height:1.55;color:var(--cream)}
.fine p{margin:0 0 8px;max-width:60ch}
.fine a{text-decoration:underline;text-underline-offset:3px}

@keyframes rise{from{opacity:0;transform:translateY(14px)}}
@keyframes settle{from{transform:scale(1.07)}}
.rise{animation:rise .7s var(--ease) backwards;animation-delay:calc(var(--i,0) * 80ms)}

@media (min-width:700px){
  .page{box-shadow:0 0 0 1px rgba(242,229,215,.08)}
  .hero{height:300px}
  .lead{font-size:20px;padding-top:14px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}