/* Fonts live on this site, so the page needs no other servers to draw. Montserrat is one variable file. */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(assets/fonts/montserrat.woff2) format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 500; font-display: swap; src: url(assets/fonts/playfair-500-italic.woff2) format("woff2"); }

:root {
  --gold-dark: #947a48;
  --gold: #b0955c;
  --gold-light: #c2a566;
  --egg: #f0ead6;
  --egg-soft: rgba(240, 234, 214, .8);
  --egg-dim: rgba(240, 234, 214, .62);
  --hair: rgba(240, 234, 214, .13);
  --hair-strong: rgba(240, 234, 214, .24);
  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --voice: "Playfair Display", Georgia, serif;
  --gutter: clamp(20px, 5vw, 64px);
  --between: clamp(24px, 4vw, 56px);
  --section: clamp(76px, 10vw, 140px);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #1e1e1e;
  color: var(--egg);
  font: 400 clamp(15.5px, .3vw + 14.4px, 17px)/1.65 var(--sans);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
/* The desk: charcoal falling away diagonally, with fine grain. It stays put while everything on it scrolls. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #343434 0%, #262626 34%, #1c1c1c 68%, #141414 100%);
}
::selection { background: var(--gold-dark); color: var(--egg); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 4px; text-decoration-color: var(--gold-dark); }
a:hover { color: var(--gold-light); }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.wrap { max-width: 1120px; margin-inline: auto; padding-inline: var(--gutter); }
main { overflow-x: clip; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 40; background: var(--egg); color: #1c1c1c; padding: 10px 16px; }
.skip:focus { top: 12px; }

/* Type: one family. Headings get tighter as they get bigger. */
h1, h2 { font-weight: 450; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 4.5vw, 3.7rem); line-height: 1.07; letter-spacing: -.032em; }
h2 { font-size: clamp(1.65rem, 3vw, 2.55rem); line-height: 1.12; letter-spacing: -.026em; }
h3 { font-weight: 600; font-size: 1rem; }

.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 6px;
  background: var(--gold-light);
  color: #191919;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  transition: background-color .16s ease-out, transform .12s ease-out;
}
.btn:hover { background: var(--egg); color: #191919; }
.btn:active { transform: translateY(1px); }
.btn[aria-busy="true"] { opacity: .65; cursor: progress; }
.btn-small { padding: 8px 16px; font-size: .84rem; }

/* Letterhead: stays with you, gold rule underneath */
.top {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(32, 32, 32, .78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.top-in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 13px; }
.top-in::after {
  content: "";
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 0;
  height: 1px;
  background: var(--gold-dark);
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--gold-light); }
.brand:hover { color: var(--gold-light); }
.brand img { width: 26px; height: 26px; }
.brand span { font-size: .84rem; font-weight: 400; letter-spacing: .26em; text-transform: uppercase; }
.top-links { display: flex; align-items: center; gap: 20px; font-weight: 500; font-size: .88rem; }

/* Hero: the words on the left, the visitor's paperwork on the right */
.hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: var(--between);
  min-height: min(calc(100svh - 58px), 800px);
  padding-block: clamp(36px, 5vw, 64px);
}
.lede { max-width: 33em; margin-top: clamp(18px, 2vw, 26px); font-size: 1.06em; color: var(--egg-soft); }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: clamp(24px, 2.8vw, 34px); }
.hero-cta span { font-size: .88rem; color: var(--egg-dim); }

/* The pile. Sizes are in em so the whole pile scales from one number (--u).
   --x --y --r place each paper; --d is how near it lies (nearer papers are lighter, cast more shadow, move more).
   main.js sets --tx --ty --k --s as the page scrolls; nothing here moves on its own after the opening. */
.pile {
  --u: clamp(.7px, .074vw, .92px);
  position: relative;
  justify-self: end;
  width: 460em;
  height: 392em;
  font-size: var(--u);
}
.doc {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(var(--w) * 1em);
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) rotate(calc(var(--r) * var(--k, 1))) scale(var(--s, 1));
  will-change: transform, opacity;
  pointer-events: none;
}
.doc svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 calc(var(--d) * 1px) calc(var(--d) * 1.5px) rgba(0, 0, 0, .5));
  transform: translate(calc(var(--mx, 0) * var(--d) * 1px), calc(var(--my, 0) * var(--d) * 1px));
  transition: transform .6s var(--ease);
}
.doc .p { fill: var(--pf); stroke: rgba(240, 234, 214, var(--ps)); stroke-width: 1.5; stroke-linejoin: round; }
.doc .l { fill: none; stroke: rgba(240, 234, 214, calc(var(--ps) * .5)); stroke-width: 1.5; stroke-linecap: round; }
.doc .g { fill: none; stroke: var(--gold-light); stroke-width: 1.5; stroke-linecap: round; }
.doc .st { font: 600 10px var(--sans); letter-spacing: .16em; fill: var(--gold-light); text-anchor: middle; }
.doc .q { font: 600 58px var(--sans); fill: var(--gold-light); text-anchor: middle; }
.d-made  { --w: 148; --x: 25%; --y: 0%;  --r: 5deg;   --d: 4;  --n: 0; --pf: #232323; --ps: .48; }
.d-in    { --w: 141; --x: 1%;  --y: 11%; --r: -9deg;  --d: 6;  --n: 1; --pf: #262626; --ps: .58; }
.d-costs { --w: 90;  --x: 56%; --y: 4%;  --r: 10deg;  --d: 7;  --n: 2; --pf: #282828; --ps: .64; }
.d-aside { --w: 206; --x: 26%; --y: 39%; --r: -4deg;  --d: 9;  --n: 3; --pf: #2b2b2b; --ps: .74; }
.d-gst   { --w: 90;  --x: 76%; --y: 45%; --r: -12deg; --d: 10; --n: 4; --pf: #2d2d2d; --ps: .78; }
.d-yours { --w: 112; --x: 7%;  --y: 60%; --r: 7deg;   --d: 13; --n: 5; --pf: #313131; --ps: .9; }

/* Opening: the page fades in, the headline, text and button arrive in order, then the papers are dealt onto the desk.
   Runs only while <html> has .anim, which a timer in index.html removes. */
@keyframes page-in { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.96); } }
@keyframes deal { from { opacity: 0; transform: translateY(-36px) rotate(-7deg) scale(1.08); } }
.anim body { animation: page-in .5s ease-out backwards; }
.anim h1 { animation: rise .9s var(--ease) .12s backwards; }
.anim .lede { animation: rise .9s var(--ease) .3s backwards; }
.anim .hero-cta { animation: pop .6s var(--ease) .48s backwards; }
.anim .doc svg { animation: deal .9s var(--ease) calc(.5s + var(--n) * 90ms) backwards; }

/* Everything below the hero appears only as it scrolls into view. main.js adds .in. */
.js .r { opacity: 0; transform: translateY(18px); transition: opacity .75s ease-out, transform .9s var(--ease); }
.js .r.in { opacity: 1; transform: none; }
.js .r.r-fade { transform: none; }

/* The month. Controls on the left, the statement on the right, straight under the pile. */
.report {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  grid-template-areas: "head sheet" "slide sheet" "note sheet";
  grid-template-rows: auto auto 1fr;
  column-gap: var(--between);
  align-items: start;
  padding-block: clamp(20px, 3vw, 40px) var(--section);
}
/* The heading sits above the travelling papers, so on a phone they pass behind the words, never over them. */
.report-head { position: relative; z-index: 2; grid-area: head; padding-top: 14px; }
.summary { max-width: 26em; margin-top: 14px; color: var(--egg-soft); }

.sheet {
  grid-area: sheet;
  justify-self: end;
  width: 100%;
  max-width: 452px;
  padding: 20px clamp(18px, 2.4vw, 30px) 26px;
  border: 1px solid var(--hair);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(240, 234, 214, .055), rgba(240, 234, 214, .02));
  box-shadow: 0 36px 64px -36px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(240, 234, 214, .08);
}
.sheet-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gold-dark);
  font-size: .69rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--egg-dim);
}
.sheet-top span:last-child { color: var(--gold-light); }
.line { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-block: 12px; border-top: 1px solid var(--hair); }
.line:first-child { border-top: 0; }
.line dt { font-weight: 500; font-size: .97rem; line-height: 1.4; }
.line small { display: block; margin-top: 1px; font-weight: 400; font-size: .76rem; color: var(--egg-dim); }
.line dd { font-size: clamp(1.35rem, 2vw, 1.6rem); font-weight: 300; line-height: 1.2; letter-spacing: -.01em; white-space: nowrap; }
.line output { display: inline-block; }
/* A subtotal gets a firmer rule above it. The total gets the bookkeeper's double underline. */
.line-sub { border-top-color: var(--hair-strong); }
.line-sub dd { font-weight: 450; }
.line-total { align-items: center; padding-block: 18px 0; border-top-color: var(--gold-dark); }
.line-total dt { color: var(--gold-light); }
.line-total dd { padding-bottom: 7px; border-bottom: 3px double var(--gold-dark); font-size: clamp(2.3rem, 4vw, 3rem); line-height: 1; color: var(--gold-light); }

.slide { grid-area: slide; margin-top: clamp(26px, 3.4vw, 44px); }
.slide label { display: block; font-size: .88rem; color: var(--egg-dim); }
input[type=range] {
  --p: 15.8%;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  cursor: grab;
  touch-action: pan-y;
}
input[type=range]:active { cursor: grabbing; }
input[type=range]::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(to right, var(--gold-light) var(--p), rgba(240, 234, 214, .25) var(--p));
}
input[type=range]::-moz-range-track { height: 2px; background: rgba(240, 234, 214, .25); }
input[type=range]::-moz-range-progress { height: 2px; background: var(--gold-light); }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 30px;
  margin-top: -14px;
  background: var(--gold-light);
  transform: skewX(-12deg);
}
input[type=range]::-moz-range-thumb {
  width: 16px;
  height: 30px;
  border: 0;
  border-radius: 0;
  background: var(--gold-light);
  transform: skewX(-12deg);
}
input[type=range]:focus-visible { outline-offset: -4px; }
.sheet-note { grid-area: note; max-width: 34em; margin-top: 10px; font-size: .78rem; line-height: 1.5; color: var(--egg-dim); }

/* While the papers are still in the pile, the statement's figures are blank. Each one shows as its paper lands (--o). */
.js.lively .line output { opacity: var(--o, 0); transform: translateY(calc((1 - var(--o, 0)) * 10px)); }

/* What I handle: a T-account. What people say on the left, what happens on the right. */
.help { padding-bottom: var(--section); }
.help h2 { max-width: 15em; margin-bottom: clamp(30px, 4.4vw, 54px); }
.rows { position: relative; border-top: 1px solid var(--gold-dark); }
.rows::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 54%;
  width: 1px;
  background: linear-gradient(var(--gold-dark), rgba(148, 122, 72, .12));
}
.row { display: grid; grid-template-columns: 54% minmax(0, 1fr); align-items: center; padding-block: clamp(20px, 2.8vw, 34px); }
.voice { padding-right: var(--between); font: italic 500 clamp(1.3rem, 2.4vw, 1.9rem)/1.28 var(--voice); color: var(--gold-light); }
.row > div { padding-left: var(--between); }
.row h3 { margin-bottom: 3px; }
.row div p { max-width: 27em; font-size: .94em; color: var(--egg-soft); }
/* One row in focus at a time: main.js marks the row nearest the middle of the screen. */
.focus .row > * { opacity: .38; transition: opacity .4s ease-out; }
.focus .row.on > * { opacity: 1; }
.also { margin-top: clamp(18px, 2.4vw, 28px); font-size: .94em; color: var(--egg-dim); }
/* The two column labels above the T. They also make clear the left side is examples of how it feels, not client quotes. */
.rows-head, .promise h3 { font-size: .69rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--egg-dim); }
.rows-head { display: grid; grid-template-columns: 54% minmax(0, 1fr); padding-bottom: 10px; }
.rows-head span + span { padding-left: var(--between); }

/* After you book: a real sequence, so it is one line with three stops. The line fills as you go (--f). */
.steps { padding-bottom: var(--section); }
.steps h2 { margin-bottom: clamp(34px, 4.6vw, 56px); }
.track { --f: 0; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--between); padding-top: 28px; }
.track::before, .track::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--hair-strong); }
.track::after { background: var(--gold-light); transform-origin: 0 0; transform: scaleX(var(--f)); }
.stop { position: relative; }
.stop::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -33px;
  left: 0;
  width: 9px;
  height: 9px;
  border: 1px solid var(--egg-dim);
  border-radius: 50%;
  background: #242424;
  transition: background-color .3s ease-out, border-color .3s ease-out;
}
.stop.lit::before { border-color: var(--gold-light); background: var(--gold-light); }
.num { display: block; font-size: clamp(2.3rem, 3.8vw, 3.1rem); font-weight: 300; line-height: 1; color: var(--egg-dim); transition: color .3s ease-out; }
.stop.lit .num { color: var(--gold-light); }
.stop h3 { margin-top: 12px; font-size: 1.05rem; }
.stop p { max-width: 24em; margin-top: 4px; font-size: .94em; color: var(--egg-soft); }

/* Our promise: the pledge in larger type on the left, the five values as a short list on the right */
.promise {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  grid-template-areas: "lead values" "standard values";
  grid-template-rows: auto 1fr;
  gap: clamp(28px, 4vw, 44px) var(--between);
  align-items: start;
  padding-bottom: var(--section);
}
.promise-lead { grid-area: lead; }
.pledge { max-width: 23em; margin-top: 18px; font-size: clamp(1.12rem, 1.75vw, 1.36rem); line-height: 1.5; }
.values-block { grid-area: values; padding-top: 14px; }
.values { margin-top: 12px; border-top: 1px solid var(--gold-dark); }
.values > div { display: grid; grid-template-columns: 9.8em minmax(0, 1fr); gap: 2px 18px; align-items: baseline; padding-block: 13px; border-bottom: 1px solid var(--hair); }
.values dt { font-weight: 600; color: var(--gold-light); }
.values dd { font-size: .94em; color: var(--egg-soft); }
.standard { grid-area: standard; }
.standard p { max-width: 33em; margin-top: 10px; font-size: .94em; color: var(--egg-soft); }

/* The close: a few words and Paul's card, left on the desk */
.book {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: var(--between);
  align-items: center;
  padding-bottom: var(--section);
  scroll-margin-top: 84px;
}
.book-copy > h2 { margin-bottom: 16px; }
.book-copy > p { max-width: 29em; color: var(--egg-soft); }
.book-copy > p:first-of-type { color: var(--egg); }
.book-copy > p + p { margin-top: 10px; }
.book-copy > p:last-child { margin-top: 26px; }
/* The card keeps a business card's shape at every screen size. Its text is sized from the card's own width
   (.card-slot is the measuring box), so a phone gets the same card, smaller, and never a tall stacked block.
   The first font-size line is for browsers without container units: it uses the card's width on a phone. */
.card-slot { container-type: inline-size; justify-self: end; width: 100%; max-width: 452px; }
.card {
  --cw: min(100vw - 2 * var(--gutter), 452px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto;
  align-items: start;
  gap: 1.1em 1em;
  aspect-ratio: 1.68;
  padding: 1.7em;
  border: 1px solid rgba(148, 122, 72, .6);
  border-radius: 10px;
  background: linear-gradient(145deg, #2f2f2f, #1c1c1c 72%);
  box-shadow: 0 44px 70px -34px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(240, 234, 214, .1);
  font-size: clamp(11.5px, calc(var(--cw) / 27), 16px);
  font-size: clamp(11.5px, 3.7cqw, 16px);
  font-style: normal;
  rotate: -2deg;
}
.card a { text-decoration: none; }
.card-brand { display: flex; align-items: center; gap: .9em; color: var(--gold-light); font-size: .8em; letter-spacing: .26em; text-transform: uppercase; }
.card-brand img { width: 2.35em; height: 2.35em; }
.phone { font-size: 1.5em; font-weight: 400; line-height: 1.25; letter-spacing: -.01em; color: var(--gold-light); white-space: nowrap; }
.phone:hover { color: var(--egg); }
.card-who { align-self: end; max-width: 11em; font-size: max(.8em, 11.5px); line-height: 1.45; color: var(--egg-dim); }
.card-who strong { display: block; font-size: 1.25em; font-weight: 600; color: var(--egg); }
.card-lines { align-self: end; display: grid; justify-items: end; font-size: max(.86em, 12px); font-weight: 500; line-height: 1.4; text-align: right; }
.card-lines > * { padding-block: .22em; }
/* The narrowest phones: a little less air in the wordmark, so it never touches the phone number. */
@container (max-width: 300px) {
  .card-brand { letter-spacing: .15em; }
  .phone { font-size: 1.4em; }
}

/* Meet Paul: his photo as a print on the desk, facing his own words. The page ends here, on a booking button. */
.meet {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: var(--between);
  align-items: center;
  padding-bottom: var(--section);
}
.portrait {
  justify-self: start;
  width: min(100%, 300px);
  border: 1px solid rgba(148, 122, 72, .6);
  border-radius: 6px;
  box-shadow: 0 34px 56px -28px rgba(0, 0, 0, .85);
  rotate: -4deg;
}
.meet-copy > h2 { margin-bottom: 16px; }
.meet-copy > p { max-width: 32em; color: var(--egg-soft); }
.quote { max-width: 25em; margin: 24px 0 0; font: italic 500 clamp(1.14rem, 1.75vw, 1.4rem)/1.45 var(--voice); color: var(--gold-light); }
.meet-copy > p:last-child { margin-top: 28px; }

.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 32px;
  padding-block: 18px 22px;
  font-size: .76rem;
  color: var(--egg-dim);
}
.foot::before { content: ""; flex: 0 0 100%; height: 1px; margin-bottom: 12px; background: var(--hair); }

.sticky { display: none; }

/* One column: the pile sits under the button, and the statement comes before the slider so a thumb never covers the numbers. */
@media (max-width: 899px) {
  .hero { display: block; min-height: 0; padding-bottom: 8px; }
  .pile { --u: .64px; width: 100%; max-width: 400px; height: 318em; margin-top: 34px; }
  .d-made  { --x: 20%; --y: 0%; }
  .d-in    { --x: 0%;  --y: 12%; }
  .d-costs { --x: 45%; --y: 4%; }
  .d-aside { --x: 55%; --y: 52%; }
  .d-gst   { --x: 81%; --y: 2%; }
  .d-yours { --x: 29%; --y: 60%; }
  .report { display: block; padding-top: clamp(40px, 8vw, 56px); }
  .report-head { padding-top: 0; }
  .sheet { max-width: none; margin-top: 26px; }
  .slide { margin-top: 26px; }
  .rows::before { left: 0; }
  .rows { border-top: 0; }
  .rows-head { display: block; padding-left: 20px; }
  .rows-head span + span { display: none; }
  .row { display: block; padding-left: 20px; }
  .voice { padding-right: 0; }
  .row > div { padding-left: 0; margin-top: 10px; }
  .track { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 0 0 0 30px; }
  .track::before, .track::after { right: auto; bottom: 0; width: 1px; height: auto; }
  .track::after { transform: scaleY(var(--f)); }
  .stop::before { top: 14px; left: -34px; }
  .promise { display: block; }
  .values-block { padding-top: 0; margin-top: 32px; }
  .values > div { grid-template-columns: minmax(0, 1fr); }
  .standard { margin-top: 32px; }
  .book { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .card-slot { justify-self: start; }
  .meet { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .portrait { width: 168px; margin-left: 4px; }
  .card { rotate: -1.2deg; }
}

@media (max-width: 520px) {
  .top-links .btn-small { display: none; }
  .brand span { letter-spacing: .22em; }
  .sticky {
    display: block;
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 14px;
    z-index: 25;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
    visibility: hidden;
    opacity: 0;
    transition: opacity .2s, visibility .2s, background-color .2s;
  }
  .sticky.show { visibility: visible; opacity: 1; }
  .foot { padding-bottom: 88px; }
}

/* Reduced motion (<html class="calm">, set in index.html from the visitor's own setting): the pile is a still
   drawing, the statement is complete from the start, and everything else arrives as a soft fade with no movement. */
.calm { scroll-behavior: auto; }
.calm.anim h1, .calm.anim .lede, .calm.anim .hero-cta, .calm.anim .doc svg { animation-name: page-in; }
.calm.js .r { transform: none; }
.calm .doc svg { transition: none; }

@media print {
  .js .r { opacity: 1; transform: none; }
  .js.lively .line output { opacity: 1; transform: none; }
  .focus .row > * { opacity: 1; }
  .top, .sticky { position: static; }
  .pile { display: none; }
}