/* Breakfast in Underwear — layout follows hausofdecline.ca:
   one centred 780px column, white paper, black marker type, ink specks
   scattered behind everything. Type is Milku, the comic's own font. */
@font-face{
  font-family:'Milku';
  src:url('./assets/fonts/Milku.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:#000;
  font-family:'Milku', 'Comic Sans MS', sans-serif; font-size:16px; line-height:1.4;
  display:flex; flex-direction:column; align-items:center;
}
/* The world the comics happen in: the same snowfield the strips are drawn on
   (assets/bg/SnowFeild.jpg from the app), with the paper grain over the top.
   Both are fixed pseudo-elements rather than background-attachment:fixed, which
   iOS Safari refuses to honour -- and being elements, they can be moved.

   PARALLAX: the page scrolls at 1x, these travel at 0.5x, so the world drifts
   behind the comic. They are taller than the screen by --bg-extra (set in JS to
   half the page's scrollable distance) so lifting them never opens a gap at the
   bottom. --bg-shift is the live offset. */
body{background:#e2f5f8}            /* the picture's own sky, so there is no white flash */
body::before,
body::after{
  content:""; position:fixed; left:0; right:0; top:0; pointer-events:none;
  height:calc(100vh + var(--bg-extra, 0px));
  transform:translate3d(0, var(--bg-shift, 0px), 0);
  will-change:transform;
}
body::before{                        /* the snowfield */
  z-index:-2;
  background:url('./assets/img/bg-snow.jpg') center bottom / cover no-repeat;
}
body::after{                         /* paper grain, riding along with it */
  z-index:-1;
  background:url('./assets/img/paper.png') repeat; background-size:280px 280px;
  opacity:.45; mix-blend-mode:multiply;
}
@media (prefers-reduced-motion:reduce){
  body::before,body::after{transform:none; height:100vh}
}

img{max-width:100%; display:block}
a{color:#000; text-decoration-skip-ink:none}

/* ---------- header ---------- */
header{width:100%; max-width:780px; margin-bottom:16px; padding:0 20px}
#title{margin:0; padding:24px 0 0}
#title img{margin:0 auto; width:100%; max-width:717px; height:auto}
nav{display:flex; justify-content:center; gap:clamp(18px,5vw,64px); padding:10px 0 0; flex-wrap:wrap}
nav a{font-size:20px; text-decoration:underline; text-underline-offset:3px}
nav a:hover{text-decoration:none; background:#000; color:#fff}
.mobileNAV{display:none}

/* ---------- main ---------- */
main{width:100%; max-width:780px; padding:0 20px}

/* comic nav: first / prev / random / next / last */
.comicNav{display:flex; justify-content:center; align-items:center; gap:22px; padding:14px 0}
.comicNav button{
  background:none; border:0; padding:6px; cursor:pointer; line-height:0;
  color:#000; transition:transform .1s ease;
}
.comicNav button:hover:not(:disabled){transform:translateY(-2px)}
.comicNav button:disabled{color:#c9c9c9; cursor:default}
.comicNav svg{width:34px; height:26px; display:block; fill:currentColor}

h2.strip{margin:18px 0 0; padding-left:20px; font-size:17.6px; font-weight:400; text-align:left}
h2.strip .date{font-size:14px}
#comicLink{display:block}
#viewedComic{width:100%; height:auto; border:0}

/* jump-to-number */
.jump{display:flex; justify-content:center; align-items:center; gap:12px; padding:18px 0 0}
.jump input{
  font:inherit; font-size:18px; padding:10px 12px; width:200px;
  border:3px solid #000; border-radius:4px; background:#fff; color:#000;
}
.jump input::placeholder{color:#8a8a8a}
.jump button{
  font:inherit; font-size:18px; padding:10px 18px; cursor:pointer;
  border:3px solid #000; border-radius:4px; background:#000; color:#fff;
}
.jump button:hover{background:#fff; color:#000}

h2.support{margin:42px 0 0; text-align:center; font-size:28px; font-weight:400; line-height:1.35}
h2.support a{text-decoration:underline; text-underline-offset:3px}
h2.support a:hover{text-decoration:none; background:#000; color:#fff}

/* ---------- footer ---------- */
footer{
  width:100%; max-width:400px; margin:80px 0; padding:20px;
  display:flex; justify-content:space-between; align-items:flex-start; gap:24px;
  text-align:center; font-size:20px;
}
footer .socials{display:flex; flex-direction:column; align-items:center; gap:2px}
footer a{text-decoration:underline; text-underline-offset:3px}
footer a:hover{text-decoration:none; background:#000; color:#fff}
footer .credit{text-align:center; line-height:1.5}

@media (max-width:640px){
  .desktopNAV{display:none}
  .mobileNAV{display:flex}
  nav{gap:14px}
  nav a{font-size:17px}
  .comicNav{gap:14px}
  .comicNav svg{width:28px; height:22px}
  footer{flex-direction:column; align-items:center; gap:18px; margin:48px 0}
  .jump input{width:140px}
  h2.support{font-size:22px}
}
@media (prefers-reduced-motion:reduce){.comicNav button{transition:none}}