/* ==========================================================
   doodle. The contents page of the book the two games live in.
   Palette and type taken straight from the apps' DesignSystem:
   every colour has to answer "what wrote this".
   ========================================================== */

@font-face{font-family:Marker;src:local("MarkerFelt-Wide"),local("Marker Felt Wide"),local("MarkerFelt-Thin");font-display:swap}
@font-face{font-family:Hand;src:local("Noteworthy-Bold"),local("Noteworthy Bold");font-display:swap}
@font-face{font-family:Jost;font-weight:400 700;font-display:swap;src:url(/fonts/jost-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --paper:#f5f1e4; --shade:#e6e0cf; --desk:#a3967e;
  --biro:#2a3c7d; --biro-light:#52659c; --pencil:#696871;
  --teacher:#c4362c; --highlighter:#f0c33c;
  --rule:rgba(159,191,216,.5); --margin-rule:rgba(216,131,122,.72);
  --line:34px;
  --display:Marker,"Marker Felt",Jost,"Trebuchet MS",sans-serif;
  --hand:Hand,"Noteworthy",Jost,"Trebuchet MS",sans-serif;
  --pen-cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M3 23l1.4-4.6L16.6 6.2l3.2 3.2L7.6 21.6 3 23z' fill='%23f5f1e4' stroke='%232a3c7d' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M17.8 5l3.2 3.2 1.6-1.6a2.2 2.2 0 0 0-3.2-3.2L17.8 5z' fill='%232a3c7d'/%3E%3C/svg%3E") 3 23,pointer;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;position:relative;
  color:var(--biro);background:var(--paper);
  font-family:var(--hand);font-size:20px;line-height:var(--line);
  background-image:repeating-linear-gradient(0deg,transparent 0,transparent calc(var(--line) - 1px),var(--rule) calc(var(--line) - 1px),var(--rule) var(--line));
  background-position:0 6px;
}
/* the margin, and the holes it was punched through */
body::before{content:"";position:absolute;inset:0 auto 0 clamp(30px,6.4vw,112px);width:1px;background:var(--margin-rule);pointer-events:none}
body::after{
  content:"";position:absolute;left:clamp(9px,2.3vw,42px);top:118px;bottom:0;width:22px;pointer-events:none;
  background-image:radial-gradient(circle at 11px 11px,var(--shade) 0 10px,rgba(105,104,113,.28) 10px 10.9px,transparent 11px);
  background-size:22px 340px;background-repeat:repeat-y;
}
@media(max-width:720px){body::after{display:none}}

a{color:inherit;text-underline-offset:6px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
a:focus-visible{outline:3px solid var(--biro);outline-offset:6px}
.skip{position:fixed;left:16px;top:-120px;z-index:10;background:var(--paper);padding:12px;border:2px solid var(--biro)}
.skip:focus{top:12px}

.page{max-width:1080px;margin:auto;padding:0 clamp(24px,5vw,64px) 0 clamp(52px,9vw,150px)}
nav{min-height:102px;display:flex;align-items:center;justify-content:flex-end;gap:26px;font-size:17px}

/* ---- the head of the page ---- */
.masthead{padding:24px 0 12px}
h1{font-family:var(--display);font-weight:400;font-size:clamp(76px,18vw,196px);line-height:.92;letter-spacing:-.03em;margin:0}
.ink{display:block;width:min(100%,560px);height:18px;overflow:visible;margin:-4px 0 0 -6px}
.ink path{fill:none;stroke:var(--biro);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.lead{font-size:clamp(21px,2.6vw,29px);line-height:1.5;color:var(--pencil);max-width:23ch;margin:22px 0 0}

/* ---- contents ---- */
.contents{margin:clamp(56px,9vw,104px) 0 0}
.contents h2{font-family:var(--hand);font-weight:400;font-size:19px;color:var(--teacher);margin:0 0 6px;line-height:var(--line)}
.entry{
  display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;column-gap:18px;
  position:relative;text-decoration:none;padding:26px 10px 22px 0;isolation:isolate;
  border-bottom:1px solid rgba(42,60,125,.22);cursor:var(--pen-cursor);
}
.entry:first-of-type{border-top:1px solid rgba(42,60,125,.22)}
.num{font-family:var(--hand);font-size:18px;color:var(--teacher);align-self:start;line-height:1.9}
.name{display:block;font-family:var(--display);font-size:clamp(38px,6.6vw,74px);line-height:1;letter-spacing:-.02em;color:var(--pencil);transition:color .18s ease}
.entry .say{display:block;font-size:19px;color:var(--pencil);margin-top:10px;max-width:34ch}
.folio{font-family:var(--hand);font-size:18px;color:var(--pencil);white-space:nowrap}
.where{display:block;font-size:16px;color:var(--pencil);margin-top:8px;text-align:right}
/* choosing one is picking it up: highlighter, then it inks in */
.entry::before{
  content:"";position:absolute;z-index:-1;left:-14px;right:-10px;top:20px;height:64px;
  background:var(--highlighter);opacity:0;transform:scaleX(.02);transform-origin:left center;
  clip-path:polygon(0 6%,100% 0,100% 92%,0 100%);
}
.entry:hover .name,.entry:focus-visible .name{color:var(--biro)}
.entry:hover::before,.entry:focus-visible::before{opacity:.42;transform:scaleX(1)}
.entry:focus-visible{outline:3px solid var(--biro);outline-offset:4px}

/* ---- the end of the page ---- */
.foot{margin-top:clamp(70px,11vw,130px)}
.tear{display:block;width:100%;height:64px;background:var(--desk);position:relative;z-index:1}
.tear svg{display:block;width:100%;height:26px}
.tear path{fill:var(--paper)}
.cont{font-size:17px;color:var(--pencil);margin:0 0 6px}
footer{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:0 0 44px;font-size:17px;color:var(--pencil)}
footer a{color:var(--biro)}
footer div{display:flex;gap:24px;flex-wrap:wrap}

/* ---- motion: one orchestrated moment, on load ---- */
.js .ink path{stroke-dasharray:600;stroke-dashoffset:600}
.js .ink.drawn path{stroke-dashoffset:0;transition:stroke-dashoffset .85s .15s cubic-bezier(.3,.7,.4,1)}
.js .writes{opacity:0;transform:translateY(6px)}
.js .writes.drawn{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
.js .entry:nth-of-type(1) .writes.drawn{transition-delay:.55s}
.js .entry:nth-of-type(2) .writes.drawn{transition-delay:.7s}
.entry::before{transition:opacity .16s ease,transform .26s cubic-bezier(.2,.8,.3,1)}

@media(max-width:640px){
  .page{padding-left:44px;padding-right:22px}
  .entry{grid-template-columns:auto 1fr;row-gap:2px}
  .folio,.where{grid-column:2;text-align:left}
  .where{margin-top:4px}
  .lead{font-size:21px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .ink path{stroke-dashoffset:0}
  .js .writes{opacity:1;transform:none}
  .entry::before,.js .ink.drawn path,.js .writes.drawn{transition:none}
}