/* PEZLIFE — the comic strip. Loaded on /pezlife pages (front matter: styles: comics.css).

   The cast are SVG fragments (partials/tiltons/*.svg) drawn in the same 120 x 328 box as every other
   dispenser on the site, so one hinge and one set of rules serves them all. A character is posed
   with classes on its wrapping <g class="tilton …">:
     face:  f-smile · f-flat · f-laugh · f-o · f-talk · f-tired      (exactly one)
     pose:  open      head flipped back, candy offered                (optional)
   Each fragment carries every eye and mouth it can make; the classes choose which show. */

.tilton .e,.tilton .m{display:none}
.tilton.f-smile .e-dot,.tilton.f-smile .m-smile,
.tilton.f-flat .e-dot,.tilton.f-flat .m-flat,
.tilton.f-talk .e-dot,.tilton.f-talk .m-talk,
.tilton.f-laugh .e-happy,.tilton.f-laugh .m-laugh,
.tilton.f-o .e-wide,.tilton.f-o .m-o,
.tilton.f-tired .e-tired,.tilton.f-tired .m-flat{display:inline}
/* Glasses stay on, but pupils under them read badly when the eyes are arcs or lids. */
.tilton.f-laugh .specs circle{fill-opacity:.35}

/* The flip. Same translate–rotate–translate hinge as the home page dispensers (SVG would otherwise
   pivot about the drawing's corner), and the candy turns about its own middle. */
.tilton .t-head,.kid .dsp-head{transform:translate(48px,122px) rotate(0deg) translate(-48px,-122px)}
.tilton.open .t-head,.kid.open .dsp-head{transform:translate(48px,122px) rotate(-44deg) translate(-48px,-122px)}
.tilton .t-candy,.kid .dsp-candy{transform-box:fill-box;transform-origin:center;visibility:hidden}
.tilton.open .t-candy,.kid.open .dsp-candy{visibility:visible;transform:translate(36px,2px) rotate(8deg)}

/* ── masthead ───────────────────────────────────────── */
.mast{background-color:var(--pink);border-bottom:var(--line);padding:clamp(34px,6vw,70px) 0 0;overflow:hidden}
.mast-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:20px 40px;align-items:end}
.mast-copy{padding-bottom:clamp(30px,5vw,64px)}
.mast .eyebrow{background:var(--ink);color:var(--lemon)}
.logo-word{font:700 clamp(3rem,9.5vw,6.6rem)/.92 var(--display);letter-spacing:-.02em;margin:0 0 .18em;color:#fff;
  text-shadow:4px 4px 0 var(--ink),-2px -2px 0 var(--ink),2px -2px 0 var(--ink),-2px 2px 0 var(--ink),0 5px 0 var(--ink),7px 8px 0 rgba(42,26,74,.35)}
.logo-word span{display:inline-block}
.logo-word span:nth-child(odd){transform:rotate(-4deg) translateY(2px)}
.logo-word span:nth-child(even){transform:rotate(3deg) translateY(-3px)}
.logo-word span:nth-child(3n){color:var(--lemon)}
.mast .lead{color:var(--ink);max-width:30em}
.mast-cast{display:block;width:100%;height:auto;overflow:visible}

/* ── cast cards ─────────────────────────────────────── */
.cast{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.cast-card{padding:0;overflow:hidden;display:grid;grid-template-rows:auto 1fr}
.cast-card .portrait{border-bottom:var(--line);height:210px;display:grid;place-items:end center;overflow:hidden}
.cast-card .portrait svg{height:250px;width:auto;margin-bottom:-62px;overflow:visible}
.cast-card .bio{padding:18px 20px 20px}
.cast-card h3{margin-bottom:.15em}
.cast-card .role{font:700 .78rem/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.7em}
.cast-card p{font-size:1rem;margin:0}

/* ── a strip ────────────────────────────────────────── */
.strip{margin:0;background:var(--paper);border:var(--line);border-radius:var(--r);box-shadow:var(--pop);padding:clamp(14px,2.2vw,24px)}
.strip + .strip{margin-top:44px}
.strip-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px 20px;flex-wrap:wrap;margin-bottom:14px}
.strip-title{font:700 clamp(1.35rem,2.8vw,1.9rem)/1.1 var(--display);margin:0}
.strip-title small{display:block;font:700 .74rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--pink);margin-bottom:.5em}
.strip-no{font:700 .9rem/1 var(--display);color:var(--ink-soft)}
.panels4{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(8px,1.4vw,14px)}
.panel{position:relative;margin:0;border:var(--line);border-radius:14px;overflow:hidden;aspect-ratio:1;container-type:inline-size;background:var(--cream)}
.panel > svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.panel svg text{font-family:var(--display)}
/* lettering: drawn twice — an ink outline underneath, then the color with a white edge */
.sfx-ink{font-weight:700;fill:var(--ink);stroke:var(--ink);stroke-width:11;stroke-linejoin:round}
.sfx{font-weight:700;stroke:#fff;stroke-width:4.5;stroke-linejoin:round;paint-order:stroke}
.chalk{font-weight:600;fill:#f4f1e6}
.strip-foot{display:flex;justify-content:space-between;align-items:center;gap:8px 18px;flex-wrap:wrap;margin-top:14px;font:600 .9rem/1.3 var(--display);color:var(--ink-soft)}
.strip-foot a{color:var(--ink)}
.strip details{margin-top:12px;font-size:.98rem;color:var(--ink-soft)}
.strip summary{cursor:pointer;font:700 .9rem var(--display);color:var(--ink)}
.strip details p{margin:.5em 0 0}

/* Speech balloons are real text laid over the drawing, so they wrap, scale with the panel (cqw =
   hundredths of the panel's width) and can be read aloud. Placed with --x/--y/--w in percent; the
   tail hangs from the bottom edge at --t and points down at whoever is talking. */
.bl{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:calc(var(--w) * 1%);margin:0;z-index:2;
  background:#fff;border:.75cqw solid var(--ink);border-radius:4.2cqw;padding:1.9cqw 2.6cqw 2.1cqw;
  font:700 clamp(11px,4.15cqw,22px)/1.2 var(--display);color:var(--ink);text-align:center;letter-spacing:.005em}
.bl::before,.bl::after{content:"";position:absolute;top:100%;left:calc(var(--t,50) * 1%);width:0;height:0;border-style:solid;border-color:transparent}
/* --tl: how far the tail reaches, in panel-hundredths — a short speaker under a high balloon needs a long one */
.bl::before{border-width:calc(var(--tl,4.6) * 1cqw) 2.6cqw 0 2.6cqw;border-top-color:var(--ink);margin-left:-2.6cqw}
.bl::after{border-width:calc((var(--tl,4.6) - 1.5) * 1cqw) 1.7cqw 0 1.7cqw;border-top-color:#fff;margin-left:-1.7cqw;margin-top:-.85cqw}
.bl.off::before,.bl.off::after{display:none}                       /* a voice from outside the panel: no tail */
.bl.off{border-radius:4.2cqw 0 0 4.2cqw;border-right:0}
.bl.whisper{border-style:dashed;font-weight:600;font-size:clamp(10.5px,3.6cqw,19px)}
.bl.small{font-size:clamp(10.5px,3.65cqw,19px)}
.cap{position:absolute;left:0;top:0;margin:0;z-index:2;background:var(--lemon);border-right:.75cqw solid var(--ink);border-bottom:.75cqw solid var(--ink);
  border-radius:0 0 3cqw 0;padding:1.4cqw 2.8cqw 1.6cqw;font:700 clamp(10.5px,3.5cqw,18px)/1.2 var(--display);color:var(--ink)}

.strip-nav{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:28px}

/* A character facing the other way is the whole drawing mirrored (its head then flips back to the
   right). Anything lettered on it — Eddie's 12 — is mirrored back so it still reads. */
.tilton.mirror .t-body text{transform-box:fill-box;transform-origin:center;transform:scale(-1,1)}

/* ── the archive: from the tenth strip on, /pezlife shows the newest strip in full and the rest as
   pictures (written by the PezLife Strip Maker, ~/Ntersect/pezcomic) ── */
.strip-archive{margin-top:44px}
.strip-archive h3{font:700 clamp(1.3rem,2.6vw,1.7rem)/1.1 var(--display);margin:0 0 .7em;text-align:center}
.archive-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px}
.archive-grid a{display:block;background:var(--paper);border:var(--line);border-radius:16px;box-shadow:4px 4px 0 var(--ink);overflow:hidden;
  text-decoration:none;color:var(--ink);transition:transform .1s,box-shadow .1s}
.archive-grid a:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.archive-grid img{display:block;width:100%;height:auto;aspect-ratio:12/13;object-fit:cover;object-position:top;border-bottom:var(--line);background:var(--cream)}
.archive-grid span{display:block;padding:10px 14px 12px;font:700 1rem/1.2 var(--display)}
.archive-grid small{display:block;font:700 .72rem/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--pink);margin-bottom:.4em}
.archive-more{text-align:center;margin-top:26px}

@media (max-width:900px){
  .mast-grid{grid-template-columns:1fr}
  .mast-copy{padding-bottom:6px}
  .cast{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  /* a phone gives the panels nearly the whole screen: the lettering scales with them */
  .strip{margin-inline:-12px;padding:10px;border-radius:16px}
  .panels4{grid-template-columns:1fr}
  .cast{gap:14px}
  .cast-card .portrait{height:170px}
  .cast-card .portrait svg{height:200px;margin-bottom:-50px}
  .cast-card .bio{padding:14px 14px 16px}
}