/* SDPM — Home */
:root{
  --paper:#F5F4F0; --ink:#1C1C1A; --ink-mid:#55554F; --ink-soft:#94948C; --rule:#DEDCD4;
  --band-1:#EAE8E1; --band-2:#CFCCC1; --band-3:#1C1C1A;
  --col:640px; --railw:200px; --gap:60px;
  --serif:'Baskerville Old Face','Baskerville','Baskervville',Georgia,serif;
  /* This page has its own palette. Without this, a phone browser set to dark
     mode rewrites every colour it wasn't told about — paper turns black, and
     pale marks on deliberately dark grounds vanish into them. */
  color-scheme:only light;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:17px;line-height:1.65;font-feature-settings:"cv05","ss01";
  -webkit-font-smoothing:antialiased;overflow:hidden}
/* ========== THRESHOLD ========== */
#threshold{position:fixed;inset:0;background:var(--paper);
  display:flex;align-items:center;justify-content:center;transition:opacity 1s ease,visibility 1s}
#threshold.gone{opacity:0;visibility:hidden;pointer-events:none}
.stage{position:relative;width:100%;text-align:center}
.beats{font-weight:300;color:var(--ink-mid);font-size:min(2.75vw,40px);line-height:1.5;letter-spacing:-.012em;
  opacity:0;transform:translateY(8px);filter:blur(3px);
  transition:opacity 1.5s cubic-bezier(.22,.61,.36,1),transform 1.5s cubic-bezier(.22,.61,.36,1),filter 1.5s ease}
.beats span{display:block;white-space:nowrap}
.beats.in{opacity:1;transform:none;filter:none}
.beats.out{opacity:0;transform:translateY(-12px);filter:blur(4px);transition-duration:1.1s}
.mark-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity 1.4s cubic-bezier(.22,.61,.36,1)}
.mark-wrap.in{opacity:1;pointer-events:auto}
.mark{background:none;border:0;cursor:pointer;color:var(--ink);font-family:var(--serif);
  font-size:clamp(58px,9vw,136px);line-height:1;padding:14px 18px;transition:opacity .5s ease}
.mark svg{height:.6582em;width:auto;display:block}
.mark:hover{opacity:.72}
.mark:focus,.mark:focus-visible{outline:none}
@media(max-width:700px){.beats{font-size:23px}.beats span{white-space:normal}.mark{font-size:60px}}


/* ========== MOBILE PASS (<=900px, matching Perspective) ==========
   Desktop is untouched: everything in this block applies only to narrow
   screens. Fixes are added here one at a time. */
@media(max-width:900px){

  /* 1. Centre on the height the phone actually shows.
     The panel is pinned to all four edges, and on a phone that includes the
     strip under the address bar — so it runs past the bottom of the visible
     screen and everything centred inside it sits low. This page cannot
     scroll, so the address bar never retracts and the offset is permanent.
     Measuring against the visible height puts the two centres together. */
  #threshold{bottom:auto;height:100svh}

  /* 2. A column for the lines, not the full glass.
     The stage has no side padding, so on a phone the wrapped lines sit
     wherever the words happen to break — around 21px from the edge here,
     and closer on a narrower screen or with a longer word. 32px matches
     the text column on the other pages. */
  .stage{padding:0 32px}

  /* 3. A pause between the two sentences.
     Each sentence is one line on a wide screen, so the pairing is obvious
     there. Wrapped onto four lines it reads as a single block, with only
     the full stop marking the join. A small gap restores the structure
     without opening it up into two paragraphs. */
  .beats span+span{margin-top:.5em}

}

@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}