/* charper.app holding page: one look, on ultra. Colours from charper-tokens.json; type from charper-design-language.md. */
@font-face{font-family:"Hanken Grotesk";src:url(fonts/hanken.woff2) format("woff2");font-weight:400 640;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url(fonts/newsreader-italic.woff2) format("woff2");font-weight:400 500;font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/plex-mono-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --ultra:#564DEC; --honey:#ECB14D;
  --tx:#FFFFFF;        /* 5.72:1 on ultra */
  --txsoft:#EDEBFF;    /* 4.89:1 on ultra */
  --line:rgba(255,255,255,.38);
  --ui:"Hanken Grotesk",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--ultra)}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--ultra);color:var(--tx);
  font-family:var(--ui);font-weight:440;font-size:1rem;line-height:1.55;
  padding:max(1.25rem,env(safe-area-inset-top)) max(1.25rem,env(safe-area-inset-right)) max(1.25rem,env(safe-area-inset-bottom)) max(1.25rem,env(safe-area-inset-left))}

main{flex:1;width:100%;max-width:40rem;margin:0 auto;padding-block:clamp(2rem,12vh,7rem) 3rem;display:grid;gap:2.25rem;align-content:start}
.mark{display:grid;gap:1rem;justify-items:start}
.ring{width:5.5rem;height:5.5rem;display:block;margin-inline-start:-.6rem}
h1{margin:0;font-weight:520;font-size:clamp(4rem,17vw,8rem);letter-spacing:-.025em;line-height:.95}
h1 .dot{display:inline-block;width:.17em;height:.17em;margin-inline-start:.04em;border-radius:50%;background:var(--honey)}
.entry{margin:0;display:flex;flex-wrap:wrap;gap:.35rem .9rem;align-items:baseline;color:var(--txsoft)}
.entry .resp{font-weight:620;color:var(--tx);letter-spacing:.03em}
.entry .pos{font-family:var(--mono);font-weight:600;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase}
.entry .def{font-family:var(--serif);font-style:italic;font-weight:460;font-size:1.44rem;color:var(--tx)}

.words{display:grid;gap:.9rem}
.lede{margin:0;font-weight:560;font-size:clamp(1.6rem,1.2rem + 2vw,2.2rem);line-height:1.18;letter-spacing:-.015em;text-wrap:balance;max-width:20ch}
.guest{margin:0;font-family:var(--serif);font-style:italic;font-weight:460;font-size:clamp(1.3rem,1.1rem + 1vw,1.6rem);line-height:1.3}

.notes{display:grid;gap:1rem;padding-top:1.5rem;border-top:1px solid var(--line);max-width:34rem}
.notes p{margin:0;color:var(--txsoft)}
.notes b{color:var(--tx);font-weight:620}

footer{width:100%;max-width:40rem;margin:0 auto;font-family:var(--mono);font-weight:600;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;color:var(--txsoft)}

@media (forced-colors: active){ h1 .dot{background:CanvasText} }