:root { --paper:#f3f1eb; --ink:#171a1b; --muted:#71736e; --rule:#d8d5cc; --blue:#254d68; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:'DM Sans',sans-serif; font-size:16px; line-height:1.5; } a { color:inherit; text-decoration:none; } a:focus-visible { outline:2px solid var(--blue); outline-offset:5px; }
.skip-link { position:absolute; left:-999px; top:10px; padding:8px 12px; background:var(--ink); color:var(--paper); } .skip-link:focus { left:10px; z-index:5; }
.page-shell { max-width:1240px; margin:0 auto; padding:0 56px; } .site-header { height:106px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--rule); } .wordmark { font-family:'DM Mono',monospace; font-size:13px; letter-spacing:.12em; font-weight:500; } nav { display:flex; gap:30px; font-size:14px; color:var(--muted); } nav a:hover { color:var(--ink); }
.eyebrow,.work-type,.section-label span,.item-number { font-family:'DM Mono',monospace; text-transform:uppercase; font-size:11px; letter-spacing:.08em; color:var(--muted); }
.hero { min-height:610px; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(330px,.95fr); gap:80px; align-items:center; border-bottom:1px solid var(--rule); } .hero h1 { max-width:730px; margin:26px 0 28px; font-family:'Playfair Display',serif; font-size:clamp(49px,5.2vw,76px); line-height:1.04; font-weight:500; letter-spacing:-.035em; } .intro { max-width:570px; color:#535752; font-size:17px; line-height:1.75; } .text-link { display:inline-block; margin-top:26px; color:var(--blue); font-size:14px; border-bottom:1px solid var(--blue); padding-bottom:4px; } .text-link span { margin-left:8px; }
.signal { position:relative; width:100%; max-width:430px; aspect-ratio:1; justify-self:end; border:1px solid var(--rule); overflow:hidden; background:rgba(255,255,255,.14); } .signal-grid { position:absolute; inset:0; opacity:.55; background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px); background-size:42px 42px; } .node { position:absolute; z-index:2; padding:8px 11px; border:1px solid #aeb7b8; background:var(--paper); color:var(--blue); font-family:'DM Mono',monospace; font-size:11px; } .node-a{top:18%;left:16%}.node-b{top:39%;left:43%}.node-c{top:63%;left:14%}.node-d{top:76%;left:57%}.node-e{top:20%;left:68%}.signal-line { position:absolute; z-index:1; height:1px; background:#8fa4ad; transform-origin:left center; }.line-a{width:145px;top:42%;left:25%;transform:rotate(-10deg)}.line-b{width:155px;top:43%;left:53%;transform:rotate(-42deg)}.line-c{width:150px;top:68%;left:24%;transform:rotate(-19deg)}.line-d{width:170px;top:69%;left:57%;transform:rotate(24deg)}
.exploring,.selected { padding:92px 0 100px; border-bottom:1px solid var(--rule); } .section-label { display:flex; align-items:baseline; gap:16px; margin-bottom:46px; } .section-label h2 { margin:0; font-size:14px; text-transform:uppercase; letter-spacing:.1em; font-weight:500; } .section-label span { color:var(--blue); } .exploring-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:42px; } article { border-top:1px solid #aeb1ab; padding-top:18px; } article h3 { max-width:240px; margin:28px 0 12px; font-family:'Playfair Display',serif; font-size:25px; line-height:1.15; font-weight:500; } article p { max-width:260px; color:var(--muted); font-size:14px; line-height:1.65; }
.work-list { border-top:1px solid #aeb1ab; } .work-row { display:flex; justify-content:space-between; align-items:center; padding:25px 0; border-bottom:1px solid var(--rule); } .work-row h3 { margin:8px 0 0; font-family:'Playfair Display',serif; font-size:28px; line-height:1.1; font-weight:500; } .arrow { color:var(--blue); font-size:22px; } .work-row:hover h3 { color:var(--blue); }
.closing { display:grid; grid-template-columns:190px minmax(0,720px); gap:58px; align-items:center; padding:120px 0 135px; } .about-portrait { width:190px; height:235px; overflow:hidden; filter:sepia(.1) contrast(.96); } .about-portrait img { width:100%; height:100%; object-fit:cover; object-position:center 28%; } .closing-mark { color:var(--blue); font-size:27px; margin:0 0 25px; } .closing p:last-child { margin:0; font-family:'Playfair Display',serif; font-size:42px; line-height:1.17; letter-spacing:-.02em; }
.site-footer { display:flex; justify-content:space-between; padding:24px 0 34px; color:var(--muted); font-family:'DM Mono',monospace; font-size:11px; letter-spacing:.03em; } .site-footer a { color:var(--blue); }
.inner-page { padding:100px 0 130px; max-width:860px; } .inner-page h1 { margin:20px 0 28px; font-family:'Playfair Display',serif; font-size:clamp(52px,7vw,88px); line-height:1.02; font-weight:500; letter-spacing:-.035em; } .lede { max-width:650px; color:#535752; font-size:19px; line-height:1.7; } .rule-list { margin-top:80px; border-top:1px solid #aeb1ab; } .entry { padding:34px 0 42px; border-bottom:1px solid var(--rule); } .entry h2 { margin:8px 0 15px; font-family:'Playfair Display',serif; font-size:34px; line-height:1.1; font-weight:500; } .entry p { max-width:700px; color:#535752; font-size:16px; line-height:1.75; } .entry p:last-child { margin-bottom:0; } .back-link { display:inline-block; margin-top:35px; color:var(--blue); font-size:14px; border-bottom:1px solid var(--blue); padding-bottom:4px; }
.article-page { max-width:1150px; padding-bottom:140px; } .article-page h1 { max-width:1080px; font-size:clamp(50px,6.2vw,78px); } .article-meta { margin:0 0 65px; color:var(--muted); font-family:'DM Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; } .article-body { max-width:900px; color:#303431; font-size:18px; line-height:1.78; } .article-body p { max-width:100%; margin:0 0 28px; color:#303431; font-size:18px; line-height:1.78; } .article-body .pullquote { max-width:100%; margin:52px 0; padding:25px 0 25px 28px; border-left:2px solid var(--blue); color:var(--ink); font-family:'Playfair Display',serif; font-size:30px; line-height:1.25; } .article-body .small-note { max-width:100%; color:var(--muted); font-size:14px; line-height:1.65; }
@media (max-width:760px) { .page-shell{padding:0 22px}.site-header{height:82px}nav{gap:13px;font-size:12px}nav a:nth-child(3){display:none}.hero{display:block;padding:82px 0 75px}.hero h1{font-size:48px}.signal{margin-top:65px;max-width:none}.exploring-grid{grid-template-columns:1fr;gap:32px}.exploring,.selected{padding:70px 0}.closing{grid-template-columns:1fr;gap:38px;padding:90px 0 105px}.about-portrait{width:145px;height:180px}.closing p:last-child{font-size:34px}.site-footer{gap:15px;flex-wrap:wrap}.inner-page{padding:70px 0 95px}.inner-page h1{font-size:52px}.entry h2{font-size:29px}.article-page{padding-bottom:100px}.article-page h1{font-size:50px}.article-body{max-width:none;font-size:17px;line-height:1.75}.article-body p{font-size:17px;line-height:1.75}.article-body .pullquote{font-size:27px;margin:42px 0} }