/* StorySwept's own page: the imprint's ivory, cocoa and berry in both color schemes, as on its home band. */

body {
  --bg: #fbf3ea;
  --surface: #fff9f2;
  --ink: #3a2730;
  --muted: #684a54;
  --link: #a83d5c;
  --rule: #e9d8c8;
  --logo-inner: #3a2730;
  --focus: #a83d5c;
  --berry: #a83d5c;
  --ss-serif: "Cormorant Garamond", Georgia, serif;
  color-scheme: light;
}

.ss .eyebrow { color: var(--berry); }

.ss h2 {
  font: 500 var(--step-3)/1.15 var(--sans);
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
  max-width: 18ch;
}
.ss-row-copy p {
  font: 400 var(--step-0)/1.7 var(--serif);
  margin: 0;
  max-width: 34rem;
  text-wrap: pretty;
}

.ss figure { margin: 0; }
.ss figcaption {
  font: 400 0.8125rem/1.4 var(--sans);
  color: var(--muted);
  margin-top: 0.85rem;
}
.ss-title {
  font: 500 italic 1.125rem/1 var(--ss-serif);
  color: var(--ink);
}

/* Paintings sit on the ivory the way covers do on the shelf. */
.ss-key-bg, .ss-scene-frame, .ss-drawn img, .ss-drawn-box, .ss-shelf img {
  border-radius: 4px;
  box-shadow: 0 1px 0 #e9d8c8, 0 14px 32px -16px rgb(58 39 48 / 0.5);
}

/* ---------- Hero: key art, with the characters standing out of the painting ---------- */

.ss-hero { padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 7vw, 5.5rem); }
.ss-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
}
.ss-hero-copy h1 {
  font: 500 italic clamp(3rem, 1.9rem + 3.2vw, 4.5rem)/0.98 var(--ss-serif);
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 12ch;
  text-wrap: balance;
}
.ss-hero-copy .sub {
  font: 400 var(--step-1)/1.5 var(--serif);
  color: var(--muted);
  margin: 1.5rem 0 0;
  max-width: 30rem;
  text-wrap: pretty;
}
.ss-key { padding-top: 11%; }
.ss-key-frame {
  position: relative;
  aspect-ratio: 4 / 3;
}
.ss-key-bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
}
.ss-key-char {
  position: absolute;
  bottom: 0;
  width: auto;
  filter: drop-shadow(0 12px 14px rgb(58 39 48 / 0.35));
}
.ss-key-left { left: 30%; height: 96%; }
.ss-key-right { right: 5%; height: 108%; }

@media (min-width: 60rem) {
  .ss-hero-grid { grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); gap: 4rem; }
  .ss-hero-copy { padding-bottom: 1rem; }
}

/* ---------- Rows: copy beside a scene from one story ---------- */

.ss-row {
  padding-block: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--rule);
}
.ss-row-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.25rem;
  align-items: center;
}
@media (min-width: 60rem) {
  .ss-row-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4.5rem; }
  .ss-row-flip .ss-row-copy { order: 2; }
  .ss-row-wide .ss-row-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}

.ss-scene-frame {
  position: relative;
  aspect-ratio: 7 / 4;
  overflow: hidden;
}
.ss-scene-bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
}
.ss-scene-char {
  position: absolute;
  bottom: -2%;
  width: auto;
  height: 90%;
  filter: drop-shadow(0 8px 12px rgb(0 0 0 / 0.35));
}
.ss-scene-left { left: 10%; }
.ss-scene-right { right: 10%; }

/* The turn: three suggested actions and the box for your own, as the app lays them out. */
.ss-turn {
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: center;
}
.ss-turn li {
  font: 600 0.8125rem/1 var(--sans);
  color: var(--ink);
  background: var(--bg);
  padding: 0.6rem 0.9rem;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.35);
}
.ss-turn .ss-type {
  color: var(--bg);
  background: rgb(58 39 48 / 0.72);
  font-weight: 500;
  flex-basis: 100%;
  text-align: left;
  border: 1px solid rgb(251 243 234 / 0.5);
  box-shadow: none;
}
.ss-caret {
  display: inline-block;
  width: 1px;
  height: 0.9em;
  background: var(--bg);
  vertical-align: -0.1em;
  margin-left: 0.3em;
}
@media (prefers-reduced-motion: no-preference) {
  .ss-caret { animation: ss-blink 1.1s steps(1) infinite; }
}
@keyframes ss-blink { 50% { opacity: 0; } }

/* What StorySwept draws for a story: its cover, a character and a location, at one height. */
.ss-drawn ul {
  --tile: clamp(6rem, 3rem + 7vw, 10rem);
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem 1.25rem;
}
.ss-drawn li { flex: 0 0 auto; }
.ss-drawn img { display: block; height: var(--tile); width: auto; }
.ss-drawn-char .ss-drawn-box {
  height: var(--tile);
  width: calc(var(--tile) * 5 / 6);
  background: #f1e2d2;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  overflow: hidden;
}
.ss-drawn-char img {
  height: 94%;
  border-radius: 0;
  box-shadow: none;
}
.ss-drawn li span {
  display: block;
  font: 600 0.6875rem/1.3 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.6rem;
}

/* ---------- Read on your own terms: covers with the subgenres that sort them ---------- */

.ss-read {
  padding-block: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--rule);
}
.ss-shelf {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 2rem 1.5rem;
}
.ss-shelf img { display: block; width: 100%; height: auto; }
.ss-shelf h3 {
  font: 500 italic 1.3125rem/1.15 var(--ss-serif);
  margin: 0.9rem 0 0;
}
.ss-shelf p {
  font: 400 0.8125rem/1.4 var(--sans);
  color: var(--muted);
  margin: 0.3rem 0 0;
}
@media (max-width: 64rem) {
  .ss-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 44rem) {
  .ss-shelf {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    gap: 1rem;
    margin-inline: calc(var(--gutter) * -1);
    padding: 0 var(--gutter) 1rem;
    scrollbar-width: thin;
  }
  .ss-shelf li { flex: 0 0 46%; scroll-snap-align: start; }
}

/* ---------- Facts strip ---------- */

.ss-facts-band {
  border-top: 1px solid var(--rule);
  padding-block: 2.5rem clamp(3rem, 6vw, 5rem);
}
.ss-facts {
  margin: 0;
  padding: 0;
  border: 0;
  max-width: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.ss-facts dt { color: var(--berry); }