/* ═══ ACRUX INTERMEDIA STUDIO — deep-space navigation ═══ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

:root{
  --void:#060608;
  --void-2:#0C0C10;
  --ink:#EDEDEA;
  --ink-dim:#8B8B93;
  --star:#A8C6FF;
  --star-hot:#DCE9FF;
  --line:rgba(168,198,255,.14);
  --mono:'Space Mono', monospace;
  --grot:'Space Grotesk', sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--void);color:var(--ink);font-family:var(--grot);overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column}
::selection{background:var(--star);color:var(--void)}
a{color:inherit}
img{max-width:100%;display:block}

/* ── sky canvas ── */
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.page{position:relative;z-index:1;flex:1;display:flex;flex-direction:column}

/* ── header ── */
.site-nav{display:flex;justify-content:space-between;align-items:center;padding:28px 40px;font-family:var(--mono);font-size:13px;letter-spacing:.08em}
.site-nav .logo{display:flex;align-items:center;gap:4px;font-weight:700;font-size:15px;letter-spacing:.06em;text-decoration:none}
.site-nav nav{display:flex;gap:34px;flex-wrap:wrap}
.site-nav nav a{color:var(--ink-dim);text-decoration:none;transition:color .2s;padding:6px 0}
.site-nav nav a:hover{color:var(--star-hot)}
.site-nav nav a[aria-current="page"]{color:var(--star)}

/* ── hero (home) ── */
.hero{min-height:calc(100vh - 96px);display:flex;flex-direction:column;justify-content:center;padding:0 40px}
.coord{font-family:var(--mono);font-size:12px;color:var(--star);letter-spacing:.18em;margin-bottom:22px}
.hero-title{font-size:clamp(64px,13vw,190px);font-weight:700;line-height:.88;letter-spacing:-.04em}
.hero-title .thin{font-weight:300;color:transparent;-webkit-text-stroke:1px var(--ink-dim)}
.hero-sub{margin-top:30px;max-width:560px;font-size:16px;line-height:1.7;color:var(--ink-dim)}
.hero-sub em{font-style:normal;color:var(--ink)}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;padding:28px 40px;font-family:var(--mono);font-size:11px;color:var(--ink-dim);letter-spacing:.1em}
.hero-foot .tick{color:var(--star)}

/* ── page head (subpages) ── */
.page-head{padding:90px 40px 60px;max-width:1180px;width:100%;margin:0 auto}
.page-head .coord{margin-bottom:16px}
.page-head h1{font-size:clamp(44px,7vw,96px);font-weight:700;letter-spacing:-.03em;line-height:.95}
.page-head .lede{margin-top:24px;max-width:58ch;font-size:16px;line-height:1.75;color:var(--ink-dim)}
.page-head .lede em{font-style:normal;color:var(--ink)}

.wrap{max-width:1180px;width:100%;margin:0 auto;padding:0 40px 110px}

/* ── works index ── */
.work-list{border-top:1px solid var(--line)}
.work{display:grid;grid-template-columns:120px 1fr 380px;gap:40px;padding:44px 0;border-bottom:1px solid var(--line);text-decoration:none;align-items:center;transition:background .25s}
.work:hover{background:rgba(168,198,255,.03)}
.work .no{font-family:var(--mono);font-size:12px;color:var(--star);letter-spacing:.15em}
.work .no small{display:block;color:var(--ink-dim);margin-top:6px;letter-spacing:.08em}
.work h2{font-size:clamp(26px,3.4vw,44px);font-weight:500;letter-spacing:-.02em;transition:color .2s}
.work:hover h2{color:var(--star-hot)}
.work .meta{font-family:var(--mono);font-size:12px;color:var(--ink-dim);margin-top:10px;letter-spacing:.06em;line-height:1.8}
.work .desc{font-size:14.5px;color:var(--ink-dim);line-height:1.7;margin-top:12px;max-width:52ch}
.work .cover{aspect-ratio:16/10;overflow:hidden;border:1px solid var(--line);background:var(--void-2)}
.work .cover img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) brightness(.85);transition:filter .35s, transform .5s}
.work:hover .cover img{filter:grayscale(0) brightness(1);transform:scale(1.03)}
.work .go{font-family:var(--mono);font-size:11px;color:var(--star);letter-spacing:.15em;margin-top:14px;opacity:0;transform:translateX(-6px);transition:opacity .25s, transform .25s}
.work:hover .go{opacity:1;transform:none}

/* ── home works strip ── */
.strip{max-width:1180px;width:100%;margin:0 auto;padding:40px 40px 110px}
.strip-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:30px}
.strip-head h2{font-family:var(--mono);font-size:13px;letter-spacing:.22em;color:var(--star);font-weight:400}
.strip-head a{font-family:var(--mono);font-size:12px;color:var(--ink-dim);text-decoration:none;letter-spacing:.1em}
.strip-head a:hover{color:var(--star-hot)}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{text-decoration:none;border:1px solid var(--line);background:rgba(12,12,16,.6);transition:border-color .25s;display:block}
.card:hover{border-color:rgba(168,198,255,.4)}
.card .cv{aspect-ratio:4/3;overflow:hidden}
.card .cv img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) brightness(.85);transition:filter .35s, transform .5s}
.card:hover .cv img{filter:grayscale(0) brightness(1);transform:scale(1.04)}
.card .cb{padding:16px 18px 18px}
.card .cb h3{font-size:16px;font-weight:500;letter-spacing:-.01em}
.card .cb p{font-family:var(--mono);font-size:10.5px;color:var(--ink-dim);margin-top:8px;letter-spacing:.08em;line-height:1.7}

/* ── statement band ── */
.band{max-width:1180px;width:100%;margin:0 auto;padding:0 40px 130px}
.band p{font-size:clamp(22px,3vw,34px);font-weight:300;line-height:1.5;letter-spacing:-.01em;max-width:30ch;color:var(--ink)}
.band p b{font-weight:500;color:var(--star-hot)}
.band .cta{display:inline-block;margin-top:36px;font-family:var(--mono);font-size:13px;letter-spacing:.12em;color:var(--star);text-decoration:none;border:1px solid rgba(168,198,255,.35);padding:14px 26px;transition:background .2s, color .2s}
.band .cta:hover{background:var(--star);color:var(--void)}

/* ── prose sections (studio / commissions) ── */
.sec{margin-bottom:86px}
.sec-tag{font-family:var(--mono);font-size:12px;color:var(--star);letter-spacing:.22em;margin-bottom:14px}
.sec h2{font-size:30px;font-weight:500;letter-spacing:-.02em;margin-bottom:22px}
.sec p{font-size:15.5px;line-height:1.85;color:#B9B9BF;margin-bottom:14px;max-width:68ch}
.sec p strong{color:var(--ink);font-weight:500}
.sec p a{color:var(--star)}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px}
.tile{border:1px solid var(--line);padding:28px 30px;background:rgba(12,12,16,.6)}
.tile .t-no{font-family:var(--mono);font-size:11px;color:var(--star);letter-spacing:.18em;margin-bottom:12px}
.tile h3{font-size:19px;font-weight:500;margin-bottom:10px;letter-spacing:-.01em}
.tile p{font-size:14px;line-height:1.75;color:var(--ink-dim)}

.steps{border:1px solid var(--line);margin-top:28px}
.step{display:grid;grid-template-columns:170px 1fr;border-top:1px solid var(--line)}
.step:first-child{border-top:0}
.step .k{padding:20px 24px;font-family:var(--mono);font-size:12px;color:var(--star);letter-spacing:.1em;border-right:1px solid var(--line)}
.step .v{padding:20px 24px;font-size:14.5px;color:var(--ink-dim);line-height:1.7}

.factbox{border:1px solid var(--line);background:var(--void-2);font-family:var(--mono);font-size:13px;margin-top:28px}
.fact{display:grid;grid-template-columns:210px 1fr;border-top:1px solid var(--line)}
.fact:first-child{border-top:0}
.fact .k{padding:15px 20px;color:var(--ink-dim);letter-spacing:.06em;border-right:1px solid var(--line)}
.fact .v{padding:15px 20px;color:var(--ink);letter-spacing:.03em}
.fact .v a{color:var(--star);text-decoration:none}
.fact .v a:hover{text-decoration:underline}

/* ── contact ── */
.contact-hero{font-size:clamp(28px,4.4vw,56px);font-weight:300;line-height:1.25;letter-spacing:-.02em;max-width:22ch;margin-bottom:56px}
.contact-hero a{color:var(--star-hot);text-decoration:none;border-bottom:1px solid rgba(168,198,255,.4);transition:border-color .2s}
.contact-hero a:hover{border-color:var(--star-hot)}

/* ── footer ── */
.site-foot{border-top:1px solid var(--line);padding:34px 40px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;color:var(--ink-dim);letter-spacing:.1em;position:relative;z-index:1}
.site-foot .f-star{color:var(--star)}
.site-foot nav{display:flex;gap:22px}
.site-foot nav a{color:var(--ink-dim);text-decoration:none}
.site-foot nav a:hover{color:var(--star-hot)}

/* ── a11y & responsive ── */
a:focus-visible, button:focus-visible{outline:2px solid var(--star);outline-offset:3px}
@media (max-width:900px){
  .work{grid-template-columns:1fr;gap:18px}
  .work .cover{order:-1}
  .cards{grid-template-columns:repeat(2,1fr)}
  .grid2{grid-template-columns:1fr}
}
@media (max-width:640px){
  .site-nav{padding:20px 22px}
  .site-nav nav{gap:18px;font-size:12px}
  .hero{padding:0 22px}
  .hero-foot{padding:22px;flex-wrap:wrap;gap:10px}
  .page-head{padding:64px 22px 44px}
  .wrap,.strip,.band{padding-left:22px;padding-right:22px}
  .cards{grid-template-columns:1fr}
  .step{grid-template-columns:1fr}
  .step .k{border-right:0;border-bottom:1px dashed var(--line)}
  .fact{grid-template-columns:1fr}
  .fact .k{border-right:0;padding-bottom:4px}
  .fact .v{padding-top:4px}
  .site-foot{padding:26px 22px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important}
}