/* Philly — one screen. Paper, ink, clay. */
:root{
  --paper:#F4F1EA;
  --ink:#191713;
  --mute:#6E6759;
  --line:#DFD8C8;
  --clay:#C8543A;
  --sans:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100svh;
}
h1,p{margin:0}
:focus-visible{outline:2px solid var(--clay);outline-offset:3px}

.stage{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(18px,3vw,30px);
  padding:clamp(40px,8vh,90px) clamp(20px,5vw,64px);
  text-align:center;
}

/* the pair line */
.pair{
  font:500 12px/1 var(--mono);letter-spacing:.1em;
  color:var(--mute);
}

/* the four letters */
.morph{display:flex;justify-content:center;max-width:100%}
.morph-word{
  display:inline-flex;font:400 clamp(40px,11vw,132px)/1 var(--serif);
  letter-spacing:-.02em;white-space:nowrap;
}
.root{color:var(--ink)}
.phil{
  color:var(--clay);display:inline-block;overflow:hidden;
  max-width:0;opacity:0;transform:translateY(.1em);
  transition:max-width .55s cubic-bezier(.5,0,.2,1),opacity .3s ease .12s,transform .45s ease;
}
.phil.on{max-width:3.2em;opacity:1;transform:none}

.lede{font:600 clamp(26px,4.6vw,50px)/1.15 var(--sans);letter-spacing:-.03em}
.lede em{font:400 italic 1.06em/1 var(--serif);color:var(--clay)}

/* the contract box */
.ca{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
  margin-top:clamp(6px,2vw,18px);
  background:#FBFAF6;border:1px solid var(--line);border-radius:12px;
  padding:12px 12px 12px 18px;max-width:100%;
}
.ca-k{
  font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);
}
.ca-v{font:400 13px/1.4 var(--mono);color:var(--ink);word-break:break-all;text-align:left}
.ca-btn{
  border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;
  border-radius:999px;padding:8px 16px;font:600 12.5px/1 var(--sans);transition:.15s;flex:none;
}
.ca-btn:hover{background:var(--ink);color:var(--paper)}

.fine{
  padding:0 clamp(20px,5vw,64px) 26px;text-align:center;
  font-size:11.5px;line-height:1.6;color:var(--mute);opacity:.7;
}

.toast{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,14px);
  background:var(--ink);color:var(--paper);padding:11px 18px;border-radius:999px;
  font:500 13px/1 var(--sans);opacity:0;pointer-events:none;transition:.2s;z-index:90;
}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-width:520px){
  .ca{flex-direction:column;gap:10px;padding:16px;align-items:stretch}
  .ca-v{text-align:center}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important}
}