:root { color-scheme:light; --paper:#f8f6f0; --ink:#24221f; --secondary:#665d53; --accent:#9c4100; --line:#ddd7cc; --preview:#ede7dd; font-family:"Avenir Next",Avenir,"Segoe UI",sans-serif; color:var(--ink); background:var(--paper); font-synthesis:none; }
* { box-sizing:border-box; }
body { margin:0; }
::selection { background:#f2d3b6; color:var(--ink); }
a { color:inherit; text-decoration-thickness:1px; text-underline-offset:5px; }
a:focus-visible,button:focus-visible { outline:3px solid var(--accent); outline-offset:6px; }
header,main { width:min(1200px,calc(100% - 80px)); margin-inline:auto; }
header { padding-block:32px; border-bottom:1px solid var(--line); }
.wordmark { display:inline-flex; align-items:center; gap:16px; min-height:80px; text-decoration:none; }
.brand-name { margin:0; font-size:1.35rem; font-weight:650; letter-spacing:-.03em; }
.brand-name>span { color:var(--accent); }
.brand-icon { display:block; flex-shrink:0; width:80px; height:80px; object-fit:contain; border-radius:50%; }
.projects { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px 32px; padding-block:48px 80px; }
.project { position:relative; min-width:0; }
.project-link { display:block; text-decoration:none; }
.preview { overflow:hidden; background:var(--preview); aspect-ratio:1.44; border-radius:12px; }
.preview img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.project-title { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-block:20px 10px; }
.project h2 { font-size:1.4rem; line-height:1.25; font-weight:600; letter-spacing:-.025em; margin:0; text-wrap:balance; }
.project-description { margin:0 0 12px; color:var(--secondary); font-size:.95rem; line-height:1.5; max-width:60ch; }
.domain { font-size:.82rem; color:var(--accent); overflow-wrap:anywhere; }
.project-link:hover h2 { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; }
.preview-toggle { position:absolute; top:12px; right:12px; width:44px; height:44px; padding:10px; border:1px solid var(--line); border-radius:50%; background:var(--paper); color:var(--ink); cursor:pointer; }
.preview-toggle svg { display:block; width:22px; height:22px; }
.preview-toggle[aria-pressed="true"] { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.preview-toggle:hover { border-color:var(--accent); }
.preview-toggle:disabled { cursor:progress; opacity:.65; }
.skip { position:absolute; left:16px; top:-100px; padding:12px; background:var(--paper); z-index:1; }
.skip:focus { top:16px; }
@media(max-width:720px) {
  header,main { width:calc(100% - 40px); }
  header { padding-block:24px; }
  .wordmark { min-height:56px; gap:12px; }
  .brand-icon { width:56px; height:56px; }
  .projects { grid-template-columns:1fr; gap:40px; padding-block:32px 56px; }
  .project-title { margin-top:16px; }
}
@media(prefers-contrast:more) {
  :root { --secondary:#24221f; --line:#665d53; }
  .domain { text-decoration:underline; }
}