/* PytCorp microsite. Colours and type come from brand/brand.md. */

:root {
  --coal: #1C1C1C;
  --cloudy: #F9F9F9;
  --frosty: #B6D2ED;
  --bubblegum: #FED3CD;
  --tangerine: #FF8C00;

  /* Stand-in for real handwriting: the margin notes and sketch labels */
  --hand: "Reenie Beanie", "Figtree", cursive;

  /* The page is laid out like the 1920 × 1080 design: --d is one design pixel,
     scaled so the whole frame fits the screen, and --frame is where the frame
     starts when the screen is wider than it. */
  --d: min(100vw / 1920, 100svh / 1080);
  --frame: max(0px, 50vw - 960 * var(--d));

  /* The ruled lines on each sheet, in notebook blue, the pink margin line, and
     the text written on them */
  --line: max(1.9rem, 46 * var(--d));
  --rule: var(--frosty);
  --rule-top: calc(210 * var(--d));
  --rule-left: calc(75 * var(--d));
  --text-left: calc(150 * var(--d));
  --margin-line: calc(var(--text-left) - 26 * var(--d));
  --text-right: calc(400 * var(--d));

  /* Cards reach across the margin and just past the notebook's edge, where a
     paper clip holds them on; the writing has room to the left of the page for
     the half of the clip that's off it */
  --card-hang: calc(12 * var(--d));
  --clip-room: calc(60 * var(--d));

  /* Where the page lies before it's picked up (0) and where it's read (1),
     measured from the frame and the top of the screen. Lying down, it's
     placed from the bottom of the screen, like the cat, so he stays against it. */
  --page-x0: calc(1304 * var(--d));
  --page-y0: calc(100svh - 818 * var(--d));
  --page-r0: 15deg;
  --page-x1: calc(650 * var(--d));
  --page-y1: calc(195 * var(--d));
  --page-w: calc(1130 * var(--d));
  --page-gap: calc(30 * var(--d));
  --page-h: calc(100svh - var(--page-y1) - var(--page-gap));

  /* The spiral along the top: one coil every --coil. The tabs down the side. */
  --coil: max(1.6rem, 60 * var(--d));
  --tab-w: max(1.75rem, 64 * var(--d));

  /* Pytty cat once the page is up: a bit smaller, sat beside the pad facing
     it, level with its bottom edge */
  --cat-s1: 0.6;
  --cat-x1: calc(-122 * var(--d));
  --cat-y1: calc(-30 * var(--d));

  /* How far you scroll to pick the page up, and how far along you are (main.js) */
  --lift: 70svh;
  --p: 1;
}

.js {
  --p: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cloudy);
  color: var(--coal);
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--coal);
  outline-offset: 3px;
}

::selection {
  background: var(--tangerine);
  color: var(--coal);
}

.nowrap {
  white-space: nowrap;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* The header: just the logo, fixed at the top right, its right edge lined up
   with the notebook's tabs */

.masthead {
  position: fixed;
  inset: 0 0 auto;
  z-index: 5;
  background: var(--cloudy);
}

.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  height: calc(131.5 * var(--d));
  min-height: 3.5rem;
  margin-inline: calc(var(--frame) + 76 * var(--d));
  padding-top: calc(36 * var(--d));
}

.lockup {
  display: inline-flex;
  color: var(--coal);
}

.lockup-logo {
  height: max(1.5rem, 45 * var(--d));
  width: auto;
  aspect-ratio: 187 / 45;
}

/* Pyt, on the left the whole way down, set out like a dictionary entry: the
   word, how it's said and what it is, a rule, the meaning, an example and a
   see-also. It starts level with the top of the spiral. */

.intro {
  position: fixed;
  top: calc(150 * var(--d));
  left: calc(var(--frame) + 76 * var(--d));
  z-index: 2;
  width: calc(560 * var(--d));
}

/* The tight line height crops the word to its capitals; the bottom margin
   makes room for the tail of the y before the definition starts */
.hero-word {
  margin: 0 0 0.3em -0.05em;
  font-size: calc(250 * var(--d));
  line-height: 0.8;
  letter-spacing: 0.01em;
}

.say {
  font-size: max(1rem, 28 * var(--d));
  font-style: italic;
  line-height: 1.3;
}

.ipa {
  margin-right: 0.5em;
}

.definition {
  margin-top: 0.6em;
  padding-top: 0.6em;
  border-top: 1px solid rgb(28 28 28 / 0.3);
  font-size: max(1.0625rem, 34 * var(--d));
  line-height: 1.3;
  text-wrap: balance;
}

.example {
  margin-top: 1.1em;
  font-size: max(0.875rem, 24 * var(--d));
  font-style: italic;
  line-height: 1.4;
}

.example b {
  font-weight: 800;
}

.see-also {
  margin-top: 2em;
  font-size: max(0.75rem, 18 * var(--d));
  font-style: italic;
}

/* Pytty cat, at the bottom of the screen with his head against the page. Once
   it's picked up he straightens his head, and as the cover flips he sits up
   into the logo, facing the pad. */

.cat--lean {
  position: fixed;
  bottom: 0;
  left: calc(var(--frame) + 170 * var(--d));
  z-index: 3;
  width: calc(1180 * var(--d));
  height: auto;
  transform-origin: 0 100%;
  transform:
    translate(calc(var(--cat-x1) * var(--p)), calc(var(--cat-y1) * var(--p)))
    scale(calc(1 - (1 - var(--cat-s1)) * var(--p)));
  cursor: pointer;
}

.is-up .cat--lean {
  cursor: default;
}

/* Turned about the bottom of his head, 15° back to upright */
.cat-head-turn {
  transform-box: fill-box;
  transform-origin: 31% 92%;
  transform: rotate(calc(-15deg * var(--p)));
}

.cat--lean .cat-eye-white {
  fill: #FFF;
  stroke-width: 12.2;
}

.cat-art--sit .cat-eye-white {
  stroke-width: 11.33;
}

/* Lying down he's the design's cat; sat up, the logo. The two outlines are
   nearly the same, so one simply takes over from the other as he hops (a fade
   would show both at once, grey), and the eyes slide over to where the logo
   has them. */
.cat-art--sit,
.cat--lean.is-sitting .cat-art--lean {
  opacity: 0;
}

.cat--lean.is-sitting .cat-art--sit {
  opacity: 1;
}

.cat-art--sit .cat-eye {
  transform: translateX(var(--from));
  transition: transform 0.45s cubic-bezier(0.3, 1.3, 0.5, 1) 0.1s;
}

.cat--lean.is-sitting .cat-art--sit .cat-eye {
  transform: none;
}

/* Sitting up as the cover flips (main.js adds .is-sitting, and the hop): his
   body tucks in under his head, he settles down onto the bottom of the screen
   and the tail curls out. Lying back down undoes it. */
.cat-body {
  transform-box: fill-box;
  transform-origin: 96% 100%;
  transition: transform 0.4s cubic-bezier(0.25, 0.6, 0.4, 1);
}

.cat-tail {
  transform-box: fill-box;
  transform-origin: 0 100%;
  transform: scale(0);
  transition: transform 0.25s ease-in;
}

.cat-sit {
  transition: transform 0.35s ease-in-out;
}

.cat--lean.is-sitting .cat-body {
  transform: scaleX(0);
  transition: transform 0.35s cubic-bezier(0.5, 0, 0.75, 0);
}

.cat--lean.is-sitting .cat-tail {
  transform: none;
  transition: transform 0.55s cubic-bezier(0.3, 1.6, 0.5, 1) 0.3s;
}

/* The bottom of his head becomes the bottom of the cat, on the bottom of the screen */
.cat--lean.is-sitting .cat-sit {
  transform: translateY(19px);
}

/* The page: a binder of sheets. It's in the flow below the first screen, and
   while it's lying down a transform brings it back up to where it lies against
   the cat, turned 15°. As --p goes to 1 it straightens and settles where it's
   read, one screen tall. */

main {
  overflow-x: clip;
}

.lift {
  height: var(--lift);
}

.page {
  position: relative;
  z-index: 1;
  width: var(--page-w);
  height: var(--page-h);
  margin: var(--page-y1) 0 var(--page-gap) calc(var(--frame) + var(--page-x1));
  transform-origin: 0 0;
  transform:
    translate(
      calc((var(--page-x0) - var(--page-x1)) * (1 - var(--p))),
      calc((var(--page-y0) - var(--page-y1) - var(--lift)) * (1 - var(--p)))
    )
    rotate(calc(var(--page-r0) * (1 - var(--p))));
  scroll-margin-top: var(--page-y1);
  will-change: transform;
}

/* While it's lying there, the whole page is a link that picks it up */
.page-open {
  position: absolute;
  inset: 0;
  z-index: 20;
  font-size: 0;
}

.is-up .page-open {
  visibility: hidden;
}

/* The sheets, stacked, each one punched along the top, with its writing on
   ruled lines in a scroller of its own, in case it runs past the bottom.
   Turning a sheet flips it up over the spiral (main.js); the ones turned past
   are hidden. */

.sheets {
  position: absolute;
  inset: 0;
  perspective: 2400px;
}

.sheet {
  --holes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 64'%3E%3Cellipse cx='13' cy='48' rx='4.5' ry='6' fill='%231C1C1C'/%3E%3C/svg%3E");
  position: absolute;
  inset: 0;
  background:
    var(--holes) 0 calc(var(--coil) * -0.8) / var(--coil) calc(var(--coil) * 1.6) round no-repeat,
    #FFF;
  box-shadow: 0 0 0 1px rgb(28 28 28 / 0.06);
  transform-origin: 50% calc(var(--coil) * 0.4);
  backface-visibility: hidden;
}

/* Only the open sheet shows, so the cards and clips hanging off the ones
   underneath don't peek out past the page; the one turning shows while it turns */
.sheet.is-flipped,
.sheet:not(.sheet--cover, .is-open, .is-turning) {
  visibility: hidden;
}

/* Nor while the cover's shut */
.page:has(.sheet--cover:not(.is-flipped, .is-turning)) .sheet:not(.sheet--cover) {
  visibility: hidden;
}

/* The ruled lines in notebook blue and the pink margin line scroll with the
   writing. The scroller starts --clip-room left of the page, so everything in
   it is shifted over by that much. */
.sheet-scroll {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: calc(-1 * var(--clip-room));
  overflow-x: hidden;
  overflow-y: auto;
  padding: calc(var(--rule-top) - 0.78 * var(--line)) var(--text-right) calc(2 * var(--line)) calc(var(--clip-room) + var(--text-left));
  background:
    linear-gradient(var(--bubblegum), var(--bubblegum))
      calc(var(--clip-room) + var(--margin-line)) calc(var(--rule-top) - var(--line)) / 2px 100% no-repeat local,
    repeating-linear-gradient(to bottom, var(--rule) 0 1px, transparent 1px var(--line))
      var(--clip-room) var(--rule-top) / calc(100% - var(--clip-room)) calc(100% - var(--rule-top) - var(--line)) no-repeat local;
  scrollbar-width: thin;
  scrollbar-color: rgb(28 28 28 / 0.25) transparent;
  scrollbar-gutter: stable;
}

/* Held still while a page turns, which also stops a finger's fling (main.js
   holds the wheel). The gutter stays, so nothing shifts. */
.page.is-flipping .sheet-scroll {
  overflow-y: hidden;
}

.sheet-scroll:focus-visible {
  outline-offset: -3px;
}

/* A running head across the top of each sheet */
.sheet-head {
  position: absolute;
  top: calc(var(--coil) * 1.15);
  right: var(--rule-left);
  left: calc(var(--clip-room) + var(--text-left));
  display: flex;
  justify-content: space-between;
  font-size: max(0.625rem, 15 * var(--d));
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

/* The cover: tangerine card with a fine grain, rounded at the corners, and a
   label stuck on with the title and whose notebook it is */
.sheet--cover {
  overflow: hidden;
  border-radius: calc(8 * var(--d)) calc(8 * var(--d)) calc(22 * var(--d)) calc(22 * var(--d));
  background:
    var(--holes) 0 calc(var(--coil) * -0.8) / var(--coil) calc(var(--coil) * 1.6) round no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    var(--tangerine);
  box-shadow: inset 0 0 0 1px rgb(28 28 28 / 0.1);
}

.cover-label {
  position: absolute;
  top: calc(var(--coil) * 2);
  left: calc(110 * var(--d));
  width: calc(540 * var(--d));
  padding: calc(26 * var(--d)) calc(34 * var(--d)) calc(22 * var(--d));
  border-radius: calc(14 * var(--d));
  background: #FFF;
  box-shadow: inset 0 0 0 max(2px, 4 * var(--d)) var(--coal);
  rotate: -1deg;
}

.cover-title {
  margin: 0;
  font-size: max(1.25rem, 42 * var(--d));
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.cover-owner {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  margin: 0.7em 0 0;
  padding-top: 0.5em;
  border-top: 1px solid var(--frosty);
  font-size: max(0.625rem, 15 * var(--d));
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cover-owner span {
  font-family: var(--hand);
  font-size: 2.4em;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.8;
  text-transform: none;
}

/* A ring where someone put their coffee down, mixed from the brand's own colours */
.stain {
  --coffee: color-mix(in srgb, var(--tangerine) 45%, var(--coal));
  position: absolute;
  top: calc(390 * var(--d));
  left: calc(330 * var(--d));
  width: calc(260 * var(--d));
  height: auto;
  overflow: visible;
  mix-blend-mode: multiply;
  rotate: 20deg;
  pointer-events: none;
}

.stain path {
  fill: none;
  stroke: var(--coffee);
  stroke-linecap: round;
}

.stain-wash {
  fill: var(--coffee) !important;
  stroke: none !important;
  opacity: 0.06;
}

.stain-ring {
  stroke-width: 6;
  opacity: 0.4;
}

.stain-ring--second {
  stroke-width: 4;
  opacity: 0.18;
}

.stain-edge {
  stroke-width: 2.4;
  opacity: 0.55;
}

.stain-drop {
  fill: var(--coffee);
  opacity: 0.3;
}

/* The spiral: coils of wire through the holes and over the top edge */
.spiral {
  position: absolute;
  top: calc(var(--coil) * -0.8);
  right: 0;
  left: 0;
  z-index: 2;
  height: calc(var(--coil) * 1.6);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 64'%3E%3Cpath d='M13 47V17a8 8 0 0 1 16 0v15' fill='none' stroke='%231C1C1C' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E")
    0 0 / var(--coil) 100% round no-repeat;
  pointer-events: none;
}

/* The tabs, tucked behind the edge of the sheets except the open one */
.tabs {
  position: absolute;
  top: calc(var(--coil) * 1.2);
  bottom: calc(var(--coil) * 0.4);
  left: 100%;
  z-index: -1;
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--d));
  width: var(--tab-w);
}

.tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0 0.7em 0.7em 0;
  background: #FFF;
  box-shadow: 0 0 0 1px rgb(28 28 28 / 0.1);
  color: var(--coal);
  font: 600 max(0.625rem, 15 * var(--d)) / 1 "Figtree", system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  translate: -22% 0;
  cursor: pointer;
  transition: translate 0.25s cubic-bezier(0.3, 1.3, 0.6, 1);
}

.tab span {
  font-weight: 800;
}

.tab:hover {
  translate: -10% 0;
}

.tab[aria-selected="true"] {
  translate: 0 0;
}

.tab:focus-visible {
  outline-offset: -3px;
}

/* The writing on a sheet. Everything keeps to the ruled lines: text sits a line
   apart, and every gap is a whole number of lines. The right-hand margin is
   left for the scrapbook bits. */

.page-text {
  position: relative;
  font-size: max(1rem, 25 * var(--d));
  line-height: var(--line);
}

.page-text h2,
.page-text h3 {
  line-height: var(--line);
}

.page-text > * + *,
.page-text li > * + p {
  margin-top: var(--line);
}

.page-text h2 + *,
.page-text h3 + p {
  margin-top: 0;
}

.page-text h2 {
  position: relative;
  font-size: max(1.5rem, 46 * var(--d));
}

/* Section numbers hang in the margin, on the lines */
.page-no {
  position: absolute;
  left: calc(var(--rule-left) - var(--text-left));
  color: var(--tangerine);
  font-size: max(1rem, 25 * var(--d));
}

.page-text h3 {
  font-size: inherit;
}

.statement {
  font-size: max(1.25rem, 34 * var(--d));
  font-weight: 800;
  letter-spacing: -0.015em;
}

/* A highlighter stroke, not a strike-through, swiped on as it comes into view */
mark {
  --marker: rgb(255 140 0 / 0.55);
  padding-inline: 0.1em;
  background: linear-gradient(transparent 28%, var(--marker) 28% 94%, transparent 94%) 0 0 / 100% 100% no-repeat;
  color: inherit;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 0.7s cubic-bezier(0.6, 0, 0.3, 1);
}

.mark--pink {
  --marker: var(--bubblegum);
}

.mark--blue {
  --marker: var(--frosty);
}

mark.is-pending {
  background-size: 0 100%;
}

/* Ringed in pencil */
.circled {
  position: relative;
  white-space: nowrap;
}

.circled::after {
  content: "";
  position: absolute;
  inset: -0.32em -0.45em -0.22em -0.5em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M128 7C78 0 14 7 6 30s72 30 132 26 62-22 50-36S112 1 58 9' fill='none' stroke='%23FF8C00' stroke-width='2.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  pointer-events: none;
  clip-path: inset(-10%);
  transition: clip-path 0.6s ease-out;
}

.circled.is-pending::after {
  clip-path: inset(-10% 110% -10% -10%);
}

/* Underlined with a wobbly pen line */
.squiggle {
  padding-bottom: 0.25em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M1 6C11 1 21 1 31 5s20 4 30 0 20-4 30 0 20 4 28-1' fill='none' stroke='%23FF8C00' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 100% / 100% 0.4em no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 0.7s ease-out;
}

.squiggle.is-pending {
  background-size: 0 0.4em;
}

.beliefs,
.principles,
.fair {
  margin: 0;
  padding: 0;
  list-style: none;
}

.beliefs {
  counter-reset: belief;
}

.beliefs > li,
.principles > li {
  position: relative;
}

.beliefs > li {
  counter-increment: belief;
}

/* Numbered in black, so they don't read as section numbers */
.beliefs > li::before {
  content: counter(belief);
  position: absolute;
  left: calc(var(--rule-left) - var(--text-left));
  font-weight: 800;
}

.beliefs > li + li,
.principles > li + li {
  margin-top: var(--line);
}

/* The bits of the privacy draft still to be filled in */
.todo {
  color: var(--tangerine);
}

/* Coloured cards clipped onto a sheet for the longer lists: smaller type, set
   tighter than the ruled lines, with a thin rule between rows */
.card {
  --card: var(--frosty);
  position: relative;
  margin-left: calc(-1 * (var(--text-left) + var(--card-hang)));
  padding: 1.1em 1.4em 1.2em calc(var(--card-hang) + 70 * var(--d));
  background: var(--card);
  font-size: 0.84em;
  line-height: 1.45;
  rotate: -0.6deg;
}

.card--pink {
  --card: var(--bubblegum);
  rotate: 0.5deg;
}

.card--orange {
  --card: var(--tangerine);
  rotate: -0.4deg;
}

.card .fair {
  margin-top: 0.6em;
}

/* On a coloured card, the highlighter is white */
.card mark {
  --marker: #FFF;
}

/* Centred on the notebook's edge: half over the card, half off the page */
.card .clip {
  top: -0.6em;
  left: calc(var(--card-hang) - 0.85em);
}

.card li {
  padding-block: 0.7em;
}

.card li:first-child {
  padding-top: 0;
}

.card li:last-child {
  padding-bottom: 0;
}

.card li + li {
  margin-top: 0;
  border-top: 1px solid rgb(28 28 28 / 0.22);
}

.card h3 {
  line-height: 1.3;
}

.page-text .card li > * + p {
  margin-top: 0.2em;
}

.card .beliefs > li {
  padding-left: 1.8em;
}

.card .beliefs > li::before {
  left: 0;
}

.loop-note {
  font-weight: 600;
}

.fair li {
  position: relative;
}

.fair li::before {
  content: "–";
  position: absolute;
  left: -1em;
}

.sign-off {
  color: var(--tangerine);
  font-size: calc(2.6 * var(--line));
  font-weight: 800;
  line-height: calc(3 * var(--line));
  letter-spacing: -0.05em;
}

/* The caret that fixes the typo on the beliefs card */
.caret {
  position: relative;
}

.caret::after {
  content: "";
  position: absolute;
  top: 0.12em;
  left: 0.04em;
  width: 0.08em;
  height: 1em;
  background: var(--tangerine);
  animation: caret 0.9s steps(1) infinite;
}

@keyframes caret {
  50% { opacity: 0; }
}

/* The scrapbook bits, out in the margin level with the text they go with.
   They're stuck on as they come into view (main.js). */

.page-text .deco {
  position: absolute;
  left: calc(100% + 40 * var(--d));
  width: calc(var(--w) * var(--d));
  margin: 0;
  rotate: var(--tilt, 0deg);
  translate: 0 calc(var(--drop, 0) * var(--d));
  pointer-events: none;
}

.page-text h2 + .deco + * {
  margin-top: 0;
}

/* Handwritten pull quotes, written in from left to right */
.note {
  font-family: var(--hand);
  font-size: max(1.5rem, 50 * var(--d));
  line-height: 0.95;
  text-wrap: balance;
  clip-path: inset(-50% -20%);
  transition: clip-path 1.1s ease-out;
}

.note.is-pending {
  clip-path: inset(-50% 120% -50% -20%);
}

.note-arrow {
  display: block;
  width: 2.2em;
  margin: 0 0 0.1em -0.6em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Pull quotes on paper: an orange note held on with tape, and a sticky note.
   They're pressed on rather than written. */
.note--torn,
.note--sticky {
  padding: 0.55em 0.7em 0.75em;
  font-size: max(1.35rem, 44 * var(--d));
  line-height: 1;
  clip-path: none;
  transition: opacity 0.3s, scale 0.45s cubic-bezier(0.3, 1.4, 0.6, 1);
}

.note--torn.is-pending,
.note--sticky.is-pending {
  clip-path: none;
  opacity: 0;
  scale: 1.15;
}

.note--torn {
  isolation: isolate;
}

.note--torn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--tangerine);
}

.note--torn::after {
  content: "";
  position: absolute;
  top: -0.5em;
  left: 50%;
  width: 3.4em;
  height: 1.05em;
  translate: -50% 0;
  rotate: -5deg;
  background: rgb(249 249 249 / 0.7);
  box-shadow: 0 0 0 1px rgb(28 28 28 / 0.06);
}

.note--sticky {
  background: var(--frosty);
}

/* Paper clips come in from the left edge, clipping a card or note to the page */
.clip {
  position: absolute;
  top: 0.5em;
  left: -0.85em;
  z-index: 1;
  width: 1.7em;
  height: auto;
  fill: none;
  stroke: var(--coal);
  stroke-width: 1.6;
  stroke-linecap: round;
  rotate: -84deg;
}

/* Sketches of pytty cat in his other poses: drawn in pen as you reach them,
   then a flat colour printed slightly out of register over the top */
.sketch svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.sketch .ink {
  fill: none;
  stroke: var(--coal);
  stroke-width: var(--pen);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sketch .ink > * {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.45, 0, 0.25, 1);
}

.sketch.is-pending .ink > * {
  stroke-dashoffset: 1;
}

.sketch .dots {
  fill: var(--coal);
}

.sketch .dot-nose {
  fill: var(--tangerine);
}

.sketch .wash {
  mix-blend-mode: multiply;
}

.wash--blue {
  fill: var(--frosty);
}

.wash--pink {
  fill: var(--bubblegum);
}

.wash--orange {
  fill: rgb(255 140 0 / 0.4);
}

.sketch .dots,
.sketch .wash,
.sketch-label {
  transition: opacity 0.5s 1.1s;
}

.sketch.is-pending .dots,
.sketch.is-pending .wash,
.sketch.is-pending .sketch-label {
  opacity: 0;
  transition-delay: 0s;
}

.sketch-label {
  margin-top: 0.15em;
  font-family: var(--hand);
  font-size: max(1.3rem, 38 * var(--d));
  line-height: 1;
  text-align: center;
}

.sketch-label--zzz {
  position: absolute;
  top: -0.6em;
  right: 0;
  margin: 0;
  font-size: max(1.6rem, 50 * var(--d));
  letter-spacing: 0.15em;
}

/* Build, measure, learn, pyt: a loop drawn in pen as it comes into view,
   with the words handwritten in. Four lines tall, so what follows stays on
   the ruled lines. */
.diagram {
  height: calc(4 * var(--line));
  margin-inline: 0;
}

.sketch.diagram svg {
  width: auto;
  max-width: 100%;
  height: 100%;
}

.diagram .ink--orange {
  stroke: var(--tangerine);
}

.diagram-words {
  fill: var(--coal);
  font-family: var(--hand);
  font-size: 44px;
  text-anchor: middle;
  transition: opacity 0.6s 0.5s;
}

.diagram.is-pending .diagram-words {
  opacity: 0;
  transition-delay: 0s;
}

.diagram-pyt {
  fill: var(--tangerine);
}

.diagram-again {
  font-size: 32px;
}

/* A phone, or a tablet held upright: the frame is scaled to the width and nudged
   left, so the page still shows beside the cat. Once it's up, the binder takes
   the whole width, less its tabs, so Pyt and the cat both get out of its way. */

@media (max-width: 40rem), (orientation: portrait) and (max-width: 64rem) {
  :root {
    --d: calc(100vw / 1100);
    --frame: calc(-600 * var(--d));
    --line: 1.875rem;
    --rule-top: 6rem;
    --rule-left: 0.5rem;
    --text-left: 2.1rem;
    --margin-line: 1.55rem;
    --text-right: 0.75rem;
    --page-x1: calc(600 * var(--d) + 0.5rem);
    --page-y1: 5.1rem;
    --page-w: calc(100vw - 2.5rem);
    --page-gap: 0.5rem;
    --coil: 1.6rem;
    --tab-w: 1.75rem;
    --cat-x1: 0px;
    --cat-y1: 30%;
  }

  .masthead-inner {
    margin-inline: 0.75rem;
    padding-top: 0;
  }

  .intro {
    top: 4.5rem;
    left: 1rem;
    width: calc(100vw - 2rem);
    opacity: calc(1 - var(--p));
  }

  .cat--lean {
    opacity: calc(1 - var(--p));
  }

  .is-up .intro,
  .is-up .cat--lean {
    visibility: hidden;
  }

  .hero-word {
    font-size: 30vw;
  }

  .say {
    font-size: 1rem;
  }

  .definition {
    font-size: 1.25rem;
  }

  .example {
    font-size: 0.9375rem;
  }

  .see-also {
    font-size: 0.8125rem;
  }

  .page-text,
  .page-no {
    font-size: 1.0625rem;
  }

  .page-text {
    max-width: 36rem;
  }

  .sheet-head {
    font-size: 0.625rem;
  }

  /* Only a corner of the cover shows beside the cat, so its label is narrow */
  .cover-label {
    top: 3.25rem;
    left: 1rem;
    width: 9.5rem;
    padding: 0.75rem 0.85rem 0.65rem;
    border-radius: 0.6rem;
  }

  .cover-title {
    font-size: 1.2rem;
  }

  .cover-owner {
    font-size: 0.5625rem;
  }

  .stain {
    top: 11rem;
    left: 6rem;
    width: 7.5rem;
  }

  .tabs {
    gap: 0.25rem;
  }

  .tab {
    font-size: 0.625rem;
  }

  .page-text h2 {
    font-size: 1.5rem;
  }

  .statement {
    font-size: 1.25rem;
  }

  .diagram {
    height: calc(3 * var(--line));
  }

  /* No margin to write in: the scrapbook bits go between the paragraphs,
     each a whole number of lines tall */
  .page-text .deco {
    position: static;
    width: auto;
    margin: var(--line) auto;
    translate: none;
  }

  .note {
    max-width: 15em;
    font-size: 1.75rem;
    line-height: var(--line);
    text-align: center;
  }

  .note-arrow {
    display: none;
  }

  .note--torn,
  .note--sticky {
    width: fit-content;
    padding: calc(var(--line) / 2) 1rem;
    font-size: 1.4rem;
    line-height: var(--line);
  }

  .sketch svg {
    width: auto;
    height: calc(4 * var(--line));
    margin-inline: auto;
  }

  .sketch-label,
  .sketch-label--zzz {
    position: static;
    margin: 0;
    line-height: var(--line);
  }
}

/* The cat. Pupils drift slowly: he never snaps to attention. */

.cat-body,
.cat-head,
.cat-tail {
  fill: var(--coal);
}

.cat-nose {
  fill: var(--bubblegum);
}

.cat-eye-white {
  fill: var(--cloudy);
  stroke: var(--coal);
}

.cat-pupil {
  fill: var(--coal);
  transition: transform 0.7s cubic-bezier(0.45, 0, 0.25, 1);
}

/* Blinking: a black lid drops over each eye, from above it (along his tilted
   head while he's lying down), clipped to the eye */
.cat-lid {
  fill: var(--coal);
  transform: translate(var(--lid-x, 0px), var(--lid-y));
  transition: transform 0.16s ease-in;
}

.cat.is-blinking .cat-lid,
.cat.is-content .cat-lid {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .cat-pupil,
  .cat-lid,
  .cat-art--sit .cat-eye,
  .cat-body,
  .cat-tail,
  .cat-sit {
    transition: none;
  }
}