/* === The Luminara @ Canning — shared stylesheet =================== */

/* ── Neuropol · reserved for the FUZE.D parent wordmark only ─── */
@font-face{
  font-family:"Neuropol";
  src:url("fonts/neuropol.otf") format("opentype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --ink:#1D1D1F; --ink-2:#4B4B4F; --ink-3:#86868B;
  --hairline:#E5E5EA; --hairline-2:#EFEFF2;
  --bg:#FFFFFF; --cream:#F8F8F6;
  --apple:#B5D74C; --verdant:#BEC857; --forest:#1D4714;
  --sans:-apple-system, BlinkMacSystemFont, "SF Pro Display","SF Pro Text","Helvetica Neue", Helvetica, Arial, sans-serif;
  --display:"Italiana", serif;
  --pinch:linear-gradient(95deg, var(--forest) 0%, var(--verdant) 50%, var(--forest) 100%);
  --pinch-light:linear-gradient(95deg, #B5D74C 0%, #fff 50%, #B5D74C 100%);
  --maxw:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  letter-spacing:-0.011em;
}
img{display:block; max-width:100%; height:auto}
a{ color:inherit }

/* ── primitives ─────────────────────────────────────── */
.gradient-text, em.lum, .display-em{
  background:var(--pinch);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
em.lum, .display-em{
  font-family:var(--display); font-style:normal;
  text-transform:uppercase; letter-spacing:0.012em;
}
.label{
  font-size:12px; letter-spacing:0.32em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500;
}
.mono{
  font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-variant-numeric:tabular-nums;
}

/* ── top nav ────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 32px;
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  background:rgba(255,255,255,0.78);
  border-bottom:1px solid var(--hairline);
}
.nav .brand-cluster{
  display:inline-flex; align-items:center; gap:14px;
}
.nav .parent-brand{
  font-family:"Neuropol", "SF Mono", ui-monospace, Menlo, monospace;
  font-size:13px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ink); text-decoration:none;
  display:inline-flex; align-items:center; gap:6px;
  transition:color .2s ease;
}
.nav .parent-brand::after{
  content:"↗"; font-family:var(--sans); font-size:10px;
  color:var(--ink-3); transition:transform .2s ease, color .2s ease;
}
.nav .parent-brand:hover{ color:var(--forest) }
.nav .parent-brand:hover::after{ color:var(--forest); transform:translate(2px,-2px) }
.nav .brand-sep{
  color:var(--hairline); font-size:14px; font-weight:300;
  user-select:none;
}
.nav .brand{
  font-family:var(--display); text-transform:uppercase;
  font-size:18px; letter-spacing:0.018em; text-decoration:none;
}
.nav .brand .gradient-text{
  background:var(--pinch); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
@media (max-width: 540px){
  .nav .brand-sep, .nav .parent-brand::after{ display:none }
  .nav .brand-cluster{ gap:10px }
}
.nav .links{ display:flex; gap:24px; align-items:center }
.nav .links a{
  color:var(--ink-2); text-decoration:none;
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase; font-weight:500;
  white-space:nowrap;
  transition:color .2s ease;
}
.nav .links a:hover, .nav .links a.active{ color:var(--forest) }
.nav .links a.active{ position:relative }
.nav .links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-22px; height:1px;
  background:var(--forest);
}
.nav .cta{
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase; font-weight:500;
  color:#fff; background:var(--ink);
  padding:10px 18px; border-radius:999px; text-decoration:none;
  transition:background .2s ease;
}
.nav .cta:hover{ background:var(--forest) }

/* ── mobile nav toggle ──────────────────────────────── */
.nav .burger{
  display:none; width:32px; height:32px;
  background:transparent; border:0; cursor:pointer; padding:6px;
}
.nav .burger span{ display:block; height:1px; background:var(--ink); margin:5px 0 }

@media (max-width: 1080px){
  .nav .links{ gap:16px }
  .nav .links a{ font-size:10px; letter-spacing:0.14em }
}
@media (max-width: 900px){
  .nav .links, .nav .cta{ display:none }
  .nav .burger{ display:block }
  .nav.open .links{
    display:flex; flex-direction:column; gap:14px; align-items:flex-start;
    position:fixed; inset:64px 0 auto 0;
    background:rgba(255,255,255,0.96);
    backdrop-filter:saturate(180%) blur(18px);
    -webkit-backdrop-filter:saturate(180%) blur(18px);
    padding:24px 24px 28px;
    border-bottom:1px solid var(--hairline);
  }
  .nav.open .cta{ display:inline-block; margin-top:6px }
  .nav.open .links a.active::after{ display:none }
  .nav{ padding:14px 20px }
}

/* ── sub-page hero ──────────────────────────────────── */
.page-hero{
  padding:140px 40px 56px;
  border-bottom:1px solid var(--hairline);
  background:var(--cream);
}
.page-hero .wrap{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1fr auto; gap:32px;
  align-items:end;
}
.page-hero .crumbs{
  font-size:11px; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500; margin-bottom:18px;
}
.page-hero .crumbs a{ color:var(--ink-3); text-decoration:none; transition:color .2s ease }
.page-hero .crumbs a:hover{ color:var(--forest) }
.page-hero h1{
  font-size:clamp(40px, 6vw, 72px); letter-spacing:-0.022em;
  font-weight:500; line-height:1.05;
}
.page-hero h1 em.lum{ font-size:0.95em }
.page-hero .lede{
  margin-top:18px; max-width:640px;
  font-size:17px; line-height:1.55; color:var(--ink-2);
  letter-spacing:-0.005em;
}
.page-hero .meta{
  font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-size:11px; letter-spacing:0.08em; color:var(--ink-3);
  text-align:right; line-height:1.6;
}
@media (max-width: 760px){
  .page-hero{ padding:110px 24px 40px }
  .page-hero .wrap{ grid-template-columns:1fr; gap:18px }
  .page-hero .meta{ text-align:left }
}

/* ── section frame (front-page sections) ────────────── */
section.b{
  max-width:var(--maxw); margin:0 auto;
  padding:120px 40px;
}
section.b .head{
  display:grid; grid-template-columns:120px 1fr; gap:32px;
  padding-bottom:24px; border-bottom:1px solid var(--hairline);
  margin-bottom:56px; align-items:baseline;
}
section.b .head .n{
  font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-size:11px; letter-spacing:0.08em; color:var(--ink-3);
}
section.b .head h2{
  font-size:clamp(28px, 4vw, 44px); letter-spacing:-0.022em;
  font-weight:500; line-height:1.05;
}
@media (max-width: 760px){
  section.b{ padding:80px 24px }
  section.b .head{ grid-template-columns:1fr; gap:8px }
}

/* ── presented-by panel ─────────────────────────────── */
.presented{
  background:var(--ink); color:#fff;
  padding:120px 40px;
}
.presented .wrap{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:64px;
  align-items:center;
}
.presented .col-l .eye{
  font-size:11px; letter-spacing:0.32em; text-transform:uppercase;
  color:rgba(255,255,255,0.55); font-weight:500; margin-bottom:24px;
}
.presented .col-l .presented-mark{
  display:inline-block; text-decoration:none;
  font-family:"Neuropol", "SF Mono", ui-monospace, Menlo, monospace;
  font-weight:400;
  font-size:clamp(48px, 8vw, 96px); line-height:1;
  letter-spacing:0.04em; text-transform:uppercase;
  color:#fff;
  transition:color .2s ease;
}
.presented .col-l .presented-mark:hover{ color:var(--apple) }
.presented .col-l .tag{
  margin-top:24px; font-size:17px; line-height:1.6;
  color:rgba(255,255,255,0.78); max-width:480px;
}
.presented .col-r{ display:flex; flex-direction:column; gap:18px }
.presented .col-r .blk{
  border:1px solid rgba(255,255,255,0.12); border-radius:8px;
  padding:24px 28px;
}
.presented .col-r .blk .k{
  font-size:10px; letter-spacing:0.32em; text-transform:uppercase;
  color:rgba(255,255,255,0.5); font-weight:500; margin-bottom:10px;
}
.presented .col-r .blk .v{ font-size:15px; line-height:1.5; color:#fff }
.presented .col-r .blk .v a{ color:var(--apple); text-decoration:none }
.presented .col-r .blk .v a:hover{ text-decoration:underline }
@media (max-width: 900px){
  .presented{ padding:80px 24px }
  .presented .wrap{ grid-template-columns:1fr; gap:48px }
}

/* ── footer ─────────────────────────────────────────── */
footer.foot{
  background:#0a0a0c; color:rgba(255,255,255,0.62);
  padding:48px 40px 40px;
  font-size:11px; letter-spacing:0.04em; line-height:1.6;
}
footer.foot .wrap{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1fr auto; gap:32px;
  align-items:end;
}
footer.foot strong{
  color:#fff; font-weight:500; letter-spacing:0.32em;
  text-transform:uppercase; font-size:11px;
}
footer.foot a{ color:rgba(255,255,255,0.62); text-decoration:none }
footer.foot a:hover{ color:#fff }
footer.foot .brand-mark{
  font-family:var(--display); font-size:22px;
  letter-spacing:0.018em; text-transform:uppercase;
  background:var(--pinch-light);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:14px;
}
footer.foot .foot-nav{
  display:flex; gap:18px; flex-wrap:wrap; margin-top:18px;
  font-size:10px; letter-spacing:0.18em; text-transform:uppercase;
}
footer.foot .legal{
  margin-top:32px; padding-top:24px;
  border-top:1px solid rgba(255,255,255,0.08);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:10px; letter-spacing:0.18em; text-transform:uppercase;
  color:rgba(255,255,255,0.4);
}
@media (max-width: 760px){
  footer.foot .wrap{ grid-template-columns:1fr }
}

/* ── print baseline ─────────────────────────────────── */
@media print{
  .nav{ display:none }
  body{ background:#fff }
  .page-hero{ padding:48px 32px; background:#fff }
  section.b{ padding:48px 32px; break-inside:avoid }
  .presented{ background:#fff; color:var(--ink); padding:48px 32px }
  .presented .col-l .eye, .presented .col-l .tag, .presented .col-r .blk .k{ color:var(--ink-2) }
  .presented .col-r .blk{ border-color:var(--hairline) }
  .presented .col-r .blk .v{ color:var(--ink) }
  footer.foot{ background:#fff; color:var(--ink-2) }
  footer.foot strong, footer.foot .brand-mark{ color:var(--ink); background:none; -webkit-text-fill-color:initial }
}