@font-face{font-family:"Lora";src:url("assets/fonts/Lora-var.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Lora";src:url("assets/fonts/Lora-Italic-var.woff2") format("woff2");font-weight:400 700;font-style:italic;font-display:swap}
*,*::before,*::after{box-sizing:border-box}
:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --ground:#f2ede6;
  --ink:#3e5c6b;
  --muted:rgba(62,92,107,.72);
  --line:rgba(62,92,107,.16);
  --line-strong:rgba(62,92,107,.42);
  --frame:rgba(62,92,107,.08);
  --sheet:#f8f4ee;
  --accent:#2c4654;
  --scrim:rgba(34,52,62,.45);
  --serif:"Lora","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:"Lora","Iowan Old Style",Georgia,serif;
  --gut:clamp(1rem,3.2vw,2.75rem);
  --drops:clamp(90px,20svh,230px);
  color-scheme:light;
}
/* one palette in both viewer themes, by request */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--ground:#f2ede6;--ink:#3e5c6b}}
:root[data-theme="dark"]{--ground:#f2ede6;--ink:#3e5c6b}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-snap-type:y proximity;background:var(--ground);scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
html.locked{overflow:hidden}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

#track{position:relative;width:1px;pointer-events:none}
#track i{position:absolute;left:0;width:1px;height:1px;scroll-snap-align:start}

.stage{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
.top{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;padding:0 var(--gut) .5rem;font-size:.8125rem;color:var(--muted)}
.top .mark{justify-self:start;margin-top:1.1rem}
.top .count{justify-self:end;margin-top:calc(1.1rem + 8px)}
.drops{display:block;height:var(--drops);color:var(--ink);pointer-events:none}
.drops-art{display:block;height:100%;width:auto}
.mark{display:inline-flex;align-items:center;min-height:44px}
.mark img{display:block;height:clamp(28px,2.6vw,38px);width:auto}
.count{font-variant-numeric:tabular-nums;letter-spacing:.04em;transition:opacity .5s}
.count b{color:var(--ink);font-weight:500}

/* copy band sits above the photo, in its own space */
.viewport{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(1rem,2.8vh,2rem);padding:.25rem var(--gut);min-height:0}
.band{position:relative;width:min(100%,60rem);height:3.9em;font-size:clamp(1.944rem,1.539rem + 1.701vw,2.997rem)}
.line{position:absolute;inset:0;margin:0;display:flex;justify-content:center;align-items:flex-end;text-align:center;
  font-family:var(--serif);font-weight:400;line-height:1.24;opacity:0;text-wrap:balance}
.frame{position:relative;aspect-ratio:3/2;
  width:calc(min(100%, 74rem, calc((100vh - 19rem - var(--drops)) * 1.5)) * .85);
  width:calc(min(100%, 74rem, calc((100svh - 19rem - var(--drops)) * 1.5)) * .85)}
.shot{position:absolute;inset:0;margin:0;overflow:hidden;opacity:0;background:rgba(0,0,0,.12)}
.shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--x,50%) 50%;transform-origin:50% 55%;will-change:transform}
.beat{position:absolute;left:var(--gut);right:var(--gut);top:0;bottom:0;margin:0;display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(2.835rem,1.62rem + 4.59vw,5.805rem);line-height:1.12;
  letter-spacing:-.01em;opacity:0;text-wrap:balance}
.line,.beat{transform:translate3d(0,12px,0);transition:opacity .45s ease,transform .45s ease;will-change:opacity,transform}
.line.show,.beat.show{opacity:1;transform:none;transition:opacity 1.6s cubic-bezier(.3,0,.2,1) .35s,transform 1.6s cubic-bezier(.3,0,.2,1) .35s}

.scene{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:0 var(--gut);opacity:0;pointer-events:none;visibility:hidden}
.scene.live{pointer-events:auto}
.hero h1{margin:0;max-width:12ch;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(3rem,1.2rem + 6.4vw,7.5rem);line-height:.95;letter-spacing:-.025em;text-wrap:balance}
.hero p{margin:1.6rem 0 2.2rem;color:var(--muted);font-family:var(--serif);font-size:clamp(1.05rem,.95rem + .45vw,1.3rem);line-height:1.6;max-width:44ch}
.hero p span{display:block;text-wrap:balance}
.begin{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}
.outro h2{margin:0 0 1.2rem;font-family:var(--serif);font-weight:400;font-size:clamp(2.5rem,1.2rem + 5.4vw,6rem);line-height:1;letter-spacing:-.02em;text-wrap:balance}
.outro p{margin:0 0 2rem;max-width:36ch;color:var(--muted);line-height:1.6;font-size:1rem}
.outro .fine{margin:2.2rem 0 0;font-size:.8125rem;max-width:44ch}
.again{background:none;border:0;color:var(--muted);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:.5rem;min-height:44px}

.btn{min-height:44px;padding:.72rem 1.3rem;border-radius:999px;border:1px solid var(--line-strong);background:transparent;color:var(--ink);
  font:500 .9375rem/1 var(--sans);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;text-decoration:none;
  transition:background-color .2s,border-color .2s,color .2s,opacity .2s}
.btn:hover{border-color:var(--ink)}
.btn.solid{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.btn.solid:hover{opacity:.88}
.btn.quiet{border-color:transparent;padding-left:.8rem;padding-right:.8rem}
.btn.quiet:hover{border-color:var(--line-strong)}

/* bottom bar */
.bar{position:relative;display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.9rem var(--gut) .9rem}
.group{display:flex;gap:.35rem;align-items:center}
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:13px;width:16px}
.eq i{display:block;width:2px;height:3px;background:currentColor;border-radius:1px;transition:height .3s}
.on .eq i{animation:eq 1.1s ease-in-out infinite alternate}
.on .eq i:nth-child(2){animation-delay:-.4s}.on .eq i:nth-child(3){animation-delay:-.8s}.on .eq i:nth-child(4){animation-delay:-.2s}
@keyframes eq{0%{height:3px}100%{height:13px}}

/* share sheet */
dialog{padding:0;border:0;background:var(--sheet);color:var(--ink);width:min(28rem,calc(100% - 2rem));max-height:calc(100% - 2rem);border-radius:18px;
  box-shadow:0 30px 80px rgba(34,52,62,.22)}
dialog::backdrop{background:var(--scrim);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.sheet{padding:1.6rem 1.5rem 1.5rem;padding-bottom:calc(1.5rem + env(safe-area-inset-bottom,0px))}
.sheet header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.1rem}
.sheet h2{margin:0;font-family:var(--serif);font-weight:400;font-size:1.85rem;line-height:1.1}
.x{flex:none;width:44px;height:44px;margin:-.6rem -.6rem 0 0;border:0;background:none;color:var(--ink);border-radius:999px;cursor:pointer;display:grid;place-items:center}
.x:hover{background:var(--line)}
blockquote{margin:0 0 1.2rem;padding:0;font-family:var(--serif);font-style:italic;font-size:1.35rem;line-height:1.35}
.linkrow{display:flex;gap:.5rem;margin-bottom:.6rem}
.linkrow input{flex:1;min-width:0;min-height:44px;border:1px solid var(--line-strong);border-radius:12px;background:rgba(62,92,107,.05);color:var(--ink);
  font:400 .875rem var(--sans);padding:0 .8rem}
.linkrow input:focus{outline:none;border-color:var(--ink)}
.shares{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.shares .btn{width:100%}
.shares .wide{grid-column:1 / -1}
.small{font-size:.8125rem;color:var(--muted);line-height:1.5;margin:.9rem 0 0;min-height:1.2em}

@media (max-width:700px) and (orientation:portrait){
  .top .mark{margin-top:.9rem}.top .count{margin-top:calc(.9rem + 8px)}
  :root{--drops:clamp(80px,15svh,136px)}
  .band{height:5.1em;font-size:clamp(1.863rem,1.458rem + 2.592vw,2.349rem)}
  .frame{aspect-ratio:3/4;
    width:calc(min(100%, calc((100vh - 21rem - var(--drops)) * .75)) * .85);
    width:calc(min(100%, calc((100svh - 21rem - var(--drops)) * .75)) * .85)}
  .viewport{gap:1rem}
  .begin{flex-direction:column;align-items:stretch;width:min(100%,18rem)}
}
@media (max-height:540px) and (orientation:landscape){
  .viewport{flex-direction:row;gap:2rem}
  .band{width:min(38%,26rem);height:70%;font-size:1.89rem}
  .line{align-items:center;justify-content:flex-end;text-align:right}
  .frame{width:calc(min(58%, calc((100vh - 7.5rem) * 1.5)) * .85);width:calc(min(58%, calc((100svh - 7.5rem) * 1.5)) * .85)}
  .top .mark{margin-top:.5rem}.top .count{margin-top:calc(.5rem + 8px)}:root{--drops:clamp(44px,14svh,64px)}.bar{padding-bottom:.6rem}
  .hero h1{font-size:2.6rem;max-width:none}.hero p{font-size:.95rem;line-height:1.45}.hero p{margin:.8rem 0 1.2rem}
  .outro h2{font-size:2.1rem;margin-bottom:.4rem}.outro p{margin-bottom:.7rem;font-size:.875rem;line-height:1.45}.outro .fine{margin-top:.5rem;font-size:.72rem}.again{min-height:36px;padding:.3rem}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-snap-type:none}
  .on .eq i{animation:none;height:9px}
  .line,.beat,.line.show,.beat.show{transform:none}
}