@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/fraunces-0.ttf) format('truetype');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/fraunces-1.ttf) format('truetype');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/fraunces-2.ttf) format('truetype');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/fraunces-3.ttf) format('truetype');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/fraunces-4.ttf) format('truetype');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/fraunces-5.ttf) format('truetype');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/fraunces-6.ttf) format('truetype');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/fraunces-7.ttf) format('truetype');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/fraunces-8.ttf) format('truetype');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/fraunces-9.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/inter-0.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/inter-1.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/inter-2.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/inter-3.ttf) format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jetbrains-0.ttf) format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/jetbrains-1.ttf) format('truetype');
}

:root { --background:oklch(0.16 0.015 60); --foreground:oklch(0.96 0.008 80); --card:oklch(0.2 0.018 62); --accent:oklch(0.8 0.13 78); --border:oklch(0.32 0.02 62); --muted-foreground:oklch(0.73 0.02 78); --font-display:"Fraunces",Georgia,serif; --font-sans:"Inter",system-ui,sans-serif; --font-mono:"JetBrains Mono",monospace; }
* { box-sizing:border-box; margin:0; }
body { background:var(--background); color:var(--foreground); font-family:var(--font-sans); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
header { max-width:48rem; }
.family-heading span { font-style:italic; color:var(--accent); }
.intro { margin-top:24px; max-width:36rem; font-size:18px; line-height:1.65; color:var(--muted-foreground); }
.projects { margin-top:80px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.kicker { font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.25em; color:var(--accent); }
.description { margin-top:12px; font-size:14px; line-height:1.65; color:var(--muted-foreground); }
.view-link { display:inline-flex; align-items:center; gap:8px; margin-top:24px; font-size:14px; font-weight:500; }
button { font:inherit; cursor:pointer; }
.privacy-reopen { background:none; border:0; }
.privacy-actions button { padding:8px 16px; border:1px solid var(--border); border-radius:6px; background:var(--background); color:var(--foreground); font-size:14px; }
button:hover,a:focus-visible { outline:1px solid var(--accent); }
[hidden] { display:none !important; }
.no-script { text-align:center; padding:20px; font-size:12px; color:var(--muted-foreground); }
@media(max-width:639px) { .projects { grid-template-columns:1fr; margin-top:64px; } .intro { font-size:16px; } }
:root { --logo-surface: oklch(0.245 0 0); --project-shadow: 0 30px 80px -40px color-mix(in oklab,var(--accent) 60%,transparent); }
.page-wrap { position: relative; max-width: 72rem; margin:auto; padding:48px 24px 32px; }
.brand-logo { display:block; width:200px; height:auto; background:var(--logo-surface); }
.family-heading { margin-top:28px; font-family:var(--font-display); font-size:72px; line-height:1.05; letter-spacing:0; }
.project-card { position:relative; overflow:hidden; border:1px solid var(--border); border-radius:8px; background:var(--card); transition:border-color .4s,box-shadow .4s; }
.project-card:hover { border-color:var(--accent); box-shadow:var(--project-shadow); }
.project-image { position:relative; aspect-ratio:4/3; overflow:hidden; }
.project-photo { height:100%; width:100%; object-fit:cover; transition:transform .9s ease-out; }
.project-card:hover .project-photo { transform:scale(1.04); }
.project-shade { position:absolute; inset:0; background:linear-gradient(to top,var(--card),transparent 52%); }
.project-copy { position:relative; margin-top:-56px; padding:28px; }
.project-title { margin-top:12px; font-family:var(--font-display); font-size:30px; line-height:1.2; letter-spacing:0; overflow-wrap:break-word; }
.site-footer { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; margin-top:80px; border-top:1px solid var(--border); padding-top:32px; font-size:12px; color:var(--muted-foreground); }
.site-footer a:last-child { justify-self:end; }
.site-footer a:hover { color:var(--accent); }
.privacy-reopen { display:block; margin:12px auto 0; padding:0; height:24px; font-size:11px; color:var(--muted-foreground); }
.privacy-notice { position:fixed; z-index:50; bottom:0; left:0; right:0; border-top:1px solid var(--border); background:var(--card); padding:24px max(24px,calc((100% - 1104px)/2)); display:flex; gap:28px; align-items:center; box-shadow:var(--project-shadow); }
.privacy-copy { flex:1; min-width:0; }
.privacy-copy h2 { font-size:17px; font-weight:600; margin-bottom:8px; }
.privacy-copy p { font-size:12px; line-height:1.6; color:var(--muted-foreground); }
.privacy-copy a { color:var(--accent); text-decoration:underline; }
.privacy-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
@media(max-width:639px) {
 .page-wrap { padding-top:32px; }
 .brand-logo { width:156px; }
 .family-heading { font-size:48px; }
 .project-title { font-size:26px; }
 .site-footer { grid-template-columns:1fr 1fr; gap:16px; margin-top:48px; }
 .site-footer p { grid-column:1/-1; }
 .privacy-notice { flex-direction:column; align-items:stretch; gap:16px; padding:20px; }
 .privacy-actions button { flex:1; white-space:normal; height:auto; min-height:40px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; animation:none !important; } }