/* The other pages (about, contact, the small print, thanks, 404): a strip of the same kitchen table under the header,
   with things from the week lying on it and Biscuit at its edge, the page's own index card laid on the wood, then the
   page's words on plain paper. Scripts off or held still, the strip is a finished picture; band.js brings it to life. */
@property --lift { syntax: "<number>"; inherits: false; initial-value: 0; }

.band { position: relative; overflow: hidden; overflow: clip; background: #c98a4a url("../img/b/table-1800.webp") 55% 40% / max(135%, 1300px) auto no-repeat; padding: calc(var(--top-h) + 56px) var(--gap) 64px; min-height: 460px; }
.band::after { /* the table's near edge under the strip: the rounded lip of the wood catching the light, then its side in shade */ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: linear-gradient(#e6bb80 0 1.5px, #b5773a 1.5px 4px, #8d5726 4px, #6e4019); box-shadow: 0 -6px 8px -4px rgba(80,45,10,.25); pointer-events: none; z-index: 2; }
.band-things { position: absolute; inset: 0; perspective: 1600px; }
.band-lean { position: absolute; inset: 0; transform-origin: 60% 50%; }
.band-in { position: relative; z-index: 3; max-width: 1180px; margin: 0 auto; pointer-events: none; }
.band-card { pointer-events: auto; max-width: 640px; transform: rotate(-.6deg); box-shadow: 6px 6px 0 var(--manila), 6px 6px 0 1.5px rgba(51,54,59,.25), 14px 22px 30px rgba(80,45,10,.28); }
.band-card h1 { font-size: clamp(32px, 3vw, 44px); line-height: 1.18; margin-bottom: 12px; }
.band-card p { font-size: 18px; line-height: 30px; }
.band-card .kicker { font-size: 15px; line-height: 22px; }

/* A thing on the table: where it lies on a desk (x, y, width, turn) and on a phone (px, py, pw). */
.thing { position: absolute; left: var(--x); top: var(--y); width: var(--w); --d: 1;
  transform: translate(calc(var(--mx, 0) * var(--d) * 1px), calc(var(--my, 0) * var(--d) * 1px - var(--lift) * 14px)) rotate(calc(var(--r, 0deg) + var(--lift) * 2.5deg)) scale(calc(1 + var(--lift) * .035));
  transition: --lift 260ms cubic-bezier(.2,1.5,.4,1); -webkit-tap-highlight-color: transparent; }
.scrap, .note { -webkit-tap-highlight-color: transparent; }
.thing.up { --lift: 1; transition: --lift 160ms ease-out; }
.thing.paper { cursor: pointer; }
.thing.paper img { pointer-events: none; -webkit-user-drag: none; user-select: none; display: block; width: 100%; height: auto; background: #fff; box-shadow: 0 0 0 1px rgba(51,54,59,.12), 10px 14px 18px rgba(80,45,10,.32); }
.thing.paper.up img { box-shadow: 0 0 0 1px rgba(51,54,59,.12), 18px 26px 26px rgba(80,45,10,.28); }
.thing.prop { cursor: pointer; background-image: url("../img/b/props.webp"); background-repeat: no-repeat; filter: drop-shadow(6px 8px 6px rgba(70,40,10,.28)); }
.prop-eraser { aspect-ratio: 192 / 136; background-size: 625% 330.88%; background-position: 5.952% 40.764%; }
.prop-leaf { aspect-ratio: 1; background-size: 465.12% 174.42%; background-position: 36.093% 39.583%; }
.prop-red { aspect-ratio: 218 / 206; background-size: 550.46% 218.45%; background-position: 66.191% 50%; }
.prop-blue { aspect-ratio: 206 / 212; background-size: 582.52% 212.26%; background-position: 94.97% 51.261%; }
.crumbs i { position: absolute; width: 9px; height: 7px; border-radius: 45%; background: #e9a3a3; box-shadow: 1px 2px 0 rgba(120,60,40,.25); }

/* Biscuit, the same picture the home page's table uses, chin on his paws and his paws on the wood just above the
   table's near edge (his paws end 10.6% above the picture's foot). */
.band .biscuit { position: absolute; z-index: 40; left: min(var(--x), calc(100% - var(--w) - 8px)); bottom: calc(18px - var(--w) * .106); width: var(--w); aspect-ratio: 1; --d: .5; transform: translate(calc(var(--mx, 0) * .4px), calc(var(--my, 0) * .3px)); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.biscuit .b-whole { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; }
/* Biscuit arrives whole: on a slow phone his picture would paint in bands as it downloads, so (scripts on) he and his
   shadow show only once the whole picture has loaded, and settle in over a fifth of a second. */
html.living .band .biscuit > .b-whole { opacity: 0; transition: opacity .2s ease-out; }
html.living .band .biscuit > .b-whole.in { opacity: 1; }
html.living .band .biscuit:not(:has(> .b-whole.in))::before { opacity: 0; }
html.living .band .biscuit::before { transition: opacity .2s ease-out; }

/* A note on the table (thanks): a square of yellow paper June writes on. */
.note { background: #fbe08a; padding: 30px 14px 18px; aspect-ratio: 1; display: grid; place-items: center; box-shadow: 8px 12px 16px rgba(80,45,10,.3); font: 400 30px/1.15 var(--font); color: #4a4d52; text-align: center; }
.note::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12%; background: rgba(0,0,0,.05); }
/* The scraps of a page Biscuit got to first (404). */
.scraps { position: absolute; right: 0; bottom: 0; width: 46%; height: 62%; filter: drop-shadow(4px 6px 5px rgba(80,45,10,.32)); }
.scrap { position: absolute; display: grid; place-items: center; width: 92px; height: 104px; background: #fff; color: var(--graphite); font: 700 52px/1 var(--font);
  background-image: linear-gradient(transparent 22%, var(--blue) 22% calc(22% + 2px), transparent 0, transparent 50%, rgba(79,134,219,.6) 50% calc(50% + 2px), transparent 0, transparent 78%, var(--red) 78% calc(78% + 2px), transparent 0);
  clip-path: polygon(4% 6%, 22% 0, 38% 7%, 57% 1%, 79% 6%, 97% 2%, 100% 26%, 94% 47%, 100% 70%, 95% 96%, 72% 100%, 51% 93%, 29% 100%, 8% 95%, 0 72%, 6% 49%, 0 24%); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }

.nf-links { margin: 6px 0 6px; padding-left: 1.1em; }
.nf-links li { font-size: 17px; line-height: 27px; margin-bottom: 6px; }
.nf-links li::marker { color: var(--red); }
.nf-links a { font-weight: 700; }
.band-card .row { margin-top: 14px; }
.note p { margin: 0; font-size: 34px; line-height: 1.2; color: #3f4247; }

/* The pause for what moves by itself on the strip. */
.band-calm { display: none; }
html.living .band-calm:not([hidden]) { display: inline-grid; place-items: center; position: absolute; z-index: 4; right: var(--gap); top: calc(var(--top-h) + 16px); width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 2px solid var(--graphite); background: var(--paper); color: var(--graphite); box-shadow: 2px 3px 0 var(--manila); cursor: pointer; }
.band-calm .i-play, .band-calm[aria-pressed="true"] .i-pause { display: none; }
.band-calm[aria-pressed="true"] .i-play { display: block; }
.band-calm.nudge { background: var(--yellow); box-shadow: 0 0 0 4px var(--paper), 0 0 0 6.5px var(--graphite); }
html.paused .thing { transition: none; }

/* The page's words under the strip. */
.pg { padding: 56px var(--gap) 72px; }
.pg-in { max-width: 760px; margin: 0 auto; }
.pg h2 { margin: 40px 0 12px; }
.pg h2:first-child { margin-top: 0; }
.pg p, .pg li { font-size: 19px; line-height: 31px; }
.pg ul { padding-left: 1.2em; }
.pg li { margin-bottom: 8px; }
.pg li::marker { color: var(--red); }
.pg a { overflow-wrap: anywhere; }
.pg .lead { font-size: 21px; line-height: 33px; }
.pg-two { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px 64px; align-items: start; }
.pg-two > .card { margin-top: 8px; }
.pg .card p { font-size: 17px; line-height: 27px; }
.mail-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; margin: 8px 0 0; padding: 0; list-style: none; }
.mail-cards li { margin: 0; }
.mail-cards .card { height: 100%; }
.mail-cards h2 { margin: 0 0 8px; font-size: 24px; }
.mail-cards .addr { display: inline-block; font-weight: 700; font-size: 20px; line-height: 28px; margin: 4px 0 10px; overflow-wrap: anywhere; }
.pg-small { font-size: 16px; line-height: 25px; }
.pg-free { background: var(--manila); }

@media (max-width: 760px) {
  .band { padding: calc(var(--top-h) + 210px) 12px 40px; min-height: 0; background-image: url("../img/b/table-band-1300.webp"); }
  .thing { left: var(--px, var(--x)); top: var(--py, var(--y)); width: var(--pw, var(--w)); }
  .band .biscuit { left: var(--px, var(--x)); bottom: auto; top: var(--py); width: var(--pw, var(--w)); }
  .band-card { transform: none; }
  .band-card h1 { font-size: 32px; line-height: 38px; }
  .band-card p { font-size: 17px; line-height: 27px; }
  html.living .band-calm:not([hidden]) { right: 12px; top: calc(var(--top-h) + 14px); bottom: auto; }
  .pg { padding: 40px 16px 56px; }
  .pg p, .pg li { font-size: 18px; line-height: 29px; }
  .pg-two, .mail-cards { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .scraps { width: 100%; height: 210px; top: var(--top-h); bottom: auto; }
  .scrap { width: 70px; height: 80px; font-size: 40px; }
  .note p { font-size: 24px; }
}
/* Very large text or zoom: the strip is a short band of wood and the card. */
@media (max-width: 340px) {
  .band { padding-top: calc(var(--top-h) + 24px); }
  .band-things { display: none; }
  .band-card h1 { font-size: 28px; line-height: 34px; }
}