/* bryankemler.com - one page (2026-11). Light by default; dark from the device setting.
   No script on this site. Tokens follow theclauditor.ai. Fonts are served from /fonts/
   on this site (SIL Open Font License; the licence texts sit beside them). */

@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/instrument-serif-latin.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;
  src:url(/fonts/space-grotesk-latin.woff2) format("woff2")}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/space-mono-latin.woff2) format("woff2")}

/* ---- tokens: light (the default) ---- */
:root{
  --bg:#F4F1EC; --surface:#FBF9F5; --raise:#ECE7DE; --line:#D9D2C5; --fg:#0A0B0C;
  --muted:#5D5850; --accent:#7E5F2E; --link:#2F5F6E;
  color-scheme:light dark;
}
/* ---- tokens: dark, from the device setting ---- */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0A0B0C; --surface:#131517; --raise:#1B1E21; --line:#2B2D30; --fg:#F4F1EC;
    --muted:#A39E95; --accent:#C29A5E; --link:#5E93A4;
  }
}

/* ---- base ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--fg);
  font-family:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:1.0625rem;line-height:1.65;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
h1,p,ul,figure{margin:0}
img{display:block;max-width:100%;height:auto}
a{color:var(--link);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---- the page ---- */
.wrap{width:100%;max-width:920px;margin-inline:auto;padding-inline:16px}
@media (min-width:600px){.wrap{padding-inline:clamp(24px,5vw,40px)}}
main{flex:1 0 auto;padding-block:clamp(2.5rem,11vh,7.5rem) clamp(2.5rem,8vh,5rem)}

.person{display:grid;grid-template-columns:1fr;gap:2rem;align-items:start}
@media (min-width:760px){.person{grid-template-columns:280px 1fr;gap:clamp(2.5rem,6vw,4.5rem)}}

.portrait{width:min(100%,220px)}
@media (min-width:760px){.portrait{width:100%}}
.portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:3px;
  background:var(--raise);outline:1px solid var(--line);outline-offset:-1px}

.text > * + *{margin-top:1.1rem}
h1{font-family:"Instrument Serif",Georgia,"Times New Roman",serif;font-weight:400;
  font-size:clamp(2.5rem,7vw,3.75rem);line-height:1.05;letter-spacing:.005em;text-wrap:balance}
.text > h1 + .stamp{margin-top:.9rem}

.stamp{list-style:none;padding:0;display:grid;row-gap:.15rem;
  font-family:"Space Mono",ui-monospace,Menlo,monospace;font-size:.72rem;line-height:1.6;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

.lede{font-size:1.1875rem;line-height:1.6;max-width:34em;padding-top:1.1rem;border-top:1px solid var(--line)}
.text > .stamp + .lede{margin-top:1.4rem}

.links{list-style:none;padding:0;max-width:34em;border-bottom:1px solid var(--line)}
.text > .lede + .links{margin-top:2rem}
.links li{display:grid;grid-template-columns:1fr;gap:.1rem;padding-block:.7rem;border-top:1px solid var(--line)}
@media (min-width:480px){.links li{grid-template-columns:9.5rem 1fr;gap:1rem;align-items:baseline}}
.links .k{font-family:"Space Mono",ui-monospace,Menlo,monospace;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.links a{font-weight:500;text-decoration:none;color:var(--fg)}
.links a::after{content:"\2192";content:"\2192" / "";margin-left:.45em;color:var(--accent)}
.links a:hover,.links a:focus-visible{text-decoration:underline;text-decoration-color:var(--accent)}

footer{border-top:1px solid var(--line);padding-block:1.4rem 1.8rem;font-size:.85rem;color:var(--muted)}
footer p + p{margin-top:.3rem}
footer .mono{font-family:"Space Mono",ui-monospace,Menlo,monospace;font-size:.72rem;letter-spacing:.06em}

/* ---- not found ---- */
.kicker{font-family:"Space Mono",ui-monospace,Menlo,monospace;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.notfound > * + *{margin-top:1rem}