:root {
--bg:#f4f7fb;
--surface:#fff;
--ink:#111827;
--muted:#627087;
--line:#dbe3ef;
--accent:#2563eb;
--accent-dark:#1745ad;
--soft:#e9f0ff;
--shadow:0 1.5rem 3rem #172b4d12;
--serif:Georgia,"Times New Roman",serif
}
* {
box-sizing:border-box
}
html {
scroll-behavior:smooth
}
body {
margin:0;
background:var(--bg);
color:var(--ink);
font:1rem/1.6 system-ui,-apple-system,"Segoe UI",sans-serif;
transition:background .25s,color .25s
}
.scroll-progress {
position:fixed;
z-index:10;
top:0;
left:0;
width:100%;
height:3px;
background:transparent;
pointer-events:none
}
.scroll-progress span {
display:block;
width:0;
height:100%;
background:var(--accent)
}
.site-header,main,.site-footer {
max-width:76rem;
margin:0 auto;
padding-left:clamp(1.5rem,5vw,5rem);
padding-right:clamp(1.5rem,5vw,5rem)
}
.site-header {
display:flex;
align-items:center;
justify-content:space-between;
min-height:5.7rem;
border-bottom:1px solid var(--line);
position:relative;
z-index:4;
background:color-mix(in srgb,var(--bg) 88%,transparent)
}
.brand {
display:flex;
align-items:center;
gap:.65rem;
color:var(--ink);
font-weight:800;
letter-spacing:-.04em;
text-decoration:none
}
.brand-mark {
display:grid;
width:2.2rem;
height:2.2rem;
place-items:center;
border:2px solid var(--accent);
border-radius:.7rem;
background:transparent;
color:var(--accent);
font-family:var(--serif);
font-size:1.1rem;
font-style:italic
}
nav {
display:flex;
align-items:center;
gap:clamp(1rem,3vw,2.2rem);
font-size:.87rem
}
nav a {
color:var(--muted);
text-decoration:none
}
nav a:hover,nav a:focus-visible {
color:var(--accent)
}
.nav-cta {
color:var(--ink);
font-weight:700
}
.menu-toggle {
display:none
}
.theme-switch {
display:inline-flex;
cursor:pointer
}
.theme-toggle {
position:absolute;
width:1px;
height:1px;
opacity:0
}
.theme-slider {
position:relative;
display:block;
width:4.1rem;
height:1.85rem;
padding:0 .38rem;
border:1px solid var(--line);
border-radius:99px;
background:var(--surface);
box-shadow:inset 0 1px 2px #0001;
pointer-events:none
}
.theme-thumb {
position:absolute;
top:.18rem;
left:.18rem;
width:1.45rem;
height:1.45rem;
border-radius:50%;
background:var(--accent);
transition:transform .2s
}
.theme-toggle:checked+.theme-slider {
background:var(--accent)
}
.theme-toggle:checked+.theme-slider .theme-thumb {
background:#fff;
transform:translateX(2.2rem)
}
.theme-toggle:focus-visible+.theme-slider {
outline:3px solid var(--accent);
outline-offset:3px
}
.theme-icon {
position:absolute;
z-index:1;
display:block;
top:.3rem;
width:1.25rem;
height:1.25rem;
color:var(--accent-dark)
}
.theme-icon-light {
left:2.55rem;
}
.theme-icon-dark {
display:none;
left:.65rem;
color:var(--on-accent)
}
[data-theme=dark] .theme-icon-light {
display:none
}
[data-theme=dark] .theme-icon-dark {
display:block
}
main {
position:relative
}
main:before {
position:absolute;
z-index:-1;
top:0;
right:0;
width:min(43rem,75vw);
height:31rem;
background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
background-size:2.5rem 2.5rem;
content:"";
mask-image:linear-gradient(to bottom left,#000,transparent 75%);
opacity:.45
}
.hero {
padding-top:clamp(5rem,10vw,9rem);
padding-bottom:clamp(5rem,10vw,8rem)
}
.eyebrow,.section-kicker,.hero-index,.hero-card-label,.hero-card-meta {
font-size:.7rem;
font-weight:800;
letter-spacing:.13em;
text-transform:uppercase
}
.eyebrow {
display:flex;
align-items:center;
gap:.7rem;
color:var(--muted)
}
.eyebrow-place {
margin-left:1rem;
color:var(--accent-dark)
}
.status-dot {
width:.45rem;
height:.45rem;
border-radius:50%;
background:#4eae73;
box-shadow:0 0 0 .25rem #4eae7322
}
.hero-layout {
display:grid;
grid-template-columns:minmax(0,1.6fr) minmax(13rem,.65fr);
gap:clamp(3rem,9vw,9rem);
align-items:end;
margin-top:2rem
}
.hero-index {
margin:0 0 1rem;
color:var(--accent)
}
h1 {
max-width:52rem;
margin:0 0 2rem;
font-family:var(--serif);
font-size:clamp(4rem,10vw,8.5rem);
font-weight:400;
letter-spacing:-.075em;
line-height:.88
}
h1 em,h2 em {
color:var(--accent);
font-style:italic
}
.lead {
max-width:38rem;
margin:0 0 2.3rem;
color:var(--muted);
font-size:clamp(1.05rem,2vw,1.25rem);
line-height:1.6
}
.lead strong {
color:var(--ink)
}
.hero-actions {
display:flex;
align-items:center;
gap:1.7rem;
flex-wrap:wrap
}
.button {
display:inline-flex;
align-items:center;
gap:1.5rem;
border-radius:999px;
padding:.85rem 1.35rem;
font-weight:700;
text-decoration:none;
transition:.18s
}
.button-primary {
background:var(--accent);
color:#fff;
box-shadow:0 .7rem 1.8rem #2563eb30
}
.button-primary:hover,.button-primary:focus-visible {
background:var(--accent-dark);
transform:translateY(-2px)
}
.text-link {
color:var(--ink);
font-weight:700;
text-underline-offset:.3rem
}
.text-link:hover {
color:var(--accent)
}
.hero-card {
padding:1.5rem;
border:1px solid var(--line);
border-radius:1rem;
background:color-mix(in srgb,var(--surface) 82%,transparent);
box-shadow:var(--shadow);
transform:rotate(2deg)
}
.hero-card-label,.hero-card-meta {
display:block;
color:var(--accent-dark)
}
.hero-card strong {
display:block;
margin:3.4rem 0 1rem;
font-family:var(--serif);
font-size:1.6rem;
font-weight:400;
line-height:1.05
}
.hero-card p {
margin:0;
color:var(--muted);
font-size:.85rem
}
.hero-card-line {
height:1px;
margin:2rem 0 .8rem;
background:var(--line)
}
.hero-card-line span {
display:block;
width:28%;
height:1px;
background:var(--accent)
}
.hero-card-meta {
font-size:.62rem
}
.content-section,.about-section {
padding:clamp(4rem,9vw,8rem) 0;
border-top:1px solid var(--line)
}
.section-heading {
display:grid;
grid-template-columns:minmax(11rem,.75fr) 2fr;
gap:2rem;
margin-bottom:3.5rem
}
.section-kicker {
margin:0;
color:var(--accent-dark)
}
h2 {
max-width:37rem;
margin:0;
font-family:var(--serif);
font-size:clamp(2.4rem,5vw,4.5rem);
font-weight:400;
letter-spacing:-.06em;
line-height:.96
}
.section-intro {
max-width:28rem;
margin:1.5rem 0 0;
color:var(--muted)
}
.project-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:1rem
}
.project-card {
display:flex;
min-height:23rem;
flex-direction:column;
justify-content:space-between;
padding:1.5rem;
border:1px solid var(--line);
border-radius:1rem;
background:var(--surface);
box-shadow:var(--shadow);
transition:transform .2s,border-color .2s,background .2s,color .2s;
cursor:pointer
}
.project-card:hover {
border-color:var(--accent);
transform:translateY(-5px)
}
.project-featured {
background:var(--accent);
color:#fff;
border-color:var(--accent);
box-shadow:0 1.5rem 3rem #2563eb30
}
.project-top,.project-bottom {
display:flex;
align-items:center;
justify-content:space-between;
gap:1rem
}
.project-number {
font-family:var(--serif);
font-size:1.4rem
}
.card-tag {
font-size:.65rem;
font-weight:800;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--accent-dark)
}
.project-featured .card-tag {
color:#dbeafe
}
.project-card h3 {
margin:0 0 .75rem;
font-family:var(--serif);
font-size:1.75rem;
font-weight:400;
letter-spacing:-.04em;
line-height:1
}
.project-card p {
margin:0;
color:var(--muted);
font-size:.92rem;
line-height:1.5
}
.project-featured p {
color:#e1ecff
}
.project-bottom {
padding-top:1rem;
border-top:1px solid var(--line);
color:var(--muted);
font-size:.68rem;
font-weight:700
}
.project-featured .project-bottom {
border-color:#ffffff55;
color:#dbeafe
}
.project-bottom a {
color:inherit;
text-decoration:none
}
.project-bottom a:hover {
color:var(--ink)
}
.project-featured .project-bottom a:hover {
color:#fff
}
.project-card:focus-visible {
outline:3px solid var(--accent);
outline-offset:3px
}
.about-section {
display:grid;
grid-template-columns:1fr 2fr;
gap:2rem
}
.about-copy {
max-width:39rem;
padding-left:2rem;
border-left:1px solid var(--accent)
}
.about-copy>p {
margin:0 0 2rem;
color:var(--muted);
font-family:var(--serif);
font-size:clamp(1.4rem,3vw,2.1rem);
line-height:1.25
}
.timeline {
display:grid;
grid-template-columns:1fr 1fr;
gap:1rem
}
.timeline div {
display:flex;
flex-direction:column;
gap:.4rem;
padding-top:1rem;
border-top:1px solid var(--line)
}
.timeline span {
color:var(--accent-dark);
font-size:.68rem;
font-weight:800;
letter-spacing:.1em;
text-transform:uppercase
}
.timeline strong {
font-size:.85rem
}
.contact-section {
padding:clamp(5rem,10vw,9rem) 0
}
.contact-section h2 {
margin:1.5rem 0 3rem;
max-width:40rem
}
.contact-link {
display:inline-flex;
align-items:center;
gap:1rem;
color:var(--ink);
font-family:var(--serif);
font-size:clamp(1.5rem,4vw,3rem);
text-decoration:underline;
text-decoration-color:var(--accent);
text-underline-offset:.35rem
}
.contact-link:hover {
color:var(--accent)
}
.site-footer {
display:flex;
justify-content:space-between;
gap:1rem;
padding-top:2rem;
padding-bottom:2rem;
border-top:1px solid var(--line);
color:var(--muted);
font-size:.75rem
}
.site-footer a {
color:var(--muted)
}
a:focus-visible,button:focus-visible {
outline:3px solid var(--accent);
outline-offset:3px
}
[data-theme=light] {
color-scheme:light
}
[data-theme=dark] {
color-scheme:dark;
--bg:#0b1220;
--surface:#121c2d;
--ink:#f4f7fb;
--muted:#a9b8cc;
--line:#263754;
--accent:#60a5fa;
--accent-dark:#93c5fd;
--soft:#172c4f;
--shadow:0 1.25rem 3rem #00000038
}
[data-theme=dark] .brand-mark {
background:var(--accent);
color:#0b1220
}
@media(max-width:700px) {
.site-header {
min-height:4.5rem
}
.menu-toggle {
display:inline-flex;
align-items:center;
gap:.5rem;
border:0;
background:transparent;
color:var(--ink);
font:inherit;
font-weight:700;
cursor:pointer
}
.menu-toggle span {
color:var(--accent);
font-size:1.3rem
}
.site-header nav {
position:absolute;
top:calc(100% + 1px);
left:0;
right:0;
display:none;
align-items:stretch;
flex-direction:column;
gap:0;
padding:1rem 1.5rem;
border-bottom:1px solid var(--line);
background:var(--bg);
box-shadow:var(--shadow)
}
.site-header nav.is-open {
display:flex
}
.site-header nav a {
padding:.65rem 0
}
.theme-switch {
position:absolute;
top:1.1rem;
right:1.5rem
}
.nav-cta {
display:none!important
}
main {
padding-top:0
}
main:before {
width:100%;
height:22rem;
background-size:2rem 2rem
}
.hero {
padding-top:4rem;
padding-bottom:5rem
}
.eyebrow {
align-items:flex-start;
flex-wrap:wrap
}
.eyebrow-place {
width:100%;
margin-left:1.15rem
}
.hero-layout {
display:block
}
.hero-card {
max-width:19rem;
margin:3.5rem 0 0 auto
}
.section-heading,.about-section {
display:block
}
.section-heading {
margin-bottom:2.5rem
}
.section-kicker {
margin-bottom:1.4rem
}
.project-grid {
grid-template-columns:1fr
}
.project-card {
min-height:18rem
}
.about-copy {
padding:2rem 0 0 1rem
}
.timeline {
grid-template-columns:1fr
}
.contact-section {
padding-bottom:6rem
}
.contact-link {
font-size:1.25rem
}
.site-footer {
align-items:flex-start;
flex-wrap:wrap
}
.site-footer span:nth-child(2) {
display:none
}
}
@media(prefers-reduced-motion:reduce) {
html {
scroll-behavior:auto
}
* {
transition-duration:.01ms!important
}
}
:root {
  --on-accent: #fff;
}
[data-theme="dark"] {
  --on-accent: #0b1220;
}
.button-primary,
.project-featured,
.project-featured p,
.project-featured .card-tag,
.project-featured .project-bottom,
.project-featured .project-bottom a:hover {
  color: var(--on-accent);
}