/* A little illustrated magazine: paper, reading type, and room for a story. */
:root { --reading-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --paper:#fffcf6; --ink:#25352f; --muted:#65716a; --line:#e2e3d8; background:var(--paper); }
.lab-nav { border-bottom-color:#dadfd4; }
.brand-mark { transform:rotate(-6deg); border-radius:9px; }
.lab-hero .eyebrow, .breadcrumbs { font-size:12px; }
.article .colorful-header { margin-bottom:0; border-radius:10px 36px 10px 36px; }
.article-hero .lead { font:20px/1.6 var(--reading-font); color:#43554d; }
.article-hero .jump-demo { font-size:12px; font-weight:600; margin-top:19px; }
.article-hero .meta { font-size:11px; }
.story-opening { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(240px,1fr); gap:65px; align-items:center; margin:65px 0 32px; }
.story-copy, .story-prose { font:400 20px/1.75 var(--reading-font); color:#34453e; }
.story-copy p { margin:0 0 22px; }
.story-copy p:last-child { margin-bottom:0; }
.story-copy a, .story-prose a { color:var(--accent); text-decoration-color:var(--accent-line); text-decoration-thickness:1px; }
.story-copy a:hover, .story-prose a:hover { text-decoration-color:var(--accent); }
.scene-note { margin:0; position:relative; padding:28px 12px 20px; text-align:center; }
.note-label { display:block; font:700 10px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; text-transform:uppercase; letter-spacing:.12em; color:var(--accent); margin-bottom:22px; }
.scene-note figcaption { font:400 14px/1.6 var(--reading-font); color:#647168; margin-top:24px; }
.pencil-note { display:block; font:italic 22px/1.3 var(--reading-font); color:#a46630; transform:rotate(-5deg); margin:23px 0 0; }
.pencil-note>span { display:inline-block; font:32px var(--reading-font); transform:rotate(10deg); }
.receipt { position:relative; width:220px; padding:27px 26px 31px; background:#fff; margin:auto; transform:rotate(5deg); box-shadow:4px 9px 0 #e8eadf,0 16px 30px #33534114; }
.receipt::before { content:""; position:absolute; top:-10px; left:67px; width:84px; height:25px; background:#c5dccc99; transform:rotate(-8deg); }
.receipt::after { content:""; position:absolute; bottom:-6px; left:0; width:100%; height:12px; background:linear-gradient(135deg,#fff 5px,transparent 0) 0 0/12px 12px,linear-gradient(225deg,#fff 5px,transparent 0) 0 0/12px 12px; }
.receipt-title { font:12px ui-monospace,monospace; color:#596b5d; letter-spacing:.12em; }
.receipt-picks { display:flex; flex-direction:column; gap:4px; margin:21px 0; }
.receipt-picks>* { font:700 33px/1.15 ui-monospace,monospace; color:#718578; }
.receipt-picks>b { width:64px; margin:auto; color:#247c61; background:#e3f5ad; border-radius:50% 45% 50% 40%; transform:rotate(-6deg); }
.receipt-picks>b:nth-child(3) { transform:rotate(8deg); }
.receipt-rule { display:block; border-top:1px dashed #b3bfb4; margin-bottom:15px; }
.receipt-footer { font:11px ui-monospace,monospace; color:#53675b; }
.raffle-scene { background:radial-gradient(ellipse,#ffe9c9 0,transparent 68%); }
.picnic-tickets { display:flex; flex-direction:column; align-items:center; gap:9px; padding:0 12px; }
.picnic-ticket { width:210px; position:relative; display:grid; grid-template-columns:1fr 34px; padding:15px 16px; background:#ffedc9; border:1px solid #d9ab74; text-align:left; transform:rotate(-7deg); box-shadow:4px 5px 0 #e7c89750; border-radius:4px; }
.picnic-ticket::before,.picnic-ticket::after { content:""; position:absolute; top:calc(50% - 8px); width:14px; height:16px; border-radius:50%; background:var(--paper); }
.picnic-ticket::before { left:-8px; }.picnic-ticket::after { right:-8px; }
.picnic-ticket small { font:8px ui-monospace,monospace; letter-spacing:.13em; color:#93603a; }
.picnic-ticket b { grid-column:1; font:700 29px var(--reading-font); color:#8f4b29; margin-top:3px; }
.picnic-ticket em { grid-column:2; grid-row:1 / 3; writing-mode:vertical-rl; border-left:1px dashed #ce9b67; font:12px ui-monospace,monospace; text-align:center; padding-left:12px; color:#926d45; }
.picnic-ticket:nth-child(2) { transform:translateX(16px) rotate(5deg); background:#ffe0ca; }
.picnic-ticket:nth-child(3) { transform:translateX(-6px) rotate(-3deg); background:#f4edcf; }
.coin-thought { background:#f0e9fb; border-radius:50% 44% 46% 39%; padding:36px 16px 32px; position:relative; }
.story-coins { display:flex; justify-content:center; gap:5px; transform:rotate(-7deg); }
.story-coins span { display:grid; place-items:center; width:47px; height:47px; background:#ffe29b; border:4px double #cfa755; border-radius:50%; color:#8a6526; font:700 23px var(--reading-font); box-shadow:1px 4px 0 #cda84f; }
.coin-thought p { font:italic 33px/1.15 var(--reading-font); color:#665183; margin:30px 0; }
.thought-coin { display:grid; place-items:center; width:64px; height:64px; border:2px dashed #b09fc4; border-radius:50%; margin:auto; font:italic 38px var(--reading-font); color:#957cb0; }
.archive-card { margin:auto; position:relative; padding:32px 22px 24px; max-width:290px; background:#f0e8d8; border:1px solid #d0c4aa; box-shadow:6px 7px 0 #e5e4d4; transform:rotate(-4deg); text-align:left; background-image:repeating-linear-gradient(0deg,transparent,transparent 24px,#cfbda91d 25px); }
.library-stamp { display:block; width:max-content; border:3px double #427775; color:#427775; padding:5px 10px; font:700 20px ui-monospace,monospace; transform:rotate(10deg); margin-left:auto; }
.archive-digits { display:block; font:16px/2 ui-monospace,monospace; color:#64776d; letter-spacing:.08em; margin:22px 0; }
.archive-card>strong { display:block; color:#355c60; font:700 31px/1.2 var(--reading-font); margin:20px 0; }
.archive-foot { font:11px/1.6 ui-monospace,monospace; color:#6f7f75; }
.story-bridge { display:flex; align-items:center; gap:20px; max-width:670px; margin:35px 0 32px; }
.story-bridge>span { color:var(--accent); font:50px var(--reading-font); transform:rotate(-8deg); }
.story-bridge p { font:400 19px/1.6 var(--reading-font); color:#5b6e60; margin:0; }
.demo { position:relative; border-radius:8px 26px 8px 26px; border-width:1px; box-shadow:6px 7px 0 var(--soft); padding:38px; }
.demo-kicker { width:max-content; max-width:100%; padding:6px 10px; background:#fff9; border-radius:3px; transform:rotate(-2deg); font-size:10px; margin-bottom:21px; }
.demo .demo-heading h2 { font-size:36px; }
.demo-heading p { font-size:16px; max-width:640px; }
.demo .primary { border-radius:8px; box-shadow:0 3px 0 #18243524; }
.demo .secondary, .demo select { border-radius:8px; }
.sample-panel, .sequence-choice { border-radius:12px; }
.demo .demo-footnote { font-size:11px; color:#657369; }
.story-prose { max-width:650px; margin:64px auto 50px; }
.story-prose .story-section { margin-bottom:48px; }
.story-prose .story-section h2 { color:#293c32; font:750 32px/1.18 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing:-.9px; margin-bottom:24px; }
.story-prose strong { color:#283e31; }
.story-prose p { margin-bottom:23px; }
.story-prose .deep-dive { font:15px/1.75 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; margin:28px 0; padding:17px 0; }
.story-prose .deep-dive p { margin:16px 0 3px; }
.story-pullquote { position:relative; isolation:isolate; overflow:hidden; background:#174e41; border-radius:5px 35px 5px 35px; padding:43px 48px; margin:45px -70px 55px; }
.story-pullquote p { position:relative; font:700 36px/1.2 var(--reading-font); color:#f7f6e4; margin:0; }
.story-pullquote em { color:#e1efa6; font-weight:400; }
.quote-decoration { position:absolute; font:850 265px/.9 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:#4a7f648a; right:20px; bottom:-18px; transform:rotate(12deg); z-index:-1; }
.book-quote { background:#2d5364; }.book-quote .quote-decoration { color:#6c9aa35e; font-size:200px; right:-15px; }.book-quote em { color:#ffe1aa; }
.prize-lineup { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:center; margin:45px -70px 55px; background:#ffeacb; padding:35px; border-radius:25px 5px 25px 5px; border:1px dashed #ce9f63; }
.prize-lineup .note-label { color:#91612a; margin-bottom:13px; }
.prize-lineup h2 { font:700 30px/1.2 var(--reading-font); color:#7b4825; margin:0; }
.prize-lineup ol { list-style:none; margin:0; padding:0; }
.prize-lineup li { display:flex; gap:16px; align-items:center; padding:12px 0; margin:0; border-bottom:1px solid #d9b7867d; }
.prize-lineup li:last-child { border-bottom:0; }
.prize-lineup li>span { font:italic 31px var(--reading-font); color:#a47037; }
.prize-lineup strong,.prize-lineup small { display:block; font:600 15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.prize-lineup small { font-size:12px; font-weight:400; color:#785c39; }
.odds-poster { display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:center; background:#eee5f9; border-radius:5px 30px 5px 30px; margin:45px -70px 55px; padding:35px; text-align:center; }
.poster-coins { display:block; font:700 24px ui-monospace,monospace; letter-spacing:.02em; color:#7c5ba5; white-space:nowrap; }
.odds-poster strong { display:block; font:700 39px/1.3 var(--reading-font); color:#553b79; margin:12px 0 4px; }
.odds-poster small { display:block; font:12px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:#765f92; }
.poster-equals { font:italic 42px var(--reading-font); color:#aa8dc4; }
.odds-poster figcaption { grid-column:1 / -1; border-top:1px solid #d5c5e5; padding-top:15px; font:400 14px/1.5 var(--reading-font); color:#70598a; }
.pair-path { margin:30px 0; border-block:1px solid #c4d6d2; padding:8px 0; }
.pair-path>div { display:flex; align-items:center; gap:22px; padding:17px 0; }.pair-path>div+div { border-top:1px dashed #cfdbd5; }
.path-pair { display:grid; place-items:center; background:#e4eeea; min-width:70px; height:65px; font:700 34px ui-monospace,monospace; color:#367774; transform:rotate(-4deg); border-radius:4px; }
.pair-path>div+div .path-pair { color:#a27543; background:#f5e7d5; transform:rotate(4deg); }
.pair-path .path-arrow { color:#a0b7a9; font-size:30px; }
.pair-path strong,.pair-path small { display:block; font:600 17px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.pair-path small { font-size:13px; font-weight:400; color:#6b7c71; }
.story-prose .tool-link { border:0; border-top:3px solid var(--accent-line); background:none; border-radius:0; padding:27px 0 0; }
.story-prose .tool-link h2 { font:700 28px/1.25 var(--reading-font); margin:0 0 10px; }
.story-prose .tool-link p { font:17px/1.6 var(--reading-font); }
.story-prose .tool-link a { display:inline-flex; align-items:center; gap:25px; color:white; background:var(--accent); border-radius:7px; padding:13px 17px; font:600 14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; text-decoration:none; }
.story-prose .sources { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.related { margin-top:60px; padding-top:40px; border-top:1px solid #d9dfd3; }
.related h2 { font:700 34px/1.2 var(--reading-font); }
.related-card { border-radius:5px 20px 5px 20px; background:#fffefa; }
.related-card>span { font:700 21px/1.25 var(--reading-font); }
.hub-header { border-radius:8px 38px 8px 38px; }
.hub-header .lead { font-family:var(--reading-font); font-size:22px; line-height:1.6; }
.lab-grid { gap:34px; }.story { border-radius:6px 27px 6px 27px; background:#fffefa; }.story-text { padding:29px 30px 32px; }.story-text>p:not(.eyebrow) { font:18px/1.6 var(--reading-font); color:#5e6b60; }.story h2 { font-size:29px; letter-spacing:-.7px; }.story .read { color:#41654e; }.story-art { height:200px; }.story-art span { box-shadow:4px 5px 0 #3259440c; }.lab-note h2 { font:700 28px/1.3 var(--reading-font); }.lab-note p { font:19px/1.7 var(--reading-font); }
@media(max-width:900px) {
  .story-opening { gap:35px; grid-template-columns:minmax(0,1.4fr) minmax(210px,1fr); margin-top:45px; }
  .story-copy,.story-prose { font-size:19px; }
  .scene-note { padding-inline:0; }.receipt { width:190px; }.picnic-ticket { width:180px; }.story-coins span { width:39px;height:39px;font-size:19px; }.coin-thought p { font-size:29px; }
  .story-prose { max-width:600px; }.story-pullquote,.prize-lineup,.odds-poster { margin-left:0;margin-right:0; }.story-pullquote { padding:35px; }.story-pullquote p { font-size:32px; }.prize-lineup { padding:26px;gap:20px; }.prize-lineup h2 { font-size:25px; }
  .hub-header .lead { font-size:20px; }
}
@media(max-width:600px) {
  .article .colorful-header { border-radius:7px 26px 7px 26px; }
  .article-hero .lead { font-size:18px;line-height:1.6; }.article-hero .jump-demo { font-size:12px; }
  .story-opening { display:flex;flex-direction:column;gap:5px;margin:38px 0 14px; }
  .story-copy,.story-prose { font-size:19px;line-height:1.75; }.story-copy p { margin-bottom:20px; }
  .scene-note { width:100%;padding:24px 12px 16px; }.note-label { font-size:9px;margin-bottom:20px; }.receipt { width:210px; }.receipt-picks { flex-direction:row;gap:6px;margin:23px -12px; }.receipt-picks>* { font-size:29px; }.receipt-picks>b { width:34px;margin:0; }.receipt-footer { font-size:10px; }.pencil-note { font-size:21px; }.scene-note figcaption { margin-top:20px; }
  .picnic-tickets { gap:8px; }.picnic-ticket { width:210px; }.coin-thought { max-width:290px;margin:auto;padding:26px 16px; }.story-coins span { width:46px;height:46px;font-size:23px; }.coin-thought p { margin:25px 0;font-size:32px; }.archive-card { max-width:255px; }
  .story-bridge { margin:21px 0 25px;gap:13px;align-items:flex-start; }.story-bridge>span { font-size:38px;line-height:1.2; }.story-bridge p { font-size:18px; }
  .demo { padding:25px 18px;box-shadow:4px 5px 0 var(--soft); }.demo-kicker { font-size:9px; }.demo .demo-heading h2 { font-size:28px; }.demo-heading p { font-size:15px; }
  .story-prose { margin-top:43px; }.story-prose .story-section { margin-bottom:35px; }.story-prose .story-section h2 { font-size:28px;line-height:1.2;margin-bottom:20px; }.story-prose p { margin-bottom:20px; }
  .story-pullquote { padding:30px 23px;margin-block:35px 42px; }.story-pullquote p { font-size:28px; }.quote-decoration { right:3px;font-size:220px; }.book-quote .quote-decoration { font-size:160px; }
  .prize-lineup { grid-template-columns:1fr;padding:25px;gap:15px;margin-block:35px 42px; }.prize-lineup h2 { font-size:28px; }.prize-lineup li { padding:13px 0; }
  .odds-poster { padding:27px 15px;gap:14px 8px;margin-block:35px 42px; }.poster-coins { font-size:16px;letter-spacing:-.03em; }.odds-poster strong { font-size:28px; }.odds-poster small { font-size:10px; }.poster-equals { font-size:25px; }.odds-poster figcaption { font-size:13px; }
  .pair-path>div { gap:12px; }.path-pair { min-width:54px;height:54px;font-size:28px; }.pair-path .path-arrow { font-size:20px; }.pair-path strong { font-size:15px; }.pair-path small { font-size:11px; }
  .related h2 { font-size:30px; }.related-card>span { font-size:20px; }.hub-header .lead { font-size:19px; }.story-text { padding:24px; }.story h2 { font-size:27px; }.lab-grid { gap:25px; }
}