:root{ --bg:#fdf9f4;--surface:#fdf9f4;--text:#2d1b10;--muted:#8b6a47;--line:#e4b982;--accent:#b8762e;--accent-ink:#fdf9f4;--chip:#3d2817} @media (prefers-color-scheme:dark){ :root{ --bg:#1f1611;--surface:#2a1f18;--text:#f4f0ea;--muted:#c4a883;--line:#5c4a38;--accent:#e4b982;--accent-ink:#1f1611;--chip:#3a2d22} } [data-theme="light"]{ --bg:#fdf9f4;--surface:#fdf9f4;--text:#2d1b10;--muted:#8b6a47;--line:#e4b982;--accent:#b8762e;--accent-ink:#fdf9f4;--chip:#3d2817} [data-theme="dark"]{ --bg:#1f1611;--surface:#2a1f18;--text:#f4f0ea;--muted:#c4a883;--line:#5c4a38;--accent:#e4b982;--accent-ink:#1f1611;--chip:#3a2d22} html,body{ height:100%} body{ margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Inter","SF Pro Display",sans-serif;line-height:1.75;letter-spacing:0.3px;font-weight:400;-webkit-font-smoothing:antialiased} a{ color:var(--accent);text-decoration:underline;text-underline-offset:2px} a.button{ display:inline-block;text-decoration:none;font-weight:600;border:1px solid var(--accent);color:var(--accent);padding:.8rem 1.2rem;transition:all .2s ease} a.button.primary{ background:var(--accent);color:var(--accent-ink);border-color:var(--accent)} a.button:hover{ opacity:0.8} .container{ max-width:1100px;margin-inline:auto;padding:0 20px} .stack-xxl{ padding-block:120px} .stack-xl{ padding-block:72px} .stack-lg{ padding-block:56px} .section-head{ display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:28px} .section-head h2{ font-size:clamp(36px,5vw,48px);font-weight:700;margin:0;letter-spacing:-0.025em;position:relative;padding-bottom:16px;color:var(--text)} .section-head h2::after { content:'';position:absolute;bottom:0;left:0;width:60px;height:3px;background:var(--accent);border-radius:1px} .muted{ color:var(--muted)} .chips{ display:flex;gap:8px;flex-wrap:wrap} .chip{ font:500 12px/1.2 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;padding:6px 12px;border:1px solid var(--line);background:var(--surface);color:var(--muted)} .chip.solid{ background:var(--chip);color:var(--accent-ink);border-color:var(--chip)} .skip{ position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden} .skip:focus{ left:16px;top:16px;width:auto;height:auto;padding:10px 14px;background:var(--surface);border:1px solid var(--line);border-radius:12px} header.sticky{ position:sticky;top:0;backdrop-filter:saturate(140%) blur(6px);background-color:var(--surface);border-bottom:1px solid var(--line);z-index:10} .nav{ display:flex;align-items:center;justify-content:space-between;gap:12px;height:64px} .brand{ font-weight:700;letter-spacing:-0.02em} nav a{ text-decoration:none;color:var(--muted);padding:8px 10px;border-radius:10px} nav a:hover,nav a:focus{ color:var(--text);background:transparent;border-bottom:1px solid var(--accent)} .mode{ border:1px solid var(--line);background:transparent;color:var(--muted);padding:8px 12px;cursor:pointer} .hero{ display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center} .hero h1{ font-size:clamp(40px,6vw,64px);font-weight:800;line-height:1.1;letter-spacing:-0.025em;margin:0 0 16px} .hero p{ font-size:clamp(16px,2.4vw,20px);color:var(--muted);margin:0 0 20px} .cta-row{ display:flex;gap:12px;flex-wrap:wrap;align-items:center} .now-strip{ border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface);padding-block:20px} .now-strip .container{ display:grid;grid-template-columns:1fr 1fr 1fr;gap:32px;align-items:start} .now-item { display:flex;gap:12px;align-items:flex-start} .now-item .label{ font-weight:600;color:var(--accent);min-width:45px;flex-shrink:0} .now-item .text { color:var(--text);line-height:1.6} @media (max-width:920px){ .now-strip .container{ grid-template-columns:1fr;gap:16px} } #what-i-do::before,#work::before,#writing::before,#experience::before,#about::before,#contact::before { content:'';display:block;width:200px;height:3px;background:linear-gradient(90deg,transparent 10%,var(--accent) 50%,transparent 90%);margin:0 auto 48px auto;opacity:0.7;border-radius:2px} .grid{ display:grid;grid-template-columns:repeat(12,1fr);gap:18px} .card{ grid-column:span 4;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px;transition:transform .15s ease,box-shadow .15s ease} .card:hover{ transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.10)} .card h3{ margin:0 0 8px;font-size:clamp(20px,2.5vw,24px);font-weight:600;letter-spacing:-0.01em} .card p{ margin:0 0 8px;color:var(--muted);font-size:16px} .card ul{ margin:10px 0 0 18px;padding:0} .card li{ margin:6px 0} .posts{ display:grid;grid-template-columns:repeat(12,1fr);gap:18px} .post{ grid-column:span 4;border:1px solid var(--line);border-radius:18px;padding:18px;background:var(--surface)} .post h4{ margin:0 0 6px;font-size:18px} .post .date{ font-size:12px;color:var(--muted);margin-bottom:8px} .timeline{ border-left:2px solid var(--line);margin-left:10px;padding-left:18px} .tl-item{ margin:16px 0} .role{ font-weight:600} .dates{ color:var(--muted);font-size:14px} .about p{ max-width:70ch} .contact-buttons { display:flex;gap:12px;flex-wrap:wrap;align-items:center} footer{ border-top:1px solid var(--line);padding-block:28px;color:var(--muted)} @media (max-width:920px){ .hero{ grid-template-columns:1fr} .card{ grid-column:span 12} .post{ grid-column:span 12} }