/* pollyalbrightbooks.com - the split stage. One half of the screen never moves: the cover of Released to Owner, the
   terrier keeping her place under the lamp. The other half is the reading column. Colours come from the cover: the
   night sky, the cream lettering, the lamp; the Blue Book sheet is cream paper in blue ink, as the book has it. */

@font-face {
  font-family: "Literata";
  src: url("/assets/fonts/literata.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("/assets/fonts/literata-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --night: #0d2631;
  --deep: #07171e;
  --panel: #15394a;
  --ink: #f3ead2;
  --muted: #b8c8c6;
  --lamp: #f4b547;
  --lamp-up: #ffd27a;
  --paper: #efe6cb;
  --blue: #1c3d86;

  --face: "Literata", Georgia, "Times New Roman", serif;

  --step-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-body: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  --step-lead: clamp(1.3125rem, 1.15rem + 0.7vw, 1.6875rem);
  --step-head: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
  --step-name: clamp(2.75rem, 0.6rem + 5.6vw, 6rem);

  --edge: clamp(1.25rem, 3.4vw, 3.5rem);
  --gap: clamp(6rem, 12vw, 10.5rem);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font-family: var(--face);
  font-size: var(--step-body);
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, dl, dd, dt { margin: 0; }
a { color: inherit; text-underline-offset: 0.22em; }
i { font-style: italic; }
:focus-visible { outline: 3px solid var(--lamp); outline-offset: 3px; }
::selection { background: var(--lamp); color: var(--deep); }

h1, h2 { font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; }
h1 { font-size: var(--step-name); max-width: 11ch; }
h2 { font-size: var(--step-head); }
h3 { font-size: var(--step-lead); font-weight: 600; line-height: 1.25; }
.lead { font-size: var(--step-lead); line-height: 1.4; }

.skip { position: absolute; left: var(--edge); top: -5rem; z-index: 30; padding: 0.75rem 1rem; background: var(--lamp); color: var(--deep); font-weight: 600; }
.skip:focus { top: 0.5rem; }

/* the two halves */
.split { display: grid; grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); align-items: start; }
.column { padding: 0 var(--edge); min-width: 0; }
.column main > section { max-width: 37rem; margin-inline: auto; scroll-margin-top: 2rem; }
.column main > section + section { margin-top: var(--gap); }
.column main { padding-bottom: var(--gap); }

/* the fixed half: the whole cover, nothing of it cut off, on the night behind it */
.stage { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; background: var(--deep); }
.stage-pics { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.stage-pics img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 1600ms ease; animation: breathe 32s ease-in-out infinite alternate; }
.stage-pics img.is-on { opacity: 1; }
.stage-pics .stage-phone { display: none; }
.stage-bar { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding: 0 1.25rem; min-height: 3.5rem; align-items: center; background: var(--paper); color: var(--deep); font-size: var(--step-small); font-weight: 600; line-height: 1.3; }
@keyframes breathe { from { transform: scale(1); } to { transform: scale(1.035); } }

/* the bar: name, three links, one action */
.bar { display: flex; align-items: center; gap: 1.75rem; min-height: 5rem; }
.mark { margin-right: auto; white-space: nowrap; font-size: var(--step-lead); font-weight: 600; letter-spacing: -0.01em; text-decoration: none; line-height: 1; }
.links { display: flex; gap: 1.5rem; }
.links a { font-size: var(--step-small); font-weight: 600; text-decoration: none; padding: 0.5rem 0; white-space: nowrap; }
.links a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.button { display: inline-block; padding: 0.7rem 1.1rem; background: var(--lamp); color: var(--deep); font-size: var(--step-small); font-weight: 600; line-height: 1.3; text-decoration: none; white-space: nowrap; transition: transform 160ms var(--ease), background-color 160ms var(--ease); }
.button:hover { background: var(--lamp-up); transform: translateY(-2px); }
.button:active { transform: translateY(1px); }
.button-big { padding: 1rem 1.5rem; font-size: var(--step-body); }

/* the first screen */
.hero { min-height: calc(100svh - 5rem); display: flex; flex-direction: column; justify-content: center; padding: 2rem 0 5rem; }
.hero .lead { margin-top: 2.25rem; max-width: 30ch; }
.actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; }
.quiet { font-size: var(--step-body); font-weight: 600; color: var(--muted); }
a.quiet { color: var(--ink); }

/* the book */
.book-cover { display: none; }
.book h2 { margin-bottom: 2rem; }
.book p + p { margin-top: 1.25rem; }
.cells { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 3rem; }
.cell { display: flex; align-items: center; min-height: 4.5rem; padding: 0.5rem 1.25rem; font-weight: 600; line-height: 1.3; text-decoration: none; margin: 0; }
.cell-ink { background: var(--lamp); color: var(--deep); transition: transform 160ms var(--ease), background-color 160ms var(--ease); }
.cell-ink:hover { background: var(--lamp-up); transform: translateY(-2px); }
.cell-tone { background: var(--panel); color: var(--ink); }
a.cell-tone:hover { background: #1c4a5f; }

/* the Blue Book: a sheet of the county's ledger, cream paper, blue ink, its top and bottom edges cut */
.ledger-pic { display: none; }
.sheet { background: var(--paper); color: var(--blue); padding: 3.75rem clamp(1.25rem, 3vw, 2.75rem) 3.5rem;
  clip-path: polygon(0 14px, 2.5% 0, 5% 14px, 7.5% 0, 10% 14px, 12.5% 0, 15% 14px, 17.5% 0, 20% 14px, 22.5% 0, 25% 14px, 27.5% 0, 30% 14px, 32.5% 0, 35% 14px, 37.5% 0, 40% 14px, 42.5% 0, 45% 14px, 47.5% 0, 50% 14px, 52.5% 0, 55% 14px, 57.5% 0, 60% 14px, 62.5% 0, 65% 14px, 67.5% 0, 70% 14px, 72.5% 0, 75% 14px, 77.5% 0, 80% 14px, 82.5% 0, 85% 14px, 87.5% 0, 90% 14px, 92.5% 0, 95% 14px, 97.5% 0, 100% 14px,
    100% calc(100% - 14px), 97.5% 100%, 95% calc(100% - 14px), 92.5% 100%, 90% calc(100% - 14px), 87.5% 100%, 85% calc(100% - 14px), 82.5% 100%, 80% calc(100% - 14px), 77.5% 100%, 75% calc(100% - 14px), 72.5% 100%, 70% calc(100% - 14px), 67.5% 100%, 65% calc(100% - 14px), 62.5% 100%, 60% calc(100% - 14px), 57.5% 100%, 55% calc(100% - 14px), 52.5% 100%, 50% calc(100% - 14px), 47.5% 100%, 45% calc(100% - 14px), 42.5% 100%, 40% calc(100% - 14px), 37.5% 100%, 35% calc(100% - 14px), 32.5% 100%, 30% calc(100% - 14px), 27.5% 100%, 25% calc(100% - 14px), 22.5% 100%, 20% calc(100% - 14px), 17.5% 100%, 15% calc(100% - 14px), 12.5% 100%, 10% calc(100% - 14px), 7.5% 100%, 5% calc(100% - 14px), 2.5% 100%, 0 calc(100% - 14px)); }
.sheet h2 { text-align: center; }
.sheet-note { margin: 1.25rem auto 2.5rem; max-width: 36ch; text-align: center; font-size: var(--step-small); line-height: 1.5; }
.entry { width: 100%; border-collapse: collapse; }
.entry th, .entry td { padding: 0.6rem 0; vertical-align: top; text-align: left; border-bottom: 3px dotted currentColor; }
.entry th { width: 8.5rem; padding-right: 1rem; font-weight: 600; white-space: nowrap; }
.entry td { font-style: italic; }
.entry-last th, .entry-last td { border-bottom: 0; padding-top: 1rem; }
.entry-last td { font-size: var(--step-lead); line-height: 1.3; min-height: 2.5rem; }
.written { position: relative; display: inline-block; min-width: 9rem; min-height: 1.3em; }
.written.is-writing { animation: write 700ms var(--ease) both; }
.written.is-struck::after { content: ""; position: absolute; left: -0.15em; right: -0.15em; top: 54%; height: 3px; background: currentColor; transform-origin: left center; animation: strike 420ms 700ms var(--ease) both; }
@keyframes write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes strike { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pick { display: none; margin-top: 1.5rem; }
.js .pick { display: block; }
.pick-say { font-size: var(--step-small); font-weight: 600; margin-bottom: 0.75rem; }
.pick-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.pick button { appearance: none; border: 0; cursor: pointer; min-height: 3.5rem; padding: 0.6rem 0.75rem; background: var(--blue); color: var(--paper); font: 600 var(--step-small)/1.25 var(--face); transition: transform 160ms var(--ease), background-color 160ms var(--ease); }
.pick button:hover { background: #26509f; transform: translateY(-2px); }
.pick button:active { transform: translateY(1px); }
.pick button[aria-pressed="true"] { background: var(--deep); color: var(--paper); transform: none; }
.pick button:focus-visible { outline-color: var(--deep); }
.verdict { margin-top: 1.75rem; font-size: var(--step-small); line-height: 1.55; }
.meaning { margin-top: 2.5rem; font-size: var(--step-lead); line-height: 1.4; }

/* what to expect: a name on the left, its answer on the right; alignment alone ties them */
.expect h2 { margin-bottom: 2.25rem; }
.expect h3 { margin: 3.5rem 0 1.25rem; }
.rows > div { display: grid; grid-template-columns: minmax(8rem, 34%) 1fr; column-gap: 1.5rem; padding: 0.55rem 0; }
.rows dt { font-weight: 600; }
.rows dd { color: var(--ink); }

/* about */
.about h2 { margin-bottom: 2rem; }
.about p + p { margin-top: 1.25rem; }

/* the close: the street once more across the whole screen, the form in its dark left third */
.close { position: relative; min-height: 90svh; display: flex; align-items: flex-end; background: var(--deep); overflow: hidden; }
.close-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; filter: brightness(0.82); }
.close-text { position: relative; width: min(100%, 31rem); margin: 0 0 0 var(--edge); padding: 2.25rem 2rem 2.5rem; background: var(--night); }
.close h2 { margin-bottom: 1.25rem; }
.close .lead { font-size: var(--step-body); line-height: 1.5; margin-bottom: 1.75rem; }
label { display: block; font-size: var(--step-small); font-weight: 600; margin-bottom: 0.5rem; }
.field { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; }
input[type="email"] { width: 100%; min-height: 3.5rem; padding: 0 1rem; border: 0; background: var(--paper); color: var(--deep); font: 400 var(--step-body)/1.2 var(--face); }
input[type="email"]:focus-visible { outline: 3px solid var(--lamp); outline-offset: 2px; }
form button { appearance: none; border: 0; cursor: pointer; min-height: 3.5rem; padding: 0 1.4rem; background: var(--lamp); color: var(--deep); font: 600 var(--step-body)/1.2 var(--face); white-space: nowrap; transition: transform 160ms var(--ease), background-color 160ms var(--ease); }
form button:hover { background: var(--lamp-up); transform: translateY(-2px); }
form button:active { transform: translateY(1px); }
.trap { position: absolute; left: -200vw; top: 0; }
.consent { margin-top: 1.25rem; font-size: var(--step-small); line-height: 1.5; color: var(--muted); }
.consent a { color: var(--ink); }

/* the foot: one quiet line */
.foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 1rem 2rem; padding: 2.25rem var(--edge) 1.9rem; background: var(--deep); font-size: var(--step-small); line-height: 1.5; }
.foot-what { color: var(--muted); max-width: 40ch; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: center; }
.foot-links a, .foot-top a { font-weight: 600; }
.foot-top { text-align: right; }

/* the plain pages (legal notice, privacy notice, the sign-up's own pages): one reading column on the night */
.plain-bar { display: flex; align-items: center; gap: 1.75rem; min-height: 5rem; padding: 0 var(--edge); }
.plain { display: grid; grid-template-columns: minmax(0, 46rem) minmax(0, 1fr); gap: var(--edge); padding: 3rem var(--edge) var(--gap); align-items: start; }
.plain h1 { grid-column: 1 / -1; font-size: var(--step-head); max-width: none; margin-bottom: 1.5rem; }
.plain-body h2 { font-size: var(--step-lead); font-weight: 600; letter-spacing: 0; line-height: 1.25; margin: 2.5rem 0 0.75rem; }
.plain-body p + p, .plain-body ul + p, .plain-body p + ul { margin-top: 1rem; }
.plain-body ul { margin: 0; padding-left: 1.25rem; }
.plain-body li + li { margin-top: 0.5rem; }
.plain-body a { font-weight: 600; }
.plain-aside { justify-self: end; position: sticky; top: 2rem; }
.plain-aside img { width: min(100%, 17.5rem); }
mark.gap { background: var(--lamp); color: var(--deep); padding: 0 0.25em; }

/* entrances: the parts of a section come in one after the other, once; without the script nothing is hidden */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.js .in .reveal { opacity: 1; transform: none; }
.js .in .reveal:nth-child(2) { transition-delay: 80ms; }
.js .in .reveal:nth-child(3) { transition-delay: 160ms; }
.js .in .reveal:nth-child(4) { transition-delay: 240ms; }
.js .in .reveal:nth-child(5) { transition-delay: 320ms; }
.js .in .reveal:nth-child(6) { transition-delay: 400ms; }

@media (max-width: 1239px) {
  .links { display: none; }
}

/* the phone: the street first, held behind the top of the column, which slides up over it */
@media (max-width: 899px) {
  .split { display: flex; flex-direction: column-reverse; align-items: stretch; }
  .stage { position: sticky; top: 0; height: 58svh; z-index: 0; }
  .stage-pics img { display: none; }
  .stage-pics .stage-phone { display: block; opacity: 1; object-fit: cover; object-position: 50% 70%; }
  .column { position: relative; z-index: 1; background: var(--night); }
  .bar { min-height: 4.25rem; }
  .bar .button { display: none; }
  .hero { min-height: 0; padding: 2.5rem 0 0; }
  .column main > section { max-width: none; }
  .book-cover { display: block; width: min(72%, 20rem); margin: 0 auto 2.5rem; }
  .ledger-pic { display: block; width: 44%; margin: 0 0 -1.5rem auto; position: relative; z-index: 1; }
  .entry th { width: 6.75rem; }
  .pick-row { grid-template-columns: 1fr; }
  .cells { grid-template-columns: 1fr; }
  .rows > div { grid-template-columns: 1fr; }
  .rows dd { color: var(--muted); }
  .close { display: block; min-height: 0; }
  .close-pic { position: static; height: 44svh; object-position: 50% 70%; filter: none; }
  .close-text { width: 100%; margin: 0; padding: 2.5rem var(--edge) 3rem; }
  .field { grid-template-columns: 1fr; }
  .foot { grid-template-columns: 1fr; }
  .foot-links { justify-content: flex-start; }
  .foot-top { text-align: left; }
  .plain { grid-template-columns: 1fr; }
  .plain-aside { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stage-pics img, .written.is-writing, .written.is-struck::after { animation: none; }
  .stage-pics img { transition: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .button, .cell-ink, .pick button, form button { transition: none; }
}