/* Pencil Reply: the site's main stylesheet. Header and footer are styled only here, at /css/site.css. */
@font-face { font-family: "Andika"; src: url("../fonts/andika-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Andika"; src: url("../fonts/andika-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --graphite: #33363B; --red: #D7372A; --blue: #4F86DB; --yellow: #F6C333; --paper: #FFFFFF; --manila: #F4EFE3;
  --wood: #c98a4a;
  --font: "Andika", "Trebuchet MS", system-ui, sans-serif;
  --gap: clamp(16px, 2.4vw, 32px);
  --top-h: 64px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--graphite); font: 400 19px/30px var(--font); }
img, video, svg { max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

h1, h2, h3 { font-weight: 700; margin: 0; text-wrap: balance; }
.display { font-size: clamp(36px, 4.4vw, 64px); line-height: 1.16; }
h2, .h2 { font-size: clamp(25px, 2.2vw, 30px); line-height: 1.2; }
h3, .h3 { font-size: 21px; line-height: 25px; }
.ruled { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 3px; text-underline-offset: 0.12em; text-decoration-skip-ink: none; }
p { margin: 0 0 0.6em; }
.small { font-size: 15px; line-height: 22px; }

/* Buttons: a red one to buy, an outlined one for the free week. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 10px 18px; border-radius: 6px; font: 700 17px/1.2 var(--font); text-decoration: none; border: 2px solid var(--graphite); background: var(--paper); color: var(--graphite); cursor: pointer; transition: transform 120ms ease-out, box-shadow 120ms ease-out, background-color 120ms; -webkit-tap-highlight-color: transparent; box-shadow: 0 2px 0 var(--graphite); }
.btn:hover { transform: translateY(-1px); box-shadow: 0 3px 0 var(--graphite); }
.btn:active { transform: translateY(2px); box-shadow: 0 0 0 var(--graphite); }
.btn-red { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 2px 0 #8f2219; }
.btn-red:hover { box-shadow: 0 3px 0 #8f2219; }
.btn-red:active { box-shadow: 0 0 0 #8f2219; }
.btn-sm { min-height: 40px; padding: 6px 12px; font-size: 15px; }

/* The yellow price sticker. */
.sticker { display: inline-grid; place-items: center; width: 64px; height: 64px; flex: none; border-radius: 50%; background: var(--yellow); border: 2px solid var(--graphite); font: 700 22px/1 var(--font); color: var(--graphite); transform: rotate(-8deg); }

/* An index card: white, blue ruling, a red margin rule along the headline, a binder clip, a manila shadow. */
.card { position: relative; background: var(--paper); border: 1.5px solid var(--graphite); border-radius: 4px; padding: 26px 24px 18px; box-shadow: 6px 6px 0 var(--manila), 6px 6px 0 1.5px rgba(51,54,59,.25);
  background-image: repeating-linear-gradient(to bottom, transparent 0 29px, rgba(79,134,219,.28) 29px 30px); background-position: 0 56px; background-size: 100% 100%; background-repeat: no-repeat; }
.card::before { /* the binder clip */ content: ""; position: absolute; top: -10px; right: 34px; width: 34px; height: 18px; background: var(--graphite); border-radius: 3px 3px 5px 5px; box-shadow: inset 0 -5px 0 #1d1f22; }
.card::after { content: ""; position: absolute; top: -22px; right: 40px; width: 22px; height: 16px; border: 2.5px solid #8b9097; border-bottom: 0; border-radius: 8px 8px 0 0; }
.card .kicker { font-size: 15px; line-height: 22px; margin: 0 0 4px; }
.card h1, .card h2 { margin-bottom: 10px; }
.card p { font-size: 17px; line-height: 27px; }
.card .row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.card .fine { font-size: 15px; line-height: 22px; margin-top: 12px; }
.offer { display: flex; gap: 14px; align-items: center; margin: 12px 0 14px; }
.offer p { margin: 0; font-size: 16px; line-height: 23px; }

/* Header: the logo on its own paper tab, and the price tab with both ways in. */
.top { position: fixed; z-index: 50; inset: 0 0 auto 0; display: flex; justify-content: space-between; align-items: flex-start; padding: 12px var(--gap); pointer-events: none; }
.top > * { pointer-events: auto; }
.top-logo { display: block; background: var(--paper); padding: 10px 14px 8px; border-radius: 0 0 6px 6px; margin-top: -12px; box-shadow: 0 1px 0 rgba(51,54,59,.12); }
.top-logo img { display: block; width: 150px; height: auto; }
.top-tab { display: flex; align-items: center; gap: 10px; background: var(--paper); border: 1.5px solid var(--graphite); border-radius: 6px; padding: 6px 6px 6px 8px; box-shadow: 4px 4px 0 var(--manila); }
.tab-price { font-size: 16px; line-height: 1.2; white-space: nowrap; padding: 0 4px; }
.tab-price b { color: var(--red); font-size: 19px; }
.tab-soon { font-size: 15px; line-height: 1.2; white-space: nowrap; padding: 0 6px; }
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; font: 700 15px/1 var(--font); padding: 12px 10px; border-radius: 4px; min-height: 40px; display: flex; align-items: center; gap: 6px; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::before { content: ""; width: 16px; height: 10px; background: linear-gradient(var(--graphite) 0 2px, transparent 2px 4px, var(--graphite) 4px 6px, transparent 6px 8px, var(--graphite) 8px 10px); }
.menu ul { position: absolute; right: 0; top: calc(100% + 10px); margin: 0; padding: 10px 0; list-style: none; background: var(--paper); border: 1.5px solid var(--graphite); border-radius: 6px; box-shadow: 4px 4px 0 var(--manila); min-width: 230px; }
.menu li a { display: block; padding: 10px 18px; font-size: 17px; text-decoration: none; }
.menu li a:hover { background: var(--manila); }
/* Short screens (a phone on its side): every item stays a 44 px finger target and the list never runs off the screen. */
.menu ul { max-height: calc(100vh - var(--top-h, 64px) - 16px); max-height: calc(100dvh - var(--top-h, 64px) - 16px); overflow-y: auto; overscroll-behavior: contain; }
/* The list clips what passes its edge, so a menu link's keyboard ring sits just inside the link. */
.menu li a:focus-visible { outline-offset: -3px; }
@media (max-height: 30em) { .menu ul { padding: 4px 0; } .menu li a { padding-top: 7px; padding-bottom: 7px; } }

/* The phone's bottom bar, with the price and both ways in, for the whole page. */
.bar { display: none; }
@media (max-width: 760px) {
  :root { --top-h: 56px; }
  .top { padding: 8px 10px; }
  .top-logo { padding: 8px 10px 6px; margin-top: -8px; }
  .top-logo img { width: 140px; }
  .top-tab { gap: 4px; padding: 3px 4px; }
  .top-tab .btn-line, .top-tab .tab-price { display: none; }
  .top-tab .btn { min-height: 38px; padding: 6px 10px; font-size: 15px; white-space: nowrap; }
  .top-tab .w-wide { display: none; }
  .tab-soon { display: none; }
  .bar { display: flex; position: fixed; z-index: 49; inset: auto 8px max(8px, env(safe-area-inset-bottom)) 8px; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; background: var(--paper); border: 1.5px solid var(--graphite); border-radius: 6px; box-shadow: 0 -2px 0 rgba(244,239,227,.9), 3px 3px 0 var(--manila); transition: transform 300ms cubic-bezier(.2,.8,.2,1), opacity 300ms; }
  .bar .bar-price { flex: 1; font-size: 15px; line-height: 1.2; }
  .bar .bar-price b { color: var(--red); font-size: 18px; }
  .bar .btn { min-height: 44px; padding: 6px 12px; font-size: 15px; }
  html.bar-later .bar { transform: translateY(140%); opacity: 0; }
  html.bar-later.bar-on .bar { transform: none; opacity: 1; }
  body { padding-bottom: 76px; }
}
/* Very large text or zoom: the header tabs shrink to fit, and the bar steps aside (each page's own card carries the price). */
@media (max-width: 340px) {
  html { overflow-x: hidden; }
  h1, h2, h3, p { overflow-wrap: break-word; }
  .offer, .c8 .c8-head { flex-wrap: wrap; }
  .offer p { min-width: 0; }
  .card { padding-left: 16px; padding-right: 16px; }
  .card h1, .card h1 .p-name { font-size: 30px; line-height: 1.15; }
  .card h2 { font-size: 24px; line-height: 1.2; }
  .top { padding: 6px; }
  .top-logo { padding: 6px; margin-top: -6px; }
  .top-logo img { width: 40px; height: 40px; }
  .menu summary { padding: 8px 6px; font-size: 14px; }
  .menu ul { min-width: 0; width: max-content; max-width: calc(100vw - 12px); right: -7px; }
  .menu li a { padding: 10px 14px; overflow-wrap: anywhere; }
  .top-tab .btn { display: none; }
  .bar { display: none; }
  body { padding-bottom: 0; }
}

/* A phone on its side: the header is one low row with the price and both ways in, and the bottom bar steps aside, so
   the screen's short height goes to the page. */
@media (pointer: coarse) and (max-height: 31.24em) and (min-aspect-ratio: 4/3) and (min-width: 341px) {
  :root { --top-h: 48px; }
  .top { padding: 6px 12px; }
  .top-logo { padding: 6px 10px 5px; margin-top: -6px; }
  .top-logo img { width: 116px; }
  .top-tab { gap: 4px; padding: 3px 4px 3px 6px; box-shadow: 3px 3px 0 var(--manila); }
  .top-tab .btn-line { display: inline-flex; }
  .top-tab .tab-price, .tab-soon { display: inline; }
  .tab-price { font-size: 15px; } .tab-price b { font-size: 17px; }
  .tab-soon { font-size: 14px; padding: 0 4px; }
  .menu summary { padding: 6px 8px; min-height: 36px; }
  .top-tab .btn { min-height: 36px; padding: 4px 10px; font-size: 14px; white-space: nowrap; }
  .top-tab .w-wide { display: none; }
  .bar { display: none; }
  body { padding-bottom: 0; }
}

/* The world's pause only shows while the world is alive. */
html:not(.living) .calm-btn, html:not(.living) .btn-calm { display: none !important; }

/* Biscuit, wherever he lies on the table: a soft shadow on the wood under his chin and paws, from the morning light
   above the table, so he rests on it. */
.biscuit::before { content: ""; position: absolute; left: 8%; width: 76%; top: 80%; height: 14%; background: radial-gradient(closest-side, rgba(80,45,10,.55), rgba(80,45,10,.22) 62%, rgba(80,45,10,0)); transform: translate(2%, 6%); pointer-events: none; }

/* The signup form: the same index card wherever it shows. */
.signup label { display: block; font-weight: 700; margin: 6px 0 6px; }
.signup input[type=email] { width: 100%; min-height: 48px; font: 400 18px/1.2 var(--font); padding: 10px 12px; border: 1.5px solid var(--graphite); border-radius: 4px; background: #fff; color: var(--graphite); }
.signup input[type=email]:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.signup .tick { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 16px; line-height: 24px; margin: 14px 0; }
.signup .tick input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--red); }
#signup, #free-pages { scroll-margin-top: calc(var(--top-h) + 28px); }
/* A signup the launch refused comes back to the page at #signup. The form says so only when this visitor really sent
   it a moment ago (js/signup.js remembers the sending): a link to the form never claims a failed attempt. */
.signup .su-err { display: none; margin: 4px 0 14px; padding: 10px 12px; border: 2px solid var(--red); border-radius: 4px; background: #fff; font-size: 16px; line-height: 24px; }
html.su-failed #signup:target .su-err { display: block; }

/* Footer: the logo, the shop, the small print and where to write, under a strip of handwriting-paper ruling. */
.foot { position: relative; z-index: 2; background: var(--paper); border-top: 1.5px solid var(--graphite); padding: 40px var(--gap) 48px; font-size: 16px; line-height: 26px; }
.foot::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 20px; background: linear-gradient(var(--blue), var(--blue)) 0 0/100% 2px no-repeat, repeating-linear-gradient(90deg, var(--blue) 0 12px, transparent 12px 20px) 0 9px/100% 2px no-repeat, linear-gradient(var(--red), var(--red)) 0 18px/100% 2px no-repeat; opacity: .8; }
.foot-in { max-width: 1180px; margin: 24px auto 0; display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.3fr; gap: 28px 40px; }
.foot-h { font-weight: 700; font-size: 16px; margin: 0 0 6px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin: 0 0 4px; }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot li a { display: inline-block; padding: 4px 0; }
.foot img { width: 140px; height: auto; display: block; margin-bottom: 8px; }
.foot .small a { text-decoration: underline; overflow-wrap: anywhere; }
@media (max-width: 900px) { .foot-in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .foot-in { grid-template-columns: minmax(0, 1fr); gap: 22px; } }