/* Discover Marlo Wren (/discover/): the Marlo Wren book as pages to scroll through, one at a time
   (Filipp, 11 October 2026). Each page fills the screen and the scroll stops on every page; its
   ground runs edge to edge, as the book's does: the slow fade on a colour page (its soft tone at the
   top, deepening to its partner at the bottom), flat behind a picture of Marlo. The pages are a
   printed book, so they keep their light grounds and dark ink in dark mode too; the header and
   footer around them follow the theme. The page is written by tools/build-discover.py from
   tools/discover.json. */

html.journey{scroll-snap-type:y mandatory;--head-h:96px}
@media (prefers-reduced-motion:no-preference){html.journey{scroll-behavior:smooth}}
.journey .site-head{scroll-snap-align:start}
.journey .site-foot{scroll-snap-align:end}
main.jp-pages{padding:0}

.jp{--ink:#1a1c1a;--ink-2:#4a4f4b;--paper:#faf9f6;--accent:#4c6353;--rule:#ddd9d2;color-scheme:light;
  position:relative;box-sizing:border-box;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,3.6svh,40px);
  padding:clamp(28px,6svh,72px) 16px;background:var(--g,#faf9f6);color:var(--ink);text-align:center;
  scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden}
.jp h2{font-size:clamp(30px,4vw,46px);color:var(--ink)}
.jp p{margin:0;max-width:none}
.jp-head{display:flex;flex-direction:column;align-items:center}
.jp-sub{margin-top:10px!important;max-width:44ch!important;font-size:clamp(15px,1.4vw,17px);line-height:1.55;
  color:var(--ink-2);text-wrap:balance}
.jp-card{display:block;box-shadow:var(--card-shadow-grid);border-radius:0}

/* the cover shares the first screen with the header, so it is the screen less the header's height
   (journey.js measures it; 96 px is a fair guess without it) and the header carries its snap */
.jp-cover{min-height:calc(100vh - var(--head-h));min-height:calc(100svh - var(--head-h));scroll-snap-align:none;
  padding-bottom:clamp(64px,12svh,120px)}
.jp-eyebrow{font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-2);line-height:1.4}
.jp-moon{display:block;width:auto;height:min(54svh,74vw);max-height:620px}
/* The signature's base sits on the crescent's base (Filipp, 11 October 2026): the moon's lowest edge
   is 27.8% up from the bottom of the mark (her heels hang below it), and the script face's baseline
   is .355em above the bottom of its own line, so the line's bottom goes that far under the moon. */
.jp-mark{position:relative;align-self:stretch;display:flex;justify-content:center}
.jp-cover .jp-sig{position:absolute;right:clamp(6px,calc(7vw - 16px),80px);bottom:calc(27.8% - .355em);
  font-family:var(--script);font-size:clamp(44px,6vw,76px);line-height:1;color:var(--ink)}
.jp-begin{position:absolute;left:50%;bottom:clamp(16px,3svh,30px);transform:translateX(-50%);
  font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--ink);
  padding:12px 16px;border-bottom:1px solid transparent}
.jp-begin:hover{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:5px}
.jp a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:600px){
  .jp-mark{flex-direction:column;align-items:center}
  .jp-cover .jp-sig{position:static;margin-top:10px}
  .jp-moon{height:min(46svh,72vw)}
}

/* the book's words, one thought to a page, in the display face */
.jp-say{font-family:var(--display);font-weight:400;font-size:clamp(32px,5.4vw,60px);line-height:1.22;
  max-width:17ch!important;text-wrap:balance;color:var(--ink)}
.jp-say.is-xl{font-size:clamp(42px,7.4vw,84px);max-width:12ch!important}
.jp-say.is-xxl{font-size:clamp(56px,10vw,116px);line-height:1}
.jp-say.is-italic{font-style:italic}
.jp-say.is-small{font-size:clamp(24px,3vw,36px);max-width:24ch!important}
.jp-words .jp-say + .jp-say{margin-top:clamp(4px,1svh,14px)}

/* a picture of Marlo fills the screen's height on a wide screen and its width on a phone, whole,
   on its own paper */
.jp-picture{padding:0}
.jp-picture img{display:block;width:100%;height:100vh;height:100svh;object-fit:contain}

/* a set: three of its cards laid on the table, a little sprawled, as on the book's page. The table
   is the arrangement's own shape (--ar, from the build) and as large as the screen's room allows;
   each card's place, size and turn are percentages of it, so the cards keep the book's places at
   every width. Their shadows grow with the table. */
.jp-table{position:relative;container-type:inline-size;aspect-ratio:var(--ar);
  width:min(100%,1080px,calc((100vh - 300px) * var(--ar)));width:min(100%,1080px,calc((100svh - 300px) * var(--ar)))}
.jp-table .jp-card{position:absolute;left:var(--l);top:var(--t);width:var(--w);height:auto;transform:rotate(var(--r));
  box-shadow:0 2px 4px rgba(26,28,26,.10),0 8px 18px rgba(26,28,26,.14);
  box-shadow:0 .5cqw 1cqw rgba(26,28,26,.10),0 2cqw 4.5cqw rgba(26,28,26,.14)}
/* on a phone the same three cards are gathered closer (the build's phone places), so they can be larger */
@media(max-width:600px){
  .jp-set{gap:20px}
  .jp-table{aspect-ratio:var(--par);width:min(100%,calc((100vh - 280px) * var(--par)));width:min(100%,calc((100svh - 280px) * var(--par)))}
  .jp-table .jp-card{left:var(--pl);top:var(--pt);width:var(--pw);transform:rotate(var(--pr))}
}

/* an upright tablet: the height to spare goes to the cards, which stack or wrap as on a phone */
@media(min-width:601px) and (orientation:portrait){
  /* the cover stacks as on a phone: beside the mark, the signature would crowd her heels */
  .jp-mark{flex-direction:column;align-items:center}
  .jp-cover .jp-sig{position:static;margin-top:14px}
  .jp-moon{height:min(46svh,62vw)}
  .jp-pair .is-front{height:min(36svh,44vw,520px)}
  .jp-pair .is-back{height:min(26svh,32vw,368px)}
}

/* "Turn it over": the back of a card, large, with the book's line under it */
.jp-back .jp-card{width:min(640px,88vw,95svh);height:auto}

/* the guide: meet Marlo, her colours, our letters, our cards */
.jp-guide{gap:clamp(18px,3.4svh,40px)}
.jp-sheet{display:block;width:auto;height:auto;max-width:min(1000px,100%);max-height:44svh;border-radius:2px}
.jp-more{font-size:clamp(14px,1.3vw,16px);line-height:1.6;max-width:62ch!important;text-wrap:pretty;color:var(--ink)}

/* a row of --n swatches; each row is as wide as its swatches, so a short row's swatches match a full one's */
.jp-swatches{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));
  gap:clamp(10px,1.6vw,22px);width:calc(min(860px,100%,96svh) * var(--n,5) / 5)}
.jp-swatches li{display:flex;flex-direction:column;align-items:center;text-align:center}
.jp-chip{display:block;width:100%;aspect-ratio:120/150;box-shadow:inset 0 0 0 1px rgba(26,28,26,.07)}
.jp-swatches b{margin-top:10px;font-weight:600;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase}
.jp-swatches i{font-style:normal;font-size:13px;line-height:1.35;color:var(--ink-2);margin-top:2px}
@media(max-width:600px){
  .jp-swatches b{font-size:10px;letter-spacing:.08em;margin-top:7px}
  .jp-swatches i{font-size:11px}
}

.jp-letters{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:720px}
.jp-l-display{font-family:var(--display);font-size:clamp(34px,5.4vw,60px);letter-spacing:.11em;text-indent:.11em;
  text-transform:uppercase;line-height:1}
.jp-l-body{margin-top:clamp(22px,4svh,40px)!important;font-size:clamp(18px,2.1vw,25px);line-height:1.45;
  max-width:34ch!important;text-wrap:balance}
.jp-l-script{margin-top:clamp(18px,3svh,34px)!important;font-family:var(--script);font-size:clamp(64px,9vw,110px);line-height:1.05}
.jp-note{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);line-height:1.5;
  max-width:38ch!important;text-wrap:balance}

.jp-pair{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(16px,3vw,44px)}
.jp-pair .is-front{height:min(48svh,36vw,520px);width:auto}
.jp-pair .is-back{height:min(34svh,26vw,368px);width:auto}
@media(max-width:600px){
  .jp-pair{gap:12px}
  .jp-pair .is-front{height:min(27svh,52vw)}
  .jp-pair .is-back{height:auto;width:min(86vw,40svh)}
}
/* a short phone: the guide pages give their spare padding to the words and pictures */
@media(max-width:600px) and (max-height:700px){.jp-guide{gap:14px;padding-top:22px;padding-bottom:22px}}

/* the last pages: your turn, and the back cover */
.jp-line{font-size:clamp(17px,1.8vw,21px);line-height:1.5;max-width:34ch!important;text-wrap:balance;color:var(--ink)}
.jp-turn .cta{display:flex;justify-content:center;margin-top:6px}
.jp-ways{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px}
.jp-logo{display:block;width:min(300px,32svh,62vw);height:auto}
.jp-who .jp-line{font-size:clamp(15px,1.5vw,18px);max-width:36ch!important}
.jp-mail{font-size:14px;letter-spacing:.04em}
.jp-mail a{color:var(--ink);text-underline-offset:4px;text-decoration-color:var(--accent)}
.jp-end .jp-moon{height:min(56svh,74vw);max-height:620px}

/* how far through the book: a hairline in the one green along the top of the screen */
.jp-progress{position:fixed;left:0;right:0;top:0;height:2px;z-index:10;pointer-events:none}
.jp-progress span{display:block;height:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}

@media print{
  html.journey{scroll-snap-type:none}
  .jp{min-height:0;break-inside:avoid}
  .jp-progress{display:none}
}