/* maquette — shared styles */
@font-face {
  font-family: 'Archivo'; font-weight: 200; font-display: swap;
  src: url('assets/fonts/archivo-latin-200-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo'; font-weight: 300; font-display: swap;
  src: url('assets/fonts/archivo-latin-300-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo'; font-weight: 400; font-display: swap;
  src: url('assets/fonts/archivo-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Plex Mono'; font-weight: 400; font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}
* { margin: 0; box-sizing: border-box; }
:root {
  --bg: #050505;
  --ink: #e9e7e2;
  --dim: #a9a7a0;
  --faint: #8f8d86;
  --accent: #f2b968;
  --pad: clamp(20px, 3vw, 44px);
}
body {
  background: var(--bg);
  color: var(--ink);
  font: 300 14px/1.55 'Archivo', 'Helvetica Neue', ui-sans-serif, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

header {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: max(34px, calc(env(safe-area-inset-top) + 16px)) var(--pad) 34px;
}
header.over { position: absolute; top: 0; left: 0; right: 0; z-index: 3; }
.mark { font-size: 14px; font-weight: 400; letter-spacing: .26em; white-space: nowrap; }
header.over .mark, header.over nav {
  text-shadow: 0 1px 14px rgba(0,0,0,.85), 0 0 3px rgba(0,0,0,.7);
}
nav { display: flex; gap: clamp(14px, 2.2vw, 30px); font-size: 12px; letter-spacing: .22em; color: #b9b7b0; }
nav a:hover, nav a[aria-current] { color: var(--ink); }

.cap {
  font: 400 10.5px/1.6 'Plex Mono', ui-monospace, monospace;
  letter-spacing: .14em; color: var(--faint);
}

/* home */
.hero { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.hero img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.94); }
.hero .shade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5,5,5,.78) 0, transparent 30%),
              linear-gradient(to bottom, rgba(5,5,5,.88) 0, rgba(5,5,5,.45) 14%, transparent 34%);
}
.herometa {
  position: absolute; left: var(--pad); bottom: 40px; z-index: 2;
  display: flex; flex-direction: column; gap: 18px; align-items: flex-start;
}
.hero .line { font-size: 14px; letter-spacing: .06em; color: #d8d6cf; pointer-events: none; }
.cta2 {
  display: inline-block; padding: 11px 20px; border: 1px solid rgba(242, 185, 104, .6);
  border-radius: 6px; color: var(--accent); font-size: 13px; letter-spacing: .08em;
  background: rgba(5, 5, 5, .45); backdrop-filter: blur(6px);
  transition: background .25s, color .25s;
}
.cta2:hover { background: var(--accent); color: #171310; }
.heromodel {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  opacity: 0; transition: opacity 1.4s ease; pointer-events: none;
}
.hero.live .heromodel { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .heromodel { transition: none; }
}
.hero .shade { pointer-events: none; z-index: 1; }
.modelhint {
  position: absolute; right: var(--pad); bottom: 40px; z-index: 2;
  pointer-events: none; color: #b9b7b0; transition: opacity .9s;
}
.modelhint.gone { opacity: 0; }

.def { padding: 16vh var(--pad); max-width: 760px; }
.def .word {
  font: 400 13px/1 'Plex Mono', ui-monospace, monospace; letter-spacing: .18em;
  color: var(--accent); margin-bottom: 22px;
}
.def p { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.45; font-weight: 200; color: #dedcd5; }

/* work entries (home strip + work page) */
.entry { display: block; position: relative; }
.entry img { width: 100%; height: min(72vh, 640px); object-fit: cover; display: block; filter: brightness(.94); transition: filter .3s; }
.entry:hover img { filter: brightness(1.02); }
.entry .cap { padding: 14px var(--pad) 0; }
.entry + .entry { margin-top: 9vh; }
.works { padding-bottom: 12vh; }
.works .head { padding: 10vh var(--pad) 5vh; }
.works .head a { color: var(--dim); }
.works .head a:hover { color: var(--ink); }

/* text pages */
.page { padding: 8vh var(--pad) 14vh; max-width: 640px; }
.page h2 {
  font: 400 12px/1 'Plex Mono', ui-monospace, monospace; letter-spacing: .2em;
  color: var(--accent); margin: 6vh 0 16px; font-weight: 400;
}
.page h2:first-child { margin-top: 0; }
.page p { color: #d3d1ca; font-size: 15.5px; max-width: 56ch; }
.page p + p { margin-top: 1em; }
.page .big { font-size: clamp(20px, 2.2vw, 26px); font-weight: 200; line-height: 1.5; color: #dedcd5; }

footer {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 40px var(--pad) max(44px, calc(env(safe-area-inset-bottom) + 24px)); border-top: 1px solid #161616;
}
footer .cap a:hover { color: var(--ink); }

@media (max-width: 640px) {
  header { flex-direction: column; gap: 14px; padding-top: max(56px, calc(env(safe-area-inset-top) + 12px)); align-items: flex-start; }
  nav { font-size: 11px; letter-spacing: .18em; }
  .modelhint { bottom: 158px; }
  .entry img { height: 48vh; }
}