/**
 * CSS is how you can add style to your website, such as colors, fonts, and
 * positioning of your HTML content. Much of what's here is self-explanitory,
 * but I'll give context to some of the less well-known parameters/functions.
 */

/**
 * @import lets you break up your CSS into multiple files; I use it here to
 * seperate the reset settings from the rest of the styles and to import the comments styles.
 */
@import "/css/reset.css";
@import "/css/comments.css";
@import "/css/subscribe.css";

/* FONTS */

header,
h1,
h2,
h3,
h4,
h5 {
  font-family: "IM Fell English", serif;
  font-weight: 400;
  font-style: normal;
  /**
   * Todo: Write why we use rem units and set them throughout the stylesheet
   * https://www.youtube.com/watch?v=N5wpD9Ov_To
   */
  margin-bottom: 1rem;
}

p {
  font-family: "Lato", sans-serif;
  margin-bottom: .75rem;
}

/* This is to offset some weird height stuff with eleventy img */
img {
  height: auto;
}

/* GLOBAL */

/**
 * :root targets the root element of the document; in practice, it targets the
 * `<html>` tag, just with a higher specificity than calling it directly. It's
 * most commonly used for defining custom variables, which you can see below!
 * (https://developer.mozilla.org/en-US/docs/Web/CSS/:root)
 */
:root {
  /**
   * Custom variables allow us to set repeating values in one place. In this
   * case, we're defining the maximum width of our pages.
   * (https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
   *
   * Also, check out the `min()` property: it picks whatever is the smallest of
   * the two given properties as the width! For more details on it and similar
   * properties, check out Kevin Powell's video: https://youtu.be/U9VF-4euyRo
   */
  --pg-width: min(64rem, 90%);
  /* page width for double/spread pages that are one page */
  --double-pg-width: min(84rem, 100%);

  /**
  * The following is variables that set colours for things on the site.
  * If you just want to swap some colours, likely this is all you have to touch.
  **/
  /* universal background color */
  --bg-color: #1a2238;
  /* text and link colour for things sitting directly on the background */
  --on-bg-color: #f1ece4;
  /* the colour of links */
  --link-color: #222;
  /* link colours when hovered over */
  --link-color-hover: #da5437;
  --text-color: #222;

   /**
  * I recommend not changing this, UNLESS you are getting rid of the paper tear effect
  * If you DON'T want the paper tear effect remove from PAPER TEAR BEGIN to PAPER TEAR END
  * Roughly lines 149-172 of this file, although that might move a bit as things get added.
  **/
  --content-bg: #fff;
}

body {
  background-color: var(--bg-color);
  /**
   * "Stardust" by Atle Mo (CC BY-SA 3.0) over a faint teal glow, the colour of
   * Javi's magic. The glow stays put behind the comic while the page scrolls.
   */
  background-image:
    url("/img/textures/stardust.png"),
    radial-gradient(ellipse 95% 80% at 50% 45%, rgba(64, 200, 185, 0.14), transparent 75%);
  background-attachment: scroll, fixed;
}

/* link colors */
a {
  color: var(--link-color);
}
a:hover {
  color: var(--link-color-hover);
}

/* the header and footer sit on the dark background, so use light text */
header a,
footer a {
  color: var(--on-bg-color);
}
header a:hover,
footer a:hover {
  color: var(--link-color-hover);
}

/* HEADER */

header {
  /**
   * For those unfamiliar with flexbox, check out this CSS Tricks article:
   * https://css-tricks.com/snippets/css/a-guide-to-flexbox/
   */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--pg-width);
  margin: 2rem auto 0 auto;
}

/* logo, with the update schedule written under the title */
.banner {
  position: relative;
  display: block;
  /* needs an explicit width: container sizing ignores the image's own size */
  width: 100%;
  max-width: 1122px;
  container-type: inline-size;
}
.banner picture,
.banner img {
  display: block;
  width: 100%;
}
.banner-schedule {
  position: absolute;
  /* centred under "Anno Arcana" on the right of the banner */
  left: 80.5%;
  top: 62%;
  transform: translateX(-50%) rotate(-3deg);
  white-space: nowrap;
  font-size: 5cqw;
  color: #f4e2d0;
  text-shadow: 0 0 0.4em rgba(0, 0, 0, 0.9), 0 0 0.15em rgba(0, 0, 0, 0.9);
}

/* ComicAd banners: one below the nav bar, one right below the comic */
.header-ad,
.comic-ad {
  margin-top: 1rem;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
}
.comic-ad {
  margin: 1rem auto 0;
}

header nav {
  font-size: 20px;
  width: 98%;
  margin-top: 1rem;
  text-align: center;
  border: solid var(--on-bg-color);
  border-width: 1px 0;
  padding: 10px;
}

/* FOOTER */

footer {
  color: var(--on-bg-color);
  margin-top: 2rem;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  font-size: 12px;
}
.footer-credit {
  opacity: 0.7;
}

footer p {
  margin: auto;
}

/* COMIC */
.comic h1 {
  text-align: center;
  margin: 1rem 0;
}

/* style comic page image */
#comicPage {
  margin: 3rem auto 0 auto;
  width: var(--pg-width);
  padding: 20px;
}

.double-page #comicPage {
  width: var(--double-pg-width);
}

#comicPage picture {
  display: contents;
}

#comicPage img {
  display: block;
  margin: 0 auto;
}

/* comic side emblems (Bluesky, X, Patreon, Ko-fi); markup in comicSocials.liquid */
.comic-stage {
  position: relative;
}

/* By default the emblems are a row between the author notes and the comments */
.comic-socials--side {
  display: none;
}

.comic-socials--row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  width: var(--pg-width);
  margin: 3rem auto 0;
}

.comic-socials-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

.comic-social {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  width: 7rem;
  color: var(--on-bg-color);
  text-align: center;
  text-decoration: none;
}

.comic-social-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  color: #fff;
  transition: transform 0.15s ease;
}

.comic-social-badge svg {
  width: 55%;
  height: 55%;
}

.comic-social:hover .comic-social-badge,
.comic-social:focus-visible .comic-social-badge {
  transform: scale(1.1);
}

.comic-social:hover .comic-social-label {
  color: var(--link-color-hover);
}

.comic-social-bluesky .comic-social-badge { background: #1185fe; }
.comic-social-x .comic-social-badge { background: #000; }
.comic-social-patreon .comic-social-badge { background: #ff424d; }
.comic-social-kofi .comic-social-badge { background: #ff5e5b; }

/* With room to spare, the emblems sit in the margins on either side of the
   page instead (double-page spreads are too wide for this, so keep the row) */
@media screen and (min-width: 82rem) {
  .comic:not(.double-page) .comic-socials--side {
    display: block;
  }

  .comic-socials--row:not(.comic-socials--spread) {
    display: none;
  }

  .comic-socials--side .comic-socials-group {
    position: absolute;
    top: 5rem;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
  }

  .comic-socials--side .comic-socials-left {
    right: calc(50% + var(--pg-width) / 2 + 1rem);
  }

  .comic-socials--side .comic-socials-right {
    left: calc(50% + var(--pg-width) / 2 + 1rem);
  }
}

/* Don't remove this bit though */
.paperDiv {
  background: var(--content-bg);
  position: relative;
  width: var(--pg-width);
}

/* PAPER TEAR BEGIN - start removing here if you don't want the paper effect */
.paperDiv::before, .paperDiv::after {
  content: "";
  position: absolute;
  height: 20px;
  width: 100%;
  left: 0;
  background: url(/img/papertear.svg) bottom;
  background-size: var(--pg-width);
}

.paperDiv::before {
  transform: scaleY(-1);
  bottom: 100%;
}

.paperDiv::after {
  top: 100%;
}
/* PAPER TEAR END - stop removing here */

/* style nav button images */
.comicNav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  padding: 60px 0px;
  gap: 10px;
}
.comicNav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  color: var(--on-bg-color);
  text-decoration: none;
  font-size: 1.05rem;
}
.comicNav a:hover,
.comicNav a:focus-visible {
  color: var(--link-color-hover);
}
.comicNav img {
  width: 90px;
}

/* Discord invite at the bottom of the author notes */
.authorNotes-discord {
  margin: 1.25rem 0 0;
}
.authorNotes-discord a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
}

/* bookmark button between the nav arrows and the comic page */
.bookmark {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.5rem;
  /* Tuck it into the space under the nav arrows */
  margin: -30px auto 0;
  font-size: 1rem;
}
/* ComicAd banner in the bookmark row; wraps onto its own line when there
   isn't room beside the buttons, and never spills past the screen edge */
.bookmark-ad {
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  line-height: 0;
  margin-bottom: 1rem;
}
/* Keep the row (buttons + banner) within the comic's width */
.bookmark:has(.bookmark-ad) {
  width: var(--pg-width);
}
/* "Start from page one" on the home page, next to the bookmark button */
.start-reading {
  background: var(--link-color-hover);
  color: #fff;
  border: 2px solid var(--link-color-hover);
  border-radius: 4px;
  padding: 0.35rem 1rem;
  font-weight: 700;
  text-decoration: none;
}
.start-reading:hover,
.start-reading:focus-visible {
  background: var(--content-bg);
  color: var(--link-color-hover);
}
.bookmark-save,
.bookmark-clear {
  font: inherit;
  cursor: pointer;
  background: var(--content-bg);
  color: var(--link-color);
  border: 2px solid var(--link-color);
  border-radius: 4px;
  padding: 0.35rem 1rem;
}
.bookmark-clear {
  border-width: 1px;
  font-size: 0.85rem;
  padding: 0.2rem 0.6rem;
}
.bookmark-save:hover,
.bookmark-save:focus-visible,
.bookmark-clear:hover,
.bookmark-clear:focus-visible {
  border-color: var(--link-color-hover);
  color: var(--link-color-hover);
}

/* style author notes */
.authorNotes {
  margin: 3.5rem auto 0;
  width: var(--pg-width);
  font-size: 1.125rem;
  padding: 1% 3% 3%;
}

.authorNotes h1 {
  margin-bottom: 0;
}

.authorNotes-date {
  color: #4f4f47;
  font-size: 0.9rem;
  margin-top: -5px;
  margin-bottom: 1rem;
}

/* SUBPAGES */

.subPage {
  width: var(--pg-width);
  max-width: 98%;
  margin: 3rem auto 0;
  padding: 1rem 3rem 2rem;
}

/* site link emblems on the Links and Support pages
   (readElsewhere.liquid and supportLinks.liquid) */
.readElsewhere,
.supportLinks {
  margin-top: 2rem;
}

.readElsewhere-caption {
  font-size: 1.125rem;
}

.siteLinks-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 1.5rem;
}

.siteLinks-list a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
}

.siteLinks-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.75rem;
  color: #fff;
  transition: transform 0.15s ease;
}

.siteLinks-badge svg {
  width: 60%;
  height: 60%;
}

.siteLinks-webtoon { background: #00d564; }
.siteLinks-itch { background: #fa5c5c; }
.siteLinks-patreon { background: #ff424d; }
.siteLinks-kofi { background: #ff5e5b; }

.siteLinks-note {
  margin-top: -0.35rem;
  font-weight: 400;
  font-size: 0.9rem;
}

.siteLinks-list a:hover .siteLinks-badge,
.siteLinks-list a:focus-visible .siteLinks-badge {
  transform: scale(1.1);
}

.siteLinks-list a:hover .siteLinks-name {
  color: var(--link-color-hover);
}

/* news page */
.newsPost + .newsPost {
  border-top: 1px solid #ddd;
  margin-top: 1.5rem;
  padding-top: 0.5rem;
}

.newsPost h2 {
  margin-bottom: 0;
}

.newsPost-date {
  color: #4f4f47;
  font-size: 0.9rem;
  margin-top: 0;
}


/* character page */
.character,
.chapter-container {
  /**
   * For those unfamiliar with grid, check out this CSS Tricks article:
   * https://css-tricks.com/snippets/css/complete-guide-grid/
   *
   * This is also being applied to the archive layout
   */
  display: grid;
  grid-template-columns: 20% 60%;
  gap: 1rem;
  margin: 1rem auto 2rem;
}

.character h2 {
  margin-bottom: 0;
}

.character h2 {
  margin-bottom: 0;
}

.character picture,
.character img {
  width: 100%;
  max-width: 150px;
}

/* archive */
.archive-select {
  width: min(400px, 98%);
}

.chapter {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.25rem;
}
.chapter h3 {
    margin: 0;
    font-family: "Lato", sans-serif;
}
.chapter-img {
  width: min(200px, 98%);
}
.chapter-container { 
  grid-template-columns: 20% 60%;
}

/* chapter list at the top of the archive */
.chapterNav {
  margin: 1.5rem 0 2rem;
}
.chapterNav ol {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}
.chapterNav li {
  font-size: 1.15rem;
}
.chapterNav-soon {
  color: #4f4f47;
  font-size: 0.9rem;
}
.chapter-container {
  scroll-margin-top: 1rem;
}
.chapter-top {
  margin-top: 0.75rem;
  font-size: 0.9rem;
}

/**
  * MOBILE STYLES
  * This basically says to apply these changes if the window screen is 700px or smaller
  *
**/
@media screen and (max-width: 700px) {
  .subPage {
    padding: 1rem 1rem 2rem;
  }

  #comicPage {
    padding: 20px 0;
  }

  /* a little more room inside the text boxes on small screens */
  .authorNotes,
  .comments-wrapper {
    padding: 1rem 1.25rem 1.5rem;
  }

  .character,
  .chapter-container {
    grid-template-columns: 100%;
    gap: 0rem;
  }

  :root {
    --pg-width: min(100%);
  }
}


/* fox emblems ("fox" by Caro Asercion, "fox-tail" by Delapouite, game-icons.net,
   CC BY 3.0). Drawn as masks so they take the surrounding text colour. */
.fox-mark {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background-color: currentColor;
  -webkit-mask: url("/img/icons/fox.svg") center / contain no-repeat;
  mask: url("/img/icons/fox.svg") center / contain no-repeat;
  opacity: 0.6;
}
.fox-mark.fox-tail {
  -webkit-mask-image: url("/img/icons/fox-tail.svg");
  mask-image: url("/img/icons/fox-tail.svg");
}
.footer-fox {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.25rem;
}
/* a small fox with a fading line either side, between sections */
.fox-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 2rem 0 1rem;
}
.fox-divider::before,
.fox-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to var(--fade, right), currentColor, transparent);
  opacity: 0.35;
}
.fox-divider::before {
  --fade: left;
}
.authorNotes-tail {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0.75rem auto 0;
  opacity: 0.4;
}

/* ---------- Archive thumbnails ---------- */
.chapter-pages {
  list-style: none;
  margin: 0.5rem 0 1rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.6rem 1rem;
}
.chapter-pages .chapter a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}
.chapter-pages .chapter a:hover span,
.chapter-pages .chapter a:focus-visible span {
  text-decoration: underline;
}
.chapter-thumb {
  flex: none;
  width: 3rem;
  height: 4.5rem;
  object-fit: cover;
  object-position: top;
  border: 1px solid #d6cfc3;
  background: #f3efe8;
}

/* ---------- "Read on one page" links, share row ---------- */
.chapter-read-link {
  margin: 0.25rem 0 0.75rem;
  font-weight: 700;
}
.share-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.9rem;
  margin: 1.1rem 0 0;
  font-size: 0.95rem;
}
.share-label {
  font-weight: 700;
}
.share-copy {
  font: inherit;
  cursor: pointer;
  background: var(--content-bg);
  color: var(--link-color);
  border: 1px solid var(--link-color);
  border-radius: 4px;
  padding: 0.15rem 0.7rem;
}
.share-copy:hover,
.share-copy:focus-visible {
  border-color: var(--link-color-hover);
  color: var(--link-color-hover);
}

/* ---------- One-page chapter reader (chapter-read.liquid) ---------- */
.chapter-read-head,
.chapter-read-foot {
  width: var(--pg-width);
  margin: 3rem auto 0;
  padding: 1rem 3% 1.5rem;
  text-align: center;
}
.chapter-read-head h1 {
  margin-bottom: 0.3rem;
}
.chapter-read-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  font-weight: 700;
}
.chapter-read-pages {
  width: var(--pg-width);
  margin: 3rem auto 0;
  padding: 20px;
}
.chapter-read-page + .chapter-read-page {
  margin-top: 2.5rem;
}
.chapter-read-page h2 {
  margin: 0 0 0.6rem;
  font-size: 1.1rem;
}
.chapter-read-page picture {
  display: contents;
}
.chapter-read-page img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}
@media screen and (max-width: 700px) {
  .chapter-read-pages {
    padding: 20px 0;
  }
  .chapter-read-page h2 {
    padding: 0 1rem;
  }
}

/* ---------- Scroll View menu (scroll.liquid) ---------- */
.scroll-chapters {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 1.5rem;
}
.scroll-chapter a {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid #d6cfc3;
  background: #faf7f2;
  color: var(--text-color);
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.scroll-chapter a:hover,
.scroll-chapter a:focus-visible {
  transform: translateY(-3px);
  border-color: var(--link-color-hover);
}
.scroll-chapter picture {
  display: contents;
}
.scroll-chapter img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top;
}
.scroll-chapter-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.8rem 1rem 1rem;
}
.scroll-chapter-name {
  font-family: "IM Fell English", serif;
  font-size: 1.35rem;
  line-height: 1.2;
}
.scroll-chapter-meta {
  color: #787872;
  font-size: 0.9rem;
}
.scroll-chapter-go {
  margin-top: 0.4rem;
  font-weight: 700;
  color: var(--link-color-hover);
}
@media screen and (max-width: 700px) {
  .scroll-chapters {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9rem;
  }
  .scroll-chapter-name {
    font-size: 1.1rem;
  }
}