/* ============ Fonts (self-hosted) ============ */
@font-face{font-family:'Spectral';src:url('assets/fonts/spectral-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Spectral';src:url('assets/fonts/spectral-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Spectral';src:url('assets/fonts/spectral-400italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'Spline Sans Mono';src:url('assets/fonts/spline-sans-mono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Spline Sans Mono';src:url('assets/fonts/spline-sans-mono-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}

/* ============ Tokens ============ */
:root{
  /* dark brand surfaces (prussian / space indigo) */
  --ink:#030027; --indigo:#151e3f;
  /* light ground: cool paper tinted toward indigo, not the reflex warm cream */
  --paper:#eceef2; --card:#f8f9fb; --line:#dadee6;
  /* warm brand accents on the cool ground */
  --bronze:#dc9e82; --rose:#c16e70; --rose-deep:#9c3e40; --muted:#5c616e;
  --maxw:1080px; --inset:96px;
  --ser:'Spectral',Georgia,'Times New Roman',serif;
  --mono:'Spline Sans Mono',ui-monospace,monospace;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}

/* ============ Base ============ */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--sans);color:var(--indigo);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
a{color:inherit;}
.mono{font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;}
.ser{font-family:var(--ser);}
.wrap{max-width:var(--maxw);margin:0 auto;}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px;}

/* ============ Buttons ============ */
.btn{display:inline-block;font-size:.92rem;font-weight:500;padding:.85rem 1.5rem;border-radius:2px;text-decoration:none;transition:transform .15s ease,background .15s ease,color .15s ease;}
.btn.p{background:var(--bronze);color:var(--ink);}
.btn.p:hover{transform:translateY(-2px);background:#e6ad94;}
.btn.s{border:1px solid #3a4366;color:var(--paper);margin-left:.5rem;}
.btn.s:hover{border-color:var(--bronze);color:var(--bronze);}

/* ============ Header ============ */
.site-hd{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  background:rgba(3,0,39,.92);backdrop-filter:blur(8px);color:var(--paper);padding:1rem clamp(1.25rem,5vw,2.5rem);}
.wm{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;color:var(--paper);}
.wm-word{font-family:var(--mono);font-weight:600;font-size:1.02rem;letter-spacing:-.01em;line-height:1;}
.wm-thread{display:inline-grid;place-items:center;width:34px;height:20px;}
.wm-thread svg{width:100%;height:100%;overflow:visible;}
.wm-strand{fill:none;stroke:var(--bronze);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:360;stroke-dashoffset:0;}
.wm:hover .wm-strand,.wm:focus-visible .wm-strand{animation:wm-stitch 4.8s ease-in-out infinite;}
@keyframes wm-stitch{0%{stroke-dashoffset:360;}42%{stroke-dashoffset:0;}58%{stroke-dashoffset:0;}100%{stroke-dashoffset:-360;}}
.site-hd nav{display:flex;gap:1.4rem;align-items:center;font-size:.86rem;color:#b9bcce;}
.site-hd nav a{text-decoration:none;transition:color .15s;}
.site-hd nav a:hover{color:var(--bronze);}
.langtog{display:inline-flex;border:1px solid #2c3556;border-radius:20px;overflow:hidden;}
.langtog button{font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;background:none;border:0;color:#b9bcce;padding:.3rem .6rem;cursor:pointer;}
.langtog button[aria-pressed="true"]{background:var(--bronze);color:var(--ink);}
.menu-toggle{display:none;background:none;border:0;color:var(--paper);font-size:1.4rem;cursor:pointer;}

/* ============ Hero ============ */
.hero{background:radial-gradient(120% 120% at 80% -10%,#1d2750 0%,var(--ink) 55%);color:var(--paper);
  padding:clamp(3rem,9vw,6rem) clamp(1.25rem,5vw,2.5rem) clamp(4rem,10vw,7rem);}
.hero h1{font-family:var(--ser);font-weight:400;font-size:clamp(2.2rem,6vw,4rem);line-height:1.08;letter-spacing:-.5px;margin:0 0 1.4rem;max-width:18ch;}
.hero h1 em{font-style:italic;color:var(--bronze);}
.hero .sub{max-width:46ch;color:#c3c6d8;font-size:1.05rem;margin:0 0 2rem;}
.hero-act{display:flex;flex-wrap:wrap;gap:.65rem;align-items:center;}
.hero-act .btn.s{margin-left:0;}
.hero .byline{font-family:var(--mono);font-size:.78rem;letter-spacing:.03em;color:#9499b4;margin:1.9rem 0 0;}

/* ============ Thread ============ */
.thread-wrap{position:relative;background:var(--paper);}
.thread-wrap::before{content:"";position:absolute;left:calc(var(--inset) - 42px);top:0;bottom:0;width:2px;
  background:linear-gradient(var(--bronze),var(--rose));opacity:.5;}
.sec{position:relative;padding:clamp(3rem,7vw,5rem) clamp(1.5rem,6vw,4rem) clamp(3rem,7vw,5rem) var(--inset);}
.sec .node{position:absolute;left:calc(var(--inset) - 48px);top:clamp(3rem,7vw,5rem);width:14px;height:14px;border-radius:50%;
  background:var(--paper);border:2px solid var(--bronze);}
.kick{color:var(--rose-deep);margin-bottom:.5rem;}
.sec h2{font-family:var(--ser);font-weight:500;font-size:clamp(1.6rem,3.5vw,2.2rem);letter-spacing:-.3px;margin:0 0 2rem;max-width:26ch;}

/* services list */
.svc{padding:1.7rem 0;border-top:1px solid var(--line);}
.svc:last-child{border-bottom:1px solid var(--line);}
.svc h3{font-family:var(--ser);font-weight:500;font-size:1.3rem;margin:0 0 .4rem;}
.svc p{margin:0;color:var(--muted);max-width:52ch;}

/* tech strip */
.tech{background:var(--indigo);color:#aeb2c6;padding:1.1rem clamp(1.5rem,6vw,4rem) 1.1rem var(--inset);font-family:var(--mono);font-size:.78rem;letter-spacing:.03em;}
.tech b{color:var(--bronze);}

/* about */
.about{background:var(--card);display:flex;gap:2rem;align-items:flex-start;flex-wrap:wrap;}
.about .ph{width:150px;aspect-ratio:3/4;flex:none;border-radius:4px;object-fit:cover;
  background:repeating-linear-gradient(45deg,#e2e5ea,#e2e5ea 10px,#d8dce3 10px,#d8dce3 20px);border:1px solid var(--line);}
.about .body{flex:1;min-width:240px;}
.about p{color:var(--muted);max-width:54ch;}

/* work */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;}
.pj{border:1px solid var(--line);border-radius:6px;background:var(--card);aspect-ratio:4/3;display:flex;align-items:flex-end;padding:1rem;color:#8a8f9e;font-family:var(--mono);font-size:.76rem;}

/* ============ Contact ============ */
.cta{background:radial-gradient(120% 120% at 20% 120%,#1d2750 0%,var(--ink) 55%);color:var(--paper);text-align:center;padding:clamp(3.5rem,8vw,6rem) clamp(1.25rem,5vw,2.5rem);}
.cta h2{font-family:var(--ser);font-weight:400;font-size:clamp(2rem,5vw,3rem);margin:0 0 .6rem;}
.cta h2 em{font-style:normal;color:inherit;text-decoration:underline dashed var(--bronze);text-underline-offset:8px;text-decoration-thickness:2px;}
.cta p{color:#c3c6d8;margin:0 0 1.8rem;}

/* ============ Footer ============ */
.site-ft{background:#01001c;color:#7a7d92;padding:1.6rem clamp(1.25rem,5vw,2.5rem);font-size:.82rem;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.8rem;}
.site-ft a{color:#b9bcce;text-decoration:none;}
.site-ft a:hover{color:var(--bronze);}

/* ============ Legal pages ============ */
.legal{max-width:760px;margin:0 auto;padding:clamp(2.5rem,6vw,4rem) clamp(1.25rem,5vw,2.5rem);}
.legal h1{font-family:var(--ser);font-weight:500;font-size:clamp(1.8rem,4vw,2.4rem);margin:0 0 .3rem;}
.legal h2{font-family:var(--ser);font-weight:500;font-size:1.2rem;margin:2rem 0 .5rem;}
.legal p,.legal address{font-style:normal;color:var(--indigo);margin:.4rem 0;}
.legal a{color:var(--rose-deep);}
.legal .back{font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--muted);}

/* ============ Reveal animation ============ */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;}
[data-reveal].in{opacity:1;transform:none;}

/* ============ Responsive ============ */
@media (max-width:720px){
  :root{--inset:2rem;}
  /* keep the thread visible on mobile — it is the signature, not decoration */
  .thread-wrap::before{left:9px;opacity:.5;}
  .sec .node{left:2px;top:clamp(2.5rem,8vw,4rem);}
  .site-hd nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--ink);padding:1rem 1.5rem;gap:1rem;}
  .site-hd nav.open{display:flex;}
  .menu-toggle{display:block;}
  .btn.s{margin-left:0;margin-top:.6rem;display:inline-block;}
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation:none!important;transition:none!important;}
  [data-reveal]{opacity:1;transform:none;}
}