/* =========================================================
   Roto — portfolio site
   Design tokens first (hex fallback, then oklch where supported),
   then layout/components. Fluid spacing via clamp() so the page
   holds up from small phones to wide desktops without extra
   breakpoints; a couple of grid layouts get an explicit stack
   breakpoint further down.
   ========================================================= */

:root {
  --bg: #0a0a0b;
  --surface: #141415;

  --text: #f2efe8;
  --text-soft: #c3beb3;
  --text-mute: #86827a;

  --border: #2d2a26;
  --border-strong: #5c584f;

  --accent: #d8783a;
  --accent-ink: #0a0a0b;

  --font-display: 'Bebas Neue', 'Hiragino Sans', sans-serif;
  --font-body: 'Work Sans', 'Hiragino Sans', sans-serif;

  --page-x: clamp(20px, 5vw, 44px);
}

@supports (color: oklch(0.5 0.1 50)) {
  :root {
    --text: oklch(0.96 0.006 80);
    --text-soft: oklch(0.78 0.01 80);
    --text-mute: oklch(0.58 0.01 80);
    --border: oklch(0.22 0.01 80);
    --border-strong: oklch(0.4 0.01 80);
    --accent: oklch(0.68 0.19 45);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible { color: var(--accent); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

img { max-width: 100%; display: block; }

::selection { background: var(--accent); color: var(--accent-ink); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- layout helpers ---------- */

.section { padding: clamp(50px, 9vw, 100px) var(--page-x); }
.section--border-top { border-top: 1px solid var(--border); }

/* ---------- header / nav ---------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px var(--page-x);
  flex-wrap: wrap;
}

.site-header--fixed {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  /* Never fades to fully transparent — otherwise whatever scrolls
     underneath (e.g. the About heading) shows through and overlaps
     the nav text. */
  background: linear-gradient(to bottom, rgba(10, 10, 11, 0.85), rgba(10, 10, 11, 0.6));
}

.site-header--sticky {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.site-header--static {
  border-bottom: 1px solid var(--border);
}

.logo {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 3px;
}

.main-nav {
  display: flex;
  gap: clamp(16px, 3vw, 34px);
  font-size: 12px;
  letter-spacing: 1.8px;
  font-weight: 500;
}

.main-nav .is-current { color: var(--accent); }

.lang-switch {
  display: flex;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 1px;
  font-weight: 600;
}

.lang-switch button {
  background: none;
  border: none;
  padding: 4px 2px;
  font: inherit;
  letter-spacing: inherit;
  color: var(--text-mute);
  cursor: pointer;
}

.lang-switch button.is-active { color: var(--accent); }

.lang-switch .sep { color: var(--border-strong); }

/* ---------- hero (home) ---------- */

.hero {
  position: relative;
  height: 100vh;
  min-height: 560px;
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 11, 0.9), rgba(10, 10, 11, 0.15) 45%);
  pointer-events: none;
}

.hero-content {
  position: absolute;
  left: var(--page-x);
  right: var(--page-x);
  bottom: clamp(32px, 8vh, 64px);
}

.hero-title {
  font-family: var(--font-display);
  font-size: min(18vw, 190px);
  line-height: 0.85;
  letter-spacing: 2px;
  margin: 0;
}

.hero-phrase {
  font-size: 16px;
  letter-spacing: 4px;
  font-weight: 600;
  color: var(--accent);
  margin-top: 10px;
}

/* ---------- about (home) ---------- */

.about-eyebrow {
  font-family: var(--font-display);
  font-size: min(9vw, 80px);
  letter-spacing: 1px;
  margin: 0 0 34px;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
  align-items: end;
}

.about-portrait {
  width: 100%;
  height: 640px;
  object-fit: cover;
}

.about-copy {
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

.stat-number {
  font-family: var(--font-display);
  font-size: min(10vw, 110px);
  line-height: 0.85;
  color: var(--accent);
}

.stat-label {
  font-size: 14px;
  letter-spacing: 3px;
  font-weight: 600;
  margin-top: 8px;
}

.bio-lines {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bio-lines p {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-soft);
  max-width: 560px;
}

/* ---------- works strip (home) / works grid (works page) ---------- */

.strip-label {
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--text-mute);
  font-weight: 600;
  margin-bottom: 28px;
}

.h-scroll {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  overflow-x: auto;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.work-card {
  /* Flex column (not the default `display:block`) so a `<button>`'s
     content stays top-aligned in every browser — Safari otherwise
     vertically centers a button's content, which shows up as cards
     with shorter (unwrapped) titles rendering visibly lower than
     cards with longer, wrapped titles once the row stretches them
     to equal heights. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 0 0 clamp(200px, 24vw, 320px);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  font: inherit;
  color: inherit;
}

.work-card-media {
  width: 100%;
  height: clamp(220px, 24vw, 320px);
  object-fit: cover;
  background: var(--surface);
}

.work-card-placeholder {
  width: 100%;
  height: clamp(220px, 24vw, 320px);
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--text-mute);
}

.work-card-year {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-mute);
  letter-spacing: 1px;
}

.work-card-title {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

/* Works page grid reads as the main gallery, so its cards run noticeably
   larger than the Home page teaser strip (#works-strip), which stays
   compact on purpose. */
#works-grid.h-scroll { gap: 28px; }

#works-grid .work-card { flex-basis: clamp(280px, 38vw, 480px); }

#works-grid .work-card-media,
#works-grid .work-card-placeholder {
  height: clamp(320px, 38vw, 480px);
}

#works-grid .work-card-year { font-size: 13px; margin-top: 14px; }

#works-grid .work-card-title { font-size: 24px; }

.cta-row { text-align: center; }

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 1px;
  padding: 18px 34px;
  border: 1px solid var(--text);
  background: none;
  color: var(--text);
  cursor: pointer;
}

.btn-solid {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

/* ---------- social ---------- */

.social-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.social-row--footer { gap: 14px; justify-content: flex-start; }

.social-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-icon img { width: 26px; height: 26px; object-fit: contain; }

.social-icon--small { width: 32px; height: 32px; }
.social-icon--small img { width: 14px; height: 14px; }

/* ---------- footer ---------- */

.site-footer {
  padding: 34px var(--page-x);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  color: var(--text-mute);
}

/* ---------- works page ---------- */

.works-eyebrow {
  font-family: var(--font-display);
  font-size: min(9vw, 80px);
  letter-spacing: 1px;
  margin: 0;
}

.works-tabs {
  display: flex;
  gap: 28px;
  margin-top: 30px;
  flex-wrap: wrap;
}

.works-tab {
  cursor: pointer;
  background: none;
  border: none;
  font: inherit;
  font-size: 13px;
  letter-spacing: 1.5px;
  font-weight: 600;
  padding: 0 0 8px;
  border-bottom: 2px solid transparent;
  color: var(--text-mute);
}

.works-tab.is-active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

/* ---------- modal / lightbox ---------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 11, 0.9);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 4vw, 40px);
}

.modal-backdrop[hidden] { display: none; }

.modal {
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
}

.modal-media {
  position: relative;
  background: var(--bg);
}

.modal-media img {
  width: 100%;
  height: min(70vh, 560px);
  object-fit: contain;
}

.modal-media .work-card-placeholder {
  height: min(70vh, 560px);
}

.modal-next {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(10, 10, 11, 0.6);
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.modal-next[hidden] { display: none; }

.modal-counter {
  position: absolute;
  left: 16px;
  bottom: 16px;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--text);
  background: rgba(10, 10, 11, 0.6);
  padding: 5px 10px;
}

.modal-body { padding: clamp(24px, 5vw, 36px) clamp(20px, 5vw, 40px); }

.modal-year {
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--accent);
  font-weight: 600;
}

.modal-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 5vw, 34px);
  letter-spacing: 0.5px;
  margin-top: 8px;
}

.modal-detail {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-soft);
  margin-top: 18px;
}

.modal-close {
  display: inline-block;
  margin-top: 28px;
  cursor: pointer;
  font-size: 12px;
  letter-spacing: 2px;
  font-weight: 600;
  border: 1px solid var(--border-strong);
  background: none;
  color: var(--text);
  padding: 12px 22px;
  font-family: var(--font-body);
}

/* ---------- contact page ---------- */

.contact-shell {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(30px, 6vw, 60px) var(--page-x);
}

.contact-card {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  max-width: 1100px;
  width: 100%;
  background: var(--surface);
}

.contact-portrait {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
}

.contact-info {
  padding: clamp(32px, 6vw, 56px) clamp(24px, 5vw, 52px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  min-width: 0;
}

.contact-eyebrow {
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--accent);
  font-weight: 600;
}

.contact-agency {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 1px;
}

.contact-note {
  font-size: 13px;
  color: var(--text-mute);
  margin-top: 4px;
}

.contact-address {
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.6;
  margin-top: 10px;
}

.contact-lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
}

.contact-lines .label {
  color: var(--text-mute);
  letter-spacing: 1px;
}

.contact-socials {
  display: flex;
  gap: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

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

/* =========================================================
   Responsive stack points
   ========================================================= */

@media (max-width: 820px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-portrait { height: 60vh; min-height: 320px; }
}

@media (max-width: 700px) {
  .contact-card { grid-template-columns: 1fr; }
  .contact-portrait { min-height: 280px; }
}

/* Phones: a full-body portrait inside a 100vh hero on a tall, narrow
   viewport reads as an overly elongated sliver. Cap the hero/portrait
   heights, frame tighter on the upper body, and tighten vertical
   rhythm so the page feels composed for the screen instead of just
   a squeezed-down desktop layout. */
@media (max-width: 600px) {
  .section { padding-block: 44px; }

  .hero { height: min(58vh, 460px); min-height: 360px; }
  .hero-bg { object-position: center 10%; }
  .hero-content { bottom: 24px; }
  .hero-title { font-size: min(20vw, 130px); }

  .about-eyebrow { margin-bottom: 24px; }
  .about-portrait { height: min(52vh, 440px); min-height: 280px; }
  .about-grid { gap: 28px; }
  .about-copy { gap: 22px; padding-bottom: 0; }

  .contact-portrait { min-height: 220px; }
}

@media (max-width: 480px) {
  .main-nav { gap: 14px; font-size: 11px; }
  .lang-switch { font-size: 10px; }
  .social-row { gap: 14px; }
  .social-icon { width: 52px; height: 52px; }
}