/* 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}
/* a set free for a while: one quiet link under its line, to where it prints */
.jp-free{margin-top:2px!important}

/* 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}

/* ---- Get to know Marlo Wren (the discover journey since 14 October 2026) ----
   Her pictures framed as on the rest of the site (rounded, a soft warm shadow, a mount of her paper),
   the mount turned a little, as on the book's plan Filipp approved. The pages stay a printed book in
   dark mode, so the frame keeps its light mount and warm shadow there too. Each picture is sized by
   its own shape (--ar, from the build): as tall as --fh of the screen allows, never wider than the phone. */
.jp{--frame-r:22px;--mount:linear-gradient(to bottom,#fef2ec,#ecdcd3);
  --frame-shadow:0 1px 2px rgba(74,48,38,.08),0 14px 28px -12px rgba(74,48,38,.30),0 38px 70px -30px rgba(74,48,38,.34)}
@media(max-width:600px){.jp{--frame-r:18px}}
.jp-hide{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.jp-frame{--fh:50svh;position:relative;isolation:isolate;margin:0;flex:none;
  width:min(80vw,calc(var(--fh) * var(--ar)),calc(600px * var(--ar)))}
.jp-frame::before{content:"";position:absolute;z-index:-1;inset:8% -5% -5% -5%;border-radius:calc(var(--frame-r) + 10px);
  background:var(--mount);transform:rotate(-2deg);box-shadow:0 10px 30px -14px rgba(74,48,38,.28)}
.jp-frame img,.jp-mat{display:block;width:100%;height:auto;border-radius:var(--frame-r);box-shadow:var(--frame-shadow);
  outline:1px solid rgba(255,255,255,.55);outline-offset:-1px}
/* a short silent reel framed like her pictures (Discover, 24 October 2026), and its quiet pause button */
.jp-frame video{display:block;width:100%;height:auto;aspect-ratio:var(--ar);border-radius:var(--frame-r);box-shadow:var(--frame-shadow);
  outline:1px solid rgba(255,255,255,.55);outline-offset:-1px;background:var(--paper-2,#f4f1ea)}
.jp-film-toggle{display:block;margin:6px auto 0;padding:4px 10px;font:inherit;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2);background:none;border:0;cursor:pointer}
.jp-film-toggle:hover,.jp-film-toggle:focus-visible{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
/* a drawing with a paper margin of its own is framed on the drawing, as a mat would; the file is whole */
.jp-mat{position:relative;overflow:hidden;aspect-ratio:var(--ar)}
.jp-mat img{position:absolute;max-width:none;border-radius:0;box-shadow:none;outline:0}
.jp-text{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:680px}
.jp-title{font-size:clamp(26px,3.2vw,40px);line-height:1.18;color:var(--ink);max-width:22ch;text-wrap:balance}
.jp-lead{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.jp-text .jp-line{font-size:clamp(16px,1.5vw,18px);color:var(--ink-2);max-width:46ch!important;text-wrap:pretty}
@media(min-width:900px){.jp-frame{--fh:54svh}}
.jp-framed,.jp-meet,.jp-close{gap:clamp(22px,4svh,44px)}

/* the cover: her eyes over the envelope, signed */
.jp-book-cover{gap:clamp(10px,2svh,22px)}
.jp-book-cover .jp-frame{--fh:46svh;margin:clamp(6px,1.4svh,14px) 0 clamp(12px,2.4svh,24px)}
.jp-book-cover .jp-sig{position:static;font-family:var(--script);font-size:clamp(52px,7vw,84px);line-height:1;color:var(--ink)}
.jp-caps{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);max-width:48ch!important;text-wrap:balance}

/* hello, over the card backs' moon: the mark in ink at 8%, as on the back of every card */
.jp-moon-bg{position:absolute;left:50%;top:50%;z-index:0;height:min(84%,128vw);width:auto;transform:translate(-50%,-50%);
  opacity:.08;pointer-events:none}
.jp-moon-bg ~ p{position:relative;z-index:1}
.jp-words .jp-line{font-size:clamp(17px,1.7vw,20px);color:var(--ink-2);max-width:32ch!important;margin-top:clamp(6px,1.4svh,16px)!important}

/* meet Marlo: four envelope takes laid down like instant photos */
/* the photos are placed in the row's own width (cqw), so they keep their places at every size */
.jp-photos{position:relative;container-type:inline-size;width:min(92vw,56svh,560px);aspect-ratio:1/1.02;flex:none}
.jp-instant{position:absolute;margin:0;left:calc(var(--x) * 1cqw);top:calc(var(--y) * 1cqw);width:42cqw;
  padding:2.4cqw 2.4cqw 9cqw;background:#fbfaf7;transform:rotate(var(--r));
  box-shadow:0 .4cqw 1cqw rgba(40,30,20,.16),0 2.6cqw 5.5cqw -1.6cqw rgba(40,30,20,.32)}
.jp-instant img{display:block;width:100%;height:auto}

/* a card beside her picture, as on the home page */
.jp-duo{position:relative;flex:none}
/* the picture gives the card room, so the card stays on a phone's screen */
.jp-duo .jp-frame{width:min(60vw,calc(var(--fh) * var(--ar)),calc(600px * var(--ar)))}
.jp-duo.is-left{transform:translateX(12%)}
.jp-duo.is-right{transform:translateX(-14%)}
.jp-duo-card{position:absolute;z-index:2;height:auto;box-shadow:0 2px 4px rgba(26,28,26,.10),0 10px 22px rgba(26,28,26,.20)}
.jp-duo.is-left .jp-duo-card{left:-30%;bottom:-5%;width:46%;transform:rotate(-6deg)}
.jp-duo.is-right .jp-duo-card{right:-36%;bottom:8%;width:66%;transform:rotate(5deg)}

/* the set pages: the cards and the button open where the set is, in a new tab */
a.jp-table{display:block;color:inherit}
a.jp-table:hover .jp-card{filter:brightness(1.02)}
.jp-set .cta{margin-top:0;justify-content:center}
/* the button takes a line of the screen, so the table gives it back */
.jp-has-button .jp-table{width:min(100%,1080px,calc((100vh - 380px) * var(--ar)));width:min(100%,1080px,calc((100svh - 380px) * var(--ar)))}
@media(max-width:600px){
  .jp-has-button .jp-table{width:min(100%,calc((100vh - 350px) * var(--par)));width:min(100%,calc((100svh - 350px) * var(--par)))}
}

/* when you colour: the four set colours in a row */
.jp-chips{display:flex;gap:clamp(10px,1.6vw,18px);justify-content:center}
.jp-chips .jp-chip{width:clamp(40px,6vw,70px);aspect-ratio:3/4;box-shadow:0 2px 8px rgba(40,30,20,.16)}
.jp-opener .jp-line{font-size:clamp(17px,1.7vw,20px);color:var(--ink-2);max-width:34ch!important}

/* start anywhere you like */
.jp-menu{list-style:none;margin:0;padding:0;width:min(100%,560px);text-align:left}
.jp-menu li{border-top:1px solid rgba(26,28,26,.18)}
.jp-menu li:last-child{border-bottom:1px solid rgba(26,28,26,.18)}
.jp-menu a,.jp-menu li>span{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 2px;color:var(--ink);text-decoration:none}
.jp-menu a:hover .jp-m-what{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:5px}
.jp-m-what{font-family:var(--display);font-size:clamp(22px,2.4vw,28px);line-height:1.2}
.jp-m-where{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);white-space:nowrap}

/* the close: posting a card, the brand phrase, her signature */
.jp-close .jp-frame{--fh:40svh}
.jp-close .jp-text{gap:8px}
.jp-close .jp-sig{font-family:var(--script);font-size:clamp(44px,5.4vw,64px);line-height:1;color:var(--ink)}
.jp-fine{font-size:12.5px;line-height:1.5;color:var(--ink-2);max-width:44ch!important}
/* a short phone: the pictures give a little room to the words, so every page still fits one screen */
@media(max-height:620px){
  .jp-framed,.jp-meet,.jp-close{gap:16px}
  .jp-frame{--fh:44svh}
  .jp-close .jp-frame{--fh:34svh}
}
@media(max-width:600px){
  .jp-text .jp-line{font-size:15.5px}
  .jp-m-where{font-size:10px;letter-spacing:.1em}
}

/* 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}
}