/* ============================================================
   Robin Strutt — Portfolio
   ============================================================ */

:root {
  --color-bg: #F1EFE9;
  --color-bg-tint: #ECE9E1;
  --color-panel: #E3E0D7;
  --color-ink: #111114;
  --color-ink-soft: #3A3934;
  --color-muted: #6B6862;
  --color-faint: #A6A29A;
  --color-label: #8B877D;
  --color-orange: #FF4D19;
  --color-teal: #1F5E5B;
  --color-teal-soft: #7FA9A4;
  --hairline: rgba(17, 17, 20, 0.12);

  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body: 'Geist', system-ui, sans-serif;
  --font-mono: 'Geist Mono', monospace;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --max-width: 1400px;
}

/* ---------- Reset & base ---------- */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  overflow-x: hidden;
}

img, image-slot { max-width: 100%; }

a { color: var(--color-ink); text-decoration: none; }
a:hover { color: var(--color-orange); }

::selection { background: var(--color-orange); color: var(--color-bg); }

.page { width: 100%; }
.wrap { max-width: var(--max-width); margin: 0 auto; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-orange);
  margin-bottom: 28px;
}

.section {
  padding: clamp(56px, 8vw, 112px) clamp(18px, 5vw, 40px) clamp(48px, 7vw, 96px);
  border-bottom: 1px solid var(--hairline);
}

.section-title {
  margin: 0 0 28px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 3.2vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  max-width: 900px;
  text-wrap: pretty;
}

/* ---------- Reveal-on-scroll ---------- */

.has-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}

.has-reveal [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@keyframes riseIn { from { opacity: 0; transform: translateY(1.1em); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Buttons & expand controls ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  white-space: nowrap;
  min-height: 44px;
  padding: 0 20px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.btn-primary {
  background: var(--color-ink);
  color: var(--color-bg);
  transition: background .25s ease;
}
.btn-primary:hover { background: var(--color-orange); }

.btn-outline {
  border: 1px solid rgba(17, 17, 20, 0.22);
  transition: border-color .25s ease, color .25s ease;
}
.btn-outline:hover { border-color: var(--color-teal); color: var(--color-teal); }

.expand-btn {
  display: none;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  padding: 0 0 6px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-ink);
  transition: color .25s ease, border-color .25s ease;
  justify-self: start;
}
.expand-btn:hover { color: var(--color-orange); border-color: var(--color-orange); }
.expand-btn.is-visible { display: inline-flex; }

.expand-panel {
  overflow: hidden;
  transition: max-height .6s var(--ease-out), opacity .4s ease;
}
.expand-panel--collapsed { max-height: 0; opacity: 0; }
.expand-panel p { margin: 0; }

/* ---------- Tags & chips ---------- */

.tag-chip {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 11px;
  border: 1px solid rgba(31, 94, 91, 0.3);
  border-radius: 999px;
  color: var(--color-teal);
}

.client-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 11px;
  border: 1px solid rgba(17, 17, 20, 0.22);
  border-radius: 999px;
  color: var(--color-ink-soft);
}
.client-chip client-logo { height: 13px; }
.client-chip client-logo img { height: 100%; width: auto; display: block; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 14px clamp(18px, 5vw, 40px);
  background: rgba(241, 239, 233, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
  transition: box-shadow .3s ease, background-color .3s ease;
}
.site-header.is-scrolled {
  background-color: rgba(241, 239, 233, 0.97);
  box-shadow: 0 6px 20px rgba(17, 17, 20, 0.10);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  flex-shrink: 0;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.03em;
}
.logo-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-orange);
  transform: translateY(-2px);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 26px);
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.navlink { position: relative; display: inline-block; color: var(--color-muted); transition: color .25s ease; }
.navlink::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background-color: transparent; transition: background-color .25s ease; }
.navlink:hover { color: var(--color-ink); }
.navlink.active { color: var(--color-teal); }
.navlink.active::after { background-color: rgba(31, 94, 91, 0.4); }
.navlink.active:hover { color: var(--color-orange); }
.navlink.active:hover::after { background-color: var(--color-orange); }

.icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--color-muted);
  transition: color .25s ease;
}
.icon-link:hover { color: var(--color-ink); }

/* ---------- Hero ---------- */

.hero-section { padding: clamp(44px, 7vw, 84px) clamp(18px, 5vw, 40px) clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--hairline); }

.hero-photo {
  --hero-photo-size: clamp(86px, 17.6vw, 154px);
  float: right;
  width: var(--hero-photo-size);
  max-width: var(--hero-photo-size);
  aspect-ratio: 1 / 1;
  position: relative;
  margin: 26px 20px 34px 20px;
  border-radius: 50%;
}
.hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--color-orange);
  transform: translate(10px, 10px);
  pointer-events: none;
}
.hero-photo image-slot { border-radius: 50%; }

@media (min-width: 1000px) {
  .hero-photo {
    margin-right: calc((100% - 52ch - var(--hero-photo-size)) / 2);
  }
}

.hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 6.4vw, 86px);
  line-height: 0.94;
  letter-spacing: -0.042em;
  text-wrap: balance;
}
.hero-title-mask { display: block; overflow: hidden; }
.hero-title-line { display: block; animation: riseIn .9s var(--ease-out) .05s both; }
.hero-title-line .accent { color: var(--color-orange); }

.hero-lede {
  max-width: 52ch;
  margin: 26px 0 0;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.6;
  color: var(--color-ink-soft);
  animation: fadeIn 1s ease .4s both;
}

.hero-buttons {
  clear: both;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
  animation: fadeIn 1s ease .55s both;
}

/* ---------- About ---------- */

.about-grid { display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 72px); align-items: flex-start; }
.about-col { flex: 1 1 380px; min-width: 0; }
.about-copy { display: grid; gap: 18px; max-width: 620px; font-size: 15.5px; line-height: 1.62; color: var(--color-ink-soft); }
.about-copy p { margin: 0; }

.skills-grid {
  flex: 1 1 380px;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  align-self: flex-start;
}

.skill-box { background: var(--color-bg); padding: 20px 18px 24px; transition: background .3s ease, color .3s ease; }
.skill-box:hover { background: var(--color-ink); color: var(--color-bg); }
.skill-index { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; margin-bottom: 12px; }
.skill-index--orange { color: var(--color-orange); }
.skill-index--teal { color: var(--color-teal); }
.skill-box h3 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 700; font-size: 16.5px; letter-spacing: -0.02em; }
.skill-box p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--color-muted); }

/* ---------- Clients strip ---------- */

.clients-section { padding: clamp(28px, 4vw, 44px) clamp(18px, 5vw, 40px); border-bottom: 1px solid var(--hairline); background: var(--color-bg-tint); }
.clients-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-label); margin-bottom: 20px; }
.clients-strip { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(20px, 3.5vw, 48px); }
.clients-strip client-logo { height: 30px; color: var(--color-faint); font-family: var(--font-display); font-weight: 600; font-size: clamp(15px, 2.1vw, 24px); letter-spacing: -0.02em; transition: color .3s ease; }
.clients-strip client-logo:hover { color: var(--color-ink); }
.clients-strip client-logo img { height: 100%; width: auto; display: block; filter: grayscale(1); opacity: .65; transition: filter .3s ease, opacity .3s ease; }
.clients-strip client-logo:hover img { filter: grayscale(0); opacity: 1; }

/* ---------- Work / case studies ---------- */

.work-section { padding: clamp(56px, 8vw, 110px) clamp(18px, 5vw, 40px) 40px; }

.work-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--hairline);
}
.work-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 5.4vw, 84px); line-height: 0.94; letter-spacing: -0.042em; }

.case-study {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 4.5vw, 64px);
  align-items: flex-start;
  padding: clamp(40px, 6vw, 72px) 0;
  border-bottom: 1px solid var(--hairline);
}

.case-sticky { flex: 1 1 340px; min-width: 0; position: sticky; top: 78px; }

.case-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 18px;
}
.case-index { color: var(--color-orange); }

.case-title { margin: 0 0 16px; font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2.9vw, 40px); line-height: 1.04; letter-spacing: -0.035em; }
.case-desc { margin: 0 0 24px; font-size: clamp(15px, 1.4vw, 17px); line-height: 1.55; color: var(--color-ink-soft); max-width: 520px; }
.case-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.case-detail { padding-top: 24px; display: grid; gap: 16px; font-size: 15px; line-height: 1.65; color: var(--color-ink-soft); max-width: 560px; }

.case-media { flex: 1.15 1 400px; min-width: 0; }

.shot-frame { position: relative; aspect-ratio: 4 / 3; max-height: min(620px, 75vh); margin: 0 auto; background: var(--color-panel); overflow: hidden; cursor: zoom-in; transition: aspect-ratio .35s ease; }
.shot-frame .image-slot-img { object-fit: contain !important; }
.shot-frame:focus-visible { outline: 2px solid var(--color-orange); outline-offset: -2px; }
.shot { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .5s ease; }
.shot.is-active { opacity: 1; pointer-events: auto; }

/* ---------- Lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: clamp(16px, 5vw, 56px);
  background: rgba(17, 17, 20, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox-img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 140px);
  width: auto;
  height: auto;
  object-fit: contain;
  background: var(--color-panel);
}
.lightbox-caption {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-bg);
  text-align: center;
}
.lightbox-close {
  position: absolute;
  top: clamp(14px, 3vw, 28px);
  right: clamp(14px, 3vw, 28px);
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(241, 239, 233, 0.35);
  background: transparent;
  color: var(--color-bg);
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.lightbox-close:hover { background: var(--color-orange); border-color: var(--color-orange); color: var(--color-ink); }
html.lightbox-open { overflow: hidden; }

.rail { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.rail-btn {
  flex: 1;
  min-height: 44px;
  border: 1px solid rgba(17, 17, 20, 0.2);
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.rail-btn.is-active { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-bg); }

/* ---------- Contact ---------- */

.contact-section { background: var(--color-ink); color: var(--color-bg); padding: clamp(56px, 8vw, 110px) clamp(18px, 5vw, 40px) clamp(48px, 6vw, 80px); margin-top: 60px; }
.contact-row { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 48px); justify-content: space-between; align-items: flex-end; }
.contact-email {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(19px, 2.6vw, 34px);
  letter-spacing: -0.03em;
  color: var(--color-bg);
  border-bottom: 2px solid var(--color-orange);
  padding-bottom: 8px;
  word-break: break-word;
  transition: color .25s ease;
}
.contact-email:hover { color: var(--color-orange); }
.contact-links { display: grid; gap: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-label); }
.contact-links a { color: var(--color-teal-soft); transition: color .25s ease; }
.contact-links a:hover { color: var(--color-bg); }

/* ---------- Footer ---------- */

.site-footer { background: var(--color-bg); padding: 20px clamp(18px, 5vw, 40px); border-top: 1px solid rgba(17, 17, 20, 0.1); }
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-faint);
}
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.footer-links a, .footer-icon { color: var(--color-faint); transition: color .25s ease; }
.footer-links a:hover, .footer-icon:hover { color: var(--color-ink); }
.footer-icon { display: inline-flex; align-items: center; justify-content: center; }

/* ---------- Custom elements ---------- */

image-slot { position: absolute; inset: 0; display: block; overflow: hidden; }
.image-slot-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.image-slot-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-faint);
  background: var(--color-panel);
}

client-logo { display: inline-flex; align-items: center; }
client-logo span { white-space: nowrap; }

/* ---------- Responsive ---------- */

@media (max-width: 777px) {
  .skills-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .skills-grid > .skill-box:last-child { grid-column: 1 / -1 !important; }
  .skill-box { padding: 12px 10px 14px !important; }
  .skill-box .skill-index { margin-bottom: 6px !important; }
  .skill-box h3 { font-size: 13.5px !important; margin-bottom: 5px !important; }
  .skill-box p { font-size: 11.5px !important; line-height: 1.4 !important; }

  .case-study { gap: 20px !important; padding-top: 32px !important; padding-bottom: 32px !important; }
  .case-sticky { position: static !important; top: auto !important; }
}

@media (max-width: 380px) {
  .header-inner { gap: 10px !important; }
  .nav { gap: 10px !important; }
}