/* ==========================================================
   JoJo's site — riso inks on printer paper
   ========================================================== */

:root {
  /* bubblegum-pink backdrop (shapes on top come from images/shapes.svg) */
  --desk: #ffbfe0;
  /* paper */
  --sheet: #fdfdfb;
  --edge: #d5d9dd;
  /* pencil */
  --graphite: #2e3035;
  --pencil: #5f636b;
  /* riso inks (aqua is only for big headings: too light for body text) */
  --ink-aqua: #5ec8e5;
  --ink-blue: #0078bf;
  --ink-pink: #ff48b0;
  --ink-pink-dark: #c2186f;
  --ink-yellow: #ffe800;
  --tint-blue: #d3e6f3;
  --tint-pink: #fff0f7; /* pale, so pink tabs still stand out on the pink backdrop */
  --tint-yellow: #fff5a0;

  --font-display: "Bagel Fat One", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --font-body: "Andika", Verdana, system-ui, sans-serif;
  --font-pencil: "Reenie Beanie", "Bradley Hand", "Segoe Print", cursive;

  --radius: 14px;
  --shell: 62rem;
}

/* each ink class sets the tint + ink pair used by the tabs */
.ink-blue   { --tint: var(--tint-blue);   --ink: var(--ink-blue); }
.ink-pink   { --tint: var(--tint-pink);   --ink: var(--ink-pink); }
.ink-yellow { --tint: var(--tint-yellow); --ink: var(--ink-yellow); }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--graphite);
  background-color: var(--desk);
  /* fun shapes, on top of a faint paper grain */
  background-size: 560px, auto;
  background-image: url("../images/shapes.svg"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .18 0 0 0 0 .19 0 0 0 0 .21 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
}

img { display: block; max-width: 100%; }
a { color: var(--ink-blue); }
cite { font-style: italic; }

:focus-visible {
  outline: 3px solid var(--ink-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.shell {
  width: min(100% - 2rem, var(--shell));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  padding: .5rem 1rem;
  background: var(--sheet);
  border-radius: 8px;
}
.skip-link:focus { top: 1rem; }

/* ---------- riso double-print (the signature) ----------
   Aqua text, with a pink copy printed slightly out of register on top.
   Multiply turns the overlap purple, like real overprinted ink.
   main.js copies each heading's text into data-text. */
.riso {
  position: relative;
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink-aqua);
}
.riso::after {
  content: attr(data-text);
  content: attr(data-text) / "";
  position: absolute;
  inset: 0;
  color: var(--ink-pink);
  mix-blend-mode: multiply;
  transform: translate(.05em, .035em);
  pointer-events: none;
}

/* ---------- masthead ---------- */
.masthead {
  padding-block: clamp(2rem, 7vw, 4.5rem) clamp(1.5rem, 4vw, 2.5rem);
}
.masthead-name {
  margin: 0;
  font-size: clamp(5rem, 22vw, 11rem);
  line-height: .85;
  letter-spacing: -.01em;
}
.masthead-tagline {
  margin: 1.1rem 0 0;
  font-size: 1.1rem;
  transform: rotate(-1.5deg);
  transform-origin: left;
}

/* small text sitting on the busy backdrop gets a white sticker behind it */
.sticker {
  display: inline-block;
  padding: .3rem .85rem;
  border-radius: 999px;
  background: var(--sheet);
  box-shadow: 0 2px 0 rgb(46 48 53 / .12);
  color: var(--graphite);
}

/* ---------- tabs: binder dividers on top of the sheet ---------- */
.tabs {
  display: flex;
  align-items: flex-end;
  gap: .35rem;
  overflow-x: auto;
  scrollbar-width: none;
  box-shadow: inset 0 -1px 0 var(--edge);
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  flex: none;
  padding: .55rem 1.1rem;
  border: 1px solid var(--edge);
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--tint);
  color: var(--graphite);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.tab:hover { background: color-mix(in srgb, var(--tint) 60%, var(--ink)); }
.tab:focus-visible { outline-offset: -3px; }
.tab[aria-selected="true"] {
  padding-top: .85rem;
  background: var(--sheet);
  border-top: 5px solid var(--ink);
  border-bottom-color: var(--sheet);
}

.sheet {
  padding: clamp(1.25rem, 4.5vw, 3rem);
  background: var(--sheet);
  border: 1px solid var(--edge);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 22px 32px -24px rgb(120 20 80 / .45);
}

/* panels: all visible without JS; with JS only the active one shows */
html:not(.js) .panel + .panel { margin-top: 4rem; }
.js .panel { display: none; }
.js .panel.is-active {
  display: block;
  animation: panel-in .25s ease-out;
}
@keyframes panel-in {
  from { opacity: 0; transform: translateY(6px); }
}

/* ---------- shared content bits ---------- */
.title {
  margin: 0 0 1.25rem;
  font-size: clamp(2.1rem, 5.5vw, 3.2rem);
  line-height: 1.05;
  text-wrap: balance;
}

.prose { max-width: 38rem; }
.prose p { margin: 0 0 1rem; }

.eyebrow {
  margin: 0 0 .35rem;
  font-family: var(--font-pencil);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--graphite);
  transform: rotate(-2deg);
  transform-origin: left;
}

/* image on the left, words on the right */
.split {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.btn {
  display: inline-block;
  margin-top: .5rem;
  padding: .6rem 1.3rem;
  border: 0;
  border-radius: 999px;
  background: var(--ink-blue);
  box-shadow: 3px 3px 0 var(--ink-pink);
  color: #fff;
  font: 700 1rem var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--ink-pink);
}
.btn[aria-disabled="true"] {
  background: var(--edge);
  box-shadow: none;
  color: var(--pencil);
  pointer-events: none;
}

/* ---------- placeholders (temporary: pink dashes = still to fill) ---------- */
.ph {
  display: grid;
  place-items: center;
  padding: 1rem;
  border: 2px dashed var(--ink-pink);
  border-radius: 10px;
  background: repeating-linear-gradient(-45deg, transparent 0 10px, rgb(255 72 176 / .06) 10px 20px);
  color: var(--pencil);
  font-family: var(--font-pencil);
  font-size: 1.7rem;
  line-height: 1.1;
  text-align: center;
}
/* her drawing sits straight on the paper, no frame */
.portrait {
  width: 100%;
  height: auto;
}

.cover {
  width: 100%;
  height: auto;
  border: 1px solid var(--edge);
  border-radius: 6px;
  box-shadow: 0 10px 20px -14px rgb(46 48 53 / .55);
}

.ph-portrait { aspect-ratio: 4 / 5; }
.ph-cover { aspect-ratio: 3 / 4; }
.ph-wide { margin-top: 3rem; min-height: 8rem; }

/* ---------- Q&A ---------- */
.qa {
  display: grid;
  gap: 1.75rem;
  margin: 0;
}
.qa dt { font-weight: 700; }
.qa dd { margin: .35rem 0 0; }
/* hanging indent: wrapped lines line up after the Q / A letter */
.qa dt,
.qa dd {
  padding-left: 1.6rem;
  text-indent: -1.6rem;
}
.qa dt::before,
.qa dd::before {
  display: inline-block;
  width: 1.6rem;
  text-indent: 0; /* don't inherit the hanging indent */
  font-family: var(--font-display);
  font-weight: 400;
}
.qa dt::before { content: "Q"; color: var(--ink-pink); }
.qa dd::before { content: "A"; color: var(--ink-blue); }

/* ---------- Minicomix ---------- */
.comics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.comic-open {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--edge);
  border-radius: 6px;
  background: var(--sheet);
  box-shadow: 0 8px 16px -12px rgb(46 48 53 / .55);
  cursor: zoom-in;
  transition: transform .15s;
}
.comic-open:hover { transform: rotate(-1.5deg) translateY(-3px); }
.comic-open img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.comic-title {
  margin: .6rem 0 0;
  font-size: 1rem;
  font-weight: 700;
}

.lightbox {
  max-width: min(92vw, 48rem);
  max-height: 94vh;
  padding: 0;
  border: 0;
  background: transparent;
}
.lightbox::backdrop { background: rgb(46 48 53 / .82); }
/* the big view bounces in */
.lightbox[open] { animation: lightbox-in .3s cubic-bezier(.2, .9, .3, 1.35); }
.lightbox[open]::backdrop { animation: backdrop-in .3s ease-out; }
@keyframes lightbox-in {
  from { opacity: 0; transform: scale(.82) rotate(-2deg); }
}
@keyframes backdrop-in {
  from { opacity: 0; }
}

/* stars, hearts and dots that burst out of a clicked page */
.sparkles {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}
.sparkle {
  position: absolute;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  animation: sparkle-fly .6s ease-out forwards;
}
.sparkle svg {
  width: 100%;
  height: 100%;
}
@keyframes sparkle-fly {
  from { opacity: 1; transform: translate(0, 0) scale(.5) rotate(0deg); }
  45% { opacity: 1; }
  to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.15) rotate(var(--turn)); }
}
.lightbox img {
  width: auto;
  height: auto;
  max-height: 82vh;
  margin-inline: auto;
  border-radius: 6px;
  background: var(--sheet);
}
.lightbox-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-top: .75rem;
}
.lightbox-bar .btn { margin-top: 0; }
.lightbox-bar form { margin: 0; }
.lightbox-step {
  width: 2.75rem;
  padding-inline: 0;
  font-size: 1.4rem;
  line-height: 1;
}
.lightbox-step:disabled {
  opacity: .35;
  box-shadow: none;
  transform: none;
  cursor: default;
}
.lightbox-count {
  min-width: 7.5ch;
  color: #fff;
  font-weight: 700;
  text-align: center;
}
/* one-page comics don't need page buttons */
.lightbox.is-single .lightbox-step,
.lightbox.is-single .lightbox-count { display: none; }

.comic-meta {
  color: var(--pencil);
  font-weight: 400;
}

/* ---------- Character pages ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gallery-open {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 3px solid var(--ink-pink-dark);
  border-radius: 8px;
  background: var(--sheet);
  box-shadow: 0 8px 16px -12px rgb(46 48 53 / .55);
  cursor: zoom-in;
  transition: transform .15s;
}
.gallery-open:hover { transform: translateY(-3px) rotate(-1deg); }
/* squish-and-pop when you click a page or a comic */
.gallery-open.is-popping,
.comic-open.is-popping { animation: card-pop .34s ease-out; }
@keyframes card-pop {
  0% { transform: scale(1); }
  35% { transform: scale(.93) rotate(-1.5deg); }
  70% { transform: scale(1.06) rotate(1.5deg); }
  100% { transform: scale(1); }
}
.gallery-open img {
  width: 100%;
  height: auto;
}
.gallery-title {
  margin: .5rem 0 0;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
}

/* ---------- Hobbies: JoJo's posts (taped-on notes) ---------- */
.posts-title {
  margin: 0 0 1.25rem;
  font-family: var(--font-pencil);
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 1;
}
.post-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  align-items: start;
  gap: 2rem 1.25rem;
}
.post {
  position: relative;
  display: grid;
  align-content: start;
  gap: .75rem;
  padding: 1.4rem 1.25rem 1.2rem;
  background: var(--sheet);
  border: 1px solid var(--edge);
  border-radius: 10px;
  box-shadow: 0 8px 16px -12px rgb(46 48 53 / .45);
}
/* a strip of yellow tape holding each note on */
.post::before {
  content: "";
  position: absolute;
  top: -.65rem;
  left: 50%;
  width: 4.5rem;
  height: 1.3rem;
  background: rgb(255 232 0 / .7);
  transform: translateX(-50%) rotate(-3deg);
}
.post-title {
  margin: 0;
  font-size: 1.2rem;
}
.post-words {
  margin: 0;
  white-space: pre-line;
}
.post img,
.post-video {
  width: 100%;
  border-radius: 6px;
}
.post-video {
  aspect-ratio: 16 / 9;
  border: 0;
  background: var(--graphite);
}
.post-link {
  justify-self: start;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.ph-posts {
  grid-column: 1 / -1;
  min-height: 8rem;
}

/* ---------- footer ---------- */
.footer {
  padding-block: 2rem 3rem;
  font-size: .95rem;
}

/* ---------- small screens ---------- */
@media (max-width: 40rem) {
  body { background-size: 400px, auto; }
  .masthead-tagline { font-size: .9rem; }

  /* phones: wrap the tabs onto two rows instead of scrolling sideways,
     so every section is visible without anyone having to find the scroll */
  .tabs {
    flex-wrap: wrap;
    overflow: visible;
    row-gap: .3rem;
  }
  .tab {
    padding: .45rem .75rem;
    font-size: .92rem;
    border-radius: 10px 10px 0 0;
  }
  .tab[aria-selected="true"] { padding-top: .6rem; }
  .tab-extra { display: none; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .split > .ph,
  .split > .cover,
  .split > .portrait { width: min(100%, 15rem); }
  .gallery { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
  .tab { padding-inline: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}