/* popstory. one stylesheet, content-hashed at build time.

   blue and orange are the brand, carried from the old site, but they live
   in the chrome only. anything you actually read sits on paper, because a
   crayon story for six year olds and a charcoal one for teenagers have to
   share this page and neither can be allowed to set the tone.

   sections, in order:
     tokens . base . chrome . layout . prose . components
     front page . story page . production notes . level ladder */


/* ---- tokens ---------------------------------------------------- */

:root {
  --paper: #faf6ee;    /* the reading surface */
  --ground: #e7dfd0;   /* everything behind it */
  --ink: #2b2622;
  --muted: #6b6259;
  --rule: #ddd2bd;

  --blue: #1b6b93;
  --blue-deep: #124c69;
  --orange: #d95d18;
  --orange-dark: #c04f0f;

  --measure: 34rem;    /* line length for prose */
  --panel: 41rem;      /* measure plus the panel's own padding */
  --wide: 68rem;
  --radius: 4px;

  /* swap --display for a self-hosted URW Bookman Demi Italic once the
     licence is confirmed: it is the wordmark's own typeface, so the
     headings and the logo would finally be the same thing.

     the CJK families are fallbacks, not defaults. glyph fallback is per
     character, so latin still comes from Georgia and only hangul or kana
     fall through. without them a machine with Noto JP but not KR renders
     korean as boxes. */
  --display: Georgia, "Iowan Old Style", "Noto Serif KR", "Noto Serif JP", serif;
  --body: Georgia, "Iowan Old Style", "Noto Serif KR", "Noto Serif JP",
          "Apple SD Gothic Neo", "Hiragino Mincho ProN", "Malgun Gothic", serif;
}


/* ---- base ------------------------------------------------------ */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 1.125rem/1.7 var(--body);
}

a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--display); line-height: 1.15; }

.skip {
  position: absolute; left: -9999px; z-index: 10;
  background: var(--ink); color: var(--paper);
  padding: .6rem 1rem;
}
.skip:focus { left: .5rem; top: .5rem; }


/* ---- chrome ---------------------------------------------------- */

header.site {
  background: var(--blue);
  padding: .7rem 1.5rem;
  display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
}
header.site .brand { display: block; line-height: 0; color: #14100e; }
header.site .wordmark { height: 2.6rem; width: auto; display: block; }

/* the menu exists because the wordmark alone gave the eye nothing to do,
   and a story page had no route to another story but the back button. */
header.site .menu {
  display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: center;
  margin-left: auto;
}
header.site .menu a {
  color: rgba(255, 255, 255, .82);
  text-decoration: none; font-size: .95rem;
  padding: .3rem 0; border-bottom: 2px solid transparent;
}
header.site .menu a:hover { color: #fff; border-bottom-color: var(--orange); }
header.site .menu .menu-end {
  padding: .3rem .9rem; border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px; border-bottom-color: rgba(255, 255, 255, .35);
}
header.site .menu .menu-end:hover {
  background: var(--orange); border-color: var(--orange);
}

/* on the front page the header floats over the artwork, the way the old
   site did it. the wordmark is white-filled with a heavy outline precisely
   so it survives whatever is behind it. */
.front header.site {
  position: absolute; inset: 0 0 auto 0; z-index: 2;
  background: transparent; padding: 1.25rem 1.75rem;
}
.front header.site .wordmark { height: 3.4rem; }
.front header.site .menu a { text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }

footer.site {
  margin-top: 5rem;
  background: var(--blue-deep);
  color: rgba(255, 255, 255, .8);
  padding: 2.5rem 1.5rem;
  text-align: center; font-size: .9rem;
}
footer.site .follow { margin: 0 0 1rem; }
footer.site .follow a {
  display: inline-block; margin: 0 .3rem .4rem; padding: .35rem 1rem;
  border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px;
  color: #fff; text-decoration: none;
}
footer.site .follow a:hover {
  background: var(--orange); border-color: var(--orange);
}
footer.site .colophon { margin: 0; }
footer.site .version { opacity: .5; margin-left: .5rem; }

/* the footer sitemap is not decoration: until it existed the facet pages
   had almost nothing linking to them. */
.sitemap {
  display: grid; gap: 1.75rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  max-width: var(--wide); margin: 0 auto 2.5rem;
  text-align: left;
}
.sitemap h2 {
  margin: 0 0 .5rem; font-family: var(--body);
  font-size: .8rem; text-transform: uppercase; letter-spacing: .08em;
  color: rgba(255, 255, 255, .55);
}
.sitemap ul { margin: 0; padding: 0; list-style: none; }
.sitemap li { margin: 0 0 .3rem; }
.sitemap a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.sitemap a:hover { color: #fff; text-decoration: underline; }


/* ---- layout ---------------------------------------------------- */

main { max-width: var(--measure); margin: 0 auto; padding: 2rem 1.25rem 4rem; }
main.wide { max-width: var(--wide); }
main h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 .5rem; }

.lede { color: var(--muted); max-width: var(--measure); margin: 0 0 2rem; }
.empty { color: var(--muted); }

/* body.read: the reading surface is a panel, not the page. long-form text
   wants a defined edge, and the darker ground stops a cream page glaring
   against the dark artwork some stories produce. */
.read main {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(43, 38, 34, .05);
  max-width: var(--panel);
  padding: 2.5rem clamp(1.25rem, 5vw, 3.5rem) 4rem;
  margin: 2rem auto 0;
}
.read main.wide { max-width: var(--wide); }

/* two columns on facet pages. the rail is the vertical anchor the grid was
   missing, and it puts every sibling facet one click from every other. */
@media (min-width: 56rem) {
  .layout {
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: 3rem; align-items: start;
  }
  .layout .body { min-width: 0; }
  .layout .body h1 { margin-top: 0; }
  .rail { position: sticky; top: 1.5rem; margin: 0; }
}


/* ---- prose ----------------------------------------------------- */
/* main.prose: about and corrections, the pages written by a person.
   scoped, because unscoped `main p` reaches into story and notes pages
   which have their own paragraph rules. */

.prose h2 { margin: 2.75rem 0 .75rem; font-size: 1.3rem; }
.prose p { margin: 0 0 1.1rem; }


/* ---- components ------------------------------------------------ */

.grid {
  display: grid; gap: 1.75rem 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
  padding: 1.5rem 0 0;
}

.card { display: block; text-decoration: none; }
.card img, .card-blank {
  display: block; width: 100%;
  aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radius); margin: 0 0 .7rem;
  background: var(--rule);
}
.card h3 { margin: 0 0 .3rem; font-size: 1.1rem; }
.card:hover h3 { color: var(--blue); }
.card-meta {
  margin: 0; color: var(--muted); font-size: .85rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
}
.card-meta span:not(.tag):not(:last-child)::after { content: " \00b7"; }

/* the audience tag is what stops a grimdark card sitting unlabelled beside
   a nursery one on a theme page, which is where the two genuinely mix. */
.tag {
  border: 1px solid var(--rule); border-radius: 999px;
  padding: .05rem .55rem; font-size: .78rem; text-transform: lowercase;
}

/* pill: languages, themes, palette swatches. one shape, three uses. */
.languages a, .themes a, .swatch {
  display: inline-block; padding: .35rem 1rem;
  border: 1px solid var(--rule); border-radius: 999px;
  text-decoration: none;
}
.languages a { margin: 0 .4rem .5rem 0; background: var(--paper); font-size: .95rem; }
.themes a    { margin: 0 .4rem .4rem 0; padding: .2rem .7rem;
               font-size: .85rem; color: var(--muted); }
.swatch      { margin: 0 .4rem .4rem 0; padding: .2rem .7rem;
               font-size: .8rem; color: var(--muted); }
.languages a:hover, .themes a:hover { border-color: var(--blue); color: var(--blue); }

.rail { margin: 0 0 2.5rem; }
.rail h2 {
  margin: 0 0 .7rem; font-family: var(--body);
  font-size: .78rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted);
  padding-bottom: .5rem; border-bottom: 1px solid var(--rule);
}
.rail h2 a { text-decoration: none; }
.rail ul { list-style: none; margin: 0; padding: 0; }
.rail li { margin: 0; }
.rail li a {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .75rem; padding: .35rem .6rem;
  text-decoration: none; font-size: .95rem;
  border-left: 3px solid transparent;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.rail li a span { color: var(--muted); font-size: .8rem; }
.rail li a:hover { background: rgba(27, 107, 147, .07); }
.rail li.on a {
  border-left-color: var(--orange);
  background: rgba(217, 93, 24, .09); font-weight: 700;
}

.hub {
  list-style: none; margin: 2rem 0 0; padding: 0;
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}
.hub li a {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; padding: .8rem 1rem;
  background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--radius);
  text-decoration: none;
}
.hub li a:hover { border-color: var(--blue); }
.hub-label { font-weight: 700; }
.hub-count { color: var(--muted); font-size: .85rem; }

.madewith { margin: 2.5rem 0 0; }
.madewith a {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--blue); text-decoration: none; font-weight: 700;
}
.madewith .icon { width: 1.1em; height: 1.1em; }

.crumb { margin: 0 0 .5rem; }
.crumb a { color: var(--muted); text-decoration: none; font-size: .9rem; }

.footnote { margin: 3rem 0 0; color: var(--muted); font-size: .85rem; }


/* ---- front page ------------------------------------------------ */

.hero-front {
  position: relative;
  min-height: min(66vh, 34rem);
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden;
  background: var(--blue-deep);
}
.hero-front img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.hero-front::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(rgba(0, 0, 0, .45) 0 22%,
                              rgba(0, 0, 0, .1) 45%,
                              rgba(0, 0, 0, .72));
}
.hero-front-body {
  position: relative; z-index: 1;
  padding: 2rem 1.5rem 2.75rem;
  max-width: 40rem; text-align: center; color: #fff;
}
.hero-front-body h1 {
  margin: 0 0 .9rem;
  font-size: clamp(1.7rem, 5vw, 3rem);
  text-shadow: 0 2px 16px rgba(0, 0, 0, .6);
}
.hero-front-body .featured { margin: 0; }
.hero-front-body .featured a {
  display: inline-block; padding: .6rem 1.4rem;
  background: var(--orange); color: #fff;
  border-radius: 999px; text-decoration: none; font-weight: 700;
}
.hero-front-body .featured a:hover { background: var(--orange-dark); }

.front main { padding-top: 2.5rem; }

/* the process note: on paper by default, over artwork on the front page.
   blue link text on a dark poster was unreadable. */
.process {
  margin: 0 0 2.5rem; padding: .9rem 1.1rem;
  border-left: 3px solid var(--orange);
  background: rgba(217, 93, 24, .06);
  font-size: .95rem;
}
.process a { color: var(--blue); font-weight: 700; }

.hero-front .process {
  margin: 0; background: rgba(0, 0, 0, .38); color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}
.hero-front .process a { color: #fff; text-decoration: underline; }
.hero-front .process a:hover { color: var(--orange); }

.row { margin: 0 0 4rem; }

/* the count lives on the rule beside the heading, not below the grid,
   where it read as a label for the next section. */
.row-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin: 0; padding-bottom: .6rem;
  border-bottom: 2px solid var(--orange);
}
.row-head h2 { margin: 0; font-size: 1.4rem; }
.row-all {
  color: var(--blue); text-decoration: none;
  font-weight: 700; font-size: .95rem; white-space: nowrap;
}
.row-all:hover { text-decoration: underline; }

/* the darker band is the whole segmentation strategy. no subdomain, no
   toggle: adult stories are simply not in the recency rows above, and the
   change of ground makes that obvious before anyone reads a title. */
.row--adult {
  margin-top: 4.5rem;
  padding: 1.75rem 1.5rem 2rem;
  background: var(--blue-deep);
  color: var(--paper);
  border-radius: var(--radius);
}
.row--adult .row-head { border-bottom-color: rgba(255, 255, 255, .35); }
.row--adult .row-all { color: #fff; }
.row--adult .card-meta { color: rgba(250, 246, 238, .65); }
.row--adult .tag { border-color: rgba(255, 255, 255, .35); }


/* ---- story page ------------------------------------------------ */

.hero { position: relative; margin: 0 0 2.5rem; }
.hero img { border-radius: var(--radius); }
.hero h1 {
  position: absolute; inset: 0 0 auto 0; z-index: 1;
  margin: 0; padding: 1.25rem 1.5rem;
  font-size: clamp(1.6rem, 4.5vw, 2.6rem);
  color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
}
.hero::after {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 55%;
  background: linear-gradient(rgba(0, 0, 0, .6), transparent);
  border-radius: var(--radius) var(--radius) 0 0;
  pointer-events: none;
}

.meta { color: var(--muted); font-size: .9rem; margin: -1.5rem 0 2.5rem; }

.block { margin: 0 0 3rem; }
.block img { border-radius: var(--radius); margin: 0 0 1.25rem; }
.block p { margin: 0 0 1.1rem; }

/* the aligner attaches here later. inert for now. */
.sentence { transition: background-color .15s; }

.themes { margin: 2.5rem 0 0; }

.correction { margin: .75rem 0 0; color: var(--muted); font-size: .9rem; }
.correction a { color: var(--blue); }


/* ---- production notes ------------------------------------------ */

.artefacts h2 {
  margin: 3.5rem 0 1.25rem; padding-top: 1.25rem;
  border-top: 1px solid var(--rule); font-size: 1.3rem;
}

.sheets { display: grid; gap: 2.5rem; }
.sheet, .setting { margin: 0; }
.sheet img, .setting img { border-radius: var(--radius); margin: 0 0 .75rem; }
.sheet p, .setting p {
  margin: .4rem 0 0; font-size: .95rem; max-width: var(--measure);
}
.sheet .voice { color: var(--muted); font-style: italic; }

.who { margin: 0 0 .3rem; display: flex; align-items: center; gap: .5rem; }
.who strong { font-size: 1.15rem; }
.who .role { color: var(--muted); }

.beats { max-width: var(--measure); padding-left: 1.2rem; }
.beats li { margin: 0 0 1.25rem; }
.beats .summary { margin: 0; display: flex; align-items: baseline; gap: .5rem; }
.beats .detail { margin: .2rem 0 0; font-size: .85rem; color: var(--muted); }
.beats .detail span:not(:last-child)::after { content: " \00b7 "; }

.effort { display: flex; flex-wrap: wrap; gap: 2.5rem; margin: 0; }
.effort dt { color: var(--muted); font-size: .85rem; }
.effort dd { margin: .1rem 0 0; font-size: 1.35rem; }

/* inert. should open a panel explaining what editing would do and record
   which artefact was clicked, which is the specification for remix. */
.edit {
  border: 1px solid var(--rule); border-radius: 999px;
  background: transparent; color: var(--muted);
  padding: .25rem; cursor: pointer; flex: none;
  opacity: 0; transition: opacity .15s, color .15s, border-color .15s;
}
.edit svg { width: .95em; height: .95em; display: block; }
.edit:hover { color: var(--orange); border-color: var(--orange); }
.edit:focus-visible {
  opacity: 1; outline: 2px solid var(--ink); outline-offset: 2px;
}
.sheet:hover .edit,
.setting:hover .edit,
.beats li:hover .edit { opacity: 1; }

/* touch devices have no hover, and that is where social traffic lands */
@media (hover: none) {
  .edit { opacity: .45; }
}

@media (min-width: 46rem) {
  .sheets { grid-template-columns: 1fr 1fr; }
}


/* ---- level ladder ---------------------------------------------- */
/* the /level/ hub. the same story at every level, so a reader can see what
   the levels mean rather than being told. */

.ladder-head {
  margin: 3.5rem 0 .5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--rule); font-size: 1.3rem;
}
.ladder-intro { color: var(--muted); max-width: var(--measure); margin: 0 0 2rem; }

.ladder { list-style: none; margin: 0; padding: 0; max-width: 44rem; }
.ladder li { margin: 0 0 2.25rem; }
.ladder blockquote {
  margin: 0; padding: .9rem 1.2rem;
  background: var(--paper); border-left: 3px solid var(--orange);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.rung-head {
  margin: 0 0 .5rem; font-size: .85rem; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: baseline;
}
.rung-head strong { font-size: 1.05rem; color: var(--ink); }
.rung-head a { text-decoration: none; }
.rung-head span:not(:last-child)::after { content: " \00b7"; }

.rung-foot { margin: .5rem 0 0; font-size: .9rem; }
.rung-foot a { color: var(--blue); text-decoration: none; }