/* Layout: a single centered column. Location, headline and button sit centered at the top;
   a short divider hands over to the story, which reads left-aligned like a book page. */
:root{
  --bg:#f7f6f2;          /* off-white */
  --ink:#2b2f2d;         /* dark grey text */
  --muted:#7a807c;
  --faint:#b9bcb7;        /* end-of-story mark */
  --rule:#dcdcd6;        /* light grey divider */
  --accent:#f4511e;      /* vibrant orange, same as the icon */
  --accent-deep:#d63f0d; /* same orange, a touch deeper, for small text so it stays readable */
  --accent-soft:#fee4d8; /* reading highlight */
  --on-accent:#ffffff;
  --display:"Aktura","Gloock",Georgia,"Times New Roman",serif;
  --body:"Literata",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  /* Type scale: fluid, 360px phone → 1100px desktop. Ratio ≈1.25 on phones, ≈1.33 on desktop. */
  --step--2:clamp(0.6875rem, 0.6571rem + 0.1351vw, 0.75rem);  /* 11 → 12px */
  --step--1:clamp(0.7812rem, 0.7508rem + 0.1351vw, 0.8438rem);  /* 12.5 → 13.5px */
  --step-0:clamp(1.0625rem, 1.0017rem + 0.2703vw, 1.1875rem);  /* 17 → 19px */
  --step-1:clamp(1.3125rem, 1.1909rem + 0.5405vw, 1.5625rem);  /* 21 → 25px */
  --step-2:clamp(1.6562rem, 1.4282rem + 1.0135vw, 2.125rem);  /* 26.5 → 34px */
  --step-3:clamp(2.0625rem, 1.6976rem + 1.6216vw, 2.8125rem);  /* 33 → 45px */
  --step-4:clamp(2.5625rem, 1.9848rem + 2.5676vw, 3.75rem);  /* 41 → 60px */
  --step-5:clamp(3.25rem, 2.3986rem + 3.7838vw, 5rem);  /* 52 → 80px */
  --step-6:clamp(4.125rem, 2.9088rem + 5.4054vw, 6.625rem);  /* 66 → 106px */
  /* Main button: gradient stops and the two soft "lights" drifting inside it */
  --btn-a:#ff8a4c; --btn-b:#f4511e; --btn-c:#d93a12;
  --glow-1:rgba(255,214,150,.85); --glow-2:rgba(196,30,8,.75);
  color-scheme:light;
}
/* Easter egg: murder mode (long-press the main button). Same tokens, inverted. */
:root[data-mode="murder"]{
  --bg:#0f0e0e; --ink:#ebe7e1; --muted:#8f8a84; --rule:#2e2a28; --faint:#4b4744;
  --accent:#e3262d;        /* blood red */
  --accent-deep:#ff5c5c;   /* lighter red for small text on black */
  --accent-soft:#3b1416; --on-accent:#ffffff;
  --btn-a:#ff4a4f; --btn-b:#d71f27; --btn-c:#7d0b10;
  --glow-1:rgba(255,140,140,.7); --glow-2:rgba(40,0,0,.85);
  color-scheme:dark;
}
:root{--accent-line:color-mix(in srgb,var(--accent) 34%,var(--bg))}   /* light accent stroke for secondary outlines */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;background:var(--bg);transition:background-color .7s ease}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:var(--step-0);line-height:1.65;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
  transition:background-color .7s ease,color .7s ease}
.wrap{--story-gap:56px;max-width:620px;margin:0 auto;padding-inline:20px;padding-block:0 72px;display:flex;flex-direction:column}

/* Top block: centered */
/* Opening screen: headline + button centred in the viewport, location pinned above.
   Once the first story arrives it eases down to its natural height ("settled"). */
.hero{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  min-height:calc(100svh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));padding-block:84px;
  transition:min-height .8s cubic-bezier(.2,.8,.2,1),padding .8s cubic-bezier(.2,.8,.2,1)}
.hero.settled{min-height:0;padding-block:120px 0}
.hero .eyebrow{position:absolute;top:24px;left:0;right:0;margin-inline:auto;width:max-content;max-width:100%}
.eyebrow{min-height:1.6em;min-width:12em;padding:6px 12px;border-radius:999px;cursor:default;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation;transition:color .3s ease;font-family:var(--mono);font-size:var(--step--2);letter-spacing:.05em;text-wrap:balance;color:var(--muted);font-variant-numeric:tabular-nums}
h1{font-family:var(--display);font-weight:400;font-size:var(--step-6);line-height:.93;margin:0;
  color:var(--ink);text-wrap:balance}
h1 em{font-style:normal;color:var(--accent);transition:color .7s ease}

.cta{position:relative;display:flex;flex-direction:column;align-items:center;margin-top:44px}
.go{display:inline-flex;align-items:center;gap:10px;font:inherit;font-weight:600;font-size:var(--step-0);line-height:1;cursor:pointer;border:0;border-radius:999px;
  padding:20px 32px;color:var(--on-accent);
  background:linear-gradient(120deg,var(--btn-a) 0%,var(--btn-b) 52%,var(--btn-c) 100%);
  box-shadow:0 10px 24px -12px var(--btn-c),inset 0 1px 0 rgba(255,255,255,.18);
  position:relative;isolation:isolate;overflow:hidden;transform:translateZ(0);   /* clips the lights to the pill, Safari too */
  transition:transform .15s ease,opacity .15s ease,color .7s ease,box-shadow .7s ease;
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}
/* Two heavily blurred lights drifting slowly inside the button */
.go::before,.go::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none;filter:blur(14px);transition:opacity .4s ease}
.go::before{width:62%;height:170%;left:-14%;top:-35%;background:radial-gradient(circle,var(--glow-1),transparent 68%);
  opacity:.55;animation:drift-a 9s ease-in-out infinite alternate}
.go::after{width:58%;height:160%;right:-12%;top:-30%;background:radial-gradient(circle,var(--glow-2),transparent 70%);
  opacity:.5;animation:drift-b 12s ease-in-out infinite alternate}
@keyframes drift-a{0%{transform:translate(0,0) scale(1)}50%{transform:translate(55%,12%) scale(1.15)}100%{transform:translate(110%,-8%) scale(.95)}}
@keyframes drift-b{0%{transform:translate(0,0) scale(1.05)}50%{transform:translate(-60%,-10%) scale(.9)}100%{transform:translate(-115%,8%) scale(1.1)}}
.go .label,.go .spinner{position:relative;z-index:1}
.go:active{transform:scale(.97)}
.go:disabled{opacity:.65;cursor:progress}
/* Label trimmed to its cap height so it sits optically centred in the pill */
.go .label{display:block;text-box:trim-both cap alphabetic}
/* Loading: soft, disabled-looking pill with a small spinner */
.go.is-loading,.go.is-loading:disabled{opacity:1;background:var(--accent-soft);box-shadow:none;color:var(--accent-deep);cursor:progress;transform:translateZ(0)}
.go.is-loading::before,.go.is-loading::after{opacity:0}
.spinner{width:15px;height:15px;border-radius:50%;flex:none;
  border:2px solid color-mix(in srgb,var(--accent) 22%,transparent);border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.spinner{animation:breathe 1.6s ease-in-out infinite;border-color:var(--accent)}}
.go:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Messages float under the button so they never shift the layout */
.status{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);width:max-content;max-width:min(90vw,520px);font-family:var(--mono);font-size:var(--step--1);color:var(--muted);margin:0;text-align:center;text-wrap:balance}

.eyebrow.custom{color:var(--accent-deep)}
.eyebrow:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Place picker: a card that drops from the top (stays clear of the on-screen keyboard) */
.sheet-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.28);opacity:0;transition:opacity .25s ease;z-index:20}
.sheet-backdrop.open{opacity:1}
.sheet{position:fixed;z-index:21;left:12px;right:12px;top:calc(env(safe-area-inset-top,0px) + 12px);max-width:560px;margin:0 auto;
  max-height:min(72vh,560px);display:flex;flex-direction:column;gap:12px;padding:18px 18px 12px;border-radius:22px;
  background:var(--bg);color:var(--ink);box-shadow:0 18px 50px rgba(0,0,0,.22);
  transform:translateY(-16px);opacity:0;transition:transform .25s ease,opacity .25s ease}
.sheet.open{transform:none;opacity:1}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sheet h3{margin:0;font-family:var(--display);font-weight:400;font-size:var(--step-2);line-height:1.1}
#placeInput{font:inherit;font-size:max(16px,var(--step-0));line-height:normal;height:52px;width:100%;padding:0 16px;border-radius:14px;border:1px solid var(--rule);
  background:transparent;color:var(--ink);-webkit-appearance:none;appearance:none}
#placeInput:focus{outline:none;border-color:var(--accent-line)}
#placeInput::-webkit-search-cancel-button,#placeInput::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.suggestions{list-style:none;margin:0;padding:0;overflow-y:auto;min-height:0;display:flex;flex-direction:column}
.suggestions button{width:100%;text-align:left;display:flex;flex-direction:column;gap:2px;padding:10px 4px;border:0;border-bottom:1px solid var(--rule);
  background:none;color:var(--ink);font:inherit;cursor:pointer}
.suggestions li:last-child button{border-bottom:0}
.suggestions button:active,.suggestions button:focus-visible{color:var(--accent-deep);outline:none}
.suggestions .name{font-size:var(--step-0);line-height:1.3}
.suggestions .rest{font-family:var(--mono);font-size:var(--step--2);color:var(--muted)}
.suggestions .searching{display:flex;align-items:center;gap:10px}
.suggestions .searching .spinner{width:13px;height:13px}
.suggestions .note{padding:10px 4px;font-family:var(--mono);font-size:var(--step--2);color:var(--muted)}
.sheet-credit{margin:-4px 0 0;font-family:var(--mono);font-size:10px;color:var(--faint);text-align:center}
@media (prefers-reduced-motion:reduce){.sheet,.sheet-backdrop,.hero{transition:none}.go::before,.go::after{animation:none}}

/* Player: small outlined pills under the story title */
.player{display:flex;justify-content:center;gap:10px;margin-bottom:28px}
.ctl{display:inline-flex;align-items:center;gap:7px;font:inherit;font-family:var(--mono);font-size:var(--step--1);letter-spacing:.04em;
  cursor:pointer;color:var(--accent-deep);background:transparent;border:0;border-radius:999px;padding:8px 15px 8px 12px;
  box-shadow:inset 0 0 0 1.25px var(--accent-line);transition:background-color .15s ease}
.ctl:active{background:var(--accent-soft)}
.ctl:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ctl svg{width:14px;height:14px;fill:currentColor}
.ctl svg[fill="none"]{fill:none}

/* Story: divider and title centered, text left-aligned */
.plaque{margin-top:var(--story-gap);display:flex;flex-direction:column}
.divider{width:56px;height:1px;background:var(--rule);border:0;margin:0 auto}
.plaque.loading .divider,.plaque.loading .player{display:none}
.plaque h2{font-family:var(--display);font-weight:400;font-size:var(--step-4);line-height:1.04;
  margin:var(--story-gap) 0 32px;text-align:center;text-wrap:balance;color:var(--ink);
  text-box:trim-both cap alphabetic;scroll-margin-top:calc(var(--story-gap) + 32px)}   /* trimmed so the divider sits exactly midway */
.story{display:flex;flex-direction:column;gap:14px;text-align:left;min-width:0}
.story p{margin:0;transition:color .4s ease}
.story p.reading{color:var(--accent-deep)}   /* the paragraph being read turns orange */
.story p:first-child::first-letter{font-family:var(--display);float:left;font-size:var(--step-5);line-height:.82;padding:6px 8px 0 0;color:var(--accent)}
/* Photos between paragraphs */
.photo{margin:10px 0 8px;display:flex;flex-direction:column;gap:8px}
.photo img{display:block;width:100%;max-width:100%;height:auto;max-height:440px;object-fit:cover;border-radius:16px;
  background:var(--rule);opacity:0;transition:opacity .5s ease}
.photo.loaded img{opacity:1}
.photo figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;font-family:var(--mono);font-size:var(--step--2);line-height:1.4;color:var(--muted)}
.photo figcaption a{color:inherit;text-decoration:none;opacity:.8}
.photo:not(.loaded) figcaption{visibility:hidden}

/* End-of-story mark */
.endmark{display:flex;justify-content:center;margin-top:56px;color:var(--faint)}
.endmark svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round}
.story p.thinking{font-style:italic;color:var(--muted);text-align:center}
.story p.thinking::first-letter{float:none;font:inherit;padding:0;color:inherit}

@media (prefers-reduced-motion:no-preference){.plaque.fresh{animation:rise .45s ease-out}@keyframes rise{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}}