/* ====================================================================
   style.css  -  how the site looks.

   CONTENTS
     1. Colors and fonts (change these first)
     2. Page basics
     3. Search box
     4. Masthead (name + dot pattern)
     5. Tab bar
     6. Shared pieces (headings, chips, buttons)
     7. Gallery grid
     8. Lightbox
     9. Comic reader
    10. Merch and news
    11. Footer
    12. Small screens
    13. Locked comic pages
    14. Patreon tab

   Want a different look? Edit section 1. Everything else reads from it.
   ==================================================================== */


/* ---------- 1. COLORS AND FONTS ---------------------------------------
   Each --name is a "token" used all over the page. Change a value here and
   it changes everywhere. The first block is the light theme. The dark block
   below it is used automatically when a visitor's device is in dark mode. */
:root {
  --paper: #F3F4F8;     /* page background */
  --ink: #171A2E;       /* main text, borders */
  --muted: #5B6078;     /* secondary text */
  --line: #CDD1E2;      /* thin dividers */
  --card: #FFFFFF;      /* cards and buttons */
  --blue: #2B4CFF;      /* main button color, links */
  --on-blue: #FFFFFF;   /* text that sits on top of --blue */
  --pink: #FF5C93;      /* accent: dots, active tab, progress bar */
  --ok: #0E7F6E;        /* "In stock" label */
  --veil: rgba(243, 244, 248, .55); /* wash over a blurred locked page */

  /* Fonts. If you change one, also change the Google Fonts link in index.html. */
  --font-display: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif; /* headings */
  --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;    /* paragraphs */
  --font-mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;           /* small labels */
}

/* Dark theme: same names, new values. Applies when the visitor's device
   prefers dark mode. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #12142A; --ink: #ECEEF8; --muted: #A0A5C2; --line: #2C3054;
    --card: #1B1E3A; --blue: #8196FF; --on-blue: #0E1022; --pink: #FF7FAA; --ok: #4FD1B5;
    --veil: rgba(18, 20, 42, .55);
    color-scheme: dark;
  }
}
/* Same dark values, used if a page sets data-theme="dark" on <html>. */
:root[data-theme="dark"] {
  --paper: #12142A; --ink: #ECEEF8; --muted: #A0A5C2; --line: #2C3054;
  --card: #1B1E3A; --blue: #8196FF; --on-blue: #0E1022; --pink: #FF7FAA; --ok: #4FD1B5;
  --veil: rgba(18, 20, 42, .55);
  color-scheme: dark;
}


/* ---------- 2. PAGE BASICS -------------------------------------------- */
* { box-sizing: border-box; }

/* Anything with the "hidden" attribute stays hidden, even if another rule
   below gives it a display value. (The lightbox relies on this.) */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: 16px; line-height: 1.55;
  /* Side margins of at least 16px, and extra room on phones with notches. */
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
}
/* Paints the phone's status-bar area in the page color so content
   doesn't slide under it while scrolling. */
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: 10; background: var(--paper);
}
.wrap { max-width: 1120px; margin: 0 auto; }   /* centers content, caps its width */
a { color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; } /* keyboard focus ring */
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }


/* ---------- 3. SEARCH BOX --------------------------------------------- */
/* The gallery search field and its label. */
.searchrow { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; max-width: 460px; }
.searchrow label { font: 500 .72rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.searchrow input {
  font: 500 1rem var(--font-body); padding: .65rem .85rem; width: 100%;
  border: 2px solid var(--ink); background: var(--card); color: var(--ink); border-radius: 0;
}
.searchrow input::placeholder { color: var(--muted); }
/* "Nothing matches" message. */
.empty { margin: 24px 0; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }


/* ---------- 4. MASTHEAD ----------------------------------------------- */
.mast { position: relative; padding: 48px 0 32px; overflow: hidden; }
/* The pink dot pattern on the right. To change dot size, edit the two
   numbers "2.2px / 2.6px" (dot radius) and "14px" (spacing). Delete this
   whole rule to remove the dots. */
.mast::before {
  content: ""; position: absolute; inset: 0 0 0 38%;
  background-image: radial-gradient(var(--pink) 2.2px, transparent 2.6px);
  background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(to left, #000 10%, transparent 90%);
  mask-image: linear-gradient(to left, #000 10%, transparent 90%);
  pointer-events: none;
}
.mast > * { position: relative; }  /* keeps text above the dots */
.mast h1 {
  font: 800 clamp(2.6rem, 9vw, 6rem)/.95 var(--font-display); /* size scales with screen width */
  letter-spacing: -.03em; margin: 0 0 14px; text-wrap: balance;
}
.mast p { margin: 0; max-width: 34ch; font-size: 1.15rem; color: var(--muted); }


/* ---------- 5. TAB BAR ------------------------------------------------ */
.nav {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; /* stays at the top while scrolling */
  background: var(--paper); border-bottom: 2px solid var(--ink);
}
.nav .wrap { display: flex; gap: 4px; overflow-x: auto; }
.nav a {
  font: 700 1rem var(--font-display); text-decoration: none; white-space: nowrap;
  padding: .85rem 1.1rem; border-bottom: 5px solid transparent; margin-bottom: -2px;
}
.nav a:hover { border-bottom-color: var(--line); }
.nav a[aria-current="page"] { border-bottom-color: var(--pink); }  /* the open tab */

section.view { padding-top: 32px; }


/* ---------- 6. SHARED PIECES ------------------------------------------ */
h2 { font: 700 clamp(1.6rem, 4vw, 2.3rem)/1.1 var(--font-display); letter-spacing: -.02em; margin: 0 0 6px; text-wrap: balance; }
h3 { font: 700 1.15rem/1.25 var(--font-display); margin: 0; }
.lede { color: var(--muted); margin: 0 0 22px; max-width: 60ch; }   /* intro line under a heading */
.label { font: 500 .72rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* Filter buttons ("All", "Sketches", ...). */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.chip {
  border: 2px solid var(--ink); background: transparent; padding: .3rem .85rem; cursor: pointer;
  font: 500 .85rem var(--font-mono);
}
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); }  /* the selected one */

/* Buttons. Add class "primary" for the colored, shadowed version. */
.btn {
  border: 2px solid var(--ink); background: var(--card); padding: .55rem 1rem; cursor: pointer;
  font: 700 .92rem var(--font-body); text-decoration: none; display: inline-block;
}
.btn:hover:not(:disabled) { background: var(--line); }
.btn:disabled { opacity: .4; cursor: default; }
.btn.primary { background: var(--blue); color: var(--on-blue); box-shadow: 3px 3px 0 var(--ink); }
.btn.primary:hover { background: var(--blue); transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }


/* ---------- 7. GALLERY GRID ------------------------------------------- */
/* Small squares. "minmax(120px, 1fr)" means each square is at least 120px wide
   and the grid fits as many per row as it can. Make 120px bigger for bigger
   squares or smaller for more per row. */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.sq {
  position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; overflow: hidden;
  cursor: zoom-in; border: 2px solid var(--ink); background: var(--card);
}
/* The picture is cropped to fill the square (the full uncropped piece shows when opened). */
.sq img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
.sq:hover img, .sq:focus-visible img { transform: scale(1.06); }
/* Title that fades in over the bottom of a square on hover or keyboard focus.
   On touch screens (no hover) it is always visible. */
.sqt {
  position: absolute; inset: auto 0 0 0; padding: 22px 8px 7px; text-align: left;
  font: 500 .72rem/1.25 var(--font-mono); color: #fff;
  background: linear-gradient(to top, rgba(10, 12, 30, .85), rgba(10, 12, 30, 0));
  opacity: 0; transition: opacity .15s ease;
}
.sq:hover .sqt, .sq:focus-visible .sqt { opacity: 1; }
@media (hover: none) { .sqt { opacity: 1; } }


/* ---------- 8. LIGHTBOX ----------------------------------------------- */
/* Full-screen dark overlay. Its colors are fixed (not tokens) on purpose so
   artwork always sits on dark. */
.lb {
  position: fixed; inset: 0; z-index: 50; background: rgba(10, 12, 30, .97); color: #fff;
  overflow-y: auto;   /* scrolls when the comments panel is open on a short screen */
  display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 14px;
  padding: calc(56px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.lb img { max-width: 100%; max-height: 62vh; width: auto; height: auto; background: #fff; }
.lb .meta { text-align: center; }
.lb .meta b { font: 700 1.2rem var(--font-display); display: block; }
.lb .meta span { font: 400 .8rem var(--font-mono); opacity: .75; }
.lb .row { display: flex; gap: 10px; }
.lb .btn { background: #fff; color: #171A2E; border-color: #fff; }
.lb .x { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); }


/* ---------- 9. COMIC READER ------------------------------------------- */
/* Two columns: chapter list (240px) and the page viewer. Stacks on phones. */
.reader { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; }
.toc { display: flex; flex-direction: column; gap: 6px; }          /* chapter list */
.toc button {
  text-align: left; background: transparent; border: 0; border-left: 4px solid var(--line);
  padding: .5rem .75rem; cursor: pointer;
}
.toc button small { display: block; font: 400 .72rem var(--font-mono); color: var(--muted); }
.toc button[aria-current="true"] { border-left-color: var(--pink); background: var(--card); }
.stage { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
/* The comic page itself. 720px is the max width; raise it for bigger pages. */
.sheet { width: min(720px, 100%); border: 2px solid var(--ink); background: #fff; }
.sheet img { width: 100%; height: auto; }
.ctrl { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; } /* button row */
/* "Go to page" box: a number field and a Go button. */
.jump { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; font: 500 .9rem var(--font-mono); }
.jump input {
  width: 5.5rem; font: 500 1rem var(--font-mono); padding: .5rem .6rem; text-align: center;
  border: 2px solid var(--ink); background: var(--card); color: var(--ink); border-radius: 0;
}
.jump .err { flex-basis: 100%; text-align: center; color: var(--pink); }   /* "Enter a page from 1 to 14" */
.track { width: min(720px, 100%); height: 6px; background: var(--line); }  /* progress bar */
.track div { height: 100%; background: var(--pink); }
.strip { display: flex; flex-direction: column; gap: 14px; align-items: center; width: 100%; } /* scroll mode */
.note { font: 400 .85rem var(--font-mono); color: var(--muted); text-align: center; margin: 0; }
.note.err { color: var(--pink); }                       /* error line, e.g. a missing download */
.note.left { text-align: left; margin-bottom: 12px; }   /* result count above the gallery */


/* ---------- 10. MERCH AND NEWS ---------------------------------------- */
/* Product cards: as many columns as fit, each at least 210px wide.
   The Patreon tiers reuse the same card look (.item). */
.shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; margin-bottom: 44px; }
.item { background: var(--card); border: 2px solid var(--ink); display: flex; flex-direction: column; min-width: 0; }
.item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-bottom: 2px solid var(--ink); }
.item .body { padding: 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.item .price { font: 500 .95rem var(--font-mono); }
.item .desc { margin: 0; color: var(--muted); font-size: .92rem; }   /* short text on download cards */
.item .btn { margin-top: auto; text-align: center; }   /* pushes the button to the card bottom */
.item .btn.off { opacity: .4; cursor: default; }        /* the "Sold out" button */
/* Status labels. Each uses a different color. */
.pill { font: 500 .7rem var(--font-mono); text-transform: uppercase; letter-spacing: .06em; padding: .15rem .5rem; border: 1.5px solid currentColor; align-self: flex-start; }
.pill.in { color: var(--ok); } .pill.pre { color: var(--blue); } .pill.out { color: var(--muted); }

/* News posts: date on the left, text on the right. */
.feed { display: flex; flex-direction: column; max-width: 760px; }
.post { padding: 20px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 4px 20px; }
.post img { margin-top: 12px; border: 2px solid var(--ink); max-height: 420px; width: auto; }
.post time { font: 400 .8rem var(--font-mono); color: var(--muted); padding-top: .3rem; }
.post p { margin: 6px 0 0; max-width: 62ch; }
.post a { color: var(--blue); font-weight: 700; }


/* ---------- 11. FOOTER ------------------------------------------------ */
footer { margin-top: 56px; padding-top: 22px; border-top: 2px solid var(--ink); display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; }
footer ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 18px; flex-wrap: wrap; }


/* ---------- 12. SMALL SCREENS ----------------------------------------- */
/* Under 760px wide: the comic chapter list becomes a scrolling row above the
   page, and news dates sit above their text. */
@media (max-width: 760px) {
  .reader { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .toc { flex-direction: row; overflow-x: auto; }
  .toc button { border-left: 0; border-bottom: 4px solid var(--line); white-space: nowrap; }
  .toc button[aria-current="true"] { border-bottom-color: var(--pink); }
  .post { grid-template-columns: minmax(0, 1fr); }
  .mast { padding-top: 32px; }
}
/* Phones: all four tabs fit on one line. */
@media (max-width: 480px) {
  .nav .wrap { gap: 0; justify-content: space-between; }
  .nav a { padding: .8rem .45rem; font-size: .93rem; }
}
/* Respect visitors who turn off animations. */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }


/* ---------- 13. LOCKED COMIC PAGES ------------------------------------
   A locked page shows a tiny pre-blurred teaser (made by the build, so the
   real page never reaches the browser) with the password box on top. */
.sheet.locked { position: relative; overflow: hidden; background: var(--line); }
.sheet.locked .teaser {
  width: 100%; height: auto; display: block;
  filter: blur(18px) saturate(1.15); transform: scale(1.12);   /* hides the soft edge the blur leaves */
}
.lockveil {
  position: absolute; inset: 0; background: var(--veil);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.lockbox {
  width: min(360px, 100%); background: var(--card); border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 var(--pink); padding: 20px; display: flex; flex-direction: column; gap: 10px;
}
.lockbox h3 { font-size: 1.3rem; }
.lockbox p { margin: 0; color: var(--muted); font-size: .95rem; }
.lockbox .when { font: 500 .8rem var(--font-mono); color: var(--ink); }
.unlock { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.unlock label { font: 500 .72rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.unlock input {
  font: 500 1rem var(--font-body); padding: .65rem .8rem; width: 100%;
  border: 2px solid var(--ink); background: var(--paper); color: var(--ink); border-radius: 0;
}
.unlock .btn { width: 100%; }
.unlock .msg { min-height: 1.3em; font: 400 .82rem var(--font-mono); color: var(--muted); }
.unlock .msg.bad { color: var(--pink); }
.lockbox a { color: var(--blue); font-weight: 700; font-size: .92rem; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--blue); font: 700 .88rem var(--font-body); text-decoration: underline; cursor: pointer; }
.patronbar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: center; font: 500 .82rem var(--font-mono); color: var(--ok); }
.pill.early { color: var(--pink); }


/* ---------- 14. PATREON TAB ------------------------------------------- */
.cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0 0 32px; }
.cta .btn.primary { font-size: 1.05rem; padding: .75rem 1.3rem; }
.cta .note { text-align: left; }
.tiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; margin-bottom: 40px; }
.tier { background: var(--card); border: 2px solid var(--ink); padding: 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tier .price { font: 800 2rem/1 var(--font-display); letter-spacing: -.02em; }
.tier .price small { font: 500 .8rem var(--font-mono); color: var(--muted); letter-spacing: 0; }
.tier ul { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 6px; font-size: .95rem; }
.tier:nth-child(2) { box-shadow: 5px 5px 0 var(--pink); }     /* the middle tier is the one to steer people to */
.howto { max-width: 60ch; border-top: 2px solid var(--ink); padding-top: 22px; }
.howto ol { margin: 10px 0 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 6px; }