*{box-sizing:border-box}
:root{
  --paper:#FAFAFA; --ink:#111111;
  --mute:rgba(17,17,17,.55); --line:rgba(17,17,17,.14);
  --acc:#C63A12;
  --pad:clamp(20px,5.5vw,92px);
  --sans:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:340;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:var(--acc);color:#FAFAFA}
a{color:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
img{display:block;max-width:100%}

/* ---- nav ------------------------------------------------------ */
nav{
  position:sticky;top:0;z-index:60;background:var(--paper);
  display:flex;justify-content:space-between;align-items:center;
  padding:18px var(--pad);border-bottom:1px solid var(--line);
  gap:20px;flex-wrap:wrap;
}
.wordmark{font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.14em;text-decoration:none;white-space:nowrap}
.navlinks{display:flex;gap:clamp(18px,3vw,34px);align-items:center;flex-wrap:wrap}
.navlinks a{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-decoration:none;color:var(--mute);
  padding:4px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.navlinks a:hover{color:var(--ink)}
.navlinks a.active{color:var(--ink);border-color:var(--acc)}
.navcta{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-decoration:none;
  border:1px solid var(--ink);padding:9px 16px;transition:background .25s,color .25s;white-space:nowrap}
.navcta:hover{background:var(--ink);color:var(--paper)}

/* ---- brandmark (logo svg) --------------------------------------- */
.brandmark{width:fit-content}
.brandmark svg{display:block;height:var(--logo-h,60px);width:auto;color:var(--ink);overflow:visible}
.brandmark path{stroke-dasharray:1;stroke-dashoffset:1.02;
  animation:draw 1.2s cubic-bezier(.55,0,.18,1) forwards;animation-delay:calc(var(--i)*22ms)}
.brandmark path[fill-rule]{fill-opacity:0;
  animation:draw 1.2s cubic-bezier(.55,0,.18,1) forwards,fillin .7s ease forwards;
  animation-delay:calc(var(--i)*22ms),calc(var(--i)*22ms + .8s)}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fillin{to{fill-opacity:1}}
@media (prefers-reduced-motion:reduce){
  .brandmark path,.brandmark path[fill-rule]{animation:none;stroke-dashoffset:0;fill-opacity:1}
}

/* ---- page header (about/projects/contact) ------------------------ */
.pagehead{padding:clamp(50px,9vh,96px) var(--pad) clamp(30px,5vh,52px)}
.pagehead .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--acc);margin:0 0 18px}
.pagehead h1{font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.08;letter-spacing:-.026em;
  font-weight:250;font-variation-settings:'wght' 230,'wdth' 104;max-width:18ch;margin:0}

/* ---- buttons ------------------------------------------------------ */
.btn{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-decoration:none;
  padding:14px 26px;display:inline-block;transition:background .25s,color .25s,border-color .25s}
.btn.pri{background:var(--ink);color:var(--paper);border:1px solid var(--ink)}
.btn.pri:hover{background:var(--acc);border-color:var(--acc)}
.btn.sec{border:1px solid var(--line);color:var(--ink)}
.btn.sec:hover{border-color:var(--ink)}

/* ---- gallery grid (shared: home teaser + projects page) ---------- */
.gallery{padding:clamp(30px,6vh,70px) var(--pad) clamp(60px,10vh,120px)}
.gallery-label{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.24em;color:var(--mute);display:block;margin-bottom:clamp(30px,5vh,52px)}
.grid{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(16px,2.4vw,32px);row-gap:clamp(16px,2.4vw,32px);max-width:900px;margin:0 auto}
.g1{grid-column:1;grid-row:1}
.g2{grid-column:2;grid-row:1}
.g3{grid-column:1 / span 2;grid-row:2}
.g4{grid-column:1 / span 2;grid-row:3}
figure.gswap,figure.gitem{margin:0}

/* fixed matching boxes: top row portrait, full-width rows landscape */
.gbox{position:relative;width:100%;overflow:hidden;background:var(--paper)}
.portrait .gbox{padding-top:135%}
.landscape .gbox{padding-top:60%}
.gbox img{position:absolute;top:0;left:0;width:100%;height:100%}
.gbox .gplan{object-fit:contain;transition:opacity .55s ease}
.gbox .grender{object-fit:cover;opacity:0;transition:opacity .55s ease}
.gbox .gsingle{object-fit:cover}
.gswap:hover .gplan{opacity:0}
.gswap:hover .grender{opacity:1}
.gcap{margin-top:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--mute)}

@media (max-width:720px){
  .grid{grid-template-columns:1fr;max-width:460px;row-gap:clamp(20px,4vw,32px)}
  .g1{grid-column:1;grid-row:1}
  .g2{grid-column:1;grid-row:2}
  .g3{grid-column:1;grid-row:3}
  .g4{grid-column:1;grid-row:4}
  .portrait .gbox{padding-top:125%}
  .landscape .gbox{padding-top:66%}
}

/* ---- philosophy / about ------------------------------------------ */
.philosophy{padding:clamp(50px,9vh,110px) var(--pad);border-top:1px solid var(--line)}
.plabel{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.24em;color:var(--mute);display:block;margin-bottom:clamp(36px,6vh,72px)}
.pstate{font-size:clamp(1.7rem,4vw,3.2rem);line-height:1.1;letter-spacing:-.026em;
  font-weight:250;font-variation-settings:'wght' 230,'wdth' 104;max-width:20ch;margin:0}
.ptext{margin:clamp(36px,6vh,64px) 0 0 auto;max-width:56ch;
  font-size:clamp(1rem,1.25vw,1.15rem);line-height:1.85;font-weight:330}
.psig{display:block;margin-top:1.6em;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--mute)}

.about{padding:clamp(50px,9vh,100px) var(--pad);border-top:1px solid var(--line)}
.about-label{font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--mute);font-weight:500;margin:0 0 clamp(30px,5vh,52px)}
.about-grid{display:grid;grid-template-columns:0.9fr 1.3fr;gap:clamp(30px,5vw,80px);align-items:start}
.about-grid p{font-size:clamp(1rem,1.2vw,1.1rem);line-height:1.8;font-weight:330;margin:0}
.about-art{width:100%;display:block}
@media (max-width:760px){.about-grid{grid-template-columns:1fr}}

/* ---- contact form ------------------------------------------------ */
.contactwrap{padding:clamp(50px,9vh,100px) var(--pad) clamp(80px,12vh,140px);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px)}
@media (max-width:800px){.contactwrap{grid-template-columns:1fr}}
.cstat{font-size:clamp(1.6rem,3.4vw,2.6rem);font-weight:260;font-variation-settings:'wght' 260,'wdth' 106;
  max-width:16ch;margin:0 0 12px;letter-spacing:-.015em}
.cintro{color:var(--mute);font-size:1.02rem;line-height:1.7;max-width:44ch;margin:0 0 8px}
.cform{margin-top:clamp(20px,4vh,36px);max-width:520px}
.cform .hp{position:absolute;left:-9999px}
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  color:var(--mute);margin-bottom:8px}
.field input,.field textarea{
  width:100%;background:transparent;border:none;border-bottom:1px solid var(--line);
  color:var(--ink);font-family:var(--sans);font-size:15px;font-weight:340;
  padding:8px 2px;transition:border-color .2s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--acc)}
.field textarea{resize:vertical;min-height:70px}
.field input::placeholder,.field textarea::placeholder{color:rgba(17,17,17,.3)}
.csend{margin-top:8px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  padding:13px 28px;cursor:pointer;transition:background .25s,opacity .25s}
.csend:hover{background:var(--acc);border-color:var(--acc)}
.csend:disabled{opacity:.5;cursor:default}
.cnote{margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--mute);display:none}
.cnote.show{display:block}
.cdirect{padding-top:clamp(10px,3vh,20px)}
.cor{margin:0 0 18px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--mute)}
.mail{font-family:var(--mono);font-size:clamp(1.05rem,2vw,1.35rem);text-decoration:none;
  border-bottom:1px solid var(--acc);color:var(--acc);padding-bottom:4px;word-break:break-all;display:inline-block}
.cmeta{margin-top:22px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--mute);line-height:1.9}

/* ---- flipbook (projects page) ------------------------------------ */
.flipbook-section{padding:clamp(40px,7vh,80px) var(--pad) clamp(80px,12vh,140px);border-top:1px solid var(--line)}
.flipbook-intro{max-width:56ch;margin:0 0 clamp(30px,5vh,50px)}
.flipbook-intro p{color:var(--mute);font-size:1rem;line-height:1.75;margin:10px 0 0}
.flipbook-wrap{display:flex;flex-direction:column;align-items:center;gap:20px}
#flipbook{margin:0 auto}
.flipbook-hint{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--mute);text-align:center}
.flipbook-nav{display:flex;gap:14px;align-items:center;justify-content:center}
.fnbtn{font-family:var(--mono);font-size:18px;background:none;border:1px solid var(--line);
  width:40px;height:40px;cursor:pointer;transition:border-color .2s,background .2s;color:var(--ink)}
.fnbtn:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.fnbtn:disabled{opacity:.3;cursor:default}
.fpage{background:#e9e9e6}
.fpage img{width:100%;height:100%;object-fit:contain;background:#fff}
.fnum{font-family:var(--mono);font-size:11px;color:var(--mute);min-width:64px;text-align:center}

/* ---- footer -------------------------------------------------------- */
footer{background:var(--ink);color:var(--paper);padding:clamp(50px,8vh,80px) var(--pad) 32px}
.fbot{margin-top:20px;padding-top:20px;border-top:1px solid rgba(250,250,250,.16);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:rgba(250,250,250,.4)}
.fnavlinks{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:22px}
.fnavlinks a{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-decoration:none;color:rgba(250,250,250,.65)}
.fnavlinks a:hover{color:var(--paper)}
.fmail{font-family:var(--mono);font-size:13px;text-decoration:none;color:rgba(250,250,250,.75);border-bottom:1px solid rgba(198,58,18,.6)}

/* ---- home: logo/tagline up top, then full uncropped image -------- */
.herotop{padding:clamp(30px,6vh,60px) var(--pad) clamp(22px,4vh,40px);text-align:center;
  display:flex;flex-direction:column;align-items:center}
.herotop .brandmark{margin:0 0 clamp(20px,4vh,32px)}
.herotop .eyebrow{font-family:var(--mono);font-size:clamp(13px,1.7vw,16px);letter-spacing:.22em;
  color:var(--acc);margin:0}
.heroimg{margin:0;width:100%;background:var(--paper);display:flex;justify-content:center}
.heroimg img{display:block;width:100%;height:auto;max-width:100%}
.herocta{padding:clamp(30px,5vh,52px) var(--pad) clamp(50px,8vh,90px);
  display:flex;flex-wrap:wrap;gap:16px;justify-content:center}

/* ---- home footer: contact block (bigger, warmer) ----------------- */
.homefoot{padding:clamp(60px,10vh,110px) var(--pad) 32px}
.homefoot .cstat{font-size:clamp(1.4rem,3vw,2.2rem);font-weight:260;
  font-variation-settings:'wght' 260,'wdth' 106;
  max-width:20ch;margin:0 0 28px;letter-spacing:-.015em;color:var(--paper)}
.homefoot .mail{font-family:var(--mono);font-size:clamp(1.05rem,2.2vw,1.5rem);
  text-decoration:none;color:var(--acc);border-bottom:1px solid var(--acc);
  padding-bottom:4px;word-break:break-all;display:inline-block}
.homefoot .cmeta{margin-top:26px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.06em;color:rgba(250,250,250,.6);line-height:2}
.homefoot .fbot{margin-top:60px;padding-top:20px;
  border-top:1px solid rgba(250,250,250,.16);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:rgba(250,250,250,.4)}

/* ---- language switcher + nav-right ------------------------------ */
.nav-right{display:flex;align-items:center;gap:clamp(16px,2.5vw,30px);flex-wrap:wrap}
.langs{display:flex;gap:7px;align-items:center}
.langs button{font-family:var(--mono);font-size:11px;letter-spacing:.1em;background:none;border:none;
  color:var(--mute);cursor:pointer;padding:2px 1px;text-transform:uppercase;transition:color .2s}
.langs button:hover{color:var(--ink)}
.langs button.active{color:var(--acc)}
.langs .sep{color:var(--line);font-size:11px}

/* ---- instagram: fixed icon + inline link ------------------------ */
.ig-fixed{position:fixed;right:18px;bottom:16px;z-index:80;color:var(--acc);
  width:26px;height:26px;display:block;transition:transform .2s,opacity .2s;opacity:.85}
.ig-fixed:hover{transform:scale(1.12);opacity:1}
.ig-fixed svg{width:100%;height:100%;display:block}
.ig-inline{color:var(--acc);text-decoration:none;border-bottom:1px solid rgba(198,58,18,.5)}
.ig-inline:hover{border-color:var(--acc)}

/* ---- custom cursor (fine-pointer devices only, enabled by JS) --- */
.has-custom-cursor,
.has-custom-cursor a,
.has-custom-cursor button,
.has-custom-cursor input,
.has-custom-cursor textarea,
.has-custom-cursor label{cursor:none}
.cursor-dot{position:fixed;top:0;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;
  border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;
  z-index:9999;transition:width .18s ease,height .18s ease,margin .18s ease}
.cursor-dot.hovering{width:34px;height:34px;margin:-17px 0 0 -17px}

/* ---- home: real H1 + intro (SEO) --------------------------------- */
.home-h1{font-family:var(--sans);font-weight:280;font-variation-settings:'wght' 260,'wdth' 106;
  font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.3;letter-spacing:-.01em;
  color:var(--ink);max-width:26ch;margin:14px auto 0;text-align:center}
.home-intro{font-size:.95rem;line-height:1.7;color:var(--mute);max-width:52ch;
  margin:16px auto 0;text-align:center;font-weight:330}
@media (max-width:600px){.home-intro{font-size:.9rem}}

/* ---- projects: modest page heading (SEO) -------------------------- */
.proj-h1{font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.14em;
  color:var(--ink);text-transform:none;margin:0 0 6px}