/* A telephone pole on a wet Portland street. The sheet is a flyer taken down and held in your hands. */
:root { --night: #0d1426; --paper: #f6f3ea; --ink: #1b1b1b; --accent: #7a1418; --display: 'Courier Prime'; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--night); color: #eee; -webkit-text-size-adjust: 100%; }
body { font: 16px/1.5 'Courier Prime', 'Courier New', monospace; overscroll-behavior: none; }

#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; outline: none; }
#scene.dragging { cursor: grabbing; }
#scene.over { cursor: pointer; }
.vignette { position: fixed; inset: 0; pointer-events: none; z-index: 2; background: radial-gradient(130% 100% at 50% 45%, transparent 55%, rgba(4,6,14,.55) 100%); }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sr-only button:focus { outline: none; }

/* ---------------------------------------------------------------- loading: a blank flyer gets stapled up */
#loader { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, #1d2a4a 0%, #0d1426 55%, #070a14 100%); transition: opacity .7s ease; }
#loader.gone { opacity: 0; }
.ld-rain { position: absolute; inset: 0; opacity: .35;
  background-image: repeating-linear-gradient(100deg, transparent 0 22px, rgba(170,190,220,.18) 22px 23px, transparent 23px 61px);
  background-size: 200% 200%; animation: ldrain .6s linear infinite; }
@keyframes ldrain { from { background-position: 0 0; } to { background-position: -18px 120px; } }
.ld-sheet { position: relative; width: 120px; height: 155px; background: #efece3; transform: rotate(-2deg);
  box-shadow: 0 10px 30px rgba(0,0,0,.5), inset 0 0 30px rgba(120,100,70,.18); }
.ld-sheet i { position: absolute; width: 20px; height: 4px; border-radius: 1px; background: linear-gradient(#f5f5f5, #8d9399 60%, #55595e);
  box-shadow: 1px 2px 1px rgba(0,0,0,.35); opacity: 0; transform: scale(1.8); transition: opacity .15s, transform .15s cubic-bezier(.3,1.6,.6,1); }
.ld-sheet i:nth-child(1) { left: 10px; top: 10px; } .ld-sheet i:nth-child(2) { right: 10px; top: 12px; }
.ld-sheet i:nth-child(3) { right: 12px; bottom: 12px; } .ld-sheet i:nth-child(4) { left: 11px; bottom: 10px; }
.ld-sheet i.in { opacity: 1; transform: scale(1); }

/* ---------------------------------------------------------------- sound */
.sound { position: fixed; z-index: 12; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); width: 40px; height: 40px;
  border: 0; border-radius: 20px; background: rgba(10,14,26,.45); color: rgba(235,240,250,.85); display: grid; place-items: center; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: opacity .4s; }
.sound:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sound .waves { display: none; } .sound[aria-pressed="true"] .waves { display: inline; } .sound[aria-pressed="true"] .mute { display: none; }
body.reading .sound { opacity: 0; pointer-events: none; }

/* ---------------------------------------------------------------- the flyer, taken down */
.sheet-wrap { position: fixed; inset: 0; z-index: 40; background: rgba(6,9,18,0); transition: background .45s ease; }
.sheet-wrap.on { background: rgba(6,9,18,.72); }
.sheet-wrap[hidden] { display: none; }
.sheet-scroll { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 56px 16px 72px; }
.sheet { position: relative; max-width: 880px; margin: 0 auto; padding: 34px 40px 44px; background-color: var(--paper); color: var(--ink);
  background-image: var(--grain, none); background-size: 256px 256px;
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.04) inset; opacity: 0; transform: translateY(26px); transition: opacity .35s ease .12s, transform .45s cubic-bezier(.2,.8,.2,1) .08s; }
.sheet-wrap.on .sheet { opacity: 1; transform: none; }
.sheet::before, .sheet::after { content: ''; position: absolute; top: 12px; width: 22px; height: 5px; border-radius: 1px; background: linear-gradient(#f2f2f2, #8d9399 60%, #55595e); box-shadow: 1px 2px 1px rgba(0,0,0,.3); }
.sheet::before { left: 18px; transform: rotate(-6deg); } .sheet::after { right: 18px; transform: rotate(4deg); }

.sheet-top { display: grid; gap: 22px; margin: 4px 0 30px; align-items: center; }
.held { display: grid; justify-items: center; }
.held canvas { display: block; width: min(320px, 72%); height: auto; box-shadow: 0 14px 30px rgba(0,0,0,.35); transform: rotate(-1.2deg); }
.held.flying canvas { visibility: hidden; }
.fly { position: fixed; z-index: 45; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; box-shadow: 0 20px 40px rgba(0,0,0,.45); will-change: transform; }

.sheet-head { text-align: center; margin: 0; }
.sheet-lede { margin: 18px auto 0; max-width: 560px; font: 400 18px/1.5 'Courier Prime', monospace; }
.sheet-lede:empty { display: none; }
@media (min-width: 760px) {
  .sheet-top { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 36px; }
  .held canvas { width: 100%; }
  .sheet-head { text-align: left; }
  .sheet-lede { margin-left: 0; }
}
.sheet-head h1 { margin: 0; font: 400 clamp(30px, 6vw, 54px)/1.05 var(--display), 'Courier Prime', serif; color: var(--accent); letter-spacing: .01em; }
.sheet-client { margin: 8px 0 0; font: 700 13px/1.3 'Courier Prime', monospace; letter-spacing: .18em; text-transform: uppercase; opacity: .75; }

.sheet-body { --ab-fg: var(--ink); --ab-muted: color-mix(in srgb, var(--ink) 68%, transparent); --ab-accent: var(--accent); --ab-chrome: 150px; font-size: 16px; }
.sheet-body .ab-lede { font: 400 19px/1.5 'Courier Prime', monospace; text-align: center; max-width: 640px; margin: 0 auto; }
.sheet-body .ab-heading { font: 700 15px/1.3 'Courier Prime', monospace; letter-spacing: .14em; text-transform: uppercase; border-top: 2px dashed color-mix(in srgb, var(--ink) 35%, transparent); padding-top: 18px; }
.sheet-body .ab-text { max-width: 660px; }
.sheet-body .ab-frame { box-shadow: 0 6px 18px rgba(0,0,0,.28); }
.sheet-body .ab-image img { box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.sheet-body .ab-credits { border-top: 2px dashed color-mix(in srgb, var(--ink) 35%, transparent); padding-top: 16px; font-size: 13px; }
.sheet-body audio { filter: sepia(.2); }
.sheet-body a { color: var(--accent); }
.about-lines { display: grid; gap: 10px; text-align: center; font-size: 18px; }
.about-lines p { margin: 0; }

.close { position: fixed; z-index: 46; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); width: 44px; height: 44px; border: 0; border-radius: 22px;
  background: rgba(10,14,26,.72); color: #fff; font: 30px/44px system-ui, sans-serif; cursor: pointer; opacity: 0; transition: opacity .3s .2s; }
.sheet-wrap.on .close { opacity: 1; }
.close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 640px) {
  .sheet-scroll { padding: 58px 0 40px; }
  .sheet { padding: 26px 16px 34px; }
  .held canvas { width: min(260px, 74%); }
  .sheet-body .ab-lede { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .sheet, .sheet-wrap, #loader { transition: none; }
  .ld-rain { animation: none; }
}