/* ==========================================================================
   About: a short tale, white-first.
   Hello + portrait, four chapters as four phases of the moon, the word cloud
   folded up small (it opens as you scroll), the "reads between the lines"
   spine, process with the binned idea, the tally, the names wall, the ask.
   ========================================================================== */

/* ---------- hello ----------
   The portrait is high-key on white, so it melts into the page: no frame,
   just a face coming out of the paper. It bleeds off the right edge. */

.hello {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(8rem, 20vh, 12rem) var(--gutter) 0;
}
.hello__eyebrow {
  color: var(--soft);
}
/* the name is the page: one line, as wide as it will go */
.hello__title {
  position: relative;
  z-index: 1;
  font-size: clamp(2.9rem, 11.6vw, 14rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.hello__copy {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  align-content: end;
}
.hello__dek {
  max-width: 27ch;
  font-size: var(--step-1);
  line-height: 1.35;
}
.hello__aside {
  max-width: 24ch;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--step-2);
  line-height: 1.08;
}
.hello__facts {
  display: grid;
  gap: 0.6rem 2rem;
  margin-top: clamp(0.75rem, 2vw, 1.5rem);
  padding-top: clamp(1rem, 2vw, 1.5rem);
  border-top: 1px solid var(--rule);
}
.hello__facts div {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  align-items: baseline;
}
.hello__facts dt {
  color: var(--soft);
}
.hello__portrait {
  margin-right: calc(var(--gutter) * -1);
  margin-left: calc(var(--gutter) * -1);
  /* on the frame, not the image: the frame is faded and moved in as the page
     opens, and a transformed element blends as one group (as the home hare) */
  mix-blend-mode: multiply;
}
.hello__portrait img {
  width: 100%;
  height: auto;
  /* no fade (Stephen, 2026-11-13): the studio ground is lifted to pure white,
     so only the cut at the arms shows, sitting on the section's bottom edge.
     The frame is multiplied (see .hello__portrait), so when night falls
     below him his white ground goes dark with the page, never a white box */
}
@media (min-width: 900px) {
  .hello {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(2rem, 4vw, 4rem);
    row-gap: clamp(1rem, 2.4vh, 1.75rem);
    min-height: 100svh;
    padding-top: clamp(6.5rem, 14vh, 8.5rem);
  }
  .hello__eyebrow,
  .hello__title {
    grid-column: 1 / -1;
  }
  .hello__copy {
    grid-column: 1;
    grid-row: 3;
    padding-bottom: clamp(2.5rem, 7vh, 5rem);
  }
  /* he comes up from the bottom edge, his head just under the name */
  .hello__portrait {
    grid-column: 2;
    grid-row: 3;
    align-self: end;
    justify-self: end;
    width: min(100% + var(--gutter), (100svh - 19rem) * 1.49);
    margin: -2vw calc(var(--gutter) * -1) 0 0;
  }
}
/* ---------- the tale: four phases ---------- */

.tale {
  padding: var(--section) var(--gutter);
}
.tale__chapters {
  display: grid;
  gap: clamp(4rem, 9vw, 8rem);
}
.chapter {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(1.25rem, 3vw, 2.5rem);
  max-width: 62rem;
}
.chapter:nth-child(even) {
  margin-left: auto;
}
.chapter__moon {
  grid-row: span 3;
  width: clamp(2.25rem, 4vw, 3.5rem);
  margin-top: 0.3rem;
}
.chapter__num {
  margin-bottom: 0.9rem;
  color: var(--soft);
}
.chapter__title {
  font-size: var(--step-3);
  line-height: 1;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
.chapter__text {
  max-width: 36ch;
  font-size: var(--step-1);
  line-height: 1.4;
}

/* the dots-as-O's device: MOON with two phases for its O's */
.nowrap {
  white-space: nowrap;
}
.dot {
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  margin: 0 0.035em;
  border-radius: 50%;
  border: 0.045em solid currentColor;
  vertical-align: -0.02em;
}
.dot--wax {
  background: linear-gradient(90deg, transparent 50%, currentColor 50%);
}
.dot--wane {
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}

/* ---------- the fold: the word cloud, folded up small ---------- */

.fold {
  padding: 0 var(--gutter) var(--section);
}
.fold__head {
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
}
.fold__eyebrow {
  margin-bottom: 1rem;
  color: var(--soft);
}
.fold__title {
  font-size: var(--step-3);
  max-width: 14ch;
}
.fold__figure {
  display: grid;
  justify-items: center;
}
.fold__sheet {
  --w: min(84vw, 44rem);
  display: flex;
  width: var(--w);
  aspect-ratio: 424.41 / 418.04;
  perspective: 1800px;
  transform-style: preserve-3d;
}
.fold__panel {
  position: relative;
  flex: 1 1 0;
  background: url("/assets/brand/word-cloud-black.svg") no-repeat;
  background-size: 600% 100%;
  background-position: calc(var(--i) * 20%) 0;
  transform-origin: 0 50%;
  backface-visibility: hidden;
  will-change: transform;
}
/* each panel's own shade, darker on the faces turned from the light */
.fold__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: var(--shade, 0);
  pointer-events: none;
}
.fold__photo[hidden] {
  display: none;
}
.fold__photo {
  width: min(92vw, 56rem);
  height: auto;
}
.fold__caption {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  color: var(--soft);
}
/* ?fold=photo: compare the photographed fold */
.fold--photo .fold__sheet {
  display: none;
}

/* ---------- the spine: reads between the lines ---------- */

.spine {
  padding: 0 var(--gutter) var(--section);
}
.spine__eyebrow {
  margin-bottom: clamp(1.25rem, 3vh, 2rem);
  color: var(--soft);
}
.spine__title {
  font-size: var(--step-3);
  max-width: 18ch;
}
.spine__note {
  margin: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2.5rem);
  color: var(--soft);
}
.quotes {
  display: grid;
  gap: clamp(3rem, 6vw, 5rem);
}
.quote {
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--rule);
}
/* plain quotes: the marked phrase is the only decoration (Stephen: no rules under the text) */
.quote__text {
  --lh: 1.36em;
  max-width: 40ch;
  font-size: var(--step-1);
  line-height: var(--lh);
}
.quote__text mark {
  color: inherit;
  font-style: italic;
  /* a soft marker stroke along the lower half of the line */
  background: linear-gradient(color-mix(in srgb, currentColor 13%, transparent), color-mix(in srgb, currentColor 13%, transparent)) no-repeat 0 88% / var(--ink-w, 100%) 0.5em;
  transition: background-size 1.4s var(--ease-out);
}
.motion .quote__text mark {
  --ink-w: 0%;
}
.motion .quote.is-read mark {
  --ink-w: 100%;
}
.quote__who {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  align-items: baseline;
  margin-top: 1.25rem;
}
.quote__name {
  font-weight: 600;
}
.quote__who .eyebrow {
  color: var(--soft);
}
@media (min-width: 1000px) {
  .quotes {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(2rem, 3vw, 3rem);
  }
  /* a last quote left on its own takes the whole row: the closing word */
  .quote:last-child:nth-child(3n + 1) {
    grid-column: 1 / -1;
  }
  .quote:last-child:nth-child(3n + 1) .quote__text {
    max-width: 62ch;
  }
}

/* ---------- process ---------- */

.process {
  padding: 0 var(--gutter) clamp(3rem, 6vw, 5rem);
}
.process__head {
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
}
.process__eyebrow {
  margin-bottom: 1rem;
  color: var(--soft);
}
.process__title {
  font-size: var(--step-3);
}
.process__dek {
  max-width: 34ch;
  margin-top: 1.25rem;
  color: var(--soft);
}
.steps-list {
  border-top: 1px solid var(--rule);
}
.step {
  display: grid;
  grid-template-columns: 3rem 1fr;
  column-gap: 1rem;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-bottom: 1px solid var(--rule);
}
.step__num {
  grid-row: span 2;
  padding-top: 0.55rem;
  color: var(--soft);
}
.step__title {
  font-size: var(--step-2);
  line-height: 1.05;
  margin-bottom: 0.6rem;
}
.step p {
  max-width: 44ch;
}
@media (min-width: 900px) {
  .step {
    grid-template-columns: 6rem minmax(0, 1fr) minmax(0, 1fr);
    align-items: baseline;
  }
  .step__num {
    grid-row: auto;
  }
  .step__title {
    margin: 0;
  }
}

/* ---------- the bin: one idea that nearly made it ---------- */

.bin {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  padding: clamp(3rem, 6vw, 5rem) var(--gutter) var(--section);
}
.bin__stage {
  display: grid;
  grid-template-columns: 1fr 2.4fr;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: center;
}
.bin__ball img,
.bin__sheet img {
  width: 100%;
  height: auto;
}
.bin__title {
  font-size: var(--step-2);
  max-width: 22ch;
}
.bin__line {
  display: block;
}
.bin__line + .bin__line {
  margin-top: 0.6em;
}

/* with motion the ball sits alone, then opens into the sheet as you scroll */
.motion .bin {
  min-height: 100svh;
  align-content: center;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.motion .bin__stage {
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
}
.motion .bin__stage {
  height: min(64svh, 46rem);
}
.motion .bin__ball,
.motion .bin__sheet {
  grid-area: 1 / 1;
  height: 100%;
  display: grid;
  place-items: center;
}
.motion .bin__ball img,
.motion .bin__sheet img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(64svh, 46rem);
}
.motion .bin__ball {
  width: min(48vw, 20rem);
}
.motion .bin__sheet {
  width: min(92vw, 60rem);
  opacity: 0;
}
.motion .bin__title {
  display: grid;
  text-align: center;
  justify-items: center;
  margin: 0 auto;
}
.motion .bin__line {
  grid-area: 1 / 1;
}
.motion .bin__line + .bin__line {
  margin-top: 0;
  opacity: 0;
}

/* ---------- tally: three bars that turn over ----------
   One bar per number, each a long rectangular block seen face on. With motion
   each starts on its blank upper face and turns a quarter toward you as it
   arrives, one after another; under the pointer (or a tap) it goes right round
   once more. --turn is the bar's angle in degrees; the script only moves that.
   Without motion they are simply three lines of big type between hairlines. */

.tally {
  padding: 0 var(--gutter) var(--section);
}
.tally__eyebrow {
  padding-bottom: 1rem;
  margin-bottom: clamp(2rem, 5vw, 4rem);
  border-bottom: 1px solid var(--rule);
  color: var(--soft);
}
.flips {
  display: grid;
  gap: clamp(0.75rem, 1.6vw, 1.5rem);
}
.flip {
  font-size: clamp(1.7rem, 0.2rem + 6.6vw, 8.5rem);
  --h: 1.5em;
}
.flip__bar {
  display: block;
}
.flip__face--front {
  display: block;
  padding: 0.22em 0 0.28em;
  line-height: 1;
  letter-spacing: -0.025em;
  white-space: nowrap;
  border-bottom: 1px solid var(--rule);
}
.flip__face:not(.flip__face--front) {
  display: none;
}
.motion .flip {
  perspective: 1800px;
}
.motion .flip__bar {
  position: relative;
  height: var(--h);
  transform-style: preserve-3d;
  /* set back by half its depth, so the face toward you is exactly the size it is drawn */
  transform: translateZ(calc(var(--h) / -2)) rotateX(calc(var(--turn, -90) * 1deg));
  transition: transform 1.25s var(--ease-in-out);
  cursor: default;
}
.motion .flip__face,
.motion .flip__face:not(.flip__face--front) {
  position: absolute;
  inset: 0;
  display: block;
  padding: 0 0.3em;
  line-height: calc(var(--h) - 2px);
  border: 1px solid var(--fg);
  background: var(--bg);
  backface-visibility: hidden;
}
.motion .flip__face--front {
  transform: translateZ(calc(var(--h) / 2));
}
/* the faces that are not the front are a shade off the page, so the block reads as a solid */
.motion .flip__face--top {
  transform: rotateX(90deg) translateZ(calc(var(--h) / 2));
  background: color-mix(in srgb, var(--fg) 5%, var(--bg));
}
.motion .flip__face--back {
  transform: rotateX(180deg) translateZ(calc(var(--h) / 2));
  background: color-mix(in srgb, var(--fg) 9%, var(--bg));
}
.motion .flip__face--bottom {
  transform: rotateX(-90deg) translateZ(calc(var(--h) / 2));
  background: color-mix(in srgb, var(--fg) 13%, var(--bg));
}
.flip__face--top .eyebrow {
  color: var(--soft);
}

/* prototype only: copy that waits on Stephen */
.tbd {
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
}
.tbd::after {
  content: "⚑";
  font-size: 0.25em;
  vertical-align: super;
  margin-left: 0.15em;
}

/* ---------- the names wall ---------- */

.names {
  padding: 0 var(--gutter) var(--section);
}
.names__eyebrow {
  padding-bottom: 1rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--rule);
  color: var(--soft);
}
.names__wall {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.35em;
  font-size: clamp(2.5rem, 1rem + 5.4vw, 7.25rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.names__wall li {
  /* names don't break on wider screens; phones need the room */
  transition: opacity var(--dur-ui) var(--ease-out);
}
/* a small moon between names */
@media (min-width: 760px) {
  .names__wall li {
    white-space: nowrap;
  }
}
.names__wall li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 0.16em;
  height: 0.16em;
  margin-left: 0.35em;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 0.24em;
}
@media (hover: hover) and (pointer: fine) {
  .names__wall:hover li {
    opacity: 0.22;
  }
  .names__wall li:hover {
    opacity: 1;
  }
}
/* a wall whose entries are longer than a name may break */
.names__wall--wrap li {
  white-space: normal;
}
/* a name that leads somewhere: a hairline under it, nothing louder */
.names__wall a {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 92% / 100% 0.02em no-repeat;
}
.names + .names {
  margin-top: calc(var(--section) * -0.35);
}

/* the side door to Portraits (unused now): a hairline under a phrase in chapter II */
.chapter__aside {
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 0.06em;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .chapter__aside:hover {
    animation: rule-redraw 0.9s var(--ease-in-out);
  }
}