/* The homepage on paper (DS2-3, docs/specs/ds2-3-the-homepage.md on main; Yuna first since HY,
   hy-homepage-yuna-first.md): this page's own layout, and nothing else. The colours, the type, the buttons, the top
   line, the footer and the fonts are design/paper.css's; what moves is design/motion.css's, marked in the page's
   markup. No inline style anywhere: every style is a class here.

   The page, in order: Yuna, on one screen, with her clips beside the headline; what she runs on, with Yuna in
   characters beside it; a door for each of the two other kinds of visitor; the two contracts, one line each. */

/* ---------- 1. Yuna, and where to start ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(24px,4vw,72px);align-items:center;padding-block:clamp(20px,3.4vw,48px) clamp(36px,5vw,72px)}
.hero .eyebrow{margin-bottom:clamp(16px,1.8vw,26px);color:var(--ink-2);--cps:12ms}   /* typed a little quicker than a typed line's usual */
.hero h1{font-size:clamp(42px,5.3vw,84px);white-space:nowrap}
.hero .lede{margin-top:clamp(20px,2.3vw,32px);max-width:33em;font-size:clamp(17px,1.4vw,20px);line-height:1.45;color:var(--ink-2)}
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:clamp(22px,2.4vw,34px)}
.hero .under{margin-top:18px;color:var(--ink-3)}
/* A picture beside the words: her clips on the first screen, Yuna in characters (landing/yuna-chars.js) on the
   second. Each has its caption, and Yuna in characters has the two readout rows. */
.pic{max-width:500px;width:100%;margin-inline:auto}
.pic .cap{display:flex;justify-content:space-between;gap:16px;margin-top:6px;color:var(--ink-3)}
.pic .rows{margin-top:12px}
/* Her clips (landing/figure.js): one large frame and two small ones, standing on the same line. The large one
   gives the rows their height, and the small ones fill theirs. */
.pic-clips{max-width:470px}
.clips{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:12px}
.clips .frame{min-height:0;border:1px solid var(--line)}
.clips .big{grid-row:1 / span 2;aspect-ratio:9/16}
.clips video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- 2. what she runs on: the two columns the first screen had ---------- */
.runs{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(24px,4vw,72px);align-items:center;border-top:1px solid var(--line);padding-block:clamp(36px,5vw,72px)}
.runs .who{color:var(--ink-3);--cps:12ms}
.runs h2{margin-top:clamp(14px,1.6vw,22px);font-size:clamp(34px,4.1vw,64px)}
.runs .lede{margin-top:clamp(18px,2vw,28px);max-width:33em}
.runs .door-fine{margin-top:16px}
.runs .door-ctas{margin-top:0;padding-top:22px}

/* ---------- 3. where to start, by who you are ---------- */
.aud{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
.door{display:flex;flex-direction:column;padding:clamp(28px,3.4vw,48px) clamp(0px,2.6vw,40px) clamp(30px,3.6vw,52px)}
.door:first-child{padding-left:0}
.door:last-child{padding-right:0}
.door + .door{border-left:1px solid var(--line)}
.door .who{color:var(--ink-3)}
.door h2{margin-top:14px;font-size:clamp(28px,2.7vw,40px);font-weight:400;letter-spacing:-.045em;line-height:1.04;text-wrap:balance}
.door p.txt{margin-top:14px;color:var(--ink-2);font-size:16px;max-width:30em}
.door .makers{margin-top:16px;color:var(--ink-3);font:400 12.5px/1.85 var(--mono)}
.door .makers span + span::before{content:" / ";color:var(--line);margin-inline:1px}
.door-fine{margin-top:14px;color:var(--ink-3)}
.door-ctas{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:auto;padding-top:24px}
.door-ctas a{font-weight:500;font-size:16px}

/* A moving picture can be stopped: a small line under it, "Pause animation" and "Play animation", as the page has
   always had for her clip. Its pointer area is taller than its letters, without moving the line it sits on. */
.motion{appearance:none;border:0;background:none;margin:-8px 0;padding:8px 0;font:inherit;color:var(--ink-3);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer}
.motion:hover{color:var(--ink)}
.pic .cap .motion{margin-left:10px}
/* YO: her name under her clips is a link to her own page, and longer. Where the caption has no room for it, the
   button and the clips' count on one line, the button takes a line of its own under her name. */
@media (max-width:1279px){
  .pic-clips .cap{align-items:flex-start}
  .pic-clips .cap .motion{display:block;margin:0 0 -8px;padding:2px 0 8px}
}

/* ---------- 4. the two contracts, one line each ---------- */
.contracts{border-top:1px solid var(--line);padding-block:6px clamp(36px,4.6vw,64px)}
.contract{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:14px 0;border-bottom:1px solid var(--line)}
.contract .nm{flex:0 0 72px;font-size:20px;font-weight:450;letter-spacing:-.03em}
.contract code{flex:1 1 auto;font:400 12.5px/1.4 var(--mono);overflow-wrap:anywhere}
.contract .short{display:none}
.c-note{margin-top:14px;color:var(--ink-3);font-size:14px}

/* ---------- this page's own motion ---------- */
/* A door's arrow leans when the door is pointed at (the arrow's own lean is design/motion.css's). */
@media (prefers-reduced-motion:no-preference){
  .door:hover .door-ctas .arrow{transform:translate(2px,-2px)}
}

/* ---------- narrower screens ---------- */
@media (max-width:1080px){
  .aud{grid-template-columns:1fr}
  .door,.door:first-child,.door:last-child{padding-inline:0}
  .door + .door{border-left:0;border-top:1px solid var(--line)}
  .door-ctas{padding-top:20px}
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:10px}
  .hero h1{font-size:clamp(34px,10.3vw,76px)}
  .ctas .btn{flex:1 1 150px;padding-inline:14px;white-space:nowrap}
  .pic{max-width:420px}
  .pic-clips{max-width:380px}
  .runs{grid-template-columns:1fr}
  .runs h2{font-size:clamp(30px,8.6vw,56px)}
  .contract .nm{flex-basis:64px}
  .contract .full{display:none}
  .contract .short{display:inline}
}