@font-face { font-family: "Fraunces"; src: url("/fonts/Fraunces_300Light.ttf") format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/fonts/Fraunces_400Regular_Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --bg: #0d0b0a; --bone: #ece5d6; --dim: rgba(236, 229, 214, .48); --line: rgba(255, 255, 255, .08); --sheet: #16130f;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  /* Hydraulic, zero-overshoot easing for fire-and-forget fades (class C); interruptible motion uses JS springs. */
  --ease: linear(0, .015, .06 2.5%, .134 5.2%, .234 8.2%, .354 11.6%, .488 15.4%, .627 19.8%, .76 25%, .867 31.4%, .938 38.6%, .978 47.4%, .995 58.6%, 1 100%);
  --t: 320ms;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; background: var(--bg); color: var(--bone); }
body {
  font: 17px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;        /* no font inflation on rotate */
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;             /* no pull-to-refresh or rubber band behind the story */
  min-height: 100dvh;
}
:where(button, label[role="button"]) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; touch-action: manipulation; }
[hidden] { display: none !important; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }

/* Squircles where supported, plain radius elsewhere (Safari falls back cleanly). */
.sq { border-radius: var(--r, 14px); }
@supports (corner-shape: squircle) { .shutter, .btn, .ghost-icon, .sheet, .frame, .label { corner-shape: squircle; } }

/* Start */
.start {
  position: fixed; inset: 0; display: grid; grid-template-rows: 1fr auto;
  padding: calc(var(--safe-t) + 24px) calc(var(--safe-r) + 28px) calc(var(--safe-b) + 40px) calc(var(--safe-l) + 28px);
}
.hook { align-self: center; font: 300 30px/1.25 var(--serif); letter-spacing: -.01em; max-width: 15em; }
.hook span { color: var(--dim); font-style: italic; font-weight: 400; font-size: 21px; display: inline-block; margin-top: 10px; }
.shutter {
  justify-self: center; width: 78px; height: 78px; border-radius: 26px;
  border: 3px solid var(--bone); background: rgba(236, 229, 214, .1);
  transition: transform 160ms var(--ease), background-color var(--t) var(--ease);
}
.shutter:active { transform: scale(.92); background: rgba(236, 229, 214, .2); }
.gallery-hint { position: absolute; right: calc(var(--safe-r) + 24px); bottom: calc(var(--safe-b) + 54px); }

/* Sheets and buttons */
.sheet {
  position: fixed; left: calc(var(--safe-l) + 12px); right: calc(var(--safe-r) + 12px); bottom: calc(var(--safe-b) + 12px);
  background: var(--sheet); border: 1px solid var(--line); border-radius: 30px; padding: 24px; z-index: 20;
  animation: rise var(--t) var(--ease) both;
}
@keyframes rise { from { transform: translateY(24px); opacity: 0; } }
.sheet p { font: 300 19px/1.4 var(--serif); }
.row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }
.btn { padding: 13px 22px; border-radius: 14px; font-weight: 600; font-size: 16px; display: inline-flex; align-items: center; }
.btn.solid { background: var(--bone); color: var(--bg); }
.btn.ghost { border: 1px solid var(--line); font-weight: 400; }
.ghost-icon {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; /* 44 pt: Apple's minimum target */
  background: rgba(13, 11, 10, .55); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); /* static bars only, never on moving layers */
}

/* Story */
.story { position: fixed; inset: 0; overflow: hidden; background: var(--bg); will-change: transform; touch-action: none; } /* no page pinch over the story; the stage owns pinch */
.stage { position: absolute; inset: 0; touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.zoom { position: absolute; inset: 0; transform-origin: 0 0; }
/* Legibility scrim under the text: eased alpha stops so the fade has no visible edge. */
.stage::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 66%; pointer-events: none;
  background: linear-gradient(to top, rgba(13,11,10,.92) 0%, rgba(13,11,10,.679) 10%, rgba(13,11,10,.498) 19%, rgba(13,11,10,.351) 25%,
    rgba(13,11,10,.256) 34%, rgba(13,11,10,.178) 47%, rgba(13,11,10,.116) 56.5%, rgba(13,11,10,.069) 65%, rgba(13,11,10,.039) 73%,
    rgba(13,11,10,.019) 80.2%, rgba(13,11,10,.007) 86.1%, rgba(13,11,10,.002) 91%, rgba(13,11,10,0) 95.2%);
}
#gl, #photo-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.frames { position: absolute; inset: 0; pointer-events: none; }
.frame {
  position: absolute; border: 1px solid rgba(236, 229, 214, .85); border-radius: 14px; opacity: 0;
  transition: opacity 480ms var(--ease);
}
.frames.on .frame { opacity: .9; }
.label {
  position: absolute; top: calc(var(--safe-t) + 74px); left: 50%; transform: translateX(-50%);
  background: var(--sheet); border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; font-size: 15px; z-index: 5;
}

.text {
  position: absolute; left: calc(var(--safe-l) + 26px); right: calc(var(--safe-r) + 26px); bottom: calc(var(--safe-b) + 92px);
  /* Long-press selects the story (copy a line) without fighting the stage gestures above it. */
  -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
}
.line { font: 300 clamp(24px, 6.6vw, 32px)/1.32 var(--serif); letter-spacing: -.005em; transition: opacity var(--t) var(--ease); }
.prev { font: 300 18px/1.35 var(--serif); color: var(--dim); margin-bottom: 12px; transition: opacity var(--t) var(--ease); }
.status { font: italic 400 17px/1.4 var(--serif); color: var(--dim); white-space: pre-line; }
.text.dim .line { opacity: .45; }
.fade { opacity: 0; }

.paused {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 22px;
  display: grid; place-items: center; background: rgba(13, 11, 10, .55); border: 1px solid var(--line);
  animation: rise var(--t) var(--ease) both;
}
.paused svg { width: 26px; height: 26px; }

.bar {
  position: absolute; top: calc(var(--safe-t) + 12px); left: calc(var(--safe-l) + 16px); right: calc(var(--safe-r) + 16px);
  display: flex; gap: 10px; z-index: 6;
}
.spacer { flex: 1; }
.sources ul { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 10px; }
.sources a { color: var(--dim); font-size: 15px; text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fiction { font-style: italic !important; }

@media (hover: hover) { .ghost-icon:hover { background: rgba(236, 229, 214, .08); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 50ms !important; }
}
@media (min-width: 700px) { .text { max-width: 640px; } .hook { font-size: 38px; } }