/* Hallmark · macrostructure: Portfolio Grid · theme: custom · vibe: quiet architectural image gallery
 * paper: oklch(93% .008 230) · accent: oklch(37% .08 230) · display: Space Grotesk · body: Manrope
 * axes: light / geometric-sans / cool · enrichment: licensed architectural photography */
:root { color-scheme:light; --paper:oklch(93% .008 230); --panel:oklch(88% .012 230); --ink:oklch(23% .014 230); --muted:oklch(42% .014 230); --rule:oklch(75% .014 230); --accent:oklch(37% .08 230); --display:"Space Grotesk",sans-serif; --body:"Manrope",sans-serif; --weight:400; --page-gutter:clamp(20px,3.8vw,64px); }
.folio-header { display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); padding:var(--space-6) var(--page-gutter); }
.folio-brand { font:500 1.375rem/1.3 var(--display); letter-spacing:-.065em; text-decoration:none; }
.folio-header nav { display:flex; gap:var(--space-8); }
.folio-header nav a { display:inline-flex; min-height:44px; align-items:center; font-size:.75rem; text-decoration:none; }
.folio-header nav a:last-child { text-decoration:underline; }
.folio-intro { padding:var(--space-6) var(--page-gutter) var(--space-10); display:flex; justify-content:space-between; align-items:end; gap:var(--space-6); }
.folio-intro h1 { font:400 clamp(1.375rem,2.5vw,2rem)/1.2 var(--display); letter-spacing:-.055em; }
.folio-intro p { margin:0; color:var(--muted); font-size:.75rem; }
.selected-work { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.8fr) minmax(0,1fr); align-items:start; gap:var(--space-6); padding:0 var(--page-gutter) var(--space-16); }
.folio-project { min-width:0; }
.folio-project figure { margin:0; }
.folio-project img { width:100%; height:440px; object-fit:cover; }
.project-curve img { height:520px; object-position:45% 50%; filter:saturate(.6); }
.project-color { padding-top:var(--space-16); }
.project-color img { height:364px; }
.project-light { padding-top:var(--space-4); }
.project-light img { height:464px; filter:saturate(.7); }
.folio-project figcaption { margin-top:var(--space-4); }
.folio-project h2 { font:500 .9375rem/1.4 var(--display); letter-spacing:-.02em; }
.folio-project figcaption p { color:var(--muted); font-size:.6875rem; margin:var(--space-1) 0; }
.folio-project summary { cursor:pointer; width:fit-content; font-size:.6875rem; min-height:44px; align-content:center; }
.folio-project details > p { font-size:.8125rem; color:var(--muted); border-top:1px solid var(--rule); padding-top:var(--space-3); }
.folio-information { padding:var(--space-12) var(--page-gutter) var(--space-16); max-width:760px; margin-left:auto; }
.folio-information h2 { font-size:1.5rem; margin-bottom:var(--space-6); }
.folio-information p { color:var(--muted); font-size:.9375rem; line-height:1.8; }
.folio-information p:last-child { font-size:.75rem; }
.folio-contact { display:flex; justify-content:space-between; align-items:end; gap:var(--space-8); padding:var(--space-12) var(--page-gutter) var(--space-20); border-top:1px solid var(--rule); }
.folio-contact h2 { font-size:clamp(2rem,4vw,3.25rem); letter-spacing:-.06em; }
.folio-contact a { display:inline-flex; min-height:44px; align-items:center; gap:var(--space-8); font-size:.8125rem; }
.folio-kicker { margin:0 0 var(--space-5); font:500 .75rem/1.5 var(--body); }
.folio-observations { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:var(--space-16); padding:var(--space-16) var(--page-gutter); background:var(--ink); color:var(--paper); }
.folio-observations h2 { font-size:clamp(2rem,4vw,3.5rem); letter-spacing:-.065em; }
.folio-observations article + article { margin-top:var(--space-8); padding-top:var(--space-6); border-top:1px solid var(--rule); }
.folio-observations h3 { font-size:1.0625rem; font-weight:500; }
.folio-observations article p { margin:var(--space-4) 0 0; font-size:.875rem; line-height:1.8; }
.folio-information .folio-kicker { color:var(--ink); font-size:.75rem; }
.folio-brief { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,8vw,112px); padding:var(--space-12) var(--page-gutter) var(--space-16); border-top:1px solid var(--rule); }
.folio-brief h2 { font-size:clamp(1.75rem,3vw,2.75rem); letter-spacing:-.055em; }
.folio-brief > div > p:last-child { font-size:.9375rem; line-height:1.8; color:var(--muted); max-width:38ch; margin-top:var(--space-6); }
.folio-brief dl { margin:0; }
.folio-brief dl > div { display:grid; grid-template-columns:minmax(0,.6fr) minmax(0,1fr); gap:var(--space-5); padding:var(--space-5) 0; border-top:1px solid var(--rule); }
.folio-brief dt { font-size:.8125rem; font-weight:600; }
.folio-brief dd { font-size:.875rem; color:var(--muted); line-height:1.8; margin:0; }
.folio-sequence { padding:var(--space-12) var(--page-gutter) var(--space-16); background:var(--panel); }
.folio-sequence h2 { max-width:25ch; font-size:clamp(1.75rem,3vw,2.75rem); }
.folio-sequence ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-8); list-style:none; padding:0; margin:var(--space-10) 0 0; }
.folio-sequence li { border-top:1px solid var(--rule); padding-top:var(--space-4); }
.folio-sequence li > span { font:400 2.5rem/1.2 var(--display); color:var(--muted); }
.folio-sequence h3 { font-size:1rem; line-height:1.5; margin-top:var(--space-6); }
.folio-sequence li p { font-size:.875rem; line-height:1.8; color:var(--muted); }
@media(max-width:48rem) { .folio-observations,.folio-brief { grid-template-columns:1fr; gap:var(--space-8); padding-block:var(--space-12); } .folio-sequence ol { grid-template-columns:1fr; gap:var(--space-6); } .folio-sequence h3 { margin-top:var(--space-3); } }
@media(max-width:25rem) { .folio-brief dl > div { grid-template-columns:1fr; gap:var(--space-3); } }
@media(max-width:48rem) { .folio-header { flex-wrap:wrap; gap:var(--space-2); } .folio-header nav { gap:var(--space-5); } .folio-intro { display:block; padding-top:var(--space-8); } .folio-intro p { margin-top:var(--space-4); } .selected-work { grid-template-columns:1.12fr .88fr; gap:var(--space-4); } .project-curve img { height:360px; } .project-color { padding-top:var(--space-12); } .project-color img { height:300px; } .project-light { grid-column:1/-1; width:65%; margin-left:auto; padding-top:var(--space-8); } .project-light img { height:380px; } .folio-contact { align-items:start; flex-direction:column; } }
@media(max-width:25rem) { .folio-header nav a { font-size:.6875rem; } .selected-work { display:block; } .folio-project { padding:0; margin:0 0 var(--space-8); width:auto; } .folio-project img { height:400px; } .folio-information { padding-top:var(--space-4); } }