* { margin:0; padding:0; box-sizing:border-box; }
:root{ --bg:#0b0b0b; --ink:#e9e9e6; --muted:#a0a09a; --faint:#82827c; --line:rgba(255,255,255,.1); --line-soft:rgba(255,255,255,.06); }
::selection{ background:#e9e9e6; color:#0b0b0b; }
html{ scroll-behavior:smooth; }
body{ background:var(--bg); color:var(--ink); font-family:'Inter',sans-serif; overflow-x:hidden; -webkit-font-smoothing:antialiased; animation:pageIn .6s ease both; }
@keyframes pageIn{ from{ opacity:0; } }
.grain{ position:fixed; inset:-100%; z-index:50; pointer-events:none; opacity:.008;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite; }
@keyframes grain{ 0%,100%{transform:translate(0,0);} 20%{transform:translate(-12%,4%);} 40%{transform:translate(-4%,14%);} 60%{transform:translate(12%,0);} 80%{transform:translate(-14%,0);} }
nav{ position:absolute; top:0; left:0; right:0; z-index:40; display:flex; justify-content:space-between; align-items:center; padding:24px 5vw; }
.logo{ font-size:13px; font-weight:600; letter-spacing:4px; color:#fff; text-decoration:none; }
nav a.back{ color:#bbb; text-decoration:none; font-size:13px; transition:color .3s; }
nav a.back:hover{ color:#fff; }
main{ max-width:1080px; margin:0 auto; padding:170px 6vw 0; }
.eyebrow{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:4px; text-transform:uppercase; color:var(--faint); margin-bottom:24px; }
.eyebrow::before{ content:'[ '; color:var(--muted); }
.eyebrow::after{ content:' ]'; color:var(--muted); }
h1{ font-family:'Instrument Serif',serif; font-weight:400; font-size:clamp(40px,6.6vw,86px); line-height:1.05; letter-spacing:-1px; }
h1 i{ font-style:italic; }
.meta{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin:64px 0 0; padding:34px 0; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.meta .k{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:2.5px; text-transform:uppercase; color:var(--faint); margin-bottom:10px; }
.meta .v{ font-size:14.5px; color:var(--ink); line-height:1.6; }
.sec{ padding:100px 0 0; }
h2{ font-family:'Instrument Serif',serif; font-weight:400; font-size:clamp(26px,3.4vw,42px); letter-spacing:-.5px; margin-bottom:28px; }
h2 i{ font-style:italic; }
.prose{ max-width:680px; }
.prose p{ color:var(--muted); font-size:16.5px; line-height:1.95; margin-bottom:22px; }
.prose strong{ color:var(--ink); font-weight:500; }
.reveal{ opacity:0; transform:translateY(40px); transition:opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1); }
.reveal.in{ opacity:1; transform:none; }
.btn{ display:inline-block; margin-top:10px; padding:15px 34px; border-radius:100px; font-size:14px; font-weight:500; text-decoration:none; border:1px solid var(--line); color:var(--ink); transition:all .35s; }
.btn:hover{ border-color:rgba(255,255,255,.4); transform:translateY(-2px); }
.shot{ margin-bottom:22px; }
.shot img{ width:100%; display:block; border-radius:6px; border:1px solid var(--line-soft); }
.gal2{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.gal2 img{ width:100%; display:block; border-radius:6px; border:1px solid var(--line-soft); }

/* aaru — data */
.live-tag{ display:inline-flex; align-items:center; gap:9px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:100px; padding:9px 18px; margin-bottom:40px; }
.live-tag::before{ content:''; width:7px; height:7px; border-radius:50%; background:#e9e9e6; }
.kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.kpi{ background:var(--bg); padding:34px 28px; }
.kpi .n{ font-family:'Instrument Serif',serif; font-size:clamp(30px,3.6vw,48px); letter-spacing:-1px; }
.kpi .l{ color:var(--faint); font-size:12px; margin-top:8px; letter-spacing:.5px; line-height:1.5; }
.charts{ display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:26px; }
.chart-card{ border:1px solid var(--line-soft); padding:30px 26px 22px; }
.chart-card .t{ font-size:12px; letter-spacing:2.5px; text-transform:uppercase; color:var(--muted); margin-bottom:22px; }
.chart-card .wrap{ position:relative; height:230px; }
.src{ margin-top:18px; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--faint); letter-spacing:.5px; }
.gal{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.gal img{ width:100%; display:block; border-radius:6px; }
.strip-shell{ margin-top:22px; overflow:hidden; border-radius:6px; }
.strip{ display:flex; width:max-content; animation:slide 34s linear infinite; }
.strip img{ height:230px; display:block; }
@keyframes slide{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* hbtn */
.duty{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); margin-top:20px; }
.duty > div{ background:var(--bg); padding:38px 32px; }
.duty .t{ font-family:'Instrument Serif',serif; font-size:22px; margin-bottom:12px; }
.duty p{ color:var(--muted); font-size:14px; line-height:1.85; }
.webrow{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:20px; }
.webrow a{ text-decoration:none; color:var(--ink); border:1px solid var(--line-soft); border-radius:6px; overflow:hidden; display:block; transition:transform .4s, border-color .4s; }
.webrow a:hover{ transform:translateY(-5px); border-color:var(--line); }
.webrow img{ width:100%; display:block; aspect-ratio:16/9; object-fit:cover; object-position:top; }
.webrow .cap{ padding:16px 20px; font-size:13.5px; display:flex; justify-content:space-between; }
.webrow .cap span:last-child{ color:var(--faint); }

/* zara */
.worlds{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); margin-top:20px; }
.world{ background:var(--bg); padding:34px 30px; }
.world .t{ font-family:'Instrument Serif',serif; font-size:20px; margin-bottom:10px; }
.world p{ color:var(--muted); font-size:13.5px; line-height:1.8; }

.quote{ margin-top:110px; border:1px solid var(--line-soft); padding:64px 48px; text-align:center; }
.quote p{ font-family:'Instrument Serif',serif; font-style:italic; font-size:clamp(21px,2.8vw,32px); line-height:1.45; max-width:740px; margin:0 auto; }
.quote .who{ margin-top:26px; font-size:11.5px; letter-spacing:3px; text-transform:uppercase; color:var(--faint); }
@media(max-width:640px){ .quote{ padding:44px 24px; margin-top:80px; } }
.next{ margin-top:130px; border-top:1px solid var(--line-soft); padding:70px 0 90px; text-align:center; }
.next .k{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:3px; text-transform:uppercase; color:var(--faint); margin-bottom:16px; }
.next a:not(.btn){ font-family:'Instrument Serif',serif; font-size:clamp(30px,4.6vw,56px); color:var(--ink); text-decoration:none; letter-spacing:-.5px; transition:font-style .2s, opacity .3s; }
.next a:not(.btn):hover{ font-style:italic; opacity:.8; }
.next .btn{ font-family:'Inter',sans-serif; font-size:14px; letter-spacing:.3px; }
footer{ border-top:1px solid var(--line-soft); padding:28px 5vw; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; color:var(--faint); font-size:12px; letter-spacing:1px; }
footer a{ color:var(--faint); text-decoration:none; } footer a:hover{ color:var(--ink); }

@media(max-width:720px){
  .meta{ grid-template-columns:repeat(2,1fr); }
  .gal2, .gal, .duty, .webrow, .worlds{ grid-template-columns:1fr; }
  .kpis{ grid-template-columns:repeat(2,1fr); }
  .charts{ grid-template-columns:1fr; }
}
@media(max-width:640px){
  main{ padding:130px 6vw 0; }
  .sec{ padding:70px 0 0; }
  .meta{ margin-top:44px; padding:26px 0; }
  .prose p{ font-size:15px; }
  .kpi{ padding:26px 22px; }
  .chart-card .wrap{ height:200px; }
  .strip img{ height:170px; }
  .next{ margin-top:90px; padding:50px 0 60px; }
}