/* The story page's readability pass, 2026-09-27.

   Sabby read v18 live and found it a wall of white text. The fix is a
   hierarchy the eye can follow while skimming, and every piece of it is
   borrowed from the homepage so the two pages read as one site:

     1. Everyday paragraphs step down to a softer grey, so the white and
        orange lines stand out against them. Before, everything was the same
        white and nothing led the eye.
     2. More room between lines. 1.4 is Koe's homepage setting and suits short
        blocks; a six-minute read wants more air.
     3. A faint line between the sections of the arc. (Labels were tried
        and taken out.)
     4. The squiggle from the homepage, under one word per chapter.
     5. The homepage's pull box, on the three lines a skimmer must not miss.
     6. Two etched drawings in the column, no captions (story-plates.js).

   Loaded only by story-test.html until Sabby signs it off. */

.story p { line-height: 1.65; color: rgba(232, 232, 232, 0.72); }
.story .breath,
.story .box { color: var(--head); }

/* ---- 3. the line between sections ----
   One per section of the arc. It started as a small orange label with this
   line after it ("My mum", "Who I am"); Sabby took the labels out on
   2026-09-27 and kept the line, so each section still reads as its own
   block. */
.story .chap {
  border: 0;
  height: 1px;
  background: rgba(232, 232, 232, 0.14);
  margin: 84px 0 64px;
}
/* A line right after a pivot doesn't need the full gap twice. */
.story .breath + .chap { margin-top: 40px; }

/* ---- 4. the squiggle, same drawing as the homepage's .sq ---- */
.story .sq { position: relative; display: inline-block; color: var(--head); }
.story .sq::after {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  bottom: -0.32em;
  height: 9px;
  background: var(--accent);
  -webkit-mask: no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 14' preserveAspectRatio='none'%3E%3Cpath d='M3%209.4%20C%2034%203.2,%2060%2012.4,%2092%207.2%20C%20124%202.1,%20152%2011.6,%20182%206.6%20C%20197%204.1,%20209%205.6,%20217%208.4' fill='none' stroke='%23fff' stroke-width='3.1' stroke-linecap='round'/%3E%3C/svg%3E");
  mask: no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 14' preserveAspectRatio='none'%3E%3Cpath d='M3%209.4%20C%2034%203.2,%2060%2012.4,%2092%207.2%20C%20124%202.1,%20152%2011.6,%20182%206.6%20C%20197%204.1,%20209%205.6,%20217%208.4' fill='none' stroke='%23fff' stroke-width='3.1' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---- 5. the box, same numbers as the homepage's .pull ---- */
.story .box {
  margin: 34px 0;
  padding: 18px 22px;
  background: rgba(var(--accent-rgb), .05);
  box-shadow: inset 3px 0 0 var(--accent);
  border: 1px solid rgba(var(--accent-rgb), .22);
  border-left: none;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.2px;
}

/* ---- 6. the drawings ----
   Centred in the column between paragraphs, no caption. They sat out in the
   margin first, and Sabby found that forced: nothing on the other side to
   balance them. */
.story .plate-in {
  width: 190px;
  height: 190px;
  margin: 40px auto 44px;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.story .plate-in.on { opacity: 1; }

@media (max-width: 767px) {
  .story .chap { margin: 60px 0 46px; }
  .story .plate-in { width: 150px; height: 150px; margin: 30px auto 34px; }
  .story .box { font-size: 18px; padding: 16px 18px; margin: 28px 0; }
}

/* ---- Real photos only, 2026-09-28 ----
   Sabby's call: the etched drawings are out, and the photos are his own, in
   colour, with the same glow under the cursor as the homepage. Sizes on
   desktop, centred: the award a little bigger than half the column, the blood
   tubes at half, the crown a touch smaller. On phones the award fills the
   column; the crown and the blood tubes sit at 70%, Sabby's call 2026-09-28
   after reading it on his phone: full width, the two tall photos took over the
   screen. */
.storypage .story .figure .shot { width: 50%; margin-inline: auto; }
.storypage .story .figure.award .shot { width: 65%; }
.storypage .story .figure.hair .shot { width: 42%; }
.storypage .story .figure figcaption { margin-inline: auto; }
/* The lead photo opens the story: the blood tubes' size, Sabby's call
   2026-09-28 (the first try, bigger than the rest, read as too big), with
   less room above it because it follows the header's rule, not a paragraph. */
.storypage .story .figure.lead:first-child { margin-top: 0; }
@media (max-width: 767px) {
  .storypage .story .figure .shot,
  .storypage .story .figure.award .shot { width: 100%; }
  .storypage .story .figure.hair .shot,
  .storypage .story .figure.blood .shot,
  .storypage .story .figure.lead .shot { width: 70%; }
}

/* ---- Photo frames: the tilted print, 2026-09-28 ----
   Sabby: the photos could use a design element around them. Three were tried
   (an offset teal outline, a dotted mat, this) and he picked the print,
   because these are his own photos and a print feels personal. An off-white
   border, a slight tilt that alternates photo to photo, and a soft shadow,
   like real photos laid on the page. The tilt has to beat pages.css's reveal,
   which resets transform to none, hence the .is-in in each rule. */
.storypage .story .figure .shot {
  box-sizing: border-box;
  padding: 10px 10px 34px;
  background: #EFEFEF;
  border: 0;
  border-radius: 3px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .7);
  overflow: visible;            /* the pin sits above the top edge */
}
.storypage .story .figure .shot::after { display: none; }

/* Moving, 2026-09-28: story-photos.js sways each print slowly in 3D and
   leans it toward the cursor, like the homepage's bust and dashboard, by
   writing --ry, --rx and --tx. The transform is built here so each print
   keeps its own tilt (--tilt) underneath the motion. The transform
   transition from pages.css's reveal is dropped once a photo is in, or every
   frame would restart a 1.2s transition and the motion would drag. */
.storypage .story .figure { --ry: 0deg; --rx: 0deg; --tx: 0px; --tilt: 0deg; }
.storypage .story .figure.lead  { --tilt: 1.2deg; }
.storypage .story .figure.hair  { --tilt: -1.6deg; }
.storypage .story .figure.blood { --tilt: 1.4deg; }
.storypage .story .figure.award { --tilt: -.9deg; }
.storypage .story .figure.is-in .shot {
  transform: perspective(1000px) translate3d(var(--tx), 0, 0) rotateY(var(--ry)) rotateX(var(--rx)) rotate(var(--tilt));
  transition: opacity .9s ease;
}

/* The pin, 2026-09-28, Sabby's idea: a pushpin at the top of each print,
   as if it's posted on a storyboard. Third drawing. The flat dot didn't read
   as a pin; the upright one looked like it was staring up. This is the
   classic office pushpin side on, leaning well over the way the pin emoji
   does, needle down and left into the print's top border, in the site's own
   teal (#0FA18A, shaded only a step either side). The box is placed so the
   needle tip lands about 8px inside the print. */
.storypage .story .figure .shot::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  z-index: 2;
  width: 36px;
  height: 36px;
  margin-left: -11px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%230B8A76'/%3E%3Cstop offset='.35' stop-color='%2322B39B'/%3E%3Cstop offset='.6' stop-color='%230FA18A'/%3E%3Cstop offset='1' stop-color='%230A7E6C'/%3E%3C/linearGradient%3E%3ClinearGradient id='n' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%238a9095'/%3E%3Cstop offset='.45' stop-color='%23f4f6f7'/%3E%3Cstop offset='1' stop-color='%236a6f73'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='rotate(42 24 24)'%3E%3Cpath d='M23.1 33 L24.9 33 L24.2 44 L23.8 44 Z' fill='url(%23n)'/%3E%3Cellipse cx='24' cy='32.2' rx='9' ry='3' fill='%230A7E6C'/%3E%3Cellipse cx='24' cy='31.4' rx='9' ry='2.8' fill='url(%23b)'/%3E%3Cpath d='M19.8 15 L28.2 15 Q26.6 22 27.2 31 L20.8 31 Q21.4 22 19.8 15 Z' fill='url(%23b)'/%3E%3Crect x='14' y='6' width='20' height='10' rx='3.2' fill='url(%23b)'/%3E%3Cellipse cx='24' cy='6.8' rx='10' ry='3.4' fill='%230FA18A'/%3E%3Cellipse cx='21' cy='6.2' rx='4' ry='1.1' fill='%23FFFFFF' opacity='.4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(3px 5px 2.5px rgba(0, 0, 0, .4));
}
@media (max-width: 767px) {
  .storypage .story .figure .shot::before { width: 30px; height: 30px; margin-left: -9px; top: -16px; }
}