/* One <style> block, lifted in place. Separate per block: merging
   blocks changes which rule wins. */

/* ---- tokens: light is the base, dark overrides only what changes ---- */
:root{
  --paper:   #dfdedb;   /* cool slate paper, deliberately not cream */
  --plate:   #e9e8e5;
  --ink:     #1b1e21;
  --muted:   #676d72;
  --brass:   #8d6f42;
  --rule:    rgba(27,30,33,.16);
  --emboss-d:rgba(0,0,0,.30);
  --emboss-l:rgba(255,255,255,.78);
  --focus:   #8d6f42;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:   #131517;
    --plate:   #1a1d20;
    --ink:     #e7e5e1;
    --muted:   #8b9197;
    --brass:   #b8935c;
    --rule:    rgba(231,229,225,.16);
    --emboss-d:rgba(0,0,0,.72);
    --emboss-l:rgba(255,255,255,.09);
    --focus:   #b8935c;
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(1.25rem,5vw,3rem);
  /* a barely-there vignette so the plate sits on a surface, not a void */
  background-image:radial-gradient(120% 90% at 50% 22%, transparent 40%, rgba(0,0,0,.055) 100%);
}

.plate{
  width:100%;
  max-width:34rem;
  background:var(--plate);
  border:1px solid var(--rule);
  border-radius:3px;
  padding:clamp(2.25rem,7vw,3.5rem) clamp(1.5rem,6vw,3.5rem);
  box-shadow:
    inset 0 1px 0 var(--emboss-l),
    0 1px 2px rgba(0,0,0,.05),
    0 12px 32px -18px rgba(0,0,0,.35);
}

/* the signature: the domain, engraved into the plate */
.name{
  margin:0;
  font-size:clamp(2.3rem,10.5vw,4.5rem);
  font-weight:800;
  letter-spacing:-.035em;
  line-height:1;
  color:var(--ink);
  text-shadow:0 -1px 1px var(--emboss-d), 0 1px 0 var(--emboss-l);
}
.name .dot{color:var(--brass)}

/* brass hairline — the one accent, drawn once on load */
.rule{
  height:1px;
  background:var(--brass);
  opacity:.85;
  margin:clamp(1.4rem,4vw,1.9rem) 0 clamp(1.1rem,3.5vw,1.5rem);
  transform-origin:left center;
}

.line{
  margin:0;
  font-size:clamp(1rem,2.6vw,1.125rem);
  line-height:1.55;
  color:var(--ink);
}

.meta{
  margin:clamp(1.5rem,4.5vw,2rem) 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 1.5rem;
  align-items:baseline;
  font-family:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;
  font-size:.8125rem;
  letter-spacing:.02em;
  color:var(--muted);
}
.meta .who{text-transform:uppercase;letter-spacing:.14em;font-size:.6875rem}

/* ---- one orchestrated entrance, then nothing moves again ---- */
@media (prefers-reduced-motion: no-preference){
  .plate{animation:rise .62s cubic-bezier(.2,.7,.3,1) both}
  .name{animation:rise .62s cubic-bezier(.2,.7,.3,1) .10s both}
  .rule{animation:draw .55s cubic-bezier(.2,.7,.3,1) .30s both}
  .line{animation:rise .62s cubic-bezier(.2,.7,.3,1) .38s both}
  .meta{animation:rise .62s cubic-bezier(.2,.7,.3,1) .48s both}
}
@keyframes rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}