@font-face{font-family:'Cabinet Grotesk';src:url('../fonts/CabinetGrotesk-Variable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --yellow:#ffd400;
  --ink:#111111;
  --ink-2:#2b2b2b;
  --paper:#f7f7f2;
  --white:#ffffff;
  --soft:#efefe8;
  --muted:#70706b;
  --line:#deded6;
  --green:#1f9d55;
  --red:#c93b3b;
  --radius:22px;
  --max:1220px;
  --shadow:0 18px 55px rgba(17,17,17,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  transition:opacity .12s ease,transform .12s ease;
}
body.page-enter{animation:page-in .28s ease both}
body.page-exit{opacity:0;transform:translateY(4px)}
@keyframes page-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit}
::selection{background:var(--yellow);color:var(--ink)}
.shell{width:min(calc(100% - 36px),var(--max));margin-inline:auto}
.skip-link{position:absolute;left:-999px;top:8px}
.skip-link:focus{
  left:12px;z-index:999;background:var(--ink);color:white;padding:10px 14px;border-radius:10px
}
.floating-header{
  position:sticky;
  top:14px;
  z-index:60;
  width:min(calc(100% - 28px),1240px);
  margin:14px auto 0;
  border:1px solid rgba(17,17,17,.08);
  border-radius:18px;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(18px);
  box-shadow:0 10px 36px rgba(17,17,17,.07);
}
.header-inner{
  min-height:60px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 18px;
}
.brand{display:flex;align-items:center;gap:9px;width:max-content;font-weight:800;letter-spacing:-.03em}
.brand-dot{width:11px;height:11px;border-radius:50%;background:var(--yellow)}
.desktop-nav{display:flex;gap:8px}
.desktop-nav a,.mobile-nav a{
  padding:9px 12px;
  border-radius:10px;
  color:var(--muted);
  font-size:13px;
  font-weight:650;
}
.desktop-nav a:hover,.desktop-nav a.active,.mobile-nav a.active{
  color:var(--ink);
  background:var(--soft);
}
.desktop-nav a.active::after{content:"";display:block;width:5px;height:5px;background:var(--yellow);border-radius:50%;margin:4px auto -4px}
.menu-button{
  display:none;
  justify-self:end;
  border:0;
  background:var(--ink);
  color:white;
  padding:9px 12px;
  border-radius:10px;
  cursor:pointer;
}
.mobile-nav{display:none;padding:0 18px 16px;gap:6px;flex-direction:column}
.mobile-nav.open{display:flex}
.hero{padding:112px 0 86px}
.hero-kicker,.kicker,.meta,.status-pill,.breadcrumb,.site-footer,.filter-button{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:12px;
  letter-spacing:.045em;
  text-transform:uppercase;
}
.hero-kicker,.breadcrumb,.meta{color:var(--muted)}
.kicker{color:#8e7600;display:block;margin-bottom:13px}
.hero h1,.page-title{
  margin:0;
  max-width:1050px;
  font-size:clamp(54px,8vw,116px);
  line-height:.9;
  letter-spacing:-.068em;
}
.hero h1 span{background:linear-gradient(transparent 68%,var(--yellow) 68%);padding:0 .02em}
.hero-copy{
  margin-top:42px;
  max-width:560px;
  color:var(--muted);
  font-size:18px;
  line-height:1.7;
}
.hero-actions{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.button{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:0 16px;
  border-radius:12px;
  background:var(--ink);
  color:white;
  font-weight:700;
  font-size:14px;
}
.button.new{
  position:relative;
}
.button.new::after{
  content:"NEW!";
  position:absolute;
  top:-9px;
  right:-13px;
  padding:3px 6px;
  background:var(--yellow);
  color:var(--ink);
  border:1.5px solid var(--ink);
  border-radius:6px;
  font-size:9px;
  font-weight:900;
  line-height:1;
  letter-spacing:.04em;
  transform:rotate(7deg);
  box-shadow:2px 2px 0 var(--ink);
  pointer-events:none;
}
.button:hover{transform:translateY(-2px)}
.section{padding:82px 0}
.section + .section{border-top:1px solid var(--line)}
.section-head{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:end;
  gap:30px;
  margin-bottom:28px;
}
.section-head h2{
  margin:0;
  font-size:clamp(34px,4.8vw,64px);
  line-height:.98;
  letter-spacing:-.052em;
}
.section-head p{max-width:450px;color:var(--muted);line-height:1.6;margin:0}
.project-card{
  --card-accent:#d9d9d2;
  position:relative;
  display:block;
  min-width:0;
  overflow:hidden;
  min-height:290px;
  border-radius:var(--radius);
  background:var(--card-accent);
  box-shadow:var(--shadow);
  isolation:isolate;
  transition:transform .22s ease,box-shadow .22s ease;
}
.project-card:hover{transform:translateY(-5px);box-shadow:0 24px 65px rgba(17,17,17,.13)}
.card-media{position:absolute;inset:0;display:block;overflow:hidden;z-index:-1}
.card-media img{width:100%;height:100%;object-fit:var(--image-fit,cover);object-position:center;opacity:.82;transform:scale(1.01);transition:transform .35s ease}
.project-card:hover .card-media img{transform:scale(1.04)}
.card-main h3{
  margin:0 0 10px;
  font-size:clamp(38px,5vw,76px);
  line-height:.9;
  letter-spacing:-.06em;
  overflow-wrap:anywhere;
}
.card-main p{max-width:620px;margin:0;color:rgba(255,255,255,.82);line-height:1.5}
.status-pill{
  width:max-content;
  padding:6px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  color:inherit;
  backdrop-filter:blur(10px);
}
.status-active,.status-live{background:rgba(31,157,85,.15);color:#0b6d39}
.project-card .status-active,.project-card .status-live{color:white;background:rgba(14,111,60,.58)}
.status-building{background:rgba(255,212,0,.2);color:#725f00}
.project-card .status-building{color:white;background:rgba(132,109,0,.52)}
.status-paused{background:#ece7d4;color:#665d37}
.status-archived{background:#e5e5e0;color:#676760}
.status-broken{background:rgba(201,59,59,.13);color:#a02626}
.archive-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 24px;
}
.filter-button{
  cursor:pointer;
  border:1px solid var(--line);
  border-radius:999px;
  background:white;
  padding:9px 12px;
  color:var(--muted);
}
.filter-button.active,.filter-button:hover{background:var(--ink);color:white;border-color:var(--ink)}
.projects-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}
.projects-grid .project-card{min-height:410px}
.projects-grid > div{min-width:0}
.page-head{padding:92px 0 48px}
.page-head .page-title{font-size:clamp(54px,7vw,96px)}
.page-head p{max-width:660px;color:var(--muted);font-size:18px;line-height:1.65}
.link-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.link-chip{
  display:inline-flex;
  padding:10px 12px;
  border-radius:10px;
  background:var(--ink);
  color:white;
  font-weight:750;
  font-size:13px;
}
.timeline{display:grid;gap:0}
.archive-card{
  background:white;
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px;
}
.archive-card h3{margin:32px 0 8px;font-size:26px;letter-spacing:-.04em}
.archive-card p{margin:0;color:var(--muted);line-height:1.5}
.site-footer{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:26px 0 42px;
  border-top:1px solid var(--line);
  color:var(--muted);
}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
@media(max-width:900px){
.header-inner{grid-template-columns:1fr auto}
.desktop-nav{display:none}
.menu-button{display:block}
.hero{padding-top:86px}
.section-head{grid-template-columns:1fr}
.archive-grid{grid-template-columns:1fr 1fr}
.projects-grid{grid-template-columns:1fr}
.projects-grid .project-card:nth-child(3n){grid-column:auto}
}
@media(max-width:620px){
.shell{width:min(calc(100% - 24px),var(--max))}
.floating-header{width:min(calc(100% - 16px),1240px);top:8px;margin-top:8px}
.hero h1{font-size:clamp(48px,16vw,74px)}
.hero-copy{font-size:16px}
.archive-grid{grid-template-columns:1fr}
.site-footer{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
*{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}
picture{margin:0}
.project-card{background:var(--card-accent,#444)}
@media (prefers-reduced-data: reduce){
.card-media{display:none}
}
.home-page .hero{padding:64px 0 36px}
.home-page .hero h1{max-width:1000px;font-size:clamp(52px,6.5vw,94px);line-height:.98;letter-spacing:-.06em}
.home-page .hero-copy{margin:26px 0 0;max-width:650px;line-height:1.6}
.home-page .hero-actions{margin-top:24px}
.home-page .section{padding:56px 0}
.home-page .home-projects{padding-top:24px}
.home-page .section-head h2{font-size:clamp(32px,3.8vw,50px);line-height:1.05}
.text-link{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;font-size:14px;font-weight:650;text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--line)}
.text-link:hover{ text-decoration-color:var(--ink)}
.project-visual{padding-top:12px}
.page-head{padding:64px 0 24px}
.page-head + .section{padding-top:24px}
.footer-contact{color:var(--ink);text-transform:none;font-family:ui-sans-serif,system-ui,sans-serif;font-size:14px;font-weight:650;text-decoration:underline;text-underline-offset:4px}
.site-footer a{min-height:44px;display:flex;align-items:center}
.site-footer{align-items:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.journal-entry{display:grid;grid-template-columns:145px minmax(0,1fr);gap:36px;padding:32px 0;border-bottom:1px solid var(--line)}
.journal-entry-meta{display:flex;flex-direction:column;gap:10px;padding-top:7px;font-size:12px;color:var(--muted)}
.journal-entry-meta>span{color:var(--ink-2)}
.journal-entry h2,.journal-entry h3{font:400 clamp(25px,2.5vw,34px)/1.22 Georgia,'Times New Roman',serif;letter-spacing:-.025em;margin:0 0 12px;text-wrap:pretty;overflow-wrap:anywhere}
.journal-entry h2 a,.journal-entry h3 a{display:inline-block}
.journal-entry a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.entry-arrow{font:20px ui-sans-serif,system-ui,sans-serif;color:var(--muted);white-space:nowrap}
.journal-entry p{max-width:650px;margin:0;color:var(--muted);font-size:15px;line-height:1.65}
.journal-entry-detail{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:16px;font-size:12px;color:var(--muted)}
.home-journal .journal-entry:first-child{border-top:1px solid var(--line)}
.home-journal .journal-entry{grid-template-columns:150px minmax(0,1fr);padding:26px 0}
@media(max-width:900px){
.home-page .hero{padding-top:48px}
.journal-entry{gap:24px;grid-template-columns:120px minmax(0,1fr)}
}
@media(max-width:620px){
.home-page .hero{padding:40px 0 24px}
.home-page .hero h1{font-size:clamp(42px,12vw,64px);line-height:1.02}
.home-page .hero-copy{margin-top:22px;font-size:16px}
.home-page .hero-actions{gap:8px 10px;margin-top:20px}
.home-page .hero-actions .text-link{padding-left:0}
.home-page .section{padding:38px 0}
.home-page .home-projects{padding-top:12px}
.section-head{gap:14px}
.section-head h2{line-height:1.06}
.card-main h3{font-size:32px;line-height:1.02}
.site-footer{align-items:flex-start;gap:8px}
.brand{font-size:14px}
.header-inner{padding-inline:14px}
.menu-button{min-height:44px}
.journal-entry,.home-journal .journal-entry{grid-template-columns:minmax(0,1fr);gap:14px;padding:26px 0}
.journal-entry-meta{flex-direction:row;flex-wrap:wrap;gap:16px;padding-top:0}
.journal-entry h2,.journal-entry h3{font-size:27px}
.journal-entry-detail{gap:8px 14px}
}