@charset "utf-8";
/* Victims of Comics — the whole site's look. Colours and sizes come from the strip template. */
@font-face{font-family:"Patrick Hand";src:url(/assets/fonts/patrick-hand.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(/assets/fonts/source-sans-3-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(/assets/fonts/source-sans-3-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(/assets/fonts/source-sans-3-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --page:#FFFFFF;      /* the strips' own white page, so they sit flush */
  --ground:#F7EEDC;    /* SKY cream: hover and active fills */
  --shadow:#D5C293;    /* SHADOW: rules */
  --ink:#2b2b2b;       /* INK: all text */
  --frame:#222;        /* BORDER_C: every box edge */
  --muted:#7d7266;     /* the one secondary grey: 4.7:1 on white */
  --faint:#cfc8bd;     /* disabled buttons only */
  --blue:#4E9EC8;      /* his colour: the secret's dashed line */
  --blue-text:#35739A; /* his colour one step deeper, for words: 5.2:1 on white (#4E9EC8 is only 3:1) */
  --line:2.5px;        /* every rule and box edge */
  --cap-xl:32px; --cap-l:24px; --cap-m:19px; --cap-s:15px;   /* capitals: page names, strip line, labels, dates */
  --txt:18px; --txt-s:15px;                                  /* body text */
  --hand:"Patrick Hand","Chalkboard SE","Marker Felt",cursive;
  --track:.083em;      /* the strip's lettering: 48px type, 4px tracking */
  --body:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--ink);font:var(--txt)/1.55 var(--body);padding-inline:16px;padding-block:0 48px}
a{color:inherit}
.wrap{max-width:760px;margin:0 auto}
.caps{font-family:var(--hand);text-transform:uppercase;letter-spacing:var(--track);font-weight:400;line-height:1.15}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* masthead: the logo is the brand file itself (head beside the words, text outlined) */
header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding-block:20px 16px;border-bottom:var(--line) solid var(--frame)}
.brand{display:block;line-height:0}
.brand img{height:calc(var(--cap-xl)*.948);width:auto;display:block;transform-origin:5% 60%;transition:transform .12s}
/* logo.svg is the brand file trimmed to its ink (the head is the full height): 113.76 units at 120px type,
   so .948 x the type size draws its capitals at the size of --cap-xl, flush with the page edge */
.brand:hover img{transform:rotate(-2deg)}
header nav{display:flex;gap:4px;flex-wrap:wrap}
header nav a{font-size:var(--cap-m);line-height:1;text-decoration:none;padding:8px calc(11px - var(--track)) 8px 11px;border:var(--line) solid transparent}
/* right padding gives back the tracking after the last letter, so the word sits in the middle of its box */
header nav a:hover{border-color:var(--frame)}
header nav a[aria-current="page"]{border-color:var(--frame);background:var(--ground)}
/* nothing is picked on the home page; Comic lights up once you click it or move between strips */

main{padding-top:14px}

/* strip page */
.strip{display:block;width:100%;height:auto;aspect-ratio:1/1;max-width:100%}
.under{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px;margin-top:10px;padding-inline:5%}
/* 5% = the strip's own margin (108 of 2160), so this row lines up with the panel edges */
.caption,.bonus>summary{margin-inline:5%}
.meta{display:grid;gap:4px;flex:1 1 200px;min-width:0}
h1.num{font-size:var(--cap-l);text-wrap:balance;margin:0}
.date{font-size:var(--cap-s);color:var(--muted)}

.pager{display:flex;gap:6px;flex:none}
.pager a,.pager .off{display:grid;place-items:center;height:44px;min-width:44px;padding:0 12px;color:var(--ink);background:var(--page);border:var(--line) solid var(--frame);font-size:var(--cap-m);line-height:1;text-decoration:none;transition:background .1s,transform .06s}
.pager svg{width:18px;height:18px;display:block}
.pager .rand{padding:0 calc(16px - var(--track)) 2px 16px;cursor:pointer}
.pager a:hover{background:var(--ground)}
.pager a:active{transform:translateY(2px)}
.pager .off{border-color:var(--faint);color:var(--faint)}
a:focus-visible,summary:focus-visible{outline:3px dashed var(--frame);outline-offset:3px}

.caption{font-size:var(--cap-m);line-height:1.3;margin-block:18px 0}

/* the hidden bonus: a <details>, so it works with no script at all */
.bonus{margin-top:34px;border-top:var(--line) dashed var(--blue);padding-top:18px}
.bonus>summary{list-style:none;display:inline-block;font-size:var(--cap-m);color:var(--muted);cursor:pointer;padding:6px 0}
.bonus>summary::-webkit-details-marker{display:none}
.bonus>summary:hover{color:var(--ink)}
.bonus .shut{display:none}
.bonus[open] .open{display:none}
.bonus[open] .shut{display:inline}
.bonus figure{margin:14px auto 0}
.bonus figure.panel{max-width:min(380px,100%)}
.bonus figure.panel figcaption{text-align:center}
.bonus figure.strip-alt figcaption{padding-inline:5%}
.bonus figcaption{font-size:var(--txt-s);color:var(--muted);margin-top:8px}
.bonus img{width:100%;height:auto;display:block}

/* page headers */
h2{font-size:var(--cap-xl);line-height:1;margin:0 0 12px}
.lede{margin:0 0 22px;color:var(--muted)}

/* archive: panel 1 of each strip as the teaser */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 20px}
.tile{display:block;text-decoration:none}
.tile img{width:100%;height:auto;aspect-ratio:1/1;display:block;transition:transform .12s}
.tile:hover img{transform:rotate(-1deg) scale(1.02)}
.tile b{display:block;font-size:var(--cap-m);text-align:center;margin-top:8px;padding-left:var(--track)}

/* about / shop */
.prose{max-width:62ch}
.prose p{margin:0 0 14px}
.tagline{font-size:var(--cap-l);line-height:1.3;margin:0 0 20px;color:var(--blue-text);text-wrap:balance}
.card{border:var(--line) solid var(--frame);padding:20px}   /* full width, so its edges line up with the header rule */
.card p{max-width:62ch}
.card h3{font-size:var(--cap-l);line-height:1.1;margin:0 0 10px}
.card p{margin:0}
dl{display:grid;grid-template-columns:max-content 1fr;align-items:baseline;gap:6px 16px;margin:20px 0 0}
dt{font-size:var(--cap-m)}
dd{margin:0;color:var(--muted)}
dd a{color:var(--blue-text);text-underline-offset:2px}   /* links out wear his colour */

@media (max-width:560px){
  :root{--cap-xl:26px; --cap-l:21px; --cap-m:17px; --cap-s:14px; --txt:17px}
  header{flex-direction:column;justify-content:center;padding-block:14px 12px;gap:10px}   /* phones: logo and menu centred, one above the other */
  main{padding-top:8px}
  header nav{justify-content:center}
  header nav a{padding:5.25px calc(8px - var(--track)) 6.75px 8px}
  .grid{grid-template-columns:repeat(2,1fr);gap:18px 12px}
  .under{flex-direction:column-reverse;align-items:stretch}
  .meta{flex:none}   /* in a column, the 200px basis would become height */
  /* the strip (and a whole-strip bonus) reach 12px into the page margin, so the art is ~7% bigger;
     5% of the wider strip minus the 12px = 5% - 10.8px, which keeps the row under it on the panel edge */
  .strip,.bonus figure.strip-alt{width:calc(100% + 24px);max-width:none;margin-inline:-12px}
  .bonus figure.strip-alt figcaption{padding-inline:calc(5% + 1.2px)}
  .under{padding-inline:calc(5% - 10.8px)}
  .caption,.bonus>summary{margin-inline:calc(5% - 10.8px)}
  .pager{justify-content:space-between}
  .pager a,.pager .off{flex:1;min-width:0}
  .pager .rand{flex:2;padding:0 4px 2px calc(4px + .04em);letter-spacing:.04em}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}