@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');

:root{
  --paper:#ffffff;
  --ink:#09528e;
  --ink-dark:#09528e;
  --line:#c5dce8;
  --muted:#4d8cac;
  --coral:#c74738;
  --serif:'Patrick Hand','Chalkboard SE','Comic Sans MS',cursive;
  --sans:'Patrick Hand','Chalkboard SE',cursive;
}

body{font-family:var(--sans);font-size:17px;letter-spacing:-.022em;line-height:1.7}
h1,h2,h3{font-family:var(--serif);letter-spacing:-.018em!important;line-height:1.04}
h1 em,h2 em{font-style:normal}
h1{font-size:clamp(67px,7.5vw,121px);line-height:.94}
.hero h1{margin-bottom:34px}
.hero-lead{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.65vw,37px);line-height:1.22}
.hero-text{font-size:17px}
.wordmark{font-family:var(--serif);font-size:27px;line-height:.87;letter-spacing:-.02em}
.mark-tail{font-family:var(--sans);font-size:13px;letter-spacing:.02em;text-transform:none;margin-top:9px}
.site-header nav{font-family:var(--serif);font-size:19px}
.site-header nav .nav-read{border:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='7' viewBox='0 0 110 7'%3E%3Cpath d='M1 5 C25 3 37 6 59 4 S91 3 109 4' fill='none' stroke='%2309528e' stroke-width='1.45' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:repeat-x;background-position:left bottom;padding-bottom:6px}
.site-header nav a:not(.nav-read):hover{border-color:transparent;color:var(--coral)}
.eyebrow,.section-label,.hero-note,.resource-no,.contrib-no,.folio-bottom,.reader-status{
  font-family:var(--serif);font-size:18px;letter-spacing:.015em;text-transform:none;font-weight:400
}
.eyebrow{margin-bottom:17px;color:var(--coral)}
.section-label{font-size:19px;gap:13px;transform:rotate(-1deg);transform-origin:left center}
.section-label span{font-size:17px;letter-spacing:0;color:var(--ink)}
.hero-note{font-family:var(--sans);font-size:14px;line-height:1.5;color:var(--muted)}
.hero-index{font-family:var(--serif);font-size:16px;letter-spacing:0}
.hand-note{font-family:var(--serif);font-size:27px}

.button{
  position:relative;isolation:isolate;border:0;border-radius:0;background:transparent;
  font-family:var(--serif);font-size:22px;font-weight:400;line-height:1.1;
  padding:14px 24px 13px;min-height:56px;transform:rotate(-.6deg);
  color:var(--ink);box-shadow:none
}
.button::before{
  content:"";position:absolute;inset:0;z-index:-1;
  border:2px solid currentColor;
  border-radius:15px 22px 13px 19px / 14px 17px 15px 12px;
  transform:rotate(.9deg) skewX(-.5deg);
  pointer-events:none
}
.button:hover{background:transparent;color:var(--coral);transform:translateY(-2px) rotate(.4deg)}
.button:hover::before{transform:rotate(-.5deg) skewX(.3deg)}
.button span[aria-hidden="true"],.book-hint span[aria-hidden="true"],.nav-read span[aria-hidden="true"]{
  font-size:0;width:23px;height:21px;display:inline-block;vertical-align:middle;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='23' viewBox='0 0 26 23'%3E%3Cpath d='M3 19C10 12 16 8 23 4M13 4c3 0 7-.3 10 0-.6 4-.7 7-1.3 10' fill='none' stroke='%2309528e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.button:hover span[aria-hidden="true"]{filter:sepia(1) saturate(2) hue-rotate(300deg)}
.text-link,.book-caption a,.reader-links a,.license-main a,.footer-bottom a{
  border:0;text-decoration:none;font-family:var(--serif);font-weight:400;font-size:20px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='7' viewBox='0 0 110 7'%3E%3Cpath d='M1 5 C25 3 37 6 59 4 S91 3 109 4' fill='none' stroke='%2309528e' stroke-width='1.45' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-position:left bottom;padding-bottom:6px;
}
.text-link:hover,.book-caption a:hover,.reader-links a:hover,.license-main a:hover{color:var(--coral);background-image:none}
.text-link span{font-family:var(--serif)}

.story-intro h2,.section-heading h2,.book-heading h2,.star-copy h2,.license-main h2,.final-inner h2{letter-spacing:-.018em!important}
.story-intro h2{font-size:clamp(50px,5.1vw,80px)}
.intro-end{font-family:var(--serif);font-size:clamp(29px,3vw,41px);line-height:1.18}
.section-heading h2{font-size:clamp(52px,5.65vw,87px)}
.book-heading h2{font-size:clamp(60px,6vw,88px)}
.star-copy h2{font-size:clamp(63px,6.4vw,94px)}
.license-main h2{font-size:clamp(58px,5.8vw,86px)}
.final-inner h2{font-size:clamp(68px,7vw,105px)}
.resource-info strong,.contribute-grid h3,.footer-heading{font-family:var(--serif)}
.resource-info strong{font-size:35px}
.resource-info small,.contribute-grid p{font-size:16px}
.resource-no,.contrib-no{font-size:17px;color:var(--coral)}
.resource-arrow,.mini-arrow{font-size:0;width:25px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='23' viewBox='0 0 26 23'%3E%3Cpath d='M3 19C10 12 16 8 23 4M13 4c3 0 7-.3 10 0-.6 4-.7 7-1.3 10' fill='none' stroke='%2309528e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.resource-list>a:hover .resource-arrow,.contribute-grid>a:hover .mini-arrow{transform:rotate(8deg)}
.host p{font-family:var(--serif);font-size:18px;color:var(--coral)}
.host span{font-family:var(--serif);font-size:20px;font-style:normal;line-height:1.15}
.star-actions .button{font-size:21px}
.book-preview{display:block;max-width:1030px;margin:65px auto 0;position:relative;transform:rotate(-.4deg);text-decoration:none}
.book-preview img{display:block;width:100%;height:auto;filter:drop-shadow(0 5px 8px #17619c19)}
.book-hint{position:absolute;right:-12px;bottom:-18px;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:25px;transform:rotate(4deg);padding:4px 10px}
.book-caption{font-family:var(--serif);font-size:19px;margin-top:33px}
.book-caption a{font-size:20px}
.contribute-grid>a:nth-child(n),.contrib-static{border-left:0}
.contribute-grid>a:nth-child(3n+2),.contribute-grid>a:nth-child(3n),.contrib-static{padding-left:20px}
.contribute-grid h3{font-size:37px}
.license-note{font-family:var(--serif);font-size:21px!important;line-height:1.35!important}
.final-kicker{font-family:var(--serif);font-size:22px;font-style:normal}
.footer-heading{font-size:38px}
.credits{font-family:var(--serif);font-size:20px;line-height:1.6}
.footer-bottom{font-size:14px}
.footer-bottom a{font-size:17px}

/* End credits: each character has a place and a role. */
.site-footer{padding-top:74px}
.footer-heading{
  width:max-content;margin:0 auto 43px;text-align:center;
  font-family:var(--serif);font-size:31px;font-weight:400;line-height:1.1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='7' viewBox='0 0 110 7'%3E%3Cpath d='M1 5 C25 3 37 6 59 4 S91 3 109 4' fill='none' stroke='%23c74738' stroke-width='1.45' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-position:left bottom;padding:0 7px 9px
}
.site-footer .footer-bottom{margin-top:73px}

/* The coral marks replace punctuation at the end of the title. */
.source-mark{display:inline-block;position:relative}
.source-mark::after{
  content:"";position:absolute;left:calc(100% - .03em);top:-.18em;
  width:.43em;height:.4em;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='42' viewBox='0 0 45 42'%3E%3Cpath d='M5 35c4-2 8-4 12-5M13 22c4-4 7-7 11-9M30 13c2-4 4-7 6-10' fill='none' stroke='%23c74738' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat
}

/* The introduction moves from audience and origin to the book's metaphors. */
.story-intro h2{max-width:790px;margin-bottom:28px}
.intro-lead{font-family:var(--serif);font-size:clamp(25px,2.45vw,33px);line-height:1.27;color:var(--ink);max-width:790px;margin-bottom:43px}
.intro-flow{max-width:690px}
.intro-flow p{font-size:17px;line-height:1.72;margin-bottom:24px}
.intro-examples{font-family:var(--serif);font-size:clamp(22px,2.1vw,29px);line-height:1.38;color:var(--ink);margin:37px 0 0}

/* Character names use one ink color. */
.host p,.host p:first-letter{color:var(--ink)}

/* The credits group people by the work they contributed. */
.site-footer .footer-heading{font-size:clamp(35px,3.7vw,50px);line-height:1.1;margin-bottom:13px}
.credits-intro{max-width:620px;font-size:16px;line-height:1.6;color:var(--muted);margin-bottom:44px}
.credit-teams{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(40px,7vw,110px);max-width:1000px}
.credit-team{border-top:1px solid var(--line);padding:24px 0 37px;min-width:0}
.credit-team h3{font-family:var(--serif);font-size:clamp(25px,2.3vw,32px);font-weight:400;line-height:1.2;color:var(--ink);margin:0 0 7px}
.credit-team .team-cast{font-family:var(--serif);font-size:16px;color:var(--muted);margin:0 0 26px}
.team-member{font-family:var(--serif);font-size:23px;line-height:1.25;color:var(--ink);margin:0}
.team-member span{display:block;font-family:var(--sans);font-size:14px;color:var(--muted);margin-top:3px}
.team-waiting{font-size:15px;line-height:1.5;color:var(--muted);margin:0;max-width:300px}

/* The reader keeps generous margins around the actual book typography. */
.reader-heading h1{font-size:clamp(56px,6.4vw,92px)}
.reader-page-content p{font-family:var(--sans);font-size:clamp(18px,1.52vw,23px);line-height:1.55}
.reader-controls button{font-family:var(--serif);font-size:23px}
.reader-hint{font-family:var(--serif);font-size:19px;font-style:normal}
.reader-links a{font-size:20px}

@media(max-width:720px){
  .site-header nav{font-size:19px}
  .hero h1{font-size:clamp(66px,13.7vw,91px);line-height:.91}
  .hero-lead{font-size:29px}
  .hero-art{height:310px}
  .section-label{margin-bottom:40px}
  .story-intro h2{font-size:clamp(50px,11vw,72px)}
  .section-heading h2{font-size:clamp(52px,11vw,78px)}
  .book-heading h2{font-size:clamp(61px,12vw,78px)}
  .star-copy h2{font-size:clamp(58px,11.5vw,79px)}
  .license-main h2{font-size:clamp(56px,11vw,75px)}
  .final-inner h2{font-size:clamp(67px,12vw,89px)}
  .resource-info strong{font-size:30px}
  .book-preview{margin-top:38px}
  .book-hint{font-size:19px;right:0;bottom:-24px}
  .book-caption{margin-top:48px}
  .contribute-grid>a:nth-child(n),.contrib-static{padding-left:0}
  .reader-heading h1{font-size:clamp(55px,12vw,76px)}
  .reader-page-content p{font-size:19px}
  .credit-teams{grid-template-columns:1fr}
  .credit-team{padding:23px 0 32px}
  .credits-intro{margin-bottom:32px}
  .site-footer .footer-bottom{margin-top:55px}
  .intro-lead{font-size:27px;margin-bottom:30px}
  .intro-flow p{font-size:16px}
  .intro-examples{font-size:23px;margin-top:30px}
}
@media(max-width:390px){.hero h1{font-size:60px}.button{font-size:20px}.book-hint{font-size:17px}}

/* The site follows the white pages, blue lettering and red annotations of the book. */
html,body{background:#fff}
body{font-size:19px;letter-spacing:0;color:#397da5}
.hero{display:block;min-height:0;padding-top:70px;padding-bottom:80px}
.hero-copy{max-width:990px}
.hero h1{font-size:clamp(65px,7.2vw,105px);max-width:900px}
.hero-art{height:auto;margin:30px auto 0;max-width:1120px;display:block}
.hero-art img{display:block;width:100%;max-width:100%;height:auto;mix-blend-mode:normal;transform:none}
.hand-note{right:3%;bottom:1%;font-size:24px;transform:rotate(-3deg)}
.hero-index{display:none}
.intro-tail{display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,255px);align-items:center;gap:32px;margin-top:20px;max-width:850px}
.intro-tail .intro-examples{margin:0}
.intro-tail img{display:block;width:100%;height:auto;mix-blend-mode:normal}
.host img,.star-art img{mix-blend-mode:normal}
.host img{width:160px;height:160px;object-fit:contain}
.host-ocre img{width:205px;height:190px}
.license-host img{width:205px;height:205px}
.star-art img{max-width:450px}
.book-preview{max-width:1100px;transform:none}
.book-preview img{filter:none}
.book-hint{background:#fff}
.final-inner{max-width:1060px;display:grid;grid-template-columns:minmax(0,.48fr) minmax(0,.52fr);align-items:center;gap:clamp(35px,6vw,90px);text-align:left}
.final-inner .sleeping-teky{display:block;width:100%;height:auto}
.final-inner h2{margin:20px 0 32px}
.final-inner p{margin:0 0 34px}
.credits-art{display:block;width:min(100%,850px);height:auto;margin:35px auto 0}
.site-footer .footer-bottom{margin-top:28px}

@media(max-width:720px){
  .hero{padding-top:50px;padding-bottom:70px}
  .hero h1{font-size:clamp(55px,12vw,78px)}
  .hero-art{margin-top:36px;height:auto}
  .hand-note{font-size:19px;bottom:-16px;right:1%}
  .intro-tail{grid-template-columns:minmax(0,1fr) 120px;gap:12px;margin-top:30px}
  .intro-tail .intro-examples{font-size:22px}
  .final-inner{display:flex;flex-direction:column;gap:25px;text-align:center}
  .final-inner .sleeping-teky{max-width:300px}
  .final-inner h2{margin:10px auto 25px}
  .final-inner p{margin:0 auto 30px}
  .credits-art{margin-top:18px}
}
@media(max-width:390px){.hero h1{font-size:55px}.intro-tail{grid-template-columns:1fr}.intro-tail img{width:180px;margin:0 0 0 auto}}

/* Book-aligned ink, clear masthead, and room for the original drawings. */
:root{--story-blue:#4d96bb;--body-blue:#367fa6;--muted:#397ca2;--line:#b7d8e7}
body{color:var(--body-blue)}
.site-header{padding-top:25px;padding-bottom:23px;border-bottom:1px solid var(--line)}
.wordmark{font-size:26px;line-height:.98;font-weight:400;letter-spacing:0;white-space:normal;max-width:290px}
.mark-tail{font-size:19px;line-height:1.1;letter-spacing:0;margin-top:3px;font-weight:400}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(350px,.82fr);align-items:center;gap:clamp(25px,4vw,70px);padding-top:85px;padding-bottom:105px}
.hero-copy{max-width:720px}
.hero h1{font-size:clamp(59px,6vw,91px);max-width:720px;line-height:.98}
.hero h1 em{white-space:normal}
.hero-art{max-width:none;margin:0}
.hero-art img{width:100%;height:auto;max-width:none}
.hero-text{font-size:19px;line-height:1.6;color:var(--body-blue)}
.hero-lead{color:var(--ink)}
.source-mark{display:inline-block;position:relative;padding-right:.25em}
.source-mark::after{content:none}
.source-rays{position:absolute;width:.28em;height:.32em;left:calc(100% - .21em);top:-.08em;overflow:visible;fill:none;stroke:var(--coral);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.intro-flow p,.section-heading>div>p:not(.eyebrow),.book-heading p,.star-copy>p:not(.eyebrow),.final-inner p{color:var(--body-blue)}
.resource-info small,.contribute-grid p{color:var(--body-blue);font-size:17px}
.host-ocre img{width:180px;height:auto;max-height:none;object-fit:contain}
.host-ocre{width:190px}
.star-art img{max-width:370px}
.contribute-grid{border-top:1px solid var(--line)}
.contribute-grid>a{min-height:230px}
.contribute-grid>a:hover h3,.resource-list>a:hover strong{color:var(--coral)}
.reader-page.is-blank{aspect-ratio:1/1;background:#fff}
.reader-page.is-blank button{display:none}
.reader-page[hidden]{display:none}
@media(max-width:1000px){
 .hero{grid-template-columns:minmax(0,1fr) minmax(290px,.75fr)}
 .hero h1{font-size:clamp(57px,7vw,75px)}
}
@media(max-width:720px){
 .site-header{align-items:center}
 .wordmark{font-size:22px;max-width:190px}
 .mark-tail{font-size:16px}
 .hero{display:block;padding-top:50px;padding-bottom:75px}
 .hero h1{font-size:clamp(53px,11vw,78px);line-height:.97}
 .hero-text{font-size:18px}
 .hero-art{margin:45px auto 0;max-width:580px}
 .host-ocre{margin:16px 0 0 auto;width:160px}
 .host-ocre img{width:145px;height:auto}
 .star-art img{width:min(75vw,360px);max-width:360px}
 .reader-book{max-width:min(100%,600px)}
}
@media(max-width:390px){
 .wordmark{font-size:19px;max-width:155px}
 .mark-tail{font-size:14px}
 .hero h1{font-size:53px}
}

/* End credits read as one cast: character and author share the same type treatment. */
.site-footer .footer-heading{background-image:none;width:auto;text-align:left;padding:0;margin:0 0 10px}
.credits-intro{max-width:660px;font-size:19px;line-height:1.5;margin-bottom:54px;color:var(--body-blue)}
.credit-teams{max-width:none;column-gap:clamp(45px,8vw,120px);row-gap:8px}
.credit-team{padding:23px 0 35px}
.credit-team h3{font-size:clamp(27px,2.5vw,34px);margin-bottom:22px}
.team-roster{margin:0;display:grid;gap:0}
.team-roster>div{display:grid;grid-template-columns:minmax(150px,.9fr) minmax(0,1.1fr);gap:16px;align-items:baseline;padding:7px 0;border-bottom:1px dotted var(--line)}
.team-roster>div:last-child{border-bottom:0}
.team-roster dt{font-family:var(--serif);font-size:22px;line-height:1.1;color:var(--ink)}
.team-roster dd{font-family:var(--sans);font-size:17px;line-height:1.2;color:var(--body-blue);margin:0}
@media(max-width:720px){
 .credits-intro{font-size:18px;margin-bottom:36px}
 .credit-team{padding:21px 0 31px}
 .credit-team h3{margin-bottom:15px}
 .team-roster>div{grid-template-columns:minmax(125px,.9fr) minmax(0,1.1fr);gap:10px}
 .team-roster dt{font-size:20px}
 .team-roster dd{font-size:16px}
}

/* The cover ink continues onto the page; its dotted flight path belongs to the original drawing. */
.hero{display:block;min-height:0;padding-top:76px;padding-bottom:96px;overflow:hidden}
.hero>.eyebrow{margin-bottom:18px}
.hero>h1{max-width:1040px;font-size:clamp(68px,7.5vw,112px);line-height:.94;margin:0 0 38px}
.hero-scene{display:grid;grid-template-columns:minmax(330px,.39fr) minmax(0,.61fr);align-items:center;gap:0}
.hero-scene .hero-copy{max-width:490px;align-self:start;padding-top:20px;z-index:1}
.hero-scene .hero-lead{max-width:480px;font-size:clamp(27px,2.8vw,35px)}
.hero-scene .hero-text{max-width:450px}
.hero-scene .actions{gap:22px}
.hero-scene .hero-art{width:118%;max-width:none;margin:-40px -8% 0 -10%;position:relative;z-index:0;align-self:end}
.hero-scene .hero-art img{display:block;width:100%;height:auto;max-width:none}
.hero-art-note{position:absolute;right:8%;bottom:-20px;color:var(--coral);font:26px/1 var(--serif);transform:rotate(-4deg);white-space:nowrap}
.hero-art-note::after{content:"";display:block;height:7px;margin-top:2px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='7' viewBox='0 0 110 7'%3E%3Cpath d='M1 5 C25 3 37 6 59 4 S91 3 109 4' fill='none' stroke='%23c74738' stroke-width='1.45' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left bottom}
@media(max-width:900px){
 .hero>h1{font-size:clamp(60px,8vw,83px)}
 .hero-scene{grid-template-columns:minmax(270px,.44fr) minmax(0,.56fr)}
 .hero-scene .hero-art{width:132%;margin:-5px -16% 0 -16%}
}
@media(max-width:720px){
 .hero{padding-top:54px;padding-bottom:80px;overflow:hidden}
 .hero>h1{font-size:clamp(55px,11vw,78px);margin-bottom:31px}
 .hero-scene{display:block}
 .hero-scene .hero-copy{padding-top:0;max-width:580px}
 .hero-scene .hero-lead{font-size:29px}
 .hero-scene .hero-art{width:calc(100% + 48px);max-width:none;margin:35px -24px 0}
 .hero-art-note{font-size:20px;right:8%;bottom:-17px}
}
@media(max-width:390px){.hero>h1{font-size:53px}.hero-scene .hero-art{width:calc(100% + 48px)}}