/* UPSTREAM — Shared stylesheet (V1 Brutalist + photo zones) */
/* Locked: 2026-05-10 · ref BRAND.md + DESIGN-TOKENS.md */

:root{
  --bone:#F5F2EB;
  --bone-2:#EDE8DC;
  --ink:#0A0A0A;
  --ink-2:#1F1F1D;
  --ink-soft:#2A2A28;
  --grey:#9B9B9B;
  --grey-2:#666461;
  --grey-3:#444240;
  --acid:#0066FF;
  --acid-glow:rgba(0,102,255,.18);
  --serif:'Saira Extra Condensed',sans-serif;
  --mono:'JetBrains Mono',monospace;
  --body:'Manrope',sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--bone);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body{cursor:none}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:none;border:none;background:none;color:inherit}
img{max-width:100%;display:block}
::selection{background:var(--acid);color:var(--bone)}

/* === photo placeholder/real-photo system === */
.ph{position:relative;background:linear-gradient(135deg,var(--grey-3) 0%,var(--ink-soft) 50%,var(--ink) 100%);background-size:cover;background-position:center;overflow:hidden}
.ph::before{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");mix-blend-mode:overlay;opacity:.5;pointer-events:none}
.ph[data-frame]::after{content:attr(data-frame);position:absolute;top:16px;right:16px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);padding:6px 12px;border:1px solid rgba(245,242,235,.2);background:rgba(0,0,0,.5);backdrop-filter:blur(6px);z-index:2}
.ph .crop{position:absolute;width:14px;height:14px;border:1.5px solid rgba(245,242,235,.4);z-index:2}
.ph .crop.tl{top:8px;left:8px;border-right:0;border-bottom:0}
.ph .crop.tr{top:8px;right:8px;border-left:0;border-bottom:0}
.ph .crop.bl{bottom:8px;left:8px;border-right:0;border-top:0}
.ph .crop.br{bottom:8px;right:8px;border-left:0;border-top:0}

/* === custom cursor === */
.cursor{position:fixed;top:0;left:0;width:14px;height:14px;border:1.5px solid var(--ink);border-radius:50%;pointer-events:none;z-index:9999;mix-blend-mode:difference;transition:transform .15s ease, width .2s, height .2s;transform:translate(-50%,-50%)}
.cursor.hover{width:42px;height:42px;background:var(--acid);border-color:var(--acid)}
.cursor-dot{position:fixed;top:0;left:0;width:4px;height:4px;background:var(--acid);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%)}

/* === navigation === */
.nav-strip{position:fixed;top:0;left:0;right:0;z-index:50;display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:32px;padding:18px 32px;background:transparent;mix-blend-mode:difference;color:var(--bone)}
.nav-mark{font-family:var(--serif);font-weight:800;font-size:14px;letter-spacing:.18em}
.nav-mark a{display:flex;align-items:center;gap:10px}
.nav-mark::before{content:'';width:8px;height:8px;background:var(--acid);display:inline-block;border-radius:50%;animation:blink 2s infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.2}}
.nav-links{display:flex;gap:24px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(245,242,235,.7)}
.nav-links a{position:relative;padding:6px 0;transition:color .25s}
.nav-links a:hover, .nav-links a.active{color:var(--bone)}
.nav-links a.active::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--acid)}
.nav-meta{justify-self:end;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.5}
.nav-cta{justify-self:end;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid currentColor;transition:background .25s,color .25s}
.nav-cta:hover{background:var(--bone);color:var(--ink)}

/* === buttons === */
.btn-primary{display:inline-flex;align-items:center;gap:12px;padding:18px 28px;background:var(--ink);color:var(--bone);font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;border:1.5px solid var(--ink);transition:all .3s}
.btn-primary:hover{background:var(--acid);border-color:var(--acid);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn-primary iconify-icon{font-size:18px}
.btn-primary.invert{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.btn-primary.invert:hover{background:var(--acid);color:var(--bone);border-color:var(--acid);box-shadow:6px 6px 0 var(--bone)}
.btn-ghost{display:inline-flex;align-items:center;gap:10px;padding:14px 0;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-2);border-bottom:1px solid currentColor}
.btn-ghost:hover{color:var(--acid);border-color:var(--acid)}
.btn-ghost.light{color:var(--grey)}
.btn-ghost.light:hover{color:var(--bone);border-color:var(--bone)}

/* === marquee === */
.marquee{background:var(--ink);color:var(--bone);overflow:hidden;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:24px 0}
.marquee-track{display:flex;gap:64px;white-space:nowrap;animation:march 28s linear infinite;font-family:var(--serif);font-weight:700;font-size:clamp(48px,6vw,108px);text-transform:uppercase;letter-spacing:-.02em;line-height:1}
.marquee-track span{display:inline-flex;align-items:center;gap:64px}
.marquee-track .dot{width:14px;height:14px;background:var(--acid);border-radius:50%;display:inline-block;flex-shrink:0}
.marquee-track .strike{text-decoration:line-through;text-decoration-color:var(--acid);text-decoration-thickness:6px}
@keyframes march{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* === section meta labels === */
.section-meta{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-2);display:inline-flex;align-items:center;gap:12px}
.section-meta::before{content:'';width:32px;height:1px;background:var(--grey-2)}
.section-meta.dark{color:var(--grey)}
.section-meta.dark::before{background:var(--grey)}

/* === page-hero (used on inner pages) === */
.page-hero{padding:160px 32px 80px;border-bottom:1px solid var(--ink);position:relative}
.page-hero-grid{max-width:1600px;margin:0 auto;display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:end;padding-bottom:24px;border-bottom:1px solid rgba(10,10,10,.12);margin-bottom:64px}
.page-hero-num{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-2)}
.page-hero-meta{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-2);text-align:right;line-height:1.6}
.page-hero h1{font-family:var(--serif);font-weight:900;font-size:clamp(64px,12vw,240px);line-height:.85;letter-spacing:-.04em;text-transform:uppercase;color:var(--ink)}
.page-hero h1 .accent{color:var(--acid)}
.page-hero h1 em{font-style:normal;background:var(--acid);color:var(--bone);padding:0 16px;display:inline-block;transform:rotate(-1deg)}
.page-hero-sub{font-family:var(--serif);font-weight:500;font-size:clamp(20px,2.4vw,32px);line-height:1.15;letter-spacing:-.02em;color:var(--ink);max-width:740px;margin-top:32px}
.page-hero-sub em{font-style:normal;background:var(--acid);color:var(--bone);padding:2px 8px;display:inline-block;transform:rotate(-1deg)}

/* === footer === */
.foot-band{padding:120px 32px;background:var(--bone);border-top:1px solid var(--ink);text-align:center;position:relative}
.foot-band::before{content:'⤴';position:absolute;top:-32px;left:50%;transform:translateX(-50%);background:var(--bone);padding:0 24px;color:var(--acid);font-size:48px;font-weight:300}
.foot-tag{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-2);margin-bottom:32px}
.foot-h{font-family:var(--serif);font-weight:800;font-size:clamp(56px,9vw,180px);line-height:.85;letter-spacing:-.04em;text-transform:uppercase;color:var(--ink);margin-bottom:48px}
.foot-h .acid{color:var(--acid)}
.foot-cta-row{display:inline-flex;flex-direction:column;align-items:center;gap:16px}
.foot-sig{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-2);margin-top:80px;padding-top:32px;border-top:1px solid var(--ink);display:grid;grid-template-columns:1fr 2fr 1fr;gap:32px;max-width:1600px;margin-left:auto;margin-right:auto;align-items:start;text-align:left}
.foot-sig-col{display:flex;flex-direction:column;gap:6px}
.foot-sig-col strong{color:var(--ink);letter-spacing:.04em;font-weight:500;font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-family:var(--serif)}
.foot-sig-col a{color:var(--grey-2);transition:color .25s}
.foot-sig-col a:hover{color:var(--acid)}
.foot-sig-bottom{grid-column:1 / -1;display:flex;justify-content:space-between;padding-top:24px;border-top:1px solid rgba(10,10,10,.12);margin-top:24px}

/* === card primitives === */
.card-row{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;max-width:1600px;margin:0 auto}
.card{position:relative;border:1px solid rgba(10,10,10,.12);background:var(--bone-2);padding:24px;display:flex;flex-direction:column;gap:16px;transition:all .4s ease}
.card:hover{border-color:var(--ink);background:var(--bone);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.card-num{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey-2)}
.card-title{font-family:var(--serif);font-weight:700;font-size:24px;letter-spacing:-.02em;line-height:1.1}
.card-meta{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-2);display:flex;gap:16px}
.card-text{font-size:14px;line-height:1.55;color:var(--ink-2)}

/* === filter chips === */
.chip-row{display:flex;flex-wrap:wrap;gap:12px;margin:32px 0 48px;max-width:1600px;margin-left:auto;margin-right:auto}
.chip{padding:10px 18px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);border:1px solid var(--ink);background:transparent;cursor:none;transition:all .25s}
.chip:hover, .chip.active{background:var(--ink);color:var(--bone)}
.chip.dark{color:var(--bone);border-color:var(--bone)}
.chip.dark:hover, .chip.dark.active{background:var(--bone);color:var(--ink)}
.chip iconify-icon{margin-right:6px;vertical-align:-2px}

/* === stats counters strip === */
.stats-strip{padding:80px 32px;background:var(--ink);color:var(--bone);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.stats-row{max-width:1600px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stat-cell{display:flex;flex-direction:column;gap:8px;padding:16px 0;border-top:1px solid rgba(245,242,235,.18)}
.stat-cell .num{font-family:var(--serif);font-weight:800;font-size:clamp(40px,5vw,80px);line-height:.95;letter-spacing:-.02em;color:var(--bone)}
.stat-cell .num .acid{color:var(--acid)}
.stat-cell .label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}

/* === breadcrumbs === */
.crumbs{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-2);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crumbs a{transition:color .25s}
.crumbs a:hover{color:var(--acid)}
.crumbs span.sep{color:var(--grey)}

/* === responsive === */
@media (max-width:980px){
  .nav-strip{padding:14px 20px;grid-template-columns:auto 1fr auto;gap:16px}
  .nav-links{display:none}
  .nav-meta{display:none}
  .page-hero{padding:120px 20px 60px}
  .page-hero-grid{grid-template-columns:1fr;gap:16px;text-align:left;padding-bottom:16px;margin-bottom:32px}
  .page-hero-meta{text-align:left}
  .stats-row{grid-template-columns:1fr 1fr;gap:16px}
  .foot-band{padding:80px 20px}
  .foot-sig{grid-template-columns:1fr;gap:24px}
  body{cursor:auto}
  .cursor,.cursor-dot{display:none}
}
@media (max-width:640px){
  .stats-row{grid-template-columns:1fr}
  .foot-sig-bottom{flex-direction:column;gap:16px}
}

/* === ACCENT EXPERIMENT 2026-05-10 — B&W only (revert: delete this whole block) === */
/* Original blue accent: --acid:#0066FF; --acid-glow:rgba(0,102,255,.18) */
:root{
  --acid:#444240;             /* mid-dark grey, subtle tonal contrast w/ ink */
  --acid-glow:rgba(68,66,64,.15);
}
/* Hero "UP" letters as OUTLINE instead of fill — brutalist editorial mark */
.hero-word .accent{
  color:transparent;
  -webkit-text-stroke:2.5px var(--ink);
}
/* Marquee dots — switch from acid to bone (visible on ink bg) */
.marquee-track .dot{background:var(--bone)}
/* Acid stamps stay inverted but on ink (was acid background) */
.acid-stamp{background:var(--ink) !important;color:var(--bone) !important}
.hero-stat strong .acid-bar{background:var(--ink)}
.hero-statement em{background:var(--ink);color:var(--bone)}
.hero-word::after{color:var(--grey-3)}
.dir-thumb-dot{background:var(--bone) !important;border:1.5px solid var(--ink)}
/* === END ACCENT EXPERIMENT === */