@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --paper:#EEEBE3;
  --paper-card:#E5E1D6;
  --ink:#1B1B1F;
  --ink-soft:#57564F;
  --magenta:#DE2C6C;
  --cyan:#1595D6;
  --yellow:#E8B923;
  --line: rgba(27,27,31,0.14);
  --sidebar-w: 260px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{background:var(--paper); color:var(--ink); font-family:'Inter', sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.mono{font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft);}

/* "ä" personal brand mark — used for tags, hero eyebrow, services, location (NOT the main logo) */
.crossmark{display:inline-block; flex-shrink:0; font-family:'Fraunces', serif; font-style:normal; font-weight:500; color:var(--magenta); line-height:1;}
.crossmark::before{content:"ä";}

/* original geometric cross mark — used only in the main site logo, left untouched */
.logomark{display:inline-block; width:11px; height:11px; position:relative; flex-shrink:0;}
.logomark::before,.logomark::after{content:""; position:absolute; background:var(--ink);}
.logomark::before{width:100%; height:1px; top:50%;}
.logomark::after{height:100%; width:1px; left:50%;}

.colorbar{display:flex; height:5px; width:100%;}
.colorbar span{flex:1;}
.colorbar .c{background:var(--cyan);} .colorbar .m{background:var(--magenta);}
.colorbar .y{background:var(--yellow);} .colorbar .k{background:var(--ink);}

/* ===== layout shell ===== */
.shell{display:flex; min-height:100vh;}
.sidebar{
  width:var(--sidebar-w); flex-shrink:0; position:sticky; top:0; height:100vh;
  border-right:1px solid var(--line); display:flex; flex-direction:column; justify-content:space-between;
  padding:32px 28px;
}
.sidebar-top .logo{font-family:'IBM Plex Mono', monospace; font-size:14px; display:flex; align-items:center; gap:10px; margin-bottom:48px;}
.sidebar nav ul{list-style:none; display:flex; flex-direction:column; gap:20px;}
.sidebar nav a{font-size:15px; font-weight:500; display:flex; align-items:center; gap:10px;}
.sidebar nav a .dot{width:5px; height:5px; border-radius:50%; background:transparent;}
.sidebar nav a:hover .dot, .sidebar nav a.active .dot{background:var(--magenta);}
.sidebar nav a:hover, .sidebar nav a.active{color:var(--magenta);}
.sidebar-bottom .avail{font-size:13px; margin-bottom:16px; color:var(--ink-soft);}
.sidebar-bottom .social{display:flex; gap:16px; margin-bottom:20px;}
.social a{color:var(--ink-soft); display:inline-flex;}
.social a:hover{color:var(--magenta);}
.social svg{width:18px; height:18px; stroke:currentColor; fill:none;}
.topbar{display:none;}
main{flex:1; min-width:0;}
.wrap{max-width:900px; margin:0 auto; padding:0 40px;}

/* ===== hero ===== */
.hero{padding:72px 0 48px;}
.eyebrow{display:flex; align-items:center; gap:10px; margin-bottom:22px;}
h1.headline{font-family:'Fraunces', serif; font-size:50px; line-height:1.06; font-weight:500; max-width:760px;}
h1.headline em{font-style:italic; color:var(--magenta); font-weight:500;}
.hero p.sub{max-width:480px; margin-top:22px; font-size:16px; color:var(--ink-soft);}
.hero-cta{display:flex; gap:16px; margin-top:30px;}
.btn{font-size:14px; font-weight:500; padding:13px 22px; border-radius:2px; display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:none;}
.btn-primary{background:var(--ink); color:var(--paper);}
.btn-ghost{border:1px solid var(--ink); color:var(--ink); background:transparent;}

/* ===== sections ===== */
.section{padding:56px 0;}
.section-head{margin-bottom:28px; display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap;}
.section-head h2{font-family:'Fraunces', serif; font-size:28px; font-weight:500;}
.section-head p{color:var(--ink-soft); font-size:13px;}

/* ===== filters + grid ===== */
.filters{display:flex; gap:20px; margin-bottom:24px; flex-wrap:wrap;}
.filters button{font-size:13px; font-weight:500; color:var(--ink-soft); background:none; border:none; cursor:pointer; font-family:'Inter',sans-serif; padding:0;}
.filters button.active{color:var(--ink);}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.card{background:var(--paper-card); border:1px solid var(--line); display:block;}
.card-media{height:150px; display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; background:var(--ink);}
.card-media img{width:100%; height:100%; object-fit:cover;}
.card-media .placeholder{font-family:'Fraunces', serif; font-style:italic; font-size:22px; color:rgba(255,255,255,0.92);}
.card-media .yr{position:absolute; top:10px; left:10px; font-family:'IBM Plex Mono', monospace; font-size:9px; color:rgba(255,255,255,0.85); z-index:2;}
.card-body{padding:16px 18px;}
.card .tag{margin-bottom:8px; display:flex; align-items:center; gap:8px;}
.card h4{font-size:15px; font-weight:500; margin-bottom:4px;}
.card p{font-size:13px; color:var(--ink-soft);}

/* ===== services ===== */
.services{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line);}
.service{background:var(--paper); padding:20px 22px; display:flex; align-items:flex-start; gap:16px;}
.service h4{font-size:14px; font-weight:500; margin-bottom:4px;}
.service p{font-size:13px; color:var(--ink-soft);}

/* ===== about ===== */
.about-block{display:grid; grid-template-columns:0.75fr 1.25fr; gap:44px; align-items:center;}
.avatar{aspect-ratio:4/5; background:var(--paper-card); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-family:'Fraunces', serif; font-size:44px; color:var(--ink-soft);}
.about-block p{color:var(--ink-soft); font-size:15px; margin-bottom:12px; max-width:460px;}
.loc{display:flex; align-items:center; gap:8px; margin-top:16px;}

/* ===== timeline (about page) ===== */
.timeline{display:flex; flex-direction:column;}
.t-row{display:grid; grid-template-columns:100px 1fr; gap:20px; padding:18px 0; border-bottom:1px solid var(--line);}
.t-row:last-child{border-bottom:none;}
.t-row .yr{font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--ink-soft);}
.t-row h4{font-size:15px; font-weight:500; margin-bottom:4px;}
.t-row p{font-size:13px; color:var(--ink-soft);}
.tools{display:flex; flex-wrap:wrap; gap:10px;}
.tool{border:1px solid var(--line); padding:8px 16px; font-size:13px; font-family:'IBM Plex Mono', monospace;}

/* ===== testimonial ===== */
.testimonial{padding:48px 0;}
.testimonial blockquote{font-family:'Fraunces', serif; font-style:italic; font-size:21px; font-weight:400; line-height:1.4; border-left:2px solid var(--magenta); padding-left:20px;}
.testimonial cite{display:block; margin-top:12px; font-style:normal;}

/* ===== cta ===== */
.cta{padding:48px 0 72px;}
.cta h2{font-family:'Fraunces', serif; font-size:30px; font-weight:500; margin-bottom:22px; max-width:420px;}
.cta-row{display:flex; gap:14px; flex-wrap:wrap;}

/* ===== project single page ===== */
.back{display:inline-flex; align-items:center; gap:8px; padding:24px 0 0; font-size:13px; color:var(--ink-soft);}
.back:hover{color:var(--ink);}
.p-head{padding:24px 0 32px; display:grid; grid-template-columns:1.3fr 0.7fr; gap:40px;}
.p-head h1{font-family:'Fraunces', serif; font-weight:500; font-size:38px; line-height:1.1; margin-bottom:16px;}
.p-head .dek{color:var(--ink-soft); font-size:15px;}
.meta{border-top:1px solid var(--line); padding-top:16px;}
.meta-row{display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line); font-size:13px;}
.meta-row span:first-child{color:var(--ink-soft);}
.meta-row span:last-child{font-weight:500; text-align:right;}
.hero-media{aspect-ratio:16/8; background:var(--ink); margin-bottom:32px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.6); font-family:'IBM Plex Mono', monospace; font-size:12px;}
.hero-media img{width:100%; height:100%; object-fit:cover;}
.project-content{font-size:15px; color:var(--ink-soft); max-width:640px;}
.project-content h2{font-family:'Fraunces', serif; font-size:22px; font-weight:500; color:var(--ink); margin:36px 0 12px;}
.project-content p{margin-bottom:14px;}
.next{padding:48px 0 0; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; border-top:1px solid var(--line); margin-top:48px;}
.next .side{font-size:14px; font-weight:500;}

/* ===== contact form ===== */
form{display:flex; flex-direction:column; gap:20px;}
.field label{display:block; font-size:13px; font-weight:500; margin-bottom:8px;}
.field input, .field select, .field textarea{
  width:100%; background:var(--paper-card); border:1px solid var(--line); padding:13px 14px;
  font-family:'Inter', sans-serif; font-size:14px; color:var(--ink); border-radius:2px;
}
.field textarea{min-height:120px; resize:vertical;}
.row-2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.direct{display:flex; flex-direction:column; gap:14px; padding:24px 0 32px; border-bottom:1px solid var(--line); margin-bottom:32px;}
.direct a.email{font-family:'Fraunces', serif; font-style:italic; font-size:24px;}
.direct a.email:hover{color:var(--magenta);}
.faq-item{padding:16px 0; border-bottom:1px solid var(--line);}
.faq-item h4{font-size:14px; font-weight:500; margin-bottom:6px;}
.faq-item p{font-size:13px; color:var(--ink-soft);}

footer.site-footer{padding:24px 0 40px; display:flex; justify-content:space-between; font-size:12px; color:var(--ink-soft); flex-wrap:wrap; gap:12px; border-top:1px solid var(--line);}

/* ===== mobile drawer (hidden by default at ALL widths — only .open + the
   max-width:900px media query below make it visible/usable) ===== */
.mobile-drawer{
  position:fixed; inset:0; top:73px; background:var(--paper); z-index:20;
  transform:translateX(100%); transition:transform .25s ease; padding:32px 28px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.mobile-drawer nav ul{list-style:none; display:flex; flex-direction:column; gap:26px;}
.mobile-drawer nav a{font-family:'Fraunces', serif; font-size:26px; font-weight:500;}
.mobile-drawer .social{display:flex; gap:18px; margin-top:20px;}

/* ===== mobile burger ===== */
@media (max-width:900px){
  .sidebar{display:none;}
  .shell{display:block;}
  .topbar{
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 24px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--paper); z-index:30;
  }
  .topbar .logo{font-family:'IBM Plex Mono', monospace; font-size:14px; display:flex; align-items:center; gap:10px;}
  .burger{width:32px; height:32px; display:flex; flex-direction:column; justify-content:center; gap:6px; cursor:pointer; background:none; border:none;}
  .burger span{display:block; height:2px; width:100%; background:var(--ink); transition:transform .2s ease, opacity .2s ease;}
  .burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
  .burger.open span:nth-child(2){opacity:0;}
  .burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
  .mobile-drawer.open{transform:translateX(0);}

  .wrap{padding:0 24px;}
  h1.headline{font-size:32px;}
  .grid{grid-template-columns:1fr;}
  .p-head{grid-template-columns:1fr;}
  .about-block{grid-template-columns:1fr;}
  .row-2{grid-template-columns:1fr;}
}