:root{
  --cream:#F4ECD8; --paper:#FBF6E9; --teal:#3AA7A0; --mustard:#E0A93B;
  --coral:#E2664E; --green:#6FA85B; --gray:#9AA0A6; --char:#221F1A; --gold:#F5C542;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--cream);
  color:var(--char);
  font-family:"Trebuchet MS","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
  padding:env(safe-area-inset-top) 14px calc(24px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; align-items:center;
  min-height:100vh; min-height:100dvh;
}
a{color:inherit}

/* header */
.top{display:flex; flex-direction:column; align-items:center; gap:6px; margin:14px 0 10px}
.brand img{display:block; height:64px; width:auto}
.masthead{margin:0; text-align:center; line-height:1}
.masthead b{display:block; font-size:clamp(22px,7vw,34px); letter-spacing:1px; color:var(--coral);
  -webkit-text-stroke:0; text-shadow:2px 2px 0 var(--char)}
.masthead span{display:block; margin-top:4px; font-size:12px; letter-spacing:3px; text-transform:uppercase; color:var(--teal); font-weight:700}

/* strip */
.stage{width:100%; max-width:620px; display:flex; flex-direction:column; align-items:center}
.frame{margin:0; width:100%; background:var(--paper); border:4px solid var(--char);
  border-radius:14px; box-shadow:6px 6px 0 rgba(34,31,26,.9); overflow:hidden; line-height:0}
.frame img{width:100%; height:auto; display:block; transition:opacity .16s ease}
.frame.load img{opacity:0}

.cap{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; justify-content:center;
  margin:14px 0 4px; text-align:center}
.cap .num{background:var(--char); color:var(--cream); font-weight:800; font-size:13px; padding:3px 9px; border-radius:8px}
.cap .title{font-weight:800; font-size:clamp(17px,4.6vw,22px)}
.cap .date{width:100%; font-size:13px; font-weight:800; color:var(--char); letter-spacing:.3px; margin-top:2px}
.cap .when{width:100%; font-size:12px; color:var(--teal); font-weight:700; letter-spacing:.5px; text-transform:uppercase}
.nav:disabled{opacity:.32; cursor:default; box-shadow:1px 1px 0 rgba(34,31,26,.5); transform:none}
.nav:disabled:active{transform:none}

/* controls */
.controls{display:flex; align-items:center; gap:10px; margin:14px 0 0}
.nav,.today,.share,.play{font-family:inherit; font-weight:800; cursor:pointer;
  border:3px solid var(--char); border-radius:12px; box-shadow:3px 3px 0 rgba(34,31,26,.9);
  transition:transform .06s ease, box-shadow .06s ease}
.nav:active,.today:active,.share:active,.play:active{transform:translate(2px,2px); box-shadow:1px 1px 0 rgba(34,31,26,.9)}
.nav{width:56px; height:52px; font-size:22px; background:var(--teal); color:#fff}
.today{height:52px; padding:0 18px; font-size:15px; background:var(--mustard); color:var(--char)}
.controls2{display:flex; align-items:center; gap:10px; margin-top:12px; min-height:28px}
.share{height:44px; padding:0 16px; font-size:14px; background:var(--paper); color:var(--char)}
.toast{font-size:13px; font-weight:700; color:var(--green)}

/* cta */
.cta{width:100%; max-width:620px; margin:28px 0 6px; text-align:center;
  background:var(--paper); border:3px dashed var(--char); border-radius:14px; padding:16px}
.cta p{margin:0 0 12px; font-size:15px; line-height:1.4}
.play{display:inline-block; text-decoration:none; padding:12px 22px; font-size:16px; background:var(--coral); color:#fff}

/* footer */
.foot{max-width:560px; margin:22px auto 0; text-align:center; font-size:12px; line-height:1.5; color:#5b544a}
.foot b{color:var(--char)}
.foot a{color:var(--teal); font-weight:700}

@media (min-width:680px){ .brand img{height:76px} }