/* Empty Space Design — site styles
   Ported from the Claude Design handoff "Logo and navigation updates". */

/* ---------- Fonts ---------- */
@font-face { font-family:'Mugio'; src:url('../fonts/Mugio-ExtraBold.ttf') format('truetype'); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'Mugio'; src:url('../fonts/Mugio-Medium.ttf') format('truetype');    font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Mina';  src:url('../fonts/Mina.ttf') format('truetype');            font-display:swap; }

/* ---------- Tokens ---------- */
:root {
  --black:#000;
  --white:#FFF;
  --red:#E62E2A;
  --muted:#9a9a9a;
  --dim:#4a4a4a;
  --faint:#3a3a3a;
  --shadow-soft:#1c1c1c;

  --rule:2px solid var(--white);

  --display:Mugio,'Arial Black',sans-serif;
  --script:Mina,cursive;
  --body:"Helvetica Neue",Helvetica,Arial,sans-serif;

  --gutter-x:clamp(20px,4vw,64px);
}

/* ---------- Base ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
}
a { color:var(--white); text-decoration:none; }
a:hover { color:var(--red); }
::selection { background:var(--red); color:var(--black); }
img { display:block; }

.page { min-height:100vh; display:flex; flex-direction:column; }

.visually-hidden {
  position:absolute; width:1px; height:1px; margin:-1px;
  padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- Nav ---------- */
.nav {
  display:flex; justify-content:space-between; align-items:stretch;
  border-bottom:var(--rule); flex-wrap:wrap;
}
.nav__home { display:flex; align-items:center; padding:8px 20px; }
.nav__logo { height:64px; width:auto; }
.nav__links { display:flex; align-items:stretch; }

.nav__link {
  display:flex; align-items:center;
  padding:0 clamp(12px,2vw,32px);
  border-left:var(--rule);
  font-size:12px; font-weight:700; letter-spacing:0.2em;
}
.nav__link:hover { background:var(--white); color:var(--black); }

.nav__link--current { background:var(--white); color:var(--black); }

.nav__link--cta { background:var(--red); color:var(--black); }
.nav__link--cta:hover { background:var(--white); color:var(--black); }
.nav__link--cta.nav__link--current { background:var(--white); color:var(--black); }

/* ---------- Footer ---------- */
.site-footer {
  padding:20px var(--gutter-x);
  display:flex; justify-content:space-between; align-items:center;
  gap:16px; flex-wrap:wrap;
  font-size:10px; font-weight:700; letter-spacing:0.2em; color:var(--muted);
}
.site-footer--ruled { border-top:var(--rule); }
.site-footer__mark { display:flex; align-items:center; gap:10px; }
.site-footer__logo { height:34px; width:auto; }

/* ---------- Home: hero ---------- */
.hero {
  flex:1; min-height:78vh;
  display:flex; flex-direction:column; justify-content:center;
  gap:clamp(28px,5vh,56px);
  padding:clamp(40px,8vh,100px) var(--gutter-x);
  border-bottom:var(--rule);
}
.hero__title {
  margin:0;
  font-family:var(--display); font-weight:800;
  font-size:clamp(34px,5.8vw,110px); line-height:1.05; letter-spacing:0.01em;
}
.hero__line { display:block; }
.hero__line--spaced { margin-top:clamp(20px,3.5vh,44px); }
.hero__script {
  font-family:var(--script); font-weight:400; font-size:0.62em;
  display:inline-block; white-space:nowrap;
  transform:rotate(-2deg); margin-top:0.08em;
}
.hero__script--red { color:var(--red); }

.hero__meta { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.hero__dash { width:64px; height:2px; background:var(--red); }
.hero__kicker { font-size:13px; font-weight:500; letter-spacing:0.14em; color:var(--muted); }

/* ---------- Stats ---------- */
.stats {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  border-bottom:var(--rule);
}
.stat { padding:clamp(24px,3.5vw,44px); border-right:var(--rule); }
.stat:last-child { border-right:0; }
.stat__num {
  font-family:var(--display); font-weight:800;
  font-size:clamp(30px,3.6vw,64px); line-height:1;
}
.stat__label {
  font-size:11px; font-weight:700; letter-spacing:0.22em;
  color:var(--muted); margin-top:8px;
}

/* ---------- Home: doors ---------- */
.doors {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  border-bottom:var(--rule);
}
.door {
  display:flex; flex-direction:column; justify-content:space-between; gap:60px;
  padding:clamp(28px,4vw,52px);
  border-right:var(--rule);
  min-height:34vh;
}
.door:hover { background:var(--white); color:var(--black); }
.door__num { font-size:11px; font-weight:700; letter-spacing:0.24em; color:var(--muted); }
.door__body { display:flex; flex-direction:column; gap:14px; }
.door__title {
  font-family:var(--display); font-weight:800;
  font-size:clamp(24px,3vw,52px); line-height:1.05; overflow-wrap:anywhere;
}
.door__arrow {
  font-family:var(--display); font-weight:800;
  font-size:clamp(24px,3vw,52px); line-height:1;
}
.door--cta { border-right:0; background:var(--red); color:var(--black); }
.door--cta:hover { background:var(--white); color:var(--black); }
.door--cta .door__num { color:inherit; }

/* ---------- Shared page header ---------- */
.page-header {
  padding:clamp(36px,7vh,80px) var(--gutter-x);
  border-bottom:var(--rule);
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:20px; flex-wrap:wrap;
}
.page-header__title { margin:0; font-family:var(--display); font-weight:800; line-height:0.95; }
.page-header__title--work { font-size:clamp(56px,11vw,160px); }
.page-header__title--contact { font-size:clamp(48px,10vw,150px); }
.page-header__note {
  font-size:11px; font-weight:700; letter-spacing:0.22em;
  color:var(--muted); padding-bottom:8px;
}

/* ---------- Work: project index ---------- */
.projects { flex:1; }
.project { border-bottom:var(--rule); }

.project__row {
  width:100%; text-align:left;
  font:inherit; color:var(--white); background:var(--black);
  border:0; cursor:pointer;
  display:flex; align-items:center; gap:clamp(14px,2.5vw,40px);
  padding:clamp(18px,3vh,30px) var(--gutter-x);
}
.project__row:hover { background:var(--red); color:var(--black); }
.project__row[aria-expanded="true"] { background:var(--white); color:var(--black); }
.project__row[aria-expanded="true"]:hover { background:var(--red); color:var(--black); }

.project__num { font-size:12px; font-weight:700; letter-spacing:0.1em; min-width:36px; }
.project__name {
  flex:1; font-family:var(--display); font-weight:800;
  font-size:clamp(24px,4.2vw,58px); line-height:1;
}
.project__tags { font-size:10px; font-weight:700; letter-spacing:0.2em; text-align:right; }
.project__plus {
  font-family:var(--display); font-weight:800;
  font-size:clamp(20px,2.4vw,34px); line-height:0.8;
  transform:rotate(0deg); transition:transform 0.3s ease;
}
.project__row[aria-expanded="true"] .project__plus { transform:rotate(45deg); }

.project__panel {
  display:flex; gap:clamp(24px,4vw,56px); flex-wrap:wrap;
  padding:clamp(24px,4vh,44px) var(--gutter-x);
  border-top:var(--rule); align-items:flex-start;
}
.project__panel[hidden] { display:none; }
.project__media {
  flex:2 1 400px; position:relative; aspect-ratio:16/9;
  border:var(--rule); box-shadow:10px 10px 0 var(--shadow-soft); overflow:hidden;
}
.project__blurb {
  flex:1 1 240px; max-width:380px; margin:0;
  font-size:15px; line-height:1.7; color:var(--muted);
}

/* Empty media slot — awaiting real artwork */
.slot {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:16px; text-align:center;
  font-size:11px; font-weight:700; letter-spacing:0.18em;
  color:var(--dim); background:var(--shadow-soft);
}
.slot__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* Row 41 — "your brand" */
.project-open {
  display:flex; align-items:center; gap:clamp(14px,2.5vw,40px);
  padding:clamp(18px,3vh,30px) var(--gutter-x);
  border-bottom:var(--rule);
}
.project-open:hover { background:var(--white); color:var(--black); }
.project-open__num { font-size:12px; font-weight:700; letter-spacing:0.1em; min-width:36px; color:var(--red); }
.project-open__name {
  flex:1; font-family:var(--display); font-weight:800;
  font-size:clamp(24px,4.2vw,58px); line-height:1; color:var(--faint);
}
.project-open__note { font-size:10px; font-weight:700; letter-spacing:0.2em; color:var(--red); }

/* ---------- About ---------- */
.statement { padding:clamp(40px,8vh,100px) var(--gutter-x); border-bottom:var(--rule); }
.statement__title {
  margin:0; font-family:var(--display); font-weight:800;
  font-size:clamp(36px,7vw,110px); line-height:1.02; max-width:1300px;
}
.statement__lede {
  margin:clamp(20px,3vh,32px) 0 0;
  font-size:15px; font-weight:500; letter-spacing:0.1em;
  color:var(--muted); max-width:560px; line-height:1.7;
}

.founder { display:flex; flex-wrap:wrap; border-bottom:var(--rule); }
.founder__aside {
  flex:0 1 380px; min-width:280px;
  border-right:var(--rule); padding:clamp(24px,3.5vw,48px);
}
.founder__frame {
  position:relative; aspect-ratio:4/5;
  border:var(--rule); box-shadow:10px 10px 0 var(--red); overflow:hidden;
}
.founder__portrait { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.founder__caption {
  margin-top:18px; font-size:11px; font-weight:700;
  letter-spacing:0.22em; color:var(--muted);
}
.founder__body {
  flex:1 1 400px; padding:clamp(24px,3.5vw,48px);
  display:flex; flex-direction:column; justify-content:center; gap:22px;
}
.founder__quote {
  margin:0; font-family:var(--display); font-weight:500;
  font-size:clamp(20px,2.4vw,32px); line-height:1.45; max-width:640px;
}
.founder__signature {
  font-family:var(--script); color:var(--red); font-size:30px;
  transform:rotate(-4deg); align-self:flex-start;
}

.caps { padding:clamp(32px,5vh,64px) var(--gutter-x); border-bottom:var(--rule); flex:1; }
.caps__label { font-size:11px; font-weight:700; letter-spacing:0.24em; color:var(--red); margin-bottom:24px; }
.caps__list { display:flex; flex-wrap:wrap; gap:12px; list-style:none; margin:0; padding:0; }
.cap { border:var(--rule); padding:12px 20px; font-size:12px; font-weight:700; letter-spacing:0.16em; }

.cta-band {
  display:block; padding:clamp(32px,6vh,72px) var(--gutter-x);
  border-bottom:var(--rule); background:var(--red); color:var(--black);
}
.cta-band:hover { background:var(--white); color:var(--black); }
.cta-band__text {
  font-family:var(--display); font-weight:800;
  font-size:clamp(30px,5.5vw,80px); line-height:1;
}

/* ---------- Contact ---------- */
.contact-main { flex:1; display:flex; flex-wrap:wrap; }

.brief {
  flex:2 1 480px; min-width:300px;
  padding:clamp(24px,4vw,56px); border-right:var(--rule);
  display:flex; flex-direction:column; gap:clamp(24px,3.5vh,36px);
}
.brief__pair { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); gap:20px; }

.field { display:flex; flex-direction:column; gap:10px; }
.field--chips { gap:12px; }
.field__label { font-size:11px; font-weight:700; letter-spacing:0.22em; color:var(--muted); }

.input {
  background:var(--black); border:var(--rule); color:var(--white);
  font-size:16px; padding:14px; outline:none; font-family:inherit;
}
.input:focus { border-color:var(--red); }
.input::placeholder { color:var(--dim); }
textarea.input { line-height:1.6; resize:vertical; }

.chips { display:flex; flex-wrap:wrap; gap:10px; }
.chip {
  cursor:pointer; background:var(--black); color:var(--white);
  border:var(--rule); padding:10px 18px;
  font-family:inherit; font-size:12px; font-weight:700; letter-spacing:0.14em;
}
.chip:hover { border-color:var(--red); }
.chip[aria-pressed="true"] { background:var(--white); color:var(--black); }

.brief__actions { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.send {
  cursor:pointer; background:var(--red); color:var(--black);
  border:2px solid var(--red); box-shadow:8px 8px 0 var(--white);
  padding:16px 32px;
  font-family:var(--display); font-weight:800; font-size:15px; letter-spacing:0.1em;
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.send:hover { transform:translate(4px,4px); box-shadow:2px 2px 0 var(--white); }
.send-hint { font-size:10px; font-weight:700; letter-spacing:0.18em; color:var(--dim); }
.send-note { font-family:var(--script); color:var(--red); font-size:20px; }

.channels { flex:1 1 280px; min-width:260px; display:flex; flex-direction:column; }
.channel {
  flex:1; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:clamp(20px,3vh,32px) clamp(24px,3vw,40px);
  border-bottom:var(--rule);
  font-family:var(--display); font-weight:800; font-size:clamp(18px,1.8vw,26px);
}
.channel:hover { background:var(--white); color:var(--black); }
.channels__where {
  padding:clamp(20px,3vh,32px) clamp(24px,3vw,40px);
  font-size:11px; font-weight:700; letter-spacing:0.22em; color:var(--muted); line-height:2;
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  * { transition-duration:0.01ms !important; }
}