/* bio.luyml.com and store.luyml.com share this shape: luyml.com's night valley (valley.css :root),
   its two faces served cross-origin from luyml.com/fonts, valley-2 for spacing and measure. */
@font-face { font-family: 'Fraunces'; src: url('https://luyml.com/fonts/fraunces-var.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('https://luyml.com/fonts/poppins-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('https://luyml.com/fonts/poppins-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
:root {
  --ink: 236 238 246;
  --sky: 14 20 42;
  --sun: 199 137 58;
  --ink-2: color-mix(in srgb, rgb(var(--ink)) 82%, rgb(var(--sky)));
  --rule: color-mix(in srgb, rgb(var(--ink)) 22%, rgb(var(--sky)));
  --disp: 'Fraunces', 'Times New Roman', serif;
  --body: 'Poppins', system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: clip; }
body {
  min-height: 100svh; display: flex; flex-direction: column;
  font-family: var(--body); font-size: 16px; line-height: 1.55; color: rgb(var(--ink));
  background: radial-gradient(120% 70% at 50% 110%, color-mix(in srgb, rgb(var(--sun)) 18%, rgb(var(--sky))), rgb(var(--sky)) 70%);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-underline-offset: 3px; }
a:focus-visible { outline: var(--v-focus); outline-offset: var(--v-focus-offset); }
.top, main, .foot { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 var(--v-s-300); }
.top { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--v-s-300); }
.brand { font-family: var(--disp); font-size: 22px; text-decoration: none; }
.place { font-size: 13px; color: var(--ink-2); letter-spacing: .04em; }
main { flex: 1; padding-top: var(--v-s-1200); padding-bottom: var(--v-s-800); }
h1 { font-family: var(--disp); font-weight: 400; font-size: clamp(56px, 14vw, 104px); line-height: .95; letter-spacing: -.02em; }
.lede { margin-top: var(--v-s-300); max-width: 34ch; font-size: clamp(18px, 4.6vw, 22px); color: var(--ink-2); }
.state { margin-top: var(--v-s-400); display: inline-flex; gap: var(--v-s-100); align-items: center; font-size: 14px; }
.state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--sun)); }
.qs { margin-top: var(--v-s-800); list-style: none; border-top: 1px solid var(--rule); }
.qs li { padding: var(--v-s-300) 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 2.5em 1fr; gap: var(--v-s-100); }
.qs .n { font-family: var(--disp); color: rgb(var(--sun)); font-size: 20px; line-height: 1.3; }
.qs h2 { font-family: var(--disp); font-weight: 500; font-size: 21px; line-height: 1.3; }
.qs p { margin-top: var(--v-s-050); color: var(--ink-2); max-width: var(--v-measure); }
.foot { padding-bottom: var(--v-s-400); font-size: 14px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: var(--v-s-200) var(--v-s-400); }