/* =========================================================
   Himanshu Mestry — global stylesheet
   Mobile-first. Desktop nav breakpoint: 932px (per design spec)
   ========================================================= */

@font-face {
  font-family: "Forma DJR Display";
  src: url("../fonts/FormaDJRDisplay-Bold-Testing.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Forma DJR Text";
  src: url("../fonts/FormaDJRText-Regular-Testing.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-ink: #4d4d4d;
  /* "Iron grey" brand colour */
  --color-ink-strong: #4d4d4d;
  --color-muted: #4d4d4d;
  --color-border: #e6e6e6;
  --color-bg: #ffffff;
  --color-chip: #898a8b;

  --font-display: "Forma DJR Display", "Arial Black", Impact, sans-serif;
  --font-text:
    "Forma DJR Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;

  --sidebar-w: clamp(260px, 22vw, 336px);
  --topbar-h: 64px;
  --nav-breakpoint: 932px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-text);
  letter-spacing: 0.02em;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: #fff;
  color: #000;
  padding: 12px 18px;
}

.skip-link:focus {
  left: 12px;
  top: 12px;
}

:focus-visible {
  outline: 2px solid var(--color-ink-strong);
  outline-offset: 3px;
}

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

  html {
    scroll-behavior: auto;
  }
}

.topband {
  width: 100%;
  position: fixed;
  height: 20px;
  top: 0;
  left: 0;
  background: #fff;
}

/* =========================================================
   Logo (shared visual style — mobile topbar + desktop sidebar)
   ========================================================= */

.mobile-topbar__logo,
.sidebar__logo {
  display: inline-block;
  line-height: 0;
  /* avoid extra inline-image whitespace under the logo */
}

.mobile-topbar__logo img,
.sidebar__logo img {
  display: block;
  width: auto;
}

/* =========================================================
   Shared: social icon row + copyright (mobile overlay + sidebar)
   ========================================================= */

.nav-social {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.nav-social__link {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-chip);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.2s var(--ease),
    transform 0.2s var(--ease);
}

.nav-social__link i {
  font-size: 15px;
  line-height: 1;
}

.nav-social__link:hover,
.nav-social__link:focus-visible {
  background: var(--color-ink-strong);
  transform: translateY(-1px);
}

.nav-copyright {
  margin: 16px 0 0;
  font-size: 0.8rem;
  color: var(--color-muted);
  letter-spacing: 0.04em;
}

/* =========================================================
   MOBILE TOP BAR  (< 932px)
   ========================================================= */

.mobile-topbar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--topbar-h);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: var(--color-bg);
}

.mobile-topbar__logo img {
  height: 40px;
}

.hamburger {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hamburger__box {
  width: 22px;
  height: 14px;
  position: relative;
  display: block;
}

.hamburger__line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-ink-strong);
  border-radius: 2px;
  transition:
    transform 0.3s var(--ease),
    opacity 0.2s var(--ease),
    top 0.3s var(--ease);
}

.hamburger__line:nth-child(1) {
  top: 0;
}

.hamburger__line:nth-child(2) {
  top: 6px;
}

.hamburger__line:nth-child(3) {
  top: 12px;
}

.hamburger[aria-expanded="true"] .hamburger__line:nth-child(1) {
  top: 6px;
  transform: rotate(45deg);
}

.hamburger[aria-expanded="true"] .hamburger__line:nth-child(2) {
  opacity: 0;
}

.hamburger[aria-expanded="true"] .hamburger__line:nth-child(3) {
  top: 6px;
  transform: rotate(-45deg);
}

/* =========================================================
   MOBILE FULL-SCREEN NAV  (< 932px)
   ========================================================= */

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: calc(var(--topbar-h) + 24px) 24px 32px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity 0.28s var(--ease),
    transform 0.28s var(--ease),
    visibility 0.28s;
}

.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mobile-nav__list {
  text-align: center;
  margin-bottom: 40px;
}

.mobile-nav__link {
  display: inline-block;
  padding: 12px 0;
  font-size: 1.15rem;
  color: var(--color-muted);
  transition: color 0.2s var(--ease);
}

.mobile-nav__link.is-active,
.mobile-nav__link:hover,
.mobile-nav__link:focus-visible {
  color: var(--color-ink-strong);
}

.mobile-nav .nav-social {
  justify-content: center;
  margin-bottom: 4px;
}

.mobile-nav .nav-copyright {
  text-align: center;
}

/* =========================================================
   DESKTOP SIDEBAR  (>= 932px) — hidden by default (mobile-first)
   ========================================================= */

.sidebar,
.sidebar-toggle {
  display: none;
}

/* =========================================================
   HERO / SLIDER
   ========================================================= */

.site-main {
  padding-top: var(--topbar-h);
}

.hero {
  position: relative;
  padding: 20px 16px 40px;
}

.page__title {
  font-family: "Forma DJR Text";
  font-weight: 600;
  font-size: 0.95rem;
  color: #868686;
}

/* Below 767px there is no carousel at all: Swiper is never initialized
   (see assets/js/main.js) so .swiper-wrapper/.swiper-slide stay in their
   plain pre-JS state, and this stacks the same 4 images full-width at
   their natural aspect ratio — no cropping, no separate/duplicate markup,
   no double image download. */
.hero-slider {
  width: 100%;
}

.hero-slider .swiper-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hero-slider .swiper-slide img {
  width: 100%;
  height: auto;
  display: block;
}

.hero-slider__nav {
  display: none;
  /* shown from tablet breakpoint up — mobile/stacked view relies on scroll */
}

/* =========================================================
   >= 767px : Swiper carousel replaces the stacked view
   ========================================================= */

@media (min-width: 767px) {
  .page__title {
    display: none;
  }
  .hero-slider {
    aspect-ratio: 1225 / 919;
    background: #eaeaea;
    overflow: hidden;
    border-radius: 2px;
  }

  .hero-slider .swiper-wrapper {
    /* Sane pre-init fallback — Swiper JS takes over layout via inline
           styles once it initializes at this breakpoint. */
    flex-direction: row;
    gap: 0;
  }

  .hero-slider .swiper-slide {
    flex-shrink: 0;
    width: 100%;
  }

  .hero-slider .swiper-slide img {
    height: 100%;
    object-fit: contain;
    background-color: #fff;
  }
}

/* =========================================================
   >= 932px : desktop sidebar layout takes over
   ========================================================= */

@media (min-width: 932px) {
  .mobile-topbar,
  .mobile-nav {
    display: none;
  }

  body {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
  }

  .sidebar {
    display: block;
    position: relative;
    width: var(--sidebar-w);
    flex-shrink: 0;
    padding: 56px 40px;
    overflow: visible;
    transition:
      width 0.45s var(--ease),
      padding 0.45s var(--ease);
  }

  .sidebar__inner {
    width: calc(var(--sidebar-w) - 80px);
    min-width: 220px;
    display: flex;
    flex-direction: column;
    height: 90vh;
    opacity: 1;
    transform: translateX(0);
    transition:
      opacity 0.3s var(--ease) 0.1s,
      transform 0.35s var(--ease) 0.1s;
    position: sticky;
    top: 20px;
  }

  .sidebar__logo {
    margin-bottom: 48px;
  }

  .sidebar__logo img {
    height: clamp(46px, 4.2vw, 62px);
  }

  .sidebar__nav {
    margin-bottom: auto;
  }

  .sidebar__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    font-size: 0.95rem;
    color: #868686;
    font-weight: 600;
    white-space: nowrap;
    transition:
      color 0.2s var(--ease),
      gap 0.2s var(--ease);
  }

  .sidebar__link:hover,
  .sidebar__link:focus-visible {
    color: var(--color-ink-strong);
  }

  .sidebar__link.is-active {
    color: var(--color-ink-strong);
  }

  .sidebar__arrow {
    opacity: 0;
    transform: translateX(-4px);
    transition:
      opacity 0.2s var(--ease),
      transform 0.2s var(--ease);
    flex-shrink: 0;
  }

  .sidebar__link.is-active .sidebar__arrow,
  .sidebar__link:hover .sidebar__arrow,
  .sidebar__link:focus-visible .sidebar__arrow {
    opacity: 1;
    transform: translateX(0);
  }

  .sidebar__inner .nav-social {
    margin-top: 32px;
  }

  /* Collapsed state: width collapses to 0, content slides out / fades */
  .sidebar.is-collapsed {
    width: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .sidebar.is-collapsed .sidebar__inner {
    opacity: 0;
    transform: translateX(-24px);
    transition:
      opacity 0.2s var(--ease),
      transform 0.25s var(--ease);
  }

  .sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 50%;
    left: var(--sidebar-w);
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--color-border);
    color: var(--color-ink);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    z-index: 40;
    transition:
      left 0.45s var(--ease),
      transform 0.2s var(--ease),
      box-shadow 0.2s var(--ease);
  }

  .sidebar-toggle:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  }

  .sidebar-toggle svg {
    transition: transform 0.3s var(--ease);
  }

  body.sidebar-collapsed .sidebar-toggle {
    left: 16px;
  }

  body.sidebar-collapsed .sidebar-toggle svg {
    transform: rotate(180deg);
  }

  .site-main {
    padding-top: 0;
    flex: 1 1 auto;
    min-width: 0;
    /* allow flex child to shrink below content size */
  }

  .hero {
    /* Nav arrow offsets are derived from these via calc() below, rather
       than being separate hand-picked pixel values — that's what let
       the two sides drift out of sync before (left/right padding and
       the prev/next offsets were tuned independently, so the visual
       gap to the image ended up different on each side). Changing the
       padding or button size here now keeps both arrows equidistant
       automatically. */
    --hero-pad-left: 92px;
    --hero-pad-right: 72px;
    --hero-nav-size: 44px;
    --hero-nav-gap: 18px;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 56px var(--hero-pad-right) 56px var(--hero-pad-left);
    transition: padding 0.45s var(--ease);
  }

  /* Sidebar gone: the toggle now lives near the viewport edge, so give the
       prev arrow more clearance and reclaim some of the freed-up gutter. */
  body.sidebar-collapsed .hero {
    --hero-pad-left: 100px;
  }

  .hero-slider {
    max-height: calc(100vh - 112px);
  }

  .hero-slider__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--hero-nav-size);
    height: var(--hero-nav-size);
    color: var(--color-ink);
    transition:
      color 0.2s var(--ease),
      transform 0.2s var(--ease);
  }

  .hero-slider__nav:hover,
  .hero-slider__nav:focus-visible {
    color: var(--color-ink-strong);
  }

  .hero-slider__nav--prev {
    left: calc(var(--hero-pad-left) - var(--hero-nav-size) - var(--hero-nav-gap));
  }

  .hero-slider__nav--next {
    right: calc(var(--hero-pad-right) - var(--hero-nav-size) - var(--hero-nav-gap));
  }
}

@media (min-width: 1200px) {
  .hero {
    --hero-pad-right: 100px;
    --hero-nav-size: 60px;
  }

  .hero-slider__nav--prev svg,
  .hero-slider__nav--next svg {
    width: 100%;
    height: 100%;
  }
}

/* =========================================================
   Shared interior-page padding (contact, about, and future pages)
   ========================================================= */

.page {
  padding: 24px 16px 64px;
}

@media (min-width: 932px) {
  .page {
    padding: 64px 72px 96px 56px;
  }
}

/* =========================================================
   CONTACT PAGE
   ========================================================= */

.contact__intro {
  margin-bottom: 36px;
}

.contact__name {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-ink);
}

.contact__meta {
  margin: 0 0 2px;
  font-size: 0.95rem;
  color: var(--color-muted);
}

.contact__meta a {
  transition: color 0.2s var(--ease);
}

.contact__meta a:hover,
.contact__meta a:focus-visible {
  color: var(--color-ink-strong);
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 640px;
  grid-template-areas:
    "first"
    "last"
    "phone"
    "email"
    "subject"
    "story"
    "submit";
}

.field {
  display: flex;
  flex-direction: column;
}

.field label {
  margin-bottom: 10px;
  font-size: 0.92rem;
  color: var(--color-ink);
}

.field input,
.field textarea {
  width: 100%;
  border: 1px solid #cfcfcf;
  background: #fff;
  padding: 14px 16px;
  font-family: var(--font-text);
  font-size: 0.95rem;
  color: var(--color-ink-strong);
  letter-spacing: 0.01em;
  transition: border-color 0.2s var(--ease);
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-ink-strong);
}

.field textarea {
  resize: vertical;
  min-height: 130px;
}

.field--first {
  grid-area: first;
}

.field--last {
  grid-area: last;
}

.field--email {
  grid-area: email;
}

.field--phone {
  grid-area: phone;
}

.field--subject {
  grid-area: subject;
}

.field--story {
  grid-area: story;
}

.field--submit {
  grid-area: submit;
}

.btn-submit {
  align-self: flex-start;
  padding: 14px 34px;
  background: var(--color-ink);
  color: #fff;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  min-height: 44px;
  transition: background-color 0.2s var(--ease);
}

.btn-submit:hover,
.btn-submit:focus-visible {
  background: #000;
}

.field__error {
  margin: 8px 0 0;
  font-size: 0.85rem;
  color: #b3261e;
}

.field:has(.field__error) input,
.field:has(.field__error) textarea {
  border-color: #b3261e;
}

.contact-form__success {
  max-width: 640px;
  padding: 20px 24px;
  border: 1px solid var(--color-border);
  font-size: 0.98rem;
  color: var(--color-ink-strong);
}

@media (min-width: 932px) {
  .contact__intro {
    margin-bottom: 48px;
  }

  .contact-form {
    max-width: 1040px;
    column-gap: 48px;
    row-gap: 1rem;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "first   last"
      "email   phone"
      "subject subject"
      "story   story"
      "submit  submit";
  }
}

/* =========================================================
   ABOUT PAGE
   ========================================================= */

.about-heading {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 5px;

  /* 
    font-weight: 700;
    text-transform: uppercase;
    font-size: clamp(1.35rem, 1.8vw, 1.6rem);
    color: var(--color-muted);
    margin-bottom: 1rem; */
}

.about__body {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.about__portrait {
  flex-shrink: 0;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #ececec;
  border-radius: 2px;
  width: 280px;
  height: 280px;
}

.about__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about__bio {
  max-width: 760px;
}

.about__bio p {
  margin: 0 0 22px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-muted);
  letter-spacing: 1px;
}

.about__bio p:last-child {
  margin-bottom: 0;
}

@media (min-width: 932px) {
  .about-heading {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: clamp(1.35rem, 1.8vw, 1.6rem);
    color: var(--color-muted);
    margin-bottom: 1rem;
  }

  .about__portrait {
    position: sticky;
    top: 1rem;
  }

  .about__body {
    flex-direction: row;
    align-items: flex-start;
    gap: 72px;
  }

  .about__portrait {
    /* width: clamp(260px, 26vw, 380px); */
    width: 260px;
  }
}

/* =========================================================
   GALLERY PAGES (Street B&W, Street Colour, future photo-grid pages)
   CSS Grid, not multi-column: grid preserves left-to-right,
   top-to-bottom DOM order (matches the reference layout order).
   CSS multi-column instead fills each column top-to-bottom before
   moving to the next, which silently reorders the images — grid avoids
   that. Every thumb shares one pre-cropped aspect ratio, so equal-width
   grid columns give uniform row heights with no cropping needed.
   ========================================================= */

.gallery-page {
  padding-left: 12px;
  padding-right: 12px;
}

.gallery {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 12px;
}

.gallery + .gallery {
  margin-top: 12px;
}

/* new orientation group, no visible divider */

.gallery__item {
  display: block;
  background: #ececec;
  /* visible while the image is still loading */
  cursor: zoom-in;
}

.gallery__item img {
  width: 100%;
  height: auto;
  display: block;
}

@media (min-width: 600px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .gallery + .gallery {
    margin-top: 16px;
  }
}

@media (min-width: 932px) {
  .gallery-page {
    padding-left: 56px;
    padding-right: 40px;
  }

  .gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .gallery + .gallery {
    margin-top: 20px;
  }
}

/* =========================================================
   FILMS PAGE — video thumbnails get a uniform play-button
   overlay (the source screenshots only have one baked in
   inconsistently, so it's drawn here instead for every item).
   ========================================================= */

.gallery__item--video {
  position: relative;
}

.gallery__item--video::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(20, 20, 20, 0.55);
  transition:
    background-color 0.2s var(--ease),
    transform 0.2s var(--ease);
}

.gallery__item--video::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(50% + 3px);
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent #fff;
  z-index: 1;
}

.gallery__item--video:hover::after,
.gallery__item--video:focus-visible::after {
  background: rgba(20, 20, 20, 0.75);
  transform: translate(-50%, -50%) scale(1.08);
}

/* =========================================================
   FANCYBOX THEME — light backdrop instead of the library default
   dark one. !important is deliberate: the Fancybox stylesheet loads
   from its CDN after ours, so it would otherwise win on source order.
   ========================================================= */

.fancybox__backdrop {
  background: #ffffff !important;
}

.fancybox__container {
  color: var(--color-ink-strong) !important;
}

.fancybox__toolbar,
.fancybox__caption,
.fancybox__nav,
.fancybox__thumbs,
.fancybox__container .f-button {
  color: var(--color-ink-strong) !important;
}

.fancybox__container .f-button {
  background: #ffffff !important;
}

.fancybox__container .f-button:hover {
  color: #000 !important;
  background: rgba(0, 0, 0, 0.06) !important;
}

.fancybox__caption {
  text-shadow: none !important;
}

.fancybox__infobar {
  text-shadow: none !important;
}

.fancybox__container .f-button svg,
.fancybox__nav svg {
  filter: none !important;
}

/* Films: Fancybox positions the per-slide close button on video
   content just outside the top-right corner of the video by default
   (top: -38px), but its own bundled CSS switches that to top: 5px
   below a width breakpoint, moving it to sit ON TOP of the video
   instead. Force the "outside" position at every size. */
.fancybox__slide.has-youtube .f-button.is-close-btn {
  top: -38px !important;
  right: 0 !important;
}

/* Films: prev/next arrows overlap the video on narrow screens, so they're
   hidden below 767px (same breakpoint the mobile lightbox-disable logic in
   gallery.js uses) and kept at 767px and up. Photo galleries are unaffected
   in practice — their Fancybox modal is already blocked from opening at all
   below 767px (see gallery.js), so this rule never applies to them. */
@media (max-width: 766px) {
  .fancybox__nav {
    display: none !important;
  }
}

@media (max-width: 576px) {
  .about__portrait {
        width: 240px;
        height: 240px;
  }
}