:root {
  color-scheme: light;
  --bg: #f5f4ef; --text: #292d29; --muted: #676d64;
  --line: #d9dcd2; --accent: #526347; --panel: #eeeee7; --hover: #eaece3;
  --sky: #dedfd3; --sun: #f4f1df; --ridge-back: #b8c0aa; --ridge-front: #88957d;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #1b201e; --text: #e2e5dc; --muted: #a0aaa0;
    --line: #343d36; --accent: #b2c39c; --panel: #222a25; --hover: #28322b;
    --sky: #2e3a33; --sun: #a8b69b; --ridge-back: #465846; --ridge-front: #364638;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1b201e; --text: #e2e5dc; --muted: #a0aaa0;
  --line: #343d36; --accent: #b2c39c; --panel: #222a25; --hover: #28322b;
  --sky: #2e3a33; --sun: #a8b69b; --ridge-back: #465846; --ridge-front: #364638;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
[hidden] { display: none !important; }
.page { width: min(1040px, calc(100% - 96px)); margin-inline: auto; }
.site-header { min-height: 112px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.monogram { font-size: 23px; font-weight: 700; letter-spacing: -1px; }
.monogram span { color: var(--accent); }
.appearance { display: flex; align-items: center; gap: 3px; }
.appearance button { display: grid; place-items: center; width: 34px; height: 34px; padding: 8px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--muted); cursor: pointer; }
.appearance button:hover { background: var(--hover); color: var(--text); }
.appearance button[aria-pressed="true"] { background: var(--panel); border-color: var(--line); color: var(--accent); }
.appearance svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.intro { padding: 32px 0; }
h1 { margin: 0; font-size: clamp(28px, 4vw, 38px); font-weight: 550; letter-spacing: -1px; line-height: 1.2; }
h1 span { color: var(--accent); }
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; align-items: start; gap: 70px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
h2 { font-size: 17px; font-weight: 550; margin: 0; letter-spacing: -.3px; }
.section-heading > span { color: var(--muted); font-size: 10px; letter-spacing: 1px; }
.link-list { margin: 0; padding: 0; list-style: none; }
.link-list li { border-bottom: 1px solid var(--line); }
.link-list a { display: flex; gap: 21px; align-items: center; padding: 19px 8px 19px 0; transition: background-color .15s; }
.link-list a:hover { background: var(--hover); }
.link-number { color: var(--muted); font-family: ui-monospace, monospace; font-size: 10px; }
.link-copy { flex: 1; }
.link-title { display: block; font-size: 15px; font-weight: 550; }
.link-arrow { color: var(--accent); font-size: 19px; }
.personal { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
.personal-copy { padding: 24px; }
.profile-links { list-style: none; padding: 0; margin: 16px 0 0; }
.profile-links li + li { border-top: 1px solid var(--line); }
.profile-links a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; font-size: 14px; }
.profile-links a:hover { color: var(--accent); }
.profile-links a span { color: var(--accent); }
.support { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 24px; }
.support-image { width: 2em; height: 2em; flex: none; object-fit: cover; border-radius: 3px; }
.coffee-portrait { position: relative; display: inline-block; width: 2em; height: 2em; flex: none; border-radius: 3px; }
.coffee-portrait:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.coffee-scene { position: absolute; inset: 0; pointer-events: none; transform-origin: 30% 65%; transition: transform 220ms ease; }
/* Bring the frame's left edge just beside the resting arm (at 12%). */
.coffee-scene::before { content: ''; position: absolute; inset: 0 0 0 11%; border-radius: 3px; background: #647780; transition: box-shadow 220ms ease; }
.coffee-scene .support-image { position: relative; display: block; width: 100%; height: 100%; transition: opacity 180ms ease; }
/* Two aligned sprite tiles: the arm can toast independently of the face. */
.coffee-body, .coffee-arm { position: absolute; inset: 0; opacity: 0; transition: opacity 180ms ease, transform 250ms ease; }
.coffee-body, .coffee-arm::before { background-image: url('assets/paulscoffee-toast.png'); background-size: 200% 100%; background-repeat: no-repeat; }
.coffee-body { background-position: left center; clip-path: polygon(50% 5%, 64% 5%, 64% 7%, 70% 10%, 74% 16%, 75% 27%, 78% 28%, 78% 35%, 75% 38%, 74% 47%, 70% 53%, 74% 56%, 83% 60%, 89% 64%, 93% 71%, 95% 80%, 96% 98%, 34% 98%, 32% 86%, 27% 83%, 21% 77%, 21% 71%, 26% 64%, 34% 58%, 45% 54%, 45% 51%, 42% 46%, 41% 38%, 37% 35%, 37% 28%, 40% 27%, 40% 18%, 43% 11%, 48% 7%); }
.coffee-arm { transform-origin: 23% 87%; }
.coffee-arm::before { content: ''; position: absolute; inset: 0; background-position: right center; clip-path: polygon(29% 43%, 40% 43%, 40% 45%, 42.5% 46%, 42.5% 60%, 40% 60%, 40% 63%, 30.5% 63%, 30.5% 62%, 27% 62%, 27% 77%, 30% 78%, 31% 80%, 31% 87%, 28% 89%, 26% 94%, 18% 94%, 14% 91%, 12% 87%, 12% 75%, 13.5% 75%, 13.5% 68%, 15% 65%, 16% 53%, 18% 50%, 22% 48%, 27% 46%, 29% 46%); }
/* Steam belongs to the moving arm, outside its silhouette mask. */
.coffee-arm::after { content: ''; position: absolute; inset: 0; background: url('assets/coffee-steam.svg') center / 100% 100% no-repeat; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .coffee-portrait:hover { z-index: 2; }
  .coffee-portrait:hover .coffee-scene { transform: scale(2.5); transition: transform 420ms cubic-bezier(.2,.8,.2,1) 300ms; }
  .coffee-portrait:hover .coffee-scene::before { box-shadow: 0 3px 9px #0004; transition-delay: 300ms; }
  .coffee-portrait:hover .support-image { opacity: 0; transition-delay: 450ms; }
  .coffee-portrait:hover .coffee-body, .coffee-portrait:hover .coffee-arm { opacity: 1; transition: opacity 200ms ease 450ms, transform 650ms cubic-bezier(.2,.8,.2,1) 650ms; }
  .coffee-portrait:hover .coffee-arm { transform: translate(-3%, -24%) rotate(-3deg) scale(1.08); }
}
@media (prefers-reduced-motion: no-preference) {
  .coffee-portrait:focus-visible { z-index: 2; }
  .coffee-portrait:focus-visible .coffee-scene { transform: scale(2.5); transition-delay: 300ms; }
  .coffee-portrait:focus-visible .support-image { opacity: 0; transition-delay: 450ms; }
  .coffee-portrait:focus-visible .coffee-body, .coffee-portrait:focus-visible .coffee-arm { opacity: 1; transition-delay: 450ms; }
  .coffee-portrait:focus-visible .coffee-arm { transform: translate(-3%, -24%) rotate(-3deg) scale(1.08); transition: opacity 200ms ease 450ms, transform 650ms ease 650ms; }
}
.support h2 { display: flex; align-items: center; gap: 8px; }
.support p { margin: 8px 0 17px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.coffee-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 40px; max-width: 100%; padding: 8px 14px; border: 1px solid var(--accent); border-radius: 5px; background: var(--accent); color: var(--bg); font-size: 13px; font-weight: 600; line-height: 1.4; }
.coffee-button:hover { background: var(--hover); color: var(--accent); }
.coffee-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.coffee-actions .coffee-button { flex: 1; min-height: 44px; }
.coffee-button-secondary { background: transparent; color: var(--accent); }
#venmo-trigger:is(:hover, :focus-visible), .venmo-open:is(:hover, :focus-visible) { background: color-mix(in srgb, #008cff 14%, var(--panel)); border-color: #008cff; color: color-mix(in srgb, var(--text) 75%, #008cff); }
.venmo-dialog { width: min(380px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 24px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--text); box-shadow: 0 16px 60px #0005; overflow-y: auto; }
.venmo-dialog:not([open]) { display: none; }
.venmo-dialog::backdrop { background: #0009; }
html:has(.venmo-dialog[open]) { overflow: hidden; }
.venmo-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.venmo-close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); color: var(--text); font-size: 24px; cursor: pointer; }
.venmo-close:hover { background: var(--hover); }
.venmo-dialog p { color: var(--muted); font-size: 14px; }
.venmo-qr { display: block; width: min(100%, 280px); height: auto; margin: 18px auto; background: #fff; border-radius: 6px; }
.venmo-dialog .venmo-account { text-align: center; color: var(--text); }
.venmo-account span { color: var(--muted); }
.venmo-open { width: 100%; min-height: 44px; }
footer { margin-top: 72px; padding: 26px 0 30px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; font-size: 11px; color: var(--muted); }
footer a:hover { text-decoration: underline; }
.skip-link { position: absolute; left: 16px; top: -80px; padding: 10px 16px; background: var(--bg); z-index: 1; }
.skip-link:focus { top: 12px; }
@media (max-width: 760px) {
  .page { width: calc(100% - 40px); }
  .site-header { min-height: 85px; }
  .intro { padding: 28px 0; }
  .content-grid { grid-template-columns: 1fr; gap: 32px; }
  footer { margin-top: 45px; }
}
@media (max-width: 440px) {
  .link-list a { gap: 14px; }
  footer { flex-direction: column; gap: 9px; }
}
@media (prefers-reduced-motion: reduce) { .link-list a { transition: none; } }